Visual Design Essentials for Non-Designers

8/3/2019 Visual Design Essentials for Non-Designers

1/5

UIE.com | UIE Virtual Seminars | Web App Masters Tour

User Interface Engineering

HomeAbout Us

ServicesArticlesEventsVirtual SeminarsReportsBlogPodcasts

Search

Visual Design Essentials for Non-Designers

By Adam Churchill

Originally published: Jun 28, 2011

You can read this in Italian thanks to Marco Dini.

A while back, I recorded a podcast with designer, Dan Rubin. This was a follow up to hisvirtual seminar, Visual Design Essentials for Non-Designers. During the seminar, Danexpressed the idea that design is only the realm of the artistic was a myth. He went on toexplain that simply learning basic design principles can give anyone the confidence tocreate great designs.

His presentation really got our audience thinking and they asked so many great questionsduring the seminar that we didn't have time to answer them all. This article looks at two ofthe questions that we covered. You can listen to the entire interview online.

Adam Churchill: Design is somewhat subjective. One person might think your design is great

and easy to use. Another may hate that design and assume just the opposite. What are yourthoughts on this?

Dan Rubin: There's a common misunderstanding of what design is exactly. Design is not justthe visuals and the aesthetic aspect of making something look pretty or attractive. Whilethere are some established rules and psychological principles of what makes somethingattractive, to most people it is a very subjective thing. You might like a different color palettethan I do in a design. Or to one person a lot of visual flourishes might be appealing while tosomeone else it's distracting.

al Design Essentials for Non-Designers http://www.uie.com/articles/viz_design_es

5 10/09/2011 1


2/5

But those aren't really the things we're talking about. Those are more of the artistic layer ofvisual design. Picture it in a couple of different layers. Design in its core is about the visualaspects that support the functionality in a given thing. If we're talking about physicalproducts in the real world or virtual products such as web apps and services, the design iswhat communicates the functionality to the user.

When we talk about interaction design, that's a more detailed side, beyond just the

communication, the actual interaction, the give and take. What people will click on and howthat behaves.

When we're working at a lower level, below the behavior, we actually need to provide afoundation for that functionality or for the content. A framework of sorts that allows theuser to easily interact with and understand whatever is being communicated. So at its corelevel, the principles that we were talking about in the virtual seminar are more about howto make something easily communicate its intention.

When we're talking primarily about good typographical rules and creating a balancedvisual hierarchy, those things are not subjective. You can guarantee that people will react a

certain way to these things. And we're not actually looking for an emotional connectionwhere we might be with color and the more artistic layer if you will.

That's the nice thing about design. At its core level it's not really subjective. It's just a matterof good balanced decision making and not cluttering things, not overcrowding. A lot of thetime people mistake good, basic core design principles for just common sense. Because onceyou see them applied properly they just make sense. You can't imagine them being done anyother way.

Adam: So let's talk color. When your design is dominated by one specific color, how do yousuggest incorporating new color relationships?

Dan: Well, the first question to ask is, do you need new color relationships? When it comesto color as a non-artistic designer, again, you want to go to the rules that you can rely on tonot lead you astray.

One of the rules with color is to not use a lot of it. Limiting your color palette is somethingthat the best designers know how to do.

It's really, really difficult to use a lot of colors in any design. What will happen more often isthat you'll have too much going on at one time. And that's just as bad as having too much

information.

If your information density on a given page is too high, it becomes confusing. If there aretoo many colors on a given page, it's going to be too loud. If your design is dominated by onespecific color and you want to break out from that one or maybe two-color palette, the bestthing to do is to look at other tints and shades of that particular color.

For instance, if you have a design that's primarily a white background and you've got a lot ofblue on it, you could use lots of different lighter and darker blues to add more visualinterest. And the plus of that is darker colors will stand out more, especially on the lighterbackground.


5 10/09/2011 1


3/5

Those dark colors will seem closer to the viewer, and the light colors will recede furtheraway. So just by using tints and shades of that single color that dominates your design, youhave a ton of flexibility because of the contrast that's created just by making the colorlighter or darker.

I encourage you to do that before trying to introduce different hues from the spectrum,because that just over-complicates. And unless you're introducing a hue for a particular

reason, chances are you're just going to make things busier than they need to be.While we're on the topic of limiting color palettes, another plus of sticking to one or twocolors is it allows you to use other colors as specific highlights or call-outs. Which can bevery, very useful depending on the context.

For instance, red is almost universally a negative color. And we see it all the time on gooddesigns, where some sort of call-out is set in red, where the rest of the design, red doesn'tappear. Obviously, you can't necessarily do that if red is your dominant color, but being ableto use colors like red for something that's bad, for alerts, green for something that's good.Especially in Western culture, these are very well-ingrained laws of using color, and we can

use those to our advantage if we keep the overall color scheme simple. The morecomplicated the colors involved in an interface, the harder it becomes to use color as ahighlight.

Want to Learn More?

You have two opportunities to learn more from Dan.

If you want to brush up on your CSS skills, Dan is presenting our next UIE Virtual Seminar,CSS3 for Everyone. Using practical examples and exercises, Dan will show you how today's

leading sites are using advanced CSS to move some of the visual heavy-lifting to thebrowsers. Learn more about Dan's seminar.

And if you're an experienced designer you'll want to explore the Web Design Master Class inLA, August 16. This is a hand-on deep dive into Photoshop, CSS3, HTML5, and JavaScript. Forall the details on this intensive one-day workshop, visit http://sidebarworkshops.com. Theprice goes up after Tuesday, June 28. Use the promotion code UIEtips and get $100 off afterthe 28th.

Share Your Thoughts with Us

Are you a non-designer getting more involved in the design process? Share your thoughtsand experiences with us on our blog.

Share this article with a friend/colleague.

27

Read related articles:


5 10/09/2011 1


4/5

5 Ways To Suck Value Away From Your Persona Projects 09/21/2011A Snapshot on What Designers Should Know about HTML5 and CSS3 09/14/2011CSS3 - Tools and Mobile Implementation 09/06/2011Developing a UX Practice of Practicing 06/14/2011

UI Sixteen

3 intensive days of devouring the latest UX techniques and insights.

November 7-9, 2011 Boston, MA

N o wN o w

H o uH o uR e c oR e c o

M a sM a s

L i s t e

O n D

Share this article

27


5 10/09/2011 1


5/5

Sign up for UIEtips, UIE's free email newsletter, to receive our web design and usabilityarticles when they're first published.

Brainsparks Blog

Join UIE's researchers as they share their latest ideas, observations, and musings aboutusability and design on the UIE Brain Sparks Blog.

Articles feed | All Articles

Subscribe to UIEtips, our free email newsletter

Your Email:

Subscribe

Read our research the moment we publish it

Learn about special events and happeningsReceive subscriber-only deals and incentives

1997-2011, User Interface Engineering.510 Turnpike St., Suite 102, North Andover, MA 01845800-588-9855 (within U.S. and Canada) or 978 327-5561

Questions or Comments? Talk to Us.


5 10/09/2011 1

Documents

Visual Design Essentials for Non-Designers