Using wireframe techniques to design WordPress theme layout. Here’s how we do it…
A step-by-step approach to planning the layout of your WordPress theme layout.
Once you’ve gotten to grips with how your web content will be organised and therefore know how you expect users to interact with it – the next point on your agenda is to design layout of your WordPress theme.
Wireframing is a technique which allows you as a WordPress theme developer to assign placeholders within your schematic design plans for the overall occupation of your eventual digital real estate.
Our instrument of choice for sketching out our wireframe ideas might surprise you…A4 pad and biro, combined cost – zero, if you have one on your desk anyway!
There are many digital tools prevalent on the internet, which are the popular choice if you read industry blogs, but in-house we’ve never had a genuine need to go beyond our chosen traditional tool.
As with any design or development related processes, the workflow will change from one person to another, but the principals remain.
You might not find our method of WordPress wireframing works for you, but the idea with this article is to lay a foundation for beginners as to how you might approach this task.
Our 10 step wireframing technique for building WordPress themes
Take a glance at our own steps for developing a successful layout for WordPress themes:
WordPress Front-End Basics
The first step is to get familiar with the baseline for your WordPress theme front-end. This is defined by the elementary features of every WordPress install.
You might say, the anatomy of a WordPress theme is what we want to establish here which helps us arrive at a starting point.
The essential parts of every WordPress front-end are the following: Header, Sidebars, Body and Footer.
These elements are exactly that. Primary building blocks.
It is possible within the off-the-shelf admin panel configuration to customise the positioning of these blocks.
To perform further customisation, e.g. text, links, colour changes, you’d need nothing more than a very limited knowledge of basic HTML, PHP, CSS WordPress theme editor and widget controls.
Next, we consider the site map.
To make this, we identify all planned pages for the theme and then give each one it’s due consideration.
As seen in the snapshot of the excel spreadsheet template above, there is an informational purpose and commercial purpose which we plan for every page.
- Informational = what key messages do we want to convey?
- Commercial = where does the content of the page fit in commercial goals?
- what relevant fit does it have with our services or products?
We also declare the relative location of that page’s purpose within the business sales funnel.
When designing a WordPress theme as a generic product i.e. industry/sector neutral product, having an all-round business acumen will enable you to make more effective decisions to suit a broader range of website owners.
The eventual website pages will be grouped according to content theme or topic.
Each grouping or silo’s theme ought to be reinforced by internal linking best practices for optimal user experience and therefore search engine rankings.
We are always looking at the handy work of our peers in the industry and discovering better ways to deliver online content.
We don’t always seek like-for-like industry examples, but rather take close inspection of features which mimic the bespoke purposes of any current project.
We find much of what works in one industry can very easily translate to being used appropriately in the website of a company/organisation from another industry.
Maintaining a steady catalogue of favourite website examples helps you grow your references for future growth in the trade.
Highlighting Desirable Features
Have you ever looked at a web design and thought – “wow, that’s quite impressive!”…?
Grab a pen and a pad and get jotting down a list of favourite web design features which might come in handy for designing your next WordPress theme.
The more this library grows, the more expansive your repertoire becomes.
Having assessed the library of desirable website features (in the step above) for suitability and feasibility to include within your next WordPress theme design, now is the time to draft a shortlist.
The front-end features in your shortlist are all underpinned by specific software functionality.
At this stage we would make brief mention of the type of web coding language needed to succeed with each feature in the list.
This just helps us scope out the further more technical steps of our WordPress theme assembly.
Now web page by web page, according to the site map in previous steps of this process, we begin to draft wireframes on paper detailing our idea for construction.
Cumulatively, the sum of the page sketches would suffice as an architectural blueprint for the theme building process.
As our advanced web development considerations begin to flow, we revise each attempt, seeking for the optimal presentation to give most value to the users.
Once we settle on a final draft wireframe for each WordPress theme template, we collate all sheets into a deck.
Accompanying this deck of final cut wireframes, we keep handy the shortlist of detailed component feature descriptions (with software functions) for further technical direction and source reference.
Once we’re all set, we are ready to delve into the technical steps of the process.