The Basics of Screen Design
July 16, 2016
Let’s go back to basics of screen design for this article and explore what makes good screen design. It’s an important question as screen design incorporates everything from the text, to the images, to the layout, to the font you use, to how all those elements hang together as a whole.
It’s that last point that’s probably the most important.
You’ll find websites that argue about what is remembered best, visuals or words (visuals usually seem to win). In truth, however, it’s a false dichotomy. After all, how often do you only use one or the other? Almost inevitably the combination of the two is far more effective than either alone.
And that is what good screen design is all about, understanding how the right elements combined in the right way and located in the right spaces can create a whole that is more than the sum of its parts.
What is the aim of Screen design?
The aim of great screen design is to:
- Make certain that the audience understands where they are meant to focus their attention and understand what they can safely ignore.
- Create engagement and interest among users.
- Create a synthesis between the new information presented with the information the audience already possess.
- Aid and simplify navigation through the information presented as much as possible.
Now, how you can best achieve that will obviously change from screen to screen and from page to page.
That said, there do some basic elements to always keep track of to improve your web design skills.
Some studies suggest that shorter lines with more compact sentences get absorbed better, while other studies point out that this the constant flicker back and forth from beginning to end will actually slow down comprehension.
That said, most users now get to choose how long they want their text to be, so often that can now be left up to the user. Still, where it isn’t, it is best when line length is somewhere in the range of between 35 and 75 characters.
High density is generally a bad idea, with people not just struggling to comprehend dense screen designs, but frequently simply refusing to read what is presented. This will significantly up bounce rates and that is not what you’re after.
For that reason, anti-space is vital. If the text and imagery are properly balanced out with areas that are blank of both words and visuals the user will find the page far easier to deal with and will be far more likely to pick up on the element of the page where they are meant to focus their attention.
Many brands will, for that reason, have landing pages that contain very little information, except for a simple image and text combination that inform the visitor of the main message of the brand and leave them to click further in to discover what they’re after.
This then allows them to present whatever the user is after in similarly low-density pages, that do not strain or repel the user and get them to quit the page.
What font you use can make a big difference, not just on readability (though obviously it makes a big difference there) but also in terms of how much emotionality is evoked and how likely people are to think the instructions you give them are easy to comprehend.
Though it may be tempting, do not stray into the territory of bold, italic, shadowed, or outlined fonts. These will be fun for your reader for perhaps half a minute and then will become annoying as they interfere with reading (and thereby reduce the impact of your message).
Similarly, colors can have a serious influence on your users. Not only do different colors evoke different emotions (as you would guess) but different users are also attracted to different colors. Both these things obviously need to be taken into account when considering what colors you’re going to use.
For example, Do you want to signal sincerity or wholesomeness? Then choose light blue. Is it excitement and daring that you’re after? Then red is probably a better choice.
Another important factor to consider is whether your audience is colorblind. This is far more common among men than women (1/10th versus 1/100th) but is still something that should probably be taken into consideration for all groups. So avoid mixing your reds and your greens overly much and making understanding depend on knowing the difference between them (This is the most common colorblindness problem).
Since more than half of people now surf via mobile devices (And chances are pretty high that you’re actually reading this via one), make certain that you take the time to make certain all your pages are mobile friendly.
Not sure how your pages are doing? Check out google analytics on pages and see if there is a big difference between the bounce rate of pages on desktops, laptops and mobile devices. If they’re about even then your pages are not less accessible for mobile devices. If, however, your bounce rate is much higher for mobile devices then that means you’ve got mobile issues that need to be dealt with.
And that’s really just scratching the surface of basic screen design. Still, there are some important points to consider there that are often forgotten. Often designers end up so caught up in the design process that they forget about their users.
And as a result, their sites might be beautiful, but nearly impossible to use. And that is not the point of the design. It is not art. At most it can be functional art. If it isn’t that, then it isn’t doing what it’s supposed to. And what’s the point of that?