The second step in developing a WordPress website is Design. Fortunately WordPress, being an amazing content management system, takes care of handling content database and other parts of the website under the hood, so you’re not designing from the ground up. Instead, you’re designing on top of an already powerful platform. Fortunately, this platform doesn’t place heavy restrictions on the design.

There are several steps to designing the website. Be sure to include the client in every step – getting their feedback and explaining design choices. This will help keep the project on time and within budget, and will reduce surprises while ensuring you’re creating the website the client needs.

Sitemap

A sitemap is a diagram of the website. It will show what the pages are and how they’re connected. It will show the navigation structure and the categories for the content.

One of my favorite tools for building sitemaps is a mindmap tool called Coggle.

Wireframe

A wireframe is a series of diagrams that show the details of each page. It shows the page’s navigation, the content such as text and images and how they relate to each other, and the interactive portions such as calls to action and links. (The image above shows Divi Wireframe Kit Vol. 3)

Many designers use tools such as Photoshop, Gimp, etc. I prefer to create wireframes directly within the page itself using Divi. Other building themes and page-building plugins are great too.

Content Plan

The wireframe shows where the content will go within the page’s design. The content plan will show what the content is, where it comes from, will it include snippets that link to blog posts, will those snippets include images and if so what size, what is the character limit of the snippet and posts’ title, will it include meta information, how will the user interact with the snippet, what categories will be included, etc.

The types of content, writing style, length, types of images, video, etc., should also be included within the content plan.

The Look of the Site

The look of the site is what we usually think of when we talk about design. Once the client has approved the sitemap and wireframe design, the visual designers can add visual elements on top of the wireframes. This includes choosing colors, fonts, and adding graphics.

Be sure to test the site on multiple screen sizes and devices, and in multiple web browsers.

UX/UI Testing

Once the design is in place it’s a good idea to test the site with a small group, taking their feedback and making improvements. Some prefer to test multiple designs from the same wireframes in order to get the best design possible. This will help ensure that you provide the best design to the client and you’ll also be able to provide feedback from the test group if needed.

Let’s Discuss

• What are your favorite sitemap tools?
• What are your favorite wireframe tools?
• Do you use a process different from this?

Thanks for reading. Please subscribe if you haven’t already.

Featured image by Galymzhan Abdugalimov