Categories
Online Marketing

CISS216 – Web Development – Spring 2016 – Week 5, Lecture 1 – Feb 16, 2016

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 does a web page consists of? You know what are the tags that we use on webpages? What are tags? How do you nest tags? What are attributes? How do I make a link? How do I make a heading? How do I make a paragraph then CSS, all right, which is how our page is going to look? How are we going to designate what part of our page is the heading section and so on? Finally, a third thing is JavaScript, which we will touch on at the very end of this class design is about how the page is going to be laid out.

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,


 

Categories
Online Marketing

CISS216 – Web Development – Spring 2016 – Week 5, Lecture 2 – February 18, 2016

If you want to do this most of the time, because you can always find exceptions so to just about any of these guidelines that they’re going to be exceptions right, if you’re doing a standard website for standard business or organization, these are good rules of thumb. To follow so kind of summarize, some of the ones that we talked about so far, we talked about a website being, first of all, content having good content and by good, accurate, updated and what the visitors of the site need and again a lot of times when People talk about web design, they focus on sort of the surface of it.

The superficial aspects of it, the color, the fonts and all that and that’s an important part of web design. But just important in my mind, is making sure you have the right content. Then doesn’t happen by accident all right. It doesn’t happen by accident that you have the right content for a website. Everything you do about a website ought to be thought through and planned all right and um sites.

You know you may look at this and say well it’s obvious and all that, but I guess I don’t know. I guess obvious to who the whole point of web design is that you’re going to have a whole bunch of decisions to make, starting with what content you’re going to have on the site. How you’re going to organize the site on what the site is going to? Look like what the pages are going to look like and all these ought to be deliberate decisions all right and they ought to be deliberate decisions guided by the goals of your organization and just, as importantly, the girls of the people that are visiting the site.

All right, so content is a design principle. Choosing the correct content. The site that is well organized is something that we talked about and more organized. We talked about a couple different ways that it could be well organized one is we can talk about the overall site being well organized another? Is the information is categorized in such a way that is clear to the user, where to find everything it doesn’t do any good to have a website that has tons of great information if no one can ever find anything on it all right.

It’s amazing, when I have talked to people that have developed web sites that aren’t particularly good on the most common compare their users is that they can’t find the information that they’re looking for and sometimes what managers or web ball masters or whatever you want to call Them get defensive and say well that content is there, but if people can find it, it doesn’t do any good if it’s there.

So, therefore, the host site ought to be organized and it ought to be organized in a way that makes sense to the users or the site visitors. It doesn’t do any good. If I, as the web developer, understand the way the site is organized and it makes perfect sense to me, it needs to make sense to people outside of the organization. It may need to make sense to the users, so the sight of all ought to be organized and individual pages ought to be organized, and this is why we use things like color and borders and putting space between things and different fonts and so on.

We don’t just do it to make the pages look nice. Obviously we do want the pages to look good. No one wants the development of the website, but we do it in a purposeful way to sort of help guide the user through the way that our pages are organized. So it becomes obvious that that green column on the left side of the pages of navigation, all right and the contact informations in a blue strip on the bottom of the page or whatever.

Alright. So our pages are organized and we use these things visually. To help emphasize the stuff that needs emphasis alright, so that would be a second guideline or web development. A third guideline is consistency, and that also can mean several different things. Consistency in terms of how pages are laid out now that doesn’t mean that every page needs to be laid out in an identical fashion, all right, but there should be some sort of consistency to it.

You don’t want to make it look like. You are visiting two different sites as you navigate around your website, so stuff should appear in a consistent place, and usually that means having a banner on the top of the page having a navigation somewhere either along top along the left or along the right. Maybe having a footer with additional information and then having an error area for content information.

Now we can go to different sites and see that not every page is organized identically, but there is some sort of consistency. All right. Consistency also relates to the terminology that we use within our website and I’ll give you an example of how that could be very confusing years ago. I work for a software company that dealt with people in the food business all right now in the vocabulary of that business principle, manufacture and maybe even one other word principal manufacturer now, maybe even been another word all meant the same thing.

Alright, so we’re developing a website, we will want to keep the use of the term consistent. If they’re calling those people principles, we would want to call them principles on every page. We wouldn’t want to call them manufacturers on one page and principles on the other, because that would be confusing to people all right, so you want to be consistent with the way that you phrase things so, for example, on the site for colleges, maybe for college.

Maybe we would have a page for prospective students and we call it prospective students. We wouldn’t want to call that something else on another page call it future students or something like that, because people love to see that and think that that means something different so be consistent in the terminology that you use call things the same way all right. That’s a guideline. Another guideline is sort of a consistency between the appearance should singer to match the content.

Does anyone know what I mean by that that your parents should match the content? Yes, okay, if your page is about space, you don’t want to put unicorns and ponies about on it. That’s probably a good idea. Does anyone else have another example? The example I always give is, I think, of two examples on you know how many of you have been on the barbie website within the past month or okay. Well, that’s fine! You’re not allowed to answer this question.

Only the people that have not been on the barbie site. What color do you think is the Barbie website pink, let’s see if you’re right, you don’t have to justify or explain. That’s: okay, no, no judgments. Okay, I’m pulling up the site for Barbie and looky here sure enough. The main colors is pink all right. Okay! Does someone named a heavy metal band? How do you spell that august burns red? This is a slightly surprising others, guys what color their site is going to be and what would you have guessed black and that’s what what I would have guessed to it’s, not black, but it does have a certain look for it.

Let’s go my old school. Let’s try Ozzie yeah well, Black Sabbath would be cheating but Ozzie. I think it’s fair game all right and again Wow lookie. Here, it’s mostly black all right. So the point is: is that could you imagine both ends might be very well designed sites? You know we didn’t spend a lot of time looking at them, but I’m going to say yeah both of my well design sites, but they look totally different.

Well, why is that? Well, they have different audiences in mind and they have different sorts of content and the appears that they picked match the content that they had now. These are very obvious choices, but you could have less obvious choices as well. What sort of look would you want from a bank? You may look very professional, you wouldn’t want unicorn gifts on the side or you wouldn’t want pastel colors or something like that on again.

The other word that a lot of people – and I think it’s this a dumb word, but but people use it all the time is branding right. You want to get across your brand’s. Look, you know Apple. I think we looked at them the other day. We could almost guess what their site is going to. Look like the whole idea of Apple computers is meant to be they’re, very sophisticated and designed and sleek and simple to use, and all that and the website matches that corporate image alright um.

On the other hand, the kids website, if it was done up in a very serious manner, like a new site. Well, you know everyone have any appeal to the audience, so I think the good way to summarize that would be to say that the appearance of the site should match the content in tone. Now, here’s where we might point out that there could be exceptions to this. There might be an exception to this, where you don’t want the appearance of the site to match the tone.

There’s one website that I’m thinking there’s a classic example of this. I’m thinking of the website the onion, the look of the onion is a satirical newspaper, so it’s meant to be fun. It’s meant to be humorous, I’m not going to pull it up because who knows what’s going to be on their page today? I don’t. I don’t want to have to explain to my Dean why I brought something up on the screen, but the onion is meant to be humorous.

It’s meant to be a fun site, yet it looks like a new site. It’s done in a very professional looking new site. Look well, that’s like part of the joke. It’s like pretending that this is a real real life newspaper and hear some humorous stories that came up with so that’s the case where they did. They broke this guideline that they did it deliberately, because that sort of adds to the appeal of it so again getting back to these.

These are pretty solid guidelines and, most of the time you should follow them. But if you think hard enough, you can find exceptions to all of these um one other good. Well designed a guideline is be sure. Your purpose is clearly stated and again you go to the website. You should know immediately what the websites for you shouldn’t have to guess that G, what is this organization again that can be done or that could not be followed and it can be effectively done.

For example, there was a 44 either halo, a halo, 2 microsoft created a site called. I love bees and it looked like it was a sight for a beekeeper when you first went to it looked like it was just a hobbyist website, but then, when you got into the site it became clear that something else is going on. They they made. It look like something had infiltrated the system and blah blah blah blah blah, and it was like some backstory information for the game halo now, in that case, they intentionally didn’t make the site match the content of the appearances like match the content and they didn’t.

They hid their purpose why the thought was is to make it viral where people would be talking about it. Look I found this site in G. Isn’t this weird and it got people talking about that site and it was a very effective ad campaign form. Let me see if I can put it on, I am going to i’m going to use a site called the Wayback Machine. The wayback machine allows you to go and see what websites look like years ago.

There’s wan na see if I love, peas, bees as long as live it. It isn’t the original one. So I’m going to go and pull up the wayback machine. I think we use this in what I want to show leo burnett last time, because, unfortunately, they made their website a little better. So I couldn’t use it as a good example. So let’s go in and pour it out from december of 2004 and notice. How, in the background, it looks like a nice little site about bees, but you get this sort of fake error message and you can read the mission log and there’s bill audio clips and so on and so forth.

So this is a way. This is an advertising campaign and array for for them to go interest in it forget people to say gee. I wonder what this site is about all right and it went viral and people passed it on and it was part of a good marketing campaign. So all of us any of these guidelines that we have you could think of cases where you can serve baked the guidelines. Do keep in mind, though, that you better be clever if you’re going to try something like that right, because otherwise people are just going to look at and say this is dumb all right and and ignore it all right.

So um sort of the default is to go by the book and do these things but um, especially for websites that are safe for the entertainment business or for creative field. Then it’s okay, probably to think a little bit outside the box, because people expect that from creative sort of organizations. Well, as you know, if you’re a CPA, firm or something people aren’t going to expect your website to look like a game or look like it’s a children site or something like that all right.

So we could probably talk about more of these, but um in some respects. Well, one thing I hear from students. Sometimes when I teach the section of the course is there, like all these things are common sense. You know who would make a site for Barbie that looked like a site for a heavy metal band. You know who would make a site where pages were inconsistent and didn’t look like each other. Well, my point of all this is: is whatever we do in creating our site ought to be done as a set of conscious decisions, we’ll just throw things together.

We think about them in advance and plan that we’re going to do and in that way that’s going to give us the best results. So it’s like writing. A term paper is just like planning a cross-country Drive. You could shoot by the hip and say I want to go to California, so i’m going to get my car and drive rest all right. You’d probably end up at keller in california, eventually, but you wouldn’t necessarily take the best or most efficient route, all right, so playing and deliberately thinking about each of these steps is armed what we want to do in terms of developing a site so for your project.

There’s a procedure that I want you to follow and it starts off thinking very general and then it narrows down to more and more and more specifics all right. The basis of this is number one starting off by thinking about the content of the site. What are we going to put on the site? Remember, we said last time that content is king or content is queen. It rules. People don’t come to the site to your site to admire the beautiful design.

People come to it to get some information or to do something that they need to do so thinking about in deciding what your customers need to do, or what information they need is sort of the first job all right and to actually probably the first two jobs. All right, we think in general terms, and we think in more specific terms, then we start thinking about some of these other things. How are we going to organize the information? What is the appearance going to look like and so on? So, let’s pull up in canvas the description of what I want you to do and we’ll go through as much as this as we can today and we’ll finish this up on Tuesday.

These kinds of things, in my mind, are reading the heart of web design. Not what colors you’re going to use or what fonts are going to use that comes later. It’s just like designing an automobile yeah, making the interior look nice or making the outside look nice! That’s important that as an appeal to people all right, not the designing! The car to be safe, designing the card to be a fuel-efficient, designing the car.

So it’s easy to repair. Those are all things that are probably more important than that. It looks nice all right. So here’s an overview of the project somewhere over here. All right you get to pick whatever topic you like, I suggest you pick something. That’s fun all right pick something that you’re interested in you’re, going to probably work harder. If you develop something that, if you develop a site for something that you’re interested in then, if you just randomly picked a topic all right, I the student, it did a website about his motorcycles.

Well, he loved his motorcycles he’s not about to put pictures of his motorcycle on a bad website all right, so he worked hard to make sure that website looked good to do his motorcycles, proud all right and I would suggest you do the same approach now pick A topic that’s enjoy that you enjoy pick a topic, that’s neither too narrow or two brow broad okay, and this is where I can help all right. Neither to know or to broad is a good idea.

Um to know would be under arms are too broad would be something like I’m going to do a website about sports. Well, you can’t possibly cover everything about sports in six to eight pages. All right I mean how many sports are there. You know you can barely scratch the surface. On the other hand, you know if you picked a topic of the history of the Cleveland, Indians, mascot slider, there might be a little too narrow.

I don’t think you could get six to eight pages out of that. So the idea is, is you want to pick a topic? That’s like right there in the middle, where you can get six to eight pages, with the content and you’re doing a good job covering it, and it’s neither to broaden or too narrow, and this is where I can help almost any topic that you pick um can Be either expanded or contracted to be the right size? So if you have an idea about this um, you know we can talk about it.

Um a lot of people pick article games, something related to article games. The article games itself would be a big topic right. So you can know that down by saying I’m going to do about mobile article games. Maybe article games from your phone or puzzle, article games, rpgs or whatever it’ll pick a particular game or game series. I’m going to do about the final fantasy series or something like that.

Another way you could either expand or contract that on to to meet the requirements of six to eight eight pages. Each page should contain a reasonable amount of content. There’s some judgment in there right. What is a reasonable amount? I guess useful guide, what you see, typically on their own pages on the web. You know a page with one sentence on. It is probably not enough content, a page that has 15 paragraphs on it, there’s probably too much content on it.

So think, in terms of what you normally see on a website for appropriate amount of content, we want the site to be technically sound, well designed and to effectively communicate the intended message. All right. The site is done. This project consists of two parts: a design document which is sort of your plan and then the final deliverable, which is the finished website, all right, I’m going to talk about the plan.

First, the plan consists of five sections and just as a memory aid you can get, you can use words that all start with s for each of these sections. The approach that I’m taking here was in a book that used to be a required textbook for this class and you can still find copies in our library or probably even through safari books online, and that is the elements of the user experience. Yes, no, no! No! Technically sound, technically solid, alright think a sound like not not like audio sound but sound, meaning like in other words like will be you know, the the foundation of that house is sound.

It means it is solid, alright, so, in other words, you use the proper HTML and CSS your links work. Your images work you’ve coded in a way that technically is correct and solid. All right strategy section relates to the goals of the site. Scope relates to the requirements of the site. Structure relates to sort of the sitemap. Skeleton relates to the page layout or sometimes called a wireframe and finally, surface relates to a prototype.

Think of a prototype is sort of being a rough draft of your website again. Any task that you do is better is going to be better. Typically, if you think about it before you do it all right. Does it matter if you’re writing a term paper or planning a trip or planning repairs in your house or anything like that? Any project that you’re going to do, if you’re flying by the seat of your pants and you’re just winging it as you go along you’re not going to get as good results is.

If you step back and think systematically of the approach that you’re going to take. All right, the first section is strategy, and that’s where you you do a couple things in the strategy sections. First of all, you come up with a high-level description of the site. Maybe I’m going to do a website about the article game, tetris all right now that by itself is not probably sufficient, the more specific you can define your purpose, the more or the better that you can actually go and achieve it.

So maybe I’m going to develop a a website about the game tetris and it’s meant for students that are learning how to develop article games or is meant for gamers or is meant for the general public, or maybe this meant for all three groups is meant for Everyone, maybe is meant for kids, you know: hey kids, you know you like playing your fancy new fangled article games. Here’s one of the early article games that started the ball rolling all right.

Maybe it’s meant for old-timers, who haven’t played a article game in years, but finally remember playing tetris all right, the better that you can define your purpose and define your audience the better job you can do creating your website another example. Let’s say I was going to do a website about classical music. All right, I could go so many different directions. With that right, I could define a website.

I could create a website about classical music for the general public people. That really don’t necessarily know a lot about classical music. Maybe they played in the band in school, but they don’t really know a lot about it and have thought about it. Since a music appreciation class I had – or maybe I can develop it – for people who are fans of classical music who want to know about new releases and concerts in the area and so on and so forth.

Maybe I want to develop it for adults. Maybe I want to develop it for high school kids. Maybe I want to develop it for children, the more clear that I can describe what I want the better off i’m going to be, because then I can really target the needs of those particular groups. You know the first rule of any sort of communication is to know your audience all right. So it’s not enough to say this is a topic.

You focus on the topic that you’re going to have and you think about who the audience is going to be all right, so you can imagine a site about classical music. If my audience was musicians, let’s say it’s going to have a lot different stuff than if my site was for listeners right. My site was for musicians. I might have information or articles about where to get your musical instrument repaired if it’s broken, all right or advice on buying a used musical instrument or what are some local community groups that you can join if you want to play in an ensemble or something like That, if I was developing it for high school kids, maybe I include a page about what concert.

Etiquette is ok, because you know people at classical music concerts can get really fussy all right. You don’t walk in in the middle of a piece. You wait until the pieces over and then walk in after that. So if you’re late you stand outside for a few minutes till it’s done, you actually don’t applaud in the gaps. You wait until the entire piece is done so for peace has three parts: there might be a slight pause between the first and second part.

You don’t applaud there. I think it’s silly, but that’s the way. It is right. You should probably one applaud right. I mean come on. You know, but again that’s sort of the expectations that people have so maybe for younger people. That don’t know that you might have a page about that. Oh page, about what are the main instruments of the orchestra. Now, musicians going to know that right, they’ve been playing in an orchestra, since they were ten years old, probably but a high school kid or someone hasn’t been exposed to classical music might not have any idea what that is.

Maybe examples of different eras of classical music. Again, a musician might know that you know very well, but a lay person wouldn’t necessarily know that. So when you develop your strategy, you don’t just pick your topic, but you think a little bit about the audience that you’re going to be reaching now. This is where, when you identify your audience, really, you may have multiple audiences is going to visit your site depending on again how big or specialized the site is all right.

For example, we have a school, you know with learning community college who are some of the different audiences that could be visiting Elsie’s, page or different groups of people that would be visiting Elsie’s site right, graduating seniors from high school, so graduating high school students were thinking About where to go to next year, that’s one group of people and for me, the parents of graduating seniors, all right.

That’s another group people in the workforce that maybe they’re working at a job that they don’t really like, and they want to upgrade their skills. All right would another group be traits people that already in a trade or people that are looking to get in a trade yep, people are looking to get into a trade all right again, maybe they’re working in a job that they’re not really crazy about, and they Might look to see you know: are there classes on welding or welding programs, or you know, nursing or culinary or things like that, other groups of people, instructors, faculty and staff all right? We would go on that site to look for certain things when our meetings are when grades are due.

Don’t read anything into this because I love my job, but when is spring break his class kids is, you know, do we have a snow day today? You know all these things are things like faculty and staff might visit, and we can probably think of others to just off the top of my head community members right. You may not be interested in getting a degree in graduating from LC, but maybe you want to participate in some of the cultural events at LC.

Has you know, there’s all sorts of different performances at the stocker Center there’s also our non-credit classes, where you can come and take a class in this that or the other that isn’t necessarily like four degree. But you can pick up your skills. I know they have for people that have no computer skills. They have like non-credit classes just to like to teach people how to use the mouse and how to move around and stuff like that or they might have a class in photography.

You know that’s non-credit, it’s not a first semester, but maybe it meets four or five sessions and teaches you the basics of a topic, just a personal growth or whatever lifelong learning, um people that I want to use a fitness center. All right. Fitness centers a great facility and as a student I think you get to use it for free. You just have to go and sit through one of their our. What would you call it orientation sessions and then you can use that for free.

I mean great facility in there. The plane is. Is that, especially when you’re talking about bigger projects, there isn’t one group of people called the user? There are multiple groups of users alright, and you want to do your best to hit the most important needs of all those different user groups. Now there might be some overlapping right. Parents of a high school senior probably have some of the same goals as graduating.

Seniors people in the community that are looking to maybe change careers might have some of the same girls as people that are brand-new out of high school that are looking at starting their academic career, but there are going to be differences as well right, someone who is You know in their mid-30s might be interested G. Will the college courses that I took 15 years ago transfer, whereas a high school student probably doesn’t have that question alright? So the first of all communication is to know your audience on websites.

You don’t just have one audience and a mistake that a lot of web developers use is they talk about the user as though there’s one kind of user that’s visiting their site or in reality, there’s several different kinds. So what you do so you develop a high level description, you identify the audience groups and you create what are called personas now. This might sound hokey, but what you actually do is you make up a fictional person that represents a group of people.

James is an 18 year old, high school senior at Olivia hi, who is interested in what you know, who loves computers and wants to do wants to work with computers? Lisa is a 28 year old person who is working in retail, who does not want to work in retail anymore? Who wants to who is interested in healthcare careers? You actually make up fictional people and little back stories about them now. Why do you do that? Will you do that for a couple reasons you do that, first of all, to show that hey my website isn’t just appealing one group of people, but I have identified two different groups of people and then, when you’re going through and making decisions about what content.

That’s on the site and how to organize it. You try to look through those people’s eyes. What’s going to help James find information about computer careers, what’s going to help Lisa find information about health care, careers and so on and so forth. Alright, that’s what I mean by creating these user groups and identifying these user groups and creating personas, then. Finally, you come up with goals for these grooves.

Alright, you actually, I think I just said you have three goals for each for the user of prioritize list of three user goals and our that your project will address and three of your goals, in other words, three goals of the organization that you’re doing this. For all right, but really you could define goals for each of the personas. You know a high school kid. One of their goals might be to find out.

Does LC offer the program that I’m interested in all right go for a parent of a high school senior? Might be, how much is it going to cost what financial aid is available for students going to LC? What are the rules about financial aid? What do I need to do to make sure my student gets financial aid and so on? So that is the strategy section right up top. We don’t think about how the site is going to look or what colors were going to use or what fonts we’re going to use or anything like that.

We start at the goals of the user identifying who the users are identifying, what the goals are for the user and identifying the different users that are going to be visiting the site and again there could be goals for each user group different goals, goals for a Community member might be what are the non-credit classes available for someone with my interests, what culture events are going on at LC this weekend and so on.

Alright, this becomes very challenging when you’re dealing with large websites all right, because there’s so many different groups of people and they all have different goals, but for the kind of websites that you’re doing is going to be a little easier. For example, let’s talk about my classical music site. Let’s say I’ve narrowed it down and say that I want to do a classical music site for high school students.

All right. Welcome by three different user groups be among high school students visiting my classical music site. Those who play an instrument, those who want to play an instrument third, might be high school music teacher all right. So if you are offering the course in music, you know you could use this site as a resource, so it may be geared towards high school students, but another kind of visitor to it might be a high school teacher that is going to try to incorporate your Site into their plans, article games, you know if I did a article game on tetris who could the groups of users be people that have never played tetris people who have played tetris? Who the third group be that’s a good question, but i’m sure we could think of something people that play the original tetris but haven’t played it since then, alright, so no matter what your topic is, we want to be in this section.

We want to be very specific and narrow down the specific audience and narrow down our to not just one audience, but several different groups that compose our entire audience and when we want to identify what the girls are. The goal should be simple sentences, for example, or goal for people high school students that run a play. An instrument might be what instrument is right for me right. What instrument is right for me, you know, maybe they would involve having audio clips so it’d, be they could listen to them and say: oh, that one sounds pretty good or all that one doesn’t sound so good.

Alright, what you don’t want to do in your goals? Section is talk about general web design. You don’t want to say a goal of my sight is to have a clear navigation. Of course you want to clear navigation right. That’s not really a goal of why someone is visiting your site to go and see how good your navigation is. This is content-based, in other words, what content people are expecting to get out of your sight.

That’s what the goals represent. All right. We spent the longest time talking about this one. The next four parts of this actually go fairly quickly. The second one takes a little bit of time. The third fourth and fifth, one will breeze by so we should wrap this up on Tuesday of next week. Any questions at this point, if you have not already read through the documentation about the project and will finish up that part on Tuesday