18

Feb

2014

10 Useful Tips for Web Designers

Tomas Laurinavicius:

I have been designing for over 5 years and always wondered how to learn more and get better at what I love to do. Internet is full of advices and tutorials but most of the resources are low quality, repetitive and offer just a surface-level knowledge. So there you have it, I have made a list of top 10 tips that in my opinion are very important for every web designer.

1. Think about the end user

I have been doing this mistake for a long time, and honestly still catch myself designing for my personal taste and preferences rather than thinking about the end user. Once I was designing a website for a real estate investment company and wanted to use all the fancy flat color palettes, spiced up with some parallax transitions and custom fonts, because I like it, but thinking about the potential investor I have decided that they don’t give a s*it about the newest technologies, most likely website will be displayed on a crappy Internet Explorer which will hopefully at least load the website. Check out this cool UX Crash Course to learn more about user experience and user centered design.

2. Don’t reinvent the wheel

I won’t blame trends and amazing community on Dribbble and Behance but they influenced me to recreate things when it is totally unnecessary. Everything is a remix, so don’t be afraid to take what works from other designers and apply it to your work. You should definitely consider using methods and patterns that are proven and work. Check the web design conventions and browse through design patterns sites like PatternTap.

3. Get your colors right

I can’t advice you much on getting colors right, as I am always struggling getting that nice winning color scheme for my projects but you should definitely spend more time on selecting a color scheme. For color scheme inspiration I browse Dribbble, COLOURlovers and Kuler. One thing that certainly makes your design work better is using less colors. Have a strong focus on one or two colors and use neutral colors like white, grey or black. Most successful brands are usually associated with one or two colors, think Coca-Cola, Microsoft, McDonalds, Ferrari.

4. Get typography right

Most content on the web is text. If you are able to master typography which is a key of functional and aesthetic web design you will reach the stardoms of your career. Most important things I’ve learnt would be to use more white space than you do now, after that use even more. Make sure you create a visual hierarchy using different weights and sizes of the typeface. Always test contrast and legibility, especially on smaller screens, including smartphones and tablets. Once again, using less fonts will lead you into more professional and beautiful end product.

5. Use outstanding images

Images are probably second most important thing after typography. Visuals on your website communicate with the user instantly conveying message that is usually perceived unconsciously so make sure that the images you have chosen complement your content rather than conflict with the main aim of the website. Getting great looking photos takes a lot of time and money if you buy from stock websites. For the last couple of months I have noticed a trend among creatives of using really visually appealing photography. I have made a list of 15 best websites for getting free nice looking photos for your designs. 15 Best Free Stock Photo Websites

6. Keep it simple, stupid

You need to grow up as a designer to realize that using less colors, fonts and images will make your design timeless and more usable. There is a beautiful quote on perfection and minimalism: “Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.” - Antoine de Saint-Exupery

7. Get little details right

Getting smallest pieces of the design (like rounded corners done right) make a significant difference in the big picture. Things that I value the most are pixel perfection, consistency and intuitive user interface. For brilliant UX design observations check Little Big Details.

8. Optimize your workflow

If you are a designer you are probably use one or another graphics editing software on a daily basis. Get little things optimized to improve performance of the software which will lead in a better efficiency and joy of work. Optimize photoshop performance, create and reuse templates for website layouts, clean up your resources folder, delete unused fonts. Check out this article by Jacob Cass on a professional designer’s workflow.

9. Think about business goals and persuasion

Great design converts… into customers, sales, fans, comments, shares, anything that business wants it to convert. Read more about persuasion and design techniques that get more conversions. Getting right color and position for the call to action buttons, clear typography and intuitive user interface are just a couple aspects of a design that converts. Check GoodUI, a wonderful ongoing list with practical tips on how to make your design convert better, curated by Jakub Linowski.

10. Design great “above the fold” area

The term comes from print and more precisely from newspapers industry. You know how you fold your newspaper into half? The visible top area is called “above the fold” area, where bottom part is “below the fold” area. Above the fold area in web design is usually the resolution of the visitor’s screen. If user scrolls to see something, it’s already below the fold area. Getting this thing right, I’d say to include your logo, navigation, main message and call to action button above the fold, otherwise visitors may not find your website engaging and leave never coming back. Above the fold area is your selling proposition for the first time viewer, so make sure you put striking imagery and message at the top of the website rather than hiding it somewhere in the middle. Check this infographic on “above the fold” design.

These are the things I’d advice you to learn or dig deeper. Most of the advices are general but I’ve tried to provide you as much actionable tips and reading resources as possible. How is your design philosophy different?