

Ask HN: improving your design skills? - davidw

I regularly get negative comments about the looks of my sites, and I want to do something about it.<p>The problem is: most of them look just fine to me.  It's not like code where I can see what looks bad and then work towards something that looks better.  For that matter, it's not even like a drawing where I can tell whether it looks how I want it.  I <i>like</i> the simple/spare/plain look.  However... that doesn't seem to match what a lot of the rest of the world wants, so any advice from hackers who have made progress in that direction?
======
SlyShy
I'll give this a shot.

I'm expecting you don't want to spend tons of time on graphics and the likes,
but you don't need to in order to drastically improve your sites as they are
now.

Your typography definitely needs to be improved. A lot of people say they
can't tell when they need to fix their typography, so here's an easy test:
paste a chapter of a book you are reading into your template, and see if you
can stand to read it there, instead of in the book. The shorter the amount of
time you can stand, the worse your typography is.

As for colors, first pick a primary color. This'll usually be some pleasing
shade of blue, red, or maybe green. Draw some blobs and lines of different
size and thickness, and see how the color holds up. Then pick a complimentary
background color. For example, when I use red as a primary color, I don't set
it against a white background. The red will appear too jarring. Instead, I use
a pale cream or very faint yellow. Your background doesn't have to be white,
but it should be very light so that your text still shows up well. The point
of having an off-white background, though, is that it changes the eye's
perception of your primary color, and makes it look like it 'fits'. Test out
your primary color again on your background color, and tweak the two.

I think, actually, your color choice is already good on your personal site,
but it is being marred badly by two things.

The first is the navigation. I know that the two leveled effect is on purpose,
but what it _looks like_ to the user is that you had one very long navigation
bar that wrapped around. The structure of this navigation is poorly conveyed
here. The second navigation strip is supposed to be "under" David, so to
speak, but you don't convey that at all in your design. Here's an extremely
quick and dirty example of what might be better:
[http://mkbunday.googlepages.com/2010-02-05-091156_1024x600_s...](http://mkbunday.googlepages.com/2010-02-05-091156_1024x600_scrot.png)
Note you still wouldn't want "Padova Chronicles" taking up two lines.

Also, please, please remove the ads from the top of the page. The whole "above
the fold" thing is overrated... however, above the fold is where the user
develops their impression of your site. When I see those ads right in my face,
before I've even gotten to read the first paragraph of text my immediate
association is with a cheap Yahoo Sites page.

You might want to ask yourself how much that ad revenue is really worth. My
guess is that it's not exactly a significant portion of your income, and you
would be better off removing the ads and having a more favorable professional
appearance.

Minus the ads, the site looks a lot more favorable already.
<http://mkbunday.googlepages.com/no_ads.png> Look at how front loaded the
content is! The user can get right to the point, and read about you, rather
than some really not that relevant ads!

------
bokonist
I am hacker who had made a fair amount or progress in learning graphic design.

Here are the things that helped me:

a) read as much as possible on graphic design. The non-designers design book
is a great choice. But there are tons of articles across the web on fonts,
spacing, coloring, contrast, etc.

b) pick out sites that you like (and that people with design sense like), and
practice copying them _exactly_. If there is some button or styling you do not
know how to reproduce, find a photo shop tutorial for how to reproduce it. As
you do this, you build up a toolbox of great design techniques. Gradually as
you get better and learn how to make pretty sites, your old designs will
become embarrassingly deficient to your eye.

c) as you make sites try to solicit detailed feedback from people who know how
to design.

Here are some thoughts on specifically why I think your pages do not look so
hot:

For your home page: <http://www.welton.it/davidw/>

The text in your logo needs to be anti-aliased, the edges look jagged. The
alignment and spacing of the menu links are off (the horizontal distance is
not consistent). Again the text is not anti-aliased so it looks jagged. The
spacing between the headers and the text feels off, the header should be
closer to the paragraph it represents, not the paragraph above. The top of
your bio pic is not aligned with the top of the paragraph. Finally, as a
general point try and avoid pure black (#000) on pure white (#FFF). Using
slightly grayer font ( #555) softens the page considerably. Also, don't use
the default blue for links, use a better looking color. The Adwords look very
tacky.

For Dedasys: <http://www.dedasys.com/>

Again, anti-alias the logo. Try being creative with the font too, maybe
download a font set and try making the logo with a more unique font. Alignment
of the menu items looks off, centering them does not work. The bullet points
should be aligned left. Even better, use a custom designed bullet point rather
than the browser default. The colors for the page overall are terrible. To get
good colors, I often download a really nature picture, then use the eye
dropper to pick out a couple colors. Doesn't always work, but can be quite
useful.

Overall, great design is not about being glamorous versus simple spare. Its
about getting all the little details right. The balance, color, alignment,
etc. And it's about adding that extra little touch in a lot of places - the
custom icon for bullet points, the creative logo.

Getting good just requires a loop of reading/study, practice, and getting
feedback.

~~~
davidw
Thanks for the advice. One comment though: neither my personal site nor the
DedaSys one has 'logos', just text, which Firebug says has the computed style:
"Helvetica Neue",Helvetica,Arial,sans-serif" at 48px. So I guess the issue is
more one of "things don't render the same in all browsers - use an image if
you want consistency". I don't care too much for my personal site, but the
DedaSys one I'd like to look nice.

~~~
maxklein
Please remove the ads from your website. Those ads bring you SMALL income now,
but they affect your FUTURE income strongly. Removing the ads is delaying
gratification - you give up the amount they give you now so that in the future
you will earn more (from the larger number of people who will bookmark your
site to be read later)

~~~
davidw
They were mostly there for the articles, where they 1) brought in a bit of
beer money, and 2) didn't really seem to detract from anything (I can see the
point about the home page ones). Anyway, I removed them.

~~~
maxklein
My thought is usually this - if a person is interested enough in the type of
money that ads bring that he clutters up his personal website, then this
person must be pretty broke. And pretty broke people in the IT industry are
usually not very smart people, because it's easy to make money in IT.

That's just my thought process, no personal offence intended.

------
utku_karatas2
Highly recommended: Non-Designer's Design Book - [http://www.amazon.com/Non-
Designers-Design-Book-Robin-Willia...](http://www.amazon.com/Non-Designers-
Design-Book-Robin-Williams/dp/0321534042/ref=dp_ob_title_bk)

~~~
breck
I recommend the Non-Designer's Design Book too.

Also, I recommend Don't Make Me Think, by Steve Krug.

I'm a terrible designer, but have learned a few simple things from these books
and other great designers.

First, here's what's most important:

\- Copy (most important!) \- Size/Shape/Position

Much further down:

\- Font and colors

Second(paraphrased from Krug's book):

1\. Does this site offer something of value that I want? 2\. How hard is it to
extract that value?

------
CoryMathews
Normally the biggest thing people screw up is the colors. Use a color
generator and then always pick colors from the theme. Two of my fav sites for
this are

<http://colorschemedesigner.com/> and <http://kuler.adobe.com/>

The next step after color is Typography. You don't need to get into all the
nitty gritty crap about it but choose some good fonts normally something very
clean and simple is your best bet. ie Arial, Helvelica, Verdana (used on this
site) and Georgia. When you get into other fonts its very easy to use them
incorrectly. For example you do not want to use Georgia as body text its to
hard to read but it makes great headlines.

After those two changes the third is the hardest, making things feel well
designed. Take a look at how other people have done similar things. A great
site for this is <http://patterntap.com/>

Just because something is simple/spare/plain does not mean it cannot look
good. For example take a look at these minimal sites

<http://www.fedthread.org/fr/today/> <http://mattbango.com/>
<http://www.pixelhavenllc.com/> <http://bobulate.com/>

~~~
samdk
You can make something beautiful and well-designed without color at all. Black
and white can be beautiful. The same cannot be said of typography.

And Georgia is actually _very_ readable at small font sizes. It was
specifically designed for use as a text font on a computer screen. It's a fine
choice for body text.

~~~
stan_rogers
In fact, Georgia is a no-brainer kind of choice if your site is text-heavy. It
needs to be opened up a bit -- the line-height should be around 1.4em -- but
it makes the right word shapes (most "expert" reading happens at higher
pattern-recognition levels than letters) without sacrificing clarity at the
level of letter shapes and letter-spacing (as, say, a Garamond or Palatino
might). Serifs make a huge difference in readability. They just got a bad on-
screen reputation from implementations like Times New Roman on Windows (which
is more of a weak encryption scheme than a legitimate typographic decision).

------
ssp
Andy Rutledge's blog has lots of good stuff. His five-part introduction to
gestalt principles is about the basics of graphic design:

[http://www.andyrutledge.com/gestalt-principles-1-figure-
grou...](http://www.andyrutledge.com/gestalt-principles-1-figure-ground-
relationship.php)

[http://www.andyrutledge.com/gestalt-
principles-2-similarity....](http://www.andyrutledge.com/gestalt-
principles-2-similarity.php)

<http://www.andyrutledge.com/gestalt-principles-3.php>

<http://www.andyrutledge.com/common-fate.php>

<http://www.andyrutledge.com/closure.php>

For typography, Robert Bringhurst's _The Elements of Typographic Style_ is a
must-read. [http://www.amazon.com/Elements-Typographic-Style-Robert-
Brin...](http://www.amazon.com/Elements-Typographic-Style-Robert-
Bringhurst/dp/0881791326).

You mentioned the _looks_ of your sites, so the above are about visual and
graphic design, but good _interaction_ design will also help making people
think your site looks better, is faster, has more features etc.

Be careful whose judgement you trust. People here on HN sometimes seem to have
a caricatured view of users as only being attracted to visuals. In reality,
visuals can't do much more than support (or ruin) an otherwise well-designed
site.

------
spatulon
I found The Non-Designer's Design Book pretty useful.

<http://www.amazon.co.uk/exec/obidos/ASIN/0321534042/>

It provides a list of simple typographic and design rules to follow, and
explains why they're important. As written on that Amazon page, they are
contrast, repetition, alignment and proximity.

There's no reason why you can't have a simple site that also looks 'good'.
There are some fundamental issues with your sites that wouldn't be fixed by
merely making them more complicated. The lack of repetition and alignment in
your sites particularly jump out at me (once you've read this book, you'll see
mistakes everywhere).

Look at the Squeezed Books site. The "Home" link isn't aligned with the links
below and above it. The text in the logo in the top left is nearly aligned
with the "Log in" link, but is actually centered within the image. Even if
people don't consciously spot it, it will likely feel 'off' to them. You've
centered the "What is Squeezed Books?" text. Centering looks messy and feels
weak. A good rule of thumb is to avoid it entirely until you know when it's
appropriate to break the rule. As for repetition, I simply ask, how many
different font styles do you count on that page? There are too many.

------
koenbok
In my experience becoming a good designer takes as much learning as becoming a
good coder. Every designer at Sofa has an unhealthy interest in composition,
color and typography and studied years before getting good at it.

That said, a few things that I've seen working with coders starting here that
at least their recognition/understanding of great design got better by:

\- Hanging out with designers and discussing their work. You will find out you
will sometimes understand them as hard as they do you when taking code.

\- Learning about typography; it's a part of design that has more universal
true rules then any other aspect of it, and therefore is easier to study.

\- Looking at pretty stuff on a daily base. Fffound is a great place to start.
But great application UI's/marketing stuff works too, if you want to keep it
close to computers.

\- Start learning photography, and study how compositions of objects in a
frame can make an image interesting.

------
tel
A common misconception is that "simple" is easy to do. Instead, it's often as
hard if not more difficult. Solid design is a battle won in the detail and
with simple designs you have fewer details that each must be perfect.

For example: The left part of DedaSys \- The fonts are sized as to have an
ambiguous hierarchy \- The shadows are not consistent and thus break the
illusion of layered paper \- (especially important is that the shadow on the
yellow bar at the top doesn't match the shadow in the menu block) \- The
current location box is larger than the others once again breaking the
illusion of layered paper \- The grey line surrounding the whole thing crosses
layers

On your personal site \- The text grids are not equal or obviously
intentionally unequal \- The navigation headers are almost randomly arranged
\- The picture doesn't fit well into the gridlines formed by your text \- Your
text doesn't have a visual flow

Each of these criticisms is a tiny fix in and of itself, but they build an
emotional reaction in a viewer. It's an unfortunate circumstance that your
designs are judged by all viewers on the same level as those done by
professionals. No matter how hard you try, nothing looks "good" unless it's
close enough to perfect that people can't tell it isn't.

    
    
      ---
    

So, what are you going to do?

Simple designs are a good place to start: you can iterate them much more
quickly, and, just like all design, you definitely are going to be iterating.

Graphic design can be thought of as the unification of a message with a design
metaphor. Simple designs should have simple messages and simple metaphors.
Interestingly, your sites provide a great comparison. DedaSys has a simple
message (a shallow hierarchy) but a complex metaphor (stacked, multicolored
paper in hard lighting). Your personal site has a simple metaphor (text blocks
in white void) but a complex message (highly nested hierarchy with many levels
of equal importance makes it difficult to skim).

So pick a simple metaphor and craft a simple message and then keep iterating.

    
    
      - single sheet of brilliant plain paper with two columns
      - a sheet of nice, lined paper lain on textured wall paint
      - Two sheets of paper, laid atop one another, with shadows between them
    
      (these all involve paper because it's easy to visualize, but it's possible
       to get more exotic while still being simple)
    
      - a pane of glass with big bold letters stuck to it, held over interesting scenes
        which are wildly out of focus in the background
    

Visualizations of your message and metaphor drive the "simple" details which
build your design, but you should always be moving in a positive direction.
There are three focuses I like to use:

    
    
      1. intent: make it clear that even your accidents were thought out
      2. consistency: if you've made an intentional decision, defer to 
         it throughout the design
      3. illusion: let a realistic design metaphor guide your decisions
    
      ---
    

So with that theory in mind, there are also a few pretty common design tricks
that help you to be effective. All sorts of comments have already covered
these, but I'll reiterate

    
    
      1. Pick a grid, both horizontal *and vertical* and stick to it
      2. Study other designs, especially classic and powerful ones like 
         Coca-cola's logo or a newspaper, and understand what makes them 
         attractive. Steal it.
      3. Study the shape and appearance of real things. If you can physically 
         build what you want your website to look like, you have a wonderful
         guide for how to design it.
      4. Study a little typography. It's a very old art which has strong traditions.
         Some of them are important and necessary, some of them are simply important
         because of consistency. We're all expert consumers of type design, whether
         we know it or not.
    
      and finally
    
      5. Break any and all of these rules when you think you should, but know when 
         you're doing it and DO IT INTENTIONALLY. Breaking a rule shyly looks
         terrible. Breaking one with panaché makes something striking and phenomenal.
    
      ---
    

Graphic design is a fun thing, but it takes just as much effort and skill as
programming. With that in mind, good luck on your journey.

------
thinkbohemian
I got similar complaints about my designs, (which can be super
frustrating..."i gave you a website...now you want it to be gorgeous
too...sheesh").

So I started taking note of what I liked and didn't like about site designs. I
made a delicious list and tagged the sites i liked with "webdesign-
inspiration" if they have something that specifically stood out to me. Design
is an art, and every artist learns by imitating. Find a feature you enjoy and
try to duplicate it. Firebug is your friend.

But never get too attached. Just because a child spends hours on a macaroni
picture doesn't mean everyone will love it. Listen to your users/friends and
take their advice with a grain of salt. Re-design, is just part of design.

Find a few design blogs that you can relate to, i like css-tricks, and check
them every once in a while. If you like sparten designs, read
<http://www.alistapart.com/> . A typography based webpage design takes more
skill and patience to make look good than just throwing some blue web 2.0
buttons on your nav bar.

Keep a folder of screen shots of web designs you like and constantly ask
yourself what makes you like them, and how can you incorporate those features
in your site.

Finally, if you have any limitations (mine is colors) there are plenty of
resources to help you out, just search for them. Such as
<http://www.colourlovers.com/> Good luck!

~~~
thinkbohemian
I forgot to add, the best way to focus on design for me is to use photoshop
(or gimp...whatever) create a mockup and get that 'perfect' before you
implement your CSS. It is much easier to think about design separately from
the method of the design (css, html), that way you can quickly test out
several designs on paper, and pick the best one to implement.

~~~
jamesbritt
Net trick: Inkscape svg files can be rendered directly by most modern
browsers.

~~~
araneae
Ohh! I didn't know that.

Actually, that would be really awesome if more sites did that. I usually ctrl+
= my browser to reduce eyestrain, and a lot of graphics look ugly that way.

------
og1
Learn to wireframe and sketch out your websites ahead of time. It is much
easier to try ten different layouts on paper than starting them in css. Some
people like to mockup in photoshop, but I prefer paper. It is just faster for
me.

Some people already mentioned "Non-Designers Design Book" - Robin Williams

Some other good ones are:

"Design of Everyday Things" - Donald Norman (Conceptual, but gets you in the
right mindset)

"Dont Make me Think" - Steve Krug (Usability matters)

"The Visual Display of Quantitative Information" - Edward Tufte (he has a set
of 4 books on information visualization, all of which are good)

One of the key concepts that I've taken from these books is that everything in
a page has a visual weight so you must consider how everything in a page
balances out together. Never add stuff just for the sake of adding it, because
it will distract the user from the information they are trying to gather.

And most of all just build more websites and try to improve each one. Design
is still a lot like programming. If you dont like the particular look of your
site you can refactor it. I know you don't get the benefit of seeing it, but
some of the best designed sites out there have gone through multiple
iterations.

------
PhrosTT
learn C.R.A.P.

    
    
        * Contrast
          Elements that aren’t the same should be very different so they stand out, making them “slightly different” confuses the user into seeing a relation that doesn’t exist. Strong contrast between page elements allows the user’s eye to flow from one to another down the page instead of creating a sea of similarity that’s boring and not communicative.
        * Repetition
          Repeat styles down the page for a cohesive feel â€” if you style related elements the same way in one area, continue that trend for other areas for consistency.
        * Alignment
          Everything on the page needs to be visually connected to something else, nothing should be out of place or distinct from all other design elements.
        * Proximity
          Proximity creates related meaning: elements that are related should be grouped together, whereas separate design elements should have enough space in between to communicate they are different.
    
    

...and ask girls for feedback. they're better with color for some reason.

~~~
trafficlight
Women have a greater chance of being tetrachromats than men do. Basically a
tetrachromat can see a fourth range of colors giving them the ability to
distinguish 100 million colors compared to the 1 million colors normal people
see.

<http://en.wikipedia.org/wiki/Tetrachromacy>

~~~
nostrademons
Would this matter on electronic media? Typical color LCD/CRT screens have only
red, green, and blue pixels - a tetrochromat wouldn't get any signal on the
fourth channel. Computer displays increase the number of colors by increasing
the number of bits per channel, but with 24-bit color (8 bits per channel),
you're already showing 256 different intensities of light, while the human eye
can only distinguish 100. You'd either need special displays or an eye that
can pick up more gradations of color per channel to increase the color
bandwidth.

I think this effect may be because of another phenomenon I heard about in my
psych class: females tend to have larger vocabularies for color than men do.
Whether that means they can _see_ more colors or _say_ more colors remains to
be determined (and my philosophy class said it _can't_ be determined ;-)), but
the net result is that you get better color feedback from a woman.

------
milestinsley
I recommend Blueprint CSS grid framework (<http://www.blueprintcss.org/>) .
It's really easy to use and _forces_ you to think about layout (which is the
root of good web design). You get some basic typography styles for free too.

I've found that it has helped a lot in quickly putting something together that
looks good and can be easily improved incrementally as your site evolves.

You might find it (or something similar) useful when it comes to building the
fundamental site structure.

Edit: clickable link.

~~~
davidw
I started using that, and it certainly helps, but there's more to it than
that.

------
oneplusone
Looking at the two examples you provided, I think your problem falls into two
categories. Typography and colors.

Typography: The information hierarchy is not clear enough. In your second link
the top section has near identical sizes and weights which makes it hard to
see what is more important. I suggest you read The Elements of Typographic
Style by Robert Bringhurst. It will teach you how to use type effectively and
is a very good and interesting book.

You have way too much copy on the page. You need to make it interesting or
people won't want to read it. Things like bulleted lists and pull-quotes will
break it up a bit and add visual flavor.

Color: The colors you pick doesn't really work. In the first link the gray is
way too dark and looks really dreary. In the second example the link, text,
and header colors are so close together you can barely see the difference.
They also don't really work well together. This is a matter of taste. Nobody
can give you taste, its something you will need to develop.

Practice makes perfect really. Take a look at other websites and just observe
which colors work well together. There are lots of little tricks you can use
to make a minimalist site looks great. For one, don't use pure black for type.
It shimmers on the page. Instead use a really dark gray. I personally use
HSB(0, 0, 15).

Another thing you can do is to use HSB to pick your colors. Pick a single
color you like, and then adjust the H slider to find a matching color. Its not
perfect, but it works well enough.

------
edna_piranha
A couple of things:

\- Commit to some rules on your site layout/design/font/colour. It's easier to
associate links with a certain pattern rather than inconsistent presentation
(e.g. you have a link on the bottom that is bold but the rest aren't. Should
be clear why that is bold or all should be bold or none at all.)

\- Information and typography are very important elements. Graphics are only
there if you really need it but personally, I don't think they are necessary
if you are only placing them in there to just have a graphic.

\- The graphics you currently use for your project listing should be the same
width (height may differ). Some are longer, some are shorter and it makes it
difficult to scan the content.

\- Run the text for each project across the entire page and avoid cramming
text from two or more sections on a single horizontal section. It makes the
readability of the text difficult since in some cases you only have 3 words
across before it continues below.

\- Think about spacing on your layout. The top navigation should be straight
across in this current structure, not alternating upper and lower. You are
only wasting space without purpose. Shrink the font size, remove the bold or
remove the uppercase and keep it all on one line.

\- You need more padding between sections (e.g. your intro statement, current
and past projects). It looks really crammed together right now. If you are
worried about scroll, there reduce the general font size.

Hope that helps.

------
SocialBootstrap
You don't need to learn "everything you can about graphic design." Your
audience is other hackers. They don't care that much about visual goofiness
either- you want a clean, minimalist site, then that's what you should have.

The one single thing you should do is make your site more READABLE.

Right now, this page is too big. Limit the width of a column of text to around
500 px. That will do wonders. I suggest fixing your body to 900px, and then
splitting it into two columns- a main content column of 556, and a sidebar of
344. (Golden Ratio always looks nice).

Next- typography: Obviously, stick with web-safe fonts. Arial and other sans-
serif used to be the way to go on the web, because low-res screens didn't
display serifs very well. But now it's 2010, and all the print people know
that for regular text, a serif font is more legible.

font-family: Georgia, "Times New Roman", serif;

Beyond that, you need to make the lines the right distance apart. They need
enough room to breathe, and paragraph breaks should have as much space between
them as they would if there was another line of text there. Something like:

p { font-size: 12px; line-height: 22px; margin-bottom: 22px; }

or you can use ems or whatever you like, but notice that line height is a
little less that twice the size of the font size, and that the margin on the
bottom of paragraphs is the same as the line-height.

If you just did those few things, your content would be immensely more
readable.

------
skolor
I just wanted to say thank you to everyone who posted stuff here, I've been
looking for these kinds of resources for a while now, but never really asked.

Oh, and I thought I would share this:
<http://users.cs.dal.ca/~inkpen/CSCI4161/4161_lecture4.pdf> , it looks like a
presentation on "Non-Designer's Design Book" that a lot of people have
mentioned.

------
dasil003
First, learn to recognize good design. Some people claim that you can't learn
good taste, but I disagree. You just need to pay close attention to
_everything_ you see on a daily basis and store it in an accessible part of
your brain. Most people don't store design information, they just store
whatever was communicated.

Formal training can be of tremendous value here, but in this day and age it's
also viable to be completely self taught, especially with some good books.

Once you have an eye for design you can apply the basic principles as
described in other comments here. Without the eye then the principles are
meaningless. You also won't learn much by looking at your own work. You're too
close to it, so objectivity is all but impossible. You need to leave it alone
for a month, absorb as much design training as you can, then come back to it
with a fresh eye and quickly critique it before miring yourself in the details
again.

------
imp
I'm not there yet at all, pretty much in the same boat as you, so take this
with a grain of salt. I have heard that in addition to all of the great
technical tips about color/fonts, etc, the goal of an amazing design is to
make it look difficult for the user to reproduce. If your design is something
that someone would say "I could put that together in Microsoft Word," then
it's just too simple. I think I read it in Simplebits or somewhere like that.
Very soft gradients and rounded corners can each be incredibly subtle, but
combined can give the effect that it's a professional design instead of
something someone put together quickly. That's why you shouldn't ever use
Times New Roman, because it's the default font for most browsers, and it shows
the least amount of effort.

------
davidw
For some clickable examples:

<http://www.hecl.org> \- I think this one has a bit too much text; that much I
can figure out on my own.

<http://www.squeezedbooks.com>

~~~
boundlessdreamz
I think you need to organize the information and a little bit of typography.

\------

hecl is just fine. (looked only at the home page)

But squeezedbooks needs some work IMHO

* Login/Signup seems to be just thrown in there. There is another list of links just below it and ideally it should belong there

* "What is squeezed books" block also seems to be placed wherever there was space. First think about whether you actually need that block. Why can't the info go in about ?The answer to "What is squeezed books" seems more like a tagline than a real answer. You already have the tagline in the header which is remarkably similar

* Too many horizontal lines in the header. It would look better if you your menu list has a background color and looks like a horizontal strip.

* Mixing of intent. "Recent summaries" and "latest comments" are list of stuff. But you also have "Write a summary" styled the same way. That is a call to action. Ideally it should look and act like a button.

* Long text: The last comment is very long without paragraph breaks. It looks like user generated content, so you can't do much about it but limit the amount of text displayed and add a "Read more". This will make the comment section look more consistent.

* The latest comments is a a list of li. That is probably OK but you should definitely lose the bullets.

* Play around with font-size, line-height and different fonts. If you want absolute readability, see what the readability bookmarklet is doing. Don't copy blindly because the font-size set by it is pretty large for a normal website. But looking at your site, you could probably do with increasing font sizes.

My 2 cents. Not a designer but is trying very hard to learn design.

------
scorxn
4 years of design school left me with 2 words: Simple contrasts.

Design, particularly typography, is all about the relationships between
elements. Contrast defines those relationships. For type, contrast is usually
created by size, position, color, weight (sometimes called typographic color,
just to confuse things), face, and variant (eg: oblique). Use as few of those
to achieve contrast as possible. Thus, simple contrasts.

The Elements of Typographic Style will efficiently rock your world:
<http://amzn.com/0881792063>

------
mrduncan
Ryan Singer of 37signals gave a great talk at Windy City Rails last year about
this very topic.

<http://windycityrails.org/videos#4>

------
Freebytes
One of the best methods to improve your skills is use the Google Analytics
method of evaluating before and after changes to your site. You should look
into this type of evaluation, and you can be surprised to find that this will
improve your customer response to your goals.

The idea is that you put up two pages simultaneously. You track the success of
your goals based on incremental changes. The changes that result in more
success are the ones you gravitate towards. Using this approach should help
you understand what customers want or expect in order to reach the goal. (The
goal is any achievable metric such as signing up for a free account or
purchasing a product.)

Another method is to ask your customers and also observe your customers.
Customers may think they want something, but when you observe them, you may
learn otherwise. I have done this and learned quite a bit about the behavior
of users.

You will also want to research trends and statistics if possible. People have
researched design, and there are commonly accepted practices that can be used
to enhance the performance of your site. However, you must be careful to stay
up to date because these trends change as people 'fade out' commonly over used
attention-getting solutions.

~~~
weaksauce
Patrick(patio11) released an opensource rails plugin to do the A/B testing. I
haven't used it but he can probably chime in or you can look at his blog about
his results.

<http://www.bingocardcreator.com/abingo>

------
dctanner
Learn by example, just like you read someone else's code to learn a lang or
framework, find sites that you like e.g. from <http://www.designmeltdown.com/>

Open a few up in the background, fire up photoshop and start getting inspired
by the layouts and themes around you. Once you've done this a bit you'll find
you suddenly have a much larger vocabulary of design elements to pull from.

------
codebaobab
Before&After Magazine is my design How-To favorite.

<http://www.bamagazine.com/>

I am not a design professional, so not all of their stuff is useful to me. But
their typography and layout advice is excellent.

Some of the content of their back issues has been reworked into a couple of
books. One of those might be a good starting point.

------
Ixiaus
This is an excellent question - one I've been trying to answer for myself for
quite sometime.

You certainly don't need to go graphics heavy, but having an eye for
arrangement, matching color palettes, typography, flow, etc... are all crucial
to an elegant design. I've found you don't ever need to go graphics crazy if
you can master all of those fundamentals with what HTML+CSS provides you.

Graphics and graphic design should just "add" to it. A lot of designers I work
with use graphic design as a crutch for their inability to understand true
elegant web design (hence why I will never subcontract a designer that "does
primarily print work and web design on the side").

In all honesty, a programmer is more capable of devising and creating an
elegant and magnetic site design for one primary reason: a programmer grasps
the underlying technology and capabailities (hell, it's programmers that made
Photoshop possible!). Just adding in a classical eye for aesthetics will make
your ability to arrange and select out of what you already know much more
efficacious.

------
pxlpshr
There are a few fundamentals I see lacking in your sites that would be a
night/day improvement:

1\. Grids

2\. Typography

3\. Thorough understanding of CSS

Both of your example sites are accessible but good minimalism generally
emphasizes #1 and #2. Think Apple. You can find plenty of books on those two
topics because they are so fundamental to good design.

~~~
isleyaardvark
I agree, especially with the first two. I'd recommend searching for those
terms on Smashing Magazine (<http://www.smashingmagazine.com/>). I'd also
highly recommend <http://webtypography.net/>. It's a more accessible, if
incomplete, version of Bringhurst's book. (Bringhurst's book is great, but
it's a bit much for total beginners.

------
pmjoyce
This is a constant issue for me. I get excited by good design - it scratches a
purity/elegance/zen itch in me. Can recreate it? No chance. I've even had one
of my sites defined by one HN user as "...like a domain parking page".[1]

To loosely paraphrase Justice Potter Stewart: I can't define good design but I
know it when I see it. [2]

The reality is I need to engage professional designers earlier in the process
but, being self-delusional, I'll always give it a bash anyway.

1\. <http://news.ycombinator.com/item?id=902408> 2\.
<http://en.wikipedia.org/wiki/I_know_it_when_I_see_it>

------
gexla
Are the clients happy? More importantly, are the clients reaching their goals
with your designs? Design is a lot more than a pretty face. It's also about
usability, driving sales, , telling a story, engaging visitors, etc. If your
design results in increasing my sales then I don't care if people think it's
ugly.

If current clients are happy but potential clients are complaining about the
looks of sites in you portfolio, then maybe you should be tweaking your own
sales pitch. Include not just images of your work, but also stats which show
how your design helped conversions among others.

As a designer, it's your job to educate the client as to what's really
important. Maybe all the client knows is to look for a pretty face.

~~~
davidw
I am a hacker (although I'm uneasy about calling myself one), not a designer,
and if I'm doing a web site professionally, I generally work with someone who
does the graphics/design. This is for my own sites, where there is no client
who says yes/no.

~~~
marknutter
It doesn't like you want to spend a lot of time trying to become a premiere
designer, but you are sick of hearing about how your sites look like they were
designed by a programmer. Why don't you trade services with a kick ass
designer and finally give your sites the makeover they deserve?

~~~
davidw
Good point, but here's why I'd like to improve my own skills: I like being
able to put something together to test out a new idea or site, and if I have
to get someone to help out every time, it's a bit limiting. If any of them
ever were really successful, or I wanted to invest in them, I'd certainly get
a pro to fix them up nicely.

------
Nekojoe
Have you read Jakob Nielson's work? - <http://www.useit.com/>

Designing Web Usability would be a good start -
<http://www.useit.com/jakob/webusability/>

And Homepage Usability is good for screenshots with examples -
<http://www.useit.com/homepageusability/>

I would take what he says with a pinch of salt at times, as he can be very
metric based. Sometimes it helps when to know to bend the rules. I remember
for years he was very strict about hyperlink colours insisting that they
should always be blue for unvisited and purple for visited.

------
Dylanfm
Just some random pieces of info:

* Sketch.

* Begin your designs in greyscale. Introduce colour at a later stage once you've worked out your design whilst only being aware of tone.

* Like many have said, good typography is essential. "The Elements of Typographic Style" by Robert Bringhurst is pretty much the bible here. Some find it too dry, some find it fascinating -- either way, it's definitely worth a read.

* "Don't Make Me Think" is a brilliant book. Each page is almost worth the price of the book itself.

* With usability in mind, definitely read "Web Form Design" by Luke Wroblewski.

* When you notice a piece of design that you really appreciate, take note of it and think about why that is so.

------
jonny_noog
You may be interested in reading about the Golden Ratio[1] and more
specifically the ways people apply it to web design[2]. Helped me a fair bit,
especially when I'm at that point where I'm starting a new design and need a
jumping off point.

1\. <http://en.wikipedia.org/wiki/Golden_ratio>

2\. <http://webdesign.about.com/od/webdesignbasics/a/aa071607.htm>
[http://net.tutsplus.com/tutorials/other/the-golden-ratio-
in-...](http://net.tutsplus.com/tutorials/other/the-golden-ratio-in-web-
design/)

Google for more.

------
bgriggs1
There are two types of graphic designers- creators and copiers.

Creators create original work and ideas, and can synthesize a wide range of
influence, tools, and trends to get exactly what they need.

You will never be a creator.

But there's no reason why anyone can't be a copier. There are enough resources
to easily help with every aspect of graphic design. Find something you like
and try to incorporate a similar effect into your design.

Start with taking a few moments to keep tabs on Smashing Magazine
(<http://www.smashingmagazine.com/>).

~~~
eagleal
I don't see a reason why he can't be a creator. Design it's more a knowledge
of relationships, and the more you explore the more you _can_ create.

Assuming you're talking about graphics design (creativity) [r1]: the more you
explore design patterns, _it's more about knowing the tools_ , once you know
them you can create with them. Programmers are designers, just they're not
used to do graphics.

EDIT:r1: Graphics design only, not including accessibility, etc.

~~~
bgriggs1
It's an interesting tangent- how much crossover is there in the inherent
skills of a developer and designer?

I use those terms from a pretty elitist graphic-design view. Of course anyone
with a knowledge of tools can 'create' something. But the good graphic
designers I know are so much more than their tool set- they are just different
breeds of people. After immersing yourself in that world it changes your
perspective.

~~~
nostrademons
It's an open question just how many of the skills of both developers and
designer are "inherent".

I've certainly noticed that the designers at my company operate on a different
design plane than I do. However, that could be because they're _designers_ \-
this is what they devote their professional life to, just like how I devote
mine to programming. Immersing yourself in anything changes your perspective.

~~~
bgriggs1
I would venture that the "inherent" skills (i.e. skills that can't simply be
learned) are those that separate the truly good _anything_ , whether it is a
designer, developer, or basketball player. Maybe the term there is "talent"?

Agreed- devoting yourself to anything will adjust your perspective. But I'm
not sure that alone can explain super dork programmers or really off-the-wall
designers? There's something more fundamental there.

------
alexro
Much was said about the different aspects of design, but what I want to point
you to is the ultimate goal of design. It's not for you to "like it", it's for
your visitors to get the most out of your website, and seen from that
perspective, design is all about added value.

To do it right, imagine how adding each bit of "cosmetics" improves the
ability of your visitors to reach the state of mind you want them (to get into
the buying mode, decide to subscribe to your blog, whatever)

Only after that you'll start understanding what kind of design you need, not
just putting on some random fancy-pansy stuff.

------
chasingsparks
I recommend picking up CSS Mastery: <http://www.cssmastery.com/>

In my case, I never took the 10-12 hours required to learn how to employ CSS
properly. It seemed like a very boring low-return investment of my time.

My designs were lack-luster -- and I claimed I preferred an austere approach
-- because I didn't know a headache-free way of implementing certain looks.
This book helped. My designs are much better now, even though I have not
changed my aesthetics.

------
brlewis
Here's a quantifiable source of information on what the rest of the world
wants: <http://www.tumblr.com/themes/popular>

------
cpher
I recommend Mark Boulton's book, Designing for the Web:
<http://www.fivesimplesteps.co.uk/>

------
sambashi
I highly recommend the book "The Principles of Beautiful Web Design" from
Sitepoint. Get the basics right first.

------
Kaizyn
Pick up a copy of the Non-designer's Design and Type Book by Robin Williams
(not the comedian).

------
francoisdevlin
It's all CRAP

Contrast Repetition Alignment Position

------
hockeybias
I second the Rutledge recommendation below.

