Recently I was tasked with re-stylising the HelloUni catalogue for ICAN FUTURE STAR. This is a small document that outlines what we can offer to clients. As part of our regular Knowledge Transfers, I decided to do a talk on the basics of stylising a document named “Super Basic Design Principles According to Ellie”. I’m going to go through this talk with you all now in the form of a blog.
I’ve always been the type of person who likes to style documents so they flow well; so they become something that’s pleasant to look at, convey emotions and easy to read. Below I’ve outlined some of the basic techniques I use when stylising documents. Most of the points will be common sense but I hope you’ll find something of value in then nonetheless.
Know your audience
Firstly, before you even start writing the document you should know a few things about its purpose and target audience. It’s a good idea to imagine somebody from your targeted demographic reading your document. I’m going to use the example of a CV here because I think it’s something that we’ve all experienced or will experience at least once in our lives.
Who are they?
Imagine you’re writing your CV, Who’s going to read it? Well depending on the company it could go through a few people, Secretaries, Hiring Managers, Human Resources, Department Managers, Experts/Specialists, or Algorithms that sort CVs based on keywords. This can be a little daunting but what’s important here is that you shouldn’t assume prior knowledge. Applying for a technical job doesn’t necessarily mean that the people, or robots, reading your CV are technical people. Using abbreviations or acronyms can be detrimental in these cases. So, think about your audience then write and style your document accordingly. For the CV example, I’ve added a list of Skills at the top of the page that can be picked up by machines to get through the first stage of the job process and next is a personal statement so connect on a more human level.
How will they read the document?
The way people consume media has changed for the majority of people. Websites are visited more often on mobile devices than on desktop/laptop browsers (source). If you’re styling a document and think that it will most likely be read on a smaller screen, like a phone or a tablet, it’s best to take that into consideration. Don’t add a lot of images in lieu of important information. Keep it balanced. You would want to avoid making the reader zoom in and out of sections of text.
If you’re handing the reader a physical copy of the document and it’s likely they won’t read it there and then and front of you then try adding a front cover; something appealing that can catch somebody’s attention from across the room. This way it’s more likely that they’ll read the document when they’re ready to.
In my example, the CV is designed for a technical position, it’s likely this document would be passed around a company via email or printed out so people could write notes on it. For this reason, the CV is mainly white with plenty of space around the borders and sections. It’s a simple orange and black colour design and does not contain images. This will allow the file size to remain small and will not waste a lot of ink if printed. The text is also a standard size that can be read from a tablet screen and all the important information it’s presented in a single page so readers don’t need to scroll down or turn the page to see potentially hidden information.
Next up is the use of white space. White Space is simply an absence of information. A very useful principle that has a lot of benefits.
It gives any document logical breaks and allows for elements to be grouped into sections, this makes information much easier to read and generally looks more professional. Your white space also doesn’t necessarily need to be white, it just needs to be an absence of information.
In the CV example, I used white space to break up the sections. I’ve also given the document a much thick border between the edge of the page and the information. This is so if printed people can write notes directly onto the CV to be passed around the company.
Emphasis and Consistency
Simply put, emphasis and consistency are just how you use whitespace and colours. There are a lot of articles online that talk about colour theory far more articulately than I can so I’ll leave that up to them. Once you’ve got your colours and the emotions you want to convey with the document you should stick to them. Simple things like header and body fonts, colours, and size being consistent makes a huge difference to the credibility of a document. These improvements should make the document look deliberate and thought out to the reader even if they don’t notice it themselves.
If you have a lot of information it’s good to emphasise the key points. Some people are skimmers and scanners; they’ll read the text quickly trying to pick out information and avoiding the filler text such as and, the, and they.
It depends entirely on the purpose of the document and the target reader whether or not to highlight words inside paragraphs or just sticking to headers. In the CV example, I’ve only highlighted the hyperlinks as the CV is using an analogous orange style. Having too much orange will end up deemphasizing the links, this is something we’d want to avoid as the links either point towards contacting me or point to previous work.
Last I’d like to briefly mention the importance of flow. Flow is an interesting concept to me as it’s easy to explain but can be difficult to put into action efficiently. It’s not necessarily about ordering information in order of importance. Information can be presented in chronological order, you can present information as if you were telling a story. The main point is to get the information to flow logically. When I was doing my presentation I said something similar to “You wouldn’t read the even pages of a book then go back and read the odd”.
The flow of the CV is as follows:
The reader is automatically drawn to the name, it’s large, orange and at the top of the page, I did this so my name is in the head of the reader while they continued reading, I want to be memorable. Next, they’ll register the links under the name, it should be obvious that they’re just contactable links so the reader intentionally or unintentionally skips them to get to the important information.
Skills are next. If the reader is a robot it will pick out the keywords quickly. If the reader is a technically savvy person they might spend some time looking at the skills to see if I have what it would take to do the job. If the reader is non-technical they will skip this section.
Next is the personal statement, the human component. I want to try to establish a connection with the reader. I talk about what motivates me and my hobbies. By this time hopefully, I’ve got the attention of any reader. Robot, Tech-Savvy and Non-Technical.
Experience and Academia on a CV are obviously important sections to add. As previously mentioned I’ve written these as rows and columns. This way the reader can just look down the first row to find what I was doing and when they can then read a little more about that time. In each description, I’ve spoken about the time from a technical view and where possible added links to the projects I had worked on. This should please the robot, the Tech-Savvy and it should showcase to the Non-Technical reader what I’m capable of doing with the skills I had mentioned.
I finish the CV with additional links in a less formal style of writing and a small message to once again connect on a human level.
Tip of the Iceberg
There’s a whole world out there of design patterns, tips, best practices etc. This article is just meant to be the super basic design principles that I’ve found help me personally and professionally. I believe the design of a document is just as important as the content and I hope you can see why.
Thanks for reading