Getting Started on a New Web Design
When I am working on a new website, it sometimes can be hard to know how to get started on the design. I start by looking at competitor websites and I ask my clients to send me links to websites that they like. While not everything is done exactly in the order below, the process I describe could help you get started more quickly.
Let’s say that we have a client that is the owner of a small pet store. These are the steps I would take before I even start coding the website.
1. Research other pet store websites
Since my client is a local pet store, I want to look at other smallish pet stores for ideas. I don’t want to look at the mega pet stores, because those are likely to be more focused on e-commerce. In searching for ideas, I want to look locally first to find websites that are similar. Keep in mind that I am not going to copy of their ideas, but I am going to look for ideas that help me to think of something cool to do with my website.
Here are some websites I found:
https://www.barkifyouredirty.pet/
https://www.petcityfortcollins.com/
Whenever I make a new website, I strive to make my website better than their competitors.
2. Obtain or Make the Logo
The logo is going to drive the color and font choices I use in the website. You don’t need to use the same font in the logo as you use in the rest of the website, but the fonts should look nice together. In some cases the client has a logo. In other cases, they need a logo. I am not a logo designer, but I can put together a usable logo for their website. I have a video on how to make a simple logo:
Some of my clients have used my simple logos for years rather than invest in a professionally designed logo. Even if the client provides a logo, it is highly likely that the logo may need some adjustments to work for web. Square logos are awkward in most website headers.
3. Create a style guide
Now that I have a logo I can decide on fonts and an accent color for the website. It is a good idea to document these decisions in a style guide so that you continue to make consistent choices. Choose colors and fonts that align with the logo. Sometime a contrasting font choice works best, since it can be hard to match the font in a logo.
Keep in mind that in most cases colors look best as an accent color. Working with a white background is stylish and easier to manage. You also need to choose what color for the regular text of the website. I often use #333333, a very dark gray for text.
Choose fonts for the website from Google fonts. Limit your selections to only two fonts. Make sure you choose fonts that are easy to read, and for the paragraph text you want to choose a very simple font.
Here is a template for a style guide I have on Google Docs. Free free to copy it to make your own:
Simple Style Guide by Susan Metoxen
You can also find more detailed Style Guides. Here is a great one by Elementor. Elementor is the Number 1 page builder for WordPress:
One more benefit of Style Guides is that it can be something that you negotiate with a client before beginning work on a website. Agreeing to fonts and colors before starting may improve communication with your client.
4. Working on a layout
If you are new to coding it can be good to decide on a layout before you start coding a website. Pencil and paper would be a great way to start. If you prefer to work on a computer, I would consider using a slideshow program to work on the layout, like PowerPoint, Mac Pages, or Google Slides.
As you design, it can be best to start with how you want the smartphone to look, since over half of your websites views will probably be on smartphones. Even so, you also want to create a layout that will look great on desktop. As you draw the layout, you can assume that the columns you create will stack on mobile, since that is the standard practice.
5. Coding the layout
If you took the step of creating a style guide, a great way to start is to write the CSS that corresponds to your style guide. That way all the content you add to the website will look great from the start. If you are working in WordPress you will find the settings in Customize.
After that, next I would install the logo at the top of the page, and then work on the navigation. If I know what the website pages will be, I go ahead and put those into the navigation.
Before I start putting the main section together, I would work on the footer. The footer appears on every page and is key to the overall design of the website.
For the main sections, in WordPress I would use either the Beaver Builder Page Builder or, for simpler pages, the Block Editor.
If you are working with Bootstrap and need a refresher, see the slideshow for Module 11.