Art & Design

Design for Non-Designers

13 minute read
design-for-non-designers

A no-nonsense and practical approach to designing things when you should be doing something else.

I decided to create this slide after many requests fom developers and marketing people wanting some guidelines on design. It is for anyone who needs to design something, but doesn’t know where to start.

 

Text from Slides
  1. DESIGN for Non-Designers by Dave Hall No nonsense approach to designing things when you should be doing something else.
  2. Are you depressed about your design skills? Panic attacks over that presentation? Looking down the abyss of artistic failure?
  3. Well, it’s not that bad. The reality is, you come to work in the morning and suddenly you are told to create an ad to promote your new service on LinkedIn. What is your first thought? “He’s too busy trying to create art. This is just so annoying.” “Where is that that prima donna designer when I need him? Off again on holiday.” “It’s going to take me ages to try and design this. Why me exactly?”
  4. Some of this is true. But the ability to do a little design is important. I’m sure everyone has needed to create a wedding invite, website banner, flyer for the sports club or “wanted” ad for the local paper.
  5. A LITTLE background My story has two slides.
  6. I’d love to say that I was curious about the world of design around me from an early age. But clearly I wasn’t enabled. I could hardly move.
  7. In general, people think that to be a good designer, you need years’ of experience in design and possibly a Masters in Visual Communication. I have no formal training in design, although I loved art in school. I became a writer in advertising before finding a love for design. I wrote ad copy, blurb for brochures, nice words to convince people that they needed something they usually didn’t. One thing I did learn was the art of storytelling. That’s one of the defining features of great design. So, anyone can learn to design. WHO AM I?
  8. WHAT IS bad design? I think it’s more fun to ask this first.
  9. Arrggghhhh! I’m blinded! Arrggghhhh! I’m blinded!
  10. I’ve also lost the use of my legs through shock! I’ve also lost the use of my legs through shock!
  11. So bad design is Unbalanced Cluttered Unfocused Bad design is something that fails to communicate clearly.
  12. GOOD design Let’s find out how to start creating it.
  13. Design should go unnoticed. When it comes together, information should be understood clearly. Bad design makes us quint, sigh, and causes irritation. I am not going to force you through design theory, but sometimes a little background is interesting. These are the tools and principles I think are most important for anyone who needs to do basic design work on a daily basis. GOOD DESIGN
  14. The elements of design These are the basic building blocks of drawing, design, painting and any visual medium. Colour Shape Texture Space Form
  15. The principles of design These principles are applied to the elements of design to create a full design. Balance Emphasis Movement Pattern Repetition Proportion Rhythm Variety Unity
  16. 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 relevant. This is not an exhaustive look at the practice of design, but a quick way of improving your designs without having to go back to university.
  17. WHITE space The number one rule that is broken. 1
  18. Music is in the space between the notes. French composer, Erik Satie “
  19. First things first. This is the rule I see being broken more than any other. For some reason, you fear ‘white space’. Too much space in a design, and the ‘boss’ suspects that there is something being wasted. Surely you really need to eke out every millimetre of real estate to get ‘bang for buck’? 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. WHITE SPACE
  20. See all that lovely white? Apple makes good use of white space throughout their website. It makes their product shots stand out and gives a sense of refinement.
  21. Possibly the most famous use of white space in advertising. It creates tension and brings this page alive. Your eye is brought on a journey.
  22. Bad Good Cramped and no room to breath. I feel I’m in a design prison of my own making. Ah that’s much better. Looks more elegant. I’m not ashamed anymore.
  23. 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.
  24. CORRECT typography The art and technique of arranging type. 2
  25. Oh dear! More beauties at boredpal.com.
  26. Make it easy to read. Roger Black, Designer. “
  27. TYPOGRAPHY Typography, the act of arranging type, is so central to print and web design, that we can take it for granted. You work with typography everyday when you use tools like Word or PowerPoint. Typography is the most important tool to use, 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 a sense of well being. So what do 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.
  28. Serif Sans Serif
  29. Georgia Cambria Times New Roman Arial/Helvetica Calibri Verdana System fonts that are good to use
  30. Josef Muller-Brockmann was the godfather of stripped back typography. Just using words, it’s amazing how powerful this poster is in communicating the message.
  31. A nice example of a business card that uses typography to great effect. Using different weights, styles and variations can create an interesting layout.
  32. This is using Georgia for the headline at 21px. This body text is set in Arial. It is set at 12px with a line height of 1.5. The Georgia of the headline gives some contrast and makes the text more interesting. Arial is a readable typeface. It’s not exciting, but at least readable and available on all machines. Line height is calculated as 1.5 times the font size. So 18px is the line height. An example
  33. 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. Font means grouping of typefaces that have similar characteristics and is used more as technical term. A typeface like Times, 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.
  34. Use two typefaces Select typefaces that feels suitable to the content. Something corporate, use Times, 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. So use two contrasting typefaces for visual interest. Use a Serif like Georgia for headings and a Sans Serif like Helvetica for body text.
  35. For clarity, it is best to use left or center alignment. Right alignment can be hard to read and doesn’t make much sense in content dense material. Use left alignment for text if there are many paragraphs. Use center if you have a heading and a line of text. For example in a title slide of simple banner ad. Align text either left or center
  36. Typographic scale I go with Robert Bringhurst in ‘The Elements of Typographic Style’ when he talks about the classical scale of type. Stick with this classical scale. It’s tried and tested. In points — 10, 12, 14, 16, 21, 24, 36, 48, 60, 72. A good starting point is 12–16pt for body text on the web and 12pt for print. 28pt for headlines.
  37. 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.
  38. 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. So 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.
  39. Punctuation please Two punctuation mistakes that annoy me. Improper use of quotes and dashes. Yes it’s pedantic! When using quote marks: “” “” not (these are inch marks)Use When using dashes: Hyphen “-” connects two things that are intimately related. e.g., tie-in, two-thirds. En dash “–” connects things that are related to each other by distance, as in the May–September. Em dash “—” for a pause in thought and can take the place of commas, parentheses, or colons. How to create dashes on the keyboard
  40. Grids & alignment The best way to layout your design and keep it neat. 3
  41. This is how it might feel to live in a cramped layout. ctrak.
  42. A grid is like underwear, you wear it but it’s not to be exposed. Massimo Vignelli “
  43. GRIDS & ALIGNMENT Correct alignment makes your design more cohesive and visually appealing. It also makes it easier for readers to scan over a page. Grids act as guides 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. 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.
  44. This is what a complicated grid system looks like. There are a lot of layout possibilities.
  45. Another interesting layout from Digest magazine, designed by Elliot Jay Stocks.
  46. A grid can be as simple as a single column. Everything aligns to the left. It’s clean and clear.
  47. Bad Better Trying to use different alignments can cause your design to look inelegant. Just keep it simple. Align everything to the left and objects can be aligned vertically to the top of text. Headline Headline
  48. 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.
  49. One column Use one column if your design is a small ad or brochure.
  50. Multi-column Use multi-columns if your design is a larger editorial piece or wide webpage.
  51. THE POWER of contrast Making objects look different from one another. 4
  52. Via Megatron_Griffin
  53. A curve does not exist in its full power until contrasted with a straight line. Robert Henri, Painter “
  54. Contrast between design elements can make a design stand out and get noticed. Contrast on a page 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. 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, colors, shapes, sizes, space, and images. Black and white, big and small are obvious types of contrast. CONTRAST
  55. The Mad Men campaign design are as high contrast as you can get. Again, only two colours needed. Hard to ignore.
  56. This light text on a dark background is good contrast. This is also a good example of text overlaid on an image which we will cover later. From Last Bits on Dribble
  57. Bad Good This is bland. Nothing pops. The red adds an extra dimension to the design.
  58. Colour contrast Black and white have high contrast. Yellow on blue creates high contrast as they are opposite each other in the colour wheel. A strong coloured image against a plain white background create interest and contrast.
  59. Size 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.
  60. Shape contrast Why not use circle instead of boxes when putting shapes on a page?
  61. COLOUR and images Making your design pop. 5
  62. Caption
  63. Colour is like food for the spirit — plus it’s not addictive or fattening. Isaac Mizrahi, Fashion Designer “
  64. Using colour and imagery is a central part to 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 news feed 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. 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 recommend that “There are times for strong primary colors and times for subtle pastel colors; there are times for just black and white; and times where rich browns and hearty colors work more appropriately to the task at hand.” COLOUR AND IMAGES
  65. Saul Bass was a master at using minimalist colour palettes especially in his early movie posters. Colour can be used simply.
  66. 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.
  67. Striking two colour business card. You can’t get more striking than this, black on yellow. Obviously your palette needs to complement the character of the brand.
  68. 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.
  69. Text friendly photos If your 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.
  70. Put the product shot to the side of text If you need to show a product shot, why not place it to the left or right of text. Then use a background image that is blurred to create some texture.
  71. Text with background layer My least favourite text layout, but can be used if you have a troublesome image.
  72. 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 reeks 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.
  73. Bad stock image Better stock image There is a space reserved in hell for people who continually use crap like this. This is more like it. Nothing too posed. There’s no pearly whites on show or mugging at the camera. Real people if possible. Why not take your own?
  74. PUTTING IT into practice Let’s see how it all comes together in something you do every day at Zartis. 6
  75. Some good examples of promos
  76. Colour and branding Primary #00a0c6 For buttons/links #00c78b For body text #121212
  77. Font selection When using Canva use ‘Open Sans’ typeface. For body text ‘Open Sans Regular’. For headings ‘Open Sans Extra Bold’ or ‘Open Sans Light’. For extra styling ‘Arvo’ (a slab serif) for headings if you are feeling creative.
  78. Logo placement Download logos Best if square or portrait Use centered logo if text is centered. If landscape Text can be left aligned. If landscape Text can be left aligned.
  79. Tools These are apps that you can use right now to create great designs. Create designs with Canva Edit images with Pixlr Pick colours with Adobe color Free stock images at Pexels
  80. References These are the bibles of design and content. Thinking with Type The Vignelli Canon Guardian Style Guide
0 Comments

Leave Your Reply

Your email address will not be published. Required fields are marked *

*

*