Using audits to drive change, Mechanics Bank launched with a new CMS and an improved design that follows web best practices. Find out how. 

Spinning Pixels into Websites: Design Thinking from Three Angles

The design process is often shrouded in mystery. But while legends prop up the mystical “creative” and its magical design abilities, web design thrives on a much more grounded approach.

12/12/2013

Authored by

Categorized

  • Design and Front-End

The design process is often shrouded in mystery. According to legend, “creatives” live in a magical space inaccessible to the average man. They wander off with a few notes, a stuffed iguana, and a case of Red Bull, only to emerge days or weeks later with stacks of Photoshop files.

In practice, however, web design thrives on a much more grounded approach. The methods may vary by the project, but I stand by three unofficial modes of design thinking: structural design, visual site design, and content design.

First: get to the point.

Before we can start any design, we have to start with some goals. Who is the audience, and what do you want them to do? No matter the approach, these goals provide guidance. They inform every decision, and guard against design becoming simply an exercise in decoration. It's like Jeffrey Zeldman says:

“Content informs design; design without content is decoration. Content has the same relationship to design that product has to advertising. Good ads are based on the product; good designs come from and facilitate the content. This is one reason we bring content strategy to every design assignment, and one reason we insist on working with real content, not lorem ipsum (placeholder) content. Nothing is sadder than a beautiful design that works great with lorem ipsum but doesn’t actually support the real content.” – Jeffrey Zeldman

A solid content strategy clearly defines these goals, so you can design with confidence. For example, if the goal is to increase sales of three distinct product lines, then the homepage design should effectively feature all three, and encourage people to take a step towards making a purchase. There is an immense amount of creativity involved in the execution, but it is creativity with a purpose.

With our goals in place, we can take a look at how this directed creativity plays out from a few different angles.

Structural design: getting set up for success.

Structural design takes a look at all the underlying content blocks of a site and sorts out where they fit.

Traditionally, this is accomplished through wireframes. A wireframe is an exercise in restraint. The value comes in speed and forethought. It is far easier and cheaper to move a grey box on a wireframe than it is to recreate a fully rendered page.

Navigational labels and real content are valuable to make the layout as tangible as possible. However, wording can easily be tuned at any phase, so it is best to avoid getting bogged down discussing semantics. It is the conceptual sections of a page that are significant in structural design.

Not only does this process define the type of pages needed, it also lays out the content hierarchy for each of those pages. How prominent is the navigation? Given the goals of the site, should there be a news feed on the homepage? How should the promotional areas in the sidebar work? To give the site a human touch, how can testimonials be integrated throughout this section? Once a user gets to the bottom of the page, what are they guided to do?

Consideration is also given to how each page will respond and re-flow on different screen sizes. For this reason, interactive wireframes and prototypes are an increasingly relevant way to communicate more dynamic elements of a design. Well executed, a structural design sets a site up for success. The underpinnings of the site are solid and on target with the desired results, even without it’s skin on!

Visual site design: pixels with a purpose.

With visual site design, we start doing work that people expect a designer to be doing. Crack open Photoshop, and here we go! But it isn’t all animated GIFs and gratuitous drop shadows. The site has come all the way through the structural design phase with its purpose intact. This is no time to take your eye off the ball.

The trick with visual site design is that it is more about designing visual systems than laying out any individual page. Unlike a brochure, or any printed design piece, the content of a website is dynamic. It needs to be displayed differently depending on the size and capabilities of the viewer’s device. The content can also be edited, added to, or replaced altogether by those who maintain the site. In short, word wrapping is the least of your concerns. The only way to deal with so many variables is with a design system.

In this context a visual design system is the set of rules that define what any content looks like in a given context, and how all the site components look together as a whole.

This includes basic styles such as:

  • typography
  • color palette
  • graphic elements
  • responsive layouts
  • responsive navigation
  • form elements

However, this global design system isn’t some monolithic whole. Rather, it is a collection of smaller modules working in concert. Well-formed, these smaller chunks can be reused often, lending consistency and extensibility to the overall site.

Some examples of these reusable modules are:

  • button styles
  • sidebar styles
  • interaction or animation styles
  • carousel styles

With all those details, it is important not to lose sight of the forest for the trees. The goal of the visual site design is to set the site-wide tone and feel for the site. All the branding, color palettes, animations and such are chosen in light of the goals established in the content strategy, and in line with the structural design that came before.

As with everything on the web, the process is continually shifting. How can you represent such a dynamic end product without spending the time to build the full site before the visual direction is approved? One method is to use style tiles. These layouts don’t show an actual page as it would appear on the site. Instead, they use visual design elements to communicate the tone or mood of the design.

Often static mock-ups of the site are still valuable for clients to feel comfortable approving a design direction. However, a design system with HTML/CSS for each page type is the true deliverable. The power in this systematic approach is that each new page comes with a consistent and thought out visual structure. We now have a usable and beautiful place for the site content to shine.

Content design: dress to impress.

Web design is a strange animal. Where else do you spend so much time considering the frame something will be in without touching the thing itself? The promise of a content management system is that it gives content experts the ability to directly control their own content. The potential downside is that those content experts are sometimes not web writers or designers.

Content design can fill the gap. Unlike the overall site design, which is very global and systemic in scope, content design is focused on using those design systems to style specific content on a specific page. Typically, this does not involve anything that a site manager couldn’t do on their own. The goal is to leverage a designer’s visual sensibility or a writer’s wordsmithery to polish the presentation of important pages.

Content design in this context is much more ad-hoc. It extends only as far as the requests of the client takes it. It may include refining the writing, adding clear calls to action, image selection, or application of type styles. There may be a need for custom graphics or icons to illustrate a specific topic. This is the time where having real content to look at and consider pays off. Trying to present a real message shakes out any missing functionality or holes in the content strategy that need to be filled. Real application beats theoretical every time.

Once you get beyond the initial site build-out and population, content design gets consumed by the larger website management, which is an industry all of its own. However, a little well-placed content design can go a long way toward getting a fledgling website off on the right foot, and showing off what is really possible within the bounds of the website design and site management tools.

Bonus: feature design.

Occasionally there is a need for a custom page or experience that stands on its own. It may integrate the look and feel of a larger existing site, but custom functionality and visuals are needed to achieve the desired outcome. Some examples of feature design are interactive infographics, tutorials, or maps. Feature design is distinct from content design primarily in that it is more extensive and likely includes expanded functionality not available elsewhere on the site.

These are great opportunities to differentiate a site, and do something fun and flashy. The challenge here tends to be planning and scoping these type of features effectively. Depending on how elaborate the feature is, it may even stand on its own as a separate project from the main site.

Putting it all together.

These modes of thinking about web design don’t stand individually. While there are some distinct deliverables that mark a transition between them, design is a fluid process. The more completely you can think through a design at any stage, the better off you will be. However, having clear language to discuss structural, visual, and content design can only help as we work to spin pixels into websites.

(For more about design systems, check out Laura Kalbag’s “Design Systems” or Dave Rupert’s “Responsive Deliverables”)

Resources on the design process.

We’ve written at length, both here and beyond, on design.

Episode 24: Maintain and Improve (w/ David Hobbs) Off-site link

Corey and Deane discuss the people and rules that help run a website after launch. Then, David Hobbs, author of Website Product Management: Keeping Focused During Change, joins to talk about transferring a site from a project to a product — what that means to keep the site going after launch, where it most often fails, and how to streamline requests and set reasonable expectations for the future of the site.

October 17, 2023 | The Web Project Guide Podcast

Episode 19: Implement the Design (w/ Ethan Marcotte) Off-site link

Corey and Deane talk about how front-end development has evolved past the early days. Then, Ethan Marcotte, author of Responsive Web Design and Partner at Autogram, joins to discuss front-end development and how the world has impacted how front-end design is treated and approached. We also joke about whether Deane actually “invented” responsive web design. (He didn’t.)

May 16, 2023 | The Web Project Guide Podcast

Episode 17: Plan for Hosting (w/ Elias Lundmark) Off-site link

Corey asks Deane a brutally honest question: as non-developers, why should we care about hosting at all? Then, Elias Lundmark, product manager for cloud hosting at Optimizely, joins us to talk about website hosting in common terms — cloud versus on-premises, the reality (and politics) of “five 9s,” and the things you need to understand before choosing a hosting provider or vendor offering.

March 15, 2023 | The Web Project Guide Podcast

Check out more articles on design.