Design Patterns

leeclarke edited this page Sep 13, 2010 · 5 revisions

At this early stage, ThinkUp’s design is optimized for usability and performance, though we welcome improvements in the fundamental aesthetics as well. The design must make order out of large amounts of data and allow users to quickly identify the most important elements. The primary focus of ThinkUp are the conversations prompted by the user and the responses of his friends and followers.

Colors, shapes and design elements should be used primarily to highlight key pieces of information and to improve usability.

ThinkUp design strives to be uncluttered and pleasing to the eye.

Page wireframe

The following design patterns apply to the general structure and layout of the pages.

Grids

What problem does it solve?

The site has a need for consistency among common page elements, page width and division of space. Much of the information collected by ThinkUp is best expressed in a tabular format that highlights key data and allows users to quickly scan information.

When to use the pattern

The grid should be used throughout the every page of the application. All elements can benefit from alignment to the grid. It is especially helpful when displaying tabular data.

What’s the solution?

ThinkUp utilizes a 960-pixel 24-column fixed-width grid centered on the page. The grid is based on the 960 Grid System

Color palette

What problem does it solve?

The site has a need for an uncluttered, clean presentation that helps users make sense of the presented data.

When to use the pattern

Color should be used sparingly and only to highlight key pieces of information and application functionality.

What’s the solution?

The application’s colors will rely heavily on white and shades of gray. Color will be used for clickable links and user feedback.

Text: #222222
Links: #0060E0
Link hover: red
Application core background: #444444
User navigation background: #222222
Dark gray: #666666
Light gray: #999999
Borders: #CCCCCC

Page components

Status bar

What problem does it solve?

Users need a consistant place in the application that provides certain core information and functionality regardless of what page they are on.

When to use the pattern

Every page of the application.

What’s the solution?

A thin strip across the top of all pages will be used. The status bar will be confined to displaying the latest crawler update time, functionality for switching between instances, the user’s current login name and a link to log in or log out.

Application title/logo

Menu bar

Content canvas

Footer

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.