Make Beautiful WordPress Designs

Being an amazing web designer comes naturally to some people - but most people have to work at it. Really hard.

Whilst I really like making new things I find it helpful to have a set of guidelines available to refer to when something doesn't look quite right.

Line Height - Line spacing should be set to at least 1.3, around 1.5 is generally good. Don't go too high or text becomes hard to read. CSS Line Height.
Line length - too many characters on a line is hard to follow. Aim for 45–90 characters or 2–3 alphabets. More on line length
Whitespace - the more the merrier. More on whitespace.
Proximity - keep related elements nearby. More on proximity and similarity.
Font faces - use no more than 3 fonts, less than that is better.
Font weights - use different font weights for interest and emphasis.
Font size - use a type scale to ensure beautiful, consistent font sizes. Create a type scale/ modular scale.
Simple, Minimal - less is more.
Contrast fonts (and font sizes) - for visual interest. Contrast, harmony, and personality in fonts.
Contrast colours - for accessibility. Colour and contrast on web pages.
Vertical Rhythm - creates visual harmony. More on vertical rhythm.
Colour - keep colours simple. Start with black, white, and 1 key colour. Add more as you need them. Too many colours is confusing. Web Developers guide to colour.
Consistency - make everything as consistent as possible. Reuse styles in different elements. The importance of consistency in web design.
Animation - use animation, use it sparingly. Good animation can be amazing, bad animation can ruin a website. An introduction to animation in web design.
Learn from others - sites like Dribbble are great for inspiration, don't be afraid to use ideas, but don't copy outright.
Use a pattern library - great for consistency, and testing new functionality. Why use a pattern library.
Letter spacing - more space for capitals, less space for bold. Simple guidelines on letter spacing.
Use Math - make sizes, padding and spacing multiples of a baseline value. This helps create harmony. Mathematical web typography.
Text Alignment - Don't justify text; It's hard to read. Centered text is ok for headings, and very short text (eg quotes). Justify text with HTML/CSS? Don’t do it!

Useful Resources

When Things Aren't Working...

Below are a few tips to help when a design isn't going as you had hoped.

Take a break - take some time off from the project. It's hard to see things objectively when you work closely with something, so the more time you can take away from it, the more clearly you will see the flaws when you return.
Clear you head - go for a walk, get some sleep, watch a film. Anything that will make you forget about the project and think of something else for a while.
Get a second opinion - find someone you can trust to give you honest, constructive feedback. They don't have to be a designer - but it helps if they know about the thing you're designing (ie how to use a website 😄).
Start from scratch - sometimes you just have to start again. That doesn't mean you have wasted time though. Often through creating one design you solve a lot of problems, and so your second design can be completed more quickly.