Among other things, WordPress is famous for its flexibility and wide array of customization options. A big part of those customization options have to do with design, which unfortunately for non-designers can be both a blessing and a curse.
On the one hand it’s always nice to be able to make a website (or theme) your own by changing colors, fonts, patterns, images and more. But with so many options it’s easy to make mistakes along the way and end up with a website that looks, well, less than professional.
So what’s a design-challenged WordPress user to do?
Three words: Keep. It. Simple.
If you can do that — and the tips below should help — you have an excellent shot at creating a WordPress website that not only looks passable yet professionally designed.
So let’s get into those tips!
Disclaimer: Explaining design is similar to teaching a language — most rules have exceptions. The tips below are not “all-encompassing laws of web design” but rather easy to follow advice that will work in most cases. The goal here is to help non-designers keep things simple and attractive.
1. Follow Basic Typography Guidelines
When it comes to good design, typography may not be everything…but it comes pretty close. This is actually a really good thing for non-designers because while you may not be able to create custom typefaces or graphics of your own, you can follow a few simple guidelines that will help you use existing fonts to maximum effect.
Here are a few things to consider when choosing fonts:
- Focus on readability. No one should ever have to guess what word they’re looking at on your site. To that end, body text should be set between 12-16px with many preferring 14px as the new standard.
- The fewer the fonts the better. Remember: keep it simple. You can do this by matching your navigation link font to your headline font and your body text font to your sidebar text font.
- Small variations like weight, style, and color can go a long way.
In the image above you can see these guidelines at work on my own blog. I’ve matched my navigational font (Arial) to my headline font (Arial Bold) and my post body font (Palatino Linotype) to my sidebar font, with point size varying accordingly.
If you want more examples of how to select and use fonts wisely, check out sites like The Best Designs and use tools that help you identify which fonts the featured designers used where. My personal favorite is the Google Chrome extension What Font.
2. Don’t Try to Re-Invent the Color Wheel
In my experience most people do not possess that special knack for knowing which colors go best together and how to use them properly in design. That ability is typically developed over years of practice as opposed to being inborn in special individuals, not to mention that a considerable percentage of people (and men especially) are literally color blind.
So instead of wracking your brain for ideas on which colors to use and how, try using a tool like ColourLovers.com. You can browse through a large number of designer submitted color palettes and choose the one that appeals to you most.
Another option is to install the color picker extension for Google Chrome and create palettes of your own based on your favorite websites.
3. Err on the Side of Subtlety
This tip goes for the application of the colors you choose as well as any patterns and/or images you might want to include in your site design.
It’s very difficult to do loud and busy well. But on the other hand it’s much easier to implement simple, subtle things that make a big impact.
Take the ManageWP blog for instance: notice the subtle pattern of diagonal lines at the top behind the blog name. And again behind the sidebar. It’s pleasing to the eye but not distracting from the main event, which of course is the content and calls to action.
And take note of the use of colors as well. There are several, they’re bright and fun, and yet they’re used as accents instead of background or main text colors.
You’ll find the same thing to be the case at the site I mentioned above: The Best Designs. When determining how to use the colors you pick out, I recommend exploring the galleries there and taking note of how top web designers are using color.
Lastly, I also highly recommend browsing for subtle background patters over at SubtlePatterns.com. They’re free and extremely effective.
In Closing
As I mentioned above, these three tips are far from everything there is to know about web design or even customizing WordPress. But again, that wasn’t the point. The point is to help those who are not design savvy make good design decisions when making customizations to their own WordPress sites.
Indeed to that end many premium WordPress themes come pre-designed with multiple font /color options and messing things up too badly is nearly impossible. Some WordPress users buy those themes specifically because they find those limitations helpful – and that’s great for them. But if you buy a theme framework like Genesis or Pagelines then I think there’s a lot to be gained by keeping the above tips in mind.
What do you think? Did you find these tips helpful or do you have tips of your own? Let us know in the comments section!
Creative Commons images courtesy of WordPress, ColourLovers, & Subtle Patterns.
Maria Sen
Amazingly Great job. These two points are well covered; “Err on the Side of Subtlety” and “Don’t Try to Re-Invent the Color Wheel”. Thanks for sharing this info. The best part is the article has all the practical detailing! Keep sharing
NetSearch
Thanks for the tips! If you’re thinking about building a new website, make sure you chose wordpress as your CMS. WordPress is easy to use and have multiple themes options. It’s responsive and provides felxible plugins to manage your SEO.
Maria Tayer
This web design tips are literally awesome. Such amazing tools, now we can make some more attractive themes.usually we do some mistake while choosing correct fonts. This article very useful. Thanks for sharing.
Great Web Design Tips | Abishek Writes
Thanks for sharing your web design tips.
Yes, I think it is very crucial to have a nice looking professionally designed website as it helps build trust and confidence among website users.
It is also important to keep everything simple. Too many ads and banners will only scare the visitors away.
Just make sure what your goals are. If you want to increase leads or make sales happen, then design your pages keeping those goals in mind. This will help you increase your earning through your website.
If you would like to learn web design tips to make money money, please visit my website too.
Thank you
Tim
Hi let me add one more plugin to your WordPress plugins collection .
Blog Designer plugin is to design or add blogs to your page or website.
And it have many features like Display Post Category, Display Post Tag, Display Post Author, Display Post Date, Display Post Comment Count & many more..http://bit.ly/1UswSMs
Bharti Gupta
nice tool thanks.
Bharti Gupta
thanks for the tutorial
Web Designer Dubai
Seems very innovative tool kuler.adobe.com. I will definitely use it
Australian Logo Design
Nathan,
This web design tips are literally awesome. Thumbs up for you
rajat gupta
thanks for the tutorial and tips.
Lee
This was grteat Thanks for the tips. One site that I found to be useful is this http://www.testking.com/techking/infographics/the-psychology-of-color-must-see-for-web-designers-infographic/ it lets you know about the psychology of colours. A must read .
BirdBrain Logic
If you’re thinking about building a new website, make sure you chose wordpress as your CMS. WordPress is easy to use and have multiple themes options. It’s responsive and provides felxible plugins to manage your SEO. See why wordpress is ideal for your next project: http://www.birdbrain.com.au/wordpress-ideal-next-project/
Jaime Holmes
It would certainly be not easy for the owner of an online store to hand over the responsibility of website re-designing to anyone, unless it has complete faith on the credibility of the hired web designer. Doubtlessly, Rotherham web design company has earned the trustworthiness of millions of customers for the quality of work, promptness in taking actions, and delivering the results on time.
Web Design
Great post i really appreciate this post because a student i really want to become a
Web Designer and i’m looking also WordPress tutorial because i was interested with cms wp also.
well anyways i will keep update your site for more free informative post. thanks for this post it helps me a lot.
Mark support
I`m also a big fan of kuler.adobe.com-which outputs themes `to Adobe creative Suite and to the Apple colors app-there`s tab called Mondrianum.Use your tags as a search term, and there are!
Dubai Web Design
Amazing Tool!! Now can make some more attractive themes,
Web Designer Nottingham
Another great tool for creating a colour scheme (stage 2) is Adobe Kuler and even the swatches generated from Dribbble that can be used straight into PS.
marybaum
I’m also a big fan of kuler.adobe.com – which outputs themes to the Adobe Creative Suite and to the Apple Colors app – there’s a tab called Mondrianum. Use your tags as a search term, and there they are!
Nathan B Weller
Mary that is awesome! Such a great tool!