

Robin Williams – no, not that one – is one of the most interesting authors about text and layout design. Her book, The Non-Designer’s Design Book: Design and Typographic Principles for the Visual Novice, is a true gem. In the book, she explains the 4 basic rules for effective graphical design: contrast, repetition, alignment and proximity (CRAP).
In this blog post, we’ll go over those 4 basic rules and how you can easily implement them in your layout design. I’ve already taught you how to write scannable web content, but that blog post didn’t cover the layout of texts all that much. So let’s set the record straight! While scannability in a text itself is key, it is also closely tied with the layout of the text. After all, a text that’s a joy for the eye is a text that is inviting to be read!

1. Contrast
Let’s start with the first rule for effective layout design: contrast. If elements on your page (such as type, color, size, shape and so on aren’t identical, let them differ extremely from each other. Don’t be a wimp. Let contrast shine! A good example is the size of the letters in a newspaper headline versus the ones in the article itself. In contrast (see what I did there?), a headline typed in Constantia 11 above an article in Constantia 10 doesn’t show enough difference between the two, making it difficult to differentiate.

So how do you add contrast to your page? Contrast can be created in many ways. You can contrast
- large type with small type,
- a graceful oldstyle font with a bold sans serif font,
- a thin line with a thick line,
- a cool color with a warm color,
- a smooth texture with a rough texture,
- a horizontal element (such as a long line of text) with a vertical element (such as a tall, narrow column of text),
- widely spaced lines with closely packed lines,
- or a small graphic with a large graphic.
Again, don’t be a wimp. You cannot contrast 12-point type with 14-point type, you cannot contrast a half-point rule with a one-point rule and you cannot contrast dark brown with black. Get serious! Contrast is crucial to the organization of information (its scannability): a reader should always be able to glance at a document and instantly understand what’s going on.

The information in this resume is all there, but it doesn’t look inviting to read and it doesn’t grab your attention.

In this example’s layout, there is a lot more contrast, which improves its scannability enormously.
2. Repetition
The second rule of effective layout design is the rule of repetition. It states that you should repeat some aspect of the design throughout the entire piece. Repeating visual elements in your brochure, newsletter or blog post helps to develop a structure and strengthens the feeling of a unified piece of content. The repetitive element may be a bold font, a thick rule (line), a certain bullet, design element, color, format, spatial relationships, etc. It can be anything that a reader will visually recognize. You can think of the rule of repetition as a reminder to stay consistent.

When you get to the end of the information on this card, your eye just kind of wanders off.

Now when you get to the end of the card, your eye bounces back and forth between the bold type elements. That’s the point of repetition — it ties a piece together and provides unity.
Het It’s like accenting your clothes: if you wear a black outfit, you might accent it with jewellery and shoes in the same shade of red. However, be careful to not repeat an element so often that it becomes annoying or overwhelming. Think of rule #1 and be conscious of the value of contrast! For instance, if you wear the same black outfit, but now with a red hat, red earrings, a red scarf, red shoes, and a red coat, the repetition would not be a stunning and unifying contrast: it would be overwhelming and the focus would be confused.
3. Alignment

Nothing is ever allowed to ‘just end up’ on your pages, no matter the medium you’re writing for. Every element should have a visual connection with another element on the page. This way, you create a fresh and clear look and feel.
When items are aligned on the page, the result is a stronger cohesive unit. Even when aligned elements are physically separated from each other, there is an invisible line that connects them, both in your eye and in your mind. Although you might have separated certain elements to indicate their relationships (using the rule of proximity), the rule of alignment is what tells the reader that even though these items are not close, they belong to the same piece.

The elements on this card look like they were just thrown on and stuck. None of the elements have any connection with another element on the card. Some items are left-aligned, some are right-aligned and others are centered.

By moving all the items on the card over to the right and giving them one alignment, the information is instantly more organized (also because they’re grouped together). The text items now have a common boundary which connects them together.
Avoid using more than one text alignment on the page. For example, don’t center some text and right-align other text.
4. Proximity
Items on your page that belong together or have a connection in one way or another, should always be close to each other. Remember: proximity implies a relationship. That applies to people in relationships, for words in a sentence and for headlines and bodies in a text. That also means that items or groups of information that are not related to each other should not be in close proximity to other items. This gives your readers an instant visual clue to the organization and content of your page.
Let’s take a simple example to illustrate the rule of proximity. I’ve put 2 lists below, both containing the same information. What do you assume about the flowers on the first list? Probably nothing much, right? What about the flowers on the second list? It appears that the last four flowers are somehow different from the others. You understand this instantly. And you understand it without even being conscious of it. You know the last four flowers are somehow different because they are physically separated from the rest of the list.


🚀 Takeaway
Rarely is only one rule the only answer to a page. The other three rules are intrinsic to the design process and you will usually find yourself using all four. But take them one at a time. It’s a good idea to start with proximity first and then go from there.
Contrast: If elements on your page (such as type, color, size, shape and so on) aren’t identical, let them differ extremely from each other.
Repetition: repeat some aspect of the design throughout the entire piece, such as bold font, a thick rule (line), a certain bullet, design element, color, format or spatial relationships.
Alignment: every element should have a visual connection with another element on the page.
Proximity: items on your page that belong together or have a connection in one way or another, should always be close to each other.
I hope these 4 rules serve you as well as they do me. Apply them to your layout design and watch how it improves them! 💩
What others have also read


People don’t really read online. Instead, readers ‘scan’ web content for useful bits and pieces. If you truly want to cater to your website’s visitors, you should make their lives as easy as possible. How? By making your texts as scannable as possible and making it easy for your readers to find the information they are looking for. In this blog post, I’ll tell you the best ways to do that, give you some concrete tips from our own web designers and copywriters, and give you a checklist to see whether your website is as scannable as possible. Paper vs. screen If you write texts for websites, you should probably take into account that your reader reads very differently on a screen compared to on paper. Like I said, readers scan a lot more on tablet, smartphone and pc screens . If they do decide to really read something, they do so 25% slower compared to reading on paper . Reading tests also revealed that reading on a screen is more tiring and that readers tend to remember less from what they’ve read. Use screen fonts Screens and paper handle the legibility of letters differently. Microsoft fonts such as Verdana (instead of Arial) and Georgia (instead of Times New Roman) are designed specifically for screens by Matthew Carter . The Dutch Lucas de Groot designed the Calibri screen font for Windows Vista. For your online writing, it’s best to choose a font that has been designed for screens instead of paper . Define what the most important information or task is Why do people visit your website? Check your website statistics (through Google Analytics , for example) or log files and think about the following questions: How do people navigate to your website? Referral, organic search, social media, …? What are your most popular pages? From what pages do people leave your website? Where do they stop reading? Find out what the most common pieces of information are that visitors are looking for on your website and make that information easiest to find. For example, people usually call a school to tell them their kid feels sick. The school’s homepage might include something like this to cater towards their audience then: Will your child be absent from school? Call or send a text to [phone number] before 8:30 AM. Don’t forget to mention: your child's full name, class reasons of absence. Thank you! This is much more informative than a homepage that starts with ‘Welcome’, which doesn’t really help out with your SEO (Search Engine Optimization) either. It’s important that every single one of your web pages displays the call to action as clearly as possible, e.g. click a button. Visitors want to get started immediately, so make the most important information or task stand out . Make your web content as scannable as possible The internet is a quick search medium, pretty neat for whoever needs to look something up quickly. But ill-considered web content gets lost quickly, both in search engines and in the reader’s mind. More than on paper, the reader needs short pieces of text, titles and white space. A title summarizes a whole paragraph in just a couple of words. Your titles should be informative and include the most important information. Something important is of course what the reader thinks is important or what they are looking for, not necessarily what you think is important . This provides the reader with structure and makes your text much more scannable. Other significant information should be in headings, photos and captions, short paragraphs, buttons and links. You can also use bullet lists like the one above. Arrows are particularly useful for highlighting something important. Numbers in digits work better than numbers in words. To make your web content more scannable, write 100% instead of one hundred percent. Numbers are more striking than words. 7 tips from the ACA web designers and copywriters Limit your web page length to 3-5 screen lengths If your web content is longer and all information is relevant, consider altering your website’s structure and adding more web pages. Say the most important things first Web surfers look at the left side of their screen for 70% of the time. A visitor glances over your web page roughly in the shape of an ‘F’: they start at the top left, then look at the top right, go down from the left and next glance at the right again somewhere in the middle (see heat map to the right). It’s worthwhile to put the most important information at the top left of the page and less important information towards the bottom right of the page. Write your web text from short to lengthy The first paragraph should be the shortest. The reader will only continue to read the other, longer paragraphs if this one is interesting enough. Mind the imagery Pictures, hyperlinks, bullets, … Provide one absolute eye-catcher and at most 7 visual accents per web page. Take the text-to-imagery ratio into account and the fact that text to the right or under a picture gets read much more than other texts. Provide contrast between text and background color For paper, it’s black on a white background. On a screen, however, this is too taxing for your eyes. Dark grey on a white background is a much better option. One line should include 75 symbols or less, including spaces A sentence should never be smeared over more than 2 lines. The amount of lines per screen length should be 23 or less. A line should contain about 75 symbols or less, which comes down to about 12 words per line. Links should tell readers what they do Don’t use ‘Click here’ links, but rather use ‘Click here to learn how to write reader-friendly emails’. Use buttons for actions like searching and registering, and hyperlinks to navigate to other pages.
Read more

Y ou can’t design or develop something for all 7.9 billion people on the planet. So when we start a project, we decide on a target audience to narrow it down. From there we build our features and designs in a way that seems fitting for that audience. However, what we can’t narrow down on are the accessibility features. Everybody needs to have the possibility to use or experience your said creation. Some devices have built-in features like Google Talkback , where your device can tell you what’s happening on screen and even use that information with a digital braille reader. Or sometimes we make sure our platforms are accessible to use, such as our website, which by the way has a Google Lighthouse accessibility score of 98! But why stop there? Every piece of content should be accessible for everyone. This also counts for PDF files. Get started with these 3 tips we’ve gathered using a MediMarket Case Study : Do an accessibility check with Acrobat Pro First things first: do an accessibility check with Adobe Acrobat Pro. This check immediately indicates in a clear list which issues you need to face. Some of these issues can be solved directly in Acrobat Pro, and others require you to go back to your source file or check manually. You can gather a bit more knowledge by clicking the Autotag Document option. This will read the PDF and give you another accessibility summary about missing alt text, but more about this later. Realize the importance of the reading order Ever heard a screen reader freak out because it doesn’t understand your reading order or structure in the PDF file? Well, imagine someone talking way too fast, without stopping and without any clue what they want to say. Sounds chaotic, right? Now think about the users that really depend on these types of digital aids. Your PDF is basically useless when this happens. So be certain you have a structured document with the right identity headings, paragraphs and sections when creating the PDF. Want to add this to an existing PDF? With Acrobat Pro, you can read the reading order later thanks to their accessibility options. In this screenshot you can clearly see what the screen reader will read first, second, third and so on. Did you know Alt Text is also possible in PDF files? Is this the surprise of the day, or did you never bother to add an alternative text in your documents? Well, start by adding alt text on images or interactive fields. A screen reader can’t read your JPEG files and you need to explain what is shown to them. Don’t overdo it though, your user doesn’t really need to know you added that cute cat photo as filler. Don’t do this just with images. Audio and video elements are also in need of alt text. This isn’t only necessary for users with bad eyesight or hearing, but also for users with bad internet connection who only can download the text of your PDF. There is a lot more to this, but these 3 tips can certainly get you started! However, what I really wanted to achieve with this blogpost is that you start thinking about making all your content more accessible. Do you want more information about accessibility, for example in mobile applications? Go to our services and see for yourself what we can help you with!
Read more

All of us write every day: emails, texts, notes, presentations, … But few of us have really mastered the art of writing. In this blog post, I’d like to walk you through 5 golden rules for effective copywriting that will have the most profound impact on your copy if you don’t follow them yet. 1. Write for the customer, not for you Your copy should always focus on the reader or customer. That means 3 things: speaking the customer’s language, addressing them properly, and focusing on benefits for them (not for you!). Speaking your customer's language If you’re trying to persuade people to do or buy something, you should use the language they use and think in. Speaking in their language helps prospects get to know, like, and trust you because they recognize themselves in your words. That helps you connect and build relationships with them , which in the end makes it easier to convert them. If you haven’t already done it, go back to your texts and make sure everything sounds the way your customers think. Put yourself in their shoes and understand their problems, struggles and worries. Not only will your copy get better for the exercise, but getting out of your own way like this can jumpstart new ideas and illuminate what should come next. Focus on benefits Virtually all successful copy discusses benefits, not features. You talk about what your product does , not what it is . And whatever your product does , should always benefit the customer – why else would they buy it? Putting one or more benefits in your headlines is a good practice, too. Does your product or solution help your customer make the right choice, save time or money? Tell ‘em! Plus, focusing on benefits is a relatively easy fix if your current copy isn’t doing so well. Again, go back to some of your earlier texts and make sure every feature you mention leads to a benefit. Evaluate your copy’s ratio of talking to the customer vs. talking about yourself Effective copywriting (and by extension, content marketing) always starts with the customer. No one reads copy that only talks about your company. Try to use “you” at least twice as often as “we”, “I” or your brand name. Through this simple trick, you’ll naturally focus more on your customer’s needs and desires. Your copy will be stronger, leading to more traffic, leads, and hopefully sales. If you need some more help, Copyblogger has an article about a simple 1-2-3-4 framework that you can use to help you focus on the customer and incorporate the most important persuasion fundamentals. 2. Always include one or more strong call-to-actions The goal when creating content for content marketing purposes is clear: at the end of the day, you want people to do something, whether that’s downloading a whitepaper, signing up for a webinar or newsletter or simply clicking a link. However, if you provide no direction on what the reader should do after they read your copy, they’ll do nothing (even if your copy is 🔥). Everything you write, from blog posts to emails to social updates to landing pages, should close with a call to action (CTA). To get the most out of your CTAs, make sure they: match the buyer persona and stage of the buying cycle. For example, just from reading a blog post, it’s not very likely that you’ll instantly convert someone to a customer. They’re much more likely to for example sign up to your newsletter if you offer enough valuable and interesting content, though. offer something of value without asking too much from the prospect . If you ask prospects to fill in their name, company, role, phone number and email address just to download a simple template, chances are not many people will actually do it. Just their name and email address are fine for something like that. If you’re offering a 100-page ebook, it’s a different story. As they say in Dutch: voor wat, hoort wat. offer prospects something they actually want. This is related to the first point I made about writing for the customer, not for yourself. Find out what their needs and wants are and then address these appropriately with (part of) a solution. Few people will download a whitepaper about outdated technology or “solutions” that don’t address any real problems. reiterate your most important benefit or emotional driver. Your CTA should be direct enough with strong verbs such as “sign up”, “download”, “get”, “enjoy”, “try”, or “start” and should always tell prospects exactly what to do. Avoid weak verbs and CTAs that are not specific enough to inspire action, like “Click here”. 3. Keep it simple, clean and concise After writing your first draft of text, it helps to read it out loud to find things that are unnecessary or unclear. Cut unnecessary words and consolidate ideas as you edit. Include bullet points and subtitles to make it easy to read and, more importantly, easy to scan. Almost every reader will first scan the content for interesting headers before they decide whether or not they’ll read all the content in more detail. I’ve already written a blog post about making web content as scannable as possible, which you can check out here . Another tip to keep your text as short and concise as possible is to use the active voice as much as possible . It’s okay to use the passive voice once in a while, but it should never be used in over 20% of your sentences. Additionally, short sentences are generally better than long ones , so if you can chop a sentence up into 2: do it! To see if your text is really clear enough, it’s always a good idea to have someone else read it to see if they understand the message and if they think the CTA fits the post. 4. Do your research thoroughly The best copywriters are the most tenacious researchers. They dig and drill deeper beneath the usual surface and chip away until they find a goldmine of interesting and valuable information. Everybody recognizes the value of interesting information, but few people can actually find that information, let alone convey it in a concise and simple way. So dig deeper, get beyond the ‘big blogs’ everyone in your topic reads and go to the rare, obscure resources, especially if they’re chewy and difficult for the average reader. It’s better to go in-depth about a certain topic and provide tons of info in a clear way, than not enough info. You can never drill deep enough! It’s better to say a lot about one thing, than not much about lots of things. Plus, there’s a bonus: during compulsive research, you usually come up with more ideas for new content. Combine that with your endless creativity and enough time to think and voilà: your next big idea is born! 5. A strong headline is half the battle Think about how many people will read your title compared to the people that will read the entire body copy. Safe to assume that the former will be tons more than the latter, right? It should then come as no surprise that you should invest quality time in an attention-getting message. Your headline should always include a customer benefit and something catchy that makes people want to read on. A good way to approach this is to write as many headlines as you can, and then write some more. It’s hard, but once you’re out of creativity, you start thinking outside the box, which might lead to that one killer headline. Try it! I promise it gets easier after a while. That said, you should try to avoid titles that are too obviously clickbait. The general public has become so desensitized to these types of titles that they actually steer people away from your posts, instead of attracting them. That’s why many publishers have veered away from the weary, sensationalist headlines we were all subjected to a couple of years ago; articles with the “one weird trick” to do something, or promises that “we won’t believe what happened next.” 🚀 Takeaway If you follow the ‘golden rules for effective copywriting’ above, your copy should be a piece that is valuable to the reader, easy to read and understand (those are two different things!), and compelling for the reader to ‘do’ something (CTA). One more thing that I really want you to keep in mind, is that writing good copy is NOT easy. You’ll probably get frustrated at some point, try again and again and again and get demotivated. That’s okay: it’s part of the process of becoming a better writer. Persevere, and you will improve.
Read moreWant to dive deeper into this topic?
Get in touch with our experts today. They are happy to help!

Want to dive deeper into this topic?
Get in touch with our experts today. They are happy to help!

Want to dive deeper into this topic?
Get in touch with our experts today. They are happy to help!

Want to dive deeper into this topic?
Get in touch with our experts today. They are happy to help!


