Visual Design Essentials for Non-Designers

Visual Design Essentials for Non-Designers

1 of 5

http://www.uie.com/articles/viz_design_essentials/

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

User Interface Engineering Home About Us Services Articles Events Virtual Seminars Reports Blog Podcasts

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 his virtual seminar, Visual Design Essentials for Non-Designers. During the seminar, Dan expressed the idea that design is only the realm of the artistic was a myth. He went on to explain that simply learning basic design principles can give anyone the confidence to create great designs. His presentation really got our audience thinking and they asked so many great questions during the seminar that we didn't have time to answer them all. This article looks at two of the 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 your thoughts on this? Dan Rubin: There's a common misunderstanding of what design is exactly. Design is not just the visuals and the aesthetic aspect of making something look pretty or attractive. While there are some established rules and psychological principles of what makes something attractive, to most people it is a very subjective thing. You might like a different color palette than I do in a design. Or to one person a lot of visual flourishes might be appealing while to someone else it's distracting.

10/09/2011 12:58 AM

Visual Design Essentials for Non-Designers

2 of 5

http://www.uie.com/articles/viz_design_essentials/

But those aren't really the things we're talking about. Those are more of the artistic layer of visual design. Picture it in a couple of different layers. Design in its core is about the visual aspects that support the functionality in a given thing. If we're talking about physical products in the real world or virtual products such as web apps and services, the design is what 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 how that behaves. When we're working at a lower level, below the behavior, we actually need to provide a foundation for that functionality or for the content. A framework of sorts that allows the user to easily interact with and understand whatever is being communicated. So at its core level, the principles that we were talking about in the virtual seminar are more about how to make something easily communicate its intention. When we're talking primarily about good typographical rules and creating a balanced visual 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 connection where 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 matter of good balanced decision making and not cluttering things, not overcrowding. A lot of the time people mistake good, basic core design principles for just common sense. Because once you see them applied properly they just make sense. You can't imagine them being done any other way. Adam: So let's talk color. When your design is dominated by one specific color, how do you suggest incorporating new color relationships? Dan: Well, the first question to ask is, do you need new color relationships? When it comes to color as a non-artistic designer, again, you want to go to the rules that you can rely on to not lead you astray. One of the rules with color is to not use a lot of it. Limiting your color palette is something that 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 is that 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 are too many colors on a given page, it's going to be too loud. If your design is dominated by one specific color and you want to break out from that one or maybe two-color palette, the best thing 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 of blue on it, you could use lots of different lighter and darker blues to add more visual interest. And the plus of that is darker colors will stand out more, especially on the lighter background. 10/09/2011 12:58 AM

Visual Design Essentials for Non-Designers

3 of 5

http://www.uie.com/articles/viz_design_essentials/

Those dark colors will seem closer to the viewer, and the light colors will recede further away. So just by using tints and shades of that single color that dominates your design, you have a ton of flexibility because of the contrast that's created just by making the color lighter 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 two colors is it allows you to use other colors as specific highlights or call-outs. Which can be very, very useful depending on the context. For instance, red is almost universally a negative color. And we see it all the time on good designs, where some sort of call-out is set in red, where the rest of the design, red doesn't appear. Obviously, you can't necessarily do that if red is your dominant color, but being able to 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 more complicated the colors involved in an interface, the harder it becomes to use color as a highlight.

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 the browsers. Learn more about Dan's seminar. And if you're an experienced designer you'll want to explore the Web Design Master Class in LA, August 16. This is a hand-on deep dive into Photoshop, CSS3, HTML5, and JavaScript. For all the details on this intensive one-day workshop, visit http://sidebarworkshops.com. The price goes up after Tuesday, June 28. Use the promotion code UIEtips and get $100 off after the 28th.

Share Your Thoughts with Us Are you a non-designer getting more involved in the design process? Share your thoughts and experiences with us on our blog. Share this article with a friend/colleague.

27

Read related articles:

10/09/2011 12:58 AM

Visual Design Essentials for Non-Designers

4 of 5

http://www.uie.com/articles/viz_design_essentials/

5 Ways To Suck Value Away From Your Persona Projects 09/21/2011 A Snapshot on What Designers Should Know about HTML5 and CSS3 09/14/2011 CSS3 - Tools and Mobile Implementation 09/06/2011 Developing 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

Now Hour Reco Mas

Listen OnDe

Share this article 27

10/09/2011 12:58 AM

Visual Design Essentials for Non-Designers

5 of 5

http://www.uie.com/articles/viz_design_essentials/

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

Brainsparks Blog

Join UIE's researchers as they share their latest ideas, observations, and musings about usability 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 happenings Receive subscriber-only deals and incentives ©1997-2011, User Interface Engineering. 510 Turnpike St., Suite 102, North Andover, MA 01845 800-588-9855 (within U.S. and Canada) or 978 327-5561 Questions or Comments? Talk to Us.

10/09/2011 12:58 AM