Design Tips for Non-Designers

Design Tips for Non-Designers

64259bb1-1f2e-44dc-89e4-28847be0f2cd (image/jpg)

Line Height

Typography is 90% of design. This is why getting it right is so hard.Apply the line height of 1.6 to all body text. In CSS, you’d simply add line-height: 1.6 to all p elements. If this is a printed piece, simply take the body text font size and multiply it by 1.6.

32584821-f428-497f-b6fe-bc8ee338e89b.gif (image/gif)

Use 2 Fonts

Properly picking fonts and combining them is hard. To make things easier on yourself, pick only 2 — one for body text and one for headlines. Then multiply the body font size by 2.5 to get the headline size.See? Design is math.

4d3ecdd5-cd03-4c7a-a1ca-d8c4e58190e6 (image/jpg)

Narrow Columns

Each time we get to the end of a column, our eyes struggle to catch the next line. To make the text more scannable (and to make design look more professional), limit your lines to 58 characters per line.Here’s a jQuery plugin to help you with that.

78180503-7fe8-4002-a70c-18d1d9a743dd (image/jpg)

Use 2 Colours

Pick only 2 colours to work with and give each one a task. For example, you may use orange for all call to actions and blue for branding elements.Most of all, make sure to only use exactly the chosen colours — don’t try to match it by feeling as it will look totally different on different screens. Use a colour picker and sass variables.

6b7d7028-c93c-4064-9e33-8017713ca7fb (image/jpg)

Add Underline

In designs with heavy use of typography, it can be hard to get it all right.Adding a line underneath the text or on the side will help visually separate content. Take any printed news for example — chances are, they use the same technique to group content together.

5b8f326d-3c99-48ee-8e03-a38653afd802.gif (image/gif)

Use Lots of White Space

If a layout doesn’t look quite right, it’s very likely the result is due to a lack of macro white space.The trick here is to start leaving more space around elements than you’re comfortable with. Keep in mind that white space is not empty space. It’s a graphical tool.

3e572b4a-848e-4080-864d-87048075cb0c.gif (image/gif)

Alignment

Instead of using centre align on everything, try aligning your text it to left to spice things up. In layouts rich in white space, aligning to left can give off a sense of luxury.

1e1f17d5-1c5a-41cc-be32-074e9e7f59fc (image/jpg)

Use Icons

When you need a quick illustration, icons can save your life. You can even use them to create simple logos.But where they shine the most is in adding that extra little touch to information design. Instead of simply listing stats, add tiny icons to each list item.

e749e331-238e-4696-944d-62632075ee1a.gif (image/gif)

Use a Simple Grid

Instead of using grids with 12 columns, you can simplify the concept and simply split your layout into 3 of 4 columns and make sure elements are aligned to the same vertical and horizontal lines.

8afbfdff-997a-4db2-bafa-1a9dde48d1fd.gif (image/gif)

Develop a Style Guide

Staying consistent should be your number one priority when you’re build a brand. Large companies may have 100-page documents for this, but ain’t nobody got time for that! Simply create a short style guide using the template below.Click here for a free template.Source: Design for Founders

825037c2-005e-4c80-b053-db502c8b5c25 (image/jpg)