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
Jimmy's Internet Marketing Business Blog 