Warning: Declaration of ET_Theme_Builder_Woocommerce_Product_Variable_Placeholder::get_available_variations() should be compatible with WC_Product_Variable::get_available_variations($return = 'array') in /home/customer/www/yonderdesign.co/public_html/wp-content/themes/Divi/includes/builder/frontend-builder/theme-builder/WoocommerceProductVariablePlaceholder.php on line 8
An Inside Look At My Wordpress Web Design Process - Yonder Design Co

Whenever I hop on a discovery call with a potential client, their biggest question is always exactly how the process works. It can be scary not knowing exactly what you’re getting into, which is why today I’m sharing an inside look at my personal WordPress web design process.

You can also take a peak at my brand design process here!

Step 1: Client Homework

The very first thing that happens with any project that I have is that I send my new client off with a little bit of homework. But don’t worry–it’s not like the boring kind of homework you had in school!

Nope, it’s fun homework–including a questionnaire about your business goals and ideas for the design.

Best of all, though? I have you make a secret Pinterest board and fill it up with anything and everything that inspires you. It’s so much fun!

Finally, for the web design process, I have you write up all of the content for your pages and upload any pictures you’d like to use to our shared Google Drive. That way, once I’m ready to start putting the website together there won’t be any delays!

Step 2: Wireframing

After inspiration, the first step of my WordPress web design process is to make a wireframe of each and every page that I’ll be designing.

A wireframe is basically just a way to outline the content of each page–a visual representation of where everything will be going without all of the distracting design bits.

a blog page wireframe - step 2 in the wordpress web design process
The wireframe for the blog page on my client Tracking Taylor’s website.

By doing a wireframe, we can make sure that everything is where it’s supposed to be before we get distracted with things like colors and fonts.

With every step along the way for my web design package, you get 3 revision rounds included. So with wireframing, this means that after I send over the first wireframes, we can play around with where everything goes until you’re happy with it!

Step 3: Tech Setup

After everything is where it should be on the wireframes, the next thing to do is to set up all of the tech.

If your website isn’t set up yet, or if it’s on a web platform other than WordPress, then I’ll do everything needed in order to get it there, including setting up WordPress on your domain and uploading the Divi theme, which is what I use to design.

If you’re already set up on WordPress, then I’ll just upload the Divi theme and all of the other plugins that I use before getting to work on the design!

If you already have a site that’s live, there’s no need to worry about any downtime as well, as I’ll set up a staging environment using WP Stagecoach so that your old site will remain live while I’m designing your new one.

Step 4: Homepage Design

a macbook mockup with the tracking taylor homepage on it

The next step of the process after everything is set up is probably the most exciting part, because it means we actually get to start designing things!

The very first thing that I do is take the wireframe for the homepage, along with the colors, fonts, etc. from your brand and put together a stunning homepage design.

Once the homepage is designed, I’ll send it over to you and we’ll work to make any needed tweaks until it’s perfect!

Step 5: Design the Rest of the Webpages

different pages on the tracking taylor website

With the homepage designed, I’ll use that as the basis of the design for all of the other pages, meaning that they’ll all flow perfectly and look like they belong together.

Once the first draft of all of the pages is done, I’ll send them over to you to have a look at again. Hopefully, you’ll absolutely fall in love with the site as is, but if there are a few tweaks that need done, I’ll get to work on those right away.

Step 6: Training Call + Launch!

Once your new website is absolutely perfect, it’s time to get it launched! I’ll click a few buttons and your brand new website will be live!

We’ll also schedule in a little training call where I’ll share my screen with you and take you through the site, showing you everything you need to know about how to keep it updated and working perfectly.

And that’s it for my web design process! If you have any questions, don’t be afraid to contact me. I’d love to hop on a (totally free!) discovery call to talk more about how I can help you acheive your website dreams!

Pin it for later!

Have you ever wondered what a WordPress web designer does? Read this post to find out about the whole process, from layout to final product.  This post details everything that I do with my clients to build and design an amazing WordPress website & blog! #webdesign #wordpress #creativeentrepreneur


Not sure where to start when it comes to branding your blog? Sign up today to get a free branding checklist sent straight to your inbox!

Success! Check your inbox for your freebie :)

Pin It on Pinterest

Share This