Véronique Pelletier

“Can you reduce the white space so that everything is above the fold?” If you are a designer, this kind of request probably sounds like nails on a chalkboard. Whitespace or “negative space” in web design has two camps – designers who swear by it, and the rest of the world who want to fill the space with as much information as possible. Whitespace is often seen as wasted real estate space, but on the contrary, whitespace is one of the most valuable assets on your website.

What is Whitespace?

First let’s define “whitespace”. When talking about whitespace, designers are referring to the negative space between the elements on the screen. Whitespace isn’t necessarily white, it can be a colour or a texture.

“Whitespace is like the supporting cast, whose duty it is to make the stars of the show stand out, by not standing out so much themselves.”
Canvas Flip

There are two types of whitespace, macro whitespace which is the space between larger layout elements, and micro whitespace which is the space between smaller elements like words and letters or images and captions.

Micro space is the space between smaller elements, where as macro space is the space between bigger elements.

Readability and Priorities

Your content is the reason users are visiting your site. That’s why it’s so important to think about the site’s readability. It’s something whitespace can greatly improve. Something as simple as line spacing (the space between each line of a paragraph) can have a huge impact.

The example on the left is uncomfortable to read as the copy is squished together. The example on the right gives it more line spacing, which allows for a better reading experience.

Enhance Usability and Content

In simple terms, having whitespace means your content is better highlighted. A cluttered page is not a pleasant experience for users, it’s overwhelming and uninviting. Studies have shown that the attention span of an Internet user is 6 seconds (that’s less than a goldfish, let that sink in…). Using whitespace helps users scan content, and quickly find the information they are looking for. Cluttering up a website with as much information as possible could ultimately discourage users from visiting a site again.

The example on the left is a good example of wasted space. The space between the elements looks unbalanced, things should be tighter. The example on the left allows the element to breathe, without losing precious space.

Elegant Design and Branding Positioning (a bonus)

Whitespace can also help elevate an elegant and sophisticated design. Consider the Apple website, they use an enormous amount of whitespace, and their products always shine. It makes you want to buy that brand new iPhone.

Think about your morning commute, you don’t like to be sandwiched between people on the metro, so why would you let that happen to the elements on your website?

Whitespace isn’t a waste of space, on the contrary, it is a valuable design tool that used effectively can have an enormous impact on how your content is seen and consumed. Whitespace is your friend, embrace it.

If your team is anything like ours, they’re always looking into ways of improving their workflow and making life easier. Our design team made the switch to Sketch just over a year ago, and we can safely say that whenever we’re asked to design in Photoshop, our hearts break a little. Don’t get us wrong, Photoshop is great for its intended purposes, but Sketch is just so much better for web design.

Get to know Sketch

Sketch was first released in late 2010 by Bohemian Coding. It’s a Mac-only design tool that uses a fully vector-based workflow—it’s basically responsive heaven. The learning process for Sketch is pretty short. If you are familiar with Illustrator and Photoshop, you will be comfortable with Sketch within a couple of days.

Perhaps the main reason why we love this app so much is because of its speed. Sketch was made for user experience design. The features available on Sketch are tailored to your goals, and you won’t get lost in all the extra features since they don’t exist. It might feel limiting at first, but that’s not a bad thing—having the necessary tools to get the job done is all you need. The shortcuts are very intuitive, and you soon forget the shortcuts you spent hours learning in Photoshop. Most features are available within a few keystrokes!

Vector based

We live in a world where responsive design can’t be ignored; it’s now a standard. Sketch offers built-in grid guidelines that do the job of calculating sizes for you. Layout settings allow you to customize your grids to your project needs and if the same grid is used often, it can be set as the default. Pretty neat!

The file sizes are also a major advantage of using Sketch. The files are much lighter than a Photoshop file, which allows us to view the entire user flow on one page, rather than creating multiple documents. The performance is smoother and less laggy than Photoshop. It gives us a better general overview of a project.

Resizing

This is where Sketch is powerful and a real time saver. Since it is a vector based app, all your objects are easily resizable and keep their properties. You can easily go from desktop to tablet, without losing your shapes’ properties. No more pixelated text when you zoom in or messed up rounded corners on rectangles. Everything stays sharp and crisp! They really improved the group resizing feature earlier last year, and we can safely say that this is probably one of their smartest updates.

Easy Peasy Exporting

Exporting assets is a breeze. You simply need to click on the object you’d like to export, click on the “Export +” button, then set your export preferences. Whether you only need one version or multiple PNG versions and an SVG, you can set your preferences and export everything all at once. It is a major time saver as you don’t have to manually save each format one by one.

Layer and Text Styles

Creating text styles then applying them to your headings, body font, links, etc., is a walk in the park with Sketch. Imagine your client really disliking the font you picked and having to manually change everything? With text styles, in a simple click, you can change the font, and everything gets updated.

The same principle applies to layer styles too. It’s made to make your workflow faster and efficient. With layer styles, you set the colour fill, strokes, opacity, etc. Then you just apply those settings to any shape your heart desires. It keeps things consistent across the board and makes everybody happy!

Symbols & Overrides

While symbols may seem to be similar to smart objects in Photoshop, they are so much more. Editing them is ridiculously easy once you master the art of nested symbols. You can quickly switch from a default to an active state in one click. While creating all states might seem time-consuming at first, trust us it will save you plenty of time in the long run.

Smart objects in Photoshop are great to create identical objects, but what happens when these objects need to have custom content? When creating symbols in Sketch, each element of the symbol becomes its own variable. This way, you can quickly change and update the content. It’s magic!

If by any chance your symbol has a unique feature that doesn’t apply to the rest of them, you can detach it from the symbol and make the necessary changes.

Libraries

Earlier this year, Sketch introduced Libraries to our workflow, and it is a game changer. While libraries are available with the Adobe Suite, adding this feature to Sketch just made working in teams on a project that much more efficient. Whether multiple people are working on a project or if you’re the only designer on it, having Libraries really simplifies your workflow. Libraries, much like Photoshop’s, are a master with all the elements that can be found throughout your project in one place. Need to make a quick change to the footer? You just need to edit it in the master and apply the changes to your design in one click. It also gives you the option of refusing the update, which is excellent.

CSS Things

The beauty of Sketch is that it is really developer-friendly. They can simply open up your Sketch file, copy the CSS attributes and voilà your website is done! Alright, it’s a little bit more complicated than that, but if you want to make sure that the final design matches what you’ve spent hours working on, the ability to copy CSS attributes for your development team is a major bonus. It’s also super useful for that gradient you love but that your developer can’t reproduce!

Honourable mentions

Colour management is made super easy in Sketch. Colour picking as well. By pressing control C, you can eyedrop any colour, not only on your Sketch file but everywhere! Measuring tools are also a gift. By simply pressing on the option key, you can see the precise distance between two objects or an object and the artboard. We love this; it makes us perfectionists happy.

The Plug-in possibilities are endless

If there’s a feature you wish Sketch had, chances are there is a plug-in out there to fix your problem.

Anima Toolkit – We recently really got into Anima, and we’re slowly exploring all the possibilities it has to offer. It has three main features: Timeline, Launchpad, and Auto Layout. Timeline allows you to create animations within your Sketch file. It’s handy to show your development team the kind of animations and transitions you are looking for. Launchpad lets you save your Sketch file to HTML (sidenote: it’s a paid feature). Auto layout, as the name suggests, helps with responsive layouts and
keeping things consistent.

Zeplin – One of our colleagues only works on Windows, which could have been problematic since Sketch is a Mac-only app. Thankfully, Zeplin came to the rescue and made it easy for us to share our files with her. It creates a Style Guide, which is fantastic since she can simply follow it to stay true to our design.

Craft – Craft is just great; it allows us to sync our design to InVision (another tool we’re really fond of!) quickly. No need to save every artboard manually and upload them. It gets the job done for you. It’s also great to populate your design with content rather than lorem ipsum. We find that this gives clients a better sense of the eventual outcome. Same for placeholder images, you can fill in your artboard with images directly from Unsplash or Getty.

Sketch has made our life much easier, and we don’t see ourselves going back to Photoshop. Not only is it considerably cheaper than Photoshop, it also allows us to stay organized, work faster and more efficiently. Technology is moving so fast, and prototyping tools keep getting better and better. We’re looking forward to seeing how Sketch develops over the next couple of months as the competition is real out there.

Trying to build a web product without a solid wireframe is like trying to build a house without blueprints. Having a solid set of wireframes helps keep our team on track as they build the website, but also reassures you, our client, that your project is going in the right direction. It’s also a major time saver in the long run. And who doesn’t like that? Time is money after all.

What is a wireframe, though?

Wireframes are the skeleton of your website. They consist of a simple layout, in black, white and grey, that outlines the placements of elements on the page. Wireframes are purposely left without colours, logos, and imagery to minimize distractions and focus on usability and function. They’re meant to be done quickly, without being too detailed.

Wireframing is the way to go

Usability and functionality

Perhaps the most important reason why wireframes are a must is to focus in on usability and functionality. By keeping wireframes simple, we avoid distractions like “that shade of blue doesn’t stand out enough, can we make it pop?” or “I don’t like this image, I’d like something with more cats!”. In the early stages of design, it’s more productive to focus on the underlying structure that will make the website a success. Wireframes allow us to discuss and work through all interactions between elements, to make sure the user experience is as optimal as it should be.

Wireframes are the perfect opportunity to validate designs and make sure the project is headed in the right direction. It is here that we establish which elements are the most important and where they should be placed on the page. By creating wireframes, we provide a visual reference to help you understand our thoughts and processes.

Wanted vs Needed

As a client, you’ll have a million ideas as to what you want your website to accomplish but, until put in context, it’s not always easy to assess which ideas work and which ones should be dropped. Wireframes help to set expectations from an early stage and avoid conflicts later on in the project. They help clarify what is essential to reach the goal of the website and what is a “nice to have” feature that can be left out.

Wireframing not only for desktop but for responsive also helps to prioritize features and visualize how the website will display across all platforms and devices to come up with the best way to adapt layout and content.

Wireframes are a time saver

While producing a full set of wireframes can take a couple of days to a few weeks, depending on the scale of the project, wireframing will end up saving time in the long run. Wireframing allows the designer to solely focus on making sure the site structure is solid so that the rest of their design process is more efficient. It is also much easier to make changes to low fidelity wireframes than it is to highly detailed designs.

Wireframes are not only helpful to our clients but our team as well. Keeping our development team in the loop from the start is the best way to avoid major changes and problems further along the way. They’ll be able to point out flaws and functionalities that might require an extra amount of work. With wireframes, we can all plan accordingly.

Are there cons to wireframing?

Wireframing is a reliable method of working that has been proven time and time again. The only downside is when the process is misunderstood — something I hope this article has cleared up. Wireframes are not final designs, they’re a planning tool to make the best decisions about user experience and functionality. That’s why we keep them as simple as possible.

Some clients would rather see the full design with colours and pictures from the very beginning, and see wireframing as an unnecessary extra step. I want to reassure you that wireframing will save precious time and money in the long run. There are great tools like Sketch and Adobe XD that make wireframing so easy that the time put into producing them is well worth it.

In the end, wireframing is an essential step in a well-planned project, and eliminates a lot of unwanted surprises down the road.

We’ve done a few projects now with text at their core. Most recently, we’ve brought The Sun magazine’s impressive and thoughtful print archive from the warehouse to the web, and worked with eCampus Ontario and Pressbooks on the UX design for Open Source Textbooks and the network where they are housed.

Plank’s Creative Director, Jennifer Lamb, and Junior Interactive Designer, Véronique Pelletier, put their heads together to share some recommendations for creating an online reading experience that is enjoyable and accessible to a variety of users.

Column Width

Just as in print, your on-screen column width is an important factor in readability. Too long and your reader will have difficulty focusing, too short and you break the rhythm by making the eyes work too hard traveling back and forth. Most sources recommend a line of text between 50 and 75 characters, but it’s a balancing act. On desktop, it’s ok to go a bit beyond, up to 100 characters, and faster readers will appreciate a longer line if it means less scrolling.

Fonts

Font choice and size also plays an important role in readability. Serif fonts dominate the print world and are said to maintain a sense of “flow” that draws the reader into longer texts. On screens, sans-serif fonts were traditionally the go-to because low resolutions didn’t render serif fonts properly, causing the letters to bleed into each other. As screen resolutions grow increasingly sharper, designers’ options are expanding to include a wider array of serif typefaces as well.

It’s a good idea to test your font choice on a variety of screen resolutions, as they can render quite differently. For readability, it’s best to stick to practical type choices over stylish or unique ones.

Font size should be somewhere between 14 and 20 pts and must be adaptable to mobile and tablet. Body text on a desktop is usually fine at 16 points but needs to be boosted up to 18 points on smaller screens. Line spacing plays an important role as well – too close creates clutter and too far sacrifices focus. A good guideline is about 125% larger than the font size.

Layout

Removing distractions is of the utmost importance. Surrounding the text with whitespace helps the eye to focus. It’s not recommended to use a sidebar, but if you must have one, it helps to be able to hide it. Images can do a great job of illustrating the text, but should be surrounded with enough padding that they don’t crowd the words. Advertisements and other call-outs, if required, should be placed at the end of an article, or at an appropriate break in a longer text.

Accessibility

Making your content accessible to a wide range of users is one of the greatest advantages of publishing digitally. There are a lot of design and structural elements at play in creating an accessible experience for users with permanent or temporary functional limitations.

Just to name a few considerations, there are standards and guidelines for text contrast, colour usage and alternatives, limiting overwhelming animation and video, and creating a clear navigation system. Content alternatives are instrumental; audio should have accompanying text, and images should have descriptive captions. (We’ve included some resources for more technical info at the end of this article).

Your page template should be robust enough so that the layout doesn’t break even when the page is zoomed up to 200%. Page elements should be organized in a logical structure that can be read properly by screen readers and navigated by keyboard controls; it’s important to organize your HTML content hierarchically from a markup perspective. Screen readers will read everything: don’t force these users to sit through ads before they reach your content so make sure they’re sequentially arranged in your markup. Layout modes like CSS grid and Flexbox give you the control to visually re-organize your content blocks whichever way you want when fed back through the browser.

Other factors also affect accessibility such as page load speed, optimization across a range of browsers, time limits for tasks, and how easy it is to understand the writing itself. Language is an important consideration for accessibility, especially since icons aren’t recommended (screen readers skip right past them) and space is at a premium. Keep things clear and short.