Appward

What began as a project for Google to help designers and developers better understand the current state of the web and web applications quickly took on a life (and personality) all its own. In our effort to illustrate how the new advances in HTML5, CSS3, and JavaScript open up a world of dev- and user-friendly cross-platform web applications we decided the best way to lead was by example. It would be a web app about web apps, and we would leverage the tools of the day to create a feature-rich guide full of case studies, definitions and tutorials.

Drawing inspiration from old handbooks, log books (including, literally, an old lumber mill ledger full of logs) and birdwatching field guides we set out to craft the modern equivalent: a portable, pocketable go-to web app about all things web app. It would be a play within a play (within a play, at times, with the Case Studies), but who could lead us appward, to the convergent future of web development? There’s only one man for that job: Bert Appward.

Crafting the fictional persona of Bert Appward around the Guide helped shape the tone of the copy and visuals, and allowed a freedom of humor and form that might not otherwise have existed. The basic visual identity evolved from core tenets of Bert’s beliefs: academia, navigation, aspiration and convergence. A compass and overlapping circles grace the Guide’s cover, and interior pages are highlighted with the crossed quills of the Appward Academy crest. A simple, flexible, vibrant schoolbook illustration scheme highlights key concepts within the information rich content.

The Guide itself features numerous internal and external examples of web application development in both theory and practice. For the Case Study chapter we offered our own take on four different industries who could benefit from robust web apps, and took them step-by-step from concept through wireframe, interface design and user experience interaction.

From a technical perspective the Guide is an excellent example of web app development, leveraging many of the tips and best practices outlined within. It features a responsive design from widescreen to narrow to mobile, with the “book” theme adjusting accordingly. It utilizes HTML5, CSS3, JavaScript and Appcache to deliver an immersive, consistent user experience across all platforms and devices.

The result is a fun, engaging piece that reflects the convergent direction of the modern web, all wrapped up in a well-worn pixelbound binding. Appward, to the Future!

Visit http://www.html5rocks.com/webappfieldguide/toc/index/ for more.

Disciplines: Brand Strategy, Identity, Web Design

Appward

A simple strategy: Web Applications are the future. Onward, upward and Appward!Dusted off some old school books as inspiration for our new school take on a portable Field Guide.Identity development took shape--and flight--in symmetrical, upwardly-mobile designs. And a thoroughly modern moustache.The Appward crest: gracing the finest publications for decades!The Guide’s cover illustration represents the modern convergence of technology and platforms, with a nod to the courses charted by Bert Appward on the high seas A tabbed table of contents first greets users, with a dedication by Bert. Subsequent visits offer a bookmark to pick up reading where users left off.A big picture for the big picture: bright, engaging graphics help illustrate key concepts in the Guide.The guide features many tips and tricks for web app development. External examples display thumbnail tooltips.An interactive checklist encourages users to see just how apptastic their web apps are.Sample case studies make up a large portion of the Guide, including a the travel planning app seen here. Suggested HTML5 implementations are highlighted beneath each illustration.Readers can zoom in on the case study illustrations for a closer look at details and implementation strategies.Our simple, fast and lightweight photo browsing case study app soars above others.The responsive layout shrinks for smaller screens but still retains its book form. Hover tooltips abound, all ‘cut’ from scratch paper on Bert’s desk.Developers are reminded to take advantage of devices’ built-in features, and to share the Guide’s great information with their social circles.The responsive layout shrinks once more for mobile devices. The center binding is removed and ‘pages’ stack one atop another for a scrolling layout.Finally, a retrospective peek at the man behind the Guide. Bert Appward, to the Future!