Website Design Guide: Best Practices And Examples Of Website Interface And Navigation Design Solutions

How do go about improving or creating great website designs? Unless you have some references and key principles showing you how critical legibility, layout and content organization are, in determining your site look and feel, you are going to remain unsatisfied. Solving your typical web design challenge by searching for yet another cool new web site design template is not going to get you anywhere better than where you were before. You can't achieve "design beauty" or "coolness" by adding widgets, decorations and other design fluff. Beautiful designs and great user interfaces are generally the consequence of a highly analytical work, not the results of an inspired design performance by a hip web designer.

Photo credit: Villedieu Cristophe

In this MasterNewMedia guide you will find a highly curated selection of guides, tutorials and visual samples collections that can greatly help you in understanding better what makes a great web site design and to how to distinguish a design that work from a cheapo, splashy, all-smoke-and-no-fire design template.

What is important to understand in fact is that the web design principles and best practices are not useful just for blogs, but also and even more for any kind of content-driven or service-driven website that you may want to build.

For example a few critical items that most new web sites have to take into consideration are:

• Above the fold: People should feel at home immediately when they land on your site. They do not have to scroll down to see where they are, who you are and what you have to offer them.
• Page legibility: Do not pretend to be Monet. Virtuosisms in web design is beautiful to see, but they it is not required. What really counts is whether your web page communicates clearly what you have to offer in a handful of seconds.
• Loading speed: Each and every design component you add on your web pages (widgets, plugins, Flash elements, etc.) contributes to slow down the overall load time of your content. Remember that speed is now one of the ranking factors that Google uses to rank your website inside Google search engine result pages.
• Simplicity: Stay simple. Do not throw as much content and calls for action on your pages as you possibly can. Start by focusing your design layout on a few, valuable content items and then gradually guide your reader in discovering more of it.

If, this is the focus you were looking for, here is a brief summary of the key topics you will find inside this guide:

• Wireframing and website prototyping
• Website design patterns
• Website templates
• Website navigation design
• Website design layout

Whether you are just moving your first steps in designing a new web site or you are just looking for good examples and best practices to refine your existing design work, this MasterNewMedia guide is a comprehensive resource covering all of the ground work, principles and practices you may need to improve your web site design work.

Here the new MasterNewMedia Website Design Guide:

 

 

 

Before Web Design: Wireframing and Website Prototyping

Website Prototyping Strategies

When you start a web design project, whether you're starting from an existing website, sitemap or wireframe, the first ideal step you could take is to put all of the input you have collected until now into a clickable, web-based, grayscreen prototype. And then from there you burn your final sitemap or web site wireframe. But how do you this? In this guide Eric Holter shows you what are the key steps to take when prototyping another website.

by Eric Holter - Newfangled

 

Web Design Process: From Sketchbook To Prototype

What does a website design process look like? In this guide prepared by Steven Wilson you can learn the key phases of his design process, in which he takes a basic idea and drives it from a sketch to a prototype, by showing you how he proceeds when designing a new small portfolio website (a site used to showcase your best work - like designers do).

by Steven Wilson - D79

 

Wireframing and Website Prototyping: Best Free Tools To Design Your Website

Website prototyping and wireframing tools can help you sketch out and draft your overall website architecture without the need to hire a web designer to do it. For this reason, wireframing is the first step one should consider when designing a new website. In this guide you will find the best free tools available out there for wireframing and website prototyping design work.

by Robin Good and Daniele Bazzano - MasterNewMedia

 

Wireframing And Website Prototyping: Best Tools Under $150 To Design Your Website

Wireframing and website prototyping tools allow you to take full control of your website architecture without hiring a web designer. You can build a faithful draft of what your website layout will look like without detailing color, graphics and specific design elements. In this MasterNewMedia guide you will find the best wireframing and website prototyping tools under $150 to start sketching out your site right away.

by Robin Good and Daniele Bazzano - MasterNewMedia

 

Great Examples of Sketched UI Wireframes and Mockups

Whether you're designing a user interface for a website or an iPhone app, it's always a good idea to start with a wireframe. Henry Jones has curated eighteen great examples of sketched user interfaces wireframes and mockups. A lot of these look so good that you may be inspired to start your next project with a sketch.

by Henry Jones - Web Design Ledger

 

User Interface and Web Design Wireframing Kits

Find out everything you wanted to know about actual wireframing tools and standalone applications, as well as other useful resources and samples you may need when building your own wireframe.

by Paul Andrew - Smashing Magazine

 

Website Design Patterns

What Is a Web Design Pattern

Interaction design patterns are a way to capture optimal solutions to common usability or accessibility problems in a specific context. They document interaction models that make it easier for users to understand an interface and accomplish their tasks.

In other words a design pattern is a general reusable solution to a commonly occurring problem. A design pattern is not a finished design that can be transformed directly into a ready-to-use interface. It is rather a description or template for how to solve a problem that can be used in many different situations.

by Wikipedia Editors - Wikipedia

 

Why Do You Need Web Design Patterns

What are "design patterns" and where do they come from? Find out which are the specific benefits of using design patterns and the reasons why you should incorporate them into your web design work.

by James Maioriello - Developer.com

 

Yahoo! Web Design Pattern Library

Yahoo Design Pattern Library is a collection of user interface patterns that web designers and web developers can use to take inspiration to design new web pages. In this Yahoo Library you can find a great number of useful web design patterns and typical components grouped together under a useful set of categories that includes layout, navigation, selection, rich interaction and social elements.

by Yahoo! Developer Network

 

Web Design: Pattern Library

A great collection of web design patterns, prepared and organized by interaction design consultant Martijn van Welie.

by Welie

 

Web Design Shop: Pattern Tap

Pattern Tap is an online shopoffering readily-available web design patterns organized into niched collections (navigation, buttons, design, forms, etc.).

by Pattern Tap

 

Website Templates

How To Choose an Effective Blog Template Or Theme

How do you pick the right theme for your blog? The challenge for any web site owner is that this is not an easy to take decision as it requires balancing the needs of content, function, and design ("look and feel"). Find out how to select an effective web design template in this quality analysis extracted from J.D. Meier's research on effective blogging.

by J.D. Meier - J.D. Meier's Blog

 

High-Quality E-Commerce Website Templates

Great commercial web site templates curated and selected by the editors of Smashing Magazine. Inside this collection you can find web design templates specifically prepared for WordPress, Prestashop, osCommerce, Magento, Zen Cart, CubeCart, and CRE Loaded, as well as a number of general e-commerce templates.

by Steven Snell - Smashing Magazine

 

Free Website Design Templates

Top free web site design templates collections available out there.

by Robin Good - MasterNewMedia

 

Commercial Premium Website Design Templates

Top commercial Premium web site design templates collections available out there.

by Robin Good - MasterNewMedia

 

Website Navigation Design

Website Navigation Design Strategies

What are the moast important points to consider when designing the navigation of a new website? Find out in this guide all of the basic steps required to design a website navigation system.

by M Editors - Mardiros

 

Ten Principles For Effective Website Navigation Design

If content is the heart of every website publication, then navigation is its brain and a fundamental pillar of information architecture design. When dealing with large quantities of content, the critical importance of providing high quality navigation can hardly be overestimated. Content that can't be found can't be read.

by Charlotte - Onextrapixel

 

Great Examples of Creative Website Navigation Menus

Want some inspiration? Ideas? Examples about great web navigation designs? Here they are.

by Tehseen - Pro Blog Design

 

Ideas To Design Website Navigation Menus

Additional ideas for designing web navigation systems that really work. Find out how to push your creative limits to build a web navigation solution that is both remarkable and outstanding.

by SR Editors - Six Revision

 

Website Design Layout

Interface Design: Examples and Best Practices

Utilize this full set of useful interface examples to help yourself in developing and designing better and more effective user interfaces. Specific focus is on simplicity and legibility of web pages which should be the highest, most critical priority for any buddying web designer.

by WSG Editors - Web Style Guide

 

Examples of Website Layout Solutions To Improve Your Web Designs

Which are the most effective layout solutions and techniques that you can use to create a clean and organized content layout? Find out in this guide prepared by Matt Cronin the eight user interface design techniques that include the explanation on how to use sliders, tabs, progressive layouts, structured grids, modal windows, rollover elements, accordions and mega drop-down-menus.

by Matt Cronin - Smashing Magazine

 

Examples of Excellent Website Layouts In Web Design

How do you use grids, columns and blocks to design and organize a new web site interface design? Giselle Muller showcases and curates an excellent range of great examples you can use and refer to.

by Gisele Muller - Web Design Ledger

 

Jeet Design Do: The Web Designers Ninja Formula

The key points driving my own design strategy on MasterNewMedia and elsewhere all circle around these 10 issues. Find out what they are.

by Robin Good - MasterNewMedia

Originally prepared by Robin Good and Elia Lombardi for MasterNewMedia, and first published on June 17th, 2010 as "Website Design Guide: Best Practices And Examples Of Website Interface And Navigation Design Solutions".

Photo credits:
Website Prototyping Strategies - Helder Almeida
Web Design Process: From Sketchbook To Prototype - Marja Flick
Wireframing and Website Prototyping: Best Free Tools To Design Your Website - WebDesigner Depot
User Interface and Web Design Wireframing Kits - Venus Worldwide
What Is a Web Design Pattern - Yahoo! Design Pattern Library
Why Do You Need Web Design Patterns - Alastor
How To Choose an Effective Blog Template Or Theme - Robert Kneschke
High-Quality E-Commerce Website Templates - Brian Morgan
Ten Principles For Effective Website Navigation Design - Liz Van Steenburgh
Ideas To Design Website Navigation Menus - Brian Jackson
Interface Design: Examples and Best Practices - Jefferson Han
Examples of Excellent Website Layouts In Web Design - James Steidl
Examples of Website Layout Solutions To Improve Your Web Designs - Derek Mack