

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

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.<p>What are your rules of thumb &#x2F; hacks for improving your web designs?
======
enewe101
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
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
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](http://baymard.com/blog/line-length-readability)

------
shawnreilly
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
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
Is there one typography book you'd recommend in particular to start with?

~~~
sevilo
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](http://www.amazon.com/Just-My-Type-About-
Fonts/dp/1592407463)

------
enewe101
Did you catch this post? -- what not to do
[http://www.nngroup.com/articles/the-top-ten-web-design-
mista...](http://www.nngroup.com/articles/the-top-ten-web-design-mistakes-
of-1999/)

------
thinkerer
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
#1 hack for good design = K.I.S,S

------
hcho
Use a css framework. Anything would do.

~~~
eliot_sykes
Do you have one you prefer?

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

