Web Design Process: From Discovery to Launch

In this article I’m gonna show you how to design a company website, the strategic way.

Every website needs to attract visitors and help people understand the product or service and the company behind it.

This can be done through using the right visuals, content, and interactions.

That means every element of your site needs to be designed strategically.

Everything from how the website looks: the colors and fonts you’re using, but also the content itself: the headlines and paragraphs.

The design of a website is extremely important, but what actually sells is the words.

That's why apart from good design, you'll also need a clear strategy on what content you should create and how to structure it.

Web Design Process:

1. Discovery—Run a discovery workshop.
2. ‍Wireframes—Sketch the homepage.
3. Messaging—Write headlines & paragraphs.
4. Design—Create high-fidelity designs.
5. Development—Code the website (CMS).
6. ‍Testing—Check for performance issues.
7. ‍Launch—Go live & schedule maintenance.

So in this article, I will teach you how to do just that—I will walk you through my proven web design process.

BTW. Understanding the full scope of branding is crucial for a cohesive web design. Learn more about the entire journey in my branding process.

You can also watch this tutorial on my YouTube channel

Introduction

I will show you the approach through ELEVATE, a project for a Shopify growth partner focused on continuous testing, learning, and optimization.

I'll cover every stage of my web design process—everything from the initial discovery session, to creating a wireframe and writing the messaging, to the design and the development phase of course.

That way you can get an overview of how web designers work—if you’re a business owner or it can help you optimize your process—if you’re a designer.

I know that you want to see the result—so here’s the wireframe and the final design of the new website (live at elevateab.com).

Before I talk about the steps I took that led me to that final design, It’s important to remind ourselves what makes a great website in the first place.

What makes a website great?

I probably don't have to explain why having a great website is important to any business—we all know that, but what makes a great website?

Every designer will go on telling you how design is extremely important and every copywriter will argue that copy is more important.

You guessed that right: the visual and verbal identity—they're both equally important and they need to work together.

A great website is not just about awesome design, animations and interactions, because what actually sells is the words—how you tell your brand story.

We can judge effectiveness of a website by the 3 criteria:

1. Is your website clear to understand?
2. Does is look good?
3. Does it call for an action?

Now, let’s explain on each of those principles shortly.

1. Clear

Your website need to be clear and easy to understand.

A lot of entrepreneurs make this common mistake of thinking that they have to absolutely include everything on their website.

That's why they often end up making their website super busy which confuses people.

That's why you shouldn't go in length talking about how great your company is.

You should rather be very selective with the words you use and focus more on your customers or clients, and less on yourself.

And for this I run storytelling workshops with my clients to help me understand the business and craft key pieces of messaging.

2. On brand

The second very important thing when it comes to creating an effective website is of course good design—does your website look presentable?

Be consistent with your branding.

Before you start designing your website, you should have a solid logo and identity to work with and preferably a style guide as well.

I’d urge you to pay attention to consistency with the rest of your marketing materials, so that you can create that unified brand image across the board.

3. Actionable

The third very important thing to consider when creating your website is to make sure it’s designed with a clear objective in mind.

Your website must be easy to navigate and it must include calls to action (CTA's).

Your website is a marketing tool.

Whether you sell products or offer services, you want people to take some kind of an action.

You want your visitors to either simply buy a product, or schedule a call, or request a quote, or donate to a charity, or attend an event etc.

While it might seem obvious to you, I can see often see people making the same mistake of assuming that clients or customers will "find their way" if they wanted to engage.

In reality it doesn't work like that—you need to make it easy for them to take action.

Your website must be optimized so it can become your selling machine.

However, it doesn’t have to come across as salesy or pushy, not at all—And I will teach you how to do just that.

With those 3 basic web design rules in mind, let’s start with the first step in my process which is discovery.

1. Discovery

ELEVATE started with the existing website, a client call, and a clear commercial problem to solve.

Understand the business and define key elements of brand storytelling.

The client shared the old site, so I first examined what it said, what it omitted, and where a new visitor could lose the thread.

I then reviewed competitors and similar Shopify testing and optimization tools in the marketplace.

I looked for repeated promises, common proof points, familiar layouts, and opportunities to position ELEVATE more clearly.

The client call supplied the practical context that a competitor scan alone cannot reveal.

It explained the offer, priorities, audience, objections, and how the team wanted to be understood.

I combined that evidence into a working positioning direction before writing a single page.

For other clients, I run a deeper storytelling workshop to extract the same inputs together.

For ELEVATE, the research and client conversation gave us the right starting material.

AI helped me organize research notes, compare competitor language, and surface patterns worth discussing.

It did not replace the client’s knowledge or make strategic decisions on its own.

The point of discovery is to arrive at a focused message, a credible promise, and a clear next step.

Those decisions make everything that follows faster and more consistent.

2. Wireframes

Wireframing turns the positioning into a practical page structure.

Decide on the layout and what sections to create.

You can start with a fast sketch showing where the text, images, background, proof, and calls to action will go.

You can also build the structure from scratch in any design tool.

I prefer the Relume Library because it gives me a large, reusable starting point.

The library includes different heroes, feature layouts, testimonials, slide decks, long-form content blocks, navigation patterns, and footers.

A testimonial can be a single statement, a three-column grid, or another arrangement that fits the page and proof available.

A feature section can use short cards, longer explanations, logos, screenshots, or a combination of those elements.

That range means I can select a structure that already suits the message instead of inventing every layout from zero.

I still change, simplify, combine, or customize components when the project requires it.

The goal is not to copy a library layout unchanged.

The goal is to make a clear content hierarchy before styling begins.

Relume also provides a matching Figma kit, which lets me use the same component logic in the visual design.

For ELEVATE, I selected the most useful layouts, arranged the content, and made sure every section had a job.

That job might be explaining the offer, showing proof, resolving doubt, or moving someone toward contact.

Once the structure works in low fidelity, I can refine the wording and visual treatment without losing the logic of the page.

3. Messaging

Messaging turns the research and wireframe into a conversation that makes sense to the right visitor.

Write key copy for each section.

I use the storytelling principles behind my guide to define the audience, problem, value, proof, and next step.

For ELEVATE, the emphasis was continuous testing, learning, and optimization for Shopify teams.

I mapped competitor claims before deciding what ELEVATE should say differently.

AI helped generate options for positioning, headlines, subheads, body copy, and calls to action.

It also made it faster to test a shorter, clearer, more direct, or more specific version of an idea.

The final copy was selected and edited for accuracy, brand voice, and commercial usefulness.

AI is effective for iteration, but it should not invent claims or decide the strategy.

Every headline still needs to earn its place in the page hierarchy.

Every paragraph still needs to reduce uncertainty or answer a real visitor question.

Once the message works, design can amplify it instead of disguising a weak offer.

4. Design

Visual design applies the brand to the approved structure and message.

Design key sections according to the brand guidelines.

I take the selected Relume component into Figma and design it for the actual brand.

That means defining the type scale, headings, body copy, color palette, spacing, imagery, logos, and design tokens.

The component structure is reusable, but the visual expression must feel specific to the company behind it.

For ELEVATE, I designed a new abstract mark, refined the color palette around green and blue, and used a controlled moving gradient instead of the older, overly colorful treatment.

The premium headline typeface is Neue Machina by Pangram Pangram, which also informs the logo.

I designed the card system, glass-like icons, footer, animated logo treatment, and key visual rules before extending the system across pages.

The client approved the homepage first, then I designed five pages: home, pricing, feature, success stories, and a success-story article.

For ELEVATE, I applied the brand direction to the chosen page layouts and made the high-value sections pixel-accurate in Figma.

Photos, logos, screenshots, and other assets are selected as part of the composition rather than added as an afterthought.

The result is a real design system that can be inspected, adjusted, and handed to development with clear intent.

5. Development

Development turns the approved Figma design into a working React and Next.js website.

Build, test, and prepare the website for launch.

Relume provides matching React code for its component library, which gives the build a reliable structural foundation.

I can take a chosen component, such as a hero, and provide its actual React code instead of asking an agent to invent a layout from a blank prompt.

That matters because AI coding agents can otherwise produce patchwork components that drift from the intended system.

For ELEVATE, I use the approved Figma component and the matching unstyled React component as the shared reference.

I connect the design context through Figma MCP and give ChatGPT Codex the component code, visual reference, assets, and explicit project rules.

The rules say to follow the existing React structure and avoid inventing custom components unless a custom solution is actually requested.

Codex then applies the Figma styling, headings, paragraphs, color tokens, images, logos, and responsive behavior to that structure.

I review the result, make design decisions, and iterate until the implementation matches the Figma file.

This workflow combines reusable components, clear design intent, and AI-assisted development without giving up control of the final result.

How I set up Codex for a website build

1. Give Codex the approved Figma page through MCP.
2. Provide the matching Relume React component code, one section at a time.
3. Use project rules in AGENTS.md so the agent follows existing components, design tokens, shared styles, and naming conventions.
4. Only ask for a custom component when the existing library does not solve the problem.
5. Review the local build against Figma, then refine it until it is accurate.

Relume MCP can now make component discovery even faster, but it was not available when I built ELEVATE, so I supplied the relevant React component code directly.

Once the local website is approved, I push the project to GitHub and connect it to Vercel for automatic deployment.

That keeps the project scalable, because new pages can reuse the same rules, components, and design system rather than starting over.

Tools for web development:

• Webflow
• Framer
• Custom build (React or Next.js)

Testing and launch

Before launch, I test the real experience, not just the polished static design.

I check responsive layouts, navigation, links, forms, loading behavior, keyboard focus, touch targets, metadata, image performance, and console errors.

A website can look finished in a mockup while still failing when a user submits a form, visits on a phone, or opens a long piece of real content.

I also verify that the site is connected to the tools the business needs, such as analytics, forms, and any required integrations.

The launch should be planned as a controlled handoff, with the official domain, tracking, redirects, and communication ready.

After launch, the work continues through analytics, customer questions, and prioritised iterations.

That ongoing feedback loop is particularly relevant to ELEVATE, because testing and learning are central to the value it offers Shopify teams.

Conclusions

Great websites do not happen by accident—they are the result of strategic thinking, clear messaging and design excellence.

Following a proven web design process will allow you to stay focused and use your creativity more efficiently.

How long does it take to design a website?—People always ask this question, but the truth is that there are many variables.

It depends on the designer and how fast he or she can work and how accurate they can be, what's the scope of the project, how responsive the client is, how many revisions you go through etc.

However, when it comes to creating a company website it is important to NOT skip the initial steps of preparation.

Just see what my client said:

The problem is that most entrepreneurs and creatives alike often tend to skip the initial steps and they jump straight into design.

They often assume that some dummy text and stock images will do for now and they can replace that later while now focusing on the website design.

However, it doesn’t work like that because most of what "website design" is—it's actually about laying out the content (text and graphics) on a page.

Therefore the content will very much influence your design choices, so that you must figure that out first.

Another very important thing to remember is visual consistency with your overall branding.

If you don't have a solid brand identity—they even the best looking website won't hold up as a whole brand.

That's why creating a website should never be the first step in the process of branding your business.

Prior to creating your website, first get a well-designed logo and identity and preferably some sort of a style guide as well.

A solid style guide will ensure that your website looks “on brand“ and a solid discovery will ensure that your messaging is on point.

Ultimately it is all about creativity and skillset, but also you must stay focused and make informed, strategic decisions along the way.

If you're a creative, then check out my Storytelling Guide.

You can use that structured framework together with this article to run your next website project.

Want to learn technical skills?—I highly recommend the Webflow Academy.

If you're a business owner who's looking for an effective, good-looking website—then schedule a call and let's discuss your project.

Anyways, don’t forget to check out the end result live at elevateab.com

I hope you learned something new today—Let me know in the comments below.