Web Design Do's and Don'ts: Evaluate Your Web Site | Kristen Palana | Skillshare

Web Design Do's and Don'ts: Evaluate Your Web Site

Kristen Palana, Professor, Award-Winning Artist, Digital Do-Gooder

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
8 Lessons (31m)
    • 1. Introduction and Welcome!

      1:07
    • 2. A Quick Rundown on What We'll Cover

      0:31
    • 3. Your Most Important Information Should Always Go Here

      2:47
    • 4. Where to Put the Navigation, Visual Strategies, and other Good Web Design Do's

      4:10
    • 5. The Importance of Tone and Vibe in Your Website

      5:38
    • 6. Good Websites are NOT Schizophrenic and Other Design Strategies

      6:34
    • 7. Don't Do These Things: What Bad Websites Always Get Wrong

      6:19
    • 8. More Bad Web Design and How It Can Lead to Love (No Joke!)

      4:12

About This Class

Would you like to be able to improve your existing website, either one you made yourself or one someone made for you, but you don't know where to start?

This quick and dirty (and fun) course will teach you through case studies what to look for in a successful website and how you can design the best possible user experience for your audience all in just a little over 30 minutes.

Grab your lunch and in no time you'll be able to recognize what's working and what might not be working in your website so you'll know what can be done to make it better.

Please note, this Web Do's and Don'ts course comes from a much larger, 10+ hour FULL web foundations course available in full from my website called Web Snax: Super Simple Recipes For Easy Web Design. You can find other sections of Web Snax here on Skillshare by taking the following companion courses:

HTML Hero: Quick and Easy Essentials For Beginners

Create Quick & Easy Web Images in Photoshop: Photos, Transparencies, & Animated GIFS

Wordpress in 1 Hour: Quick & Easy Essentials For Beginners

Give Your Wordpress Website a Makeover: Divi Theme Spotlight

Take this course now so we can get started achieving your web design goals!

31b14159

Transcripts

1. Introduction and Welcome!: Hello. Welcome to this quick and dirty Web design, Do's and dont's course. This is a free 30 minute introductory course that will help you learn what good websites do well and what bad websites do. Oh so wrong. This course is intended for complete beginners or for novices wanting to brush up on essential skills. It's actually the very first lecture I give my offline Web design one university students at the American University of Rome in our 14 week intensive semester of Web design. This course will help you get thinking like a Web designer or content manager so that you can be sure that your own website is user friendly, easy to navigate quick loading professional and has the appropriate look and feel that will attract and keep casual Web browsers so that they will stick around to see what you have to say. Show or sell. Are you ready to get started? The next lesson will give you an overview of exactly what we're going to cover. See you there 2. A Quick Rundown on What We'll Cover: Hey there. Welcome to this section. I'm going to show you the do's and dont's of Web design and focus on those things that are not changing all the time. Things like navigation organization, user friendliness, accessibility features, good layout, placement, all of those things that will get you started creating a beautiful website. 3. Your Most Important Information Should Always Go Here: Hi, everyone. OK, so I'm going to just show you a resource. And then we're gonna get into what makes ah, good Web design some fundamental things that will never change even though the software and the techniques are always changing. So what I usually do is I take my students to my personal website, which is here, and then I would just very quickly go to the class website, which, by the way, is not of a masterpiece or work of art by any means, M and I have a collection of links that we look at and we basically take a look at what is working and what is not working. So hang on minute. Okay, so Web graphics coding and site design. So here's our class website, and you can actually see what my students have been working on this year in the last few years. And, um, just a minute I'm gonna find our links, okay? So again, I know this is a really ugly page, but let's take a look at some beverage pages just to start to talk a little bit about things that you wanna think about when you are creating your website This is, um, suitor home, which is a wine company in the US and actually, it's cute because they're asking me for my age. Well, clearly, I am 21 up, so I'm going to click there. Okay, so this is their home page, and, um, I usually ask my students. Okay, Um, where is the most important information on this page? I would like to say that the most important information in your page should always be in the upper left hand corner. And in this case, you almost always 99% of the time find that a company is has put their logo in the upper left hand corner. You'll also find the main navigation, and it's always almost always at the top. Or if it's not at the top, it's maybe on the left hand side. The reason for this is because you don't know in Web design what device or machine or whatever that people are looking at your website on. So they might be on an iPad. They might be on on iPhone or anything else. He can see my Spotify by near, but as I minimize my window, noticed that I can still see the most important information, which is the logo. And as I, um, make the window a little bit bigger, I then get all of this information as well. So the most important information usually is at the top and in the upper left hand corner. 4. Where to Put the Navigation, Visual Strategies, and other Good Web Design Do's: Okay, so we're still here at the suitor home website, and actually, let me just make this a little bit bigger. Lodha. Okay, here we go. OK, so we talked about the most important information being in the upper left hand corner. Um, and we took a look at their links and everything else. Um, as you can see, this is a very visual page. Good websites are very visual. They understand, actually, that the average person visiting a website is only going to be visiting for roughly between seven and 10 seconds. If you can't convey and the those 1st 7 to 10 seconds who you are, what you do and why we should care. And if it of course, if it doesn't load fast enough or it's just a big glob of text, we're going to glaze over and we're gonna move on to something else. Unfortunately, attention spins are progressively getting shorter and shorter especially. You know, we have so many other distractions and other things competing for our attention. So you want to make sure that your website is clean. It's clear the content is relevant, but also that we can see what it is that you do from the very first page in the very first screenful. So we also shouldn't have to scroll down very far into my monitors A bit small, so I do have to scroll down just a little bit. But if I want a big monitor, we would actually see all of these things right away. So, um, the next thing that I want to tell you about is that, um this navigation that you see here I mean, this is a big company. They probably have thousands of pages on their website, but, um, you don't see thousands of links on their home page. However, if I scroll over our wines, you'll see there are many other categories build a better burger suitor home for hope, which sounds like a charity, um, organization that they're involved with or something they do. Lifestyle Book club. Wow, I didn't even know they had that about and block. So many of these links that they have here are very intuitively the ones that people would be looking for first, if you go to the suitor home website and by the way, I'm not affiliated at all with this website, I just have ah, collection of beverages websites that my class takes a look at. Um, usually, you know, you're going there to take a look at maybe the different wines they have. Maybe get some suggestions for how you would pair the wine with your food. Um, you might Obviously every good website has an about or a bio page. Whether you're an artist with a website or a company and, you know, always have your contact information, so they actually put it in the second level here. I'm gonna just scroll down here because every good website also has ways that you can connect with them if they have social media pages, so sometimes you'll see it at the top. Sometimes you'll see it at the bottom. But you shouldn't have to scroll down forever and ever to find them. You shouldn't have to make people sift like needles in a haystack to find the important information that they've come to your website looking for. So actually they have, you know, the actual, um, address and everything else here. There's a sort of these secondary links, you know, privacy, terms of use disclaimer. These would not be the main things that you would want at the top of the page that they've put them at the bottom. They have another way to contact you, which is down here, So that's good. It's in more than one place and, you know, the social media links. In fact, this is to, you know, these days it's actually more important for a company to have a good Facebook and Twitter profile and maybe YouTube channel than it is to have a website. Obviously, everyone needs a website, but if you want to people to connect with you on a daily basis weekly basis, they're probably gonna come to you more through the social media pages, and then they may click on a link that goes to your website, so this is very important not to be underestimated. 5. The Importance of Tone and Vibe in Your Website: All right are a trio of beverages, continues eso this is Nantucket Nectars and I'm showing this one because I want to talk to you also a little bit about tone and vibe for lack of a better word. So every website, aside from you know, presenting information and links and content and images also has a vibe. And sometimes it's corporate and sterile, which, actually this section of their website is a rather corporate. Um, it could be folksy, which their previous incarnations off the Nantucket Nectars website used to be much more folksy and down home, But it could be, you know, choose an adjective. Is your website elegant? Is it professional? Is it silly? Is it whispering? Is it yelling? Is it absolutely insane? A. Some some of them are rather unintentionally, I would add, um, so you also want to think about not just how you're gonna organize your information, but what is the vibe that you're giving off. And, um, so you have to kind of figure that out, and sometimes it works. If it's sort of casual and even, you know what? Some of the artist website it could be almost like sketchy, crafty very organic. Um, where is maybe a graphic designer that does a lot of computer art wants it to be more slick , more technological. So thes air some adjectives that you might want to think about before you even start to think about colors and font choices are image choices anyway, So I'm again not affiliated When then Tuckett Nectars. Although I am from Massachusetts, Um, I want to show you their website and I guess they were bought up. Or maybe they always were part of Dr Pepper Snapple Group. But as I was saying before, earlier versions of their website were much more down home meaning, you know, I mean the whole origin, which they put here one cold winter night. Tom and Tom began mixing juice in a blender. They sold it off their boat. People loved it. They decided to call it in. Tuckett Nectars, who doesn't love a good, um, homemade recipe turned big corporations story. So earlier versions of their website used to be much more. Um, you know, kind of have this sort of light blue color scheme. Um, hand drawn illustrations. I think they were even like seagulls flying by the island Now it's, you know, the first thing we see. Well, upper left hand corner is this logo here. Are there three main categories that are split into other categories careers, investors and newsroom. So you find everything that you're looking for up the top search. Um, boxes are very important, especially when you have thousands upon thousands of pages that will help us find our way around here. Their social media buttons. Here are some big images and just a little bit of text. And obviously there's a hierarchy here with and in Tuckett Nectars being big and in purple and then smaller text here. So that's their local logo and their label. I'm going to scroll down just a little bit. So again you want the most important information in the 1st 1 or two screen folds. And here that we get a little bit more folksy. Okay, Yeah, this is what they're old website used to have much more of a look like this. The old New England, um, in the summer. Clearly, it's not February in New England in this photo, um anyway, so there's their colors, their history, find our products. I'm imagining if I click on that will take me to all different locations. Um, and again, as I go to the bottom of their website, they have this sort of footer section here with more information. They reiterate their main, um, main categories that we find at the top. And you have their social media. So, um, this is a change in their old website. So the adjective I would have used to describe their website maybe three years ago, four years ago would be folksy. Now, I would say corporate with a folksy twist or a an accent of folksiness, if that's even a word. So corporate, because it has a white background and lots of dark text over a light background, which is always the much more professional look than if you were doing, um, light text on a dark background. So this was a smart choice. But big corporate websites or big professional websites tend to use white as their background. And then, um, they have accents of color. So this, uh, the color accents would be purple, which actually contrasts really nicely with the yellow. I'm talking about color again. Sorry. Anyway, um, so lots of accents of color that pop against the white and then just lots of information, but not too much in our face. All I want still very visual. And then, if we want more, we want to search out our favorite flavor. Um, we could do that. I'm just gonna click on a secondary page. All right. On. Yes, it is not a schizophrenic website. It looks like it's home page, but we have more information here. It's just still loading. I think my Internet is a little slow today, but that's another thing. We're going to talk about loading time, making sure that everything is quick and loads quickly. And we're not expecting people to wait five minutes for something the load, like maybe we would ask them to wait in the nineties. 6. Good Websites are NOT Schizophrenic and Other Design Strategies: Okay, so I'm bringing you to another beverage website, Pete's dot com. And again, I have absolutely no affiliation. I've never had a pizza, coffee or tea, but I sure do like their website. And my students seem to like websites. Ah, that have to do with beverages, especially coffee in the morning. Anyway, the very first page again they have taken into consideration. What are people going to be looking for on this website? And what what information could they get our attention with before we even come in? So there's this sort of pop up box that they're asking us to get free shipping on our next order and that basically they're trying to get our email address Very sneaky. Anyway, so I'm not going to sign up for that. And I'm gonna hit no. And then this brings me to their home page and look how beautiful it is. I mean, I can just smell the coffee. I'm just said that there's not that extra sensory information available with websites, at least for coffee websites. Maybe not perfume websites. That might be annoying anyway, So I just wanted to illustrate again. Upper left hand corner is the logo. All the most important information is at the top, and whatever they consider to be their most important information is usually closer to the left. I actually would have thought they would put coffee first, but here they have craft. I don't even know what that is. But, you know, if you go to Pete's coffee and Tea website, you're probably searching for a particular kind of coffee or information. So they've put that here. Apparently, they make tea as well, and here you have all the sub categories. I mean, all of these big companies have thousands upon thousands off pages, so the challenge is organizing that in a way that makes sense for people visiting the website. So here they want us to know that there's a special deal. Great. Here's their toll free number email, so their contact information is front and center up. The top sign in my car. Great. Anyway, all of their important information is here. Um, and here I wanted to talk a little bit. I mean, basically all of their, um, information. It's very visual. There's not a lot of text. There's certainly links to other articles where you could get more text, but they're not overwhelming me. If I scroll down again, I'm on a fairly small browser, so I'd have to scroll more than a four on Big Mac set up in the computer lab at the American University of Room with the big screen. But most of their most important information is more or less within one screenful to school . Screen fills fulls. The to screen falls em so I don't have to scroll down and down and down forever searching. Everything is here. Everything's organized in a nice way, and I'm you know, not to go back to my color course life hacking. Um, like life hacking with color psychology. Increase your impact, which was my first online course. But I mean, look at the beautiful use of color on this site. Would this site make any sense if it was hot pink or, you know, fuchsia or, um, neon green? Probably not. It's gotta be coffee. It's gonna be these appetizing colors. Red is a great choice, especially for the holidays. You know, they're doing the whole red and green thing anyway, so it's all bite sized information. I can browse it. I can find what I'm looking for quickly, again, with so many Web pages that they must have on this site. Organizing all that information is quite a task in itself. And we'll get into that later. How do you even begin to organize everything on your site? But these are all the links at the bottom. So things that are not as important, not important enough to go at the top. But so we can find them here at the bottom, you know, locations and stores. Although I think they had that open the top, um, actually there reinforcing their main navigation elements here down the bottom about us. Every good website hasn't about us or bio page of fits for an individual, um, in the social media. So here they don't have too many. They just have instagram, Facebook and Twitter. And then, you know, most websites also have a privacy policy. Terms of service, etcetera. So there you have it. Another great example of a good website. And actually, we're gonna go dig in a little bit deeper, would and see what a secondary page would look like. We're just on the home page at the moment, so here we are, back on the Pete's coffee and tea website and let's take a look at what secondary page looks like. So good website. Good websites are not schizophrenic. What does that mean? It means that if I I'm going to guess that if I click on a secondary page, which means just any link from the main page. So let's say I'm gonna go to featured coffee Holiday blend 2014. That sounds good right about now. Um, and I go to that page, alas, noticed that nothing has radically changed in terms of the placement off their logo, their navigation. You know, you see other options over here, and this is their main area. So I would say with much confidence that this page belongs with the Pete's Coffee and Tea homepage. They look like they were made by the same person or people and that they belong to the same website, same color scheme, same choices to have lots of visuals and let me see if I can just scroll down a little bit here. So let's see what they're so holiday blend 2014 the best of the year. I hope they appreciate that. I'm a touting their website for as a good example, anyway, so you'll see their products etcetera in and again, You know, they could have chosen to put a big, long, wordy description about each one, but they made it very visual and it's intuitive. It's actually quite nice. When I roll over it, I get more information about each one. So this is good Web design. You're not cramming too much information. Found people's throats. You've made it very visual and appealing. And if they want more information, which certainly they will, then you give them the option to roll over or click on something to get more information. So content is king are, in my case, queen on your website. 7. Don't Do These Things: What Bad Websites Always Get Wrong: all right, the Pomeranians air beckoning you. So we have looked at some hallmarks of good Web design, and I'm I apologize in advance Paradise Valley Pomeranians for picking on you, although I am going to show your new website to redeem you somewhat. So this is sometimes you'll find old versions or free websites from the nineties or whatever still lingering about online. I think I even have one upon tripod dot coms. If you want to see my early days, you can find it, although I like to think it's not as bad as this one, but anyway. So we talked about hallmarks of good Web design, but it's actually much more fun to talk about bad Web design again. I hate to put other people on the spot, but especially on an online class, it's it's fun enough to do it in an offline class within four walls. But anyway, I'm going to redeem them with their new website in just a minute. So this is an old version of the Paradise Pomeranians website and one of the first things I mean, that's the color. Oh, let me see if I can just fix my when do a little bit. Okay, so you have this kind of repeating graphic that goes down and down, and that's not really so horrible. Although, like I personally think it's a little tacky. Um, there's sparkles everywhere. For the love of God people, please, please leave the sparkles out of your website. If you don't mind, um, they also have an animated GIF, which I'll teach you how to do, but only if you use your animated GIF powers for good and not for evil, evil being, you know, an animated GIF that just kind of like loops over and over again and just kind of look silly rather than cool. These are not the worst animated GIFs I've ever seen this on. Not horrible, but let's let's scroll down here. So first of all, um, we come to this website and we don't really know what to click on or what we can do here. We do see kind of some funky animated Palm Iranians, which I guess is nice. Now here's a graphic. Um, this is called a transparent gift, which I'll show you how to do later, although I try to do a really nice one. It kind of has scraggly edges. It kind of looks like it was cut out of a magazine. So I will show you how to make transparent gifts, which basically allow you to take your images out of their rectangle bucks. And you can make them any shape you want, and we'll blend them into the background of your web page. But, um OK, so a couple of things. So first of all this text here is light blue on top of a medium blue. If I have vision problems or if I were even to just print this out in black and white there's not very much contrast between the text and the background. So that's something you want to definitely be thinking about all times that you always have enough contrast between your text and your background. Um, also, this link is a darker blue on top of a medium blue, and you almost lose it in the background. So that's kind of a bad thing. Now, if you notice, I'm just gonna scroll and scroll and scroll and scroll and scroll and scroll and scroll and scroll. Oh, I finally found the links, so I had to scroll in school and scroll way down to find any links. And actually, I don't even know where these links are going to take me to. So another hallmark of bad Web design is you have to go hunting and pecking and looking for , you know, the things to click on. And, um, bad Web design will have links that make absolutely no sense. How does this help me links? It would be much more clear if I knew what these links were and where they were going to take me. Mandi's miracle. Okay, I suppose that somewhat intriguing cotton like expends. What does that have to dio with Pomeranians? I just don't know. I don't know if I want to find out either. It's kind of scary. Now, this is ah, website that normally has music automatically playing without warning you. That's also a hallmark of bad Web design. You never, ever, ever, ever wanna freak people out with some blast of music that plays right away. First of all, if they're looking at the web and they're at work, you're gonna get them in trouble. They're gonna get fired for not doing their job. Okay, I know that's really their responsibility. But you know, if you're gonna have music on your website, it's always better to have a play button where people can choose to turn it on. At the very least, we'll get into that later. Counters air. So 1997 or so 1998. So I would definitely avoid those at all course costs. Of course, this website in general is just very 19 nineties looking anyway, So there you have a few examples of bad web design. Oh, but wait a minute. I promised I would redeem them. So this is a newer version off their website, and you can see that they have fixed some of the things. First of all, we have no bed. Ah, animated GIFs or transparent gifts that are cut out badly. Um, I mean, I wouldn't say this is still, you know, the perfect website, but it's much better. Their links air here. Here's their you know, I guess it's not really a logo, but we know who they are. We know what we can do about us. Contact us. Okay, there's some pictures. They still have some issues, though. Well, first of all, the contrast is also much better here, but we still have to scroll and scroll in school and scroll. I would have just made maybe a separate gallery page if you want a feature. All the Pomeranian. So we're scrolling and scrolling and scrolling and scrolling, and I can't remember. Is there anything at the bottom? Uh oh. When we can share it on Facebook if we want. Okay, well, here's their, um, information about where to find them in their phone number. Um, anyway, so this is a much better version off the Paradise Pomeranian website, although I would definitely give them some suggestions to make it even better if they wanted my suggestions, which they probably don't. Anyway, last suggestion would be, um, having their name, um, over a light backgrounds, we see it more. It's kind of half on this light background and half on this dark background. It's makes it really hard to read. All right, 8. More Bad Web Design and How It Can Lead to Love (No Joke!): okay. As I continue talking about bad Web design, it seems only fair to highlight a bad, ugly page like this one that I made a long time ago. Um, and it's just really for function or as opposed to being beautiful. So I apologize. But anyway, this is just some, you know, collection of links from over the years. Some of them are probably out of date, but anyway, so I just wanted you to know that, um well, first of all, there's a website out there called Web pages that suck dot com. Um, and these have more modern bad websites, not just one stuck in the 19 nineties time warp. So I highly recommend. Look, are there 18th year, um, Helly recommend if you want to get a daily, I think they call it the daily Sucker. You can go there and ah, have a look at what's bad and why. So they was provide all of these different things. They also have Web design checklists and articles and basically ways to help you not end up on their website because we wouldn't want that. Um, okay, So anyway, I wanted to show you that, and I also wanted to show you were gonna, um, take you to a very interesting website. You'll see why in a moment this is pixie land dot org's slash Peter Pan. So just to reiterate Now, um, I have nothing against Peter Pan, nor do I have anything against people who dress like Peter Pan. And actually, there's a funny story behind this website because okay, it's horrible. I don't even need to get into why. It's horrible. First of all, sparkles, animated gifs um, too many colors, Too much text, slightly creepy man dressed up as Peter Pan. Um, apparently he won an award, though in 2001. That's kind of interesting. Anyway, So what was I going with this? Oh, so apparently because this website exists, he actually the person, And I'm sure he's a wonderful person, by the way, um, maybe, apparently he found his soulmate, a woman who contacted him after seeing his website. And I think if we scroll down, we can find out. Now, look, all the scrolling, all these links, um, he found his soulmate who likes to dress up as Tinkerbell, and they got married. So there you go, and you know bad Web design, not just, um, making us laugh, but, um, making us love Could that be a logo anyway? So if I scroll down, let me see if I can find it while you know, Here's the problem, though, because I'm looking for something, and everything's all over the place. I can't find where, um, his soulmate is. Hold on. It's I think, and I'm gonna have to. Oh, here it is. Are fairy wedding. I started this site so that Tinkerbell would have an easier time finding me. And I'm very happy to report that she has. In fact, you'll find links who are very wedding. They're from Florida, actually. I think Paradise Pomeranians is also in Florida, so I don't know Floridians, but I'm hoping that if anyone from Florida is learning how to make websites that you're going to do something really amazing so we can, you know, balance the universe a bit more anyway, So here's the fairytale wedding. So there you go. You know, bed, website, But good story. Good romance, I guess. Wow. There you go. Look at that. So see, obviously he doesn't care what I'm saying about his website, but I hope you do. And I hope that you'll avoid some of these design faux pas. And just to tell you a few more, I mean the text all over the place. Tech should never be right up against images. You want to give a little breathing room and just make it easier for people to find stuff. All right. Um, I wish I had some sort of ah Peter Pan thing to say to end this lesson. I can't think of any. I don't know. You should clap or something.