How to design a website like a professional?

In this video i’m going to redesign eric’s website from the ground up eric is an awesome programmer with his own youtube channel so check that out in the description hit like and let’s just jump into it i’m going to take you through the entire process that i go through when i’m creating a website and this includes things like doing the wireframe sketching it up multiple times and finally getting something i’m happy with.

then creating a design guide and finally creating the whole thing on a application like big mop the first thing that i do normally is try and draw out wireframes for the website i’m designing because this gives me ideas and inspiration of how i can create it okay the wireframe stage is more or less done i’m really happy with the results some of the things i’ve done here is try and take an idea of his youtube channel and his blog and everything that we need to put into this design and incorporate them all in a fun and interesting way things that are focused on is trying to highlight the menu and the call to action as well as trying to link through to the YouTube clips

i’m gonna use a tool called figma to help me create the website design we’re gonna transform this wireframe with a style sheet and number of pages and get this up and running [Music] [Applause] having followed eric for quite a while i know a lot of his website and content is a round vu so i’m going to actually reuse some of the styling that they have on the core website to create his style guide this will allow things to look consistent and for people who are already using vue or want to get into it feel nice and comfortable on his website here we can create a style guide

here from the buttons and the colors of the view website so i’ve used a little bit of the greens and greys here and we’re going to create some buttons for hover for active and we’re going to all use this as part of the style guide we’ll use later in the website [Music] once the style guide is done i move into actually creating the design inside figma because i can use the reference of the buttons and the colors to get that process started i start off with the hero section and i look at my notes from my ipad and more or less recreate the s

ame idea here i’m using the colors that i’ve gotten from view and making sure that all of them are working together along with the image i want this to be a nice welcoming image so that people landing on this page sort of want to sign up [Music] [Music] the header is more or less done now i’ve got good images colors and text happening here so we can move on to the next section which is creating the blog and news which is something that eric does quite often eric also has a number of great courses on views so i’ve actually decided to showcase them a little bit more with little previews where you can sign up or view more information about the courses and this should help engage more people to sign up in general [Music] i’m nearly done i’m gonna add one more course in here to have maybe an advanced course for you and add in a newsletter section where people can sign up and get the latest information

when different courses are coming out great the design is done let’s take a closer look at the results here’s the final design as you can tell we’ve incorporated a lot of those green and grey elements to really give this website a vue kind of feel the website has three main sections the hero section the blog section and the course section these all work together so that if you’re looking for something in particular especially view related most of these topics are covered on the page hope you guys enjoyed this new format of video if you did hit like and subscribe otherwise i’ll see you in the next one thank you