Making of a Web App is Synap Software’s step-by-step look at designing and developing a web app. In this article I share one iteration of an evolution of web application design layouts for PlaybookIQ.

I set up a flickr photostream to show screenshots as they evolved. Read the rest of this blog entry first, and then go check it out.

Key points of visual design for web applications stated as expectations from people using your application:

• Proximity: items near each other are related to each other..
• Relative size: larger elements are more important.
• Relative position: elements to the top and left are more important. Elements to the bottom and right are subsets of ‘parent’ elements above and to the left of them.
• Consistency: consistent fonts and colors make an application feel more reliable and well constructed.
• Inconsistency: an occasional inconsistency should mean that something is important or needed to be called out for some reason (e.g. red text when all other is black).
• Persistent elements like ‘home’ or ‘search’ provide confidence to roam around knowing they can always get back to familiar territory.
• Sign posts: let people know where in the app they are.
• Alignment: an application in which elements line up neatly vertically and horizontally feels more professional, is more trustworthy, and easier to use.
• Whitespace is easily understood as way to separate elements that are not directly related, while a line, shading or other elements must be processed by people scanning a page.
• Context is critical. Metaphors like tabs, sign posts, and grouping help people understand what to expect at a given point in the app and helps people focus on one thing at a time.
• Choice is painful and slow. People simply want to get something done. People do not want to be asked to perform the work of making choices. Keep navigation and activity choices to a minimum.

Making of a Web App is Synap Software’s step-by-step look at designing and developing a web app. In this article I share why, despite best attempts by the anti-paperwork crowd, I like written use cases.

Use cases:

• Contribute directly to the final, deployed app.
• Expose risks to simplicity.
• Expose the level of development work required.
• Are the easiest way to iterate, collaborate and communicate.

Making of a Web App follows the design, development and deployment of a web application. This is the seventh article in the series. In this entry we pick a name for Synap Software’s new sales team collaboration application. Here’s the steps we followed:

• Wrote down the categories, benefits, and differences that describe the app.
• Used thesaurus.com to find words relating to these categories, benefits, and differences.
• Found word combinations that made sense, sounded right, and met all our name search criteria.
• Picked a few favorites and experimented (i.e. played around) with them.
• Picked a name, slept on it. Woke up and still liked it.
• Now we are sharing it for feedback.

In this, the sixth entry in the Making of a Web App series, we take a look at choosing a name. There are two steps: pick criteria and then pick a name that meets those criteria. In this entry we look at the first step: what makes a good web application name. Key points:

• Descriptive names are a wasted opportunity to be different and memorable.
• Emotive names rock.
• The first choice of name probably will not work, because:
• you need the .com.
• A chance to verbally repeat the name to someone is ok.