

Ask HN: creating design as a developer? - staticfinal

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?<p>I have contracted designers in the past, but the result has been mediocre, and sometimes simply worse than what I had from the beginning.
======
3dFlatLander
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.

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

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

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

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

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

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

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

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

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

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

------
pdenya
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-...](http://flyosity.com/tutorial/crafting-subtle-realistic-user-
interfaces.php)

------
SkyMarshal
Cheat. <http://themeforest.com/> and the like ftw. :)

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

------
niico
Drop me a line ;)

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

