“Without good, relevant and organized content, everything on your website will merely be a placeholder.”
— Web Redesign: Workflow that Works 2.0, by Kelly Gato & Emily Cotler
Where’s my content?
Yes… this is a question that you will be asking your clients. But, this is also a question that you should be asking yourself when you are beginning the layout stage of your website project.
Arranging content into a meaningful pattern
Pulling your elements together into a logical order is a must. Most website pages can be broken down into several basic elements:
- Branding
- Navigation
- Main content
- Supplementary content
- Site information
Transcending CSS: The Fine Art of Web Design – p. 153, fig. 2.27
Resources for thinking about content
- Home page real estate allocation | NN Group
Traditional wireframes
The process of designing the content layout of the website is done via wireframes for every page. Traditional wireframes begin as black-and-white diagrams that illustrate blocks of content, navigation and functionality.
Wireframes have been used as a tool to communicate content and structure of a page’s design without the distractions of color and imagery. They are also broadly understood by both clients and web professionals. Wireframes are generally used to help a web designer work quickly through a series of layout iterations before the visual design is implemented.
Transcending CSS: The Fine Art of Web Design – p. 109, fig. 2
Resources for thinking about wireframes
- 10 inspiring wireframing examples for web and mobile | JustinMind
- 12 wireframe examples | InVision
- 35 excellent wireframing resources | Smashing Magazine
- Quickstart on prototyping with wireframes | EightShapes
- The difference between low-fidelity and high-fidelity wireframes | Think360
- The right way to wireframe | YouTube
- Ultimate guide to website wireframing | Six Revisions
Resources for building wireframes
- Adobe XD, InDesign, Illustrator, Photoshop ($)
- Axure ($)
- Balsamic ($, 30 day trial)
- FluidUI (free/$)
- HotGloo ($)
- InVision Freehand (free/$)
- JustinMind (free/$)
- LucidChart (free/$)
- Mockflow (free/$)
- Mockingbird ($)
- OmniGraffle ($/Mac)
- Pencil (free)
- Sketch ($, trial, Mac)
- UXPin ($)
- Wireframe.cc (free/$)
- Wireframe examples and templates
- Wireframe – flows/tiles
- Wireframe landing page (PSD)
- Wireframe templates for mobile (PSD)
- Wireframe template for website (Sketch)
- Wireframes and Visio
Using a grid
Grids are a combination of vertical columns, horizontal fields, and white space gutters.
Using grids will:
- serve as a guide to designers to follow when placing objects on a page
- provide structure and add rhythm to a design
- will help a designer to create a composition that is easier for a user/reader to scan
- present information in a way that is more neatly organized and easier to follow
Transcending CSS: The Fine Art of Web Design – p. 184, fig. 3.1
Resources for designing with grids
- 960px Column Grid Layouts | Portia Plante
- 960px Grid System | 960.gs
- A Brief Look at Grid-Based Layouts in Web Design | Six Revisions
- A new global visual language for the BBC’s digital services | BBC Internet Blog
- Grid-based layouts in web design | WebPageFX
- Grids | Mozilla Developer Network
- Grids: an invisible foundation | Ideabook
- Grid and Column Designs | Web Designer Wall
- Fluid 960 Grid System | Design Influences
- How to wireframe two web layouts in Illustrator using 960.gs | The Next Web
- Templates and Sketch Books for Wireframing | GeekChix
Mike’s 960 Wireframe Example