More and more WordPress theme developers are joining the fray with each passing week. Some produce good, or even work from the get go, while others have more humble beginnings.
Today we cover a few basic design concepts that beginners often seem to have missed, or maybe not fully understood.
Whether you’re about to start, or you’ve already begun making your first WordPress theme, there are a few design concepts you need to get familiar with before you go any further.
Now you might have heard of them before, but the key is to familiarize yourself with them, learn more about each concept.
User Experience
Our first stop, user experience. UX has gone from a concept/aspect of design, to become its own entire field. UX designers specialize in making (or optimizing) designs that are as user-friendly as possible.
The key takeaway from the entire discipline for someone just starting out is to prioritize user experience and to keep in mind the average visitor at all times.
Remember when Myspace let you design your own page, and pretty much none of them looked anything close to good? Yeah, that’s what you get when you usually get when you focus 100% on what looks “cool” to you and disregard what makes it easy to use and appealing to users at large.
Another thing to take into consideration is whether or not to rely heavily on JS on the front ent. Especially now as JS is hailed as the future, and WP devs worldwide are scrambling to ‘learn JS deeply’.
Unnecessary JS based animations can significantly slow down sites and make the UI less intuitive than it used to be. Plus, some people don’t even have allow JS at all, so if a main part of your site is powered by JS, say goodbye to those visitors.
Some people, notably Maciej Cegłowski held a talk about websites being overweight last year, think that mostly text based sites (which is what most themes are made for) should very sparingly use JS and only when it’s necessary.
If you want to learn more about UX a good place to start is Smashing Magazine’s Overview On Usability & User Experience.
White Space
White space (or negative space) is basically a way of referring to empty spaces in a design. For example, the margins in between the main content and the sidebar, or the header and the content on this very site.
While yes, you probably shouldn’t have too much empty space on a site, sometimes adding a bit of space can make a world of difference.
Imagine for example if there was no margin between the sidebar and the main content, how messy would that make the site look?
An important part of what makes a site look appealing to most people on the first view is how organized it looks. Use of white space is invaluable in achieving this.
To dive deeper into white space read:
- Using White Space In Your Designs
- Space Yourself (About use of White Space In Typography)
Visual Hierarchy
More of a principle than a concept, visual hierarchy simply put means strategically placing (and sizing) objects based on how much you want them to stand out.
The most basic example of this is perhaps headline (like the one above). It’s more important for you that a visitor instantly recognizes a headline than the paragraph below it, so on pretty much every single website ever, headlines are easy to spot.
But there’s a lot more to visual hierarchy than just headlines. When building a WordPress theme for the public, it will usually have things like main content, navigation, probably sidebars, maybe calls to action, a lot of different elements to go on one site.
Visual hierarchy is basically the discipline of placing all these elements in the way that makes the most sense.
To learn more about visual hierarchy in web design read:
- Understanding Visual Hierarchy in Web Design
Font Pairing
Font pairing is basically a design concept that goes into which kinds of fonts go well with each other in which situations.
You can use fonts to make a contrast between two parts of the text. You often see it used this way with headers and paragraphs. Substituting good font pairing for overly large headlines can make a real difference on any website.
You see this used quite a lot in the headers of websites as well. The company name is often in one font and the slogan in a different font. Or if the company name is more than one word long, you might see different fonts used for different words.
Read more here:
- The ultimate guide to font pairing
Mobile First
No longer a trend, but considered an absolute necessity, mobile first is a design concept in which you approach any new design with mobile in mind first.
You don’t create an awesome site on desktop and then figure out a way to somehow hack it into… bearable on mobile. You start 100% with the mobile (and now, of course, tablets) a priority, which will make sure you end up with a website that looks good on all screens.
There are two different approaches to mobile first. Some think that you should have a completely separate site for mobile while others think that building a responsive design from the bottom up is enough.
To learn more about the mobile first approach read:
- A hands on guide to mobile first design.
Responsive design basically means a design that changes based on what device is used to look at the website.
For example, your website might have a 3 column design when viewed on a laptop, 2 columns when viewed on a tablet, and just one column when viewed on a phone. But not only that, the text will automatically adapt in size for better readability on the smaller screens, along with things like margins and white space.
To learn more about responsive design, you should read:
- Responsive Web Design Guidelines and Tutorials – Smashing Magazinze
Color Psychology and Color Theory
Color psychology is based on research(funded by huge supermarket chains and advertisers of course) that shows that certain colors evoke certain emotions in most people.
What this means for web design, is that you can use something as simple as colors to make your visitors feel a certain way. This is not only relevant for a landing page theme, it is relevant to any theme.
A business theme probably wants to use colors that make people feel trust, (blue). If you’re creating a non-profit theme, you might want to invoke compassion with pink, or emotion with orange.
To learn more about color psychology read:
- How to Use The Psychology of Color to Increase Website Conversions
Color Theory (How To Create A Compelling Color Scheme)
Now that we’ve been over the psychology of colors, it’s time to get down to business and learn how to make a proper color scheme.
Read:
- An Introduction to Color Theory for Web Designers
- Color Theory For Designers Part 3: Creating Your Own Color Palettes
Final Words
Learning how to work with WordPress alone can be hard enough, trying to become a pro web designer on top of that makes it even harder.
So don’t try to devour it all in one go and wait and wait before you do anything. Get started when you still have it in you. Experiment on your theme as you learn, and see what works and what doesn’t.
And if you reach a point where you realize that your first theme isn’t that great, don’t lose hope. Your first theme is 100% not going to be even close to your best work. If you gradually familiarize yourself with these concepts, and really focus on diving deep into web design and front-end development both, you will no doubt be producing great themes in the future.
Best of luck with your first theme!