Web Design Concepts
Simple, consistent design helps visitors find their way around a Website.
Google set the standard with
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.
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.
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 icons to see menu options slide from the top or left in a
The maximum number of menu options equals seven to prevent
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 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
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 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 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. Read a short overview of Responsive Web design with screen shots.