Ask HN: I'm an engineer, how do I learn design?

https://news.ycombinator.com/item?id=5767985

by od2m • 13 years ago

89 72 13 years ago

news.ycombinator.com

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• 13 years ago

Design! Show the result to potential users. Get criticised. Do more design.

lifeguard• 13 years ago

Read:

https://en.wikipedia.org/wiki/Golden_ratio

http://nostarch.com/modernweb

philipDS• 13 years ago

I'm subscribed to http://hackdesign.org/. Haven't had the chance to follow the course itself yet, but it sounds interesting.

QuantumGuy• 13 years ago

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.

garry• 13 years ago

Some of my favorite resources:

http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/032134...

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• 13 years ago

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)

SCAQTony• 13 years ago

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

subject: http://en.wikipedia.org/wiki/Grid_(graphic_design)

JohnHaugeland• 13 years ago

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.

kirbyk• 13 years ago

How have I never heard of Easel.io?? I just did the demo. Blown away.

latitude2• 13 years ago

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.

http://www.amazon.com/Design-Everyday-Things-Donald-Norman/d...

_yb• 13 years ago

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

ejpastorino• 13 years ago

David Kadavy is offering a free course in a few days: http://summerofdesign.com/

Looks really promising!

zerr• 13 years ago

Designing in your head is one thing, but would you actually enjoy doing it?

CitizenTekk2• 13 years ago

Last thing you want to hear, but you need to find a designer. It'd be hard for UI &/ UX designer to handle Rails/JS.

CitizenTekk2• 13 years ago

http://www.uxdesignedge.com/2010/03/dont-design-like-a-progr...

pknerd• 13 years ago

Go to HackDesign.org and follow their lectures/

Also buy Design for Hackers.

dsyph3r• 13 years ago

I can second this. Ive been going over the hackdesign material for the past few months and Ive found it really useful

manish_gill3• 13 years ago

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.

hv233• 13 years ago

Try Designlab -- http://www.trydesignlab.com. :)

ronyeh• 13 years ago

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.

the_cat_kittles• 13 years ago

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.

sunnynagra• 13 years ago

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.

gdubs• 13 years ago

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.

dakridge• 13 years ago

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• 13 years ago

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.

mattmanser• 13 years ago

There'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/

freijus• 13 years ago

Nice answer from a previous similar question on HN : https://news.ycombinator.com/item?id=4318154

dreamdu5t• 13 years ago

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

MetaCosm• 13 years ago

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.

ihatehandles• 13 years ago

Agreed

whytaka• 13 years ago

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.

jot• 13 years ago

I got loads out of the first couple of lessons here: http://www.trydesignlab.com/

It's like Codecademy but for design.

adamnemecek• 13 years ago

Seems like you need an invite for designlab.

hv233• 13 years ago

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.

danmaz74• 13 years ago

I'm an engineer too, and many years ago I read a book that I really found illuminating: 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.

zhs• 13 years ago

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.

combiclickwise• 13 years ago

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• 13 years ago

I 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• 13 years ago

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.

tptacek• 13 years ago

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.

commieneko6• 13 years ago

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

radley3• 13 years ago

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.

I agree with: Admire. Emulate. Innovate.

commieneko6• 13 years ago

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.

SkyMarshal2• 13 years ago

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.

thijsc• 13 years ago

That's similar advise to what my drum teacher always tells me: You have to hear it to be able to play it.

sgdesign2• 13 years ago

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.

commieneko6• 13 years ago

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

damon_c• 13 years ago

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.

melvinram• 13 years ago

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

latitude2• 13 years ago

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.

rbreve• 13 years ago

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.

http://www.amazon.com/Thinking-Type-2nd-revised-expanded/dp/...

dpolaske• 13 years ago

Awesome resource: http://hackdesign.org/

studiofellow• 13 years ago

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.

Here are a few links for you:

---

Step by Step UI Design by Sacha Greif

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/

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

---

Bootstrapping Design by Jarrod Drysdale (This is my ebook.)

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

od2m2• 13 years ago

Thanks Jared, I'm going to read your book :)

halayli• 13 years ago

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.

kaa2102• 13 years ago

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.

febeling• 13 years ago

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?)

sachingulaya• 13 years ago

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

od2m2• 13 years ago

Hi, I'd like to thank everyone for their great replies. More good info then I could have hoped for here.

Thanks, od2m

deny• 13 years ago

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.

meerita• 13 years ago

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.

Ask HN: I'm an engineer, how do I learn design?

Related Stories