Arek Dvornechcuck
Branding Expert
Check out this website that I've built for one of my recent clients—Lyntics, a company from Germany, and as you can see, is 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.
PS. You can also consume this content in video form—check out my YT video:
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.
So let’s dive into it.
I use Webflow 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 Webflow.
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.
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 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.
If you want to learn more about my logo design process, just check out my article.
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.
With the style guide in hand, we can start writing messaging.
So again, I run the storytelling workshop with my client using Zoom (it takes two hours) 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 (learn more about storytelling here).
Or you can also check out my premium Storytelling Guide.
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.
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 Webflow 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 Webflow 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:
Obviously, you need some kind of a header with the logo, with the menu, and a CTA.
Then, you can have a “Stakes” or a “Value” section with either the stakes listed—the problems your customers face.
Or you can go the positive here and talk about your value proposition—just listing benefits, features and what you do for your customers, how the brand makes their lives better.
Then, you can have a section which I call the “Guide”—Here you can talk more about yourself or your brand, its unique features and benefits and, and the product or service itself.
Next, you can have an explanation paragraph, which is good for SEO—You can tell your brand story here.
After that, we have a plan section, which is basically like a three step process plan to take an action (to buy your products or services).
In this case, we have a (1) Book a demo, (2) Get a quote and (3) Enjoy data clarity.
And of course we gonna need to have some testimonials, some kind of proof that we can deliver on the promise.
We can list logos of companies we worked with in this section.
Finally, we have a footer with the logo repeated again, social media icons and all the links.
What I also like to do is have a section with the tagline and a call-to-action.
Learn more about that in this article, where I break it down step-by-step.
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 Webflow.
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.
Want me to show you how I work in Webflow step by step?—Lave a comment under my YouTube video (perhaps I will do a live stream).
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 (see it live on lyntics.com)
You will also have to do some on-page SEO for your client (titles, meta desc.)
You can add some language versions if necessary—for example: my client needed German lang. version and for that I used Weglot widget.
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.
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 (e.g. Webflow) you can learn from the internet—check out the Webflow University.
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.
If you like this article, then share it with friends and follow me on social media (@ebaqdesign) for more tips on branding, strategy, and design.
if(window.strchfSettings === undefined) window.strchfSettings = {};
window.strchfSettings.stats = {url: "https://ebaqdesign-blog.storychief.io/en/client-website?id=589961895&type=26",title: "How To Build A $10k+ Client Website",id: "ba788839-0359-4dc4-8de7-814923f61c0d"};
(function(d, s, id) {
var js, sjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {window.strchf.update(); return;}
js = d.createElement(s); js.id = id;
js.src = "https://d37oebn0w9ir6a.cloudfront.net/scripts/v0/strchf.js";
js.async = true;
sjs.parentNode.insertBefore(js, sjs);
}(document, 'script', 'storychief-jssdk'))
