"Making of a Web App: Part 8 - Styleguide" by smeade

Mon, 18 Jun 2007 18:23:00 CDT

Making of a Web App is Synap Software’s step-by-step look at designing and developing a web app. In this article we get a little bit ahead of ourselves and talk about styleguides.

Early PlaybookIQ Styleguide decisions:

Use of the International Style
Tab-based navigation
Persistent search box

A styleguide communicates an application’s look and feel, including fonts, colors, element sizing, spacing, navigation, and everything else that contributes to an application’s interface; especially its visual implementation. I don’t yet need to define the look-and-feel details for PlaybookIQ. Yet I am ready to sketch the high level concepts of each screen so I needed to make some early decisions on overall style, on navigation, and to account for some persistent objects on each screen.

The Swiss Style

The International Typographic Style, also known as the Swiss Style, was Developed in Switzerland in the 1950s, and is known for a “clean, simple, and easy look”. The clean, simple, easy look is recognizable in today’s web 2.0 apps. For communicating information and clearly setting context, I like it.

Some see International Style – and any modernist style, for that matter – as worn and lacking in creativity. For them, there’s always the Myspace style.

Features of the style include:

asymmetric layouts
use of a grid
sans-serif typefaces
left justified/ragged-right text

The PlaybookIQ styleguide will also call for ample use of whitespace and large, easy to read fonts.

Tab Based

In LeadsOnRails I avoided tabs in favor of a left-hand navigation column which I liked for speed of navigation. Instead of choosing “Setup” and then “Message Templates”, for example; people can simply click “Message Templates”.

I’ve since seen the light and my new products such as PlaybookIQ have tab-based navigation. I like tabs for the way they help set a context around each screen.

Persistent Search Box

PlaybookIQ is all about ready access to information about contacts and opportunities so most of the time people will see a “Search” box somewhere on the screen. I’ll need to keep that in mind as I sketch the rough layout of each screen and plan for navigation.

Let’s Sketch

That’s about all we need to know in order to sketch each screen and think through how people will use the application. And guess what – that’s what we’ll do next.

Synap Software comments on Making of a Web App: Part 8 - Styleguide

"Making of a Web App: Part 8 - Styleguide" by smeade