Curated by: Luigi Canali De Rossi

Thursday, June 17, 2010

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:

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 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 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 -


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 - MasterNewMedia


Commercial Premium Website Design Templates

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

by - 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 - MasterNewMedia

Originally prepared by 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

Robin Good and Elia Lombardi -
Readers' Comments    
blog comments powered by Disqus
posted by on Thursday, June 17 2010, updated on Tuesday, May 5 2015

Creative Commons License
This work is licensed under a Creative Commons License.




Real Time Web Analytics