Posts Tagged ‘menu’

10 Shining Examples of Grid Based Web Design and Best Practices

The grid is not just a cool-sounding word (why sci-fi loves it), but it’s also an incredibly simple and effective principle for website design. By sticking to a grid, you can make your website look sexy and clean, have it be highly readable, scannable, and navigate-able for your visitors (increasing their chances of returning), and make it easier on yourself since you’re following an existing framework when designing your website. To help with design inspiration, you’ll even get 10 shining examples of grid-based website design.

grid

Before diving into the examples, you’ll get the best practices of effective grid-based website design. They are what was learned from looking at the 10 website designs – what makes a grid-based design effective. Of course, they’re not the only practices or rules, but they are a starting point if you’re just beginning to get into grid-based design.

Without further ado, here are the best grid-based design practices, followed by 10 shining examples of grid-based website design…

From analyzing the 10 shining grid-based website designs, here are 5 best practices learned in order to create an effective grid-based website design:

  • 1. Limit the number of elements – this is forehead-slapping obvious, for sure, but bears repeating: the more elements, the bigger the clutter, so keep it easy for you and your visitors by reducing as much as possible.
  • 2. Vary the sizes of each grid – monotony tires the eyes and makes nothing stand out, so include variety in the sizes of the individual grids (not so ones next to each other are varying, but the size of the individual grid boxes for each group of grids).
  • 3. Vary the arrangement of grid sections – similar to #2: avoid monotony by having some grids expand vertically, others horizontally, some groups be forming a square, others rectangles, and so forth.
  • 4. Don’t have each grid too close together (or too far apart) – the right spacing makes your website highly readable, navigate-able, and scannable, so feel it out when spacing the individual grid squares and grid sections next to each other (or ask others if it’s too close/far if in doubt).
  • 5. Have a single big square or rectangle for the featured website element – continuing from #2, have the featured website element—the one you want to draw immediate attention to—big one single big square or rectangle, as this will make it stand out from a grid section that’s a similar size and shape but is broken up by a lot of smaller grid squares.

Okay, now onto the good stuff…

365Mag

365Mag

The international electronic music magazine website manages to juggle a lot with a multi-column design, breaking each column down into square and rectangular grids. It’s an example of how a grid helps to keep a lot of content and information manageable for both the creator and the visitor.

Beatport

Beatport

The design for electronic music’s most popular online store is literally a futuristic user interface – like some console. A huge amount of information is kept manageable, techno-looking, and fun.

Bleep

Bleep

The design for Warp Records’ online music store is just like the music it stocks – slick yet quirky, futuristic yet classic, chin-stroking yet let-hair-down fun.

BPitch Control

BPitch Control

One of Berlin’s top electronic record labels puts the focus on the artists and their latest releases in their website’s design. Like Bleep, the design reflects the futuristic yet classic aesthetic. Gotta love vectors.

BT

BT

Another example of an effective artist site’s grid layout, this time for composer/electronic artist BT’s website. An awesome subtle touch: the “_BT” keeps things techno-futuristic without needing to resort to elaborate fonts or crazy visual flourishes.

Groove Armada

Groove Armada

Groove Armada’s artist website does an excellent job balancing the flashiness with a user-friendly interface and useful content.

Kompakt

Kompakt

The Cologne, Germany-based electronic record label and shop not only uses a clean grid to arrange the content, but cleverly—not to mention cheekily—uses the grid for the navigation menu as well, having each of the pages be a record on a square.

Nine Inch Nails

Nine Inch Nails

Yet another example of an artist’s website using a grid layout effectively. The black-and-rust design immediately shows that NIN is darker, cinematic, industrial music.

Plaid

Plaid

An effective website design with no menu items – nice. A no-nonsense 3 column layout gives you all you need to know about the duo: news/blog, when and where you can see them perform next, and what’s the latest stuff they released.

Warp

Warp

Warp Records’ home base balances the abstract and obtuse thanks to a grid-based design. Admittedly not the cleanest website out there, the design is featured here specifically for the aforementioned reason – it’s a good example of how a grid can be a foundation, keeping your website design grounded and easy-enough-to-navigate as you push the visual style to the experimental edges.

These 10 examples have hopefully shown the advantages to having a grid-based website design. When done effectively, it looks clean and is highly readable, navigate-able, and scannable – great for the visitor, who will now more likely return for more. And it makes adding future elements easy for you, since you simply add some more individual grid squares to a section, or add a new grid section below or next to an existing one. No need to figure out some weird spacing or whatnot.

No go forth, and use the power of the Matrix- er, power of the grid, to create your effective and clean website design.

Over to you: Do you like designing grid-based websites? What effective techniques and tips have you picked up? Any websites that are your favorite examples? Feel free to share in the comments section below.

You might also like…

A Review of Web Design Trends from 2010 →
The Trend of Minimalist Graphic Design →
How To Control Flow Within Your Web Designs →
Accessibility Principles for the Modern Designer →
Professional Structure and Documentation in Web Design →
Clear Your Mind to Focus on What Matters →
What the Future of Cloud Computing means for Web Designers →
Beginners Guide to Using the Power of Color in Web Design →
Understanding and the Meaning of Color Within Design →


An Introduction to HTML Prototyping

Since starting work as a web designer I have always, and will always obsess over improving my project workflow, my own design pattern if you will. Never afraid to make a couple of wrong turns along the way, my intellectual pursuit has seen me produce wireframes in Photoshop, sketch them out in meticulous detail, and not so meticulous detail, test-drive prototyping software Axure and Omnigraffle and even…gulp… completely bypassed any formal ‘pre-production’ process. As you can imagine, the results were spectacular.

And then there was the HTML prototype.

Short of living in a cave for the best part of a decade, you will have undoubtedly stumbled across this technique before. An article from January 2003 on Boxes and Arrows is one of the first times it was really exposed to the web design community, and the principles of the article are still valid today.

The rise in popularity of the HTML prototype in more recent years is partly the responsibility of a witch-hunt that has served to oust the ‘web designers’ who can’t code their own designs and shone a spotlight in the faces of those who brand themselves UX Professionals.

HTML Prototype

To summaries, these days you’ve got to bring a lot more to the table if you expect to stay competitive. And it is the embodiment of this more diverse skill set that has lead so many web designers, disillusioned with a less-than-optimal workflow, into the loving embrace of the HTML prototype.

Peer Pressure

If you find that your sketches work perfectly for you – Great. If you’re a whizz with Omnigraffle – fantastic! You should only start creating HTML prototypes when it feels natural and logical for you to do so. Don’t integrate them into your workflow just because everyone else is, no matter how desperate you are to join in. I started using them because I got more proficient at hand-coding my designs. I looked at the pitfalls of the various prototyping methods I had tried, and found that creating my prototypes in HTML meant that I could have my cake and eat it too. I could take the things I liked about these pre-production methods and improve the things I didn’t. But I never bowed to the pressure of the community. I needed to arrive via my own conclusions.

The HTML prototype exposed usability issues straight away and avoided natural omissions that are often made when wireframing.

The process, as a whole, was becoming less time consuming because small changes weren’t taking hours to rectify and the code was completely re-usable when it came to the production stage.

It also allowed me to perform a reasonable level of testing. For example, seeing how adding more content would affect the page, and then making design considerations for those scenarios.

But most importantly it showed the client exactly what they would get. The HTML prototype is a perfect tool for emotionally detaching the client from any crazy aesthetic they may have cooked up in their head. It forces them to think objectively about the purpose of the website and the expectations of the user. It also creates a definitive point of sign off, where you can say to the client – this is what you are going to get for your money. Anything else might costs you.

Show and Tell

My design process starts by listing out the information, actions and user expectations of the various pages. This relies heavily on clear and direct communication with the client in addition to some careful research.

Once I have done this I will group the corresponding parts and prioritize these groups.

I then start to sketch, very crudely, until I have a well balanced, structured starting point. I also, at this stage, begin considering the semantic structure. (Is this a section or an article? – you know, that old chestnut).

HTML Prototype

Now it’s time crack open Coda and start building my prototype with HTML and CSS. I create the code exactly as I would if I were building the completed front-end of the site, avoiding any short-cuts. I often end up tweaking things once I’ve actually got them working. I’ll move things around to balance them and iron out the user experience until I am happy enough with the prototype to show it to the client.

How much detail you choose to go into with your prototype is completely up to you. The more detail – the longer it will take. The less detail – the more chance you have of running into problems when you come to build it. But one thing you should always bear in mind is that HTML prototypes are butt ugly. There’s no need to make them any less attractive than they already are. For this reason I generally build mine to a grid, especially if the site wants to transition gracefully across different view-ports (responsive web-design). I won’t, however bother with any colour or typography considerations which I know a few people will.

HTML Prototype

The final stage is to show the working prototype to the client, collect their feedback and make any necessary alterations. Explaining the purpose of the wireframe to the client and managing their expectations is essential, and is best done either over the phone or face-to-face. Telling them that
“A prototype is a rudimentary version of something designed to exhibit both form and function” probably isn’t your best line of attack, so remember who you’re talking to and tailor your explanation accordingly.

Sigh.

Make a coffee.

Queue a good few hours worth of unobtrusive dance music on Spotify.

You may now design.

So there you have it, my HTML Prototyping Handbook for Web Designers. In truth it’s more of a pamphlet, but I hope there’s enough here to inform your decision if you are interested in changing your work flow. Whether you’ve used the same technique for years, or just a couple of weeks, don’t be afraid to challenge it every once in a while, if only in the name of pursuing perfection, no-matter how unobtainable it may seem.

You might also like…

10 Completely Free Wireframe and Mockup Applications →
A Collection of Useful Web Design Wireframing Resources →
A Collection of Printable Web Browser Sketching and Wireframe Templates →
15 Javascript Web UI Libraries, Frameworks and Toolkits →
25 UI Inspiration and Design Pattern Resources →
50 Essential Web Typography Tutorials, Tips, Guides and Best Practices →
50 Useful Tools and Generators for Easy CSS Development →
20+ Resources and Tutorials for Creative Forms using CSS →
24 CSS (in some cases with jQuery) Navigation and Menu Tutorials →


15 Super-Simple jQuery Menu and Navigation Plugins

There are lots of jQuery menu and navigation plugins freely available that can do anything you could possibly imagine. We love those innovative and ground-breaking plugins we really do.

But, as we are sure you will agree, the most of the time, all we basically need is a lightweight, functional and easy to style solution. Something that we can easily slot into our templates and themes and will work without any major code tinkering and requires only minor CSS tweaks. And that is what we have for you today – 15 Super Simple jQuery Menu and Navigation solutions that should make your work that little bit easier.

Smooth Navigational Menu

Smooth Navigational Menu
Smooth Navigation Menus contents can either be from direct markup on the page, or via an external file and fetched via Ajax. And thanks to jQuery, a configurable, sleek "slide plus fade in" transition is applied during the unveiling of the sub menus. This menu supports both the horizontal and vertical (sidebar) orientation.
Smooth Navigational Menu →View the Demo →

jQuery Simple Drop Down Menu

jQuery Simple Drop Down Menu
This tiny (1kb) and versatile menu has been compiled with only 20 lines of code, achieved by removing various cumbersome mouse events from within the html code making it simpler and lighter. There's also version that does not require jQuery, which you can download here: Simple Javascript Drop-Down Menu v2.0.
jQuery Simple Drop Down Menu →View the Demo →

jdMenu Hierarchical Menu

jdMenu Hierarchical Menu
The jdMenu plugin for jQuery provides a clean, simple and elegant solution for creating hierarchical drop down menus. Its lightweight (only 3kb), supports keyboard navigation, custom animation and very easy to style.
jdMenu Hierarchical Menu →View the Demo →

jQuery Basic Menu

jQuery Basic Menu
This is a basic drop down menu, which behaves like an application menu (click to open, click to close, stays open even after hovering elsewhere). It supports menu creation through HTML markup or through JavaScript. The plugin tries to position its sub-menus inside the visible area when there is not enough space at the right or bottom border (dimensions plugin required).
jQuery Basic Menu →View the Demo →

jQuery & CSS Dropdown Menu

SjQuery & CSS Dropdown Menu
This jQuery technique and tutorial describes an extremely basic, yet powerful, method for adding dropdown menus to your application or website.
jQuery & CSS Dropdown Menu →View the Demo →

jQuery MegaMenu 2

SjQuery MegaMenu 2
jQuery MegaMenu 2 is a simple, yet feature rich, jQuery plugin to create an unbloated MegaMenu in seconds. This is actually a sequel to the popular jQuery MegaMenu Plugin, with quiet a lot of changes and improvements within the code base and its overall usability.
jQuery MegaMenu 2 →View the Demo →

Cut & Paste jQuery Mega Menu

Cut & Paste jQuery Mega Menu
This jQuery script lets you add a mega menu to any anchor link on your page, with each menu revealed using a sleek expanding animation. Customize the animation duration plus delay before menu disappears when the mouse rolls out of the anchor.
Cut & Paste jQuery Mega Menu →View the Demo →

Simple JQuery Accordion Menu

Simple JQuery Accordion MenuSimple JQuery Accordion Menu will open with the first submenu expanded and items that don't contain a submenu will behave like regular links. The panels are not limited to only lists, you can add anything, handy for those 'Apple style' accordions with content in each panel. It does allow for nested accordions.
Simple JQuery Accordion Menu →View the Demo →

jQuery Multi Level CSS Menu

jQuery Multi Level CSS Menu
This is a multi-level horizontal CSS menu created using a regular nested HTML list only as far as markup, then transformed into a fully functional drop down menu using CSS and a touch of jQuery. A fade effect is enabled by default, and sub menus will automatically readjust themselves horizontally if too close to the window's right edge.
jQuery Multi Level CSS Menu →View the Demo →

Multilevel Dropdown Menu with CSS and jQuery

Multilevel Dropdown Menu with CSS and jQuery
The first part of this tutorial is dedicated to the task of building a working CSS-only dropdown menu (also known as suckerfish menu), the second part will show you how you can pimp the whole thing with a few lines of jQuery.
Multilevel Dropdown Menu with CSS and jQuery →View the Demo →

Stylish Navigation Menu With jQuery

Stylish Navigation Menu With jQuery
In this tutorial you will learn how to make a stylish CSS + XHTML navigation menu with the help of jQuery. You are free to use it in your sites and modify it in whatever fashion you find appropriate.
Stylish Navigation Menu With jQuery →View the Demo →

jQuery Menu Bar – Swap's Corner

jQuery Menu Bar - Swap's Corner
jQuery Menu Bar – Swap's Corner →View the Demo →

Simple jQuery Dropdowns

Simple jQuery Dropdowns
Simple jQuery Dropdowns, from CSS Tricks, is as simple as you could possibly make a jQuery dropdown menu. Even with its stripped down code and minimal styling it still packs plenty of functionality for your every web design need.
Simple jQuery Dropdowns →View the Demo →

UI Potato Menu

UI Potato Menu
jQuery UI Potato Menu is a simple drop down menu for jQuery that allows for both horizontal and vertical variations.
UI Potato Menu →UI Potato Menu →

Easy to Style jQuery Drop Down Menu

Easy to Style jQuery Drop Down Menu
This tutorial will show you how to create a drop down and keep it as simple as possible so that it can be styled easily.
Easy to Style jQuery Drop Down Menu →View the Demo →

You might also like…

20 jQuery Image and Multimedia Gallery Plugins →
40 jQuery and CSS3 Tutorials and Techniques →
50 jQuery Plugins for Form Functionality, Validation, Security and Customisation →
15 CSS3 Navigation and Menu Tutorials and Techniques →
20 CSS3 Tutorials and Techniques for Creating Buttons →
24 CSS (in some cases with jQuery) Navigation and Menu Tutorials →
22 CSS Button Styling Tutorials and Techniques →
50 Fundamental jQuery Controls, Components and Plugins →
15 Javascript Web UI Libraries, Frameworks and Toolkits →
20 Awesome jQuery Enhanced CSS Button Techniques →
15 jQuery Plugins for Better Web Page Element Layouts →
20 Awesome jQuery Enhanced CSS Button Techniques →
25 Useful jQuery Tooltip Plugins and Tutorials →


Weekly Design News – Resources, Tutorials and Freebies (N.65)

This is our weekly column were we share our favorites posts, articles and resources with our readers from the previous week.

If you would like to be kept up to date with loads of fresh design news and resources, you can follow us on Twitter, on Facebook or even by subscribing to our RSS feed.

If you would like to see view some of our previous weekly design news round-ups, click here: Weekly Design News Archives →

20 Things I Learned About Browsers and the Web

20 Things I Learned About Browsers and the Web
20 Things I Learned About Browsers and the Web →

CSS Positioning 101 from A List Apart

CSS Positioning 101 from A List Apart
CSS Positioning 101 from A List Apart →

The Great Typekit Table

The Great Typekit Table
The Great Typekit Table →

Experimental Pure CSS GUI Icons

Experimental Pure CSS GUI Icons
Experimental Pure CSS GUI Icons →

Designing for iPhone 4 Retina Display: Techniques and Workflow

Designing for iPhone 4 Retina Display: Techniques and Workflow
Designing for iPhone 4 Retina Display: Techniques and Workflow →

Tips on How to Code Web Designs Better

Tips on How to Code Web Designs Better
Tips on How to Code Web Designs Better →

How To Create a Cute Popup Bar With HTML5, CSS3 and jQuery

How To Create a Cute Popup Bar With HTML5, CSS3 and jQuery
How To Create a Cute Popup Bar With HTML5, CSS3 and jQuery →

Slide-Down Mega Drop-Down Menus with Ajax and jQuery

Slide-Down Mega Drop-Down Menus with Ajax and jQuery
Slide-Down Mega Drop-Down Menus with Ajax and jQuery →

Opera mobile window chooser, recreated with jQuery

Opera mobile window chooser, recreated with jQuery
Opera mobile window chooser, recreated with jQuery →

nude.js – Nudity detection with JavaScript and HTMLCanvas

nude.js - Nudity detection with JavaScript and HTMLCanvas
nude.js – Nudity detection with JavaScript and HTMLCanvas →

Centage – The Smart'n Fluid CSS/LESS Framework

Centage - The Smart'n Fluid CSS/LESS Framework
Centage – The Smart'n Fluid CSS/LESS Framework →

Create a Realistic Folded Paper Text in Photoshop

Create a Realistic Folded Paper Text in Photoshop
Create a Realistic Folded Paper Text in Photoshop →

Classic Programming Quotes from the Storm Development Blog

Classic Programming Quotes from the Storm Development Blog
Classic Programming Quotes from the Storm Development Blog →

40 Mindblowing Photoshop Masterpieces

40 Mindblowing Photoshop Masterpieces
40 Mindblowing Photoshop Masterpieces →

National Geographic's Photography Contest 2010 (40+ Hi-Res Images)

National Geographic's Photography Contest 2010 (40+ Hi-Res Images)
National Geographic's Photography Contest 2010 (40+ Hi-Res Images) →

MightyDeals – Daily Deals for Creative Professionals

MightyDeals - Daily Deals for Creative Professionals
MightyDeals – Daily Deals for Creative Professionals →

Freebie: FatC Typeface

Freebie: FatC Typeface
Freebie: FatC Typeface →

Freebie: GardenC Typeface

Freebie: GardenC Typeface
Freebie: GardenC Typeface →

Freebie: Newsletter Sign-Up Form PSD

Freebie: Newsletter Sign-Up Form PSD
Freebie: Newsletter Sign-Up Form PSD →

Freebie: Vector Brushes Ver. 1.0

Freebie: Vector Brushes Ver. 1.0
Freebie: Vector Brushes Ver. 1.0 →

Where Have All The Comments Gone?

Where Have All The Comments Gone?
Where Have All The Comments Gone? →

Previous Weekly Design News…

Design News Roundup Archives →