002+Web+Design

Frostburg State University Web Design: Do's and Don'ts Webpages can be used in many effective ways. Any person can use a webpage for educational purposes, advertisements, shopping, etc. For our purposes, we will discuss using webpages for education. Each teacher can use a webpage for class assignments, project guidelines, uploading pictures for the students to see of themselves or from lessons they have covered in class, and much more. However, one must be careful with how they wish to display information to students and parents. We are here to give you as future teachers some hints for what to do and what not to do when making webpages for your classrooms. To start, we will discuss some ailments of webpages.

One of the elements of a webpage that most individuals find very annoying and distracting is animations. According to Learning Web Design, "Animations are effective in drawing attention," however, "Users find them annoying and distracting when they are trying to read the text on the page" (p. 2, 2003). I agree that animations are annoying. If you can grab the attention of your audience with them, that is great, but perhaps the key is when to make the animations stop. When the reader attempts to focus on and read the information on the page, the animations should no longer be present. Another feature that may be just as bothersome as flashing animations is uppercase print (Learning Web Design, p.6, 2003//).// This makes it seem to the reader that they are being yelled at or demanded to do something (Learning Web Design, pg. 6, 2003//).// Readers should want to read the information on your webpage, not feel like they have to read what you post.

For readers, it can be very discouraging if a webpage will not load or said to be under construction. Do not send your readers to your page until you are finished creating it (Secret Sites, 2004//).// "If the page is not ready, do not put it up. Whatever you do, do not put one of those cheesy 'under construction' images on the page." (Secret Sites, 2004). Another component of webpages to avoid are boxes. It is understandable if you must have some, but avoid placing them everywhere (Smith, 2009). Websites that have boxes of "All different sizes" (Smith, 2009), that do not line up, and that appear to be everywhere can turn the attention away from readers (Smith, 2009). The setup of your webpage, as you can see, can make or break the success of your webpage without even looking at the information you are trying to share.

However, there are main important elements that web designers must provide on their websites. These are the basic list of do’s and don'ts objectives for your website to become a successful website. You want to focus on setting your navigation search engine properly on your website. As web designers, we want our navigation search engine to be user-friendly and easy to find on the website. According to Web design Ledger, “You’ll have your main navigation in a blue color, while the sign up button is in a green color. Regardless you’ll want to make your navigation easy to spot and easy to use (Smith, 2009).” This author explains a great idea by color coding the different buttons into two different colors, in turn making it easier to find these buttons. I feel we need to be able to hi-light the navigation search engine by using color coding to help our audience to find it in a user-friendly way. However, another objective that should be thought about is choosing the right color scheme for our new website. Sometimes, I feel some web designers become very overwhelmed and may add in colorful fonts and background pictures. However, we want to think about what a great color scheme is that would not overwhelm our audience. According to Web Designer Ledger, here is a great example of choosing the right color scheme. “ A doctor/medical website will generally stick with a lighter, more open color scheme for their website (Smith, 2009).” This author makes a great point about observing more professional websites and how they use soft and light colors, not loud and bright colors. Remember, web designers, to think about the different color schemes and try to use soft and light colors instead of rough and bright colors that can become very distracting for our audience.

Also, please remember that we want to use a user-friendly font for our new websites. If we use a different non-friendly user font, then it may become difficult for our audience to read the important information on our website. According to Velvet Blues, please use standard font! “Standard fonts are a set of fonts guaranteed to display across most browsers and operating systems (Velvet Blues, 2011).” However, this statement means that we want to only use certain fonts such as: Times New Roman, Arial, Verdana, and etc. These fonts are easy on our audience’s eyes and it is easier to read these fonts when using different operation systems. As web designers, we want to use these certain fonts because our audience may use different web browsers such as: Internet Explorer, Firefox, and Safari. When our audiences try to view the same website without using one of these fonts, sometimes there are missing text on the websites (Velvet Blues, 2011). One of the main reasons for this problem is that there can be compatibility issues or problems that occur on different operating systems and web browsers (Velvet Blue, 2011). We want to provide easy reading fonts to help our audience to be able to read the important and useful information on our websites. Also, we do not want our audience to experience difficulties by having compatibility issues when web designers use a non-friendly text font.

When you are creating a new website, you must be aware of some tips to make the website more enjoyable and easy to access. The people who look at your website, skim the information instead of reading the print like a book. Since viewers are going to skim your information, using links to connect to other web pages will keep the website interesting. The links should be clear to the subject, not using terms only known by your organization. The viewers want the information quickly, but include enough information so the visitors have enough detail with their information. Another thing to include in website designs is the contact information. It may seem unnecessary to give the visitors personal information, but contact information reminds viewers that someone made the site and if the visitors want to ask questions and clarify anything they may do so (Kyrnin, 2004). Along with the way visitors will read the website, the navigation of the website is also key to a successful website design.

The information given on the web page should be organized so visitors can easily find what they need and easily navigate their way through the website. When thinking about the organization of the website, think about how visitors would naturally look through the website. The navigation needs to ensure the viewers can look around the web site with ease and the viewers will not get frustrated. The World Wide Web is used globally. This means that measurements, currencies, dates and times need to be clear in the website for more than one demographic area (Kyrnin, 2004). Only using one form of measurements limits the people that will use your website. The way a person sets up the web site, encourages more viewers and more positive feedback to the information given. When creating a website, the way organization and navigation of the site are used is very important to a good website.

It is very easy to make or break a webpage. You must pay attention to font, color, size, content, accessibility, pop-ups, animations, etc. Each one of those components must be treated individually as a tool for making your webpage succeed. If you follow the popular tips and guidelines that we have discussed, your webpage will skyrocket to success in the classroom. Students and other teachers will find it useful and helpful for their education and it will help you, as a teacher, become better organized with your classes. Webpages are almost essential for teachers and making your own successfully, is key for your classroom.

__References__

Kyrin, J. (//2011//). //10 tips to a great webpage//. Retrieved from[| http://webdesign.about.com/od/webdesignbasics/tp/aa112497.htm]

Learning Web Design. (//2003//). //Websites do's and don'ts//. 01-14. Retrieved from []

Secret Sites//. (2004)//. //Learn the secrets of web design.// Retrieved from []

Smith, M. //(2009)//. //20 do's and dont's of effective web design.// Retrieved from []

Velvet Blue Inc., (//2011//). //Our best advice: website do's and dont's//. Retrieved from []

<span style="font-family: 'Times New Roman',Times,serif; font-size: 130%;">November 18, 2011 <span style="font-family: 'Times New Roman',Times,serif;"> <span style="font-family: 'Times New Roman',Times,serif;">Image by: Michaeltodaymd from <span style="font-family: 'Times New Roman',Times,serif;">@http://media.photobucket.com/image/web%20design/michaeltodaymd/dreamstime_10319813.jpg?o=104

//**<span style="font-family: 'Times New Roman',Times,serif;">Picture from: Brittany Alt ^ **// <span style="font-family: 'Times New Roman',Times,serif;"> <span style="font-family: 'Times New Roman',Times,serif;">Picture from Megan Leatherman <span style="font-family: 'Times New Roman',Times,serif;">Photo by tradekerala from <span style="font-family: 'Times New Roman',Times,serif;">@http://i1043.photobucket.com/albums/b435/tradekerala/Transpire/Web-design.jpg <span style="font-family: 'Times New Roman',Times,serif;"> <span style="font-family: 'Times New Roman',Times,serif;">Picture from Juliana Sheets <span style="font-family: 'Times New Roman',Times,serif;">Photo by eddy168_photo from <span style="font-family: 'Times New Roman',Times,serif;">http://media.photobucket.com/image/websites/eddy168_photo/Websites.jpg?o=102

<span style="font-family: 'Times New Roman',Times,serif;">media type="custom" key="11174274" Prezi by Megan Leatherman

<span style="font-family: 'Times New Roman',Times,serif;">media type="custom" key="11210998" //**<span style="font-family: 'Times New Roman',Times,serif;">Prezi by: Brittany Alt ^^ **//

<span style="font-family: 'Times New Roman',Times,serif;">media type="custom" key="11636750"

<span style="font-family: 'Times New Roman',Times,serif;">Prezi by Juliana Sheets

<span style="font-family: 'Times New Roman',Times,serif;">media type="custom" key="10774806"

<span style="font-family: 'Times New Roman',Times,serif;">media type="custom" key="10774866"

<span style="font-family: 'Times New Roman',Times,serif;">media type="custom" key="10774814"

<span style="font-family: 'Times New Roman',Times,serif;">Juliana Sheets work: <span style="font-family: 'Times New Roman',Times,serif; font-size: 12pt;">Kampherbeek, Jan. “100 Do’s and Dont’s in Web Design Styleguide.” SpiderPro. Web. 18 Sept. 2011. Retrieved from http://www.spiderpro.com/pr/prstgm/001/html. <span style="font-family: 'Times New Roman',Times,serif; font-size: 11pt;">Content: Many different areas covered: content, navigation, design, presentation, ect.

<span style="font-family: 'Times New Roman',Times,serif; font-size: 11pt;">Authority: Jan Kampherbeek, webmaster of SpiderPro <span style="font-family: 'Times New Roman',Times,serif; font-size: 11pt;">Recognition: designed own web design program

<span style="font-family: 'Times New Roman',Times,serif; font-size: 11pt;">Purpose: provide a styleguide with many content areas.

<span style="font-family: 'Times New Roman',Times,serif;"> Kyrin, J. “10 Tips to a Great Web Page.” 18 Sept. 2011. Retrieved from http://webdesign.about.com/od/webdesignbasics/tp/aa112497.htm.
<span style="font-family: 'Times New Roman',Times,serif; font-size: 11pt;">Gives examples, explanations and sites linking to other examples.

<span style="font-family: 'Times New Roman',Times,serif; font-size: 11pt;">Content: Very informative and giving reasons why to do a certain procedure. <span style="font-family: 'Times New Roman',Times,serif; font-size: 11pt;">Authority: Jennifer Kyrin

<span style="font-family: 'Times New Roman',Times,serif; font-size: 11pt;">Purpose: gives examples on how to do each task.

<span style="font-family: 'Times New Roman',Times,serif; font-size: 11pt;">Relevance: very informative with a variety of information

<span style="font-family: 'Times New Roman',Times,serif; font-size: 12pt;">101 dos and don'ts of website building. 18 Sept. 2011.Australia: Retrieved from http://www.akstrategic.com/contact.php. <span style="font-family: 'Times New Roman',Times,serif; font-size: 11pt;">Examples of page design, navigation, and website design with online websites that show examples.

<span style="font-family: 'Times New Roman',Times,serif; font-size: 11pt;">Authority: e-business solution provider Purpose: Explains and gives examples to solutions of building a website. <span style="font-family: 'Times New Roman',Times,serif; font-size: 11pt;">Publisher: official site for business people. Content: Gives examples how to fix problems not just stating problems.

<span style="font-family: 'Times New Roman',Times,serif;">Megan Leatherman's notes <span style="font-family: 'Times New Roman',Times,serif;">2011.//TeacherWeb,inc.// retrieved from <span style="font-family: 'Times New Roman',Times,serif;">__[]__ This website is a good website to use as a reference for a finished successful teacher website. It has a website example of a teachers page with her mission for the class, information about herself including contact info for the parents, and links for grades, lessons, homework, etc. We can use this website to look at examples for the way we would like a website to look. It shows websites that teachers use that are effective so it will be very helpful as a good website full of examples.

<span style="font-family: 'Times New Roman',Times,serif;">Teaching Learning and Technology Center retrieved from <span style="font-family: 'Times New Roman',Times,serif;"> [] This website contains examples of fonts, backgrounds, designs, and teacher webpages. It is very helpful because it shows us different examples of successful webpages. This website has many links for all kinds of examples of important components for successful websites such as appropriate backgrounds, graphics, fonts, and more including examples of actual teacher websites.

<span style="font-family: 'Times New Roman',Times,serif;"> [] This website is very helpful for our topic on webpages because it gives clear cut directions on what to put on your webpage to keep it interesting, to keep it undistracting, and to make it engaging for others.

<span style="font-family: 'Times New Roman',Times,serif;">Lowery, S. 2011. Web Source. retrieved from <span style="font-family: 'Times New Roman',Times,serif;">"Be cautious when selecting your background and text colors. Busy backgrounds make text difficult to read and draw the attention away from the text. Always be consistent with your background theme on each page of your site. Your site should be nicely organized and uniform throughout. Keep in mind, colors affect your mood and will have an affect on your visitors as well. Bright colors such as yellow and orange, cause you to become more cheerful or happy, while colors such as blue and purple have a calming effect. Dark colors such as brown and black have a depressing effect. A good rule of thumb would be to use colors based upon the type of effect you're trying to achieve."

<span style="font-family: 'Times New Roman',Times,serif;">//**Brittany Alt's notes:**// <span style="font-family: 'Times New Roman',Times,serif;">Provini, C. //Education world:the educator's best friend//. Retrieved from [|http://www.educationworld.com/] <span style="font-family: 'Times New Roman',Times,serif;">This website is organized and covers different topics in a user friendly way. It is easy to find useful information and links. This website uses main keywords for links, but it is not too wordy. Also, this website presents a contact link to help users be able to contact the main corporation of Education World for customer service, concerns, or questions. This is a great example for do's for a website.

<span style="font-family: 'Times New Roman',Times,serif;">//Microsoft in education:teacher resources//. (2011). Retrieved from [] <span style="font-family: 'Times New Roman',Times,serif;">This website provides a great search engine to help narrow your searches to relevant materials. This website uses pictures and text for table of contents, which this is an attractive website. Also, this website provides appropriate information needed in the search engine. However, this is another great example of do's for web designing.

<span style="font-family: 'Times New Roman',Times,serif;">//Welcome to sites for teachers//. (2011). Retrieved from [] <span style="font-family: 'Times New Roman',Times,serif;">This website is an example of don'ts for web designing. This website is difficult to navigate through all the links therefore this website is a non-friendly user site. When you click on links, it takes you to another site. I noticed when I was trying to use this website, it was very distracting because it has a lot of moving pictures and too many pop-up ads. When I was researching these different links, they lack in providing useful and meaningful information.

<span style="font-family: 'Times New Roman',Times,serif;">Smith, M. (2009, October 25). //20 do’s and don’ts of effective web design//. Retrieved from[| http://webdesignledger.com/tips/20-dos-and-donts-of-effective-web-design] <span style="font-family: 'Times New Roman',Times,serif;">The 20 do's and don'ts count down for web design:

<span style="font-family: 'Times New Roman',Times,serif; font-size: 140%;">" #20 - DO: keep your page structured. <span style="font-family: 'Times New Roman',Times,serif; font-size: 140%;">#19- Don't: place boxes everywhere! <span style="font-family: 'Times New Roman',Times,serif; font-size: 140%;">#18- Do: Focus on what is important. <span style="font-family: 'Times New Roman',Times,serif; font-size: 140%;">#17- Don't: place irrelevant ads across your page. <span style="font-family: 'Times New Roman',Times,serif; font-size: 140%;">#16- Do:Choose the right color scheme. <span style="font-family: 'Times New Roman',Times,serif; font-size: 140%;">#15- Don't: Overdo it with 20 different colors. <span style="font-family: 'Times New Roman',Times,serif; font-size: 140%;">#14- Do: Make it easy to scan your pages. <span style="font-family: 'Times New Roman',Times,serif; font-size: 140%;">#13- Don't: write one paragraph per page that is 1,000 + words long. <span style="font-family: 'Times New Roman',Times,serif; font-size: 140%;">#12- Do: Keep it simple!" (Smith, M., 2009). <span style="font-family: 'Times New Roman',Times,serif;">More examples and continuing count downs for do's and don'ts from this source.Image by: Michaeltodaymd from <span style="font-family: 'Times New Roman',Times,serif;">@http://media.photobucket.com/image/web%20design/michaeltodaymd/dreamstime_10319813.jpg?o=104 <span style="font-family: 'Times New Roman',Times,serif;">Photo by tradekerala from <span style="font-family: 'Times New Roman',Times,serif;">@http://i1043.photobucket.com/albums/b435/tradekerala/Transpire/Web-design.jpg <span style="font-family: 'Times New Roman',Times,serif;">Photo by eddy168_photo from <span style="font-family: 'Times New Roman',Times,serif;">http://media.photobucket.com/image/websites/eddy168_photo/Websites.jpg?o=102media type="custom" key="11545136"media type="custom" key="11635070"