Design Principles


Web Development Life Cycle | Document Content & Typography | Usability | Testing | Ethical Issues and Practices | Web Design | Mobile Design

Web Development Life Cycle

"Anytime a business spends money, someone should be accountable for the return on investment. A website is no different." AHFX.net

Why is it important to identify the purpose and goals of a web site? The first important step (that is often neglected) in the website creation process, is to determine the purpose of your web site. Too often a website lacks the focus of a clear purpose and visitors are quickly confused and click away.

It's an established fact that Internet users today are increasingly impatient and intolerable. A website visitor will not spend their precious time trying to figure out what the site is about (or how it can benefit them). A website with a well-defined purpose stands out and a visitor should instantly recognize it without effort.

The homepage is what many people see when first encountering a website, and it can lead to a lasting impression, negative or positive, that can affect the visitor's decision to return to it. The homepage is a website's initial chance to make an impression, so a site visitor must see exactly what they're looking for the moment they arrive. Defining the purpose of the website will help you see what will attract users to the site.

Web development life cycle presentation
Click on the picture to read the presentation

Assignment: Web Site Purpose—Virtual Field Trip

Directions: Let's take a virtual field trip. You are going to examine 10 different websites and see if you can determine the purpose of the website by only exploring the homepage. Each web site is designed with a purpose in mind. Purposes will vary depending upon what the owner of the web site is trying to accomplish. Take the following virtual field trip by visiting each site linked (if you experience link rot, just note it and move on). Look around on the site home page—ONLY. From your impression of the home page, type in one to two sentences what you believe the purpose of the site is and why. Download the Web Site Purpose Virtual Field Trip worksheet and upload to itsLearning when complete.

Assignment: Web Development Life Cycle Note Guide

Directions: Download the Web Development Life Cycle Note Guide. After reading the Web Development Life Cycle presentation, complete the worksheet and submit to itsLearning when complete.


Document Content & Typography

scanning a web pageWhen someone visits a website you’ve designed, the odds are that they don’t care much about the colors, images or sounds, they’re immediately looking at the text. No matter how many bells and whistles you’ve built into a website, everyone relies on text to accomplish whatever they’re visiting the site to do.

Users don’t read, they scan. Analyzing a web-page, users search for some fixed points or anchors which would guide them through the content of the page. Users don’t search for the quickest way to find the information they’re looking for. Neither do they scan web-page in a linear fashion, going sequentially from one site section to another one. Instead users satisfice; they choose the first reasonable option.

quoteAs the Web is different from print, it’s necessary to adjust the writing style to users’ preferences and browsing habits. Promotional writing won’t be read. Long text blocks without images and keywords marked in bold or italics will be skipped. Exaggerated language will be ignored.

Talk business. Avoid cute or clever names, marketing-induced names, company-specific names, and unfamiliar technical names. For instance, if you describe a service and want users to create an account, “sign up” is better than “start now!” which is again better than “explore our services”.

typewriterAn optimal solution for effective writing is to:

Actually it’s really hard to overestimate the importance of white space. Not only does it help to reduce the cognitive load for the visitors, but it makes it possible to perceive the information presented on the screen. When a new visitor approaches a design layout, the first thing he/she tries to do is to scan the page and divide the content area into digestible pieces of information.

mobile quoteComplex structures are harder to read, scan, analyze and work with. If you have the choice between separating two design segments by a visible line or by some whitespace, it’s usually better to use the whitespace solution. Hierarchical structures reduce complexity (Simon’s Law): the better you manage to provide users with a sense of visual hierarchy, the easier your content will be to perceive. White space is a valuable design element. White space is not necessarily white. It just means blank space so there is separation between elements.

Typography can be easily overlooked. Spending even a few minutes with the text that will be the center piece of your design can transform it from something any web designer could slap on a page to an element that supports the rest of the design. Thursday Bram wrote an excellent blog article for Web Design Depot, 10 Web Typography Rules Every Designer Should Know. Be sure you read the 10 rules. Jana Brech's 10 Common Mistakes in Websites offers great insight into the common mistakes in websites are made by people make when writing content.

Assignment: Question for Thought 1

Directions: Describe the inverted pyramid style of writing and why it is used on Web sites (you'll probably need to do a little Internet research). Place your response in the itsLearning textbox. Do not attach a separate document and be sure to proofread before submitting.

Assignment: Usability: Typography Presentation

Directions: Create a presentation on Typography (either PowerPoint or Prezi). Presentation must include:

Your target audience is beginning Web students. The presentation must be educational as well as entertaining. The goal is to educate them about the use of typography in web pages and motivate them to make the right choices regarding font selection when designing a web page. You must write a 10-question quiz over your presentation. You must provide the teacher with an answer key. Download the full assignment here: Typography Presentation & Quiz.


Usability

Who are you designing a website for, you or the visitor? I hope you answered "the visitor." Simplicity should be the goal of all page design. On the web, the KISS (keep it simple stupid) approach is the best approach. Websites have a purpose and a target audience. A website's job is to communicate the purpose to the target audience using multiple medias and using those medias well.

Web usability is an approach to make web sites easy to use for an end-user, without the requirement that any specialized training be undertaken.(Wikipedia.com) Usability is a measure of the interactive user experience associated with a user interface, such as a website or software application. A user-friendly interface design is easy-to-learn, supports users' tasks and goals efficiently and effectively, and is satisfying and engaging to use.

Usability depends on a number of factors including:

From the user's perspective, usability is important because it can make the difference between performing a task accurately and completely or not, and enjoying the process or being frustrated.

According to Larisa Thomason, a senior web analyst at NetMechanic, Inc., "Search engine promotion is important: most visitors use a search engine to find your site. But once they arrive, they have to be able to actually use the site and understand the content. Otherwise, your site is a waste of their time."

Web usability means designing for your visitors instead of for yourself or your client. A site that conforms to user expectations makes visitors more comfortable and more apt to visit again and recommend the site to their friends. Good usability is critical to your site's success!

usability presentation
Click on the picture to read the presentation

Assignment: Usability: Evaluating Websites Assignment Sheet

Directions: Download the "Usability: Evaluating Websites Assignment Sheet" and upload to itsLearning when the assignment is complete.


Testing

Testing cannot be emphasized enough. Test often. Test early. Testing your website is an integral and ongoing process. A website should be tested in multiple web browsers and on multiple computers to ensure that the website renders properly. External links should be checked often to make sure they are still valid and do not lead to 404 error page not found. Link rot (when external links are broken because they have been moved or no longer exist) create websites that are dated and neglected. Many people may think that the job is done once a website is published to a web server. However, website maintenance is a continual process to keep a website current and fresh.

Testing and publishing presentation
Click on the picture to read the presentation


Ethical Issues and Practices in the Web Development Industry

Did you know that it is unethical but legal to link to another website without permissionPaul McNally, a web applications developer, posted in his 2008 WebLog, "With the production of a web application, especially one that is to be used for e-commerce there are a series of ethical issues and responsibilities that fall upon the website company and the ISP Host. With an e-commerce site there is the highly important issue of Personal Privacy.

Some Websites hold information on their registered users; information is held and may be gathered about users. This information may range from buying habits to names and addresses and email addresses. This information is highly sought after in today's capitalist, market driven society.

It is important that users of a Website know that their information will not be passed on to any third parties without their explicit permission or used in situations that may be inappropriate to them or others.

The Data Protection Act of 1998 states that "Data disclosed by a party to another party may only be used for the specific purposes it was disclosed for. The data can only be kept for an appropriate length of time and must not be disclosed to other parties (without consent of data the owner)."

Information regarding how users' information will be used should be stated clearly on the website, and not shared without explicit permission. As an example, acceptable use may be to use a members email address to inform them of new products or special offers with a newsletter, but to always give users the option to opt out of such mailings and never overdo it as this would be interpreted as spamming the user, which is not good practice and is also not profitable."

Other ethical issues include:

Why should users, particularly children and teenagers, aim to be safe and secure online?

storyDo you have a Facebook account? Have you ever read the Privacy Policy statement (it changes from time to time)? Why do social networking websites like Facebook have a privacy policy? What about MySpace (which is making a come back)...does it have a safety policy? Google+? SnapChat? Instagram? Why are safety or privacy policies needed? Read more about your privacy with Snapchat in Nicole Fleming's blog, Snap. Chat. Delete? Privacy policies tell you how the site maintains accuracy, access, security, and control of the personal information it collects; how it uses the information, and whether it provides information to third parties.

Have you ever goggled your own name to find out what other people can find out about you? You might be surprised at what is available about you for public consumption. Is it information that you would want college recruiters, potential employers, teachers or even your parents to see or know about you? You might be surprised to learn that college admissions and employers hire other people to do Internet searches on potential candidates and use this information before offering admission, scholarships or employment.

The story (located in the speak bubble) is not true and no one will be collecting information about you in this school. However, this is the kind of information that many websites collect whenever you visit them. Companies can learn all kinds of things about you, based on where you go and what you do when you're online. Most people think no one knows who they are or what they do when they are online. Believing they are anonymous is why people sometimes do things online that they would not do face to face. However, it is nearly impossible to be completely anonymous online.

Did the "Day in Your Life" video scare you? Perhaps not, but it should make you think twice about the data you sharing on the Internet. Websites do sell your information (most anonymous but not all). Aggregate data can be collected even when a website's visitors remain anonymous. The data helps companies figure out what visitors' interests are, so they can place ads or sell products that they might like.

Safe and Secure presentation
Click on the picture to read the presentation

Assignment: Safe and Secure Quiz

Directions: Take the Safe and Secure quiz in itsLearning.

Assignment: Question for Thought 2

Directions: How can aggregate data be useful to companies that buy information from websites? How would aggregate data help them place ads or sell products on the Internet? Answer the questions and cite an example or two of companies using aggregate data. Place your response in the itsLearning textbox. Do not attach a separate document and be sure to proofread before submitting.


Web Design

You have four seconds to wow, impress, and convince the Web visitor to give your Web site a chance. Go!

Frederick Townes, owner of W3 EDGE, explains how the Internet can be a cruel place, where the laws of evolution apply. You have to adapt, be adept and adopt a new attitude about your site's aesthetics and the look and feel and the impression these design aspects have on visitors. Read Towner's article, Web Design Aesthetics so that visitors say Wow! instead of No how!.

aethetics chartGood aesthetics is mostly common sense. The main components of an aesthetically and strategically appealing website are:

The aesthetics of your website is one of the most critical aspects for you to consider. Read more about Web aesthetics in Tim San Fillippo's blog, The Importance of Aesthetics in Web Design.

The term web design is normally used to describe the design process relating to the front-end (client side) design of a website including writing mark up. Designing an effective web site requires more than just gathering relevant information and posting it on the web. Like a good paper or research presentation, a quality Web project demands as much attention to the selection, organization, and presentation of material as to the underlying research itself. You should strive, above all, to be both clear and engaging in every aspect of site design. There is a first for everything and it is time for your very first web design project. While landing your first assignment is a huge accomplishment in itself, keeping your first client happy requires a whole different set of skills. You are not just a designer — you are also a project manager, and offering a great customer service experience is essential for winning over your clients’ repeat business, so you will need to be on target from day one.

Start a Web Design Project [Infographic]

Assignment: 10 Principles of Effective Web Design worksheet

Directions: Read 10 Principles Of Effective Web Design by Vitaly Friedman and answer the questions in itsLearning.

Assignment: Question for Thought 3

Directions: It would be a really good idea before you start a web design plan to read one or more articles on the topic. Both articles below are written by professional designers who want to give you suggestions for improving your site designs.

Select one of the articles listed and write a one paragraph summary (~100 words) of the article. Place your paragraph directly in the itsLearning textbox. Do not submit a separate document and be sure to proofread.


Mobile Design

mobile quoteThe mobile user and the desktop user are not the same (despite the fact that the same user may use both devices). Here is one thing we know about the user who uses their mobile device with the Internet, they are searching for specific information. They are not simply surfing the World Wide Web as they might with a desktop computer.

Design is really about solving problems. Design patterns for mobile are emerging as the platform matures. Design for mobile devices is different from design for desktop or laptop computers. Shanshan Ma's article 10 Ways Mobile Sites Are Different from Desktop Web Sites offers great insight into the differences between the two. Written in 2011, the differences still hold true today.

mobile quote

Mobile browsers are a fixed size. This difference, plus the fact that mobile device screens are typically smaller than desktop screens, changes the way people view webpages on mobile devices. The area on your browser where content shows up is the viewport. Think of it as a window (or port) through which you view a webpage. Initially, most mobile browsers display webpages so that they fit in the viewport. On a site designed for desktop browsers, this is often far too small to be read. So users zoom in on the page. The size of the viewport stays the same, but the size of the webpage increases.

mobile quoteWebsites designed with mobile devices in mind use responsive Web design. Responsive Web design uses CSS3 media queries to detect the device/screen size and respond with a layout to fit the screen. Such a site is designed from the beginning on a grid with “breakpoints” that tuck and fold content and elements as the page expands or contracts. Read Propeller Media Works, Inc. blog post Responsive Website versus Desktop + Mobile Web Site to learn more about responsive design.

Assignment: Mobile Site Presentation

Directions: Create a presentation (PowerPoint or Prezi for example) comparing and contrasting Desktop Web Sites and Mobile sites. The presentation should be geared toward Web design students who are interested in creating mobile Web sites. Upload your presentation to itsLearning.


Resources

If you are having problems viewing this page, opening videos, or accessing the URLs, the direct links are posted below. All assignments are submitted in itsLearning. If you have having problems, contact Mrs. Rush through the itsLearning email client.

Phases of Web Development Cycle flashcards: https://www.examtime.com/p/1067383-Phases-of-Web-Development-Cycle-flash_card_decks

Web Development Life Cycle presentation: http://www.mrsrush.net/digitaldesign/design/cycle.pdf

Website Usability presentation: http://www.mrsrush.net/digitaldesign/design/usability.pdf

Website Management presentation: http://www.mrsrush.net/digitaldesign/design/testing.pdf

Sharing Information: A Day in Your Life video: http://youtu.be/O5OsQsB7Hg4

Design Infographic: http://designmodo.com/web-design-project

10 Principles of Effective Web Design: http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/

Web Design Tips: http://www.smartwebby.com/web_site_design/webdesign_tips.asp

How we really use the Web: http://www.sensible.com/chapter.html

10 Ways Mobile Sites Are Different from Desktop Web Sites: http://www.uxmatters.com/mt/archives/2011/03/10-ways-mobile-sites-are-different-from-desktop-web-sites.php

Responsive Website versus Desktop + Mobile Web Site: http://www.propellermediaworks.com/blog/responsive-website-design-versus-desktop-mobile-web-sites

The Importance of Aesthetics in Web Design: http://www.5stonesmedia.com/blog/the-importance-of-aesthetics-in-web-design

Web design aesthetics: http://www.webcredible.com/blog-reports/web-credibility/website-design.shtml

10 Web Typography Rules Every Designer Should Know: http://www.webdesignerdepot.com/2009/02/10-web-typography-rules-every-designer-should-know-2/

10 Common mistakes in websites: http://webwisewording.com/common-mistakes-in-websites/

Eye Tracking video: http://youtu.be/lo_a2cfBUGc

Transcript: http://mrsrush.net/digitalesign/design/index.pdf


Credits

Web Design Infographic: http://designmodo.com/web-design-project/

Dewey, Caitlin. 30 Ways the Web has Changed us: http://www.washingtonpost.com/blogs/style-blog/wp/2014/03/12/36-ways-the-web-has-changed-us/

Chalk Board: DryIcons.com


Transcript of this lesson