Once I began designing web sites thirty years in the past, David Siegel had simply revealed Creating Killer Internet Websites, the e book that popularised HTML tables and spacer GIFs for laying out net pages. CSS finally gave us extra management over layouts by means of floats and positioning. Neither was supposed for web page format, and inconsistent browser behaviour might make utilizing them irritating. Nonetheless, that didn’t cease me and a era of different designers from utilizing floats and positioning.
When CSS frameworks started offering ready-made grid methods, issues bought somewhat simpler. Blueprint CSS) supplied a 24-column grid, whereas Nathan Smith’s 960 Grid System supplied 12- and 16-column choices. These frameworks gave designers and builders a shared construction, making format planning and implementation significantly simpler.
- 1996: HTML tables and spacer GIFs
- 2007: Blueprint CSS and its 24-column grid
- 2008: The 960 Grid System and its twelve-column grid
- At present: Twelve-column grids stay a well-recognized framework conference.
Twelve-column grids weren’t invented within the 2000s. Graphic designers had used column-based and modular grids for many years, and twelve is a handy quantity since you don’t must be a maths genius to divide it into halves, thirds, and quarters to create the 2-up, 3-up, and 4-up elements we see in all places on-line.
Frameworks like Bootstrap and Basis adopted, serving to set up twelve-column grids because the de facto commonplace for web page layouts. I get why that occurred. However someplace alongside the way in which, one format choice grew to become the default place to begin for nearly the whole lot.
CSS Grid modified what’s potential for web page layouts, however I nonetheless see designers begin by dividing a web page into twelve equal columns, then deciding the way to match their content material into them. The designs they find yourself with is perhaps completely positive, however they will additionally look remarkably related.
Nonetheless, I don’t suppose twelve-column grids themselves are the issue. It’s reaching for a well-recognized resolution earlier than contemplating what makes the corporate I’m designing for distinctive and what its web site wants to speak. So what occurs after I begin with these questions as a substitute?
Each firm has a narrative price telling
Earlier than I determine what number of columns a format wants, I need to perceive the corporate I’m designing for. What makes it totally different from its rivals? What does it need individuals to recollect? Does it have a persona that might affect how its web site seems and feels?
These questions matter as a result of a format does greater than organize content material. The scale, place, and relationships between parts affect how individuals expertise an internet site. A restrained, orderly composition can talk one thing very totally different from one which’s stuffed with vitality and motion. So to show what I imply, I’ll use Wheelman. It’s a fictional firm I invented for my e book, Standout Designs for the Internet.
Pre-orders for Standout Designs for the Internet at the moment are open within the CSS-Tips retailer.
Wheelman supplies services and products for getaway drivers, together with authorized recommendation, theft insurance coverage, and an internet store promoting break-in necessities. It additionally publishes {a magazine} with recommendation, information, and tales about life behind the wheel.
Wheelman isn’t an peculiar firm, so why ought to its web site appear like an on a regular basis assortment of elements? It takes its enterprise critically, however isn’t afraid to have enjoyable with its design. It’s rebellious, however doesn’t need to look off-putting. Its viewers is criminals, however they demand professionalism. Wheelman has loads of persona to work with, and I would like its designs to replicate that.
That doesn’t imply making Wheelman totally different for distinction’s sake. Its prospects nonetheless want to seek out what they’re in search of, perceive what it supplies, and purchase its services and products. However I could make these experiences extra memorable by selecting layouts that match the corporate, slightly than settling for acquainted preparations.
Beginning with content material, not columns
Let’s think about I’m designing a brand new touchdown web page for Wheelman’s on-line store. It consists of two merchandise, one with a huge headline, product photographs, and the kind of performance and data you’ll discover on most shops.
Earlier than I determine the way to organize these parts, I need to look past them and take into account how they relate. I ask myself questions like:
Which parts deserve probably the most consideration?
What belongs collectively?
Is there a pure order to the data?
Solely then do I begin interested by visible design questions: “Would a big {photograph} set the scene? Ought to I make the introduction extra distinguished? Can whitespace lead the attention and create areas to pause? How can I carry photographs and textual content collectively right into a thought-about composition?”
These questions assist me perceive what the format wants to perform earlier than I determine which grid may assist me obtain it.
I might organize the whole lot in a single column for a simple studying expertise. That may make responsive design significantly simpler. However I gained’t.
Wheelman has a rebellious persona, and I would like its store to replicate that. A extra energetic format appears applicable, however I nonetheless want to determine a transparent hierarchy between the merchandise and their info. Two equal-width columns give each merchandise equal prominence.
Altering their proportions creates a hierarchy, even when most parts keep the identical measurement.
I might base these proportions on a twelve-column grid, however I gained’t. Columns solely divide area vertically, and I desire a format that provides one other dimension.
Including one other dimension with modular grids
Dividing a format into columns is a helpful place to begin, however including rows creates one other dimension and opens up extra artistic potentialities. The place columns and rows intersect, they type rectangular or sq. items known as modules.
Combining these modules creates bigger spatial zones that may set up hierarchy, management whitespace, and add selection to a composition.
Utilizing a modular grid, I can add drama, set up hierarchy by various scale, and make the composition really feel far much less predictable. Beginning with 4 columns and 4 rows provides me sixteen modules to work with, however I don’t have to fill all of them.
I can create drama by spreading the big graphic headline and product picture throughout 4 modules, whereas the product info and procuring instruments occupy one module every.
The modular construction turns into much more obvious within the grid of other merchandise. Most occupy only one module, whereas others fill two, both horizontally or vertically. Various their sizes provides some merchandise extra prominence and makes the general association really feel much less predictable.
The outcome nonetheless looks like a product web page, with a transparent studying order and area for the content material to breathe. But it surely additionally feels unmistakably like one thing Wheelman would publish.
I don’t anticipate this composition to work at each display screen measurement, so I can regulate the dimensions and amount of modules to enhance the studying expertise.
And if one grid affords this a lot flexibility, think about what combining two or extra grids can do.
Mixing grids to create compound layouts
One factor I would like from Wheelman’s web site is selection. Its journal, store, and providers serve totally different functions, and I don’t need each web page to really feel like I’ve poured its content material into the identical template.
Wheelman wants layouts which really feel organised with out being predictable. Compound grids give me the construction I want whereas leaving room for much less standard preparations.
A compound grid combines two or extra grids of any kind — column, modular, or hierarchical — on the identical web page. These grids can overlap, sit facet by facet, or be stacked one on high of the opposite. Combining grids creates potentialities which neither grid affords by itself.
I can begin by overlaying a two-column grid with one containing three columns. Their mixed grid strains create 4 columns of two totally different widths, giving me extra flexibility with out shedding the underlying construction.
These proportions provide extra potentialities for arranging content material. I’d use a wider space for {a photograph} or headline, then place a pullquote into one of many narrower areas. One other web page might use the identical underlying grid however mix its areas in another way to go well with one other story.
Combining grids with totally different column counts will get much more fascinating as these numbers improve. In Standout Designs for the Internet, I discover a number of combos, together with mixing four- and five-column grids to create totally different compositions for Wheelman’s pages whereas sustaining a related visible construction.
The purpose isn’t to make each web page look totally different for its personal sake. It’s to provide every part a format that fits its content material whereas retaining all of them feeling like a part of the identical firm.
Don’t let familiarity make decisions for you
Twelve-column grids are helpful, and I’m definitely not suggesting you must cease utilizing them completely. However they’re just one choice amongst many, and beginning each design with the identical construction limits your potentialities earlier than you’ve even thought-about the story your design is telling.
There’s additionally nothing inherently fallacious with the 2-up, 3-up, and 4-up patterns a twelve-column grid evokes. They’ll generally be precisely what’s wanted. However reaching for them routinely can depart little room for the character and persona that make web sites memorable.
Wheelman provides me loads of causes to decide on totally different layouts. Its tales, merchandise, and providers don’t all want the identical preparations, and its persona provides me alternatives to make these preparations extra distinctive. The grids are merely instruments that assist me put these concepts into observe.
And this is applicable to way more than format. The identical pondering ought to affect the colors I select, the typography I exploit, the photographs I fee, and the way in which I carry these parts collectively.
That’s why I wrote Standout Designs for the Internet. I need to encourage designers to look past acquainted options and make extra deliberate selections about color, typography, imagery, and format. To not be totally different for distinction’s sake, however to create web sites that feel and look like they belong to the businesses behind them. And nobody else.
Pre-orders for Standout Designs for the Internet are open! Everybody who pre-orders will even obtain the Hardboiled Shopper Interview Information free of charge — a sensible companion to assist designers ask higher questions and uncover what makes an organization distinctive.
The e book shall be revealed on November 20, priced at $14.99 for the DRM-free EPUB and PDF editions.
