Joseph Ramirez
7 min readDec 18, 2020

--

Building a WordPress website for your business is not as easy as the task you think it is, right!? And to lead with that, it’s discouraging when a commercial claims that you can build one within an hour. You quickly start to think, “what is wrong with me?”

You no longer have to fear because I will go over the same process that I follow when I build websites for clients who own local restaurants or use their websites to showcase their success to a global audience. It is effortless to follow and will take out the overwhelming feeling because this template breaks everything into easy to consume chunks.

Broken down into four stages. There is:

  • Concept or Idea stage
  • Design and features
  • Development
  • Testing stage

Concept or Idea phase

In this phase, you want to accomplish the following,

What is your business?

This question is fundamental but essential to keep in mind when you go about designing your website.

Do you have a niche in a specific industry?

Niches are essential to have, especially if the industry your in is highly competitive. But keep in mind, if you don’t have a niche because you have not found one yet, that is ok. As you start to grow your business and gain more insight, you can always come back and add more to your website. Just keep going.

What pages are you going to need, and why will you need them?

Wasting time on pages, you may not need is not the best way to spend your time. Typically, every website will have the homepage, about page, services page, portfolio page, and contact page. Simple is better; if you like the one-page style website versus a multi-page style, do it.

Content for each page/section?

After you figure out what pages you need, it’s time to create each of these pages’ content. Each page has a purpose so create content for that purpose. You might feel pressured to have some long-form content (around 1500 words), but this is unnecessary. Your only goal for content should be to the point, make it easy to skim through, and make it sound as you are speaking to them.

What images are you going to need?

Keep in mind that you will not have all the images you will use, but it is still better to gather the photos because once you start to build your website, going back and forth between your photos, stock photos, and your web page is going to get exhausting. If you are looking for free stock photos, Unsplash and Pexels are some of the best places to start. If you have a Canva account, that is the right place, but some of the stock photos they allow you to use are from Unsplash.

What are the color palette, font & heading style, and graphics look like?

It is a great idea to know your style guide before starting. As I said before, coming up with these things at the moment will make you overwhelmed. What you should have is

  • Font style
  • paragraph:
  • H1-H6: You can use the same font for H1-H6 if you want to keep it simple. Some choose to use 1–2 different font styles to add character, but it is unnecessary. It would be best if you had a different font style between the P and H tags.
  • Primary color: use coolors.co if you need help deciding on colors. I use this tool all the time when I am building a style guide.
  • secondary color
  • accent color

Have these figured out will save you a lot of time and fewer headaches while building your website.

Design and features

Here comes the fun part! I know your thinking, “I have no idea how to design a website… I don’t have a creative bone in my body”.

Luckily enough, other web designers have already figured out how to design your website. No really.

With the first phase done. Here is the next thing that you do. Grab a few sheets of paper and label each page with the pages you need.

Now go to google and copy your competitors.

When I’m in this phase and working on a client’s site getting inspiration, I usually pick 3–4 websites. Most of the time, they are competitors, but other times, it may be a website from a different industry.

but the questions that I keep in mind are:
What stands out?

  • What do I like about the page layout?
  • Do I like the structure of the font and photos?
  • Do I like the arrangement of the sections on the page?
  • Are the headlines too big, or is the font too small?
  • Do I like the header or the footer?

Answer these questions in your head as you look through the different pages that you need for yourself. Somebody designed these webpages for a specific reason. Certain elements capture your attention for the cause of relaying a message. And when you are on a tight budget and don’t have enough funds to hire a designer, dissecting what your competitor’s web design agency has done will help you figure out what may work and what does not.

When your done examining, start to draw a mockup of what you would like your pages to look like. Rule of thumb, support pages will not need as much design effort as the homepage or sales pages. Let me remind you not to focus on any animation at the moment. All we are doing is building the skeleton of your web page.

Development

Here we go.

I often hear a very common question: “What is a good theme for me to use?”

Answers vary depending on your industry, and different site builders such as Squarespace, Wix, etc., will have different themes that come with their builders.

But I work with WordPress.

The greatest thing about WordPress now is that Page builders such as Elementor (my go-to page builder), DIVI, WP Bakery, etc., are now using their own designated themes. WordPress has become much more user-friendly because you no longer have to buy a theme and then buy a page builder, required plugins, and so on.

I recommend that you head this direction because the page builder designated theme will have different layouts tailored to your industry.

Whether you decide to pick a theme template or you decide to create your webpage from scratch, You now have your mockups to help guide you to the design that you want, or if the template you choose does not have a section you need, then look back and create the section that you need. Whatever the case, you will be thankful that you have something to reference versus doing design work on the spur of the moment.

If you decide to use your mockup and build from scratch, the process I tend to follow is

  • Use global settings for the elements in the style guide created in the first phase of your project.
  • Build the layout (place the content you need in the designated sections first. e.g., Images, text, background images)
  • Space and size everything out (use padding, margins, and whitespace to create space between the elements)
  • add the animation to the elements that need it, add animation to specific elements used throughout the website, and use global settings.
  • then add the functions (plugin short-codes, Button links, etc.)

Plugins

The other thing I would like to explain briefly is about plugins.

Another great thing about WordPress is that it allows you to accomplish what you plan to do with your website. Plugins are what provide the functions need for you to achieve this. However, You should always be cautious about what plugins you use.

Over the years, and countless plugins tried, I have come up with a list of plugins that I tend to favor. But whenever I need to look for a plugin that I have never used but needed the function, there are two things that I look at.

  • Stars and how many reviews
  • The last time the plugin developers updated the code.
  • Look at the plugin’s code.

I am assuming that you may not know anything about code, and that is fine because stars and reviews and plugin updates are essential.

To use as an example, you may see a plugin with five stars and 40 reviews and compare it to another plugin with 4.5 stars and 1500 reviews. I would usually favor the second choice because they have built a reputation within the WordPress community, but as I said, that is what I would do. There have been reputable plugins that have dropped the ball due to security issues, but the developers of those plugins have been able to release updates to fix them as fast as possible.

Testing

With the design and development phases finished. Now you can do the testing. Run through each page, test:

  • every button
  • link
  • function to make sure you have everything working
  • send test emails
  • sign up for your newsletter opt-in
  • test the tabs on your navigation bar
  • Click on your social media links

Take time during this phase. Trust me, there have been plenty of times projects were coming to a launch, and something goes wrong, whether it was a lead generation form not connecting to a CRM, payment gateways not connected to the live accounts, and crashed plugins, etc. To be in stressful situations before the big launch is something you do not want to be in, so take your time and comb through everything.

Conclusion

In closing, following this process of concept, design, development, and testing will help build a website on whatever platform you decide to make your website. Beginning the journey to build an online presence should not have to be an overwhelming experience, especially if you are on a tight budget but want a design that will make you proud.

--

--

Joseph Ramirez

Independently Contracted WordPress developer and coder from Albuquerque, NM.