Ask HN: creating design as a developer? | Hacker News Reader

Ask HN: creating design as a developer?

13 pointsstaticfinal16 comments

I am a software developer that have created several websites in the past and always had the same problem; the last bit that prevents me from launching is having design and usability that people actually understand. I see many of your guys "weekend" projects getting launched with (in my eyes) excellent design. What are your best tips for getting a good design and usability of the website. What tools can help out here?

I have contracted designers in the past, but the result has been mediocre, and sometimes simply worse than what I had from the beginning.

View on HN

I know exactly what you mean, and I'm only beginning to overcome my 'bad design sense'. Since I started coding before designing, I've found it helpful to draw parallels between the two. Like studying good code helps improve your own programming skills, finding and examining what makes a design 'good' is extremely helpful. I've got a huge folder of code I use over and over again, improving it as time goes on. Likewise, I've started to keep a folder of design components -- layout ideas, button designs, gradients, as well as links to the previously mentioned 'good designs'.

Edit: This sounds like common sense now that I read it over again. Sorry if it's not helpful.

I'm not sure whether to call myself a designer or a programmer (or both or neither), but I have released a handful of web apps/sites that usually end up receiving compliments for good design [1]. The funny thing is that I've never read a book or even so much as a blog post on what makes a design good.

Here's the most helpful tip you'll ever receive: find something beautiful and copy it exactly, pixel for pixel. You can start as small as you feel comfortable - a button, an icon, even a nice shadow. From there, work your way up. At this point, don't worry about being original. Duplicating existing design will help you in so many ways. You'll become acquainted with the design software of choice. You'll learn about tools and menus that you never new existed. You'll discover neat techniques, and you'll notice details that you overlooked before. As you work, you'll start to understand why things fit together the way they do. You'll see that some elements work together and some don't. Pick out pieces from different designs and mash them together.

And here's a secret: nobody gets a design right on the first try. Experiment, experiment, experiment! If something looks a bit off, adjust it. You probably won't know exactly how to adjust it, so tweak the element in every way you can think of. Resize, change the color, adjust the stroke or gradient. Eventually it will look right.

[1] http://letspocket.com, http://madebyloren.com, http://snowday2011.com, http://boxify.me are a few of the designs I've worked on recently

You're already on the right path, merely by caring you give your project the chance to have good design, it rarely (never?) happens by accident.

A common problem developers can fall into is failing to allocate enough time for design. You describe it as "the last bit", when in terms of effort required it may reasonably be every bit as large a task as any other component of your project, and in terms of user impact it may be the largest part of your project.

A (not so relevant) example about understanding the cost of design work: a lot of people claim that they can't draw, but they may be saying "my first sketch looked awful, therefore I can't draw", I started programming with 10 PRINT "HI!" 20 GOTO 10 but didn't tell myself "I can't write a defender clone, therefore I'll never be a programmer", skills are developed through use and practice.

From a developer perspective ask yourself what role design plays in the architecture of your project, are you structuring things so that the design can be rev'd independently of the software - I often bounce between working on design side and programming side tasks while working (ADD at work), but that is only really practical if they are (de)coupled in a way that allows parallel development.

I have the same issue myself. I feel that I generally have good taste but I am so inexperienced with design, that I would never come up with good looking design from scratch. That being said, I found out about this useful Mac program called Little Snapper. It helps you build a scrapbook of screen captures. I use it to capture webpages and design elements that I like the look of. I'm not saying to steal other people's design, but I find it to be a very inspirational source to browse through once you've built up a bit of a database.

Here's the link if anyone is interested. http://www.realmacsoftware.com/littlesnapper/

Like learning how to program, I think it's a mistake to look at a finished product, go "I want my project to look like that!" and then try to deconstruct the end result systematically.

I'd suggest forgetting the "oh pretty!" aspect of design, and just focus on simplicity, both on aesthetics (What's simpler than a line to separate? White space!) and usability (Simpler than two clicks: one click). The basic principles of fonts, spacing, and color theory always apply, so start with getting comfortable with these techniques. The gradients, subtle shading, and translucency effects can come later and build on top of the basics anyway.

There are two ways you can go:

1. Don't worry about design and think about every project you do as a prototype. If you get it off the ground are think your project has potential then bring in some design talent and do the project for real.

2. Before you roll up your sleeves and start to write code try to first spec the project with the help of a designer who understands usability. Even if these are sketches on a napkin you'll do better work.

Also there is a difference between art direction and usability -- if you just want to improve the look and feel you can bring in a designer after you're done.

This is something I struggle with all the time when working on a project. For me I have found that the design process is just as iterative as the development process, it doesn't just happen right away; unless you want to grab a template and tweak it a little bit. Check out sites like Pattern Tap for UI and ColourLovers for color schemes. Also, practice. Play around with the UI, experiment with colors and layouts.

Hey a designer here. I was thinking of putting together some basic steps which a developer can follow to get a decent design. I am not sure how to present it. There is so much to tell "How to" and "Why" and then other things come-up.

Would you be interested in something like that? How would you like it to be presented?

Why don't you write a series of blogposts? That's be successful. Then, with the feedback on those, turn it into a book/site/... Keep it simple, here's what I'd like to see:

Series on doing visual design for developers.

1. keep it simple - no design is better than bad design, some design basics

2. fonts

3. Heavyness of text

4. Picking a color scheme

5. Buttons

6. Doing a simple but clean logo

7. Icons and small visual elements

each step really practical with lots of examples etc.

Cool! I've been planning it for long. Also would you like more of How-to or theory basics so you can go and do it yourself? Coz either I can tell you the thinking behind or the Photoshop / alt. how-to.s (later suck).

Pretty much like - teach you to catch a fish or catch one for you.

Light on theory, heavy on examples please. Coders always want to see code. So show them the "hello world" of button making.

I know you want to write about theory, everyone does, but leave that for the end and keep it light.

I'd also recommend themeforest.com or something similar but in case you want to handle it yourself this article helped me out a lot: http://flyosity.com/tutorial/crafting-subtle-realistic-user-...

Cheat. http://themeforest.com/ and the like ftw. :)

Check out http://colourlovers.com and Adobe Kuler. Both recommend colour schemes you can use.

Drop me a line ;)

Maybe it's not so much about tools as about teaching yourself design. No, really. It's not that hard, and it doesn't require you to "be artistic" -- a common misperception. Look for books by Robin Williams (a woman, not the actor) as a start. Visual design is more about science than about art.

Reply on news.ycombinator.com