Web Design From Start to Finish (Part 1): Wireframes & Content

hi and welcome to this new series here on flux web design start to finish we're going to take you with us on a web design process from the idea into development and lunch it's going to be amazing let's rock hey designer friends what is up my name is ron segal and welcome back to flux if this is your first time here then welcome this is the best place to learn how to be a designer and how to make a living as a designer so make sure that you are subscribed and you like this video for more awesome content about design and web design on this series you might know that at the end of the months in november it's black friday it's a kind of like a big sales day and so we at flux we're gonna do a huge campaign we're gonna build a landing page for that now the process that we're going to use to build this uh landing page that's actually a sales page is the exact same process that i would do with a client project and so i want to take you with us this first video we're going to show you how we think about the structure we're going to create the wireframe and copy for the whole design on the second part in this series we're going to do the actual visual design and we're going to make it beautiful and make it sexy and on the third part we're going to go ahead and develop the page using webflow and make it responsive add cool animation interactions and push it live so let's get started with the first part of the process now i think many designers especially if they're kind of early on they have a new web design project they jump right into a kind of a design software or a template and start to play around with it this is not the right way to get started the right way to get started is to actually think what are we doing here what are our goals and try to think about a structure for the page that would make sense because you're actually telling a story and especially if you're trying to sell something like on this page you have to build in kind of a narrative and make sure that you're using psychological triggers to make sure that you achieve the goal that you're trying to get so in this case this is going to be a promotion for our courses with a big discount and so we want to show people the value in our courses and also put in a lot of kind of like proof to show them that this actually works and try to convince them to uh buy so what i'm going to do initially i thought about using a framework there is a framework that's called i think four ps for selling something like this basically it's something like picture promise proof and pitch something like this basically you're saying something you're building a story right as you scroll through the page some so picture is ah picture how amazing your life would be if you achieve this thing and then promise here's what i'm going to do for you and then proof is how do you know that i'm not telling how do you know how can you prove that you can actually deliver that thing and then pitch here's the actual thing and then buy it initially i was thinking about using this kind of structure now the first thing that i personally do is i'm doing some kind of structure wireframing very very rough in my notebook and the reason that i'm using a notebook and not jumping right into the computer is it's so much easier and less distracting and you can change things as you you can just sketch pen and paper are still the fastest easiest way to get your ideas out there move things around cross it do something else now here i'm not trying to get like a real design or even a real layout i'm trying to see some kind of a structure and trying to imagine what kind of content would be here this is more or less just to understand hey what is the purpose of this section and as i said originally i was thinking about going through this four piece structure where we would flow through this and and get to the page now once i have my rough wireframe in my notebook i'm going ahead and i'm starting to digitize it now i'm using the platforma wireframing kit which i personally think is the best wireframing kit and the reason is first of all it got amazing and lots and lots of ready-made components so all kinds of structures right from hero sections to features to testimonials you already have a bunch of them ready most of the time you're going to use kind of components that you know you see them often on websites right like a testimonial or like three products or features or something like this so here you have already a lot to choose from so the first step is basically like building a puzzle right so if the first section we need a big headline and a picture so that's that after that we need to show like three courses so we need like a layout with three images and three texts and we're basically building it out out of these puzzle pieces into a structure now at this point i'm not changing the text i'm not changing layouts now if you've been on my channel here you know i'm very big on custom layouts and doing custom design and not being stuck into a template and the the actual layout that we're seeing here and that i might use from the platform components does not necessarily mean i'm going to keep that layout but for now it's just a way for me to see the structure and start putting in the content right you can't actually go ahead and design stuff and start making it beautiful and bringing in images if you're not sure what the content is you don't even know if you need an image here or you don't even know how much text you're going to have here so the first step is to finalize the content so after i've done the first structure of the content the first build of the page i'm actually going to duplicate it and i'm going to create the first draft of actually putting in copy so actually text on the website now this is where i get stuck a lot of times and maybe you can relate to this but i'm not really sure what would be a good headline i'm not sure how to phrase something how should i phrase the value proposition and a lot of times you know i would get stuck or something like this so my basically my way to work around that and it's true for copywriting it's true for design in general is to actually just start off with something bad so i don't have a good idea for a headline i don't have a good idea for a title i'm just going to put something there even if it's crafty so one thing that helps me is to just call this draft number one so i know this is not going to be the final i'm not married to this solution i'm not married to this text but i'm just starting to put in the content and that helps me to see the page for what it is and understand if this layout actually worked and then actually understand that i need to change things now after thinking about the layout that i've created here i've actually realized that the framework that i had originally with the picture and promise and all that kind of stuff is perhaps not fully appropriate for the design that we're using right now because the reason is we're actually this page is not most people that are going to visit this page actually already know us right so they they know what we offer and they understand the reason that we teach what we teach right which is web design by the way um so we actually have to focus more the context here is that you have to understand we're thinking about the context and the context is they're going to see this page on black friday on black friday every retailer marketer and business online is going to try to promote their black friday deal so people probably have less patience have less time and they just want to know what it is right what is what is the deal that i'm getting here what is the discount should i buy this right now why should i buy this and so forth so i've actually decided to probably change the structure a little bit and just be more straight to the point of actually telling people hey here's what it is here's what you're getting and then using uh proof right i've decided to use two sections for what we call social proof right social proof is basically um it's a it's a very very basic psychological effect where we as humans we trust what other people have trusted right that's why you see reviews on every page on every amazon page that's why you see testimonials because our nature as human beings is to think well if other people trust this thing then it's probably trustworthy it's probably good it's probably working and so i've dedicated two sections on this landing page to create actually more probably for this kind of social proof work so the first one is putting in testimonials which is reviews from students and actually using numbers like we have over 5 000 students who have taken our courses and succeeded and so forth so using numbers and using actual pictures of people and showing their reviews is a great way to you know show the proof the other thing that i was using as proof is to actually show student work so i want to actually show how like the kind of great work that our students are doing after they're taking our courses so we have two sections dedicated to this proof and then afterwards we have basically um covering you know what is in our programs and so forth and finishing it off with you know frequently asked questions which is basically dealing with objections right you have to think about this page as a sales page right so somebody comes in you know what are you selling to me and then they're thinking well maybe it's for me maybe it's not for me and then they they have probably objections like nah this is not going to work because and so using the frequently asked question is your place to deal with objections and you can if you know your customers and your audience you can answer the questions worries and and objections that they have before they even just decide well it's not going to work for me and then at the end of the page there's another call to action where we're urging them to make a decision and then this time we're also going to use a countdown timer to show when the promotion is going to um is going to finish and that is another critical psychological effect that everybody should if you're into design you should know about it's called urgency meaning people take action when they understand that they don't have too much time now i don't know sometimes people hate this sometimes i don't know exactly you know how i feel about this i sometimes feel countdown timers annoying a little bit but this page yeah i have to understand that i have to design for other people and other people's psychology and this stuff just works right just like testimonials work just like showing big numbers work so countdowns to create urgency just work and so we're going to use that design technique to increase conversions on our page so once i've finished the first draft and first iteration i'm usually taking a little break from it so that i can come back with fresh eyes and think about this now in this case i've decided to ask for feedback from my good friend fabiana fabiana is doing a lot of the copy for us in flux academy she is a fantastic copywriter she writes a lot of our emails and our sales pages and so i really really trust her opinion because she's not only a good copywriter who knows how to phrase things well she also understands people's psychology and how to structure and how to communicate things to work um with their psychology and how to sell online so i took a few minutes to get on a call with her and get a little bit of feedback on the copywriting i would be mindful of language so instead of saying like buy now or get the bundle i would say get the full curriculum or instead of buy i would say enroll like all the language that is more associated with the school and like getting a proper education i would definitely try to shift that so like people understand that when they enroll in the webflow master class they're enrolling in folks academy and they're going to get all the resources they come with they become a student of flux academy and they're not just like someone who bought a bunch of videos from webs about webflow and maybe instead of like 40 off flux academy flagship courses i would say maybe 40 off enrollment on flux academy uh so that people understand that they're actually becoming part of an academy of freelance designers and things like that and similarly i think we leave it like too much it's very buried down the page like the the coaching and the support which i think is such a huge selling point edited in each kind of a section where we're talking about each program i've edited in kind of like in the bullet points um but what would you do would you like change the structure or like what i would do is probably like we have the the hero and then we have like the the three little the three courses um and then below that i would have like a very summarized similar to what we have here for each course like with the four little boxes i would have that section just below here above the testimonials a section of like what does it mean to be in the school what does it mean to be in the school exactly so it means like um i brainstormed some things here just like expert um you know feedback from real pro like not feedback but like you're learning from real pros like your instructions they're like professionals that are acting and you know they're they know you're always getting the latest um that is relevant to the market in terms of technology like you're always updating the courses and you're always updating like the business education and things like that uh the community where they can get business opportunities and sharpen their skills with the help of others like peer reviews and things like this um the coaching of course where they get an actual real human um who's an expert to review and give them feedback um that's a great idea for a section so i think it becomes so much clearer and like i think you also mentioned bonus trainings that they they that you host every now and then so i think all of this should be mentioned all right once fabiana gave me feedback which was a great feedback i went ahead and did a revised edited version of the page and now at this point i'm actually happy with the content i'm not saying that last minute i might not adjust some stuff but i feel like we have a very very solid foundation to actually start working on and the next step would be to go ahead and actually design this and make this page looking beautiful and we're going to see this on the next video so make sure that you are subscribed and i'll see you on the next video peace out [Music] you

Channel: Flux

Views: 17,782

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: N_rUf1Vbnn8

Length: 15min 2sec (902 seconds)

Published: Tue Nov 09 2021