Layout and Composition as Part of the Web Design Process

Key Takeaways

• Understanding the demographic and needs of website users is crucial in the web design process. This can be achieved through user testing and monitoring user behavior, which guides the design and rebranding process to ensure the website is user-friendly and caters to the needs of its visitors.
• The use of tools such as wireframes and sticky notes in the early stages of web design allows for the organization and structuring of content. Wireframes help establish the layout structure and positioning of elements, while sticky notes assist in grouping pages into appropriate navigation sections.
• Layout and composition are integral to web design as they enhance user experience and guide users towards desired actions. This involves the strategic arrangement of visual elements, effective use of white space, and consideration of design principles like contrast, repetition, alignment, and proximity. Additionally, ensuring the design is responsive and adaptable to different screen sizes and devices is vital.

Often, much of what we do as designers is subconscious. We can usually tell you on a choice-by-choice basis why we made specific decisions, but it doesn’t come naturally to verbalize the procedures we follow. Sometimes the best way to explain how to apply graphic design principles is by walking through the design process of an actual client website. Enter: Southern Savers, a real web design project for a real client. In June of 2008, Jenny Martin started Southern Savers on Blogger.com to share the best grocery deals she found with her friends. After a few short months, the site grew too big for Blogger and her husband James migrated it to a self-hosted WordPress install. Neither Jenny nor James had any design experience, so they purchased a WordPress theme, created a header graphic, and Jenny carried on blogging. A little over two years since starting out, the site now receives over three million hits a month and has over 60,000 fans on Facebook—all with the basic design template you see here: The old Southern Savers design Jenny knew a redesign was long overdue, and hired the rock-star design agency Squared Eye to do the job. Being a friend of Jenny and of Matthew Smith of Squared Eye, it’s been interesting to see the design process unfold from both the client and agency perspective. I knew that following this process through each chapter of this book would be insightful for you as well, and am extremely grateful that both Jenny and Matthew agreed to let me use the project as an example.

Getting Started

Usually, clients have specific ideas about what their site should look like and how it should work. Depending on the client, these preconceptions can either help or hinder the design process—more often, the latter. However, on this project, Squared Eye was given free rein to completely redesign and rebrand the site. Matthew knew it was important that he and his team not only understand how the website worked, but who the Southern Savers visitors were and why they were there. Freelance web strategist Emily Smith, the information architect for the project, explains, “Before design could start, we went through a discovery phase to find out what the goals were. We also went to one of Jenny’s Couponing 101 workshops and talked to attendees. We evaluated how recurring visitors use the site—watching over their shoulders, talking about what features and functionality they depend on, and observing how they navigate.” Taking what they learned from their time with Jenny and her website users, Emily and the rest of the Squared Eye team went back to their shared working space. “We mapped out the personalities that were currently using the site, and broke them down into actual personas,” Matthew said. From there they started exploring how to organize the information on the site, so that new users and regulars alike could find what they were looking for. I mentioned earlier that sticky notes and whiteboards were great tools for information architecture. Emily made good use of both in the exploration stage of the Southern Savers redesign. As you can see below, there was a lot of content that had to be organized, and the office wall was the best place to sort it all out. Sticky-note information architecture Once Emily had all the pages grouped into appropriate navigation sections, it was time to start working on a layout. She knew the layout for the site was going to be 960px wide, and that for most of the pages, a two-column layout would be necessary. Because there were so many navigation elements to work with, she designed the layout structure as a wireframe in a Mac application called Omnigraffle. The figure below shows her proposed wireframe for the home page. Proposed home page wireframe for Southern Savers Notice that there are no colors, no real images, and no actual HTML elements in this example. The goal of a wireframe is simply to establish the layout structure and the positioning of elements. Earlier in the chapter, I said that in a good design, users “recognize each page as belonging to the site.” That doesn’t necessarily mean that the layout of each page has to be exactly the same. In fact, it’s good to work in some contrast between the home page and other pages in the site. As Emily created the wireframes for the rest of the site, she spiced it up by planning alternate layouts for some sections, like the “Learn to Coupon” section shown below. Wireframe for the “Learn to Coupon” section of Southern Savers Okay, maybe “spiced things up” was a bit of an overstatement when talking about colorless wireframes, but the design ball is certainly rolling here. Is this process similar to the way you create layouts and comps for the sites you work on? We’d love to hear your tips and advice in the comments below!

Frequently Asked Questions about Layout and Composition in Web Design