Web Design

Read a few paragraphs about Web Design Concepts, below. See a brief overview of Responsive Web design with screen shots. Tap an image link below, for Web design examples and articles.

Web Design Concepts

Layout

Simple, consistent design helps visitors find their way around a Website. Google set the standard with material design. Google material design principles often use bold flat color with an uncluttered, clear, layout.

Font color, font weight, spacing, graphics, texture, color, and line, lead the Web visitor's eyes around each Web page. Good design helps visitors find what they want quickly. Great design is consistent, easy to use, and beautiful.

Games and other interactive media often apply saturated bright colors. However Web pages with more text, such as tutorials, use white space and font contrast for composition.

Link Indicators

Visual indicators let visitors know when a page element links to another page or section. Web visitors can see which graphics, shapes, and buttons provide links. User interaction cues include shadows, translucency, and color changes. Tap or hover over buttons and they float above the page with soft shadows. Tap or hover over icons and they display with different opacity levels. Tap or hover over tiles and they fill with color.

Opacity refers to the amount of background color which shows through a Web page element. For example a white icon displays grey, with 50% opacity, over a black background. Shadows, opacity, and color changes, provide visual indicators for Web visitors.

Styles

Each Website relies on a small set of style sheets. The styles provide layout, color, and some interaction for every page on a site. Change the style sheets to modify the Website quickly. Universal style sheets save time and money.

Hamburger Icon

More or Hamburger Icon

Tap Hamburger icons to see menu options slide from the top or left in a navigation drawer. The maximum number of menu options equals seven to prevent decision fatigue. Too many decisions cause confusion. Visitors leave quickly when there's difficulty finding what they want. Good design helps visitors easily find their way.

Navigation

The navigation bar directs visitors to key sections of a Web site. The navigation bar is a horizontal area with links to topical sections of a Website. Navigation bars include a set of important Web links including the hamburger icon, and perhaps home, about, and search links. The navigation bar remains the same for every page on a Website. Consistency is key to ease of navigation.

Each page includes a site map link, either within the navigation drawer or at the bottom of the Web page. Each navigation bar includes a search link or search icon. The search icon usually looks like a magnifying glass. Search or site map links should be easy to find for Web visitors looking for specific topics.

Search Icon

Search Icon

Search Engine Optimization (SEO)

The goal of SEO is to direct as many people as possible on the world wide web to your Website.

A number of tools exist to help Web masters prepare your site to receive the maximum amount of Web traffic. For example Google Adsense provides features which allow Web masters to see how many times users searched for specific words and phrases. Include applicable, sought after, words and phrases in your Web pages, to bring the most visitors to your site. Optimize each Web page with words people search often, which also match the content of the page. If online searches link to your site, high on the list, more visitors view your Website.

Additional Google features allow Web masters to track Web usage on your Website. You can see how many times users viewed various Web pages and which path visitors took to find that page. Sometimes tracking paths indicate where we lost visitors, which tells us which pages need some work. User flow teaches us how to increase visitors to the least traveled pages and maximize potential for the most traveled pages. User flow analysis also helps determine methods to direct visitors to your most important Web pages.

Good Design

Good design helps visitors find what they want quickly, whether they're on a mobile device or desktop computer. Great planning brings the maximum number of visitors to the most important pages on your site. Great design is consistent, easy to use, and beautiful.

Responsive Web Design

Responsive Web design prepares Web pages to look good on desktop and mobile devices. See a brief overview of Responsive Web design with screen shots.

Copyright © 2015 Seven Thunder Software. All Rights Reserved.