How to Design A Website - Part 1 | Christine Tran | Skillshare
Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
15 Lessons (1h 16m)
    • 1. Hello

      0:54
    • 2. Class Introduction

      3:38
    • 3. Design Process

      1:26
    • 4. Users

      1:19
    • 5. Project Outlines

      4:37
    • 6. Content

      4:09
    • 7. Brand Profile

      3:40
    • 8. Mood Boards

      2:14
    • 9. Color

      4:28
    • 10. Typography

      6:21
    • 11. Navigation

      8:23
    • 12. Sitemapping

      16:34
    • 13. User Journey

      13:14
    • 14. Responsive Design

      4:34
    • 15. Continue to Part 2 Message

      0:20

About This Class

This course is geared towards new and experienced students in Web Design. Through each video, students will learn the design process of building and design a website. They’ll learn how to build a Project Outline, Brand Profile, and build Wireframes.

What you’ll learn:

  • Design Process - Site Mapping, User Flow, WireFraming, Prototypes
  • Web Page Layout
  • Branding - Color, Typography

What you’ll create:

  • An author's personal website

Transcripts

1. Hello: So we need Christine. I don't have to go on designing my Flatiron school graduate and I have a background in visual design, training, strategy, marketing and advertising. And I left Parliament taught myself how to code. All I see sources, of course, is such a still crush Still shared code academy Connick head down me and many others. If you want to learn more about my thoughts on tech design, you can see the link down below which my blog's. And if you want to know more about me and my projects in the work that I do, you can visit my website. Don't below along with Jacob so you can see a Friday of my people. Thank you for taking this course. I hope you learn more. About what development design. Let's get 2. Class Introduction: hello and welcome to how to design a website. This is my first teaching costs on secure share, So I hope I comprised you the best knowledge and skills about what designs with the design from two menthols. As part of this class, you will learn about the design process. Helped to create a brand profile. Why're Freeman prototyping techniques and what page layouts through a responsive design, the total using our B X D envisioned and Google draw? All are free teams. Please sign it with Adobe Creative Cloud Toe access. It'll be X'd. We'll be using this tool to design our wire frames and prototypes. If you're interested in learning how to and then it will be software works. X'd would be a great introduction. Adobe is the maker, floater shop and other awesome problems. Since Photoshopped and other APS come with the price, X'd is completely free. All you have to do is click on this button here on this website. I'll take you to the Adobe Creative called Sign of Age. Please sign up for envision at Los Well, we'll be using this tool. Far food courts. It's completely free and envision has a tool for prototyping, but for this course will stick with the deal. BXC, for prototyping and envision would be used for our mood boards. It's really simple, although already have an account once I click this button and it will take me to my home page. So in the meantime, please sign up for Adobe Creative called and envision that last but not least, Scougall draw. If you don't already have a Google account, please clean up. We'll be using Google. Quick draw. Excuse me, Google drawing. It's more like it and from here will be playing with our site map tools from materials. We're going to start using forms that I created myself. So if you can please download the Web design process forms and I created these forms to help you along with this course, please feel at all as we move through each lesson to help you design your website and design Resource is I created a list of researches of helpful websites to help you with choosing funds, images, colors and other design tools. If you prefer to, it's like Matt, your website by hand. You can print out that design websites site mapping start filed that I have here. It's a blink file and you can start your set. My thing. My hand. This is the design websites like nothing finished file Here is the finalized not miking tool of our project. This if you Condell up this it will be a way for you to understand how sad my works which will be discussing later. Last but not least, I would ask you to download the dopey X T filed here. We have to start file which will start working on our class projects together. And then this is the final eyes work that we will be seen what's we finish our project. So once you have your tools and materials set up, we'll get started on the design process. We'll see you in the next video. 3. Design Process: the design process. The design process helped us off A problem through various stages from the surface of design process can look like this. We start by to finding a problem. To solve the problem. We create many ideas has been the plan exchange. We shape these ideas that structure them through wire frames of prototypes. Then we bring those ideas. Still, life do coke. And as always, we test those ideas or solutions to the problem to get feedback. What are designed processes? More complex? It can actually look like this. There are plenty of collaborations between designers, developers and researchers. Together, they bring ideas to life based on how users behave, feel and think. Key areas involved user research, user experience and user strategy and testing. And a whole lot of design thinking does. I think he has a process for creative problem solving wolf design thinking and that the design process constantly change. In response to feedback, We learn from users and prototypes toe help, redefine the initial problem, create new ideas or modify existing ones. So now that you have a better idea of what the design process is, let's start planning our project. See you in the next video 4. Users: during the planning stage, we'll talk about project outlines, brand profiles, user journey, site mapping and visual design. The more that's researched plan, the more I guess we can gain what we should keep in mind of. It's the Who and why, what and how of user interactions to our site during the Who and why stages were thinking about our users. We're asking who might be visiting. Will it be fans, potential employees? Potential clients? Numbers or curious? People were also asking, Why were they missing? Could it be goal oriented or exploratory? Meaning? Are they looking for information, needing specific services, wanting to be a potential employee or employer? Or are they just cares about the person, product, company or brand? And they want to learn more about something or someone. Well, for your 1st 2 dio, think about your users and why they are visiting your website. Once you determine your users will start outlining our website, see you in the city of 5. Project Outlines: in the West face. Ever use your interactions? We set up our project outlines here we answer the questions of what's the partners of the websites existence? What are the action goals for our users and what are the priorities or objectives we have? Where websites type of action goals include contact sign up again, buying something, getting information, listening to music, watching videos and more action goes to find the purpose of your users wanting to interact for your website. For example, this is an artist that I like. Her name is Selena Child. I love her artworks and bashing goal for me, when I look at her Web plight is to find out more for artworks going to her gallery's learning more about her as a person and artists. If I do want to get in contact with her, that's my action goal. As we go to her contact page, we conceive you a cute little image, a little subscription mailing list that I can sign up to a personal contact, you know the most to representation, along with a list of social media accounts that she's a part of. So to contact Alina child, I can contact her directly sign up for her subscription mailing list or follow her on any of these social media platforms. So the goal for me as a user faction goal would be to contact looking a child and any which way or for my camp. Another example would be Spotify. So let's say, as a user, we want to sign up for Spotify. So we're gonna click on this button once we visit the website and we consign up with Facebook or sign up with an email but actress of our choice. Once you feel in that information, quick, the chapter box we can click sign up. So that's one action go. Another action goal for Spotify website between users would be, if the user already has been account, they can simply log in. So once you're on the log in page, you can log in with Facebook or the email address and password. You've created another action goal that's very common this to be able to shock. So what I'm of on? Let's say I'm looking for a particular item scrolling down. I see the item of choice I want make your review. It's like the quantity I want first to card. I have the item to cart, so let's go to proceed to check out now. Once I proceed to check out, I'm gonna be prompt. This is perfection of citing into account. This happens because I currently don't have an account or I'm not signing in in order to performing the action goal of making a purchase. That's been at least another comment. Actually, go would be to look something up. So going back to our, um, action goals here, we can see that everything that we come across us online has a purpose. Here's an example of our class project. When we crop across a site slide like this, it means I'll be walking you through what we've just learned and applying it to our class project. So let's get started for our class. Project will be building a book off. There's website, so these are her informations for her project outline. Her purpose is to sell some books. Can opportunities showcase her work and share her expertise in writing. Her action goals are to sell books, contact for opportunities, direct communications and connect via social media, or have used to be a followed priorities or objectives include showing books to sell, calling and emailing the mother to connect or to follow the father. So for your to do use your what design process For that, I provided an answer questions to your project. Outlines and goals. Write down any you know, do you think will be beneficial for you. So when she career outlines, we'll talk about content. Siyuan next video. 6. Content: content. Another part of the what stage of user interactions is content content. Ask the questions. What does the website need to include? How will the content be categories and what will be the main categories content? Could be anything. Could be text images, icons, videos and more. Content varies from website to website, but they should always be relevant to your action goals. Just take a look at some examples. Text content should be included on a word document. Likable docks. The more context content you include, the better. We can figure out what should or shouldn't be included on our website. It also helps you organize your text content to your main categories. So here are my text content for my personal website. As you can see, I bowled it the main categories home page in about, and I also have it for work. I have a lot of other text content that I categorized into my main categories. So as you can see, the more I conclude, the more can understand about my website and what I want to communicate. So the other part of content, including images we have to keep in mind that many images out in the world have copyrights . That means you need to get permission. Luckily, websites like unspool ash allow us to use high quality images for free political. Look at an example. Let's say we want to look at an image for dog once we enter our search. As you can see, we have some awesome high qualities of dogs. Let's say we wanted to download them while we have two DUIs Hubbard. Click on this arrow and we'll have it. Download it. Make sure you credit the artist as well. Another content information. We can include would be icons and graphical elements. Many websites make use of small visuals like icons and symbols. Arrest links with flat I icon some elements and I concert free did to download and use. So let's say we want to look up the rocket got some awesome rocket images because you can see some of these are free. If we come across a crowd, that means it's part of a subscription account, so those icons won't need to be purchased. But let's just say vocal with this particular one so we can click this button. Once we wanted download. We'll see some PNG and we'll click on the largest pixel size of 120. We'll go over this more as we work on our website in the class project. As you can see, our class project content will include through text name articles about contact and books. The images would be current book images. Self portrait look, images on article images. Wings would be social media, wings, sectors, Twitter, instagram and Facebook. Graphical elements include logo, social media, iPhones and a touch on text. We're going to use something called Lauren Gibson and these air filler text. So Lauren, it's, um is actually, um, placeholder text. And what happened is that for our website, since we don't have text relevant into our information, then we're gonna use some filler text. And as you can see, I can generate the Laura Epsom. So if I say I want to paragraphs a larger sum, obviously generate because I scroll down, I'll be able to coffee all this text and copy paste on to my website so we'll talk more about this as we start building the website, our first to do on content. Let's collect and organize your content using the pdf form that I created for you. Please fill out the form and fill out your main categories. The more you can include text information, the better. So after collecting your content, we can build our brand profile. We'll see you in the next video. 7. Brand Profile: brand profile. A brand profile defines how your brand should look and feel and defines. What message do you want to say? Branding described who we are, what we like and what we stand for. How express those characteristics is to burn guidelines. Running builds the visual identity of a person or company through language, style, personality, imagery, interactions and visual language. When designing a website for yourself, you use your own voice while designing for a client means designing in there. Boys, the finding a style of personality means were shaping character traits or something users want to own, imitate, embrace or self identified with through photos, drawings and symbols and other imagery, we can reflect those traits the way you interact with the user. Expresses your character traits too well. Your interaction be Hume ears animated. Will you pose questions, or will you be strict? Visual language is the fun part of printing. We get to create color palettes, choose phones and find graphical elements and icons. Let's take a look at our class project with their brand profile. When working on your brand profile, make sure you can make a summary of your entire brand. For example, on our project. Our authors said she likes to, right, so this is her summary. She said she likes to write her writing styles witty, and so was her personality. She's creative, but she likes to show a cool, minimalistic side of herself to be less about the fancy details, and being more about the content is what matters to her. So this is a really short contrive example, but I hope this brings the point home. When you're building your brand profile, make sure you consume, arise who you are and what you would like to bring to the table. The Miller part of the brand profile where we talk about our character treat so to reflect your character treats, we have to come up with a phrase or a one word that really sums up the entire brand for this example are authors and she's witty, so her character is witty, and we're trying to figure out what this would mean to her. For now, it says she's cool in color but not cool eyes in the pop culture. Cool. She's a minimalistic, she's soft, but she's not quiet, and she's simple, but not plain, so to reflect our character traits. We can actually find images, colors and items that inspire us so we can use unspool, ash or any other visual imagery services so we can find items that will help us to find our character or sick traits. So let's say, for example, we're looking for witty, for our author squirreling down. You can come across this image, and this is something she could right diet. Did I eat that? So this would be a fun image that we can collect for a mood board. So once you click on this download button, we can save the images in a folder that will help was build our mood board. So for our class project, I've already provided the images will be using and under the resource top. We'll be sure to download that and put it into a folder into your class project. So, for to do, let's great a brand summary. Think about your character traits and find some images that can help you be inspired. Once you define your brand summary and character traits, we can start on our visual design, see when the next video 8. Mood Boards: So once you have your brand somewhere in character traits defined, we can start putting our Bram profile together on a mood board. The goal is to find patterns, colors and ideas. We can use a move for through Pinterest or envision. But for this class project, we're going to start working on envision, and I'm gonna show you how to create your mood board. Let's get started. Once you sign into your vision up, let's click on this button here and we'll start creating aboard whole name. It's kill share project. Let's stick with the masonry style. Let's get started. So here we have is our report and this is our section here, so let's start adding some images that were inspired up. Remember this picture here? We've decided to include let's go back to remove board and I've already downloaded it into our folders. So what I'm gonna do is I'm gonna grab all the photos that I was inspired. A and I'm gonna click drying it onto the board here. It's going to take some time, but these are all the images that will be included with our images uploaded. Let's create a title here, images every scroll, I'm down. You can see all the images that we've uploaded with a few who still taking their time. So let's get back up here and then reached that we were most inspired of. You can use that to help us to find our color palette, and I like this particular photo. So let's go back to our folder and we'll find that photo. Here we go. So we're going to start using that photo for our next step off colors. So for your to do have you set up your own board, you can use Pinterest or envision, but the goal was to find imagery and to see if you can find any patterns and colors and ideas that you like with your in board set up, we can then start creating our color palettes. We'll see you in the next video 9. Color: choosing colors can be fun. Colors are more than what they seem, and it makes you feel and think. Colors can come with many symbols, and when collecting various colors, it creates a palette. These pallets are like words to finding a mood or feeling, so let's take a look at some examples off color generators. One color palette generator I really like is for Canda. It's one of my favorites because I can hold a photo that I like. And it all comes five million colors that were populated from image. There, we can get a text cold number and a name, So this is one way of generating a color palette doing image that you're inspired up. Another color tool is called coolers. Here at the color generator, you compress base bar and outcomes. A bunch of other colors that come about using colors is pretty simple. You can drag a color bar of your choice. You can adjust it as needed. Thank you saturation and brightness. If you like a particular color, you can also keep it locked in place as you generate new other colors. As you notice. We also have the hex code number for the color as well as a name that will come in handy in a little bit. Let's move forward with our project. I'm going to Silicon Image that I was inspired by from our invasion board. So let's get started with that. I've saved the image onto my computer. I'm gonna take that image. I'm gonna drag it. What comes the five main colors. So let's populate this onto our envision A as well as our dull B X D file. So let's start with Envision at Honor Report will create a new section, and here we can add a color swatch. I'm gonna move this aside. I click this button to copy Paste. We'll do the same cure. And here we have our color. It's percenter. It's got back to our fort. That's the same for all the other colors. Now that we have our color board set up on our mood board, let's update our dopey X'd file these open skill share perform. You'll start. As you can see, you will have an empty blink. A system colors page where all the blocks of meat great. So let's update our color palette. A copy. Here, stretch this back in. Let's click on this box. Once you click that box, let's click on this button a little paste our code. Now that the color change that save a tour swatches, make sure to update your hex code name here at it. Name our color here. Now RGB, as we mentioned, stands for red, green and blue. So let's find our midnight blue color RGB color code that lets Internet to do that. We'll go to color hex codes. So let's stretch this back out and I can show you how we confined so we can coffee paste the code. Here they get in tow. Here we have our list of other color codes. RGB step for our cook color is 9 59 and 74. Select and put that now that the file save Let's through the rest for all the other colors . So here we have our system colors all set up. It's been saved on our file, and it saved on our new court. For your to do on your own personal project, find your color palette you can use in vision or Pinterest or any other tool you find very useful to your own needs. So let's move forward to learning about choosing our funds. We'll see you in the next video 10. Typography: So once you have your colors chosen, we can start choosing fonts. Now. Typography is a study of typefaces, and there's a whole science behind it. Now. A typeface is how a text looks, feels and reads. It's the art of the text created by an artist or artists, and it's basically what we see when we read texts. Now. Ah, fun is a file that contains a typeface, and we use fonts on a computer taxes the type AIDS. Let's look an example. The front monster rock would be installed onto her computer, and when we choose to use, this font will have access to its typefaces. And those typefaces are light, normal, medium, semi old, old, black and a few others. Now a type fees can also be categorized. Sarah's and sensor types. There are other categories, but Sarah's and Sand Sarah's are the two most common. Now Sarah's Air, the little chicks that stick out of the letters, while San Sears, which means no, Sarah has a more plain look that's commonly used for text. Some typefaces are best used on printed items, while others do well on the Web. And if you look at this example we can see something called tight pairing. We have a San Serif type and a certain type. All that matters is that we can see a balance and that text and all the content can be read very easily. So let's look at some examples of fathers we can access My phone's dot com My hans dot com has one of the highest professionally design and quality fonts and typefaces. So when working through this website, we can also see a price tag but some of these fonts. But luckily we have what it's like like Google Farm that will allow us to access funds for free, and we can access through their categories. And we can also edit the sentence so we can test how are phrase Will might look on in on our website. Listen, we want to change our phrase to something we can on our website. So let's do this. You can apply that phrase to all the fonds, and as we scrolled out, we can see how the font will look long to our phrase. This is one great example of how we contest thoughts and typefaces. If you decide to choose a lot, you can just click on this button here and then down below. It can say this button and we can download into our computer to access the different type faces and styles. So let's before to our class project. So luckily, when I was working on our project, I decided to choose the thought. A quick set was quick. Son, we have four styles. That means there are four typefaces. We go. So let's apply Quick Santo our board. Let's go to our envision and recommit at another section in ST. So what I have already done is I took some screenshots of our typefaces from local bonds. What? I'm gonna do its head back her folder on typography, Grab all of images here and click and drop a cure. Most of the crimes like we couldn't start changing our typeface on to our dopey x d five. Well, I ever done is I've already up loaded quicksand. So let's say I took this particular item we're gonna see quicks him. And right now it's sent to the regular high pace. So what I'm gonna do, I select all this particular texts changes to quicksand and the same will go for these items here, the pre sumed up. But we have only old. So let's hold this'd said to me that way. Have regular set to regular and the next thing we can do is update our text colors. So what I've already done is we already have the great colors. So what we can dio has changed three main colors from different shades. So let's just to that click on that choose unlighted copy piece now back to our shapes of colors. Now we can update all the texts, and we want to have colored. She was the darkest great. Let's change the body of the text to something a little more lighter. So what That settled? We can actually save the style right click up. You can see that character styles assets. What that means is we cant access thes character types later on as we work on our prototype , when you do the same for colors more. In the meantime, I will like for you to choose your fun. We'll meet in the next year. We'll start talking about site navigation, stealin 11. Navigation: after defining our users and their purpose of interacting with our website, we want to know how, though navigate to the website and when they're in the website Hello navigate within it. Navigation can actually be broken down to external and internal externally. We want to know how users find your website, how old users get to your website. What access points while they take types of access points can be during email, where a link within the email and when you click it and take use to the website. A basic search like Google being or young a direct link, meaning users visit the site frequently so they remember your remaining. So all they have to do is enter the websites name into the search part password, not password protected site means you only have access to the website if you create a password so these could be like a bank account or a social media account. A slow social media through a profile search or friends posts. You can actually see information about the Web site or the company or the the individual. So when you go through social media, there's plenty of access coins within the post itself or the page itself through paid advertising. It's a common access point that many users get directed to. So when you see a ad and you're interested about that particular item or information when you click on, it will take you straight to that website. There's something example of an access. This'll is my user journey, which will speak about later on in the course. But in terms of navigation, how users will get to my website and complete a task depends on what actions will take. For example, I have a potential employer curious about me through their action of viewing my resume cover letter YouTube, videos of a project. Get her profile, Twitter or my blogger define me on directly through basic search. Like Google, they can be directed to my website. So there are many avenues that you can access a website, and once you're inside the website, there's another sort of navigation, and that's called the internal. So while we're in the eternal, you're asking questions of how users get from one content category to another. How many sexual abuse take to complete one task? Cool. So let's take a look at our class project now class project. When we're talking about navigation, we're speaking about the internal notification. So our authors website Internal Navigation are the following. We have main categories such as home about looks, articles and contact pages. So within each mean category, we have the following items that we will be, including on that particular page. It's on the home page. We're gonna have a cover page, a book title book, sneak peek with pre order form and other books listed on the about Page will have Self Portrait and a bio Within the books. Page will have a books gallery with the title and its description, along with the length to take users to that particular books page on articles will have list of articles. The article, Image, article, title and the article description and lastly, in the contact by age will have toe information how users can contact other So we'll be including her email, a social media account and of short board. So for your to do ripper, your external and internal navigation, review your content categories to determine your internal navigation Up. Next, we'll start discussing about site mapping. This is where we'll start mapping out our internal navigation. See in the next video 12. Sitemapping: site Mint describes a navigation from the home page to the different Web pages were piece of content of our website. In a way, a site map is like a content flow. How do we want users to get from one piece of content to another and maps users path when interacting with entire website? So in terms of internal navigation, it means we're connecting our content. We want to make sure that the connection to the internal navigation makes sense. So how users get for one piece of content to another. How will you use your skiffle one content category to another category? So here is an example site mapping. This is my slight. My for my personal website. Using Google dry was able to map out my contents and blocks. On the bottom left, you can see a legend. Yellow stands for the Lining page on the various colors below represents tabs, tab contents, secondary pages at third party sites. So here's the breakdown. When a user accesses my home page, those who have a Nobel blur on the latest projects gallery from their user can navigate towards the contact page. A work page on the blawg now the blood won't be a separate webpage, but it's gonna be linked to my medium log, which would so use your clicks on that link. It will take them straight to the block on medium. Now, when I use your access the work project page, they'll see a variety of projects. But those projects are listed with the tabs. So when a user clicks on any of those tabs, whether it be love development strategy designed illustration in the book arts will be navigated to separate pages well for what development strategies will be navigating your webpage, meaning if their cures about particular project within that tab. Once they click on that information or that project will be taken to that. What that projects personal page from there, the alert or about that project, including any external links that's connected to it now for design illustrations of Foot Bart's, those individual projects won't be navigated to new webpage. It will stay within the tabs, and you could be able to see any other external links related to it. Down at the bottom would be my footer. Here are more social media icons, so let's see how this works. Navigating to my personal website. This is the home page. As you can see, we have the work plug in contact main categories. It's on the home page. If we scroll down, you'll see in about Blurred and my latest project. So let's see if we click on the working age. As you can see here, we have a variety of tabs that we could click on. So if we're still in the Web development tab, let's say we look at the Project t create when clicking on T Crate were directed to the main tea trade page. Here. We get to learn more about this particular project, but let's go back. So we decided to go on illustrations. Take a watch. Hello. Here you go. We could see our particular project. As you can see, I can't click on each project to take us to their own personal page because they will have won their own information is set within this'll particular site. But we can sift through images for more information. If you go to the contact page, we have any contact information below. Here you can see the foot floater, which I included my social media icons as I mentioned When we click block, it will direct us towards my blawg on the medium, which would take a second Duke of So. As you can see, every little thing matters. The way you interact with your users is extremely important. Here we have the logo, which once clicked, could take you back to the home page, so you want to make it as simple as possible for your users. The more they can navigate your website with ease, the better they will return and appreciate us individual or their class project. We're going to start working on the site mapping of our authors websites please open up number one designed website set start on Google draw Harold designed how our website will operate from the turtle in application. The first thing we need to Dio is put out blocks of our main categories. So let's do that. That's been on a block. Well, say home for home page. Let's make sure that everything centered and to make the text a little easier on the eyes. Let's change that. I will make the fought just a tad small Perfect. So it's least Isis a tad here. I will put this in the center of our document served with home is one of our main categories, but because it's the main home page, it's gonna be directed to our other main categories. So let's build that out. We'll have a copy paste. I do use short cuts on the keyboard that, however way you want a copy pasting your elements, please do way have a total of other four. Can Greece. That's what Jesus cycling up so has changed this to about books, articles and contact for all these elements. Let's give them a border one. It's changed it to grace is what's easier on the eyes. Use it to this cover. That's a line. These categories well, same middle. We will destroy everything. Evenly horizontal. Let's just be align it just like so Now we also have our butter where we're going to include our social media icons. So let's use thes two that we copy paste earlier. What coffee face? One more. You're lying. These guys was, say, Instagram, Twitter's and Facebook. Let's distribute these a little evenly pull things down here. It's also at some borders to these guys. Get him. Does this come in? Here we go. So next up, let's figure out how our content were be connecting. So we said on the about page, we're gonna have a bio in self portrait books. Page, however, we were gonna have a gallery of books for each book would be led to its own book page. So let's do that. That's a secondary page. So let's change this to book. And because the gallery it's redirecting to a multiple webpages, let's make a symbol to notify us that the books page has connected to multiple secondary pages. So what we're gonna do is copy paste, we found out. Delete that tax. Um, let's give our main categories. It's white color. We could do the same. Her home page was yellow, So going back to the books, everything changed the order to back. Move this up here. Just a tad makes a little meat. You can also make another will copy paste. Change the order again. It's up to back. You just adjust it like so. So let's group these items, and then let's give this a border of DOT to dots. It's a secondary page and will give it the peach color and test now in the book page. We mentioned that the book will have an external link to a site that allows a user to buy a book. So let's build that out. That's copy pace, but the element drag this down will say site to buy a book. And let's change a color to Gray because we said external links are great, but let's re changed the border toe a solid. I am gonna change the font size as well just to make it a little easier on the eyes. There we have one section of the what page done. The connection we have with articles is that the author will have a blurb of articles that she's written for freelancing. So each of the blurts will be able to link to the main article on the other website. So that's an external link. So let's copy pace. Another item here, just a light it like so you can use the red lines to help you out. We'll say Queen article contact only had the email as well on, so let's draw that, too. But it's not a good external link, but it's still a way for contact. So here we have, is our content connection for our site mapping. Next, we have to make sure that what we want to Dio is point out what a user can navigate to. But first, let's group certain things together. As we mentioned, the main categories will be our main navigation for the website, so that's usually placed in the header. So let's make a symbol, so we'll change. This too transparent changed the border. Talk to God will change the order in the back. We can use the graph on the back of the document to help us like things a little cleaner and move in. You can do the same by saying here that this is a header and this one click go away from other what pages that a user will take. Let's change the size. Make sure that things are centered. So let's say the same for our footer will copy pace. During that below, I will say this is the footer, so let's clean the file just a tad. Make things a little Niedere, reducing some of the sizes. Still him the same could be for our content. Here dry, these guys slightly home page is a little bit all right So let's make the connection. Let's use our line. Tear will use the uncle connector so the home page can be navigated to be about. So all you have to do is touch that purple dot with your mouth. Hold it down there, button and drag. We can do the same for all the other blocks, But let's make that barrels for these guys here. So what we set of books Gallery leads us to a book page, but a book page can also go back to our book gallery, so we're gonna need a particular carol. So let's change and put the arrow holding your mouse blonde and hold the shift button. You can just drag downwards release. We'll do the same going upwards, we said a book. Get next to a slight toe, allow users by it. But so let's do that. And then the articles actually does the same for the main articles. Contact angle to the email as well. So when you're on this site to buy a book, there's there's a reference to take you back to the home page. So you couldn't read more about the author if you haven't done so. So let's make a connection there. Don't touch that. Just holding drag will go to the top clicking this select key. As you can see, we have diamonds. What you can do is hover over this diamond. Drag it all over here like so because it's an external connection. Let's change it to adopt a dot We can do the same for the main article. Let's do another like that dog back up here. Here we go. Let's change the dot to dot Click the select key, hover over the diamond. Just move it like so you can also drag it down. So it's a little easier on the eyes because this kind of borders of we're connecting. So let's move this over and this back out just to make it a little neater. Let's make some notes about this particular section. It's copy pigs, and we'll say when that's one click away from the books. Calorie, who do? Another copy pays to say right here that these are external books and there you have the site mapping. So now we've completed our cost project site mapping. I hope this makes sense for you, and that Google draw can really help us build our site, mapping through easy and intuitive. And it's a great practice if you just want to learn more about the tool or just to learn how to build diagrams. So for your to do build your site map diagrams once that's completed, we can speak about your journeys. See the next video? 13. User Journey: user use your journey is the flow he usually go through when interacting with an entire website. It revolves around an action goal. It helps us figure out what users will do and in what order. What's their path from point A to point me to complete one task or goal. The tricky part is to limit the number of steps. Use your takes to get from one point to another. Clicking on multiple buttons just to get information were to be able to buy something will annoy a user. You must assign in a purposeful manner so user has an enjoyable experience and will return to your website. Some user joining wrappings can be simple or complex. Like this. The idea user journey is to get to know a user's emotional response, their thoughts and overall experience. From those responses, we can get feedback to improve on our ideas to or to create new ones. From this example, we can see a users experience from finding a new look for new dropped from being able to find a service that will provide her than you look and in which she has a great experience and she will advocate for that particular company. The users overall experience contain many levels on is that multiple steps? But that's the point of use of journey is to get to know more of your users because they're the ones who is going to be your website. You as a designer will have to design to their needs and to their experiences up. Next. We'll talk about our class project, so we're going to start building out our authors dreams. Open up your file one design website user to me Start file in Global Drop. Let's change our action goals for our user. Actually go for a user would be to buy a book to get information on the author or book were to get in contact. Stretch out the block here. So let's say our user, it's any potential. What's in the trailer? Let's change the front size just to get a lot easier on the eyes. Make sure everything is center. It's given a border. Make it easy on the eyes. It's still just out Just a town, all right, so ah, potential customer can access the website in a couple of ways. So let's copy, pays and say a basic search It's a little too Google search and that's tracked. Stung a bit ongoing. Copy paste holes more just right above. I'm gonna see good. I am going to remove the border cold. Transparent. You change the Google search into a dotted border. Let's just drive this down a little bit more, so it's a little closer. So I'm gonna copy Paste this for the next access point, and that could be now. Use laughter from here. Console to but mix up. We can start building out the social network at this point. Taste that we'll see. So, Sean, let's drag the spots a little because we said Center this block. That's why it protects the center. So let's change this to we have Twitter. I'm stick around Facebook now. The other could be part of many other writers and crude book groups. So let's say good reads this one of them. Another. Let's just say up club just courage in Herrick. Another week be, um, YouTube. Maybe someone came across a YouTube page where she's talking about her books. So I think last sit for now. Let's just make a quick example of all our access points. Um, X points can be very complex. So, um, whatever you need to do to build out your website point to determine your user journey will help you with your website design. But for this example of this class project, we're going to make it as simple as possible. Center everything here and let's build Ah, website. I'm just gonna copy paste our elements help save some time, push this down here. Religion on our home page of our website is that she has a list of other book galleries. But in the meantime, we're gonna lay out just the main categories to get the home page we had about what books. We also had our articles on the contact page. Now we did say the books has a book gallery that would lead to a book page, the same for articles which would be led to an extended IT webs external link. Now, the articles will also be treated the same where it has an external link to the main article. So let's build an extra block. Use the dot to dot I'm gonna say books here, Another copy of peace. Her book. So essentially, we're kind of building our site mapping within the website. It doesn't have to be exact, but it's something simple. It still seems for articles here medical so that we're trying to build a small example of our website site napping. We did mention that the main article would meet us back to Harmony website. So that's another access point. So let's make this happen. So is this Copy paste these individuals here and we're gonna say external links. And this could be article, page story. Let's see that. Or it can also be the book buying site. Let's get back to our internal page. I'm gonna remove articles and books. Kristen would make it a little cleaner. We're gonna move off this back to the top and what I'm gonna do here. Let's connect these individual blocks. So I am going to do a Y and connect the dots here using my select object change to dock border line, and we're gonna use the circles to denote that beast are connected, and I'm gonna shrink this just to get a little cleaner has changed the shape of our website . Well, let's clean this up a bit. There were cold. The action go we have here. Would be to buy a but get contact, get information in contact. So let's just drive back down. I don't know. This is site. Just help clean things up back up here. Well, now let's air connecting our external and internal navigation using the Hubble connector. Well, the the potential customer to a basic search. Perhaps we'll have it long newsletter. Social network where they come across external links. Let's clean this up just a tad. I got up Miss Uppers Wall. We're just gonna This is a little bit more. Let's give these guys arrow months. No, the access point will always lead us back to the website, so let's do that. He's in the elbow connector, external links. We'll put that part here. Social network. Just walk, you know, the same and basic surgery to the website. All in all, the website will always take us to Oops, it's touched this particular purple gotten step. Buy a book. So let's select all these marks. Give it a narrow. Now we mentioned the article need to the external ings. So what? The with the book buying site. So it's great. I got to dot narrow with the elbow. Well, it's not care, and the article will be back here to weaken select aerials. Here, we'll chose the border. This'll guy. Let me see if I can get the diamond they have. That's what makes an arrow. It's choose a different L. So so far, this is how our user journey might look like a potential customer. Conexes our website through four basic access points. Basic Search England newsletter. A social network or do various fixture moldings that connect to our website. Within the West site, the user can internally navigate on the home page about page, contact, page clicks, page and article page on the books and articles. Page can meet to secondary what page or an external link. All in all, the action goal can be completed now the potential customer canal, either by a book getting for major or contact the Arthur. So this is how you use your journey may look like. Now it's your turn to that by your user dreams. Make sure to connect your content with your Charles navigation and think about how your users will navigate your website and what you want them to experience. Once that's complete, we can start talking about responsive design. We'll see in the next video 14. Responsive Design: responsive design of X. How our Web page layouts are going to be designed because there are so many screens on the ball from your mobile phone to your computer desktop. What page layouts have to be a restructure and responses the changing screen sizes. Everything is laid out in a very clean, organized and purposeful matter. Content will be designed to stretch outward but not set to a specific screen size. Why cream from prototypes help structure this layout. So what? Pages designed by stacking blocks the content of a Web page gets broken down into the body , where we have the header, main footer and a few other semantic blondes. Since we have to design contact, stretch out. We can use Greg layouts. We align CERN blocks to the Web pages. Grit. Here are some examples this artist Chris Bannister. He created a responsive wire room Jif. I don't think this will be a great example to show you the Constable Responsive Web. So let's take a look if you click on the desktop. As you can see, the desktops grow here is quite white on the content that stretched out. The product gallery has four columns and if we look below. The footer also has four Collins, and it's aligned as such. So it's a lying to make itself into a grid, and it makes it for a neat website, the navigation and the average groeller or another part of the content that's kind of split up. But if we take a look at tablet, they can see the product. Gallery has shown it took three column, so essentially a desktop can strict out its green to become a tablet. So a navigation average girl er, still kind of remains the same. But the product gallery and the floater their grid has trump to a three column style, and that's not so bad. But that's because keeping a mind would remove from device to device. Especially we're going from a desktop view toe a tablet. The content is shrinking, so another way to think about it is that content should be able to spread outwards. So that means when we work with a mobile setting, the content should just rely on the screen itself, has to be flexible. So on her phone setting, we've noticed that our content gallery has now reduced itself to a one column grid. And that's not so bad, because with the phone, when we're scrolling from top to bottom, it's in a one column section. Have you noticed the navigation? It's drunk itself into a hamburger menu so that those navigation can now be accessed by a drop down menu. How you design your responsiveness is all up to you, but there are some design patterns so we can follow. But that's for another video in the future. I just want to point out this relate, informative, responsive Web design. Blawg here, and they have great examples where they touch on real life websites. So here is food. Since I really like the way they styled, they're responsive design. So if you look closely, this is the desktop view. They have their social media icons in the flutter and their navigation on the left as a sidebar menu. They have the main image here in the center and a four column grid of other articles as well. But when you move to a tablet view, the navigation from the sidebar moves upwards to the top. The main image has moved centre to the page, and the four column good has stretched outwards on this information here has remained the same. Moving to a phone or mobile layout, we noticed that the navigation has been pushed upwards without the icons. The local has centered itself in the middle. The Mitch Gallery is still in the center, but everything else has become a one calling grid. So this is an example of responsive Web design. It's a great way of thinking of how you want to lay out your wire frame ings and prototypes before a class project. I'm going to stick to a screen size of 1024 pixels. We'll talk more about that when we get towards our wire. Free me, but we'll see you in the next video. 15. Continue to Part 2 Message: thank you for taking how to design a website part What? We've covered a lot of ground about the design process, especially the planning stage. Next up, please continue to part two to learn more about the wire frame and portal typing stages. Why will put everything we've learned into our structures of our Web application? See you there.