Tablet Application Project

Tablet History

from The Ten Commandments, directed by Cecil B. DeMille

The tablets  (props shown) were actually carved from the red granite of Mount Sinai.

The Rosetta Stone

Tablet History 1968- 2011

Arthur C. Clarke's Newspad

When [Floyd] had tired of official reports, memoranda and minutes, he would plug his foolscap-sized Newspad into the ship’s information circuit and scan the latest reports from Earth. One by one, he would conjure up the world’s major electronic papers. He knew the codes of the more important ones by heart and had no need to consult the list on the back of his pad. Switching to the display’s short-term memory, he would hold the front page while he searched the headlines and noted the items that interested him.

Each had its own two-digit reference. When he punched that, a postage-sized rectangle would expand till it neatly filled the screen and he could read it with comfort. When he finished he could flash back to the complete page and select a new subject for detailed examination.

Floyd sometimes wondered if the Newspad, and the fantastic technology behind it, was the last word in man’s quest for perfect communications. Here he was, far out in space, speeding away from Earth at thousands of miles an hour, yet in a few milliseconds he could see the headlines of any newspaper he pleased. (That very word “newspaper,” of course, was an anachronistic hangover into the age of electronics.) The text was updated automatically on every hour; even if one read only the English versions, one could spend an entire lifetime doing nothing but absorbing the ever-changing flow of information from the news satellites.”

2001 A Space Odyssey, where in Chapter 9 he describes the “newspad”

DynaBook 1972

Alan Kay concocted the netbook while at the Xerox Palo Alto Research Center, only he termed it the “ DynaBook”. In a paper he published in 1972, he described a cheap, portable PC aimed primarily at children, the DynaBook had both touch-screen and keyboard, and could be used as an e-book reader, word processor and games console – complete with graphical user interface (something else that Kay had invented earlier at Xerox).

Summagraphics' BitPad (sold as Apple Graphics Tablet) 1979

The image above is of the original Apple Graphics Tablet released in 1979. At the time, the Apple II plus was the latest and greatest desktop computer offered by Apple. Interestingly enough, one of the first computer paint programs ever created ran on the Apple II in conjunction with Apple’s Graphics Tablet. The software was titled, “Utopia Graphics System,” and believe it or not, was developed by musician Todd Rundgren.

The Graphics Tablet was discontinued when the FCC found that it caused radio frequency interference problems.


Microsoft Tablet PC 2001

Microsoft Tablet PC for a pen-enabled personal computer, conforming to hardware specifications devised by Microsoft and running a licensed copy of Windows XP Tablet PC Edition

Amazon Kindle 2007

Apple's iPad 2010

Kindle Fire 2011


Apple's iPad Development

Teehan+Lax in Canada have posted an enormously useful PSD (layered photoshop file) Loader Files


Android Tablet Development

Android Design, your place for learning how to design exceptional Android apps

Galaxy Note 10.1

Galaxy Tab 2

Google Nexus 10

Teehan+Lax in Canada have posted an enormously useful PSD (layered photoshop file)


Kindle Fire 8.9" HD display (7" too) Development

Kindle Fire GUI PSD


Windows 8 Development

Designing for Windows 8 isn't much different than designing for the web.

In fact, it's a bit easier because you have PSDs for controls, layouts, components, and project templates to help you layout your UI.


UI design & graphic design… it’s not just about pretty pictures

One way is to work on most of the UI, code it all up, then try to make it look good afterward.

Another common way is to do somewhat of the opposite… start with a fairly vague idea of the UI, refine both the way the app functions and the way it looks in one big step, then implement it all in code.

Granted, this is an oversimplification of the whole process because it’s rare that anything’s as cut-and-dried as this. Often, an app’s development will be a bit broken-up and it’ll be done in “chunks”. But one of these two workflows often still applies to how each chunk is worked on.

We tend to go with the later method for creating our apps. We usually start with a “programmer mockup” that intentionally looks like crap but simply shows the basic functionality. We do this because we don’t want to steer Wolfgang in any particular direction at this early stage. So, really, the worse it looks, the better it is at this point.

It’s important to note that this isn’t all about just making things look pretty. A good app has a balance of form and function. So it’s vital that at this stage most of the app mechanics and interactivity are worked out in detail, in addition to making it look aesthetically pleasing.

What we’ve found is that it’s much more effective for us to brainstorm UI designs when working alongside with someone who can make quality graphic designs.

When you have a mockup that looks exactly like what the final app potentially will be (the “pixel-perfect” mockup), you’re better able to notice flaws and usability issues much earlier in the whole process.

Also, at least for us, it’s much more motivating to have a sweet design worked out first… then turn that into a real app. Moreover, Apple themselves are known to use a method similar to this for their apps and it’s harder to go wrong if you’re following Apple’s lead.


CS4 FLA Template

CS3 FLA Template

Templates are at 50% of the PSD GUI





Final Deliverables

One Folder titled "your name HCI 470 Project 4 Tablet App"