

Ask HN: basic web design for small projects? - Tichy

As I am seriously hampered by my lack of design skills, I wonder how others cope with those small projects (like small demos) that don't warrant hiring a designer. Are there some tricks to make simple sites look good? I remember one guy writing on HN how he just found a free web design template on the web, but even that approach failed for me so far. Did I just not look in the right places?
======
swombat
Basic design competency can be learned. Sure, you may not be able to learn to
be a brilliant designer, but anyone can learn how to use Photoshop and CSS and
how to produce a decent design.

I'm no designer either, yet I can make some decent designs (e.g.
<http://danieltenner.com>) that, imho, look far from horrible.

The key is to practice and to get comments/criticisms from other people. It
also helps to join a web designer forum and offer critiques of other people's
designs. What you need is basically to train up your own internal critical
engine so that you can point out the flaws in your own designs and correct
them.

Being able to make things look good is a pretty useful skill in all walks of
life, I'd recommend learning it rather than trying to outsource it.

~~~
jasongullickson
Is there an alternative (on OSX) for this application (designing website/app
layouts) to Photoshop? I've used Gimp in the past but they seem like
completely different animals and the tutorials for Photoshop were all but
useless.

I have a hard time swallowing the price of Photoshop for such a limited
application, when I'd probably be using less than 25% of what it does...

~~~
swombat
I have yet to find a comparable alternative to Photoshop. There are many
attempts at duplicating it, but none of them are nearly as powerful as
Photoshop.

I believe there are some "lite" versions of photoshop out there for cheaper
prices, though...

~~~
plaes
Gimp?

------
alexk
You should learn basic design principles first. Start reading this book:

Non-Designer's Design Book

[http://www.amazon.com/Non-Designers-Design-Book-3rd-
Designer...](http://www.amazon.com/Non-Designers-Design-Book-3rd-
Designers/dp/0321534042/ref=tag_dpp_lp_edpp_ttl_ex/178-9816000-2540627)

~~~
ankeshk
I recommend Non-Designer's Design Book too. Its the best starter book on
designing.

Combine that with making a few trips to colourlovers.com for selecting your
site colours - and you're set.

------
mooders
I think where one's design skills can be considered lacking, as I very much
consider my own, simplicity becomes increasingly important and attractive as a
design philosphy.

Plenty of white space, clear typography, showing only what is needed, and
aligning vertical and horizontal edges helps hugely.

Two tools that also help enormously: <http://www.906.gs> \- a grid system for
layout and <http://www.colourlovers.com> \- Colour Lovers for awesome colour
palettes.

~~~
voltageek
I think you mean <http://www.960.gs> (Highly recommend it by the way).
<http://smashingmagazine.com> has some great articles on design.

~~~
mooders
Thanks for the correction, voltageek! And Smashing Mag is an excellent
resource indeed.

------
dc2k08
If the template didn't work for you - perhaps you do just need to look around
a bit - there are tons of good solid templates out there. here is 100 for
starters: [http://www.smashingmagazine.com/2008/12/01/100-free-high-
qua...](http://www.smashingmagazine.com/2008/12/01/100-free-high-quality-
xhtmlcss-templates/)

Learn illustrator for the web or fireworks before photoshop if you want to do
it yourself and nice curves work wonders.

I'm doing a slinkset site up at the moment (in my profile) which I haven't
promoted yet as it need some finishing touches but it's going to be somewhere
you can post for jobs like this, look for advice or find templates etc.

------
raffi
This depends on the project. I'm a non-visual person myself. If it's open
source or non-commercial then I recommend <http://www.oswd.org> \-- I have to
admit your site will look very Web 1.0 but I've had luck outfitting my open
source projects from here.

I'll second what others are saying: you should learn HTML, CSS (properties,
selectors, box model, etc.), and become competent with Photoshop or The GIMP.

These skills let me modify (with mixed results) existing templates. They also
save me money when working with a designer. I'm able to provide direction by
modifying his mockups saving time (= $$$) and confusion in the process.

~~~
Tichy
Any pointers for good existing templates? I already know HTML and CSS, and
basic Photoshop/Gimp (even created title graphics with glow and shadows and
stuff back in the day). But the only "template" I have available is YUI reset-
fonts-grids.css, which looks worse than nothing at first, as it removes all
styles.

~~~
KWD
Don't confuse a framework with a template. I would not consider YUI a
template, and even basic CSS layouts (the common 2-column, 3-column, etc.) are
not complete templates. Using a true template the design decisions (graphics,
colors, etc) are made for you.

I'd recommend determining what content you want on the site, find similar
sites, and then that will provide a basis for design. Look at oswd.org and
smashingmagazine.com as mentioned above. Do a google search for css templates,
etc. Even consider templatemonster.com.

------
chaosmachine
Minimalism can get you pretty far. Good examples: Cutline by Chris Pearson,
Daring Fireball blog, Google.

------
ahlatimer
Most color wheels will help you pick three colors, but this isn't really
necessary in basic sites. One of the things I've used to overcome this is to
just use two colors. Even better is to just stick to the grey scale.

From there, learn a bit about typography. Typography can make a huge
difference on whether a site looks great or looks like utter crap. I've seen a
few sites that kept color choice really simply without a lot of fancy graphics
that truly looked beautiful.

Another thing that will definitely help is practice. Do a couple practice
mockups and breakdowns. You can follow along to a tutorial like
<http://is.gd/Lpx4> or just wing it. The first design I did was a royal pain,
but by the second or third design, the process became much more natural and a
lot easier. Each subsequent design has gone a lot smoother as well, and I can
only attribute this to practice and reading about design.

------
Edinburger
The advice above is great if you have a real passion and talent for design or
if you really need to save the $$$. However, as a counterpoint I'll share some
compelling reasons to hire/borrow a real designer, even if that means paying
some $$$ for a short-term contract: (1) It takes time to learn design skills.
Can you really afford the opportunity cost? Wouldn't that time be better spent
on business/hacker work? (2) For a credible product, you need a professional
finish. Sure, you can go for a simple look like Google but even doing that
well takes serious skills. Design is like DIY in your home - it's easy to 'get
by' but hard to do a real professional job. (3) You will probably take longer
to do this work than a professional. This means that not only are you spending
valuable business/hacker time but you're spending even more time than a
professional would.

~~~
Tichy
One problem I see with hiring a designer is that it becomes hard to change the
site after the deed is done. It is difficult to make incremental improvements.

~~~
Edinburger
It's a good point. You can mitigate this by asking your designer to leave a
PSD file with various UI components and teach you the basics of how, for
example, to create new buttons in the site style. Of course, this doesn't help
with brand-new innovative features or artwork in the same style. Artwork is
where you feel this problem at its worst!

------
rpoca
Photoshop, GIMP, CSS, etc. ara just tools. You should first get some good
taste. It can be learnt. And it will pay well in the future (for example,
you'll avoid hiring a bad designer).

Learn a bit of color theory, as to avoid creating horrible mashups. Don't
trust just pre-baked palettes. The proportion you use of each color is even
more important.

Learn some composition, read a pair of introduction books on design. The more
you learn, the better.

Good design is hard to come by. In programming and in arts.

------
marcusbooster
Design is a subject to be learned like any other - there's whole books and
schools dedicated to it. Go to the library, look through some art and design
books, if you see a style you like then write it down and emulate it (don't
copy it outright, just use it as a framework or guidance). If you're into what
a lot of people here are calling "minimal", look at modernism and the swiss-
style. Browse published graphic design poster histories and start to pay
attention to how the compositions are put together and what makes styles
similar and different, and typography. In no time you'll have a greater
appreachiation of the craft and your own designs will look a lot better. It's
a lot like programming actually.

------
noelchurchill
It sounds like you'd like to hire a designer, but the size of the project
doesn't warrant paying for one. In this case, I'd recommend 99designs.com.
Have a simple custom design created for a very reasonable price. Best of both
worlds!

------
wenbert
If you are in a hurry and do not have the patience, then you will only get
frustrated if you try to learn from scratch. I suggest you go with ready-made
stuff - like for CSS, take a look at BlueprintCSS (it makes CSS a hell a lot
easier) -- go for minimalism with nice typography. Then get a good photo and
in some minimalist design and it should be good.

Or better yet, ask your friends to do it ;-) there are guys out there who are
trying to build up a portfolio and will be willing to do simple jobs for free.

Just curious, do you have a URL for your site?

------
jaddison
<http://blueprintcss.org/> is much like 960.gs - a clear concise framework
designed to give you nice typography with easy layout - look into it. It will
save you serious time.

Get someone else to do graphics if that's not your thing.

Make sure any content (phrasing, wording, etc.) is TARGETED towards your
users. As a developer, you will think you have the right content, but likely
you won't.

~~~
jasonkester
Gotta like their sneaky "Sites using Blueprint" section that makes it look
like a dozen high-profile sites are using it, when in fact it's only two
little ones.

------
jmonegro
Probably unrelated, but I could whip up a design comp for you quickly, minus
the coding (I'm REALLY busy at the moment). Nothing in return, I just like to
help :)

------
hnbw
I'm in the same boat and while I will ultimately design a web site for the
project, right now I am using WordPress which has a lot of really nice themes.

------
csbartus
Use "Google Design": as simple as possible, no fancy css / photoshop /
effects.

If worked for Google it will work for you.

~~~
Tichy
No question, but I still see a big difference between my layouts and the
average Ruby on Rails generation layout.

~~~
csbartus
There you are with the Ruby on Rails web app theme :D
<http://github.com/pilu/web-app-theme/tree>

------
mbeihoffer
If a small demo, as you put it, is important enough that you need to show it
for your career, it's important enough to either spend the time learning web
design basics to make a decent looking demo, or else to enlist outside help.

(This doesn't necessarily mean hiring an expensive web designer or design
firm; I regularly consult on projects for cheap or free in order to help
clients, business contacts, and friends, and have found that it almost always
pays off in terms of establishing better relationships with people, who in
turn refer projects back to me, etc.)

So, I guess what I'm saying is, if you're not the greatest at design but need
design services, then, uh, try to make friends with a good web developer with
altruistic tendencies.

