How To Design a Website

Overview

Designing a website can be very hard and time consuming, especially for someone like me, who is not a web designer. So, I try to stick to the basics and leverage a few (not too many) tools others who are more design savvy have built that can provide the already designed pieces. Many of the website builders come with templates that provide the website elements for an entire web page. And, even when the whole page design isn’t appropriate, and you need to switch thigns around, it can be a lot easier to only have to add and rearrange the components instead of trying to build everything out from scratch. Having a whole design team or even just hiring a dedicated website designer is not always an option and might not always be needed, especially for small to medium sized projects.

Approach

Website Design Still Needs Dedicated Focus: Since there are a lot of other areas besides website design that can require a lot of effort when you build your website, it is easy to try and multitask things like web development and web design in parallel. I found this counter productive, at least for me. I feel like I need to activate different parts of my brain to do development than design. I am definitely more inclined in the former area, but whatever design skills I do have appear to be even more impaired when I don’t give the design task enough focus. What could have turned out to be an OK design decision becomes a bad one :) The other challenge trying to mix web design with other tasks, like development, is when you change one, you end up having to re-do the other.

Keep It Simple and of Quality: So, to keep things minimalistic and maintainable, I try to pick quality over quantity and install a good theme along with only the plugins I need. I try to spend more time on this selection in the hope that I then need to spend less effort trying to get the desirable presentation of my site using these assets. We want to keep any customization to a minimum, because that often ends up taking a lot of time, is difficult to iron out, and is prone to bugs, unless you test and re-test a lot.

Compare to Competitors: I often look at other websites to find a few I like that either as a whole look like what I want mine to be, or I choose only sections or specific design elements to mimic. Here are a couple places you can find sites that received awards and may give you some ideas:

1. Best Website Awards
2. Awwwards - Website Awards

Tools for Web Design

1. A good theme that is well rated, maintained, and flexible enough to provide out-of-the-box settings to help me change colors, layouts, fonts, etc. to make everything look like I envisioned. Paying $50 or so for a premium one might save a lot of time later on. I am hesitant in recommending any of the popular website builder themes, like Elementor and Divi, which seemed very resource heavy and generated a lot of extra markup. I haven’t reviewed them in some time, though, so maybe they have improved.
2. A minimal amount of plugins should be included. It’s easy to pick out a bunch of cool looking add-ons, but that might bloat up your site, so I like to have a few that I install by default, including Yoast SEO, Redirector, and ACF Pro, and some forms plugin. Any others I usually hold off with, unless I know in the beginning I’ll need them.
3. A local server, such as Nginx or Apache, to start the work is usually more convenient but not always needed. If you don’t plan on doing much customization, then working directly on a site on a server at a hosting provider might be fine. If you need help selecting an appropriate hosting service, we reviewed several here.
4. Stock images. I usually go to stock.adobe.com, where I can find many for free, but there are a lot of other stock sites that are good. Some can get really expensive, though, especially if they charge on a per image basis.

Step by Step Guide

I’m going to want to develop a WordPress site to look like my OptimalCMS site, which is currently built with Hugo, a static site generator. I’ll focus mainly on the home page and global design, including the header and footer. I won’t spend much time on the inner pages, because they are just article content and shouldn’t require much design work in my case.

1. Two example options:
   Option 1: Install the Customizr theme with the Nimble Builder plugin. I’ve used Customizr with success many years ago and was impressed that they are still keeping it going. Nimble is a drag and drop builder but doesn’t appear to be using Gutenburg blocks. At first this seemed like a turn off, because Gutengurg is native WordPress and has come a long way since its initial roll out, but Nimble seems to handle my biggest gripe with page builders being bulky and throwing a lot of excess markup to your layouts by being pretty clean. Nimble provides a convenient responsive toggler for different screen sizes, so you can not only see how things look in different resolutions but also provide different styling. Option 2: Get the Shop theme on https://generatepress.com/premium/#site-library. GeneratePress charges $47 for a yearly license, and the lifetime is $224, which isn’t a bad deal if you want to make more sites down the line.
2. Create some pages and posts
3. Add a Main Menu with links to your pages and/or posts
4. If you’re going to want a sidebar, add widgets to the Sidebar widget area
5. Customize your site with Customizr setting all the global and page/post parameters. Here are some options I set:
   1. Logo and tagline
   2. Set the Main Menu as the header menu
   3. Wide on home but Right Sidebar on inner pages and posts
   4. Slider on home with transparent header overlapping
6. Create a new page and edit with Nimble Builder. Pre-populate with one of the templates. (There are 2 variations of landing pages available in the free version of the plugin.) Edit and replace any sections as needed.

Tip: When adding pages and sections, Nimble includes some preset color scheme, fonts, and other styles, so you want to make sure you have consistency across your site to match your designated brand colors and other styles.

If you’d like to take a look at how this draft came out, you can check it out at https://wordpress.optimalcms.com/

Here is a screenshot:

Final Thoughts

So, I think there’s a lot of factors that come into play when trying to come up with an optimal approach to design a typical CMS. For me I think each time I create a new site, maybe the bottom line comes down to two biggest factors that affect how closely I can get the result as intended and how quickly I can accomplish that come down to 2 things:

1. how performant I am with the tools I’m using

For this example I worked on #1 was maybe OK but not great. The good was that the theme and Nimble plugin were great in getting the job done. However, there was definitely a decent amount of time and effort I had to invest in getting acquainted with these tools, because Customizr is nothing like what it was when I built a site in it 10 yrs ago or so, and Nimble is a page builder I haven’t used before at all. Keep in mind best practices might be difficult to follow when the product or service we use to get the job done isn’t what we know well. In any case, getting up to speed on these tools wasn’t a bad experience, and they’re pretty easy to use. So, I would not hesitate in using these again, and future projects should go quicker now that I’m more familiar with these. Also, I will probably get the premium versions, which should further improve the potential in what I can do with them.

2. how clear I am on what the result should look like

Not having this clarity in the past has sucked up so much of my time. It may be fun to experiment as you try different features of a theme or plugin and evolve your vision of the final product as you try various approaches, but this can be a never-ending process :) So, for the examples I wrote about here, I instead decided to use an existing site as a model to shoot for. I had a very precise picture of the final result, and I even had all the content, including images.

Reflecting on how these 2 factors affected my past projects has really made me realize how important they are. And, in future projects if I one of these factors might be low (i.e. have to use new tools I know nothing about or not have a defined final design), then maybe try to leverage the other factor. For example, if I’m using new tools that I’m unfamiliar with, try to first rebuild a design that already exists in website form, such as I did with Optimal CMS. And, vice versa, if I need to build out a site where maybe I don’t have the content yet and the design objective is blurry, start with a theme, plugins, and any other tools that have proven to work well in the past.