Full Workshop: Content Strategy & Information Architecture

hey designer friends as some of you might know we have launched a new web design course this week and what a better way to show you the quality of our teaching than just giving you a video to show you how we teach and see if you're like it and how you feel about it so in this video i want to share with you um our video on content strategy and information architecture this is a really important topic and part of the process when you're doing a website you have to gather information you have to decide what content is actually going to be on the website and how we're going to structure it so we're going to dive a lot into user experience and how to structure content in the right way so that it makes sense for the user crucial part of the process and as i said this is just one step in the whole web design process so i hope you like this and benefit a lot from this video if you like it and if you want to dive deeper into the web design process please check out our full course web design becoming a professional because we're launching it this week there's also a lunch week promo so there's an early bird pricing up until friday so the link to the full-on course is below anyway enjoy this video and [Music] hey and welcome to the content module in this video we're actually going to cover two things which are content strategy and information architecture so we're going to cover what are the difference between them and then how to work to build the content for your website so we're going to talk about content planning and then how to develop the actual content then of course i'll show you a demo and then we'll wrap it up so let's start by exploring these two things that i've mentioned content strategy and information architecture well basically content strategy answers the question what content should we even have on our website is it aligned with the overall strategy that we have for the website and then information architecture basically says you know how are we going to structure that content that we've decided on what would be the right structure for the content inside of the website so let's dive into this topics the first step is of course planning right this making the decision about what is the content and then actually developing and creating the content so what is the content planning process well the first step before this is going to be a dialogue together with your clients like most things in your web design process but before you go ahead and you know have this discussion with your clients i do suggest you do the prep before so you already have done the research you you're familiar with their goals you are familiar with what's accepted and what other competitors are doing so so what is accepted in the marketplace from that type of website so you can come up with the list of content types that you think should be on the website i suggest you always come to the meeting prepared with your own suggestions instead of just asking the client so what do you think we should have on the website so whether that is you know a page to cover the or a page or sections to cover products or services or you know who the company is what their vision is what do they do contact of course but maybe benefits maybe resources updates all of these types of different contents that are possible on different websites come up with the list that you think would make sense just as a starting point for that website the second step would be to take that list and then sit down with your clients have a brainstorm and have a discussion about this tell them here's what i think what do you think is there anything that's missing here is there anything that is important to you that you want to make sure that we have um is there any kind of seo considerations that are important to you and that we might put in specific content so you know we would rank higher for specific keywords is there anything any specific tone maybe that you'd like us to take in terms of you know how we develop the content that is the conversation where you want to list out and just flash out all the different ideas for content that's going to be on the website now basically at the end of this phase you'll have just a list of a lot of things right just a lot of things and then the next step is doing some kind of a sorting and grouping to understand what would make sense um how you want to put them together now there is a very famous and actually useful um kind of a ux ux workshop or exercise that you can do with your client and it's called card sorting basically what that means of course that can be done online with with many different tools or of course physically if you're sitting with them but the idea here is that you put each one of these ideas for a content type on a sticky note and then you end up with a bunch of sticky notes and then you start grouping them together and you you ask yourself what would make sense of course maybe something like showing the team and the executives and the vision would make sense under a title that's called about us maybe all of these different topics makes sense under a title that is called services so as you can see this is the beginning of some kind of a structure that would resemble perhaps either pages on the website or at least sections in the website but it kind of helps to make sense out of the content and puts what's uh worth doing together or what's worth putting together together and one thing that is very important and useful in this exercise is understanding what is the title of the group right that's probably going to be again either the the page name and or or the section name and that is very important for people to orient themselves so this is actually this exercise is actually the transition between the content strategy and content architecture because as you understand now we're trying to start architectings we're starting to place things together so this is the time where i want to dive deeper into the structure of the content the information architecture now why do we even use this term architecture when it comes to web design it's because we're eventually organizing a space right it's not a physical space but it's an online space but check out these two examples right when you think about an office if that office is you know open space or if that office is divided by cubicles that really affects one how people feel when they're working in that space to how people interact in that space so in one one the open space you know calls for a more collaboration and you know talking with other people who are sitting in front of you where you know the cubicles allow you for more silence and focus and you know working with yourself so the way that you divide the space really affects how people are going to use the space so it matters how we divide the space of the website as well now one more thing about the space is that one space for example a marketplace can be very very confusing and disoriented versus a space like the airport where it doesn't matter almost where you are in the world or how big the airport is you know how to orient yourself in an airport mainly because it uses expectations that people understand how airports work and they all function the same way and then it has a really good signage and everybody understand that signage now we want to use the same principles of working with people's expectations and using good signage and again i've mentioned later i've mentioned earlier that it really matters how you label you know the pages or the groups because that helps people orient in that space so hopefully we're going to design something more like of an airport where people know how to orient themselves versus a confusing market now the tool that we use for structuring and actually communicating the structure is called a site map and usually it would look like something like this this is as you can see it's kind of like a little bit more fancy illustration of the same card sorting thing but here you can more visually and easily see the the hierarchy like and and the structure so what is on top of what what leads to what and it's really easy to see the the structure of the overall website now this is again this you can do this with any design software uh that you want however this is a fancy way of doing this there's also the non-fancy way of doing this which is just using tabs to show hierarchy and that's usually how we communicate when with written documents you know when you have tabs and subtabs or bullets and sub bullet which are available by the way in any you know word processing google doc type of software and a lot of times actually when i would be working together with my clients and collaborating with them on real time working on something like a google doc where we can just copy and paste and move things around and tub things to create that structure is actually faster than creating the fancy um the fancy diagram so it doesn't matter you might start with the during the brainstorming session to create kind of a fast on the road structure using tabs and then maybe you want to uh for documentation and approval and communication just to clarify how things will look like create a nicer map but those are the tools that we're talking about when we want to communicate the structure of the website so as i've mentioned the labeling on the site matters because those are the actual signs kind of like the airport so you want to make sure that they are clear and also whether you write about us or the company or who we are it matters to both clarity in terms of understanding what's the content in this page it also matters from you know a branding perspective and tone perspective how people feel about this so make sure you pay attention to the labels now i want to explore some kind of very popular structures that you might consider using when you're doing your site mapping and structuring phase so the one of the simplest one but a very very popular one is just one page right it's a home page a single page sometimes it's also called a one-pager it's just all of the content in one page and we'll explore pros and cons of using them uh soon the second simple one is a flat structure and a flat structure basically means you have a page the only thing that you can do from here is going to a different page you know in kind of a sequence but from that page you can't go to any other pages the only thing you can do from that page is go back back into the homepage or back into the main page now why is this useful you might ask yourself well in some scenarios i imagine like a checkout process you want people to be focused and you want them only to move into the next step you don't want them to be confused and go check out completely different pages right now of course people can always use the back in the browser to go back to the to the home page or where they came from but you want them to stay focused and you want to guide them towards the next step now the the third one is called an index page this is probably the most popular structure that you know you have a home page and that homepage links to all of the other pages available on the website so that is super super popular when you get into more complex website you get into what we call strict hierarchy uh pattern which means you have a page let's say you have a blog page and then under the blog page you have maybe individual blog posts and and so you go down hierarchy you have sub pages of a category now on some types of websites like e-commerce sometimes you would have what we call coexisting hierarchy pattern and that basically means that you can move around between the sub pages without going back into the homepage so if you're on amazon for example and you're watching a product you can jump from that product into a different product sometimes if even if that different product is on a different category so those are kind of links this is the most complex scenarios it's not going to happen to you often but i want you to be familiar with the concept of actually connecting different categories and different subcategories because that is of course possible now i want to dive a little deeper into the difference between or the consideration just because one pagers are so popular these days i want to help you consider what would be the best for the particular scenario that you're designing for whether it should be a one-pager or multiple pages in a more complex scenario obviously everything has pros and cons so let's start with the one pager one pager the good thing about uh one pager is the only thing you can do is scroll so that means it's a very very intuitive user journey right you start at the beginning you scroll to the middle and then you get to the end so it's very very easy to use they're not going to get distracted and you can include all of the information that you want people to know and consume in order to make a decision right so you can make sure that they can't jump into and they can't miss something right so you can teach them or you can have them explore the content in the um in the order that you think would be best for them which also probably is going to increase conversion rates people are not confused they don't have anything else to do but explore the whole process and then get to the end which is you telling them what to do next that's probably the conversion so in that sense a one-pager is a great is a great solution now the the cons of that is of course it's not very scalable right you can't put tons and tons and tons of content there's always going to be a limit and you don't want to overwhelm in one page so if you have tons of content that might not be the right solution the other thing is that in terms of you know thinking about seo or analytics the when you only have one page it's hard to really know what people are interested in when you have different pages first of all those different pages can rank for specific keywords right if you have a product that is called orange juice and you create a page that's called orange juice so when people google for oranges they're gonna get to that specific product page versus your home page which is probably a beverage company right so when you have a dedicated page it's easier to rank for keywords and then the second thing when you have let's say 100 product and you want to know which product is popular when you have a lot of pages you can very quickly see in analytics which pages get more visits but when you have only one page it's a little bit harder to know you still have tracking devices where you can see you know what part of the page people scrolled into but it's a little bit deeper to really understand what's going on when you only have a one page so multi pages of course the benefits just like the the opposite of what we mentioned right now it's unlimited scalability so if you have a huge website if you have tons of content if you have a lot of products a lot of services you must have a lot of pages to explore them um it's easier to link to specific concepts specific product because you have a dedicated page to it so you can just send somebody the link to it and it's it's much easier and as we said it's better for seo better for analytics the the con of using a lot of pages is that it's going to be harder to maintain right you're going to have to you have a lot of more content you have to work through each page every time you need to update something people might get confused because there is so much going on you need a more elaborate navigation and you have to remember that now that the page has multiple pages each one of these pages because it can be shared is now actually an entry point to the website so people might not land on the home page you design the home page to be clear talking about what the company does but imagine people are landing on the blog imagine people are landing on a specific product page will they understand what the company actually does that gets a little bit more tricky and requires a little bit more thoughts when you have multiple pages okay now that we've covered the high level structure of the website let's dive deeper into some of the most common components that you'll have to design for in terms of information on the website and see what are the best practices for them so first of all i want to dive deeper into the home page because a home page is basically a component that you'll see in basically every website so the purpose of the home page is to basically answer the simple question of who are these people what do they do and why would i care and once you've established that you want to use the home page to build trust with the company or with the brand so that you actually believe them and want to work with them and the other reason that people might visit the homepage is if they have been working with the business before and if they already know what is it about they usually would revisit it just to see if there's anything new or if anything has changed so let me show you basically a typical structure of how you would structure a homepage you would start with the top section which we call a hero section and in that section you'll probably have something like the logo and navigation which is a typical component we'll dive into all of these components um soon and then you'll have a value proposition and probably a primary call to action um to achieve the the goal of the website and then we'll move into the secondary sections where we'll try to build trust we'll do that with components like uh testimonials or logo bar or any other measures that we can use to build social proof number anything else that we can generate to create social proof we'll use the follow-up sections to showcase the benefits of the of the company of working with the company or the product and any features we want to cover and then we'll use the additional sections in the home page to show what is new so either new content from something like a blog or something like this or if we have any updates news or any kind of new offers um that we have if you want them to sign them up for a list or give them something for free in in exchange for their email we will do that in those section and we'll always end up with a footer now let's dive deeper into some of these components to see how we're going to use them so just before i continue one thing i want to note about the home page you have to remember not everybody is going to start with the home page we've mentioned that previously some of some people would just start from a specific product page or a blog post or something like that so you have to consider that some people might start elsewhere and then come to the homepage because they want to learn more and the other thing is the homepage a lot of times is the war in terms of the company because everybody wants to put their foot in there right if there is somebody for who works on a product or initiative in the company they were like we have to put this on the home page and a lot of people some a lot of people think that you can put everything cram everything into the home page so do not do that remember what the purpose of the home page is in terms of establishing trust showing the overview of the product services and benefits and don't try to do too much rather if you have a lot of information put it on another page and link to it all right let's dive into the navigation and the navigation is something we'll have at the top of the website um you'll see that in any website at all and the purpose of that is to actually understand where you are also understand who owns this website which is why you'll see a logo in that almost always or actually always it helps you to discover what is actually the main information in this website so we would show you with links and actually by giving you those important links it actually teaches you what you can do in this website and a lot of times that is optional but a lot of times we'll also have a call to action that is persistent as we scroll we always have this call to action button with us to achieve the main purpose of the goal so some best practices to work with most times you'll see logo on the top left and that is because you know as people who read books we always start at the top left corner that is our general reading pattern we start at the top left if we're reading english and so that is where we position usually the logos that will be the first time uh that we will see it the first thing that we will see sometimes some brands put it in the center and that can work as well but you have to remember that people start reading at the top left and that's why we use that for the logo most times it's also kind of a best practice or a lot of times user expect that that logo is also a link to the home page so no matter where people are on the website they expect that if they will click on the logo at the top left it will take them back into the home page now in terms of navigation link as we've said earlier that kind of shows you the main structure of the website and what you can do here but you want to make sure that you don't put more than five to seven links the reason for that is just you know the cognitive memory load that we have in our brains we can't remember more than seven items at the same time we can't hold them in our memory so if we put too many links there by the time that we go through reading everything that's on this website we actually forgot what's in here so you want to make sure and that is a lot of times just like we said on the home page everybody wants oh we have to have this in the navigation we have to have this on the home page this is something that you have to work with your clients to prioritize just because if you put everything there it might be overwhelming now if this is a heavy content website if they have a lot of product what you would do a lot of times is just collect a lot of information under a category or a menu and then you would have like a drop down menu that you can either hover or click and you can see more information but you want to make that discoverable you don't want to show everything up front you want to make people understand that they can hover or click this to see more on that topic now as we said people read from the top left to the right so you have to understand that they will start reading from the left link to the right link so you want to organize those links by order of importance right because they will most likely read the left first i don't know if they'll get all through the end so make sure you put the one on the left the one that is most important for you and you also want to make sure in terms of design that you want to highlight the current page so sometimes you would see things like phone number or you know chat or support or that kind of stuff also in the navigation bar but i want you to understand that this is actually not a navigation right it doesn't help you navigate elsewhere this is actually what we call a utility bar these are just very important functions that we want to highlight that being said because this is not a navigation this doesn't take you somewhere else you want to separate them at least visually and usually this is done by just putting them in a different line on top or below the actual navigation just so people understand that these are different things and these can help you achieve you know uh different functions all right in a very big uh website or complex website where you have things like categories you would work with something that's called global navigation and local navigation so a global navigation is basically the main navigation that we just talked about it's those five to seven links that basically show you the structure of the whole website and they're with you on any page on the website they're consistent with you however when you are in a specific category that has a lot of pages with it or maybe it's just a very long page that has section with it sometimes we'll use something that's called local navigation and in this example we're seeing the apple website and when you're in a category for example in the top example we're in the page for the iphone so we chose in the global navigation we chose the iphone and then we're getting a local navigation to show you the different pages within the iphone category and even when we are inside a specific iphone let's say on the bottom uh in the bottom example when we are in a page for the iphone x for example we will have a local navigation specifically to the sections of this page including a persistent call to action to buy the iphone now as i've mentioned you want to make sure that the page that you're on right now is highlighted it might be a little bit hard to see here but it's a little bit of a different color the page that we're on right now just so we understand very fast what page are we on if we just landed here but also it's very important and you can see it in those examples the name of the page is also very prominent in the title at the top of the page but as you scroll down that might not be visible so you want to make kind of like a double effort just to make sure that people are clear on what page they are on now again in complex website we will use something that's called breadcrumbs and breadcrumbs you can see them here actually not in the hero section but below it it's where you can see home art technologies and sensing when you are in inside of an inner page if you when you have categories and then you have subpages in those categories you might not be able to see where you are because the global navigation doesn't include link to this page and so people might be disoriented and we can't highlight in the navigation where they are right now so they might not remember what page remember or understand what page they are on right now and so using a component like the breadcrumb helps helps the user to understand the structure of the website where they are on the map and if they want they can go back to the previous top page in this case it's our technology and just go back there now one question that a lot of people think about they're not sure should we have a search function search function a lot of times comes in the navigation because the purpose of the search is to navigate to a specific piece of content now there is no simple yes no answer to that like a lot of things it really depends on how much content you have on your site so if you have a lot of pages and that can be just by because you have a blog or because you have multiple products or subcategories like we've mentioned it might not be easy to find what you're looking for if you have to start going into sub submenus and drop-down menus and you're not really sure even where to look for that thing in that case it might be a good idea to add a search function um but again you have to consider how hard it is to find the information if they have to go look for it it might make sense to add um a search function but if you can if you can just give them a very simple or a simpler way to find that information just from the top nav or from you know somewhere else um then you might not need a search function all right let's talk about the hero section so the hero section we as we've mentioned this is the top section of the website when you're landing on a page right now usually that's where you'll give the value proposition of what's in this page right now in the home page specifically this is a specific use of the hero section because in the home page actually in any page where people land for the first time they have a very short attention span actually most people would leave the website within the first 15 seconds and that's why we have something called the 15 seconds rule where we try to convey the the basic you know who is this who owns this website you know what do they do and why should i even care about this we try to cram all of this information to make it super fast and accessible so people can answer that question within the first 15 seconds and then they want to stay with us and explore deeper and so you want to make sure that you answer these questions you want to make sure that you have a very clear value proposition and additionally you want to consider adding a call to action in that hero section just to let people know what they can accomplish here and encourage them to action here's an example from the stripe website so first of all you can see they answer the first question who owns this place who what is this website with the logo at the top left it's also kind of isolated so your eye it's very easy for your eye to very simply go there and understand okay this is a company called stripe next what do they do very clear big title this is payments infrastructure for the internet that's great why should i care this is the next you answer them in a row why should i care oh millions of businesses of all size use this this is also kind of like a social proof right a lot of people are using this so now they're trying to make you care about this and start now this is their call to action so this is a this is an example of a very good hero section of course it besides the textual information also uses visual to very fast convey the word the the world which they're in they're in payments so you very clearly see a dashboard of money and a checkout process people can instantly by looking at this understand they are in payments you can do a checkout with them you can get a dashboard to see how much money you make very very fast you know what this website is about all right the next component that we'll talk about is the testimonial you're probably very familiar with it in essence this is a text blurb of something that somebody said about this person about this business about this experience and it generates trust and that is just because we as people believe other people and so we always use this to build trust it also helps to show who the client who the business clients are because a lot of times you would want to buy from people who are like you so when you see this person from that company you can say oh they are like me we have similar problems and therefore if this person had a good experience with that company that's probably going to be a good fit for me and it also allows you to understand what is the benefit of this product it gives you kind of more value proposition into why this is a good product company service to work with so some notes about testimonials of course you want to make them short and snappy just um because people don't take a lot of time to read on the internet you want to make sure to add a photo and the title or the company or who is this person why should we believe him people relate to photos very uh you know very naturally they like faces they like to see the person and it makes them way more reliable and again if you see the title and the company this helps you relate this person is like me sometimes using just things like tweets or testimonial from social media is very very credible because unlike you know just text which you can go ahead and edit and make them look good so stuff that you brought on from social media you know that it was published by them that way and so they are way more credible and they look a lot more natural and of course if you get a chance to create video testimonials that is the highest level of credibility just because of course they can't be faked or manipulated but also people understand the effort it takes to get other people to give testimonials on video so if this person works so hard to give them a video testimonial that also creates a very high trust trust factor now the next component also in in the trust um in the trust area of your website will be a logo bar that is a very common component you've probably seen it in so many websites and in essence that purpose is kind of like a testimonial but you don't have basically to have their permission right but the the idea here is that just by showing a logo of an organization by associating your business with that other organization which also has probably a trust factor you're going to be associated with them therefore you're going to be trustworthy and you can use logos for the businesses clients but you can also use logos for publications or awards any credible organization that you can associate your business or your clients business with will contribute to you know to gaining trust now one thing in terms of design and that's an error that i see a lot logos of different companies come in different sizes different compositions different colors and if you just put them one next to another it's going to be a mess in terms of hierarchy some of them are going to grab more attention some of them are going to be grab less attention and when you're using that logo bar you want that whole logo bar to be one element with one kind of hierarchy one one hierarchy and so the best practice and the best way to achieve that is to kind of flatten the color take out the color of course it doesn't have to be gray it can also be black it can also be white depending on the context of uh the website but you want to remove the color factor just to make all the logos look consistent and sometimes you would even have to change their sizes just so that because if you will do all of them the same size some of them might use more color than others and therefore they will become more visually prominent and so you want to scale them up just to make sure that you have a consistent hierarchy all right the next component is a pricing table almost any website that sells something any business that sells something has a price they want to communicate most time they will do it within a multiple pricing tiers because there's either different products different service tiers and so here's how we're going to showcase that people when they have a lot of options they would like to compare them and so a good way to present that is to just put them one next to another and show the differences or the features of each one of these programs so that people can easily compare them now one thing that is very very common and i'll explain the reason is emphasizing one one of the programs or one of the tiers not necessarily the most expensive one but the one that the business would like to promote the most the reason for this the psychological reason for this is because when people have too many options they get lost and they get confused and so when we make a suggestion for them that would make it way more likely for them to actually go ahead and pick that that pricing tier again that is a good way for you to promote the offer that you would like to promote the most now sometimes you would have to dive into a very very long feature list if you have a very very complicated project however you want as a default show a very concise list of features or differences just to make it easier on them if they want to dive deeper again make it kind of like discretionary make it hide it or they can click to learn more to dive deeper if there's a reason to dive deeper but if not just make it easy for them to scan the features list by using a concise list and you want to make sure that you're using uh prominent call to action on the tables it has to be very easy to choose one of them and you'll do that by making the buttons obviously very clear like you would for any call to action all right when a company sells a product you will have a product page whether that is an e-commerce website or you're selling a service you will usually have a product page to explain that and so let's cover some of the aspects in it usually if that's a physical product you would want to have a very prominent image just showcasing what that thing is and actually in most uh scenarios you'd want to show more than one image just so how how does it look from different angles in different use cases and so on of course you want to make sure that the title and the price are very clear and also what what is this thing right what are the descriptions what are the features of that thing you'd also want to add a prominent call to action so people can say yes i want this i want to buy this and when possible you want to add social proof just to make sure that this product gain trust again we want to gain trust if we can prove that this product good that this product works we can do this by reviews or any other social proof mechanism that we can have like gazillion units sold or five points reviews and so forth this will contribute into social proof and gaining trust and lastly if this product has customization options you want to show these below that kind of like hero section of the product page you can elaborate deeper into the features and the stories and a lot of times buying one product is part of an experience of buying multiple products on a website and so at the end of the page you will want to make suggestions for if you like this maybe you'll also like this and that way you can increase the value what's called average order value right if you buy more the business makes more money and so becomes more successful so you want to make more suggestions and like a lot of things uh when people make purchase consideration a lot of times they have questions so make sure that the support or help is easily available after people purchase something or in order for people to purchase something they have to go through a checkout page now the flow for checkout is usually something like you enter the shipping information the billing information you'll get one more chance to review your order then you'll make a payment and then you get into a confirmation page there's some best practices but which i'll cover right now but i do encourage you when you're making checkout pages the design and the best practices for checkout pages and e-commerce in general are constantly changing because people are testing and a b testing and technologies are changing all the time so i do recommend going back to the research phase to do your research in terms of best practices for checkout page but i'll just say shortly of course you want to only ask for the necessary information because you want to you know decrease steps and make decreasing steps will most likely increase conversions you want to minimize the distractions and you know options for them to make it say oh let me check something else so a lot of times in checkout processes you'll see that the navigation link is actually the navigation bar is actually either totally different or is totally gone because you want people to be focused on where we are that you don't want them to go check out something else if you want them to complete the checkout process a lot of payment methods usually also increase conversions and you want to make sure that everything is clear and visible and you want to also design for error handling right what if they put a different uh you know a wrong card number what if they didn't put their name how did those errors look like which is also something that we'll talk about when we'll talk about forms and let's talk about forms so forms as you know them as people fill in information and submit it a checkout process is just one use case of forms but we'll use them also for contact forms we'll also use them when people want to sign up for a newsletter or or download a resource or something like that now some guidelines in terms of forms first of all you want to you have to use a label right and a label basically means what is this form um you want to put the label on the top of on the top left corner of the field and that's because that's the easy way the easiest way for people to scan the form if you put it to the left of the box their eye has to kind of jiggle all over the place and a lot of usability researchers have determined that it's the easiest to read when it's on the top left of the corner why do you have to use a label you have to consider for accessibility right people if a lot of times people would use the placeholder text inside the form to say first name or email or something like that but you have to remember that some people are using website readers and stuff like that and once you get started writing there your that information is lost so the best practice is always to use a label and put it at the top left of the form label then one thing that you should also consider is what's actually on the submit button now on the example on the right it's actually a little bit hard to see because it's super small but on the left one it just says sign up on the button and on the right side it says sign up and uh get a free free delivery tips or something like that when they've put the value proposition on the button they've tested this and they've seen 30 percent more signups and so you you want to try and make this button valuable right understand what you'll get when you'll fill out this information so again make it as short as possible that will increase the chances of somebody actually submitting it put the labels on the top left always display them give them a good reason to submit and use placeholders just to give them an example of what kind of text needs to go in here this is specifically true when you're doing something like phone numbers do you need to format them in a specific way credit card information the same do i put all the numbers here do i have to use dashes something like this when you put a placeholder that teaches people how to use that field all right the next topic is the content page and content page sometimes it's going to be a full-on page of its own sometimes it's going to be just a section in your website but this is super super important and you want to make sure that it's very very easy to find the contact page one of the top reasons somebody goes into a business website is because they want to tell something or they need help from specific people and so that is one of the most common uses so you want to make it very very easy to find where is the information how do i contact these people now if you're going to use a form you know a submit form just like we talked you want to make sure that it's short that being said some people hate forms and so always make sure that you also give them a direct email link so they can email you from their own email client or depending on the business you want to give them a phone number where they can just contact you now sometimes a business especially as businesses grow they're trying to decrease the workload of people calling in on them and sending them emails so they would actually put in the contact page some additional information such as help centers and faq and they will try to anticipate what questions do they usually get on in terms of support and they just put that information there already sometimes as a different you know help or knowledge base page sometimes they can put it on the contact page and that just helps to save up on support tickets now depending on the business if this is a shop if this business has branches sometimes you would like to include the address sometimes you would like to include a map if you want people to show up at your business that really depends on the type of business now the last the last component that we'll talk about is the footer you're probably familiar the footer is the thing that's at the end of every website now the reason that we have that first of all you don't want to just end the page without anything you always want to let people know all right what else can i do here and so this the footer is usually the place where you answer those questions right it's where people will look at what else is on this website right now it's also so that's where you're going to put almost every single page that's on the website in terms of high level of course if you have hundreds of blog posts or something even if you have hundreds of products you're not going to put it there but the category but on a high level you're going to showcase all the pages over there and that's also very good for google in terms of seo because that's essentially what google calls a site map like what are all the pages uh sitemap just like we've mentioned you know the structure of the website this is essentially a visible place for google to understand the site map and all the pages master pages on this website this is also the place where you'll probably add the privacy link terms and condition all of that kind of stuff social media link that's also the place to put it probably not on your top navigation as some people uh do and if you have any other calls to actions such as you know secondary such as joining a mailing list or something like that sometimes that would also appear in the footer okay so at this stage you've decided what content should be on the website and you've actually went down and structured it and drew a site map basically information architecture is done content strategy is done you're now moving to the phase of developing the actual content and that is something that a lot of designers struggle with i would hear all the time they're saying oh my clients would not send me the content they they do not write the text they did not send me the images i'm stuck i can't move forward it's very frustrating so what i suggest as a first step i always suggest for you to do the heavy lifting for them your clients will always be busy and it's always much harder to create something from scratch versus saying fixing something or improving something so if you do the heavy lifting for them if you create the zero to one you will write you know the initial titles and initial text and even put placeholder images then it would be very easy for them to say no i don't like this title or change the word there versus writing everything from scratch also it will enable you enable you to move forward with the project and only say all right you need to approve this but i i'm basically done with my work right and you can't wait for them to send you the context because you won't be able to design without uh without actual text and images i mean there's you can't really do a good design when you're only working with lorem ipsum and you don't know how many words you have and how much text you have so i do suggest you always do the heavy lifting for them after you do this you send it for them either for approval or just for collaboration you tell them here's how it looks right now you're welcome to edit this and it's great to if you're using a collaborative tool like figma you can give them access to it and they can edit the copy themselves even before it goes on the actual website so because i'm telling you that you should probably write at least the first draft of the of the website by the way you can also hire somebody to do it if you don't want to do it yourself you can always hire but i do think that it's uh once you get into the habit um you'll you'll get better at it and it's worth doing it yourself so i want to give you some notes on writing for the web this is we don't have like a full-on copywriting module here but i do want to give you some notes about writing for the web so first of all i want you to remember that on the web people don't actually read they scan they skim so you need to plan for that you need to consider this how can i cram in as much information as i as i can so that when they are actually scanning just the titles just a few words here and there they're still going to understand what i want them to understand now one way to make it easier for people to consume stuff is you know separating the paragraph and writing and writing shorter paragraph versus just putting a huge chunk of text when you see this huge chunk of text that is actually intimidating you know you need to consider people are busy people don't have time when they see something like this they are intimidated when you break down the paragraph into short paragraph at least they can skim they can read the first few words of each paragraph and see if that's what they're looking for and it's actually helping them to better understand what's on the website now headlines are 80 cents on the dollar meaning those are the things that are probably most probably going to be read like 80 of the time people are just going to read the headlines so put your efforts into creating good headlines the paragraph is way less important so just put your main efforts into the actual headlines and of course if you can use sub headlines that would also make things more scannable if you can break things down into bullet lists or lists in general that would also make things way harder to consume and skin if you can make a text in general shorter by not using all these purposeful purpose less words that would make the text shorter increasing the chance of people actually reading the text now you want to remember that people are visiting a website because they have some kind of a problem that they need fixed and if you can write explaining the problem and how the problem is solved that would resonate with people so try to write to actually talk and so and talk about the problem and show the solution of the actual problem and something super super important in general at all times you don't want to talk a lot about you you mostly want to frame the copy as this is about you this is how we're helping you because people are you know people care about themselves they don't really care about you it's there it's like seth godin my one of my favorite quote is i i the only emails i like are me males right emails about me i don't care about you i only care about me so this is very true to every type of writing specifically on the on the web once you're done writing do your proofreading right i am so bad at this you want to make sure you eliminate grammars you want to you want to add a little bit of polish no errors i use grammarly all the time there's other tools but you want to make sure that you have something like this on your computer you want to make sure you run through this before you send the text that being said i always tell my clients please proofread the copy yourself and approve it before we go live i might have errors i always say this to them because i want to move the responsibility the final responsibility to them on checking that the text actually represents them actually i'm not a writer unless if i hire a you know a proofreader or an actual writer then the responsibility is on him but if i did this as a favor as a heavy lifting which is what i suggested earlier then you want to move the responsibility to them i am not like a full-on copywriter so i don't take the responsibility on the text i want you to review this and approve it all right let's jump into a demo and i'll show you how i'm creating a site map for a potential clients okay so in this example i want to create a sitemap for an antique ecommerce shop of course as always i'm gonna do this way too fast but you'll get the hang of it i'll start off with my ideas right this is my prep so an antique e-commerce shop what would it be um so first of all of course they're gonna have product pages right it's an e-commerce shop what else are they gonna have they're probably gonna have a home page right they're probably going to have but what needs to be on the home page so let's think about that first they might want to have something like featured featured you know product something that's new maybe they want to have they probably need to have categories right they might have and then they have product pages um what else might an antique ecommerce store have in this case let's say i know them and the the fact that they are an antique uh shop they want to really showcase and be proud of the customers that they haven't bought their product so maybe they these this company wants to have our customers uh just to show their customers happy with their product or cut so they might have our customers section they probably have testimonials testimonials uh they probably have need to have because this is an antique e-commerce how we ship right we need to know how are they going to take care of these antiques while they ship them what else might they have testimonials we said maybe that's reviews or something like that what else might they have how we ship um maybe they have something like a vision maybe they have something like how we find our rare products um what else might they have all right let's let's use this as kind of like my first idea um my first idea and i would probably go ahead and take the of course i didn't do a research and so you should probably do your research and everything that we've covered so far but let's assume this is my prep and these are my ideas i'm going to take them and we're going to share them together with my clients perhaps on this you know perhaps on this particular notion page as well because it's going to be easy to brainstorm um and based on this we can start actually doing the you know what is the structure structure um structure and this is kind of like trying to do visually on the page here the cart sorting thing so let's see what goes together um feature products uh and maybe testimonials and also maybe how we ship um [Music] probably also about us right about us um it's stuff that can go into the homepage so i'm gonna say home and in the home we're going to have featured product product and then we also going to have um we're going to showcase the categories glories categories in the home page we're gonna show um testimonial millennials on the home page and then actually maybe how we ship is something that is important enough to go on something like an about page so we might have you know going back into the original hierarchy so this is about page and in the about page has the vision and has who we are like about us and then we have how we ship here how we ship and then of course in the categories so we need to have basically a category page category and in in a category we of course have the check the product page okay by the way under a product trade we probably have a checkout page um yeah okay so i think that is kind of a but one thing to note though is that these are probably sections within the home section so this is one page this is one page but here this is not really a section this is actually a sub page so let's assume we've brainstormed this with them we've made the decision that this is the content and this is the main structure i would then go ahead to just visualize this to make this um easier to see in terms of structure on using a site map so we'll have a homepage let's see what pages do we have here basically in terms of pages we have home uh home right then we have depending on how many categories we have we have a category category one with product one and then of course if this is a big ecommerce you're not going to list all of the products but this is basically the page underneath it so i'm just going to write category category because there might be a lot of categories similar categories and then product also i'm going to use this to know that there's a lot of them and then on top of this we're going to have something like the about page about page and then after the about page we also have yeah in what we've drawn that that is basically the structure right so that might be you can make this you know pretty with something like this just to showcase you know let's make this bigger just to help the clients visualize the structure here and then also you might want to based on if you want to you might want to just create the sections or the content that is included in for example the about page so we have the vision about us and how we ship you might want to put that here something like this just to clarify what content goes in this page and you can do this for the home page as well this is not mandatory usually you know the site map would only create the main pages but this is also valuable to understand later how to structure each page and what content you then need to go ahead and develop i'm not going to go into content development in this demo but i think you've got the gist of it all right so let's wrap this up what i want you to remember and what i want you to think about when you're finishing the content stage of your design project is is the website has a content that actually helps it to achieve the goal that you've set up together with your clients and is the content structured in a way that makes it easy for the users to find what they actually need and the third one is is the content actually optimized for people to consume it the way people consume texts and images on the web i want you to think about these three things and i will see you on the next video [Music] you

Channel: Flux

Views: 7,814

Rating: 4.8851676 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: j0y8YBhDjIA

Length: 63min 22sec (3802 seconds)

Published: Wed Sep 22 2021