Ask HN: improving your design skills?
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?
85 comments
[ 3.0 ms ] story [ 182 ms ] threadhttp://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
------
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.
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
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.
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!!
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?
I already have "Don't Make Me Think", and it's given me some good advice, but the more I get, the better.
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.
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]
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.
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!
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.
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.
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.
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.
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
More men are color-blind
[1] Related: http://www.alistapart.com/articles/wiwa/
http://en.wikipedia.org/wiki/Tetrachromacy
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.
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.
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!
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.
That's just my thought process, no personal offence intended.
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.)
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.
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/
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
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.
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.
http://windycityrails.org/videos#4
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.
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/).
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.
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.
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.
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.
I'm not talking about knowing what tool you have to use to create a light/shadow effect, but experience in how certain rules applied to that instrument can create something that has a much more visual impact. I'm not talking only about Photoshop. This applies specially in the mind setting. I can create something with my mind, just the thought, the idea.
When you code, you have your instrument (computer, programming language, etc) you have to apply certain rules to match your design idea. But that's not all. With graphics, you can abstract datas (ie. idea), but programming you can pattern complex datas in a way that graphics can't do (ie. algorithms).
I'm in HCI/UIs and I design more than program, but that doesn't stop me love seeing (read: learning) code.
Paul Graham has a related essay on Hackers and Painters: http://www.paulgraham.com/hp.html
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.
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.