Ask HN: What are your design hacks for better web design?

17 points by eliot_sykes 11 years ago | 15 comments

There are a few rules of thumb I see repeated regularly for web design, such as aiming for 1.5em+ for line-height in paragraph text and using dark grey instead of black text on white backgrounds.

What are your rules of thumb / hacks for improving your web designs?

enewe101 11 years ago |

Lately I've been really focused on catering to the main usecase of most websites: reading. Not all websites are for reading, of course!, but if yours is, use a nice big font with serifs, like 18 or 20px computer modern, and keep the number of characters per line down around 65. This makes the trip your eyes take during a "visual carriage return" shorter, so you keep your place more easily.

I like to use sans for any widgets. Serifs are nice for the main content, because they signal an editorial frame, but for you don't want that for your widgets. I also like to keep the text on widgets a bit smaller, because they spend too much time sitting there, staring at you, not telling you anything useful.

I also like to keep pages single-purpose. On any given horizontal line, have only focus. This will obviously depend on your application. But chances are pretty good that your website is meant to be read, and most people can only read one string at a time. Put related stuff at the bottom, or top. Ok, maybe a nav bar in the margin -- but it should be quieter than the main content.

The layout and styling of a website should emphasize the main content, and help make relationships between items of content clear. That said, design should be subtle. It should not speak, or else it will compete for the user's attention with content. Keep a high information-to-ink ratio. Meaningless gloss, is to be avoided. The beginning or ending of an article is important, mark it a big initial, an elegant flourish, or a nice, stolid tombstone. But please don't succumb to the temptation to put drop shadows, gradients, and other bubbly 3D effects.

Usually, what makes a website nice is what is not done.

Also, hold your color. Black, white, 80% grey, and 20% grey are your best friends. IMO they are good for about 95% of the pixels on the page. In that context, color can then actually be used to signal meaning, emphasis, and functionality. Lots of sites establish a highlight, background, and main-text color which are not in the greyscale. That's ok as long as that's as far as it goes.

This should go without saying, but don't use any animation anywhere, ever. Ok, ok, I'm excluding single-frame changes on mouseclick and hover -- used judiciously. But please, no stretching menus, whirling tabs, and no slide shows. If I want to watch a goddamn slideshow, I'd go watch a doggamned slideshow :P

Again, this assumes you're making a site for reading. You should free to use as many colors as you want, spurious lines, shading, animations, bright, solid colored flashing backgrounds, and play sounds, when making a page for fun, for breakfast, or for Reasons.

eliot_sykes 11 years ago | |

Wow thanks for taking the time to share all of this.

I'm a fan of 16px + for body copy. I think the browsers have it right most of the time with the default font size of 1em == 16px. You've got me thinking of experimenting with 18px now though.

Where does the 65 chars per line come from? I've heard 2 to 3 English alphabets length but I don't know the original source of that guideline.

enewe101 11 years ago | | |

Yeah, I really encourage you to try bigger font-size -- don't be afraid!

The 65 char per line is to strike a balance between how often the reader has to skip to new lines, and how far that trip is. Why 65 exactly? It's more than 60, but less than 70, and its a nice round number I guess. Here's an article that discusses it a bit more:

http://baymard.com/blog/line-length-readability

shawnreilly 11 years ago |

Every design I do is different, so I wouldn't have any specific rule of thumb. But there are some common things I do related to the process of designing; I guess you could call it my own personal best practices. The first thing I'll do is start with colors, and come up with 4-5 different colors that compliment each other and convey some sort of theme or feel. Once I have that down, then I get into the graphic design and create a logo. Once that's created I'll start to do the general layout for the website. The first part I work on is the UI and navigation. I'll usually storyboard all the pages of the site, and come up with what I call a navigation strategy. This will allow me to determine what type of UI and navigation elements I'll be using for each type of device. This gives me an opportunity to ensure that the navigation experience will be consistent across multiple devices. Once this is known, I'll decide on what frameworks I might use (if any) to help prototype the design faster. In some instances, and depending on what the website will be doing, I might combine multiple frameworks and use custom builds of each one as not to overlap. This allows me to pick and choose what parts of each framework will compliment what I'm building. So for example, if I'm designing for a Phonegap App or Web App, then I'll use certain frameworks. If it's for a Blog or Website then I might use other ones. Once that is decided, then I'll move on to building. Make sure you put lots of comments. I use my own custom set of css media queries that allow me to do specific designs for every major device in both portrait and landscape views. I always start with the tablet's (design for tablet first). I'll usually start with portrait, and then move on to landscape. Once the tablet view is done, then I move on to Mobile (also portrait first, landscape second). The last view I work on is the Desktop view, with 1366px wide being the most common resolution. But I also make sure it works well on 1920px+ wide resolutions. Using the css media queries, I can do this multi-view prototyping using the same files, usually using Firefox Responsive Design View to change the resolutions and orientations. If the html syntax needs to change for different views, then I'll use the media queries to control that as well. This allows me to prototype pretty fast for mobile, tablet, and desktop. Getting it production ready requires more steps, but hopefully this helps!

normloman 11 years ago |

Good design doesn't come from a hack. It's not a "one size fits all" solution. You need to think deeply about the problem you're solving, the audience, the author, and the content. I recommend reading a book on typography. Then you'll understand why line height matters, and why sometimes 1.5em is inappropriate (Though it's a good rule of thumb).

eliot_sykes 11 years ago | |

Is there one typography book you'd recommend in particular to start with?

sevilo 11 years ago | | |

I've been reading this one lately, it's not so much practical typography, but rather the history and backstories of types. I find it quite a fun read, and it can inspire your interests and appreciation for types, if you don't already know much about typography.

http://www.amazon.com/Just-My-Type-About-Fonts/dp/1592407463

OWaz 11 years ago | | |

Butterick's Practical Typography[1] is free online and a really good read.

To go beyond just one book there are good posts and book recommendations on Typekit Practice[2].

[1]:http://practicaltypography.com/

[2]:http://practice.typekit.com/

eswat 11 years ago | | |

I’m not sure if there’s a better book out there for UI design in general, but The Elements of Typographic Style[1] was the typography bible.

[1] http://www.amazon.com/Elements-Typographic-Style-Robert-Brin...

enewe101 11 years ago |

Did you catch this post? -- what not to do http://www.nngroup.com/articles/the-top-ten-web-design-mista...

thinkerer 11 years ago |

I think most important rule of thumb is there should be a clear and concise path or mode of action. Amidst the chaotic data overflow, it often helps to have something calming.

Colors, fonts, layouts help all in this direction.

Ryel 11 years ago |

#1 hack for good design = K.I.S,S

hcho 11 years ago |

Use a css framework. Anything would do.

eliot_sykes 11 years ago | |

Do you have one you prefer?

hcho 11 years ago | | |

Bootstrap. Solely because it has a thriving community of theme, add-on and plugin developers.