Design basics for non-designers and developers
Are you depressed about your design skills? Panic attacks over that presentation? Looking down the abyss of artistic failure? Well, it’s not that bad. All you need are a few basic principles to help you through.
The reality is that you arrive to work one morning and are asked very politely I’m sure, to create a visual for a presentation. What is your first thought? “Where is that prima donna designer when I need him? Off on a creative retreat again I suppose.” Or “that bloody designer will hold us up by trying to create a piece of art. This is just so annoying, I’ll do it myself.” Some of this may be true, but the ability for non-designers to do a little design is important.
You shouldn’t have to rely on the office prima donna to solve those small design projects that you need right now. In the past, I had specifically written a few short pieces to help the software development team and the marketing department where I worked and I noticed the same design mistakes being committed. These were not all jailable offences, just issues that compound to create an ineffective design.
I also realised there was a wider audience, outside the work environment, that has trouble creating any type design, whether, printed or digital. At some point everybody has needed to ‘do up’ a wedding invite, banner for their blog, flyer for the sports club or “Wanted” ad in the local newspaper. With a few pointers, all of you can do it yourself and leave us designers alone to bask in artistic licence. Follow these principles, and you will at least start you creating more effective and consistent design that you can be proud of.
I will be covering five key principles
- White Space
- Grids and alignment
- The power of contrast
- Colour and images
What is bad design?
The above montage is unspeakable, I hope you’ll agree. I’m sure whoever was tasked with creating these pieces, didn’t set out to be held up as bad examples. Sorry in advance. I’m holding them up purely for crimes against the senses.
What is common between all these creations is that they are:
Some of them are difficult to read with differing text styles, no text size hierarchy, inconsistent layout, bad colour choice, etc. I could go on, but what it really comes own to is that bad design is something that fails to communicate clearly. Well that was easy, wasn’t it?
What is good design
Let’s find out how to start creating it. Design should go unnoticed. When it comes together, information should be understood clearly. Bad design makes us squint, sigh and cause irritation. I’m not going to force you through design theory, but sometimes a little background is interesting. These are the tools and principles that are important for anyone who needs to do basic design work on a daily basis. You will not need to know all of these in depth.
The elements of design
These are the basic building blocks of drawing, design, painting and any visual medium.
The principles of design
These principles are applied to the elements of design to create a full design.
In the next five sections, we will be looking at five golden rules to guide you, a mixture of the elements and principles of design. These rules apply to both digital and print work. If you are creating a website or simple flyer, these rules are the same for both. This is not an exhaustive look at the practice of design, but a quick way of improving your designs without having to do an art & design degree.
1. White Space
A lack of space makes everyone uncomfortable.
The number one rule that is broken. First things first. This is the rule I see being broken more than any other. For some reason, everyone fears ‘white space’. I have tried to find out a psychological reason for this fear, but none exists. Maybe it comes from external pressures. Too much space in a design and the ‘boss’ suspects that there is something being wasted. Surely you need to eke out every last millimetre of real estate to get ‘bang for buck’?
Music is in the space between the notes.
Erik Satie had said something very profound when he talked about music being in between the space of the notes. White space is essential to strong design, so ignore the ‘bang for buck’ brigade. Designers use white space to create a feeling of sophistication and elegance. Space creates tension around objects and gives these objects resonance. It produces a strong visual frame around your message, which importantly, makes this message stand out above the clutter.
Apple makes good use of white space throughout their website. It makes their product shots stand out and gives a sense of refinement. Whether you believe their product hype or not, I believe they have the advertising space covered when it comes to intelligent design.
The ‘Think Small’ ads of the late 50s is possibly the greatest use of white space in advertising. It creates tension and brings this page alive. Your eye is brought on a journey.
Bad white space
It is cramped in here. There is no room to breathe. It feels like I’m in a design prison of my own making.
Better white space
It looks more elegant and I’m not ashamed anymore. So embrace the space. Do not be afraid of white space, no matter what anyone tells you. If it’s the first thing you do, start using it and if anyone tells you to ‘tighten it up’, email me and I’ll have a word.
Making mistakes with typography can cause some unintended consequences.
Typography, the art of arranging type, is so central to print and web design, that we can take it for granted. You work with typography every day when you use tools like Word or PowerPoint.
Make it easy to read.
Typography is the most important tool you can use in crafting good designs, but it is also one of the easiest to get wrong. Knowing some basic rules would not only improve your sense of design but also your sense of well-being.
So what will you use? A serif or sans-serif typeface? What weight and what type size? There are other considerations to getting type right. Kerning, line height, alignment. Let’s investigate.
Unfortunately, the system fonts that appear on PC and Macs can differ.
System fonts for PC users
System fonts for Mac users
- Gill Sans
- Lucida Grande
Google Fonts offers many interesting and high-quality typefaces to use on your website or download for free.
Type can be used as a design element all on its own. Joseph Müller-Brockmann was the godfather of stripped back typography. In these posters, Müller-Brockmann only using words to communicate the message. These words become part of the design.
A nice example of a business card that uses typography to great effect. Using different weights, styles and variations can create an interesting layout.
Font or typeface?
As you might notice, I do not use the term font. “Aren’t you being a bit pedantic?” Well yes. Microsoft Word originally made the word ‘typeface’ mean ‘font’ to many people. A font is a grouping of typefaces that have similar characteristics and is used more as a technical term. A typeface like Times Roman refers to an individual family member of that font. So a font is what you use, a typeface is what you see. But it probably doesn’t really matter to you in the long run. Don’t sweat it.
Use two typefaces
Select typefaces that feel suitable to the content. For something corporate, use Times. If it is more informal, use Cambria. At most you should only be using two typefaces in a design. Any more creates confusion in the viewer and creates a feeling of inconsistency. Legibility is key. Use two contrasting typefaces for visual interest. Use a serif like Georgia for headings and a sans-serif like Helvetica for body text.
Align text either left or centre
For clarity, it is best to use left or centre alignment. Right alignment can be hard to read and doesn’t make much sense in dense material. Use left alignment for text if there are many paragraphs. Use centre if you have a heading and a line of text. For example in a title slide of a simple banner ad.
Robert Bringhurst in ‘The Elements of Typographic Style’ talks about the classical scale of type. Stick with this classical scale. It’s tried and tested. In points or pixels — 10, 12, 14, 16, 21, 24, 36, 48, 60, 72. A good starting point is 14–16px for body text on the web and 12pt for body text in print.
Watch your line length
Try to keep your paragraph length between 45 to 75 characters. 66 characters per line is widely regarded as ideal. Do not make your lines too short, as it is hard to scan since the eye needs to jump back and forth too often.
Watch your line height
Line height is the space in between lines of text. The space between the lines should be about 140% – 150% of the type size. If your body text is 16pt, your line height should be around 24pt. It’s not always easy to set line height in certain software programs, so just be aware your lines of text don’t look cramped vertically.
Two punctuation mistakes that annoy me. Improper use of quotes and dashes. Yes, I’m being pedantic again. When using quotation marks use curly quotes like “ ”. Not
"". These are inch marks.
When using dashes
A Hyphen “-” connects two things that are intimately related. e.g., tie-in, two-thirds.
An En dash “–” connects things that are related to each other by distance, as in the May–September.
An Em dash “—” is used for a pause in thought and can take the place of commas, parentheses, or colons.
3. Grids and alignment
Clean up your design. Nobody likes a messy space.
The best way to layout your design and keep it neat. Correct alignment makes your design more cohesive and visually appealing. It also makes it easier for readers to scan over a page. A grid acts as a guide for the placement of elements in a design. They come into play and go hand in hand with alignment. A grid creates balance in a design. It is the invisible underlying structure of a design.
A grid is like underwear, you wear it but it’s not to be exposed.
Think about drawing on graph paper, where everything you put own, text and images, adheres to the grid. Everything should align on your design, from text to images. Some find the grid invaluable to harmonious design, while others find it limiting and constricting.
But if you’re a beginner, grids will save you valuable time and headaches. It allows your imagination to roam, as it frees you from worrying about where to place elements on the page. Obviously, when you are confident, you can always break free of the conventions and flaunt yourself a little. This is what a complicated grid system looks like. There are a lot of layout possibilities. A grid can be as simple as a single column.
Another interesting layout from Digest magazine, designed by Elliot Jay Stocks.
Stay on the grid
If your design is wide and you have a lot of text, use two or more columns to break up the composition and keep line lengths from being too long. Just remember to have enough space between your columns, which are called gutters, and keep everything aligned to the grid.
Use one column if your design is a small ad or brochure.
Use multi-columns if your design is a larger editorial piece or wide web page.
4. The power of contrast
Things become bland and easy to ignore if there’s no contrast.
How to make objects look different from one another. The contrast between design elements can make a design stand out and get noticed. Contrast draws our eyes to it. It creates interest in the design. If there is interest, readers will be drawn in. It also most importantly establishes a hierarchy of information within a design. So a heading is larger than body text.
A curve does not exist in its full power until contrasted with a straight line.
The main image of an article will be larger and more prominent than smaller thumbnail images that are of secondary importance. Contrast can be added through typeface choices, colours, shapes, sizes, space, and images.
Black and white, big and small are obvious types of contrast. The Mad Men campaign design are as high contrast as you can get. Again, only two colours needed. Hard to ignore.
This is also a good example of text overlaid on an image which we will cover later. This light text on a darker background is a good contrast.
Black and white have high contrast. Yellow on blue creates high contrast as they are opposite each other on the colour wheel. A strong coloured image against a plain white background creates interest and contrast.
This can be one of the most exciting parts of design. A simple way to create visual interest is to use different type sizes to create contrast.
Why not use circles instead of boxes to add visual interest when framing images?
5. Colour and images
Don’t overdo colour. A small bit goes a long way.
How to make your design pop. Using colour and imagery is a central part of your design process. It can bring life to a design. Text alone can convey a lot, but if your design needs to stand out in the sea that is the online newsfeed of a social network, then a splash of colour and well-chosen image can make some impact. Colour communicates meaning, so we need to be aware of what meaning we want to convey when we choose a specific colour. Cultural differences mean that one colour that tries to convey warmth, might convey sadness in another culture.
Colour is like food for the spirit — plus it’s not addictive or fattening.
It’s not enough for a designer to use a colour simply because he or she likes that colour. Choosing a colour scheme is an important part of your toolkit. When it comes to choosing images, it is important to recognise the colours in the images you use. Massimo Vignelli recommends that “There are times for strong primary colours and times for subtle pastel colours; there are times for just black and white; and times where rich browns and hearty colours work more appropriately to the task at hand.”
Saul Bass was a master at using minimalist colour palettes, especially in his early movie posters. Colour can be used simply.
Designer Reid Miles and photographer Francis Wolff worked together for years at Blue Note Records in the 50s and 60s. They created some beautifully simple album covers. What sets them apart are the colours over rich imagery. Read Miles used a limited palette of colours to powerful effect.
There a striking use of two contrasting colours on this website banner. You can’t get more striking than this, black on yellow. Your palette needs to complement the character of the brand.
The rule of thirds and images
Pick images that are visually interesting. The rule of thirds is used by the best photographers to compose their shots, putting the focus of attention in one of the four points, where lines intersect. This causes the eye to travel. Make sure your images have some visual interest like this.
Text friendly photos
If you are creating a banner that needs text over an image, choose background photos that have room and contrast for text. It is good to use white text on a dark image.
Text with background layer
My least favourite text layout, but can be used if you have a troublesome image.
A word on using stock imagery
Time is short and it can be expensive getting good stock imagery, especially people shots. It can be the hardest of all design issues, and we have all fallen into the trap of using images that reek of cheese. It comes down to choosing imagery that looks real. The less posed the better in my opinion. Aim for reportage style. It’s not easy, but please try.
Bad stock imagery
There is a space reserved in hell for people who continually use crap like this.
Better stock imagery
This is more like it. Nothing too posed. There are no pearly whites on show or mugging at the camera. Real people if possible. Why not take your own?
Put it into practice
Next time you need to create that invite or social media promo, try and put a few of these principles to work and you will be amazed how even the subtlest of changes will make something come alive.
A few online tools to use
Here are some easy to use online tools to help you create your designs.
- Create designs with Canva
- Edit images with Pixlr
- Pick colours with Adobe Color
- Free stock images at Pexels
These are the bibles of design and content.