First of all, we’re going into you know: we’ve gotten into started going into CSS and with CSS. You really have a lot of power to do a lot with the appearance of the page, and we want to make sure that what we do doesn’t detract from the content of the page, but compliments that it complements it and enhances it.
So it’s a good time to have the discussion about design the other good reason to talk about design. Now is that probably thursday this week and I will see how it goes – um, maybe possibly today or Thursday, we’ll talk about the project and what you need to do to get the project done, because it’s not too soon to start thinking about it, and I always Say it – and you know remember this: I we have it on tape or in a tape boy.
How old am I we have it recorded and in we can go back and play this around May when I say that Mei will come sooner than you think all right, and so it’s never too early to start thinking about your project. So it’s important for us to talk about the project and what you need to do for the project. But before we do that, it’s a good idea for us to sort of come up with guidelines for what constitutes well designed web pages.
And that’s one of your assignments to come up with some pages and some reasons why? And I also think it’s important to discuss it in class and we could do this by looking at good examples and or bad examples, because we find something that is good. Well, we can learn from it. We find something as bad. We can learn from it. We can learn what not to do all right and almost you know the flip side of the same coin.
So last time we were looking at some good and bad websites. Does anyone have any more websites that they would like to bring up as examples of either good or bad? We went for a few of them, alright, fair enough. We went over a few last time. What I like you to do is I, like you to think of websites that you visit often alright, just think of websites you visit often and let’s not think in terms of good and bad design, but let’s talk or think about websites that you visit.
Often, why do you visit those sites? What’s an example of a site that you visit? Often, yes, unemployment, site, okay, and why do you visit that often okay have to file every Sunday. So in that case, there is a site that you can use to perform a service that you need to use all right and – and you need to do it weekly and it provides the service that you need need to use other sites that you visit espn.
Com and Why do you go there, news all right, any other ones? No one ever visits any website except those two people, okay, go ahead, canvas all right! Well. Why? Because again, you need to do your assignments to get your homework in and so on anything else. It doesn’t have to be, it doesn’t have to be something that you think is going to sound impressive. I mean it can be something you know, Wikipedia Facebook, YouTube, Instagram, maybe and so on.
All right. The first thing that I want to get across is the sites that you visit most often and the size of use that you go and you stay on um you probably go to because they provide either good content content that you need or want or services that You need or what all right – and this, in my mind, is sort of the first rule of web design and again I rather rather call them guidelines and rules, because really every problem is a different problem and therefore it’s hard to come up with some observations that Are true for every single website, but this might be one of them and it’s usually said this way and I’ll give you two versions of it and you can pick the version that you like content.
Is king alternately. You don’t like that, one, you can say: content is queen all right either. One. The point is, is that we visit websites not to admire how pretty they are all right. We don’t go to websites because they’re well-designed we go to websites because they either have content or services like Google search, for example, on Facebook. That kind of thing they provide you a service or they provide you content, something at you either want or need.
That’s why? You visit websites all right so when we talk about design, that ought to be the first thing that we consider is the content all right. Some people try to separate content from design. I don’t think it’s possible to do that. The content and having good content is an important part of design. Remember when I speak about design, I’m not just talking about planning out the way it’s going to look and what fonts are going to use arm and what colors are going to use and what images you’re going to use and how it’s going to be laid out.
That’s a part of design, but when I talk about design, I talk about the whole act of planning out what your website is going to be all right. That involves things such as determining who your audience is all right, determining what is important to those members of your audience and then figuring out how to arrange the content in a way that will make it easy for them to find what it is. They’re. Looking for all right, so if we start out with one killer content, our design and our technical skills support that it would be like, let’s see if I can do it with markers.
No, I didn’t want that. There’s design, there’s technical skills, and here is content here – is content yay. Alright, one of those two things fails: the design fails, boom becomes useless, your technical skills fail boom, it becomes useless, so our technical skills and our design, our visual design, our layout, is meant to support the content and enhance the content all right, so technical skills were Dressing in class – and we have been since day one right – technical skills – are learning the different languages learning HTML.
What the appearance of the page is, and so on these things support the content. In other words, they should not get in the way of the content, but they should support the content all right. So, let’s come up with you. Let’s come up with some general characteristics of a well designed website, starting with the assumption that the that the website has good content that people are interested in. How can we make a design than to complement that content or enhance that content? What are some things that we can do? Okay, exactly number one.
We can put emphasis on important stuff, first of all, important to who important, probably to the audience right now. It might be also you might want to emphasize stuff that’s important to the organization as well. Right if I was doing a website for a nonprofit organization, one of their primary goals is going to be to get a lot of donations right. So I want to emphasize donations because that’s important to the organization but emphasizing emphasis on important stuff, both for the audience and the organization.
And when I talk about organization I am talking about arm whoever’s, making the site or whoever is having a site made for them. So it could be, a business could be an individual’s portfolio right. It could be a fan club of some, a fan page for some artist or musician or whatever could be a nonprofit organization could be a school. So that’s what I mean when I say organization. How can we put emphasis on the important things? Okay, number one? We can use CSS formatting or things such as the size, what’s another way that we could emphasize something on the page.
I will call this the page organization and layout and things such as headers and so on plus other ways that we can emphasize stuff, color plus other ways that we can emphasize stuff positioning and this one’s subtle. The next one that i’m going to add. We can emphasize stuff by being careful about what we put on the page along with it all right. For example, if I were to have a web page, they had 20 pictures on it, which one of those 20 pictures would be emphasized.
Well, maybe the biggest one or the one that was on the top or whatever. But the point is, is that there would be other things that would potentially distract you from the thing you want to emphasize. So one way that you can emphasize something is by limiting what you put on the site in limiting, what’s on the site, to something that is important, all right, so choosing your content carefully. All these things that we’ve listed here are different ways.
You can emphasize something. That’s important all right: let’s go to a website, let’s go to Apple’s website, so I think it’s thing most people would consider that a fairly well designed website and, let’s take a look at it. Well, what do we notice about this page iphone success? How could we possibly miss the point of this page? We can’t there’s one thing on the page only and it’s big and it’s in your face and it’s positioned and the fonts the images all look good, all right.
So if they had three things on this page, the iphone 6, the ipad, the macbook – then there’s three things competing for your attention. In this case, there is one thing competing for your attention, which is another way of saying there really no competition for your attention. Now. They do have navigation for other stuff, but as we go through and look at, the other stuff will notice a very similar experience.
Let’s click on Mac all right. They have under mac the different models that they have. So let’s say I’m interested in a macbook pro. There’s the features of it and notice with the big images and the way that the typography is the way that the letters are and the colors really emphasizes the points that they want to make. So it’s hard to lose track. It’s hard for the loser to get buried and lose track of the important stuff on a page like this, because there’s so little of it and it’s laid out so sparsely that’s another way that you actually can put emphasis is by putting blank space on the page.
All right, sometimes that’s called white space. It’s called white space, regardless that the color is actually white or if the color would be gray or whatever it’s still called white space. So there’s a paragraph and again a lot of space around the paragraph, a couple of lines that are very big: how many colors do they use on this page? Well, it was black and white. There is other than the images.
We won’t count that there’s blue. What are the blue represent links? You know that immediately, don’t have to think about it. There’s a couple of shades of gray they’re doing that allows the separation. If these were both the same color, they would sort of smash together in your mind, but by using slightly different colors, and then they use pictures now. The interesting thing is: there’s a lot of stuff on this page.
There’s a lot of links. There’s the links along the top of the page there’s a whole mess of links on the bottom of the page, but the design is such that they put the most important stuff boom for this page right out in front of you. Let’s go to a competing computer company. All right, let’s go to, will be a good competitor. I’m thinking eventually a hardware company HP, probably HP com, but i’m going to make sure – and let’s notice already in my mind, that when you go to their home page of their store, have this they have a display.
They have a desktop. They have a touch laptop laptop printer media display and so on. If I go to desktops business elite and so on, there’s just more stuff on this than there is on the ample now. Let me ask the question: does that mean that the apple site is better designed than HP, not necessarily all right? What is the difference? What do you think the difference boils down to between HP site and apple site president’s day sale all right besides that Apple? Never as sales, so that one’s a no-brainer all right, what is what’s the difference between the offerings of HP and Apple as far as the hardware that they sell HP sells a lot more options exactly you want to buy a macbook pro.
How many choices do you have a couple? There’s the 13-inch there’s a 15 inch and then for each of those there’s choices about the processor speed and all that. But there’s not like a lot of options, whereas H he does have a lot of options for all their different offerings, whether you’re talking about laptops or desktops, plus these sell printers and displays, and all that other stuff as well. Alright, so one website could look one way.
Another website could also be well designed and looked differently, because that company has different content. That company has a different story to tell Apple, is very much about directing you down a certain path. All right, there’s only a handful of options, the kind of hardware you can buy. You know how many iPhones are there versus how many Android phones are there? There’s a lot of Android phones where there’s probably two or three iphone models that you could buy right now, all right, four or five, maybe at most all right so ample as a company has one message: we are simple: we will directly direct you down the path That that that you want to go to get you to purchase the thing that you want, whereas HP has a different strategy as a company that we are a company that offers a whole bunch of different hardware, all right, and we give you options as far as What to get so they’re not going to be designed in the same way all right if HP tried to take the approach that Apple did now, let’s go and look at HP, desktops, there’s say 20 of them at least, and there’s a load more button and a Load more button and so on.
If HP tried the approach that Apple did where they showed 11 model per page, they would have dozens of pages just in a desktop section itself, all right, so they organized their content in a different way in a way that makes sense for the product that they’re Selling as opposed to the product of the Apple is selling, so both ways could be equally good for the kind of content that they’re trying to portray, even though, ultimately, the pages look very different, all right so HP has to take a different approach of emphasizing what They want you to see all right.
They want you to see the variety of choices and help you navigate through the myriad of choices, whereas Apple has a limited number of choices and they will. I really want to hit you hard with each choice that you have because there’s not that many choices. Okay, so just with this one topic emphasis on important stuff, we can see that that can be done all sorts of different ways. It can be done by choosing what content we have.
It can be done by the way that we position the items it can be done by the way we organize the page. It can be done by what other content we put on the page. It can be done through color, it can be done through size can be done through image and so on. So when you are talking about emphasizing the important stuff, there’s no formula for doing that, however, these are some of the things you can use your job as a web designer is to figure out, what’s going to work for your particular problem.
That’s why web design is not a one-size-fits-all approach. All right. Every organization has its own distinct strengths and weaknesses, and they want to emphasize their strings all right. That’s one of the things that the organization wants to emphasize is their strings all right and therefore the manner in which you emphasize the content on the page depends on a specific problem that you are trying to get all right.
What’s another good guideline for good web design organization, can you elaborate on that or can maybe someone else elaborate on that? Ok, I would say when we talk about organization, we can talk about two things. All right. One thing is the way the overall site is organized. The other is about how an individual page is organized all right both of these fall under the category of organization. Let’s talk about the page, how a page is organized first, all right: what are some good guidelines for organizing the information on a page? Okay, all right, the two sections of a page are obvious, and what do I mean by the sections of a page? Well we’re going to draw a page.
A typical page might look like this. You have a header on the top of the page. Maybe it has a company logo in the name of the company and the purpose of the company. Maybe you have the navigation here then maybe you have the content of the page here then. Maybe at the bottom of the page you have a footer that has other important stuff. So the first thing I would say as far as the organization of the page is it should be obvious all right now.
How do you make it obvious? Well, one way you make it obvious is to make it consistent between your pages. So, in other words, if your navigation is on the left side of the page for the most part, most your pages should have the navigation on the left side of the page. Wouldn’t really be very good if, on half the pages of navigation was over here and half the pages, it was over there or half the pages it was along the top and the other half is along the bottom, or something like that.
So you come up with a structure, the page that you implement consistently among all your pages. The other thing that you do is you emphasize the sections? How do you emphasize sections well same thing with the size, with the color, with white space, with positioning all those sorts of things that we use to emphasize? What’s the important content we can use to emphasize the different sections of the page, so we look even on Apple, which is a very bare-bones site notice that the top line, which is my main site navigation, is a black background with white or grey font.
On top of it, whereas this line, which is a sub navigation, is a white background with gray or black links on it. If we look at HP to stat sale, information is in a different color than the rest of stuff on the page, so that section pops out at us the links are along the top there’s some more links up here that are a different color, so they’re set Off to the side, and so on, so we emphasize the sections of our page.
We do that by having them consistent and use their appearance, to make clear what the sections are and be consistent about that consistency is a big thing in web development. All right, we want our pages to look consistent. We don’t want to have all of our pages, have a certain color scheme and then two or three pages look wildly different. That would be confusing to the user if they came to those pages.
Likewise, if we have the links in a certain position on a page, we should probably have those links in the same position on every page all right. Likewise, if we call something computers on one page, we shouldn’t call it hardware on another page. We should be consistent about the way we term term things notice of what we’re doing is when I talk about changing the appearance of things to make it organized and make the organization clear.
I talk about using fonts and colors, and things like that. Just like I talked about when I talked about emphasis all right. In other words, we don’t make things different colors just to look good. Obviously, we want to pick a color scheme that looks good and we want to pick funds that look good in it and that are readable. However, we also want to pick colors and fonts in a way that helps the user visually organize the way the page is laid out so you’re teaching the user that gee that blue bar that’s on the left side of the page, with silver text on it.
That’s my navigation and that visual cue will carry over from page to page to page all right and that helps them navigate around the system, all right so making the links obvious through the use of colors and formatting and so on. Now, as far as organizing the site, this can especially be a challenge when you have a lot of data on a site when you have a lot of information, a lot of pages on the site, all right, let’s talk about a sporting goods store all right.
What are some of the ways that we can organize the different pages in a sporting goods stores website? Obviously we, you know, sporting goods store, probably sells hundreds or thousands of products. We don’t want to simply have a link. You know a navigation, it has 200 links on it, each of the individual products. How can we organize those products in a way that would make sense to our users separate in two broad categories, and what would be an example, because, there’s probably more than one way we could do this? What would be one way that we would? We could separate our products in two broad categories, outdoor versus indoor, then maybe outdoor, we could separate how all right by activity, hunting fishing in running and so on, an indoor might be basketball, volleyball, etc.
We can also have outdoor warm weather activities, cold weather activities. That’s just one way, though, that we could divide up that topic. What’s another way that we could divide up the products for our sporting goods store all right, clothing, shoes equipment, so under clothing I could have tops and bottoms under bottoms. I could have you know like long pants shorts under tops. I could have sweatshirts t-shirts under shoes.
I could have running basketball and so on under equipment. I could have golf clubs, tennis, rackets and so on. What’s another way that we could divide up the products in our sporting goods store, I sport, baseball, softball, golf basketball, soccer and so on. If that had too many categories, we could break it up in the summer and winter sports or we could break it up into indoor versus outdoor sports if that would help, and so on down the line.
Other ways that we could do it, I’m not saying either these ways or any of these ways are the perfect way. All right. We could do something like buy brand. All right. All the nike stuff goes here. All the Reebok stuff goes here. All the Wilson stuff goes here and so on down the line we could separate by man, woman boy girl, all right price. We could have tennis stuff and again the interesting thing is we could mix and match right.
We could have, for example, if we separate it by type of product shoes running baseball whatever we could then separate running, buy expensive shoes, cheap shoes and so on down the line. There’s a lot of ways that we could divide this up and one nice thing about the web is you can sometimes divide things up a couple different ways, all right arm, for instance like if you used to go, though anyone that that’s old enough to remember when There were blockbuster stores right.
You know you would go into them. They would have to find one place to put a movie right. So, like the movie um Shaun of the Dead, they would have to decide. Is that a comedy or is that a horror movie right? Because they had to put it some on the shelf, all right, whereas if I had an online store like if I had Netflix or Amazon, or something like that, I could put shaun of the dead in comedy and in horror, because I didn’t have to physically put Something on a shelf same thing for an online sporting goods store all right.
I could categorize things a couple different ways if I thought that that would help people find it. Here’s the bottom line for this exercise because we’re not opening a sporting goods store. So we don’t have to have an answer to this question, but we’ve probably talked about this for 10 minutes and we came up with 12 or now three probably a half dozen different ways of categorizing the stuff, especially when you use the divisions and subdivisions and all That so any problem, any topic that you’re going to tackle on a website, there’s a bunch of different ways that you could categorize the information all right.
Your job is to pick one and which one are you going to pick? You should look at it from the perspective of your customers, all right, because they’re the ones they’re trying to find the information it doesn’t. Do you any good to categorize stuff in the way that makes sense for the store employees all right, because the store employees aren’t the one? That’s are going to be shopping on your online store all right.
Oh tennis, rackets, that is an outdoor summer. Sport equipment all right, it should be in a way, that’s obvious to the user coming in where something is going to be categorized so that they can easily find it. So, in order to do that, you have to sort of put yourself the perspective of the user. Let me tell you about one little enhancement that we’ve done and they’re working on revising Elsie’s website, but one enhancement that they did a few years back is that there are actually computer classes in a variety of different divisions.
All right at the time there was a separate business and engineering division, so there are computer classes in engineering, those computer classes in business, there’s also computer classes in arts and humanities, and there are also um computer classes in the math and science division. Well, that sort of makes it difficult for someone coming in from the outside world, because they don’t know what kind of divisions they don’t know.
How are how our college is organized as far as what courses belong in what division? You have a kid coming in from high school, maybe all they know is I like to work with computers. I want to take some computer classes. Show me all the computer classes you have well. If it was organized by academic division, then a student might look at engineering and say: well, that’s all the computer classes. I have.
I have to pick from one of those all right, so what they did is they created a separate IT page and the IT pages for people that say hey. I want to be in information technology, i’m going to go to that page and then that page will show me where to get through information on the rest of the site, all right and here’s the example of it. Computer information technology curriculum at LC and it talks about it.
It talks about all the things that you might want to do: computer science, computer security, hardware, maintenance, digital media, networking programming and software development, web development and so on. The student makes it to this page. It doesn’t matter to them that some of these things are in one division like this might be in arts and humanities. This is in math and sciences. These two are in the business and engineering division.
It doesn’t matter because this is not written from the perspective of an employee of the college that knows where what division all these things are in, but this is written from the perspective of a student that would come in or a prospective student that would come in And just want to know about all the computer programs here so when you, when you need to decide what or how you’re going to organize the content on your page, you ought to look at it from the perspective of your site, visitors.
Not from your perspective, all the most frustrating things about a website – and you hear this – a lot is, and it’s frustrating for everyone, it’s frustrating for the developers of the site and is frustrating for the viewers of the site, but a lot of times. The content is somewhere on the website, but if it can’t easily be found, then is of no use whatsoever. You know that’s typically, one of the biggest complaints that people have about websites is.
I can’t find what I’m looking for now. Maybe they can’t find what they’re? Looking for because it wasn’t there all right, whoever designed the site didn’t what content was most important to the users or maybe it’s there, but the site is just so poorly organized that is impossible to find it either way it doesn’t matter if you’re not finding the Content that you want to from the site you’re going to go somewhere else, you know, compare shopping online was shopping in the real world.
If I go to home depot and i’m looking for a ladder, let’s say I’ve driven a home depot wherever there’s a home depot. I don’t even know, but if I decided gee, I can’t find it here. I’m going to go! Look at lowes instead! Well, I’m going to have to get in my car bundle up because it’s cold outside drive, maybe across town, find a place to park and go into loaves, so I’m kind of motivated to find it.
I took the effort to go into home depot. Hey I’m going to walk around i’m going to look, I’m going to go up and down the aisles because I don’t want to drive across town to go to lowes all right, that’s how it is shopping in the actual physical world if you’re shopping online. If I can’t find something on home depot, how long does it take for me to get on to lowes website? It doesn’t take any time just do a quick google search and I’m there.
So if something is not well organized on a website, there’s no motivation for the person to try to figure out how to find it all right. The typical customer that’s coming in, there’s no more to motivation for them to struggle through a poorly designed planned site to try to find the information they want to, because there’s so many other alternatives. All right, I guess see if the exception of that would be a sight like unemployment, where you have to go and do that or like even dare I say, canvas right, you can’t say well gee, I don’t like canvas.
So I’m going to go, submit my homework on some other site. Well, you could do that, but you’re not going to get credit for it and for this class right, but for most typical consumer sites. If the site is not well organized, then people are simply going to go elsewhere to do whatever it is that they need to do all right. So organization of the site is key, and the organization comes in two varieties: the overall site, that the content is divided in a logical way to make it easy for the people on the outside world to find it and at each individual page.
It’s obvious what the different sections of the page are and what the different sections mean and represent okay, thursday, we’ll talk about a few more of these guidelines and then we’ll get into what you need to do for your project and that will probably take all day Thursday, and probably into Tuesday of next week, all right we’ll see you up in lamb,