Ask HN: improving your design skills?

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

by davidw • 16 years ago

140 79 16 years ago

news.ycombinator.com

I regularly get negative comments about the looks of my sites, and I want to do something about it.

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

davidw8• 16 years ago

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

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.

fin• 16 years ago

hey david,

i first looked at hecl, and it looks alright for a programming language site

there are a few easy things that would make the site look and feel above-average:

(1) behavioral: a click on the orange box should take you to / - logos are links to the home page by convention, and users (and me) get confused, when they are not

(2) style: make the relation between navigation and content clearer by (2.1) adding whitespace between the orange box and the actual content, so that it becomes clear that navigation and content belong together (2.2) extend the highlight of the current navigation item to the far right of the navigation box, so that it "touches" the content (tabs are always "connected" to their content, and you're basically doing vertical tabs here)

(3) get rid of the "links" headline and the bullet points in the navigation (css is your friend there)

(4) whitespace is your friend, even in the example images - the right example looks very crowded. read the osx interface guidelines (or, less preferrably, the gnome one) for examples of good interface

(5) distinguish _somehow_ between internal and external links in the navigation. i first thought that that was the difference between bold and non-bold entries in the navigation - but apparently, it's not.

disclaimer: i'm not a designer by trade, this is just what i picked up during my studies (independently and on university) and by working together with designers

if you want a good introduction to design and a good read at the same time, read "design of everyday things" and look for slides of user interface design lectures - many teachers put them online!

hope that helped

gexla2• 16 years ago

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.

davidw8• 16 years ago

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.

gexla2• 16 years ago

In that case I'm not sure I would worry about it too much. You could spend time doing better designs or you could spend that time coding. A site should carry it's own weight. If the site is making money and could do better with a redesign, then I would think about hiring someone for that, otherwise, ignore the haters. ;)

marknutter• 16 years ago

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?

utku_karatas2• 16 years ago

Highly recommended: Non-Designer's Design Book - http://www.amazon.com/Non-Designers-Design-Book-Robin-Willia...

bgraves2• 16 years ago

Came into this thread to recommend this book and upvoted here.

This is an older book, the 3rd edition is from 2008, but the first edition is a few years older I think. The most surprising thing (for me) was that design principles have not changed much in the past 100 years or so. This book is geared more towards print design (newsletters, fliers, business cards, etc) but the concepts translate really well to the web.

Another point is TYPOGRAPHY! This shouldn't be overlooked and is easily the best way to improve the design of your site. Color schemes, graphics, and ornaments are secondary to getting the typography (font choice and style, layout, colors, pairing, etc.). Please do yourself a favor and read this article from the world-renowned web designers at Information Architects: http://informationarchitects.jp/the-web-is-all-about-typogra... -- be sure to read the resources at the end of that article. It's s a great place to get started.

Good luck!!

breck• 16 years ago

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?

davidw8• 16 years ago

Cool, I ordered it, thanks!

I already have "Don't Make Me Think", and it's given me some good advice, but the more I get, the better.

dirtyaura• 16 years ago

Excellent suggestion. Although I think design is a skill that has to be learned by practice (and there's of course natural talent involved), Non-Designer's Design Book gives you a few concepts that allow you to better understand why some designs just look better and some don't.

One of the biggest tool for me was that you shouldn't be wimpy, but make big contrasts: e.g. select large font & small font instead of two that are too close to each other.

antileet• 16 years ago

I recommend the Non-Designer's Design Book as well. However, there are a few little hacks that seemed to work well for some sites I had to put up.

1. A nice compelling photograph is a little easy on the eye and seems to make up for a lack of content on the front page.

2. Use sIFR (http://www.mikeindustries.com/blog/sifr/) to add fantastic typography to your site, and make it more visually appealing.

3. Using wordpress as a frontend for your website (even if you don't have a weblog) allows you to swap in one of thousands of fantastic themes.

Whenever a friend asks me to put together a website, I just ask him/her to pick a theme, and host wordpress with static pages. It's a lot more easier to maintain and has more choices as far as visual content is concerned.

[edit: formatting]

oneplusone• 16 years ago

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.

thinkbohemian3• 16 years ago

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!

thinkbohemian3• 16 years ago

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

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

philfreo• 16 years ago

Great advice. I have done something similar (save to delicious certain sites that I've loved) http://delicious.com/philfreo/design+inspiration+amazing

pxlpshr• 16 years ago

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

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.

dctanner• 16 years ago

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.

spatulon• 16 years ago

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.

pmjoyce• 16 years ago

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

PhrosTT• 16 years ago

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.

thinkbohemian3• 16 years ago

Looks like it's not just me... http://www.buzzle.com/articles/color-blindness-facts.html

More men are color-blind

eagleal3• 16 years ago

The fact is that men like both women/men targeted designs, while women don't like men targeted designs. (I can't find the source, but it's in the sources of an A List apart article[1])

trafficlight• 16 years ago

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

nostrademons2• 16 years ago

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.

Nekojoe• 16 years ago

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.

SlyShy• 16 years ago

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

sambashi• 16 years ago

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

bokonist• 16 years ago

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.

davidw8• 16 years ago

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.

maxklein2• 16 years ago

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)

stan_rogers2• 16 years ago

...and there's your problem. Helvetica and Helvetica Neue both tend to look lousy on the web unless they're used in a graphic (where you get to control kerning and antialiasing) or at a relatively small size (10-14pt equivalent), and then only in Safari for the most part.

There are fonts that are just a little less elegant than the real Helveticas, fonts you wouldn't likely use in a print application, that render a whole lot better in browsers because they were designed for the screen and play with pixels better.

Arial isn't one of my favorites, but it is a proven web font, and whatever else it may be it is certainly a Helvetica rip-off. Use Geneva then a Helvetica as fall-backs.

Verdana makes great sans-serif body copy at small sizes, but it's a bit, um, portly for headings or body copy at large sizes.

Some folks seem to like Tahoma, but I find it makes some weird word-shapes that slow my reading. It's worth a try. Other popular and widely-distributed fonts like Trebuchet, Calibri and Candara work well, but not in a design as sparse as yours (they're too, well, organic to work in a clinical setting).

If you can find it in your heart to go serif (and you should whenever the text gets long), then georgia, garamond, palatino, "palatino linotype", serif; is what you want in almost every case. (Constantia is also pretty and readable, but less likely to be installed than Georgia, and damn Georgia sets well on the web.)

jwecker• 16 years ago

Spot on. I would like to specifically emphasize bokonist's "b)" - I only made real progress with design when I started consciously seeking out design that looked amazing- even taking photographs occasionally of billboards etc., and then trying to recreate it. Otherwise you're doing the programming equivalent of reading about languages without even bothering to type out examples- let alone composing your own.

og1• 16 years ago

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.

CoryMathews• 16 years ago

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/

bgraves2• 16 years ago

I disagree, respectfully.

Typography is more important than color and shouldn't be overlooked. That 'nitty gritty crap' is actually very subtle differences between typefaces and styles that can't be easily detected and shouldn't be discarded.

Here's a great passage from Jason Santa Maria:

"Beyond the question of readability, much of typography comes down to contrast and form. The details of a typeface can inject meaning into a design: Soft lines and stroke weights, for example, can be useful for delicate material or to give an air of elegance and dignity. Those same attributes can be juxtaposed with unexpected content to produce an ironic effect. "

tl;dr - typography is meaningful

archon810• 16 years ago

Thanks for PatternTap.com - very helpful resource.

samdk• 16 years ago

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_rogers2• 16 years ago

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

Ixiaus• 16 years ago

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.

mrduncan• 16 years ago

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

http://windycityrails.org/videos#4

ssp• 16 years ago

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

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

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.

brlewis• 16 years ago

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

bgriggs13• 16 years ago

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

eagleal3• 16 years ago

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.

bgriggs13• 16 years ago

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.

milestinsley• 16 years ago

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.

tripngroove• 16 years ago

+1 Blueprint has good typographic defaults. Adjust for color and you can basically roll with it.

davidw8• 16 years ago

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

skolor• 16 years ago

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.

hockeybias• 16 years ago

I second the Rutledge recommendation below.

codebaobab• 16 years ago

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.

scorxn• 16 years ago

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

cpher• 16 years ago

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

Kaizyn• 16 years ago

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

Freebytes• 16 years ago

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

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

alexro• 16 years ago

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.

tel• 16 years ago

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.

koenbok• 16 years ago

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.

dasil003• 16 years ago

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

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.

chasingsparks• 16 years ago

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.

edna_piranha• 16 years ago

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.

Dylanfm• 16 years ago

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.

francoisdevlin• 16 years ago

It's all CRAP

Contrast Repetition Alignment Position

jonny_noog• 16 years ago

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

Google for more.

SocialBootstrap• 16 years ago

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.

Ask HN: improving your design skills?

Related Stories