6 ms·
Ask HN: I'm an engineer, how do I learn design?
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?
- Snoddas 13y agoDesign! Show the result to potential users. Get criticised. Do more design.
- lifeguard 13y agoRead: https://en.wikipedia.org/wiki/Golden_ratio https://en.wikipedia.org/wiki/Golden_ratio http://nostarch.com/modernweb http://nostarch.com/modernweb
- philipDS 13y agoI'm subscribed to http://hackdesign.org/ http://hackdesign.org/. Haven't had the chance to follow the course itself yet, but it sounds interesting.
- QuantumGuy 13y agoI 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.
- deleted 13y ago[deleted]
- garry 13y agoSome of my favorite resources: http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758 http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/032134... http://www.edwardtufte.com/tufte/courses http://www.edwardtufte.com/tufte/courses 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.
- niels_olson 13y agoBig 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 http://en.wikipedia.org/wiki/John_Tukey)
- SCAQTony 13y agoTufte 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 subject: http://en.wikipedia.org/wiki/Grid_(graphic_design) http://en.wikipedia.org/wiki/Grid_(graphic_design)
- JohnHaugeland 13y agoI 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.
- kirbyk 13y agoHow have I never heard of Easel.io?? I just did the demo. Blown away.
- latitude 13y agoWith 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. http://www.amazon.com/Design-Everyday-Things-Donald-Norman/dp/0465067107 http://www.amazon.com/Design-Everyday-Things-Donald-Norman/d...
- _yb 13y agoTry 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
- ejpastorino 13y agoDavid Kadavy is offering a free course in a few days: http://summerofdesign.com/ http://summerofdesign.com/ Looks really promising!
- zerr 13y agoDesigning in your head is one thing, but would you actually enjoy doing it?
- CitizenTekk 13y agoLast thing you want to hear, but you need to find a designer. It'd be hard for UI &/ UX designer to handle Rails/JS.
- CitizenTekk 13y agohttp://www.uxdesignedge.com/2010/03/dont-design-like-a-programmer/ http://www.uxdesignedge.com/2010/03/dont-design-like-a-progr...
- rlf 13y agoRead Issacson's bio of Steve Jobs. There are a lot of good passages in it about conversations between Jobs and Jony Ive on how Apple products were designed.
- pknerd 13y agoGo to HackDesign.org and follow their lectures/ Also buy Design for Hackers.
- dsyph3r 13y agoI can second this. Ive been going over the hackdesign material for the past few months and Ive found it really useful
- manish_gill 13y agoI 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.
- hv23 13y agoTry Designlab -- http://www.trydesignlab.com http://www.trydesignlab.com. :)
- manish_gill 13y agoInvite only. :(
- hv23 13y agoCo-founder here -- we're rolling out invites and bulking up lesson content, so sign up and you should be in in no time.
- manish_gill 13y agoCool. Signed up. :)
- ronyeh 13y agoDo 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.
- the_cat_kittles 13y agoMy 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.
- sunnynagra 13y agoThis 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.
- gdubs 13y agoRead 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.
- dakridge 13y agohttp://dribbble.com/ http://dribbble.com/ 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
- cooop 13y agoA 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 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.
- mattmanser 13y agoThere's this course, not sure what it's like yet as I decided to learn javascript in depth first before I move on to design: http://hackdesign.org/ http://hackdesign.org/
- freijus 13y agoNice answer from a previous similar question on HN : https://news.ycombinator.com/item?id=4318154 https://news.ycombinator.com/item?id=4318154
- dreamdu5t 13y agoSame 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-Communication/dp/1560520442 http://www.amazon.com/Crisp-Graphic-Design-Visual-Communicat...
- MetaCosm 13y agoYep. Beyond that, realize that some parts of design like dealing with visual hierarchy ( http://hackdesign.org/lesson/19/ 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.
- ihatehandles 13y agoAgreed
- whytaka 13y agoDesign 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.
- zhs 13y agoAs 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.
- jot 13y agoI got loads out of the first couple of lessons here: http://www.trydesignlab.com/ http://www.trydesignlab.com/ It's like Codecademy but for design.
- adamnemecek 13y agoSeems like you need an invite for designlab.
- hv23 13y agoDesignlab 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.
- danmaz74 13y agoI'm an engineer too, and many years ago I read a book that I really found illuminating: http://www.amazon.com/Designing-Visual-Interfaces-Communication-Techniques/dp/0133033899 http://www.amazon.com/Designing-Visual-Interfaces-Communicat... The examples about applications design are outdated, but the principles and clarity of exposition are still top notch.
- combiclickwise 13y agohttps://www.udemy.com/how-to-design-great-products/ https://www.udemy.com/how-to-design-great-products/ Sheepishly adding my own course to the list. Its free for a while so see if it is for you
- AliAdams 13y agoI came from an engineering background to 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.
- rom16384 13y agoAs 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.
- tptacek 13y agoIf 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.
- commieneko 13y agoAs 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..
- radley 13y agoThat'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. I agree with: Admire. Emulate. Innovate.
- commieneko 13y agoNo, 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.
- radley 13y agoMany people know how to draw and still don't know a lick about web/app design. You're recommending a tangent, not a direct path.
- commieneko 13y agoYou just aren't reading what I wrote.
- 13y ago
- damon_c 13y agoWhen 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.
- melvinram 13y agoAdmire. Emulate. Innovate. ADMIRE 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.
- latitude 13y agoThis 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.
- rbreve 13y agoFor 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. http://www.amazon.com/Thinking-Type-2nd-revised-expanded/dp/1568989695/ref=sr_1_1?ie=UTF8&qid=1369514406&sr=8-1&keywords=typography http://www.amazon.com/Thinking-Type-2nd-revised-expanded/dp/...
- dpolaske 13y agoAwesome resource: http://hackdesign.org/ http://hackdesign.org/
- studiofellow 13y agoA 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. Here are a few links for you: --- Step by Step UI Design by Sacha Greif http://sachagreif.com/ebook http://sachagreif.com/ebook -Shows process of designing a web app UI. Short with lots of examples. --- Designing Web Applications by Nathan Barry http://nathanbarry.com/webapps/ http://nathanbarry.com/webapps/ -From what I can tell, the focus is on usability, interaction design. (I haven't read this one, but Nathan knows what he is doing.) -Nathan also has a separate ebook about mobile: http://nathanbarry.com/app-design-handbook/ http://nathanbarry.com/app-design-handbook/ --- Bootstrapping Design by Jarrod Drysdale (This is my ebook.) http://bootstrappingdesign.com http://bootstrappingdesign.com -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.) --- * Edit: formatting
- od2m 13y agoThanks Jared, I'm going to read your book :)
- halayli 13y agoI 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.
- kaa2102 13y agoDon'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.
- febeling 13y agoOne 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?)
- sachingulaya 13y agohttp://www.amazon.com/gp/product/1560520442/ref=oh_details_o00_s00_i00?ie=UTF8&psc=1 http://www.amazon.com/gp/product/1560520442/ref=oh_details_o... From the thread "Design Books Every Hacker Should Read" . See https://news.ycombinator.com/item?id=5058583 https://news.ycombinator.com/item?id=5058583 for reviews.
- coldarchon 13y agoIf you have to ask you are not an engineer
- od2m 13y agoHi, I'd like to thank everyone for their great replies. More good info then I could have hoped for here. Thanks, od2m
- deny 13y agoWork 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.
- meerita 13y agoWell, 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.