You are on page 1of 10

(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

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...

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

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

ignore convention. A design should always have control over a user's eyes.use these to your advantage. 2.usertesting. Dannon Loveland. The user is left in 3 possible states: satisfied -> click back button. unsatisfied -> scan right column for similar questions.[2][3] If you are developing a web app where users repeatedly make the same action. 3. When you're starting out. Once you've decided on a flow.(62) Communication Design: How can I get good at visual and interaction design? . [5] http://fivesecondtest. (more) Interaction Design 1. Test Test. respectively. [4] http://en. Begin by thinking unconventionally. always begin with the question "what task is the user trying to accomplish?".quora. 1 Comment • Share • Embed • Thank • 12 Nov Ryan Glasgow. and then find a suitable answer. [4] [2] [7] Page 2 of 10 . Product Manager 72 votes by Marc-Oliver Gern. and then complain to you about it. test! [5][6] You will be shocked how users will use your Visual Design 1. Sketch Buy a moleskin[1] and start sketching. color. And then you will be good. Get feedback and share your ideas early and often. control a user's eyes with images (esp. There's an abundance of tools to analyze your designs flow . ask friends and family if you can observe them using interfaces they are familiar and unfamiliar [6] http://feedbackarmy. The flow for this Quora webpage is to digest the question. and for each section. headlines. practice. Learn how to get inside your target users head and emphasize. Study http://www. compelled to contribute -> scroll to bottom and enter an answer. while working your way back to convention until you've reached a [3] http://crazyegg. They will overlook the obvious.Quora 9/18/12 6:35 PM ideas and having your own ideas stolen. Aj Badder.. content.wikipedia. learn and apply Fitt's Law..creativesoutfitter. A confused or frustrated user is never his or her fault. practice. faces). Practice. Flow For each site. for each page. [1] When you're working on a section.. sketch as many variations as you can.

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. Color overlay..fontsquirrel. [12] [18] [11] http://DeviantArt. 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. [7] (more) Man. Google 29 votes by John Cappiello. His question is very clear.. Look through the layers and see how they are blended and pieced together. and where the color and opacity stops are placed. and is quickly becoming stale.. Sr Designer. and when / where it's appropriate. Inner [8] [19] https://typekit. graphics. Gradient. [9] http://365psd.. Open the each layer's style panel and learn which styles are commonly used (Drop Page 3 of 10 .com [21] http://subtlepatterns. and which ones are avoided (Inner glow.wikimedia. Also learn how to properly use noise. Stylize Develop your own style that reflects your values as a designer. these are some highfalutin [16] [15] http://glyphish. Satin). [13] 4.(62) Communication Design: How can I get good at visual and interaction design? . search for that element and see how other visual designers have styled it.. and pattern/texture[21] sources on hand. font libraries[17][18][19] [20].. James Thornton. I'm sure the asker knows that design isn't just the pretty pretty.[13] Keep a strong list of icon packs[14][15][16]. Disect Download PSD files from websites[9][10][11] where other designers share the original source. Andy Brett. Pattern. Suggest Edits Comment • Share (2) • Embed • Thank • 18 Nov Jason Carlin. Stroke).com [17] http://www.[7][8] When you're working on a particular feature..Quora 9/18/12 6:35 PM Browse websites where top designers share their .com [20] http://www. Guys. It's about http://www. [10] http://DesignMoo..dafont. I've seen a wallpaper posted on Dribbble [12] mixed and sourced into dozens of apps. [14] http://geomicons. Dig through a beautifully constructed gradient and learn how it was pieced together. Collect Just like engineering is now typically begun by piecing together open source abstractions.

Inset text – Putting text on a button with a gradient? Consider a subtle. Most of you are too busy being insecure about a designer's place in the world to actually give the guy some help. box-shadows. or inset box-shadow to make the thing appear depressed when clicked. dark text-shadow offset UPWARDS by 1px. Jr. inset boxshadows. Give them dimension using CSS gradients. for instance. Line everything up with something else. And don't forget to check Dribbble daily to see what the cool kids are doing. Bam! A sense of depth with no need for shadows! Try this: border:1px solid #999. consider using #222 or #333 for your standard text. as in life. Line things up You don't have to go all the way to using a real grid for the sake of a prototype. Being part of a design team in any capacity (intern. Design is highly dependent on feedback and collaboration. 2. 4. Subtle colors In design. If your design includes a lot of pure black and pure white. it had better be an intentional design motif. border-bottom-color:#555. Here are a few good rules of thumb: Consistent light source – You light should probably come from 90 degrees above. Wei Wuang. Make sure your shadows and gradients all reflect this. http://www. The hover state should usually be higher contrast. nothing is ever black and white. Director of UX at Blazing Cloud 10 votes by Ambert Ho. and text-shadows. 2+ Comments • Share • Embed • Thank • 23 Nov Loredana Page 4 of 10 . 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. If not. So here goes. but neither should your element placement be random. Here are some easy rules of thumb to help your rough prototype interfaces look a bit less rough. Even a nearly imperceptible grade will change the feel of a thing. 1. Be subtle – Going overboard is a rookie mistake. gradient. Border colors – A subtle and underused method of creating dimensionality is to simply use a darker border color on the bottom (or top). Jason Brewster.Quora 9/18/12 6:35 PM finding some insightful tips that might make his prototypes a bit more presentable. and the active state might use a darker background. (more) I will say that the best way for someone to "hack" themselves into being a designer is through mentorship. Physicality Want people to want to click your buttons?> Make them look fun to touch.(62) Communication Design: How can I get good at visual and interaction design? . Seriously. Button states – Include :hover and :active states for your buttons. borders.quora. don't screw this one up. Weighting Think about levels of importance and make sure everything on the screen has a visually presentation appropriate for it's level of importance.

http://www. etc.reuse components/styles where appropriate to create coherence (if applying visual design) Hierarchy. You'll want to be familiar with all of them and know when each is appropriate. or software such as Telescreen. mock them up. colors. alignment. Your goal is to land on the best possible direction after evaluating all the possibilities. As far as stuff to know. branding. from pen/paper and whiteboards to software such as Omnigraffle. user expectations (ex. wireframes) Tools Varied tools are useful.surveys. Cardsort.(62) Communication Design: How can I get good at visual and interaction design? . This is also often when visual design is applied. people hate to read instructional text) Simplification and consistency . Things to practice/learn Design patterns/conventions.Quora 9/18/12 6:35 PM designer) will offer opportunities to learn and practice designing "in the real world". AB tests. Tools Most designers I know use one of Adobe's Creative Suite apps for detailed designs. here's a quick shot at some main requirements. typography. or validate different design approaches.quora. Balsamiq or Fireworks. Think of transitions between states. Tools Depending on the research being conducted. in the expert mind only a few. etc. actionable way. when. Think of error recovery. Conceptual design It is said that "In the beginner's mind there are many possibilities. This is when you must know all applicable conventions and be very mindful of user expectations. How to formulate and present research findings in a simple. Note that visual design is a discipline in and of itself and requires an entirely different knowledge set. Design research Every design project will involve a formal or informal research process. what technology will be employed. and create detailed mockups for every state of every screen in your application. learn about its context (who will use it. usability tests. Detailed design Be aware of. etc. Things to practice/learn How to brainstorm "big picture solutions" while keeping all the requirements in mind How to mock up design concepts (sketches. interviews. Innovate. you might use pen and paper for notes. Things to practice/learn Design research methodologies . etc). validate them. Treejack. card sorts. as you try to define the application's goals (what it's supposed to do).com/Communication-Design/How-can-I-get-good-at-visual-and-interaction-design Page 5 of 10 ." You'll want to always have a beginner's mind. Try out as many solutions to the task at hand.

syntax Tools Again. 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 . For example. (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. 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. if you deal with writing Hadoop software at your day job. This is critical to the project's success and depends on your level of technical knowledge. limitations. For example. Once you have a handle on this design problem. Another aspect of design communication is documenting the detailed design for implementation. 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. Go answer all of these by reading about armored car drivers Page 6 of 10 . You might want to illustrate certain interactions using click-through prototypes. I'd suggest trying to tackle a problem that is very far outside your knowledge and comfort zone. Powerpoint. a variety of software programs are used (Adobe CS.quora. but learn what makes an impactful presentation. only increase their stress level. . Marco Dalla Gatta. you might to show iPad app mockups on the actual device. Ideally one where you can go to someone that fits your target audience and see if your solution fits their needs. 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. advantages. you can start to design for them. http://www. Keynote. or interactive prototypes.Quora 9/18/12 6:35 PM Design communication A lot of your time as a designer is spent communicating your ideas to people. resulting in either presentations. etc. 1 Comment • Share • Embed • Thank • 11 Nov Rob Szumski. The more effective you are when presenting a design. Kyo Kusanagi. Rackspace 6 votes by Ambert Ho. go to one. Once you can do this.(62) Communication Design: How can I get good at visual and interaction design? .frameworks.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. observation and prototyping. Practice makes perfect here. Switch this up for each project and start to develop a style that you like. User Experience Design.pdf documents. they probably have meetings. While you are applying the hard thinking to an interface. You can develop this skill by getting to know the users of your product/interface/whatever through user research. Learn engineering-speak. the more useful the feedback. pick something completely new and do it all over again. Wikis). try to apply a photoshop tutorial or copy a style of an application you like at the same time.

Quora 9/18/12 6:35 PM That's not a two year plan. you'll naturally think critically as a designer would for solving any problem at hand. Gemma Weirs. this comes down to understanding objectives. Page 7 of 10 . That's why designs are typically about solving problems/achieving goals and monitoring how well your design is doing against those objectives. (more) I believe a good designer needs to have a solid foundation in web programming. on to the the details. To be a professional designer. Objectives of the site or project that you're building. Comment • Share • Embed • Thank • 10 Nov John Chan. Objectives of the business or organization that you're in (or would be in).whether if the project you're making would be used by anyone at all. 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. And in order for any organization to http://www. even if the goal is to spend 90% of your time in Photoshop or talking to your users. 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. Designer at 37signals 5 votes by Ronald Ip. Ambert Ho. 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. whether if you'd stay motivated throughout the project and whether if a particular feature. I didn't need any reminders of why I need to stay motivated or road maps for myself on what I should learn next. "how"s and "why"s of design. So. They all just happened because I had a need to learn the right things. This isn't a 2-year plan -.quora. I think you need to understand three pieces to the puzzle. helping people or helping yourself learn something. content or function would be needed in the project.(62) Communication Design: How can I get good at visual and interaction design? . You need to understand the "what"s. Ultimately. Understanding these objectives helps guide you in making better design decisions -.whether if it's for making money. 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. 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. but it should get you started. You need to know how to program because it helps you communicate better in a team setting. 2.I don't know if there isn't such a thing. And objectives of your own incentives in the project -. to reverse engineer what I went through and to provide you a roadmap as per Ambert Ho's answer.

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

the better you'll be able to help businesses and customers communicate with each other. you'll effectively become a good front-end web developer. you become much more valuable to any organization you decide to join. 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. That's when you'll see the value of doing usability tests. you'll need to actually become good at what you will design one day. Once you develop these skills. so as the designer. it's more of a reference). you can control how any site would look.. You would be a in a better position to contribute to a development team -. Steve Krug's Don't Make Me Think explains how you can do this cheaply and effectively.quora. 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. so there are core skills you want to develop. to control a site's presentation Some graphics software like Photoshop or Fireworks Basic color theory.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. learning how Agile or Lean works is only a matter of process and can be easily picked up from the rest of your teammates. which becomes a great foundation for becoming a great visual designer or a great interaction designer.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. to control a site's structure CSS. to understand layouts With these. They're different 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.and maybe watch a few people use your sites/projects. Which leads us to. 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. It also assumes that the business and customers have something to talk about -. The more effective your designs are.. there are a few basics you'll want to learn: HTML. Whatever you decide to do though. You don't really need to learn it in advance despite companies typically asking for prior experiences -. you're basically the communicating medium between a business and their customers.. which are techniques that help you refine your designs and helps you make better design Page 9 of 10 . you'll need to learn more about: Usability and user centered design . The What's Typically. A/B testing and such. So next. Being good at CSS is particularly important. to pick good colors Basic information architecture.(62) Communication Design: How can I get good at visual and interaction design? .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. One place I would recommend is something like a Think Vitamin Membership where you can learn all the technologies on videos for $25USD/month. The only thing that's missing from here is experience on watching how people respond your designs. personas. building prototypes..

(62) Communication Design: How can I get good at visual and interaction design? .com/Communication-Design/How-can-I-get-good-at-visual-and-interaction-design Page 10 of 10 .quora. So a failure in a design doesn't necessarily mean you're not a good designer. And that's it -. 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. The key is understanding the bigger picture.Quora 9/18/12 6:35 PM the product or service. Having said that. Hope this helps! Comment • Share • Embed • Thank • 15 Nov About Jobs Privacy Terms • Help • Shuffle Mobile Site http://www.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.