The idea of the post jumped into my mind after having watched a video by Drew Strojny on WordPress.tv. The video is called “How not to design a default theme”. So, I’ve decided that it’s a good idea to collect all his tips into one article and add what I think about it as a newbie in designing WordPress themes. In other words this article should be interesting for those of you who’s going to start seriously designing for WordPress. Sketch and Share Ideas from the Gitgo
It’s always a good idea to show your sketches to fellow designers or your clients so that you can get to know what they think about your ideas in terms of the design you’re going to create. When it comes to fellow web designers you want their opinions because they may notice and suggest some solutions for your design that you did not happen to think about. Like I said above, you also need to know what your client thinks about your sketch and ideas so that you can see if they like and approve it because that’s exactly who pays you cash at the end of the day. Also, it prevents you from the situation when your customer does not like your design and you are supposed to start over.
Don’t reinvent the wheel
In terms of designing a WordPress theme, it means that you can just take a default WordPress theme (such as 2011) and just build on it. No need to create a design from scratch because there’s no actual reason for that. Well, perhaps except for your ego. If you develop your own theme based on an existing one, you save a whole lot of time both for yourself and your customer. Plus building on an existing theme does not mean that you’re constrained a great deal or something along those lines. You still can create the design you want but faster. So, it’s a total win-win.
A company site as well
Make sure to inform your clients that they can set a specific page to be displayed as their site’s front page (home page) and it’s not cut in stone that a site build with WordPress should definitely have blog posts on the home page. It’ll help them to understand the options that they have and they’ll be thankful that you showed the trick to them. And it goes without saying that customers always like when you teach them something that they can use for their own benefits.
Use grids while creating your designs
Using grids speeds up the process of creating a new design and it ensures that you follow the industry standards. In layman’s terms, it just helps you to design a website where everything looks as though it’s been there forever. Other than that it’ll help you look really professional. Don’t overuse colors, fonts or textures As a rule of thumb, professional designers tend to use up to 3-4 colors and 2-3 fonts in their designs. Also, you need to leave a lot of blank space because it allows to focus on the things that you place in your site design. In case you clutter up, the user will just not see the main option of your site. And that will not make your customer happy at all because he will leave money on the table as the customer that left the site based on your design could have bought a product or signed up for some service.
Integrate with the admin panel
Sure thing it can be rather time consuming and not exactly efficient to build support for admin customization features but you need to make sure that you take care of at least the main of them such as the ability to edit logo, header and a slider right within the admin panel. Otherwise the customer will have to mess with code and that’s always a bad idea. Think mobile and responsive There is a good reason that responsive design is all the rage now. It allows you to ensure that your site will work for virtually any device out there. Don’t use hard pixel values that allow making your design look great on desktops only but rather strive for using percentage values that help your site interact with the device it is being viewed on. Sticking to the idea you’ll not have to design a mobile theme from scratch but just make sure that the existing one works great on mobile devices.
In order to keep your site’s design consistent and your proportions proper, you may want to use rems that were introduced in CSS3. With the introduction of rems, it seems that we don’t have the issue with using hard pixel values and ems in IE any more. Rems are supported by all the major browsers. And the most fascinating thing is that it’s even supported by IE9. As a matter of fact, the last major browser to start supporting it was Opera.
Use CSS wherever possible
The new CSS3 features allow you to use just CSS instead of images in way more cases than before. It helps to speed up your site’s loading speed and general usability. So, if you can use CSS to, say, create a gradient, use it. Strive to use as few images as possible. Doing so will prevent you from having problems in terms of Retina display support (dpi related issues), which you would definitely have if you used plain images.
Use web fonts and strive for accessibility
If possible use standard fonts in your design because the fonts that you may have decided to use may just not be installed on the user’s computer. And if it’s a really funky font, most likely it’ll be the case. In case you really need to use some classy font that adds value to your site design, make sure to use web fonts or at least cufon (the last one is getting obsolete though).
While designing your site, you need to constantly pay attention to all the feedback that you receive from your fellow designers and clients. I do agree that you need to take them with a grain of salt at all times but don’t apply the “only-over-my-dead-body” approach because what they say can be something that you really need to take into account.
Putting the tips and tricks outlined above to practice allows you to be as professional and efficient as possible. You’ll be able to streamline your web designing routine (creating and optimizing your website design) and invest your time into some more constructive activities such as generating ideas for new designs or just spending quality time with your family.