How to bring Simplicity to your Web forms

In order to complete Web 2.0 Design Guide series, I’ll explain some point to bring simplicity to your pages, today. There is an unwritten law that says “An unfocused page will guide visitors to hell”. So, how to make a Focus page? Or it is better to say How to bring Simplicity to your Web forms ?

Using White Space

Most of Web 2.0 pages are flat. Actually designers use empty space of a page to make it simple and focused. For example, imagine that you have a page with a Top Menu and a Main Content area, to get focus to your Main Contents you have to use a simple Top Menu and some white space between menu and Main Contents, by this, your Top & Main Sections will separate completely and visitor will determine the content area as easy as possible. It helps that Top Navigation and Main Contents, focus to their own content with no conflict to other parts.

White Space in Web Design

Using Solid Area

You can use white space to split your page areas up in which your page sections are seperated from each other, or using Solid Areas for integrate sections. This approach help those which doesn’t like White Spaces on page and want to design an integrate page, so that, to make focus, use some Solid Areas on page. Simplest approach to make Solid areas is to use Color. You can assign different colors to different areas to distinct them. But note that you have to use different range of color for each section and finding a good composition is not so easy.

There are some Websites that gives you idea to have a good composition. One of the best one is http://www.ColorLovers.com. I like it so much, most of the time I choose one composition from suggested colors.

You have to make sure that your different areas are completly seperated by using different colors and they are in touch with each other with a good composition.

Solid Colors In Web Design

Bigger and Bold Texts

Text size in web pages can split your content areas. Actually when you got focus to an area (like Main Content or Top Menu or etc) you can break it into some local regions. You have some choices to do this, for instance, you can use images, Icons, Bold or Bigger Text sizes. (I’ll talk about using Icons and images later in another post). Using text to separate regions has some advantages like: