Great-looking design is based on the tiniest details. These details can cause a great deal of problems for beginner designers. Failing to follow the rules can ruin any landing page, leaving your brand looking unprofessional and even cost you conversions.
Fortunately, there are hacks you can use to improve your design piece before you deploy your startup’s website. You know some designs that look ok, but just feel sliiiightly off?
This ebook will help to fix them. Best part? It’s free!
These 20 tricks will save them. Let’s check them out.
Btw, I’ve written about common web design errors before. Read the post here.
1. Line Height of 1.6
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.
2. Use 2 Fonts
Properly pick fonts and combine 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.
3. 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.
4. 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.
5. Steal Like an Artist
As long as you don’t copy the entire website, you can freely use a navigation from one website and footer from another one. In fact, most websites nowadays use very similar patterns which makes interfaces easier to use.
This will also give you more time to think about how to adapt and customise the design instead of creating it from thin air.
6. Add a Line
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.
7. Hierarchy
Keeping hierarchy in mind will help your design big time. But how can you apply this complicated concept into your designs?
One way is to simply list all the elements in your piece and list them by importance. Then simply follow the list and make the most important element the biggest and most contrasting.
8. Reuse Styles
The core principle of great UX and branding is consistency. Fortunately, that means less work, too. After you’re done with one screen or page, maintain the same styles through your entire app (or website or publication).
9. More White Space
If a layout doesn’t look quite right, it’s very likely the lack of macro whitespace. The trick here is to start leaving more space around elements than you’re comfortable with. Keep in mind that whitespace is not empty space. It’s a graphical tool.
10. Group Related Stuff
For elements with a similar importance and theme, it makes sense to be in the same place within the layout. Try compiling them into groups and separating them form the rest with whitespace, lines, or background colour. This will also help with UX.
11. Use a Background Photo
A large background photo can help by drawing attention away from the little design mistakes. When you think “there’s something missing here”, add a photo. You can then play around with saturation, lightness, and blur.
12. Style Guides
Staying consistent should be your number one priority when you’re build a brand. Large companies have 100-page document, but ain’t nobody got time for that! Simply create a style guide.
Click here for a free template.
13. Icons To The Rescue
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.
14. Sketch it First
Do you take those crazy “no-planning” trips? Well, I certainly don’t. I need a blueprint for getting a cup of coffee before I get up. Anyway, thinking about the layout should be done before you dive into Photoshop. Sketches are a beautiful way of rapid brainstorming.
15. Align To Side
Instead of using centre align on everything, try aligning your text it to left to spice things up. In layouts rich in whitespace, aligning to left can give off a sense of luxury.
16. 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.
17. Layout Your Photos
Working with a number of photos can be a nightmare, especially when some are horizontal and others vertical. A way to solve this problem (and even improve the overall presentation of the photos) is to lay them out in a simple grid layout. Perfect for social media images!
18. Subtle Shadow
This is the first in the series of the dirty little secrets. I know I have made fun of Photoshop shadows before, but they can also look good. All you need to do is to tone it down to lower opacity. Use the settings above.
19. Subtle Gradient
The second dirty little secret is to add a very slight gradient to your non-perfect design. I know, flat design is now popular, but you need to use gradient so subtle that it will look flat. Does that make sense?
Here’s a $8 pack of subtle gradients you can use out of the box. I’m sure you can find some free packs on the web!
20. Subtle Texture
We’re finishing off with the third dirty little secret which is to add some texture. Sometimes, just adding an almost invisible pattern over a mediocre piece of design can rescue it from design hell. Click here to browse a ton of great free patterns.
Hope these hacks help you bring your designs from ok to great. Again, if you want more, here’s a great little guide to help you fix any design in 10 steps. It’s totally free!
Design, but simple.
My popular design ebook is now on sale. Don't miss out!
