Professional Web Design Process Explained in 5 minutes

on today's video i'll show you the exact step-by-step start to finish process 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 [Music] 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 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 video bye bye

Channel: Flux

Views: 103,741

Rating: 4.9399643 out of 5

Keywords: become a graphic designer 2020, freelance web designer, graphic designer job, ran segall, web design, web design business 2020, web design freelance, web design freelancer, web designer career, web design 2020, flux academy

Id: IbOyBIS57C0

Length: 5min 54sec (354 seconds)

Published: Mon Jun 15 2020