I’ve built for one of my recent clients—ChargeBack, a company from United States, and it’s a totally custom website.

Here’s the website before and after:

 

As you can see, before it was a big mess, and now we have a professionally designed business website.

In this article, we’re gonna talk about things like updating the identity, writing messaging, creating wire frames, designing the website itself, and then preparing it for launch.

Table of Contents:

1. Updating the identity
2. Writing messaging
3. Creating wireframes
4. Designing new website
5. Preparing for launch

So let’s dive into it.

What do you need to build a $4k+ website?

I use WordPress & Elementor for web design and web development, but before that, I use Relume to create wire-frames, and the first step is to actually run a storytelling workshop.

For that, I use my Storytelling framework—I have a Zoom call with my client during which I’m able to capture their ideas.

Then based on that, I write messaging for the website: the actual headlines, paragraphs, bullet points etc.

 

Again, we go from Storytelling, to wire-framing using Relume, to designing using  WordPress & Elementor .

If you wanna charge premium prices for your web design work, of course you have to have good design skills—You must be a good designer.

But you also need to have an established process—You need to have an efficient way of working with your clients.

So in this article, I’ll show you how to do just that.

1. Updating the identity

If your client comes to you for a new website, you most likely need to update the brand identity as well.

As you can see in the image above, it’s a small change, but it makes a big difference—We retained the original mark from the old logo, but we improved it a lot.

 

We improved its shape, colors and now we have this iconic gradient and we have a bolder, less spaced out typeface—so it makes a bigger impact as a logo.

As you can see, we’re using that new gradient consistently throughout different applications together with the custom font, colors etc.

Ultimately, all you need to have is a style guide because you will need the logo files and other visual assets.

You will also need some colors, fonts and perhaps some other custom graphics, like custom icons, illustrations etc.

2. Writing messaging

With the style guide in hand, we can start writing messaging.

So again, I run the storytelling workshop with my client using Zoom and then based on that, we capture some ideas.

Next, I combine it with my own research and I supplement information from other internal presentations, from the old website etc.

Then, based on that, I am able to write the actual copy for the new website—and for that I use Quip.

Here’s an overview of my six step framework—basically, you just go through these exercises with your client and that way you’re able to capture ideas and organize them in a way that you can use later on in your web design process.

Basically, just remember that story is like a filter and helps you create simple and relevant messages.

At the end of the day, all we need to do is to run a Zoom session with our client and capture those ideas.

Then, based on that we create a Word or Quip document with the actual messaging for the new website.

3. Creating wireframes

Once we have the copy for the new website (or for the homepage at least), with that we can start creating wireframes!

 

We just look at the Word or Quip document with our copy, and then we go to Relume Library and we find the right sections that we need and we just copy paste them over to Elementor and fill them out with the content that we wrote.

Basically, I just go to relume.library.io and find the right section that I need—then I copy them over to my WordPress project.

Next, I go and take my content from the Quip document that I prepared, and I paste-in the headlines, paragraphs, bullet-points etc.

Here’s an example of a homepage structure:

4. Designing new website

Once you have the wireframes ready (with the right content) and this is approved by your client, then all you need to do is just apply the style guide onto that un-styled wireframe.

 

Since you’re using Relume Library, you don’t have to create classes or think about responsiveness—it’s already done for you!

That’s how you get your website designed fast!

All you need to do, is to basically translate that style guide in PDF into a style guide on WordPress.

For example: we upload the logo of course, we change the font globally, we also add color swatches, and stuff like that.

This is how you magically go from an un-styled wireframe to a brand new custom website.

5. Delivering client website

Before you actually deliver the website to your client, you can do a few more things.

For example: I like to animate elements on scroll or add some custom Java script for special effects/interactions.

I’ve included a custom JS for the header and the banner in the footer—this JS code is responsible for the moving gradient in the background.

You will also have to do some on-page SEO for your client (titles, meta desc.)

You can add some language versions if necessary.

You’ll also have to minimize CSS and Java Script before you publish the website officially.

And of course, you will want to add a custom domain.

Conclusions

If you go from (1) storytelling to (2) wireframing to (3) designing, and not from designing with some dummy text like “Lorem Ipsum”, then back to storytelling and tripping over wire framing (avoid stupid revisions!).

If you follow my process, then designing websites is just like a walk in the park.

I guarantee that you will become a successful web designer if you just master this process and develop some good design skills.

And everything you need to learn technical skills.

If you’re a business owner who’s looking for a custom website, just schedule a call with me and let’s discuss your project.