WordPress theme design practices


WordPress theme design basics

So far I have published a number of articles and tutorials regarding WordPress and the available options to extend its default functionality. Now it is time to take a loot at the design in terms of layout, colour combinations and element positioning. In the following complete tutorial I will provide the leading WordPress theme design practices.

Website logo and contacts – the right place

WordPress theme Design trends

WordPress theme Design trends

Let’s start with website logo. According to the latest research based on close revision of 50 top websites, the logo is placed on the top left corner of the page. This is because that part of the page is perhaps to most important and the visitors usually look there to find information or remember the website. In 100% of the cases, the logo is there.

Website contacts and their place on your page. This is another important communication channel. Based on the same research, the contacts button or option is on the top right corner. It could be a link to inner page or just pop-up with more details. In over 63% of the cases, that feature is placed exactly there.

Navigation menu – think carefully

Main navigation menu – that element is extremely important for the overall performance of your website. I see that majority of the cases, over 80% of the reviewed websites, the menu is placed at the header. The location is usually between the logo and contacts. The orientation is horizontal with up to 8 clickable options. Drop-down options still exist in some cases, but I personally find them as a bit outdated. Of course this applies for standard blogs or websites. Some large e-commerce websites need strong hierarchy, thus migration to implied menu is almost impossible.

WordPress theme home page – the first impression

Home page – depending on the type of the website, the first page could be based on slide show. There are a number of themes, both free and paid that offer such feature. When it comes to design practices, there are a number of potential problems that should be considered before proceeding with slide show. The main one is, of course the speed. Large images with high quality added to a home page slide would definitely slow down the website, so if you decided to go this way, then you will need a better hosting with come caching. This would give positive effect over the performance and speed of your website.

Search option on your website. Yes, that is important too. Depending on the complexity of your website and the information it provides, you will have to carefully choose the position of your search option. My study shows that usually WordPress designers put it under the menu or on the right, but always on the top. Placing it at the bottom decreases the visibility and usability of the feature. In 12% the search field is placed at the bottom, but I personally do not find it OK.

Social media button – these connections to the social medias are also important part of the layout. Nowadays, a number of visitors use websites such as FaceBook, Twitter and so on in order to share information, so helping in that direction by placing one click share options would give positive results on social media signals.

Be flexible and fresh

Responsive design – in 100% of the websites I reviewed, the design was responsive, meaning fit for all screens and device resolutions. There is absolutely no reason to start website without this feature. The easiest way to come up with solution is to use Bootstrap of some other well known frame work. Building WordPress website with responsive design requires dev skill, thus this may not be the easiest thing to achieve.

WordPress theme colours – choosing colours is another important part of the design. According to my research, the colour combinations usually include up to 4 colours. One base colour for 60-70% of the page, two secondary colours for separators, menus or elements and one for the sections you want to point the visitors attention to. Using flat colours or duotones is matter of personal choice. At the moment both of these are trendy. Looking at the colour wheel might also be helpful. In fact the initial colour research should be based on the basic colour theory and wheel.

The following article would help you pickup the perfect wordpress theme colors:

WordPress theme colors for perfect design

Summary
The leading wordpress theme design practices - development howto
Article Name
The leading wordpress theme design practices - development howto
Description
The leading wordpress theme design practices - learn how to position your logo, contact forms, navigation menu, the layout itself and pick up the best colors.
Author
Publisher Name
wppotion


Do you want to share your opinion?

Your email address will not be published. Required fields are marked *


*

We are not industry specific. We are WordPress specific. We work with everyone to help them find solutions with their troubles.
If you show us the problem you are experiencing, we will show you how to fix it. It is that simple.


Reported WordPress issues

  1. Wordpress User Login in Android App
  2. Long form upon submit form disappear but page stuck at bottom while confirm message at top
  3. Do you know about WordPress “Portfolio”?
  4. when i try to post to my wordpress site using curl in php, it says that cookies are not supported in my browser
  5. Changing post type slug to '/' breaks all pages
  6. Add multiselect Dropdown as an conditional logic field in WP UserFrontendPro
  7. PHP Fatal error: Uncaught Error: Class 'WP_Theme' not found
  8. How to prevent WordPress theme from removing analytics tracking parameters
  9. Does souncloud offer custom made soundcloud plugins for use by third party websites
  10. Hide html if metabox is empty, using custom post types

WordPress problems we are working on

  1. Home URL with query string not being called correctly - Wordpress
  2. Importing a Wordpress site to MAMP Pro 5
  3. WordPress site using the kale theme - site appears off screen and needs scrolling to appear on mobile devices
  4. Need Help in Implementing Responsive Hexagon Grid in WordPress
  5. How can I change my image src tags from absolute to relative urls on Wordpress?
  6. WordPress plugin create trigger not working
  7. Identifying which item was selected from a dynamically created form in WordPress / PHP
  8. Password Protect wp-login.php page nginx
  9. mysql setup with wordpress
  10. Skewed Letter “B” in Bebas Neue Font on Chrome Windows

Resolved issues

  1. What “route” should I take? Wordpress (as headless CMS) or the MERN way?
  2. Wordpress Themeco Theme X Pro Cornerstone custom sorting element accessing parent variables
  3. Remove unwanted Symbol from Pardot Landing Page using Wordpress Page Code
  4. Gravity Form - Want To Duplicate Sign In Sheet Entries So Names Don't Need To Be Re-Entered Daily
  5. JQMIGRATE and Wordpress Elementor: n.easing[this.easing] is not a function. jquery.js?ver=1.12.4:4
  6. My website's input fields color changing to white on iphone, ipad and mac
  7. Category listing required based on select product tags
  8. Hot to extend a class from child theme in wordpress?
  9. Wordpress SSO with OneLogin
  10. Add custom flow on member registration form in Wordpress website
wppotion - powered by persistence and passion