

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer




share|improve this question

migrated from Mar 30 '11 at 20:08


See also: – user568458 Jul 25 '12 at 16:26
This is the answer that the other see also was trying to point to:… – Russell Leggett Jul 31 '15 at 15:46




share|improve this answer





share|improve this answer






share|improve this answer



share|improve this answer



There are tons of great web resources including and, which give great current articles in the world of design and web tech.


Good luck and happy designing!

share|improve this answer


Okay, that's a broad topic. You want to create "beautiful", "top notch", professional looking" websites. So, you need to know what makes people perceive something as "beautiful", right? Luckily for you, beauty isn't really subjective.

One of the keys to a beautiful visual design is harmony.

The lack of harmony is what makes your designs look amateurish.

And, the best thing is that visual harmony comes down to maths. It's not about having a gut feeling.

Like others have pointed out, I'd recommend designing websites on your own. Try to apply the design principles you learn about instead of using a ready framework. It might be hard at the beginning, but it will help you become better.

How to embed harmony in a website design

Following is a practical example and a funny little exercise you can do now.

One way that I personally prefer is to use a modular scale to size the website elements in harmonious proportions. A website that can help you generate a modular scale is this one:

The benefit of using a modular scale is that it can make sizing decisions as easy as picking a number from the scale.

For example, let's size a website's headings (to communicate visual hierarchy).

Let's say we have this modular scale based on the 19px body font size that I chose (19px because it looked best with the font I was using, but you can skip this step and go with the default 16px size) and the ratio 1.412 (No need to go into details why I chose this ratio. Just any ratio will do better than no ratio for your projects.):

Here's what my scale looks like

Looking at it, I’d pick the H1 to be 2.815em, the H2 to be 1.994em and the H3 to be 1.412em. First 3 numbers bigger than the body font size. Easy-peasy, right? The body text would be 1em (in my case 19px). Then, I’d size the H4-H6 at 1em and use contrast (different font weight or style) to differentiate them from the body text.

So, try this now:

  1. Generate your own modular scale
  2. Get a plain HTML document (real content, please no Lorem Ipsum)
  3. Use the scale to size the headings.
  4. Then try using the scale for other sizing decisions (margins, paddings, etc)

That's just a small step towards better designs, but I hope that it will help you.

If you found this helpful, you can read my other list of 7 tips for beginner web designers who know HTML and CSS

P.S.: You really have a lot of reading to do

Like others have said, read:

  • The Elements of Graphic Design by Alexander White
  • The Elements of Typographic Style by Robert Bringhurst
  • Don't Make Me Think by Steve Krug

Also, here a huge list of online resources like blogs and communities to keep an eye on:

share|improve this answer

Your Answer


