- 1 About The Project
- 2 Wireframes
- 3 Evolution of the Brilliant Business Tools Logo
- 4 The Graphic Design
- 5 Building the Website and Bespoke WordPress Theme
- 6 There is more… but…
About The Project
Created as one of our internal projects (rather than for a client), Brilliant Business Tools is a website that we’ve created especially for business owners. The website is all about providing ideas, advice and tips for helping business owners grow and automate their business.
We’re about to share the process that we’ve used to create this website from scratch, including how the website has been designed. You’ll also discover some features we’ve implemented to maximise visitors’ time on the website.
When we create a new website for a client, we’ll always begin with a wireframe.
Wireframing is a common design technique to help us determine the structure of a website and layout of content early in the development process before the graphic design elements are added.
It’s an effective process to help us extract all of the ideas buzzing around a client’s head. It works because you can see our interpretation of your ideas so that you can correct any misunderstandings. Wireframing is a process that saves significant amounts of time during the graphic design phase.
Wireframes – Brilliant Business Tools Homepage
The homepage is usually the first page that’s wireframed, as it’s normally the most important page for the website.
The wireframe (below) for the Brilliant Business Tools homepage includes:
- A logo and 2 menus in the header area
- 3 different layouts of article content (a row of 2, a row of 3, and a most popular list). These are going to be customisable. You’ll see this later.
- A page footer with an extra menu (usually used for policies and contact page links)
Wireframes – Single Article Page
Since this is a magazine-style website featuring lots of articles, the single article page is a very important design.
In the Brilliant Business Tools article page wireframe, you can see:
- The same header area as on the homepage. This shows that the design is consistent between pages
- A breadcrumb bar which helps internal linking so that visitors can navigate the site article hierarchy
- A table of contents (‘In this article’) so that readers can jump to content within the page easily.
- A banner image, currently used as a call-to-action for the email signup page.
- The article content, including a featured image and summary.
- An article bio at the bottom of the article
- A grid of links (with images) that link to other similar articles.
- A common footer, the same as the homepage.
Evolution of the Brilliant Business Tools Logo
We work with a superb local graphic designer to do the design work for our clients and our own projects. We’ve worked with Chris for many years now and create consistently excellent work.
It’s fascinating to see how a logo evolves during the creative process. Here’s how the Brilliant Business Tools logo evolved.
The Graphic Design
The Graphic Design – Homepage
With an agreed logo and a wireframe, our designer Chris then created these designs for the website which we subsequently used to create the bespoke WordPress theme.
The Graphic Design – Single Article
Building the Website and Bespoke WordPress Theme
Of course, you can see the final product at Brilliant Business Tools.
Armed with the design, we created the Brilliant Business Tools website as a custom WordPress theme. We use a specially-designed base theme that’s extremely fast, and build all of our custom code on top of that. The end result is a WordPress website that loads incredibly quickly and scores highly in Google Page Score tests.
There’s a range of clever code that we’ve added to the website. One of them is the custom page layout tool.
The Custom Page Layout Tool
Whilst tools such as Divi and Elementor are out there, they do have some limitations that can result in a slow-loading website. That’s why we often create a custom page layout tool for a website.
Using a predesigned layout, you simply fill in the text and change a few settings, and this creates a fully-designed section of content on a page.
This is what we’re using on the Brilliant Business Tools homepage. We can add as many different blocks as we wish on this page. Here are some examples.
Page Layout Tool – Introduction Text Block
Simply designed to create a welcome block at the start of the page, this block takes care of all of the fonts and font colours.
Page Layout Tool – Featured Articles and Separator Line
There are two blocks here. A featured articles block and a separator line block. The article block allows us to select up to 3 specific articles to show as featured content on the page.
The code automatically gets the article title, image and category, and shows it in a grid. If there are 3 articles, then the layout is changed so that there are 3 items in a row automatically.
The separator line block allows us to add a dividing line on the page where we feel it’s needed.
Page Layout Tool – Random Category Articles
You’ll recognise the featured articles and separator blocks from above. There’s a new ‘Articles from Category’ block here that shows random articles from any category. Again, all images, titles and categories are automatic, with no code needed from the content editor.
Increasing Page Views
The objective of the Brilliant Business Tools website is to encourage visitors to spend lots of time on the website reading articles.
In addition to the blocks of articles you’ve just seen above, we’ve created some additional blocks that are used around the website.
This is the view of a single article page…
Automatic Table of Contents Widget
This custom code is a ‘WordPress Widget’, automatically scanning the article content for headings and creating this simple Table Of Contents panel. The top-level headings have a little arrow that will allow the reader to expand them for the headings underneath it.
By using this Table of Contents, the reader can jump directly to the content they are most interested in. This reduces frustration, and ideally, increases the amount of content they digest.
Automated Featured Articles
Deceptively simple, this widget has been designed to showcase any featured content underneath the Table of Contents. You simply give the widget a list of articles and it will automatically select articles to show on the page.
If you’re looking at an article that’s in the featured list, it doesn’t make sense to advertise the same article. So the widget will only show articles different to the one that the reader is looking at.
There is more… but…
This should give you a really good overview of how we’ve created a website from scratch, including how we started with our initial wireframe and logo ideas.
There is some more clever code within this theme, and we’d be happy to give you a demo of those features over a zoom call. Just get in touch.