Simple (But Effective) Tips to Make Your Website Stand Out

1. Introduction: Hi, My name is Kathy If Orania and on a Web designer and developer. Over the years, I've worked on countless projects for clients ranging from small businesses, large corporations. Each you project I would've gone provides me the opportunity to stretch my creativity and push the boundaries such traditional Web design. Over the years I've developed a few simple but effective techniques that helped make up website Stand out from everyone else is This is really important because nowadays everyone has a website with more and more websites on the Internet is her to leave a lasting impression on users and to make your website Sandow in general. So in this course, always sharing these techniques with you as well as demo ing some great examples. But other designers and developers we use similar techniques to make their website standout will also be working together on a class project and which will transform a below average Web page into a well designed one. By using these techniques some basic what design and development knowledge would be suggested just so you could follow along a little bit better. So if you're ready to take your Web site to the next level, learn how to make her words that stand out, let's get started 2. Doing Your Research: before you get started with any designer development, it's really important to do your research. First, you could spend hours two days, two even years researching to find the best information possible. However, this class we're gonna be focusing on two things in particular knowing your user base and defining the goal of your butt site. Knowing your user base is extremely important as a lot of Decatur your designs towards your set of users. This is go for anything from layouts. Two colors too far Choices. The best way to kind of explain this is a show. An example. So for a hearse example, we're gonna pretend we're designing a website for someone who's older. So I came across this old age home website, which I think is a good example of what you kind of want to be going for. It's not perfect, but it has a lot of the right attributes, so the navigation is really simple to follow. Um, and all the content is nicely laid out. There's nothing fancy about it, but that's what makes it easy. It's easy to understand, easy to scroll through easy to find information. Now put this in contrast with the Red Bull website, which is a really fancy website lost going on lots of animations, background videos. But for someone who's older, this might be too much. They might come across this Web page and not really know what's going on, feel overwhelmed and just kind of give up trying to find the information that they want. Another good example of showing of knowing your user base is a contrast between Wal Mart and Nike. Even though they're both e commerce websites, their designs cater very differently to different user bases. So a typical person coming to the Walmart website might be seen as someone who wants low prices, she products and just getting it really easily. And that's kind of what the Walmart website caters. Dude Working the start, they have a bunch of banners, uh, lowest prices. Free groceries, really trying to emphasize that come in a WalMart is cheap. I'm right below. It is all your shop departments really easy to find, some making an easy process to come to the website and get your cheap products. In contrast, Nike wants their users to feel like they're buying the best products and typically the people who buy it now he want to go faster. Athletes. They have a certain image that you're tryingto display. So Nike wants to uphold that image. So their website is very clean water. Um loss of animation, lots of video to trying to emphasize that feeling of luxury for their users, similar to knowing your user base. Knowing the goal of your website is also really important on making an efficient design for your site. So examples of goals for the same e commerce website would be to sell your products here. Put for your website is to display your work or for Blawg website is to get more readers. A good example of a blogger or news website is a national group geographic website. So right from the front page, you come on to the website energie ist stories. So you see their latest stories, Um, all news information and there's just a lot of content right away. So you come to the website, you see content, you click it and then you're hooked. Do you want to start reading more and more. Best Buy is an example of an e commerce website, so they don't care so much about having great content. They just want to show you the products that you click and buy. So you come to the site right from the top. It's just the latest deals and basically products for you to buy. Um, and yet so this is just showing the contrast between kind of a new site on, then an e commerce website. So once you have your user base and the goal of your website to find it's time to find inspiration so you can find inspiration, it easily is going out to Google and typing in, um, your competitors websites and seeing what they're doing or just randomly going through the Internet and seen if you come across anything. That's nice, however, to websites that I always tend to go to find inspiration is awards dot com, which features some of the best websites or best design sites on the Internet by amazing designers and developers. These air often really progressive and forward thinking websites, so you might not want to implement all their design aspects, but you could definitely take away bits and pieces. Another good site is dribbled. Eso. This has thousands and thousands of designs by users from all over the world that you could take inspiration from. So again, the thing is, you don't want toe copy any design, but it's great to look around to see what's out there and inspire self before jumping into a project. 3. Setting Up Your Project : So now that you know the importance of doing your research before starting a project, we're gonna introduce you to our class project, which is basically taking this poorly designed Web page that I'm using to market the class that you're watching right now, two other sculpture users or people interested in Web design, and we're gonna take it and transform it into a well well designed webpage. So we're gonna do that by exploring different elements of Web design such as typography, layout, colors, animations and transistor transitions and imagery. And even if you have no coding experience, that's fine, because everything is gonna be pre coded. So all you're gonna have to do is Assam classes or commenter. Uncommon. Someone's a code, so it'll be really easy to fall along. We're also using Code Ben, which is an online code editor, so there'll be no need to download any programs. Everything we do will be right here in your browser on this page. So if you don't have a code pen account already pauses video and go to code pen dot io and sign up for a free account. So now that you have your free account signed up quick. The starting point link in our class description which will bring you to a page like this. Have your views different. Simply click, change you and choose which view you want to use. I personally prefer the side, but it's all personal preference. So what we're gonna do now is basically just fork over the project by clicking pork up top . What that does is copies air starting point over to your account so that all changes you make will be saved to your own account. And just to avoid any confusion, we're gonna rename starting point to working. So our project is now set up and you're good to go. So the only other thing we might be using is our repository, which I'll also leave a link to a class description and that's just gonna store some images . I'll put the finish class project up there and we'll have our design guide there, which all explain a bit later. So once you have this page set up, you're basically ready to go and ah, let's get started with our class projects. 4. Designing Original Layouts: Okay, So the first element of design that will be working with for a project is layouts. So I'm sure you've all seen what page like this before. It's pretty generic. So you have your big rotating banner, top your sticky, um, menu, and then just very lucky does. And then you have your little icons with the news underneath. Eso you could even like this one is pretty basic. But then we could go. This is a little more interesting, but again, you've probably seen something like it before, so you have your slider up top. Ah, your big gives your images with your information underneath. So there's nothing inherently wrong with a Web page like This is great displays information . The only problem is, is it just kind of blend together? If a person visits your website, they won't have a lasting impression. Um, so and again, depending on the gold, your website, you might not need that lasting impression. But if you're wanting to have a bigger impact on your users and is better to stray away from this typical design style, so as I said, there's nothing inherently wrong about this kind of Web design or what page design and it works. That's why so many people use it, Um, because it is effective. But the thing is, you can still keep many of the same elements without having it being the exact same kind of layout that you see across tons of other webpages. So we'll take a look at this page, which is a website that kind of falls the same guide. So has the same big kind of hero banner layout, the same floating navigation. But they changed it up just enough that it kind of has its own original flair to it. So just the way they kind of the overlaps of the device and the background averages makes a bit more interesting to look at instead of just straight cut lines that you see on the other Web page. Even as he come down here, they're little blocks. It has a bit more interest to it, with the background and the overlays, Um, and just everything going on with it. So you can see by scrolling through this page. It does have all of the same elements in the same features as this page over here, but it just done in a way that provides that little bit more creativity, which allows it to stand out that have a better lasting impression for its users. So here's another website that I think is really well done in the sense that it keeps two more the traditional components of a website. But it's done in a way that makes it very original, um, and gets across the message that the site trying to portray so here you can see it's still the same big hero banner or as have, Ah, page like this. You still have that big hero. But just the way the Texas cut off by the image of the person makes it more interesting, and even just the size and cleanliness of everything around it kind of gives it that mawr clean, um, and modern feeling. Then if you scroll down, just the white space side of uses, really emphasizes, um, or really allows you to focus on the content that's there on what I found. Particularly interesting is his use of these background images for the did so by adding in a little image at the bottom of the Div. That's kind of the splash of paint almost it makes it look like it's not just a straight line div and gives it a more interesting feeling. Um, then you're more traditional kind of straight lines that you would see hear, or particularly across this blue bar. So now that we've explored some ideas on how to transform a simple Web page into something a little more creative and more unique, we're gonna apply these elements to our class project. So I've laid out just a simple template of what we have already. Ah, very basic wire frame. Um, and then I've made one that's or the wire frame of what we hope to achieve, uh, through the new layout. If you want to open up these on your own, you could open our repository link and go to design guide. And then I'll be the class, uh, well designed start PDF and class design Pdf. So, just to recap, our starting point of a class project is very straight cookie cutter, plus a straight lines, Um, not very interesting. Very basically out. And when we look, look at this page, the elements that I really liked about it were This side was this idea of kind of masking the dibs on masking a lot of the straight lines. So when you look at what we've done with our newly, we've kind of applied that to our page in our own way. So instead of having all these straight lines here for each of the sections, we've applied waves across each of the top of the dibs, so that just provides a more fluid feeling of the Web page instead of all the straight hard cut lines also up top. What I really liked about this site was the openness of the hero banner and just the size, the full screen use of it. So we've done that as well. So we've made a big hero of top, made it nice and clean. But what we've done is kind of shrunken down the image. So instead of just being a big image of red across, we're gonna make the image into a little more feeble lob. Um, that May might not make a lot of sense right now, but by the time we're done our project, it will make a lot more sense from this site. The elements that I really liked were the overlapping dibs. So just kind of the idea of this stuff is overlapping on top of this background image. We're gonna take that idea and bring that to our side as well. So you could see right here on the little icon tiles that will have our text for the tiles kind of overlapping with the icons themselves and then down here, similar to what the other page did. We're gonna have a background image, but the div on top of it and just kind of shifted downwards. So again, the idea of overlapping the content. So hopefully, if you look at this page and when you look at the built out version of it that you could see right here, you could imagine that when we build out this version of the webpage Oh, look a lot nicer. The layout will be a lot more interesting. So in the next part of this class will be going into the code and actually changing our project to become to look more like this 5. Implementing the Layout: So now that we know what we want our new Leo toe look like So we have a design right here, as be explored before we want to go through the code and update this page to start looking more like this. So again, this is just a basic wire frame, so it won't be the exact same. But this is more just a guide, and then this will be kind of the more polished version. So, as I said, everything is already pre coded. So we're just gonna look for all these little to do items and that are labeled with the layout and basically apply those to the elements and for the layer, everything is gonna be in each, you know, so you could just shrink down your CSS and JavaScript. So take It s a tip. Again, we have our first to do item here, which is apply class clear to Topper. So we have our top part, um, element right here. So we're just gonna apply clear to it. And as we do that you could instantly see that the layout has changed. So then we're just gonna keep scrolling down and find her next one so too. Do they sit banner. A bluff designed to basic banner. So they didn't blob design. And now you can see that are front page is starting to look quite a bit different and lay out again Uncommon sug. And by doing this, we're gonna have our hero looking very similar to what we have designed. So we have our blob over here, the big text, and then we're gonna have a blob. Big text, um, are but in the middle, and it's gonna be very somewhere. So just to reiterate, this is all layout right now, so the colors and typography is still gonna be rough, but we'll explore that in later parts of her class. So we'll just keep going through this coat and finding layout to do items. So layout on comment SPG so uncommon that they are. I'd class mid potting and soft background to the section removed Class. Ah, small planning. Sorry. That's the mistake right there. So apply that. And here's another layer I'd cross shifted design two basic icon tiles. Keep going. We're just gonna basically go through all the html and find all the too two items and update them so I class chip it gives to our section and remove classical patting from our section So uncommon her S P G's We'll be that high class small rapper and patting Teoh content Trapper move class small body So we'll just hover over that and replace it with small rapper mid powder You're going down Well, I'd cost big pot into section you move class Small planet a section which I don't have that So the sign and then he's going down us two or a p therapy directions and then our last layout is just simply and comment This not a code right here the SPD So by doing that, we've basically gone through our page and made all the necessary changes to transform Are starting layout into allow that looks like this. So if you scroll down the page, you could see that are layout is now updated and definitely a big and prove went off we've had already Or what of the inductive big improvement of original design. I've actually noticed something Ah that I forgot to put in so oh, bring you through it so we could update that together for the about me section and the content. Rapper. We're gonna add small rapper. Oh, and I do see that I had it here. I just forgot to do it. So that's my mistake. So now when we scroll down, it'll be just tighter. Text and a look better with the white space have gone through an update our layout and we're now ready for the next step. 6. Choosing the Right Font: so another really important element of graphic design or Web design or any design, really is typography. Eso. Lately there's been kind of the ships of having typography be very sawn, served on berry. Just clean, simple points, which is good because it renders easily and it's clear across all displays. But with bigger phones coming out and sharper resolutions on devices and for most screens of people use, we could start a plantain Sarah fonts again. So a good example that is male chimp. So look at Nelson. They really brought it back. And they have nice big serpents for all their headings. And it kind of Sando just because you don't see it that much right now. And it kind of strays away from your typical, very clean, clean cut ponds. So again, as we've been kind of covering over and over again, there's nothing wrong with clean ponds. It just has to serve your purpose. So the Milton purpose, it does stand out that little bit, which kind of when you come to the site that mixed with the yellow and everything, it really grabs your attention, so choosing your fonts is really important, and also I want to wait. So if you look at Wikipedia, even though the site is very completely plain in terms of design style, the forint weight is value. So like all the headings are nice and golden, so that drives your attention straight to there. So you kind of want to keep that idea for any Web design is like if you have important information making a boulder, making a stand out better than everything else, So a good works like that uses kind of This makes the front waste with new modern typography, even using some song pairs, it's on. Sarah is a huge agency, So this is their website here. They use really big, bold fonts for all their headings. But then nice, simple and clean Sarah ponds for underneath. So, as you could see like, it really has a strong impression on you, especially the front page, which is just big, bold Hello. It captures your attention right away and gets you focusing on the website. So one thing to keep in mind with your designs and typography is making sure is readable so you can have the best design typography. But if the text can actually be read, and it doesn't really serve a purpose, especially if it's trying to provide some valuable information. So font size, easiest want to fix. If it's too small, simply bump up the phone size until people could read it. One thing that you need to pay a bit more attention to is your contrast. So this the soft background, the dark great, really contrasts each other nicely. You could read it, um, quite easily. Eso put a bad contrast. Let's say if you start putting it on a softer gray, that might look nice and some design scenarios. But, um, it could be very hard to read, especially if your screen doesn't have the best color definition or your users have poor eyesight that might become very difficult, if not impossible, to read. So just two simple things to fix. But to keep um, attention to because they can make it quite difficult for your users to read your content. Now that we've explored some basic typography principles, let's go and apply them to our webpage. So similar to our layout, we're just gonna search for our typography to do items and apply them to our h him out. So This is also gonna have some to do items in our CSS, But let's get the html done first. So toppy Big title Quiet is section title. So all that's in the Asian I was a couple more section titles, so I'll scroll through quickly and just apply those about me and then for get in touch instead of a small title instead of, um, big title. Sorry. We're gonna put in small tail so quickly. You could just see that the font sizes are big titles or section titles have changed. It looks like I missed one eso just up here, so we'll start back up on now. You could see a second title is now nice and big. So down here, we're gonna look at our CSS where we have all right imports for our Google forms. We're gonna comment this so we could import our new phones, and then we're just gonna change. Your variables are ah, CSS Very boats from font songs on Sarah to our new haunts. We're sorry. We're gonna change our, uh, variables here to our new fonts. So our monster at which we just loaded with Google wants we're gonna put as our songs haunt or are want songs variable And then we're gonna take our very whether Sarah Font and apply that to our Sara bearable. So you can now see it's going through the site that are new forms have been applied Our section titles are nice Ah, Sarah fonts now which, as we exported mail ships stand out a bit nicer and all these funds are quite a bit nicer as well. And it looks like I absolutely un did something with the layout. No, just quickly help me. You know, I hear you. So rapper. So we already abide this in our layout, but I just messed up and ah, need to reply it. Okay, so there we go. Everything is looking good and we're set for typography. 7. Picking Beautiful Colour Pallets: having a good color palette or color skin could go a long way in helping your website stand out. Therefore, it's important one of the effort to try to find the colors that will fit your website the best if you have no sense of color theory or color design that that's fine because there's tools that could help you generate nice pallets. This is coolers, which is a color palette generator. So we have to do is click this generate button. No, generate a nice color palette for you. So, as you can see, we just generated one and is pretty nice. If you don't like it, you could just click generate again and again and again until you find something that you like. Or, if you want, you could explore other people's color palettes that they mate and see if you could see anything there that you think would work well with your site. So just off the top of my head, going through these right here, um, something like that would be like a nice color palette for kind of a more minimal minimalist site. We're just on the dark blue, the gray. I don't think going together. Um, we keep scrolling through this right here would be something that I could see Uh, right here. So it would be something that I could see being good for environmentally friendly website or some sort of environment charity where you have your bright warrants to stand out from the green. But you still have the green to act as your, um, reference to the environment and everything. Just seen this color palette over here makes me think of ice cream. So for some reason that I put that in an ice cream shop, websites, same wires or something like that that again just those choice of colors makes me think of ice cream. So that's what I would use. So just to reiterate the point is really trying to find a color palette that matches your content that best and trying to merge it effectively that way. So now that you have your color palette chosen, it's also important to know how to effectively use it on a website, so that's going to have the nice colors that go well together. It doesn't mean if you slash them all over, they will necessarily make a nice looking website so one way that I think this website did a good job, but it is that their palate is quite vibrant, so they have green, purple, orange, read just a bunch of really strong colors. So instead of making a bunch of elements, those colors, they use them as more for the background elements or suddenly put as background colors. That way you get the feeling of public throughout the site as not just boring black and white, but it's not overwhelming at the same time, Another effective way, I think color should be uses to help with usability. So the Rogers website does a good job with this in the sense that if you see the color red , you know it's an action. So you have your bar up top where it's all your actions there or a piece of bread, but and you know it's clickable. Thes red boxes are all clickable, the white and red button and clickable. So if you're scrolling through the website and you see red, it's like, Oh, that's an action. I know to click there to do something. So it's a way to help usability with color. Now that we've found some great resources on creating our own color palettes. Let's go ahead and make a color palette to apply to our class project. So I've actually gone ahead and generated this color palette here which matches the color scheme. But you've seen throughout our class project for the, um, section or our class section titles. So let's go into our class, project the pan again and let's edit our colors. So everything we need is gonna be in the CSS and similar said before it's all gonna be in our color to do items. So our first item is delete existing color palette, which is right here and then all we're gonna do is uncommon. Our new color palette, which matches the scheme I just showed you over here and now instantly are color skin is gonna be updated to the one I just showed you. So, as you can see, just by doing that, um, it makes a world of difference, and our site is now starting to look more and more polished 8. Making Interesting User Interactions : a really effective way to create a lasting impression for the users is by creating interesting user interactions. By this, I mean the way that users interact with the elements on the website. So this page has put it in a lot of effort to make interesting interactions. Just about every element on this site interacts in some unique wait. So from the big titles that were, you hover over them and they have their animate a sign line or the hamburger icon that slowly animates in and out as you help her over. Given the social media icons have an interesting attraction where the cursor that follows you around shrinks so you could read. It s so you could read the links better when you have her down, all the content animates in as to keep the attention of the user. While animating all of this is really great and really impressively done. However, some might argue that it's almost too much in the sense that the interactions and the animations could almost take away from the content on the site. However, this will all this. The principle of this could still be taken and apply it in a more subtle way. So if you look at this website here, let me just refresh it. So it all loads up the same, um, everything still Andresen, but it's not done too aggressively or to boldly, so it doesn't take away from the content. The conscience is still the primary focus of this site, as you could hear everything so animated, and it even has little animations that stay there. But there's nothing really distracting from this content so similar to have everything else . We've been working on its finding the right balance and knowing what's right for your site . So if you have a put portfolio piece, I really want to demonstrate interesting attractions. I really show your skill. Then it's better to go more towards this route and really try to think about every single thing and how you can make it cool and interesting on really engage with the users. However, if you're made focuses content, then you might want to be more like this in the sense that you still have that a little bit extra feeling and that professional, Uh, yeah, just a little cherry on top with all the animations and transitions. Yet it's not taking away from the content. So one thing to hear in mind is you don't want to go over the top with user interactions to the point where what you're interacting with no or to the point where the interactions no longer serve a purpose. So even on this site, where it seems like everything has an interaction, it does all serve a purpose. Everything you're interacting with is a clickable link that does bring you to another page or provides more content or open something up. So if you go to this content here, this is just pure content, so it doesn't need any interaction, and it doesn't happen it. So it makes sense on the same with all the animations down here, even though everything animates in once it's in frame, it stopped, so it's easy to read, and you could understand what's going on. So what you want one of avoid is just having everything moving all the time, especially providing interactions on elements that have no action after So you were toe hover over this and over to animate in some way. You would then think it's a link or something clickable, but you would keep on clicking it over and over again, but nothing would be happening, so that just creates a bunch of confusion for the user. So that's really kind of the point I'm trying drive home here is that every interaction needs a purpose, or there needs to be an interaction only for actionable items on this page. Uh, one thing that I think it's nice. It's just these little subtle, moving around characters that does provide this event more life to the Web site. But because they're faded out, you do know that they're not applicable. Even just having, um, the cursor not changed when you hover over them also provides just that extra bit of feedback that you know, it just there for decoration. And it's not an actual item. Oh, are actionable item 9. Add Transitions and Animations: So now that we've explored some unique user interactions, let's go to our Web page and apply our own interactions. So as before, everything is gonna be just adding some classes to the webpage. But we'll explain in a bit more detail on what's going on. So as you could see for a lot of the omens when you hover over them, it's very abrupt on switching states from the non Howard to hover and is especially apparent for the mobile menu. For when you click on it, the menu pops up very abruptly. So we want to get rid of those sudden changes and provide a bit smoother of a transition. So we're going to go through a code and find our interactions to do items. We're gonna apply those two our page. So for now, let's just supply the smooth transition ones. So we have a smooth transition term menu, toggle through the transition long to our menu, and then those everyone here, which is our whose transition to our basic button. I have to go all the way to the bottom of the page, or I guess not all the way, Um, but to our social media will apply smooth transition. Leave the tool tip for now to our social media holder. So by applying the smooth transition classes you can now see when you hover over elements of the page, it has a nice, smooth transition, so it's not as abrupt is before. This is especially apparent on our mobile menu, where when you click it, the menu now slides in nicely as where before it just kind of popped out at you for mobile menu toggle when you click and you could even see the hamburger icon solely transforming from the hamburgers into an X. So again, there's nothing super crazy over the top. But it's just those little details that out a bit more professionalism or just kind of give that cherry on top of a website. Eso. We're gonna go back down to our social media section, and we're gonna apply that tool tip. So this is a interesting user interaction that I like to do, a special with icons where users might not always know what the icon means, especially for social media, where there seems to be more and more social media platforms coming out each day, so all it does is not. When you hover over a little poppet box appears and animates in explaining on which a social meet media platform your, um, about to click on you can see Here is instagram on spa. Sh Could 10 think Dan and Twitter. So one of the biggest feature is we wanted to apply to our site right from the beginning of a point. The new layout was this big blob here, and you could see right now is kind of boring. It just It's interesting because it's not that same box shape, but they're just kind of sitting there. So what we're gonna do is go into our JavaScript. We're going to come down here to this interaction to do item, which is the only to do item and javascript that we have. And we're just gonna uncommon this code right here. By doing so, we're gonna make our blob, uh, animate between two states. So it has. It's one shape, and then it slowly transformed into the other state and goes back. So you could see by doing that, we now have our morphine blobs. So when someone comes to the site, they'll catch their attention right away. and hopefully leave a very lasting impression. So that's it for our user interactions for our webpage. So hopefully you can see now that by at Andy's user interactions that are what Page is starting to look a lot better than what we started out with. 10. Using Meaningful Imagery: the last topic we're gonna cover is imagery, and by imagery. I don't just mean static pictures, but it could also be video gifts or and they sort of illustration. No imagery has the power to make or break a website, so it's crucial to put in the time and effort to getting the right images. In my opinion, every websites imagery it should be original and high quality, but that's not always possible because of equipment or budget limitations. So the next best thing, if you can't take your own high quality imagery, is to get some really good stock photos. So I'm splashes. A site that has plenty of software was taken by professional photographers were amateur photographers all over the world on their completely free to use each of the pictures for both commercial and personal use. So it's a great place to get imagery if you don't have the ability to get your own. That being said, the ideal image as I mentioned before, is to go out and get your own picture of your company, or of you or of your product, and make it personal to Europe's to your website to conclude the original So now that we know the importance of imagery and what type of images to use on our website, let's go ahead and apply this knowledge to our class project. So you can see here that the images that I have right now are pretty land. They're just random stock photos that I grabbed off Google, but they don't really tie into our Web page that much. I mean, I guess I do a bit in the sense that they are kind of computer based. This one is, ah, website, Um and this one is just like it's kind of a laptop in technology, but it's not that related to our class project or to our webpage. So I didn't have a huge budget to go out and get a professional photographer to come take pictures in the our ticket, Um, professional pictures taken. But I was able to go out and get good enough ones with my phone. So and sometimes that's all that you need is just a good phone picture of its still high quality and is meaningful and ties into your page. Then that's perfect. So if you go to our get hub Repo, which again the link is in our class description. Go to images. You can see a lot of image color. So this is the one that I want to use for our blob. We're just gonna copy the image address, open up a new time and paste it here and then we'll be able to see the full image. So it's just me holding my laptop with the picture or with the screen showing our working project are working code Pet Project. So it just as I've been more relevance that the image has to do with what? The Web pages displaying. So that's just copy image address here, then go back. Teoh are working. Project and scroll down. Teoh are so, uh, SPG And here we have the image. So we're just gonna replace this image right here before we just copied. Just give it a second update and there So it's not the best image in the world. As I said, it was taken with my ah, cell phone, not a professional photographer, but it gets the point across, and it has a lot more meaning to this site than just a random picture of any laptop. So then, for a picture down here. Um, this picture isn't too bad, but I thought we could do just a little bit better. So for this route, instead of taking my own, I did just go the Stockport over out. But it is a higher quality picture, and it's actually a stock photo that I put on two, um, squash. So I guess we could kind of say it was taken originally, although it wasn't originally intended for this project. So we'll just very quick again copy, image address and then paste it in the new top so we could see the full image. So just a bit more code. And it's my actual workstation. So it does tie in to our project in the sense that it is a bit more or it ties into our page in the sense that it's been personal to me instead of just someone else's random working station. So to update this image, we're just gonna scroll down here until we find our descriptions section. And then we have our section background image, and we're just gonna change that background average. You are well, what we just copied and just let it update. Uh, sorry, and just here, I would just refresh. No one knew pressure. Okay? And there is our new picture. So again, it's also a lot higher quality than the image that was in there. And it has to do with me and my project because unless that is my working station, So again, the main thing I'm trying drive home here is a sheer images have to do with your content and the message that you're trying to get across. And hopefully you could see that with these two images. Um, it definitely makes more sense having these and what was on the site before. 11. Conclusion: So that's it for our techniques. We've discussed layup imagery, typography, color schemes and user interactions. So I'm gonna leave you with the challenge on taking the final state over class project and going further with it. So taking the techniques that we have been working with and applying them or to the final state. So this could be anything from changing the color scheme to something that you like a little bit better are adding your own images that you've taken where you go all the way and completely rearrange the layout on, uh, make it their own. So if you want my feet back, I'll be looking at this culture project for but on coat when you save it. Just also put the tag Matthew Fornier sculpture that I could look up all the class product where all the projects that you've been working on and I could leave the comments directly on. I hope you learn something new and something useful, and you are now a better with designer and developer because of it on uh, thank you for watching