most inspired - blog

Designers of all types (web, print, etc.) are constantly facing issues involving the structure of their designs. Web designers are increasingly turning to grids to control the structure of web pages, and grids have long been used extensively in other design mediums. For many designers, grid-based design is still somewhat of a mystery. In this article we’ll take a look at some of the basics of grid-based design so that you can understand it and apply it to your projects.

What is Grid-Based Design?

The grid serves as the framework for page layout. It divides the page horizontally and vertically into columns and rows which work to order the elements of the design. The text and images used on the page fit into place and align with one another according to the grid. The lines of the grid themselves are not necessarily visible (although in some designs they are) but they are used by the designer to create the proper width and height of elements to align the page.

Some Examples:

New York Times

Frieze.com

Subtraction

Why Use Grid-Based Design?

Grids in web design can be helpful for both the designer and the visitor. For the designer, the grid helps to achieve balance, spacing, and to compartmentalize the data. The grid can aide with organizing the content and future additions and updates may be a bit easier if there is a specific place for the content to go.

Visitors benefit from grids by arriving at a page that is easier to digest and the structure helps with usability. News sites and others with large amounts of content on a page can especially benefit from the use of a grid. As we saw above, the website for the New York Times is one of the more well-known grid-based designs. Without the effective use of a grid, it’s likely that with the amount of content on the homepage, it would appear more cluttered and less organized.

Helpful Resources for Further Development:

Mark Boulton is one of the leading sources of knowledge involving grid-based web design. If you’re interested in taking a more in-depth look at grids and how you can use them for yourself, Mark has written an excellent 5 part series to lead you through the process.

Grid Designer is a handy online tool that can help you to quickly and easily get your grid set up. You enter some variables such as the number of columns, the width in pixels, gutters, and margins, and Grid Designer produces the layout (with measurements) for you.

Design by Grid is a gallery featuring grid-based designs. If you’re looking for inspiration or for plenty of examples, this is the place to go.

Grids Are Good was a presentation at SXSW (2007) led by Khoi Vinh and Mark Boulton. Their excellent presentation is available in this PDF document.

Have You Designed Any Grid-Based Sites?

What’s your experience with grid-based design? What is your opinion of it, as a reader or a designer? Feel free to leave a link to your own grid-based designs in the comments.

An interesting look at some lovely designs, that are let down in the writers opinion by illegible type.

The primary objective of type, for example, is not to look pretty, but to convey information. There are times however, when this rule isn’t adhered to as it ought to be, and type becomes more of a detail or texture, than a medium to ferry information.

A goal of most designers is to make their projects stand out in some way. With millions of websites online and more being added everyday, creating something unique is increasingly difficult. Each designer has a different approach. Here is a look at 6 things you can do to make your site standout.

1. Large Background Images

One of the easiest ways to create a unique design that is sure to stand out is to use a large background image. The images can enhance the layout of the page and make it more complete and visually appealing. With CSS, the background image is simple to add, and it can drastically change the look of an otherwise routine website.

Web Designer Wall is a well-known site that makes good use of a large background image. The site/blog uses a fairly standard two-column theme layout, but the background image gives the site a look that is anything but standard.

For more designs that feature large background images, see Fadtastic’s Big, Bold Backgrounds.

2. Unique Layouts

Most websites use one of a handful of common layouts. By thinking outside of the box and creating something a bit more unique, you can certainly standout from the crowd. The layout of the site is a big factor in usability and effectiveness, so be sure that whatever you come up with still works for you and for the user.

MelissaHie.com effectively uses a unique layout to differentiate from other sites. The site is really just one large page, and the navigation leads you from one section of the page to another. When you click on a link you will slide to the next section until you eventually arrive back at the start.

To see more examples of creative layouts, see 20 Websites With Unique Layouts.

3. Creative Navigation

The navigation of a website plays a large role in the appearance and the usability of the website. From an appearance perspective, navigation gives the designer a great opportunity to be creative and introduce other elements and rollovers into the design. The look and attractiveness of navigation should never overtake the need for usability, but even with a usable and accessible navigation scheme there is plenty of room for creativity.

BenHulse.com features a creative navigation menu that uses color to interact with the large image on the homepage. The picture includes 7 rows of color on the floor. The 7 navigational links are lined up above the rows of color on the floor, and upon hovering over a link an underline appears that matches the corresponding row of color on the floor. It’s a creative way to make the nav bar different, and it even enhances the effect of color on the design.

4. Minimalism

By using a minimalistic style you can stand out by not trying too hard to standout. I an effective minimalistic design does not simply lack substance, it achieves balance and attractiveness without the need for excessive design elements.

Finch uses a minimalistic approach to creative an attractive website that is different from most competitors because it is free of clutter and it doesn’t rely on a lot of images and pictures to achieve the look.

For more sites that use minimalism effectively, see 25 Beautiful, Minimalistic Website Design.

5. Improved Logo or Branding

The look of a website can be enhanced or held back by the quality and effectives of the logo and/or branding that is used. A very effective logo can greatly improve the look of a site and help it to stand out from the competition. Many websites don’t have quality logos, so this provides the opportunity to stand out.

To see some examples of great logos, see 15 Wonderfully Simple Logo Designs.

6. Horizontal Layout

If you really want to stand out, one sure way to accomplish this is by using a horizontal layout. Obviously, most visitors are used to scrolling vertically, so horizontal layouts are kind of a love-it-or-hate-it style. The Horizontal Way is a showcase gallery of horizontal designs, and appropriately it uses a horizontal layout itself. There is no vertical scrolling necessary, just left to write, similar to a book.

For more examples of horizontal layouts you can view the gallery at The Horizontal Way.

Some great advice to consider when building your online design portfolio.

If you’re a designer looking for a job—whether of the freelance or permanent variety—then an online portfolio is pretty much mandatory. In many instances, your portfolio will be looked at without you present, without any other information about you, and probably by a person who has never spoken to or seen you in person. If your portfolio has to stand alone in a critical situation like hiring, it’s worth spending some time making sure it’s going to get the job done!

When designing a website, one of the most common challenges is to develop an effective color scheme. The 25 sites that are showcased here have, in my opinion, done a great job of incorporating color and creating an attractive appearance. Please feel free to mention which ones are your favorites in the comments.

We’ve all seen it, and now here are some quick ways to figure out if a web 2.0 product is well-designed, or just trying too hard to fit in.

A look at web design approaches which, used properly, can lead to more sophisticated design decisions and simplify the process of perceiving presented information.