Editorial Design Walkthrough
As a followup to my previous article on Editorial UX, I’ve written a short walkthrough of how I approach designing an article page for the web.
The design is a long form recipe page for a fictional food magazine named Breakfast Bunch. The magazine’s audience is primarily in their 30s and 40s. The kind of people that like to cook and post food pics on Instagram. The page consists of an editorial piece describing the creation of the recipe along with a more traditional step-by-step recipe.
For the purposes of this demonstration, you can assume that the UX and design research are already done; that I am working from sketches, a sitemap, wireframes, and content plan. I will also be incorporating real world constraints into the design. Things that you would likely encounter in a project for a publication like ads and a call-to-action. Finally, I will only be designing the desktop version of the page as it is easier to see in an article format like this.
Grid and Typography
When starting any new editorial design project the first thing I do is create a grid and establish a baseline to go along with it. For long-form editorial projects I find that a 6 or 8 column grid works best. If I have to incorporate ads, I try to design the grid in a way that makes fitting them easy. In this example, 2 columns of the grid are equal to 300 px. The same width as many IAB standard ads.
Next, I lay down a paragraph or two of body copy and fit it to the grid so that it spans 3–4 columns. I adjust it so that a single line is no longer than 50–70 characters wide. It’s a bit of a balancing act, but it is crucial to establishing a good reading experience. For Breakfast Bunch I’ve used the typeface Lora for the body copy and set it at 18 px. This gives me a 68 character wide line. Almost too wide, so I set the leading to 24 px to help differentiate the lines and facilitate reading.
With 24 px leading I use two baselines; one at 24 px and one at 12 px. This gives plenty of flexibility for setting type. Using the baselines I start roughing in some type treatments for the the title, deck and subheads. I chose Roboto Slab Bold for the title & subheads and Roboto Bold for the deck.
Layout
Once the foundation is created, I build up the layout with as much real content as I have on hand. I try not to overthink the design at this point but I do take care to establish a concrete header, footer & sidebar using plenty of whitespace. One thing to note is that I do not introduce any color that is not part of a photograph at this point. I want to make sure the layout works well without it before choosing a palette. Once I have everything on the page it is ready for a second pass.
In the second pass I refine the layout. The key things I do are making the article stand out from all of the secondary content and making sure that the main message comes through in the headline and subhead. This is also where I introduce design elements like rules, tone and buttons.
For this particular page, I paid special attention to the lists. Recipes contain many lists for things like ingredients and process steps. So I made sure they read well and were formatted correctly.
Color
Next up is color. My two rules of thumb for color are:
- The layout must work without it
- Never use more than two colors without good reason
I generally use one color for links and another for an accent. Any more than that and the layout tends to look gaudy and unprofessional. It’s also very important that a design holds up and is readable if there is no color. So make sure there is enough contrast and that important UI elements read in black and white. If you need more try using some tones instead.
For Breakfast Bunch, I’ve used a turqoise for the link color and red for an accent. The red is only used to highlight the pull quote and call-to-action. Both colors work well with the established photography style of the site.
Finishing Up
With the major design concerns worked out, I take a step back from design and do something else for at least a couple of hours before continuing. I find that this allows me to return to it with fresh “eyes” so I can easily fix any remaining issues I didn’t catch before.
I make sure the design is balanced, readable and intuitive. It should grab my attention and direct my eye to the content. So I make any necessary adjustments and call it done. At least until I get revisions back from the rest of the team…
In this case I added the dropcap, for some flair, and added a toned background to the newsletter signup form in the final pass. I felt that the signup form didn’t stand out enough for such an important element.
That’s my process in a nutshell. It starts with a grid and strong typography. These provide the foundation for a solid layout on which to build the entire page. Only when the layout is done do I introduce color and refine the overall design until it is finished.
I hope you found this article informative. You can find me on Twitter and LinkedIn if you have any questions or comments.
Resources Used
Software: Adobe XD, Photoshop and Apple Pages.
Fonts: Roboto Slab, Roboto and Lora via Google Fonts.
Title Photo: Taylor Kiser on Unsplash.
Content and Article Photos: Crumb Blog, Courtesy Isabelle Boucher. Used with permission.
