Get better at Visual Design

Good visuals are crucial for building products people want to use; here's how to get them right

Get better at Visual Design

There’s a UX law: “Aesthetic-Usability Effect”
In simple terms, it means people often perceive aesthetically pleasing design as a more usable design. 

“Apple’s website looks really slick.” — Translation: “it must be amazing”

“[2013] Yahoo’s homepage looks terrible” — In other words: “Ugh, why would I use this?”

Products that look good make a good first impression. 

And digital products are no different! No one wants a cluttered website or a color scheme that hurts to look at. And in case you’re wondering how to get better at making beautiful websites and apps, here’s what you need to do to get your visuals(UI) right!

1.  Build a foundation

If we have a strong foundation, what we build on top of it won’t fall off easily.

While true for construction, this is also true for our designs.
Start with a rock-solid foundation. Then add improvements layer by layer.

Approaching visuals this way will ensure that the design actually works because of your solid base.

That’s for building the product’s foundation. Along with that, build your foundation as well.

Develop an eye for design. Develop a taste for good websites and apps. 

They say that you are a product of your influences. So start developing an eye for good visual design and get good influences!

Browse through dribbble, Behance, Pinterest, and study carefully top designers that inspire you. Browse your favorite websites, and look carefully at how they use layout, typography, color combinations, etc. Save their designs to your “Inspiration mood board.”

This will help you develop a taste for great designs.

2. Learn the fundamentals

I’ll eventually give you some blunt advice: “Practice like hell.”

But FIRST, I need to make sure you’re practicing the right thing. Practice doesn’t make perfect; it makes permanent.

You’ll need to know the basics, the fundamental concepts like Hierarchy, layout, contrast, typography, color, etc. These fundamentals could use their own deep dives and long-form articles — let’s be honest, they all probably have entire courses of their own. But you don’t need to have a degree in each of these fundamentals. Start by being aware of them, and why they’re important.

Hierarchy

Hierarchy is the order in which the user process information by importance.

With the correct use of hierarchy, the mind can group and prioritize elements to give them a specific order, which facilitates the understanding of what you want to communicate and the sense of achievement by the user.

The components of hierarchy are as follows:

• Size: The larger the element, the more it will attract attention

• Color: Bright colors stand out more than muted tones. 

• Proximity: Elements placed close to each other appear to be similar, or in a group

• Consistency: Consistently repeated styles give the impression that the elements are related

Layout

The layout is the structure that supports the visual components of an interface.

It helps in grouping, ranking and making sense of the information.  It also helps the content to highlight what is the most important data on the page.

To create a good layout, you’ll have to focus on:

• Size of elements

• Symmetry

• White space

• Grids 

Typography

Text represents more than 90% of all information on the web. So typography is basically a cornerstone of the entire web experience.

Typography helps design to communicate the product’s intent and purpose clearly.

It literally delivers information to people.

And all elements of typography — Font size, font width, font color, and line lengths - work together to create a great user experience. 

And apparently, those are the things you have to focus on. 

• Typeface and font

• Font weight (regular, bold, italic, etc)

• Font height

• Font size

• Kerning (space between characters). Fun notes on this:

  • We’re big fans of this one; that’s how we got our name! When done poorly, “kerning” might look like “keming”

  • Check out http://reddit.com/r/keming to see some atrocious examples of bad kerning

• White space

Color

Colors are really powerful in conveying emotions. 

We all are surrounded by them 24/7. We see things and with every color we see, we get different emotions. 

And Many people believe that choosing colors for the UI depends mostly on the taste and sense of beauty of the designer. The color selection process, however, is more complicated than it appears.

These are what comes into consideration -

• Color psychology (blue implies ‘trust’, while yellow ‘joy’ - that’s because of color psychology)

• Color theory (learn to use that color wheel)

• Hue

• Saturation

• Shadows

• Contrast

3. Steal like an Artist!

Painters, writers, and creatives of every field have been copying for ages.

But the word itself doesn’t feel right, does it?

Austin Kleon debunks this myth that our ideas have to be “unique and original.”

“Nothing is completely original” he claims, in his book Steal Like an Artist. “Every new idea is just a mashup or a remix of previous ideas.”

When people call something “original”, 9 out of 10 times, they just don’t know the references or the original sources involved.

Very often creatives are just the people who have learned how to use and apply this technique to real-life projects.

So, take inspiration from your favorite creatives, try to copy your favorite websites and apps, try to copy its layout, color combinations, typography, hierarchy, etc.

Take inspiration from multiple sources and combine them all into your work - the end result will automatically be something new.

4. Practice and Share Your Work!

So now you have an eye for design, you have a great taste. But if you only spend your hours browsing through all those design inspiration sites, and never practice them, soon you’ll fall victim to the “Gap”.

This is essentially the gap between what you like - your taste and what you produce - your creations.

When starting out, you’ll have a fairly wide gap. Your taste is the best in class websites and your creations - well it’s safe to say its level is below that of your taste by a large margin.

This gap isn’t a nice place to be in. But you’ll have to be in it, at least for a while. But how do you close this gap? Practice.

Nothing beats deliberate practice. Set up a healthy routine to practice consistently. This will compound your efforts. You need to put in the hours to make things after all. And now that you know all the basics, you can play around with type, colors, grids, layouts and different ideas.

Whatever you do, don’t let shyness or perfectionism get in the way of sharing early and sharing often. Try to get as much feedback as possible; you’ll learn so much from the input and feedback of others. Get open to receiving criticism of your work and cutting your ego down to size — it’ll make you a much better designer.

Share your work on dribbble, Behance, Instagram, your portfolio, and even share with us — we’d love to see them!

Sharing has a magical power to it — feel it first by sharing this article with your friends ;)