Web Page in 7 Steps: How To Design It and Get the Mood Right

Artboard-1
Embacy
  • Date Published
  • Categories Blog, Guide, Showcase
  • Reading Time 10-Minute Read

A step-by-step guide on how a web page is made.

We’ve already covered our process of designing websites in our comprehensive guide on website redesign, but let’s take a closer look at the individual pages. Let’s get into details, the minutiae, the nuts and bolts. A good website is a cohesive whole, where not just every page, but every element of it serves a purpose. Each detail must strive to together evoke a mood. Throughout this article, we’ll be taking a closer look at our project for Simla.

0. What’s the point?

First, you need to set the goals for the website. Is it a business card website? Is it there to drive conversions? Are you unhappy with your website and need a new one, for any number of reasons, such as:

  • Sales/conversions are decreasing;
  • The design looks dated;
  • You’re getting complaints about poor UX;
  • The business has changed and the website is falling behind;
  • Or any other reason?

You’ll need to think about how many pages you’ll need, and exactly what pages. Your website has two simple goals. It has to convert and it has to look good. Of course, these are not mutually exclusive. And before getting to work, you have to figure out what other, more particular goals you have for your website beyond these two.

1. Task at hand

Everything hinges on the goal for the page, which follows the overall goals for the website. For example, if it’s first and foremost a converting website, and we’re working on the product page, this is the meat and potatoes of the website, this is the time to drive home the sale and be direct and to the point about the advantages of the product. Or to explain what it is exactly if it’s a complex solution, some B2B system or something brand new and innovative or both.

If it’s about us page, this might be the time to let loose a little and show the human side of things. The goal of the page defines its content and the content defines the visuals. For a more complete text, we’ll look at the page that ties the website together: the homepage.

2. Conceptual approach with nothing artsy about it

A web page doesn’t stand alone, doesn’t exist in a vacuum, it needs to be consistent with the rest of the website (unless the website is a one-page landing, and then you can just go nuts with it). This is why we look at the main page in this article because that’s the first page that we make and that’s the page that informs the whole website.

First, we start with a concept for the website. We come up with three different concepts that illustrate and illuminate the product. For most industries, it’s nowhere near enough anymore to just have a plain website, no matter how neat and well-made it is. It needs to tell a story in order to be memorable. Stories make us feel things. This is where the mood board first comes in. As an example, the concept mood boards we had for Simla:

Even if it just the concept mood board and not the style mood board, you can already see some of the stylistic choices that would end up in the final result.

3. Style direction and setting the mood

Any concept could be visually represented in a near unlimited amount of ways. We create three different possible style directions. Already with the simplistic layout drafts, to already see whether it would work in action:

We often work not just with the websites but with brand identity too, so at this stage, we often mockup the styles not just for the web but for everything.

Each of these, again, comes with a mood board, a collection of visual references that fit the styles. The mood board for the concepts looked, first of all, to reveal the exact mood we are trying to communicate with the concept, whereas we make the style mood boards to see the connections in how the particular mood is evoked, looking for common traits, for repetition, for visual semantics.

These mood boards greatly inform the following work. We take a look at the designs that aimed to solve the same tasks and to get to the same feeling, and see what they all have in common. Maybe there’s a lot of common colors — for example, if your branding is aggressive, you’re quite likely to use a lot of red on your website. Maybe you want your branding to feel reliable, solid, then you’d take a closer look at 3D elements that feel tangible, almost real, have a physicality to them.

With the mockups we already get to see the style in action, see whether it’s suitable for the web. The important thing here is to create a consistent mood board that gets the feeling across without any ambiguities. The mood board will inform the style and the content, the mood board is a frame of reference to keep in mind every step of the way. Because you want people to feel things.

4. Layout and content in broad strokes

The next step after figuring out the style direction is to forget about it for a second and make sense of the simple things first before making them all pretty and wonderful. This is the time to create the most basic possible functioning layout.

It might not be pretty but it gets the idea across.

At this point, we figure out the functionality for the page: all the necessary blocks, the necessary elements. There’s no composition yet, there’s only the basic frame of the narrative that this page is going to convey. But, already with the draft copy: because the copy and the design must work together in harmony to really spotlight the concept and the mood that you’re going for on your website.

5. Prototype and rolling up the sleeves

Twist! There’s no prototype stage in our workflow. Because we work in Figma (all the screenshots above are from Figma too), the clients get to see the website in progress exactly how it will look like when it’s done. We don’t have to waste time to create a wireframe and mockup of the website, what you see is what you get. We use Figma for a number of reasons, some of which are:

  • Transparency. At any moment you can check-in and take a look at what’s going on with the project. This helps us to achieve a completely transparent process.
  • Clarity. We separate the work done by days and by sprints so you can easily see the progress day by day.
  • Ease of use. The UX is rather intuitive, and you don’t even need to download an app to start using Figma, just open it in your browser of choice.

Simla in progress, rough around the edges yet, but shaping up quite nicely

So what’s this step is about then? It’s the time for the designer to put their head down and actually design the thing. Not bothering yet with the grid and the finer details, this step is about building a solid foundation to later refine. Touching up the structure so it’s no longer purely functional but is also visually cohesive (and here’s our guide on visual hierarchy and composition in web design), placing images, looking at UX solutions, figuring out the narrative flow. Generally filling up the frames. All while looking at the mood board from before, keeping in mind the goals for the website, for the page, the concept, and what mood should it evoke. How it supposed to feel. And then the art director comes in and says “do it again”. Only when the design passes our high internal standards, only then it’s time to get into the grids and the minutiae.

6. The finer details and shaping everything up

This is the step to implement the complicated elements, such as motion, video, 3D elements. And it is also the step to clean everything up. Maybe the design feels a little too busy — then we take a look at the visual techniques that repeat too often and cut down some of them, to let the design breathe. Maybe the design feels a little too empty — then we go back to the mood board and see whether there’s something good that we haven’t used yet. And we look at the mood board while working with the details: for example, a designer can’t decide whether the buttons should have rounded edges or sharp edges. We look at the mood board and everything is calm, smooth, and round, not one sharp accent. Then the buttons are round.

And we fix everything to the grid. At this point we already know more or less where everything should be, the grid is just a tool to make everything a little easier on the eyes. We figure out the margins, the sidebars, the right scale, and the right weight to the typefaces. These are all finer details, but altogether they can make or break a website. But you always have to keep in mind that the design is there for a reason, that it has goals and functions. It should never be just the design for design’s sake.

7. Development and publishing

Before actually publishing the website, there are still a few things left. Most importantly it’s the adaptable versions. More than 60% of the traffic comes from mobile devices, with some of our projects reaching over 70%. It’s very important to get the mobile version right. You have to streamline and simplify the design while keeping it memorable and interesting.

Our agency consists of two units: a branding unit and a web unit. Once the design of the main page is complete, the work is passed to the web unit to develop the final version. Because we work in Webflow, a single page doesn’t take much time to develop, and the final result looks exactly as it did in Figma.

We choose Webflow for simple reasons: because of its flexibility, good CMS, convenient mobile versions, and plenty more. You can learn more about it in our article where we breakdown how long does it take to develop a website and how we manage to achieve our phenomenal speed.

The good litmus test for the final page is to place it right next to the mood board. If they match, if the continuity is clearly visible and the website evokes the right feelings, that’s good design. Emotions are what make products stand out. As the final example, the early style mood board for Simla and the final main page:

And do check out our Simla project on Behance.