Dear HN, I am a decent Rails/HTML/JS/iOS/Android/C# programmer. I want to be able to do a project from beginning to end (web+mobile), but I never have any idea what I need to make should look like. How can I learn design?
As an illustrator, graphic designer, animator and software developer for over 35 years, my advice is to start off by taking some drawing classes. Being able to draw means being able to _see_. Most people don't see, they look and recognize. Before you can evaluate a design you have to be able to see it. A lot of designers could stand to improve their "seeing" skills.
If you can't find a class, get a hold of Betty Edwards's _Drawing on the right side of the brain_. A lot of it is mumbo jombo, but the exercises are excellent and work wonders. Once you've developed some observational abilities, get a copy of Andrew Loomis's _Creative illustration_, just recently back in print. It covers layout and design, and a good bit of color theory in a very accessible manner.
Don't get discouraged, anyone can learn to observe and sketch usefully, but it oes take practice. And it is a fundamental skill for _anyone_ who wants to communicate visually..
I'm a designer, and I can't draw at all. I'm not saying learning to draw wouldn't improve my design skills, but it certainly doesn't seem like a practical way to start learning digital design.
If you've never learned to draw, why would you conclude that? To be honest, nearly all the people I know that are good at observational drawing are crackerjack designers. And they are not limited to popular fads and patterns. When you can see, and _know_ what you see, inspiration and information rains from the sky. Everything you look at becomes a source of ideas.
And similarly, if you want to be good at color styling, learn to mix paint to match observation. Oh, it doesn't have to be _actual_ paint. Mixing pixels in Photoshop will work, the point is to try and match colors by observation and manipulation, rather than simply "eyedropping" it. Good photographers often pick up good color skills simply by doing a lot of color correction and manipulation.
If I'm selling anything here, it's the importance of learning see and observe. Drawing, and painting, are simply an immediate and practical method for testing and improving your observational skills.
(Plus it does come in handy when you need to whip up an illustration ...)
And don't conclude that design skills has _anything_ to do with learning the current set of tools, digital or otherwise. Far too much design that I see these days falls into the category of "what's easy to do with, or automatically baked into, the tools I currently use." Similarly, don't confuse design skills with production skills, which can be heavily tool oriented.
(Not knocking production artists and designers here. Theres a great deal of satisfaction that can come from designing a workflow and production pipeline. And a good designer _is_ concerned with production because it can have a great impact on how their designs are eventually realized.)
Great thoughts. Do you think someone can learn to "see" well without learning how to draw? I ask because I know there are Graphic Designers who do not know how to draw and many Graphic Design courses don't require drawing skills as a prerequisite (although I know courses encourage students to keep a sketchbook and to sketch ideas as much a spossible).
I agree with you that drawing is a key foundation skill for anyone who wants to learn design. But then there's also layout, colour, typography: can someone excel at these latter skills without good drawing skills?
I'm sure you probably can. People are very flexible and determination is more important than nearly anything.
Why anyone would _choose_ to do it this way is a mystery to me. But a lot of people stumble into graphic design from other disciplines.
You can certainly learn graphic design by studying patterns and previous work. But that's a very limiting way to learn it.
When the styles change, or worse, when the technology changes, you will have a harder time adapting than someone who has a more foundational knowledge. One of the side effects of being an old fart, whose been in the business for too many years, is that I've seen the world change many, many times. And I've seen people get seriously left behind by change. But if you love the designing, and not the tools and the previous patterns, then the change is much smoother. And the change is generally led by those artists.
I've also seen potential artists and designers become frustrated with observational drawing; and it _can_ be a frustrating process. You are basically reprogramming your visual system. Sometimes these artists think that going into graphic design is a path of lessor resistance. It's not. It's a demanding discipline to do well. It's not something you can pick up by following a few simple design patterns.
Drawing is certainly NOT a key foundation skill for learning design (at least if we're talking about designing websites and user interfaces). Certainly not on the same level as typography, for example.
I think a good equivalent would be math and programming. Being good at math can certainly help with some things, but if someone asked me how to become a Rails developer I would not suggest they start by learning math.
Learning to observe critically certainly _is_ a foundational skill in any kind of visual design. Observational drawing is probably the best way to develop that skill. Do it or don't, the choice is yours.
Anyone wanting to learn programming should know algebra, set theory and a bit (!) of logic. You can pick these up as you go along, it's not magic, and often that's the way the world works. But I wouldn't recommend that as a preferred choice. When you just pick it up, there are holes in your toolset, holes that you might not even know about. And worse, holes that make you defensive about your skills.
And not strictly apropos to this branch of the conversation, I would recommend anyone interested in any kind of visual design should study geometry. Good old high school plane geometry is a good place to start. I can also recommend descriptive geometry, particularly the courses aimed at engineers and architects. Anyone that gets into designing type, and with type, who lacks this knowledge has a very real handicap.
The advantages these disciplines offer the designer or visual artists are indescribable to those who lack them. Either take my word for that or ignore it.
Certainly people have done well without them. But that's a limitation that has been overcome rather than advantage.
And of course a true genius in any field can do what ever works for them. I never managed to arrange to be a genius so I have always had to limp along with what I could learn.
That's not design - that's drawing. There's plenty of ways to design without getting into illustration. What's you're advising is similar to learning Assembly instead of Basic just to learn how to code.
You can't admire and emulate without being able to see first.
Learning drawing is for designers as learning Lisp is for programmers. You may never use it, but some of the skills it teaches are transferrable no matter what the tool or medium, and will make you fundamentally better.
Not saying drawing doesn't help. I am saying you don't tell someone brand new to programming to start with Lisp. You tell them to start with something simple like HTML. There's equivalents in design.
No, I don't tell them to start with HTML at all. That's not programming, that's markup/text formatting.
I do in fact tell them to start with Lisp, Scheme more precisely. Best learning language available [1].
Real learning is about understanding the underlying concepts and being able to reapply them in different contexts. That's what Lisp/Scheme (and C for imperative concepts and memory management) does for learning programming, and drawing does for learning design.
No, read what I wrote. It's about learning to see. You can certainly learn to see other ways, but drawing is the one of the most I direct and applicable.
When you're starting off, you're not going to be able to create amazing looking stuff because you don't know how to and you won't necessarily know what is good. The first thing I recommend you do is build up your pallet and figure out what you like. If you don't know what is good, look at work that others say is good and observe what they have in common and how they make you feel.
EMULATE
Once you start to get a sense of what you like, next recommendation is learning the raw skills needed to do what you need. In your case, knowing how to do all the things you'll need to do, such as how to create a box with rounded corners, or gradients. With that knowledge, start trying to recreate work that you admire and try to get as close to it as possible. As you do this repeatedly, you'll start noticing different patterns and choices the "original" designer had utilized. At this stage, you're simply trying to walk a mile in their shoes.
INNOVATE
As you become comfortable at emulating styles and feel a decent level of mastery over the skills required, you'll automatically start to have thoughts about how you might want to try doing things differently. Try it. Most of what you do will be shit. Allow yourself to create shit. Keep trying things and you'll build up your own style, taste and sense of what should take priority.
PS: I am a self-taught designer. I used to feel like I was faking it in a world of real designers but over time, I've looked at my body of work felt proud/happy... and I've become "comfortable in my own skin" as a designer.
This is it. This is not the only way, but this is what worked for me as well.
od2n, the main problem for you at the moment is that you don't know what you don't know. So you have to try and recreate things in order to understand what's involved, how it's done, what are the limitations, etc. Software design is in a very big part an acquirable skill, so the only way to master it is to exercise.
Also make wireframes before you code, when something is complicated -- or when you're starting out, for virtually any UI. Use Omnigraffle Pro, and you can also use Graffletopia's website to find stencils, e.g. Bootstrap Stencils. Or use Easel.io.
With all due respect for Tufte, his focus has always been on the presentation and visualization of the data. While this has an overlap with the design skills required for the end-to-end software design, the overlap is only partial and not even that big in many cases.
Also, the Dont Make Me Think book should've really been a two-pager pamphlet, it is really thin on a material. While the center idea is fundamental, it is very easy to explain and to understand.
If we are talking about 10000 ft perspective of the design and its fundamentals, I would raise you The Design of Everyday Things. This is a very good beginners book and it's also an interesting read for those who already know a thing or two.
Big upvote for Edward Tufte. If you style yourself as a hardcore engineer, start with his book Visual Display of Quantitative Information. I'm away from my copy, but as I recall, John Tukey reviewed the manuscript. (http://en.wikipedia.org/wiki/John_Tukey)
Tufte is extraordinarily dry for someone new to design. Great recommendation though but it would be like going to Saul Bass and asking him how to draw a "stick man."
I would start by using grid based layouts and study those who have used them. Start with wikipedia article on the
I don't really think Tufte is appropriate for a design discussion. He's a mediocre charts and graphs guy (he's no Cleveland, Tukey, or Few; if you go to one of his talks he basically reads directly from his books and makes fun of PowerPoint.)
Design is more the arena of people like Dieter Rams. You can't design an application, a chair, or a home with sparklines.
One of the most confusing things about designing for programmers and other brainy / rational-minded people is, that when you read about it by actual practitioners, you mostly look at post-rationalisations. That means you can't expect to have reproducibly success with applying them. Quite often someone does the opposite of what the rules suggest, and meets much approval.
Designers will tell you about depth, and structure, and rhythms, emphasis, and similar categories. But it is often not obvious how you create these effects with color or shape or other design means. Or when you have them, they don't convince anyone and get scraped, even though fulfilling the formal requirements.
So what you read about design is not really what designers do to achieve great results, it is rather what they like to think about while working. Or that is my interpretation of this process. For a rationally thinking person, it is often just not conclusive and confusing, and you wonder about what you are being told and what it has to do with some specific decision.
The thing is that nobody really knows how to create beauty or good design, mostly because nobody knows what goodness is here. (Some try to sidestep the whole discussion by demanding reduction to functionally essentials, but that yields mixed results.)
For me personally other strategies have been much more helpful:
- expect hard work and some suffering: to create something of great quality, you have to go through a painful process of searching, thinking about meaning, trying different approaches, and learning techniques. Expect it every time anew. (You can vary the same design, or style, though, and thereby "reuse" it.)
- don't expect to be able to synthesize design from principles; it's the other way around: you come up with it and realize it is good. Later you understand that you can find principles that can to some extend explain (but I have always felt they don't explain it sufficiently.)
One great discussion of this for me has been the book 'Zen and The Art of Motorcycle Maintenance" by Robert Pirsig. I know this has somewhat of a pseudo-philosophy reputation, but I think undeservedly. (Maybe this is just because it is mandatory reading in many undergrad curriculae in the US?)
A small community of designer/authors is releasing ebooks aimed at teaching design. I'm one of those authors.
I'm biased, of course, but I recommend looking into these books as they are vastly more practical and beginner-friendly than most design books (which are usually intended for already-experienced designers).
Learning design is tough because of all the information thrown at you. You're supposed to master color theory, the history of typography, difficult design software, and many more advanced topics, seemingly all at once. The ebooks below are not going to shape you into a design expert, but they'll give you an entry point into learning. The most difficult part is figuring out where to start.
-I focus on teaching design fundamentals and how to practice design so you can get better. You'll get a lot of "do this, don't do that" kind of advice.
-If you're interested, email me and I'll shoot you a promo code. (My email address is on the site.)
Do it. Get feedback (or compare your own work vs. other nice works you find). Improve it. Rinse & Repeat.
I'm an engineer by training. Probably about 9 years ago, I started learning Flash, Illustrator, and Photoshop. Early projects were painful and very amateurish. I kept working at it, by making diagrams for my presentations, or designing UI mockups, etc.
Nowadays, my art & design is pretty good for an engineer. But what's better is that I've gained an appreciation for good UX design and good graphics. I can tell the difference between my "good-enough" designs and the really good stuff. And that will make you a better entrepreneur, because you can then hire people who are better than you.
A large aspect of design that separates great professional designers from amateurs is very hard to teach. It can be described as training your eye and developing your taste. This simply comes from repetition and practise. Ira Glass articulates this well describing the creative process — http://www.youtube.com/watch?v=PbC4gqZGPSY
Another aspect of design is the mindset and mentality required when looking to solve a problem. Something I feel often gets overlooked in the software world, where culture is generally engineer focused. IDEO pitch this in as 'design thinking'. While I'm not so keen on the term they do a good job of communicating the importance of certain mental traits that designers possess that are key to the design process.
Sketch. Considering a user flow/feature or user story? Sketch out 50 ideas, explore and exhaust all possible scenarios, no matter how achievable, obvious or silly. Get it down on paper. I often think that getting the idea down on paper allows my mind to forget on it and move on to another potential solution. Try to not let your technical expertise constrain this exploration, that'll come later as you whittle your ideas down.
Personally, if I have the time I quite like to produce hi-fidelity sketches. It may seem frivolous when a quick sharpie sketch will do, but as I spend time sketching I find the thinking time valuable and often find myself with another piece of paper jotting down notes/ideas etc.
Learn to draw — I believe designers should sketch and draw. There are so many lessons to be learnt that translate to what we do when designing interfaces. It provides a foundation in understand proportion, lighting, white space, suspense etc. It's also an exercise in discipline and training your brain to accurately produce the image in your minds eye.
Same way you learned engineering. Go read about design, design stuff, and get feedback. Try and replicate sleek website designs. CSS takes a long time to master.
The most essential design education book ever written is " Notes on Graphic Design and Visual Communication" by Gregg Berryman. You cannot design without reading this. It's very short, 45 pages, and the only handwritten book you'll probably ever read. http://www.amazon.com/Crisp-Graphic-Design-Visual-Communicat...
Yep. Beyond that, realize that some parts of design like dealing with visual hierarchy ( http://hackdesign.org/lesson/19/ ) can come very easily to engineers. Other parts like color theory or font design might feel less natural. Find a hook that you enjoy playing with and grow from that.
If the only reason you want to learn design is so that you can do an end-to-end delivery of a product, consider just using a template, or Bootstrap. Most products do not actually require heavily tailored designs, and even fewer require them to be prove themselves viable.
I can vouch for them. The lessons are easy and the material is indepth. It covers from typography all the way to UX design. They keep adding more lessons. Which reminds me I need to catch up.
As with most things: practice. A great way to learn is to find free resources on dribbble, open the PSDs and analyze all of the techniques used on each layer and how they fit together.
Designlab co-founder here. We're starting to roll out invites to our private beta and quickly bulk up our lesson content. Our goal is to be the definitive place for hackers to learn design and design thinking skills. Sign up! We'll shoot you an invite as soon as we can.
Well, design and other professions can be selftaught without any problem as long as you know what to learn and have time to practice.
Since design is a very large area, I assume you want to learn how to design stuff that would be later in Internet, so it will be better to learn (in this particular order): typography & grid systems and colors. When you master these areas, you can go to the stadium of the composition with color and form, where you will learn to draw.
90% of the design of an application through the use of typography, the arrangement of elements on the screen using grid systems and interactivity. The rest is cosmetic. You can master cosmetics later learning to copy styles and practicing to master them. For example, being able to illustrate, in this case, it's a matter of drawing, not doing extreme typography use, but that's another area of design.
My advice would be to use a few principles to get you started for UI design:
- map visual hierarchy to information hierarchy (more important titles bigger)
- use legacy (familiar layouts such as a top navigation don't require a learning curve)
- use visual metaphors / skeuomorphism to hint to the user where they are and what they can do (buttons look clickable, draggable elements have ridges that the user could imagine gripping, overlays have a shadow to imply something is above another)
- keep things simple - people tend to be more interested in utility than ornaments when it comes to design but once you gain a bit more confidants you can start looking at adding in more little details as 'delight ears'
There is a bit of a gut instinct element when it comes to spacing things out but some grid templates might help with that to start with.
from an engineer to another, I remember reading an article about how a company doesn't use a designer for their site because enough tools already exist. Dribbble was their favorite
Read up on Dieter Rams and Bauhaus for some foundational lessons on aesthetics and design. (Go to some museum exhibitions if you can in your area.) Look into Jeff Veen and his work on HotWired in the 90's.
Hoefler & Frere-Jones have some great blurbs on typography. IDEO and Frog Design have written good stuff. Tufte, as mentioned,is great for information architecture.
When it comes to actual design, I recommend starting with scrap paper and a fat marker. The bigger marker prevents one from getting too detail oriented -- particularly helpful when designing for mobile.
When I am not feeling design intuitively, I approach it as a problem solving exercise as that's what we do as coders... solve problems.
Ask yourself, what problem is this design solving? Is the goal of the site to get people to buy things? Ok, Problem 1: show them things. Problem 2: Make the user's eyes look at the right elements to get them to buy.
Each design element will either serve of obstruct your problem solving goals. It becomes obvious once you break the problems down into small enough goals.
For the web/mobile one of the most fundamental aspects of design is typography, study it, I recommend this book. Also it will teach you to diagram and grids, your design will improve a lot with that.
Design is getting increasingly competitive. As people learn about the theoretical foundations of visual design (e.g. golden ratio, usability, etc), the more they will be impatient with amateur attempts at design.
I have been a designer for over 10 years and not to toot my own horn, but it is a practise. You have to do it constantly to get good enough to the point that your design solution IS a solution, and not just a makeshift.
This might be a different context than what you were asking but I try and have DigititalColor Meter open on my screen and when I come across a design or color scheme I like, I use DigitalColor Meter to help deconstruct how that design was set up. This helps break down button designs, gradients, shadows, and textures. Doing this over and over helps me understand what makes certain designs work at a pixel level.
Work alongside a designer.
Easiest would be at a startup where you are interacting with one another on a daily basis. As a designer at a startup, when I'm updating the interface or creating a new flow I'll often include my design thoughts. Side note: I do find myself repeating the same things over and over: spacing, hierarchy, etc.
Don't Make Me Think by Steve Krug is a good start on principles of usability and web design. Also, you can find website layouts, graphic designs, and get help with infographics from istockphoto.com, gettyimages.com, themeforest.net and visual.ly.
My learning philosophy has always been to start by just doing. After a little time spent doing, when you stop and take a look at resources and discussion about whatever it is you are trying to learn, you are much more able to use the info.
As a developer, I recommend that you read "The Non-Designer's Design Book" by Robin Williams. It teaches design fundamentals, and it made me much more aware of the principles of good design, and I think it would be a good starting point.
Try to recreate the designs of your favorite sites. This way you'll practice your skills and get a lot of "I see what you did there" moments. Later on you will be able to implement those things in your own original designs
I found imitating designs is really helpful in learning how to design. And of course spend as much time designing as you would for programming. It takes a lot of practice.
I tried this. Thing is, just reading about design does nothing for me. I can read about typography all day, but I still feel like a novice when I have to decide what font "looks good" (besides the obvious ones, that is).
I simple don't feel the urge to go open Photoshop/Gimp and toy with new designs - I won't know where to begin, and yet, I want to become better at design. :-/
I wish there were more practical, interactive lessons somewhere where I could see the reward for learning some new design-related skill.
If you can't find a class, get a hold of Betty Edwards's _Drawing on the right side of the brain_. A lot of it is mumbo jombo, but the exercises are excellent and work wonders. Once you've developed some observational abilities, get a copy of Andrew Loomis's _Creative illustration_, just recently back in print. It covers layout and design, and a good bit of color theory in a very accessible manner.
Don't get discouraged, anyone can learn to observe and sketch usefully, but it oes take practice. And it is a fundamental skill for _anyone_ who wants to communicate visually..