5 Website Types & How To Design Them | Free Web Design Course 2020 | Episode 16

on today's episode we're gonna cover the five biggest types of websites and what you should look for when you're designing them stay tuned hey everybody what's up my name is Ron sago welcome back to the free web design course now while we're always talking in this course about web design as if websites are all one thing obviously there's different types of website and you need to mind and look for different types of the things and care about actually different types of aspects when you're designing each of them so in this video I want to cover the five biggest ones and will you just think about and let's break it down with examples as always hope this is gonna be super helpful for you by the way like this video subscribe hit the bell notification a lot of awesome videos coming up so make sure you're with us now let's get started we're gonna get started talking about e-commerce website now you're probably super familiar with e-commerce website because like everybody you're shopping online we're all shopping online but I want to talk about what you should be mindful of if you got a web design project an e-commerce website what you should look for what you should focus on what are the goals so obviously when you're in e-commerce the the goal of the website is to sell a product that means that the focus of an e-commerce website is to have you look at the product so there is basically two things that are really really important in terms of design one is how you showcase the product and that means both kind of the art direction is this photography how do you shoot the the product is it on a white background is it when somebody is using it is it from all different angles you you as a designer need to are direct and think about the whole product showcase experience so that is one thing that is very unique about e-commerce that you as a designer need to think about how are you gonna present it how are you going to design the product page to showcase you know again all the different variation of the product if it has different colors different sizes different angles you need to make sure that you show it in the best light possible now the next thing that you should be designing with care because the purpose here on this website is to sell this product you want to make sure that the checkout experience is as well designed this is really where the money is so if you design a bad checkout process you know your client is going to be losing money and so you want to make sure that you use the best practices and we're gonna see this in a second in the example to make sure that you know as many as people go through this process with trust they understand that the process is secure that you know they're gonna they can they can feel safe buying using this website let's dive into an example and see this so here's another website of all birds this is a branch selling shoes this website was designed by red antler and first thing you land on the website boom you see shoes on people with a great image so the focus is the product you scroll down and what do you see shoes shoes shoes in all different use cases as scenarios and they're trying to get you to either shop men or shop women now this is where you know you'll see and you've probably seen this before categories and product grids so you want to see all the different products available this is the product page and again here they're trying to show you all different angles let you choose your size and colors and then moving on to the checkout by the way this is the cart every e-commerce website is probably gonna have a cart that's run down in the navigation you can always drop in here so this is the checkout experience now this website was built on Shopify so this is a pretty standard Shopify checkout process and what you'll see here is you this is not a single page checkout they've broken it down you can see it on the top to kind of like three steps here and the reason is they want you to put your email first because not a lot of people finish the actual checkout process so they want to make sure that you put your email first progress and if you drop on at a later stage before you're putting in your credit card they're gonna target you again they're gonna email you they're gonna show you ads to make sure that you go back and buy this so breaking down the checkout into multiple steps allows for this process and it's very very important because again this is where the money is all right let's move to the next type of website which is the marketing and business website this is the most popular kind of website why because obviously every business in the world which there are millions and millions of all of them needs a website now we're not all businesses around the world are selling their services and products online like e-commerce the purpose of this is to still show who they are right because even if you have an offline business people are gonna Google you whether they want to know who you are what's your story how you're different or they're just looking for the checkout and not checkout contact information to reach out to you they're gonna do their due diligence by googling you and so every business in the world has to have a marketing or a business website to tell their own story so here are the design challenges when you have this kind of website which again this is the most popular type of website out there so you want to make sure that first there's a very clear description and value proposition and presentation of the benefits of you know who they are what they do why would you use them how are they different right so this is this has to be very very clear and even though I'm putting this as a design challenge because how you present this is a design challenge a lot of this is how you write this so copywriting is very very important here right less so a little bit less so maybe with e-commerce where you can visually see the product but here this is about storytelling right so the next thing here is the story you want to tell a different story this is even if they just came here to see who they are or find you or your phone number you have an opportunity now to tell a story that would set you apart that would create some kind of an emotional connection where your potential customer creates trust and so you want to use this opportunity to design a story for them now the one more thing to create credibility is using social proof and social proof means showing that other people have worked with you in the past because we as people we have a bias we think that if other people have already worked with you and done this thing in the past it's probably more safe and secure right so if you show other people I have worked with these clients this is what my other clients are saying to me this is using the psychology of social proof to make people believe that you are credible and more trustworthy and they're more likely to do business with you all right the last thing is even if you are not selling things online you still want to get people or use the opportunity of people visiting in your website to some kind of a call to action and call to action is basically us as designers telling them what to do and that can be contact us it can also be join our newsletter or download our free b or something like this but we can use the opportunity of people visiting our website to create some kind of a relationship or take the relationship with them to the next step and we do this by using a call to action let's check out this example so this is a website of a Pilates studio this was designed by Arden sweb and you can see here first of all it was very clear this Pilates you can understand this by reading the headline or looking at you know the visuals which are very very clear and note that the focus here is about storytelling and we're here for 35 years this is the social proof we talked about so even though they're not selling anything here the the call to action is to book a session it's not a huge that's probably not the main purpose of the website to get people to book a session but they're they're using it and you can see that most of it is by building credibility by showing their teachers there are their methods and their clients so this is mainly a website that is about building trust in showcasing their story and basically showcasing their quality by using good quality design they're not actually care if you book a session here or it's not optimized to sell it's optimized to create trust using design alright let's move on into the next type of website and that is blogs and media outlets so we all as people al we are most likely today to consume our information through the internet right we do maybe watch TV but still news in general media outlet magazines that kind of stuff have are are now super super popular and that's where we get most of our information so whether these are big you know New York Times big media outlet or some people who are just blogging and creating content the the way to design a specific media outlet whether it's big or small that you still have to focus on the same things and the things are first content right these types of website the purpose of them their goal is to get you to read something ok read the actual content so the design of the actual article page is going to be the main design challenge when you're designing these website the other thing is you know just reading text is boring you'll probably want to use some kind of an imagery whether it is inside of the post or as kind of a hero to trigger people to get them to be curious enough to click and tease them into your article but you'll have to work out some imagery system here and the other thing as you grow as you know immediate outlet becomes bigger than just a single person writing a blog understanding what type of content you have on your website the categories showcasing them and using tags or categories to organize information in how you communicate that to the visitors is going to become very very important so let's dive into an example so this is the website of think global help this was designed by area 17 and you can see here first of all all the categories are exposed at the top and you can even see where the the the goal here is to showcase a lot of things right and you can see the categories here and they just want to tease you into the articles now here's the article page now note here that the focus is on what's going on in the middle right the focus here and as you scroll long you see everything is becoming clean there's nothing here but actually reading the text they'll break it down with an image sometimes but the main main focus here is how do you get people to read the text the type is big not too long of lines so that'll be super super readable they'll sometimes break it down with some quotes to get people because are scheming these days so they want to grab their attention to specific areas of the article and get them to read of course note the sharing buttons at the top because how do these media outlets you know get more traffic is by having their posts or articles shared and going viral so this is something that you'll need to focus on how you drive traffic from the articles that you currently have usually by these social sharing buttons all right the next type of website this is not super popular but it is one of the important ones today is educational content right we learn today a lot on the Internet some some of you are doing this on YouTube there are also places for online courses and their specific website that are dedicated to teach people so whether it is online courses using videos or using text or using all kinds of different medium format getting people to consume your content and actually teaching people online is a different task a different challenge design challenge right so what are the design challenge when it comes to an educational website well first of all you want to get people engaged the problem with most kind of online courses and teaches is that people are very excited at the beginning they might say oh I want to learn this thing but then they're like ah you know what I'm bored I'm gonna go do something else because people's attention spans are becoming very very short so one of your challenges if you're designing an educational website is how do I keep people engaged what can I do to surprise them what can I do to do something new to make this more entertaining or really cool to get people excited to keep on consuming the educational content because you at the end of the day you want to make sure that they've actually consumed this content so that they know the thing that you want to teach them the next thing is as you're trying to teach maybe a big subject you want to make sure that there's orientation as to hey what do we have here right where are you in terms of the course or the learning process can you jump into the next chapter how long there is more to learn you want to make sure that people are understanding this so let's check out this example of this is an online course by a non-profit this is called visions for the future and it's basically a free kind of course and basically there's an intro here and then you basically see the index of all the chapters in this online course this is mainly focused on context but no they have here kind of a very cool interaction of a timeline of the Internet so that's really fun to kind of interact with versus just reading but then you move into the next chapter and this is as I said this is mainly text-based learning but they're breaking it down with interviews videos and different types of content type to get you to keep get you to keep engaging and learning and consuming all the content right and you always have this kind of an index thing here on the right so you can always see where you are how much do we have left and if you want to navigate to a different chapter all right so the last thing I want to talk about is the portfolio or a personal website this is basically kind of a subset of the business website you can say but this is for four people versus companies where they basically want to showcase their work okay whether it is they're looking for their next work or looking for client work you have your own website to present basically who you are and what you know how to do and this is super useful for us as designers but a lot of other creatives and generally people have personal website where they show what they have done previously in the past now in terms of design challenges the first thing is you you'll need to are direct your work you can't just pace your work out there so you need to find a way to visually present this in a meaningful way now if you're a designer your work might be visual but let's say if you're a developer or if you're you know a writer you need to find a way to present your work in a visual way because at the end of the day we're consuming the content visually and so you want that to be visually appealing the next thing is this is a personal website so whether we are again trying to find work or trying to get clients to hire us at the end of the day they're hiring as people and so in our personal website what we want to show is our personality who we are as people and that's very very important it's not just the work it's who created the work why would I work with you how are you different are you are you funny are you upbeat are you you know we want to understand who you are and then also kind of like most business website you might have a call to action depending on if you want to close the deal if you want to get hired depending on what you're trying to achieve here you're probably have a call to action now I want to show you this really awesome website from Zegna ring souk I hope I'm pronouncing her name correctly but she's an amazing designer and you can see even just by hovering yeah you can see different types of work so immediately before even scrolling you can see the type of work she's doing and personality and you can see her even though you can't see her face now she's using video to show even though most of her design is kind of static and I don't know if you can hear the music but this is really really cool way to very quickly show personality and the personality goes through you know the the design but also the sound also the you know the editing of this so obviously she's so showing her work in a very visual and art directed way everything's that she can't do and she finishes up with the call to action to let's make something great together and her email so this is a really really great example of a personal website showing both personality and work ending up with a call to action really really fantastic example alright so these were the five most popular use cases I have hope you find them helpful let me know what kind of website you're working on right now of course again subscribe hit the bell notification like this video all that kind of stuff cuz I'm looking forward to seeing you here on the next video ciao

Channel: Flux

Views: 146,215

Rating: 4.9469309 out of 5

Keywords: website types, website types and purposes, website types list, website types examples, web design, website design types, types of website, web design inspiration

Id: ZliIs7jHi1s

Length: 17min 31sec (1051 seconds)

Published: Mon Jul 20 2020