I used to design this website for my client w. This is a project that the web, design and brand was ten thousand dollar and i’ll. Show you exactly how we did this in under five minutes: let’s rock and roll hey everybody. What is up my name is ron segal, i’m a designer, and I know you don’t have a lot of time. So that’s why i’ll try to compress the whole process that actually took a couple of months into under five minutes? Let me start the clock by the way.
If you want to know more about this process, we actually created a full-on documentary about this process for the website of w so check the links below. If you want to see the full on documentary, but now the clock is running, so let’s get started the first step in this process, like almost every process for every website or a project that we do for clients started off with a strategy session. The strategy session is where we try to get to know the clients we’re trying to align, who they are, what they want to achieve and how to express this visually on their website or on their brand.
It goes on to cover things like who they are, what their story and missions are, what what makes them unique we’re using the online statement to understand how they are different. We’re trying to understand who their target audience is what their offering is, how they are trying to communicate and just try to understand who they are and cover all things they want to communicate. So that’s basically just trying to understand who they are as a brand.
Then we spent the whole day doing this sprouted strategy session to get to know them and their audience, and then we did a whole separate session just for the website itself. So in that session we basically cover what are the goals of the website? What do they want to achieve with this specific website and whether the people that are actually going to visit this website are actually want to achieve? So what do we need to show them? We then go ahead and try to brainstorm what content should be on the website.
So I came in with my suggestions about what should be on the website, but of course they have their own needs and ideas, and so this is kind of a brainstorming session about everything that needs to go inside the website. The second thing is we’re trying to get some alignment about what do they expect in terms of look and feel how do they want their website to look like so again, I came in with some references of things that I thought can be a good fit, but This is just to trigger them and to hear what they think about this.
Of course, I also encourage them to bring out their own ideas, and this helps to get alignment and so that, when i’ll end up presenting the design, I won’t surprise them and they’ll be like. Oh, no, that’s completely not what we’re talking about they’ll be really i’ll know what they are expected to see and what they are interested in. Seeing after we did this, we actually split the process into one phase.
We started working on the wireframe, so we used figma for this, because figma is really great for collaborations by the way. Now you can also do this with xd, but back when we did this xd didn’t have the collaboration features, so we use figma for that and basically here you can see it’s pretty ugly, but it’s basically showing the structure that i’m thinking about and what content is Going to be there now, the the great thing about collaboration is, I can give them access to this file and they click start editing the files, the the text here and we can start seeing if this is enough text for their story.
Is this enough text for the title and started to get feedback from them once we get approval on that, then we can move on and start talking about the design itself. So in parallel to this, we presented the actual design. So, as always, I do encourage you to sell your design and explain your design, not just show it as it is, and so, when it comes to presenting the design itself, I always try to tell a story in this case.
I wanted to show them. You know they already had an original logo, which was a butterfly, and I wanted to keep that, but also updated it. So I showed them how I use the letters of double and you abstract them to create some kind of a new flower that also represents holding hands or kind of an upside down heart, and so this would be a good fit for them using colors. That would be bold and aligned with what they’re want to show.
This is basically how we demonstrated it on multiple applications, including the website and social media, and all that kind of stuff. After they approved this, we went ahead and applied the design itself on the figma file. Now, if you structured your wireframes correctly, this is as easy as changing the styles, adding some colors and replacing the images, because you basically already have the structure for the website.
Once this face is approved, we go into webflow to actually develop this now. The way I do this in webflow is, I always start off with a style guide, which basically means i’m putting in all the typographic styles and colors, so that, basically, all i’ll have to do is copy and paste them to structure the actual website. And I start with the home page, I structure all the content. I make sure that it’s you know mobile, responsive and then basically just duplicating this page and changing the content for the rest of the pages.
That’s basically it and I think I did it in under five minutes, but i’m pretty exhausted and I feel like I spoke super super fast. So I hope you found this useful to kind of get the overview of working with a client on a website and brand project to get it from start to finish, if you’re interested in oh good, this is a timer for the five minute. That’s up if you’re interested to dive more into this topic.
We do have a full-on course. The 10k website process, which you can check also below and hope that was helpful. I will see you on the next article bye, bye,