(62) Communication Design: How can I get good at visual and interaction design?

- Quora

9/18/12 6:35 PM

Search Questions, Boards, Topics and People

Communication Design: Design Graphic Design Interaction Design Product Design (software) User Experience User Experience Design Edit Web Design

Write

62 Home Mike

Follow Question
Promote Question
Edit

How can I get good at visual and interaction design?

If you asked me for a two year plan to get good enough at programming (from scratch) to do it professionally in a team development environment, I could give you an exact one (What's Ambert Ho's two year plan to get good enough at programming (from scratch) to do it professionally?). What might be a similar plan for visual and interaction design? Edit
Comment Share (1) Options Redirect Question 11 Answers Brandon Harris, Senior Designer for Wiki(p|m)edia
89 votes by Marc Bodnick, Jeremy Richardson, Ghaida Zahran, (more)

Related Questions How I can get better at thinking visually? Can technical folks learn visual design? If so, where and how do I get started? Any tutorials, books, etc.? Where can I find animated interactive biochemistry visualizations? Quora Visual Design: How can we get Quora to use curly quotes (and double quotes), instead of the vertical, typewriter quotes (and double quote...
(continue)

First things first: it is a mistake to constrain the word "design" to only "making things look pretty". That aspect is actually the least important, in my opinion. Design is about understanding problems. When you understand a problem fully, the solution nearly always becomes obvious. The road to becoming a good designer is the same path as becoming good at anything else: practice, practice, practice. Give yourself design problems, both simple and complex. Think about resolving things you encounter every day: Stop lights. Cross walk markings. Microwave oven panels. Automated teller machines. Point of sale credit card machines. Paperclips. All around you are real-world problems that have designed solutions. Study these problems and their solutions. Research why certain decisions were made (why are stop signs red?). Come up with better ones. Build better mouse traps, as it were. Pay attention to details, especially with well-designed objects and systems. A great thing to study is the interiors of aircraft. Why are things locked in certain ways? Why are the cabinets sized specifically? Understand simplicity and ease-of-use. Why do police officers carry their gear in certain ways? What is the value of having the communications nodule mounted on the shoulder? Why are sidearms never slung for crossdraw? Police and military equipment is usually top-notch for simplicity and easy of use (consider explosive charges, stamped with "THIS SIDE TOWARDS ENEMY"). When you start to understand the problems, you understand the solutions. And you can make better ones. And, most importantly, you will be able to communicate your designs. Practice, practice, practice. Practice your tools. Learn Photoshop, or Illustrator, or whatever. Learn color theory and psychology. Learn when to innovate and when to imitate. Be comfortable with stealing
http://www.quora.com/Communication-Design/How-can-I-get-good-at-visual-and-interaction-design

Interaction Design: Which Design Schools are at the forefront of (Visual) Interaction Design? See more related questions Share Question Twitter Facebook

Question Stats Latest activity 22 Jun. This question has 5 monitors with 199464 topic followers and 0 aliases exist. 2442 people have viewed this question. 234 people are following this question.

Page 1 of 10

(62) Communication Design: How can I get good at visual and interaction design? - Quora

9/18/12 6:35 PM

ideas and having your own ideas stolen. Practice, practice, practice. And then you will be good. 1 Comment Share Embed Thank 12 Nov Ryan Glasgow, Product Manager
72 votes by Marc-Oliver Gern, Dannon Loveland, Aj Badder, (more)

Interaction Design 1. Sketch Buy a moleskin[1] and start sketching. When you're working on a section, sketch as many variations as you can. Begin by thinking unconventionally, while working your way back to convention until you've reached a solution. Get feedback and share your ideas early and often. [1] http://www.creativesoutfitter.co... 2. Flow For each site, for each page, and for each section, always begin with the question "what task is the user trying to accomplish?". Once you've decided on a flow, control a user's eyes with images (esp. faces), color, headlines, content, whitespace, respectively. A design should always have control over a user's eyes. The flow for this Quora webpage is to digest the question, and then find a suitable answer. The user is left in 3 possible states: satisfied -> click back button, unsatisfied -> scan right column for similar questions, compelled to contribute -> scroll to bottom and enter an answer. There's an abundance of tools to analyze your designs flow - use these to your advantage.[2][3] If you are developing a web app where users repeatedly make the same action, learn and apply Fitt's Law. [4] [2] http://attentionwizard.com [3] http://crazyegg.com [4] http://en.wikipedia.org/wiki/Fit... 3. Test Test, test, test! [5][6] You will be shocked how users will use your product. They will overlook the obvious, ignore convention, and then complain to you about it. A confused or frustrated user is never his or her fault. When you're starting out, ask friends and family if you can observe them using interfaces they are familiar and unfamiliar with. Learn how to get inside your target users head and emphasize. [5] http://fivesecondtest.com [6] http://feedbackarmy.com [7] http://www.usertesting.com

Visual Design 1. Study

http://www.quora.com/Communication-Design/How-can-I-get-good-at-visual-and-interaction-design

Page 2 of 10

(62) Communication Design: How can I get good at visual and interaction design? - Quora

9/18/12 6:35 PM

Browse websites where top designers share their work.[7][8] When you're working on a particular feature, search for that element and see how other visual designers have styled it. [7] http://Dribbble.com [8] http://Behance.net 2. Disect Download PSD files from websites[9][10][11] where other designers share the original source. Look through the layers and see how they are blended and pieced together. Open the each layer's style panel and learn which styles are commonly used (Drop shadow, Inner Shadow, Gradient, Pattern, Stroke), and which ones are avoided (Inner glow, Bevel, Color overlay, Satin). Dig through a beautifully constructed gradient and learn how it was pieced together, and where the color and opacity stops are placed. Also learn how to properly use noise, and when / where it's appropriate. [9] http://365psd.com [10] http://DesignMoo.com [11] http://DeviantArt.com 3. Collect Just like engineering is now typically begun by piecing together open source abstractions, visual design has become mostly about piecing together existing elements in an original manner. Every designer has his or her own war chest of resources and be sure to keep your sources fresh and up-todate so that next time you need an icon you don't turn to FamFamFam.com . I've seen a wallpaper posted on Dribbble [12] mixed and sourced into dozens of apps, designs, graphics, and is quickly becoming stale.[13] Keep a strong list of icon packs[14][15][16], font libraries[17][18][19] [20], and pattern/texture[21] sources on hand. [12] http://dribbble.com/shots/31901-... [13] http://www.6wunderkinder.com/wun... [14] http://geomicons.com [15] http://glyphish.com [16] http://icondock.com [17] http://www.fontsquirrel.com [18] http://www.google.com/webfonts [19] https://typekit.com [20] http://www.dafont.com [21] http://subtlepatterns.com 4. Stylize Develop your own style that reflects your values as a designer. Do you believe that skeumorphism makes a user more comfortable with an interface because of its familiarity?[22] Who and what are the inspirations for your work? [22] http://upload.wikimedia.org/wiki...
Suggest Edits

Comment Share (2) Embed Thank 18 Nov Jason Carlin, Sr Designer, Google
29 votes by John Cappiello, James Thornton, Andy Brett, (more)

Man, these are some highfalutin answers... Guys, I'm sure the asker knows that design isn't just the pretty pretty. His question is very clear. It's about

http://www.quora.com/Communication-Design/How-can-I-get-good-at-visual-and-interaction-design

Page 3 of 10

(62) Communication Design: How can I get good at visual and interaction design? - Quora

9/18/12 6:35 PM

finding some insightful tips that might make his prototypes a bit more presentable. Most of you are too busy being insecure about a designer's place in the world to actually give the guy some help. So here goes. Here are some easy rules of thumb to help your rough prototype interfaces look a bit less rough. 1. Line things up You don't have to go all the way to using a real grid for the sake of a prototype, but neither should your element placement be random. Line everything up with something else. 2. Weighting Think about levels of importance and make sure everything on the screen has a visually presentation appropriate for it's level of importance. Ways of making an element more important feeling include: Placement (top left is a pretty important spot) Size Contrast Color Padding (don't crowd the king) 3. Physicality Want people to want to click your buttons?> Make them look fun to touch. Give them dimension using CSS gradients, borders, box-shadows, inset boxshadows, and text-shadows. Here are a few good rules of thumb: Consistent light source You light should probably come from 90 degrees above. Make sure your shadows and gradients all reflect this. Seriously, don't screw this one up. Be subtle Going overboard is a rookie mistake. Even a nearly imperceptible grade will change the feel of a thing. Button states Include :hover and :active states for your buttons. The hover state should usually be higher contrast, and the active state might use a darker background, gradient, or inset box-shadow to make the thing appear depressed when clicked. Inset text Putting text on a button with a gradient? Consider a subtle, dark text-shadow offset UPWARDS by 1px. Border colors A subtle and underused method of creating dimensionality is to simply use a darker border color on the bottom (or top). Bam! A sense of depth with no need for shadows! Try this: border:1px solid #999; border-bottom-color:#555; 4. Subtle colors In design, as in life, nothing is ever black and white. If your design includes a lot of pure black and pure white, it had better be an intentional design motif. If not, consider using #222 or #333 for your standard text, for instance.

And don't forget to check Dribbble daily to see what the cool kids are doing. 2+ Comments Share Embed Thank 23 Nov Loredana Crisan, Director of UX at Blazing Cloud
10 votes by Ambert Ho, Wei Wuang, Jason Brewster, (more)

I will say that the best way for someone to "hack" themselves into being a designer is through mentorship. Design is highly dependent on feedback and collaboration. Being part of a design team in any capacity (intern, Jr.

http://www.quora.com/Communication-Design/How-can-I-get-good-at-visual-and-interaction-design

Page 4 of 10

(62) Communication Design: How can I get good at visual and interaction design? - Quora

9/18/12 6:35 PM

designer) will offer opportunities to learn and practice designing "in the real world". As far as stuff to know, here's a quick shot at some main requirements. Design research Every design project will involve a formal or informal research process, as you try to define the application's goals (what it's supposed to do), learn about its context (who will use it, when, what technology will be employed, etc), or validate different design approaches. Things to practice/learn Design research methodologies - surveys, interviews, card sorts, usability tests, AB tests, etc. You'll want to be familiar with all of them and know when each is appropriate. How to formulate and present research findings in a simple, actionable way. Tools Depending on the research being conducted, you might use pen and paper for notes, or software such as Telescreen, Cardsort, Treejack, etc.

Conceptual design It is said that "In the beginner's mind there are many possibilities, in the expert mind only a few." You'll want to always have a beginner's mind. Innovate. Try out as many solutions to the task at hand, mock them up, validate them. Your goal is to land on the best possible direction after evaluating all the possibilities. Things to practice/learn How to brainstorm "big picture solutions" while keeping all the requirements in mind How to mock up design concepts (sketches, wireframes) Tools Varied tools are useful, from pen/paper and whiteboards to software such as Omnigraffle, Balsamiq or Fireworks.

Detailed design Be aware of, and create detailed mockups for every state of every screen in your application. Think of transitions between states. Think of error recovery. This is when you must know all applicable conventions and be very mindful of user expectations. This is also often when visual design is applied. Note that visual design is a discipline in and of itself and requires an entirely different knowledge set. Things to practice/learn Design patterns/conventions, user expectations (ex. people hate to read instructional text) Simplification and consistency - reuse components/styles where appropriate to create coherence (if applying visual design) Hierarchy, alignment, colors, typography, branding, etc. Tools Most designers I know use one of Adobe's Creative Suite apps for detailed designs.

http://www.quora.com/Communication-Design/How-can-I-get-good-at-visual-and-interaction-design

Page 5 of 10

(62) Communication Design: How can I get good at visual and interaction design? - Quora

9/18/12 6:35 PM

Design communication A lot of your time as a designer is spent communicating your ideas to people. Practice makes perfect here, but learn what makes an impactful presentation. For example, you might to show iPad app mockups on the actual device. You might want to illustrate certain interactions using click-through prototypes, etc. The more effective you are when presenting a design, the more useful the feedback. Another aspect of design communication is documenting the detailed design for implementation. This is critical to the project's success and depends on your level of technical knowledge. Learn engineering-speak. Know for example that CSS uses horizontal and vertical offsets for shadows, so don't supply the engineer with the Photoshop rotation degree which wouldn't directly be usable. Things to practice/learn How to speak to an audience When to crack a joke How to create interactive mock-ups and prototypes Programming fundamentals - frameworks, limitations, advantages, syntax Tools Again, a variety of software programs are used (Adobe CS, Powerpoint, Keynote, Wikis), resulting in either presentations, .pdf documents, or interactive prototypes. 1 Comment Share Embed Thank 11 Nov Rob Szumski, User Experience Design, Rackspace
6 votes by Ambert Ho, Marco Dalla Gatta, Kyo Kusanagi, (more)

The core of great design is the ability to put yourself in someone's shoes and experience the world from their point of view. Once you can do this, you can start to design for them. You can develop this skill by getting to know the users of your product/interface/whatever through user research, observation and prototyping. I'd suggest trying to tackle a problem that is very far outside your knowledge and comfort zone. Ideally one where you can go to someone that fits your target audience and see if your solution fits their needs. For example, if you deal with writing Hadoop software at your day job, take a shot at designing a mobile application for armored car drivers: What type of information is most important to accomplish their route every day? What is their competency with technology? How can you shape the experience of a new driver tackling a route for the first time? Does displaying the amount of money the truck is carrying increase the vigilance of the crew, only increase their stress level, or encourage theft? Should you display a heatmap of robberies for this area of the city? I brainstormed all of these questions in less than 5 minutes. Go answer all of these by reading about armored car drivers -- are there training manuals online? Newspaper articles that chronicle a day-in-the-life? Know one that you can talk to? Are these guys unionized? If so, they probably have meetings, go to one. Once you have a handle on this design problem, pick something completely new and do it all over again. While you are applying the hard thinking to an interface, try to apply a photoshop tutorial or copy a style of an application you like at the same time. Switch this up for each project and start to develop a style that you like.
http://www.quora.com/Communication-Design/How-can-I-get-good-at-visual-and-interaction-design Page 6 of 10

(62) Communication Design: How can I get good at visual and interaction design? - Quora

9/18/12 6:35 PM

That's not a two year plan, but it should get you started. Comment Share Embed Thank 10 Nov John Chan, Designer at 37signals
5 votes by Ronald Ip, Ambert Ho, Gemma Weirs, (more)

I believe a good designer needs to have a solid foundation in web programming, even if the goal is to spend 90% of your time in Photoshop or talking to your users. You need to know how to program because it helps you communicate better in a team setting, it helps you understand the technologies behind a design and it helps if you can build a prototype that you can go talk to your users yourself. So, to reverse engineer what I went through and to provide you a roadmap as per Ambert Ho's answer, I think you need to understand three pieces to the puzzle. You need to understand the "what"s, "how"s and "why"s of design. The quick answer is that: 1. Once I figured out the why's of design: the what's and how's of were self evident because there was a purpose and drive to do what I needed to do. I didn't need any reminders of why I need to stay motivated or road maps for myself on what I should learn next. They all just happened because I had a need to learn the right things. 2. This isn't a 2-year plan -- I don't know if there isn't such a thing. I would think the minimum is 6-12 months to develop the technical skills bit if you're passionate about what you do or care about the people you're building things for, you'll naturally think critically as a designer would for solving any problem at hand. Now, on to the the details. To be a professional designer, you'll need to know: Why Why do we need great designers? Why do you want to be a great designer? How How do you become a great designer? How can a design solve/accomplish a problem or a goal? What What do you need to do to solve a problem or goal? What skills do you need to have/develop to design the solution? The Why's Great designs improve people's lives and you need to see why or how you fit into that picture. Ultimately, this comes down to understanding objectives. Objectives of the business or organization that you're in (or would be in). Objectives of the site or project that you're building. And objectives of your own incentives in the project -- whether if it's for making money, helping people or helping yourself learn something. Understanding these objectives helps guide you in making better design decisions -- whether if the project you're making would be used by anyone at all, whether if you'd stay motivated throughout the project and whether if a particular feature, content or function would be needed in the project. There's no right answer to all of these things because it depends on a given situation and what the objectives are at that moment. That's why designs are typically about solving problems/achieving goals and monitoring how well your design is doing against those objectives. And in order for any organization to

http://www.quora.com/Communication-Design/How-can-I-get-good-at-visual-and-interaction-design

Page 7 of 10

(62) Communication Design: How can I get good at visual and interaction design? - Quora

9/18/12 6:35 PM

accomplish their site objectives, you need talented designers that understands the vision and have the technical abilities to see it through. This can be daunting but it also begs the question: why do YOU want to be a designer? Is it because you're good at drawing pictures? Is it because you see things that most people don't? Is it because you can make a lot of money in it? Ultimately, you want it to be a rewarding experience. For example, my driving force to becoming a better designer is because I want to create my own start-up and run my own business. And since I see the impact of how great designs positively affect businesses or organizations, I started obsessing over how I can help other businesses and organizations succeed through great designs. I need to become valuable to them, so that I can become valuable for myself. That's why when I look at people like Jared Spool, Dan Rubin and Whitney Hess I get inspired by what they do because they help organizations succeed. And I want in on some of that action. And that leads us into... The How's How do you become a professional designer? I go by: imitation, repetition, innovation. Start by imitation. Build or work on something that somebody else made before. Passion comes from looking at something and go "wow, how'd they do that? -- I need to find out." That's why you need people to look up to. Conferences or events are great for that -- even if you don't know what the hell they're talking about; it exposes you to the very best in the industry and tells you what they're capable of. If you're not impressed by what they do, chances are, you're in the wrong field and you probably don't want to get get into it. But if you leave with a feeling like "that's so cool you can do that" or "wow, I never noticed how much thought they put in to make Amazon so easy to use" or "wow, I can't believe how well that project is performing even though I can think of 10 ways to do better than that". Wow, wow, wow. You get the idea. But nothing really happens until you do something. Just be clear about what you want out of that something. So you'll want to find cool projects you can copy from or look for someone that makes amazing work and follow their footsteps. Maybe it's means you'll have to make your own site. Make your own blog. A side project. It doesn't matter. Doing so will lead you down a path of self-discovery where you'll come up with your own objectives and your own problems to solve. Chances are, you wouldn't be able to solve it right away, but don't fret: Google is your friend. It'll lead you to read stuff from Smashing Magazine or A Book Apart or whatever it is that everyone's talking about at that moment. Another idea is to do client work. It can be frustrating but it'll expose you to a plethora of problems and different ideas. If you don't want to freelance, just volunteer -- maybe redesign something for a charity because you can walk away from those projects if it makes you uncomfortable or if you get bad clients. Just do something. Once you set a goal to work on your own thing, you'll figure out what you'll need to learn because new problems and goals would come up. This is crucial because this builds you "real world experience". A third option is to take on an existing project. Something that I've done is I bought a Photoshop directory off Flippa and I started poking around in it. All I wanted to do was find out how I can make more ad sales on it. So I redesigned it, added features, removed features, etc.. Initially, I had no idea what I was doing half the time so I did a lot of my own research. But next thing you know, I learnt about PHP, SEO, Google Analytics, traffic analysis, internet marketing and all kinds of stuff. You'd be surprised how much those

http://www.quora.com/Communication-Design/How-can-I-get-good-at-visual-and-interaction-design

Page 8 of 10

(62) Communication Design: How can I get good at visual and interaction design? - Quora

9/18/12 6:35 PM

things have helped me in making better design decisions but you wouldn't know what that exactly would look like until you come across a particular problem to design for. Whatever you decide to do though, you'll need to actually become good at what you will design one day, so there are core skills you want to develop. Which leads us to... The What's Typically, there are a few basics you'll want to learn: HTML, to control a site's structure CSS, to control a site's presentation Some graphics software like Photoshop or Fireworks Basic color theory, to pick good colors Basic information architecture, to understand layouts With these, you can control how any site would look. Being good at CSS is particularly important. My suggestion for learning these is to find a good source to learn from because reading something like W3Schools from start to finish is a little dry (plus, it's more of a reference). One place I would recommend is something like a Think Vitamin Membership where you can learn all the technologies on videos for $25USD/month. Once you have that sorted out you'll want to learn how to use: JavaScript / jQuery to control a site's behavior Which would give you a solid foundation and arm you with a new set of behavioral options for designing interactions. The only thing that's missing from here is experience on watching how people respond your designs. So next, you'll need to learn more about: Usability and user centered design ...and maybe watch a few people use your sites/projects. Steve Krug's Don't Make Me Think explains how you can do this cheaply and effectively. That's when you'll see the value of doing usability tests, building prototypes, personas, A/B testing and such, which are techniques that help you refine your designs and helps you make better design decisions. Once you develop these skills, you'll effectively become a good front-end web developer, which becomes a great foundation for becoming a great visual designer or a great interaction designer. They're different specializations, so depending on what interests you more you'll may want to spend more time studying usability/JavaScript if you're into interaction design or graphics / UI design if you're into becoming a visual designer. But once you get the hang of building things and know how to build something from a users perspective, you become much more valuable to any organization you decide to join. You would be a in a better position to contribute to a development team -- so make sure you pick a good team! You might not have much experiences in that setting yet but given you'll be a seasoned self-learner at this stage, learning how Agile or Lean works is only a matter of process and can be easily picked up from the rest of your teammates. You don't really need to learn it in advance despite companies typically asking for prior experiences -- just explain how great of a selflearner you are and be able to pick it up quickly :) Remember the ultimate role of the designer is to help improve people's lives, so as the designer, you're basically the communicating medium between a business and their customers. The more effective your designs are, the better you'll be able to help businesses and customers communicate with each other. It also assumes that the business and customers have something to talk about -- that the business or organization have a great product or service that they're providing and that the customers have a real demand or need for
http://www.quora.com/Communication-Design/How-can-I-get-good-at-visual-and-interaction-design Page 9 of 10

(62) Communication Design: How can I get good at visual and interaction design? - Quora

9/18/12 6:35 PM

the product or service. So a failure in a design doesn't necessarily mean you're not a good designer. Having said that, I would suggest reading The Elements of User Experience by Jesse James Garrett because that would give you a better understanding of design and how visual and interaction design contribute to the overall user experience. And that's it -- whether if this takes 2 years or not is entirely up to you. Perhaps I'm optimistic but I certainly believe it takes less than two years to become a professional designer. The key is understanding the bigger picture. Hope this helps! Comment Share Embed Thank 15 Nov

About Jobs Privacy Terms Help Shuffle

Mobile Site

http://www.quora.com/Communication-Design/How-can-I-get-good-at-visual-and-interaction-design

Page 10 of 10