Course Outline


Class 1 Description

Let's get to know each other, discuss the syllabus and the lay of the course.

Writing HTML is commonly thought of as coding. It is more correctly defined as markup. We will use some freely available web resources to learn the building blocks of developing websites.

CSS Deck.com
Develop web applications faster with real-time preview and enhanced debugging.

Code Academy
We'll use the course content from Code Academy. It's good enough for NYC Mayor Michael Bloomberg.

Class Notes

Download class 01 notes.

Required Reading

Assignment

All parts of Assignment 1 are due 1/19 at 7pm. Upload to E-Learning.

1 of 3
Create an account on Code Academy. Complete Unit 1: HTML Basics & Build Your Own Web Page and send me a link to your project completion page.

Create a simple web page that explains three things you learned from your reading material. Save your work on CSS Deck.com and send me a link to the web page.

The web is a vast domain, with rapidly evolving jobs. It common to demarcate the web into two basic roles: coders, who write HTML, CSS, JavaScript, PHP, Ruby or some other code, and designers, who create the visual design of a website. While this distinction between coders and designers is convenient and facile, there are actually a wide range of careers available in web development.

You'll find that many jobs in web development are non-discrete: the responsibilities and roles of these careers overlap.

 

Required Reading

Additional Resources

Assignment

2 of 3
Decide upon an area that you find interesting. Research it and find: roles and responsibilities, average pay, places that offer that job. Find someone in that field and link to their blog, Github, Twitter or other space on the web. On the same webpage you created in Part 1, write a paragraph about the person and describe what they do and why you find it interesting. Include the link to their social site. Include a subheading title.

What the semester project isn't

Let me disabuse you of the notion of building a portfolio as your semester project. There are many sites where you can create an online portfolio. In fact, with many of them you could have a portfolio website ready this evening:

  • Coroflot
  • Behance
  • CarbonMade
  • Deviant Art
  • Shown'D

Just to name a few. By the time you are done with this class you will be able to create your own portfolio website.

What the semester project is

Instead, you will develop a unique idea for a website that fills a need for a unique audience group.

Here are some examples:

We will further define this as the semester progresses.

Assignment

3 of 3
In the same webpage you created in Part 1, write a short paragraph of what you would like to do for your semester project. Include a subheading title.

Class 2 Description

This week we examine additional HTML tags and learn how CSS controls the appearance and layout of a webpage and begin tackling the semester project.

Let's continue exploring the mechanics of HTML and CSS.

CSS Deck.com
Develop web applications faster with real-time preview and enhanced debugging.

Colour Lovers
A creative community where people from around the world create and share colors, palettes and patterns, discuss the latest trends and explore colorful articles.

Class Notes

In Class Design Challenge

Use content from Wikipedia to compose a page on CSSDeck about your favorite comic book or film hero that includes the following:

  • A minimum of three paragraphs p of content
  • Proper heading structure:
    • An h1 tag for the page title
    • An h2 tag for the section
    • An h3 tag for the subsection
  • A link a to a website with more information
  • An image img of the hero or character
  • Styles and colors to your page

Below is an example, without any added styles and colors.


The Tick

The Tick on TV

Overview

The Tick The Tick: The Animated Series is an American animated television series adaptation of the New England Comics superhero, The Tick. The series debuted September 10, 1994 on the Fox network's Fox Kids block and was responsible for introducing the satirical comic book character to a mainstream audience. Lasting three seasons, the final episode aired on November 24, 1996. Since then, The Tick has been syndicated by various networks, further increasing the show's cult following, and has been released on both VHS and DVD. A live-action series was created in 2001.

The Tick is an absurdist spoof of comic book superheroes. The Tick's sidekick is Arthur, a former accountant who dresses like a moth that flies. In the first episode, the Tick crashes a superhero convention to win the "protectorship" of The City.

The show's opening theme, written by Doug Katsaros, who also composed the scores for every episode, consists of big band music and campy scat singing. A typical episode plot would have The Tick battling a villain until Arthur devises a solution that saves the day. The Tick then declares an absurd moral regarding the previous conflict before the story comes to a close. Although the series was initially aimed primarily at children, it features an absurdist, parody style that appeals to an older audience as well.

Content repurposed from Wikipedia under the Creative Commons Attribution-ShareAlike License.

Assignment

1 of 2

Complete the following code academy tutorials.

  • HTML Basics II
  • Social Networking Profile

Create a simple HTML page for your favorite band, artist, poet or designer. Include the following:

  • Short bio
  • A hyperlink to the band's website
  • An image of the individual(s)
  • An HTML unordered list that shows other artists with the same style.
  • Choose a palette from Colour Lovers and apply CSS styles to your page
Save your work on CSSDeck and send me the link through e-learning.

By this point you should have a general, perhaps vague sense of what you would like to work on this semester. Explore your idea in more depth by reviewing websites that are similar to yours.

We will slowly, but intentionally work on your Semester Project over the next 15 weeks. You might remember Aesop's fable of the tortoise and the hare. The tortoise procrastinated while the hare diligently ran the course. Your reading assignments will help you understand why we procrastinate and more, importantly, what you can do to counteract the natural urge to procrastinate.

Required Reading

Recommended Reading

 

Assignment

2 of 2

In a webpage created in CSSDeck.com, submit a list of at least three (3) websites that are similar to yours.

Answer the following questions:

  • Denise Jacobs argues that we all have a troll-like inner critic. Of the methods she identifies to banish this troll, which would be most successful for you? Why?
  • In David McRaney's article, what is "hyperbolic discounting"? List one method McRaney identifies to counteract hyperbolic discounting. Which would work best for you?

Upload the webpage link to eLearning.

Class 3 Description

This week we will review the basic HTML and CSS tags, examine how CSS controls the appearance and layout of a webpage and learn about relative vs. absolute filepaths.

Let's review what we learned two weeks ago, then continue exploring the mechanics of HTML and CSS. Also, we will discover how file paths work.

Cheat Sheets

Class Notes


Presentation Notes

In Class Exercise

In tonight's exercise, we will review html tags, create styles and style sheets, learn the different types of selectors, and explore inheritance and the cascade.

 Lesson Files

Assignment

1 of 3

Complete the following Code Academy tutorials.

  • HTML Basics III
  • Clickable Photo Page

And the following readings:

Place a link to your CodeAcademy achievement badges page on e-learning.

2 of 3

Create an HTML page for your least favorite musician, actor, band or celebrity (with the content of your choosing) that includes the following HTML tags:

  • <h1>, <h2>
  • <a>
  • <span>
  • <div>
  • list items (<ul>, <ol> and <li>)
  • a 3x3 table listing the top 3 worst pieces of work created by the aforementioned person above. Each row must include the title of the work, the year produced, and it's rating on either Rotten Tomatoes, Metacritic, or AV Club. Be sure to include the <th>, <tr> and <td> tags.

Use a palette from Colour Lovers to add:

  • a unqiue color headings
  • a unique color for p tags

Save your webpage and your css styles page into a folder titled class03, compress(zip) it, and upload the compressed file to e-learning.

As you are developing your idea for your semester project, the following reading will help in focusing on what you want to say and to say it with the right voice.

Required Reading

Assignment

3 of 3

Answer the following questions in an HTML page created in either JSBin or CSSDeck. Upload the link to e-learning.

  • In Steve Krug's book, he talks about the 3 Facts of Life. Which one of the three facts do you identify with the most? Write a paragraph explaining why.
  • From the Better User Experience Through Storytelling Articles: How can framing your project in a story format help you refine your ideas? Write a paragraph explanation.
  • What are different ways to establish hierarchy (or emphasis) in typography design? Provide a link to a good example of hierarchy.

Cookie Clicker

Class 4 Description

This week we will compare good and bad typography combinations, learn about CSS text formatting & Google Fonts, and explore creative briefs.

This week we will explore what makes up good typography, learn how to format text using CSS and look at Google Fonts.

Cheat Sheets

In Class Exercise

Part 1: Finding good/bad type selections.
Break up into groups of two. You must partner with someone you haven't met yet, or don't know well. Using old magazine articles, advertisements, or examples elsewhere, select one example of typographic design that you think is “good” and one that you think is “bad.” Magazines provided in class.

Tape up your selections on the wall and be prepared to verbally present and critique these pieces for the class. Try to stay away from phrases that use “I like.” Rather, be specific and use phrases such as: “This is good typography because the type style effectively communicates the subject,” or “This is an effective use of negative space to balance the typography, thus providing a visual rest or pause in the layout.”

Part 2: Formatting Text in CSS
Using CSS, we will:

  • format text.
  • change the font size.
  • format words and letters
  • format entire paragaraphs
  • style lists.

 Lesson Files

Part 3: Using Google Fonts.
Tonight, we will explore Google Fonts to make fantabulous websites with stunning and contextually appropriate typography.

Recommended Reading

Assignment

1 of 3

Complete the following Code Academy tutorials.

  • CSS: An Overview
  • Design a Button for Your Website

2 of 3

Download the sample page starter kit and complete the following:

  • Add CSS to this style sheet: sample-page-styles.css.
  • Float the navigation list (<ul>) left using the float: left property. Review the The Mystery of the CSS Float for assistance.
  • Float the <img> right, add a border, margin and padding.
  • Choose among the Google WebFonts two fonts that are complementary, attractive & readable.
  • Use pixels, ems, or percentage for the text size.
  • Style each header (<h1> - <h6>).
  • Style the body contents (<p>).
  • Add styles to the special class.
  • Modify the leading on the paragraph text.
  • Modify the bullet type on the unordered list.
    List Styling
    .
  • Make the links inside the nav element a different color from the content links.
  • Add comments to the stylesheet.
  • Add your own colour palette to the page. You may use a palette from Colour Lovers.
  • Place the html and css pages in a folder named assignment 4, compress (zip) it, and upload to e-learning.

A creative brief is, as the name implies, brief. It is a concise, high-level overview of the web redesign project. The readings below provide details about how to write a creative brief.

Required Reading

Assignment

3 of 3

Review the reading materials and then examine websites similar to the one you are proposing for your semester project. Craft a creative brief that includes:

  • Problem
  • Audience
  • Competition
  • Action
  • Next Steps

Comic Sans Criminal

Class 5 Description

This week we will look at creating a sitemap and continue exploring CSS.

Learning 101

Cheat Sheets


CSS Backgrounds

In class we explore how to add background images using CSS.

In-Class Exercise

 Backgrounds In-class-lesson

Required Reading

Useful Background Resources

Assignment

1 of 3

Complete the following Code Academy tutorials.

  • CSS Selectors
  • Sorting Your Friends

2 of 3

Download the Background Kit and use the included images to complete the following.

  • Before adding any styles, look at the page in a web browser. Looks pretty boring, huh?
  • Use texture.png as the background for the <body>tag. Repeat the background on both the x- and y-axis.
  • Use ruler.gif as the background for the <section>tag only. Repeat the background on the x-axis only.
  • Now look at the page again in a web browser. It doesn't take much to add visual interest to a page.
  • Upload all the files in zipped format to the Assignment 5 section of eLearning.

Now that you have written your creative brief, you are now ready to begin sitemapping.

A sitemap is a visual representation of the site's structure, flow and grouping of content and information. It communicates, it defines and it structures. It is a representation of the entire project, from a broad vantage point to many of the most minute of details. It is a chance to view the site structure and organization as a whole.

Web Redesign 2.0, Goto and Cotler, p. 98

 

Required Reading

Assignment

3 of 3

Review your creative brief. Create a sitemap that addresses the content needs of your audience. Use the sitemap template as a starting point. Upload the sitemap to the Assignment 5 section of eLearning.

"The best designed web site in the world! First class! Tremendous! Trust me! So fantastic, your head will spin! And nobody knows websites better than me, believe me."

— Donald Trump

 

Ling's Cars

Class 6 Description

This week we will explore the Six Thinking Hats method, learn about enhancing images with CSS, and use Font Awesome Icons to add icons to our webpages.

In class we will explore how to enhance images using CSS and add icons to webpages.

Cheat Sheets

Enhancing Images with CSS

Creating a Photo Gallery

 Enhancing Images Lesson Files


Assignment

1 of 3

Complete the following Code Academy tutorials.

  • CSS Positioning
  • Build a Resume

2 of 3

Download the Class 06 Folder to complete the following.

  • Add 2 complementary Google Fonts to the h1, h2, h3 and p tags.
  • Use a background pattern from either Subtle Patterns or Colourlovers as the background for the <body> tag. Repeat the background on both the x- and y-axis.
  • Use CSS to add a complementary background color for the <section> tag only.
  • Add a FontAwesome icon to the left of the h1 tag.
  • Now look at the page again in a web browser. It doesn't take much to add visual interest to a page.
  • Compress the files (.zip) and upload to e-learning.

Six Thinking Hats

The Six Thinking Hats is a method that allows us to systematically explore a topic, issue or decision with other individuals from different points of view. You will have an opportunity to use the hats in class. We will explore your semester project with a partner using the Six Thinking Hats method.

Required Reading

Assignment

3 of 3

Find an individual not in this class and use the Six Thinking Hats method to explore your semester project. You may need to introduce them to the Six Thinking Hats method, so feel free to use the slide notes and worksheet.

Write a summary that details the discussion for each of the hats. Include a full paragraph detailing how your project has changed based on your discussion. Send your summary to me in a text document to e-learning.

This also applies to web design.

Class 7 Description

This week we step into the process of wireframing websites, the preliminary step before the actual design. We will wireframe using the lo-fidelity paper method.

Prototyping is an essential technique to explore a range of possibilities and interactions with little commitment to one concept or idea.

  • Low fidelity (lo-fi) prototyping techniques include drawing on napkins, paper or in a sketchpad.
  • Medium fidelity prototypes are built in HTML and simulate the interactivity of a website without the details.
  • High fidelity prototypes are designed in Photoshop, Illustrator or a graphic design application and are a pixel-perfect illustration of what the end product will look like.
  Lo-Fi
Quick 'n dirty
Mid-Fi
Spartan yet interactive
Hi-Fi
Robust 'n shiny
Examples Pencil and paper Twitter's Bootstrap or other framework Photoshop or similar graphics application
Pros Rapid iteration, no commitment to one design Interactivity easily understandable Typically robust, highly polished
Cons Lacks detail, needs refinement Unrefined, stark Time-intensive, little room for alternate development

I advocate a lo-fi to mid-fi approach. We will first use the 12-column layout grid and quickly wireframe initial ideas on paper before writing any code. We can easily discard ideas or begin explore alternatives with a new sheet of paper. This allows us to select the best idea and not fall in love with our first idea.

Resources

In-Class Wireframe Challenge

Using the provided sheets of graph paper, wireframe the homepage of 3 of your competitor sites. In your in-class assignment, I expect you to:

  • Wireframe the common elements in the HTML page:
    • Text - headings, paragraphs, and lists.
    • Graphics and photos
    • Navigation links and bars
    • Form elements like input fields, select lists, buttons, radio buttons, checkboxes
  • Include your name, the competitor site's name and the competitor site's URL.
  • Turn in your wireframes to the teacher's station by the end of class.

Assignment

1 of 3 Reading Assignment

Read Chapters 1-4 in UXPin's The Guide to Wireframing and answer the following questions in the elearning text editor or a word document.

  • What are the advantages and disadvantages of sketching wireframes over wireframe software?
  • Write a paragraph on which type of wireframing style would work best with your project and why.

2 of 3

Using the provided graph paper, wireframe the homepage and 3 sub-pages of your site.

  • Subpages can include:
    • Blog page
    • Contact Page
    • Article Page
    • Video Page
  • Wireframe the common elements:
    • Text - headings, paragraphs, and lists.
    • Graphics and photos
    • Navigation links and bars
    • Form elements like input fields, select lists, buttons, radio buttons, checkboxes
  • Include your name and your site's name.
  • Turn in your wireframes to the teacher's station by 7:00pm on Thursday, March 2, 2017.

HTML5 Frameworks
A Preview of Next Week

Domain names are extremely important. They are how users will remember you.

Required Reading

 

Domain Name Assignment

3 of 3

Review the Domain Naming Slides and then:

  • List three (3) possible domain names for the website you will be registering for your semester project.
  • Review the domain names with a classmate.
  • Submit two paragraphs consisting of: a brief summary of your discussion with your classmate; the domain name you like best and why.
  • Upload your paragraphs to E-learning

30 Unintentionally Inappropriate Domain Names

Class 8 Description

This week we look at how to rapidly prototype in HTML using HTML5 Kickstart, then we will look at the domain registration process.

We will learn how to rapidly prototype layout ideas in HTML using HTML Kickstart, a modular HTML, CSS and JavaScript kit.

Prototyping is an essential technique to explore a range of possibilities and interactions with little commitment to one concept or idea.

  • Low fidelity (lo-fi) prototyping techniques include drawing on napkins, paper or in a sketchpad.
  • Medium fidelity prototypes are built in HTML and simulate the interactivity of a website without the details.
  • High fidelity prototypes are designed in Photoshop, Illustrator or a graphic design application and are a pixel-perfect illustration of what the end product will look like.
  Lo-Fi
Quick 'n dirty
Mid-Fi
Spartan yet interactive
Hi-Fi
Robust 'n shiny
Examples Pencil and paper HTML Kickstart, Twitter's Bootstrap or other framework Photoshop or similar graphics application
Pros Rapid iteration, no commitment to one design Interactivity easily understandable Typically robust, highly polished
Cons Lacks detail, needs refinement Unrefined, stark Time-intensive, little room for alternate development

I advocate a lo-fi to hi-fi approach. We will first use the 12-column layout grid and quickly wireframe initial ideas on paper before writing any code. We can easily discard ideas or begin explore alternatives with a new sheet of paper. This allows us to select the best idea and not fall in love with our first idea.

We then use HTML Kickstart's framework and quickly prototype the most promising ideas in HTML. This allows us to rapidly scaffold a website.

In-Class Assignment

1 of 2

Using the HTML Kickstart framework we will create the Kickstart MailChimp Design (shown below). In our assignment, we will:

  • Use HTML Kickstart's grid system to scaffold the layout.
  • Use HTML Kickstart's built-in button styles for the large buttons on the page ("Sign Up" in the header, the four black "View Story" buttons in the What's New section, and the "Sign Up" button near the heading titled Completely Free Account.
  • Zip the entire folder and upload to E-learning.

Original MailChimp Design

HTML Kickstart MailChimp Design

Assignment

2 of 2

Select one of the three names from your previous assignment and purchase your domain name. I recommend the following companies:

Review the Getting Started with Your Domain slides for assistance.

Send me your working domain URL in a comment to eLearning.

html9responsiveboilerstrapjs.com

Class 9 Description

This week we purchase a domain name and look into what makes a seductive website.

Domain Registration

Class Notes

Required Reading

Assignment

1 of 2

Select one of the three names from your previous assignment and purchase your domain name. I recommend the following companies:

Review the Getting Started with Your Domain slides for assistance.

Seductive Interactions

Sometimes we confuse making a website "easy to use" for our visitors with our visitors actually desiring to use something. Both are essential, but simply making something more usable won't guarantee that people will want to click through your site. Your website should be first easy to use and then desirable to use. Stephen P. Anderson's Seductive Interaction Design slides give some examples of how you can add elements to your user's experience that will allow them to enjoy the time spent on your website.


Assignment

2 of 2

Read the first chapter of Seductive Interaction Design. Answer these questions:

  • How does Stephen define 'seduction'?
  • Why should things we build be seductive?
  • Find two other examples of seductive interaction design (web, apps, building space) and explain why the interaction is seductive.

30 Unintentionally Inappropriate Domain Names (Enter at your own risk!)

Startups, This is How Design Works

Week 10 Description

This week we take a look at choosing a domain name.

Domain names are extremely important. They are how users will remember you.

Required Reading

In-Class Assignment

1 of 2

Review the Domain Naming Slides and then:

  • List three (3) possible domain names for the website you will be registering for your semester project.
  • Review the domain names with a classmate.
  • Submit a short paragraph of: a brief summary of your discussion with your classmate; the domain name you like best and why.

Assignment

2 of 2

Select one of the three names from your in-class assignment and purchase your domain name. I recommend the following companies:

Review the Getting Started with Your Domain slides for assistance.

30 Unintentionally Inappropriate Domain Names

Class 9 Description

This week we look at some Wordpress features and explore how to make our sites more desirable.

By this time you should have:

  • Purchased your domain name and have installed Wordpress.

By the end of class you will:

Resources

Assignment

1 of 1

Customize your WP installation. Make sure you have:

  • Installed a custom theme (It does not need to be based on your original design for the semester project, but cannot be the standard themes that came with the install. The theme we installed in class doesn't count.)
  • Built shell pages based on your semester project.
  • Added some content for each page.
  • Installed two (2) plugins.
  • Customized two (2) widgets.

Send me the links to your website, the theme homepage, and the two (2) plugin homepages via e-learning.

Seductive Interactions Drawing them in

Sometimes we confuse making a website "easy to use" for our visitors with our visitors actually desiring to use something. Both are essential, but simply making something more usable won't guarantee that people will want to click through your site. Your website should be first easy to use and then desirable to use. Stephen P. Anderson's Seductive Interaction Design slides give some examples of how you can add elements to your user's experience that will allow them to enjoy the time spent on your website.



Assignment

2 of 2

Read the first chapter of Seductive Interaction Design. Answer these questions:

  • How does Stephen define 'seduction'?
  • Why should things we build be seductive?
  • Find two other examples of seductive interaction design (web, apps, building space) and explain why the interaction is seductive.

Funny and Creative 404 Pages

Class 10 Description

This week we look at how to make our website searchable, readable, and analytical-able.

Resources

In-Class Assignment

1 of 3

  • Set up a Google Account.
  • Set up the Google Tracking Code for your website.
  • Add the Tracking Code to your site.
  • Set up the Google XML Sitemaps Plugin.
  • Upload a screenshot (example) of your Google Analytics Overview Page to e-learning.

Assignment

2 of 3

  • Install an SEO plugin on your wordpress site.
  • Add proper titles and full descriptions to your pages.
  • Add proper titles and full descriptions to your optimized images.
  • Upload a message to e-learning informing me when you have completed the assignment for credit.

Assignment

3 of 3

Find one good example of each of the following web writing principles:

  • Writing Outwardly
  • Not burying the lead.
  • Not saying too much.
  • Making a strong call to action.

For each example, include a link and a paragraph of why it exemplifies the principle. Upload the text to e-learning.

30 Overused Buzzwords in Digital Marketing

Class 11 Description

This week we will look at creating and implementing web forms, tables, shortcodes and look at page layout.

Assignment

1 of 1

  • Create a contact form.
  • Fields must include:
    • Name
    • Address
      • Street
      • City
      • Zip/Postal Code
      • Country
    • Email
    • Phone
    • Comments
  • Embed the form in your website on a separate page named Contact Us.
  • Have the form send out confirmation and notification emails.
  • Send your Contact Us form link to me via e-learning.

Final Project Requirements:

  • The page design should be visually pleasing, professional, and should support the page content. 
  • The page design should be appropriate for its intended audience. 
  • The site should be well organized. 
  • All pages should have meaningful titles. 
  • Page navigation should be obvious and easy to maneuver. 
  • Navigation should be on every page and should be easy to find.  
  • The navigation should be consistent throughout the site.

Final Project Rubric

The Final Project Rubric will be used as a guide for assessing student performance and evaluating the quality of student work. The rubric includes multiple objectives each with a range of quality levels (performance criteria). The rubric is a guide for assessing the student's knowledge of each objective.

Rubrics can also be used as a method of self evaluation. Because the project objectives and grading criteria is clearly stated, students can assess their own progress on a project. Before you submit your project, use the rubric below to evaluate your site. You should evaluate your project by using the evaluation form.

Students will have the opportunity to submit a project evaluation form for each presentation. For every Final Project Evaluation Form that you submit, you get 1 point added to your final project. The most evaulations that you will get credit for is 2. So you have a chance to increase your final grade by a score of 2.

Peer evaluations should provide constructive criticism, not attacks. This means that students will provide valuable feedback to other students regarding their designs. Students should give their initial perceptions and reactions, and their reasoning. Students who evaluate projects should be prepared to provide sound reasoning and suggestions for improvement if necessary. Evaluations should include the positive aspects of the project, as well as, any suggested improvements. Remember, comments should always be backed up with reasons.

 Download the Final Project Evaluation Form in RTF format

The rubric covers the following areas:

  1. Design
  2. Layout
  3. Navigation
  4. Mechanics
  5. Theme Development
  6. Credibility
Final Project Rubric
Objectives Select Quality Criteria that Best Matches Project
Design

1 point
The page design is not entirely appropriate to the content or its intended audience

3 points
The page design is visually pleasing, although it may not be entirely appropriate to the content or its intended audience

5 points
The page design is visually pleasing, supports the page content, and is appropriate for its intended audience

Layout

1 point
The page layout is usable, but it has problems with clarity or placement of elements.

3 points
The sites layout is largely effective, although there may be some occasional problems with clarity or placement of elements

5 points
Pages use an effective and uncluttered layout, using background color to enhance the readability of text and the appearance of graphics;

Navigation

1 point
A reader can get around the site, but only with some difficulty

3 points
The site is well organized and easy to navigate for the most part, with clear relationships between pages; however, some sections may be more difficult to find or there may be "dead end" pages

5 points
The site is well organized and easy to navigate; the relationship between pages is clear and it's easy to find an individual page; each page is clearly linked to another; links are appropriate, clearly labeled, and have a definite purpose; page titles are appropriate to content and have a definite purpose

Mechanics

1 point
The site includes missing graphics or broken links. The copy is mostly incomplete, doesn't contribute to the project theme, or is lorem ipsum.

3 points
Everything on the site works: there are no missing graphics or broken links. Most of the copy contributes to the project theme. No lorem ipsum text.

5 points
Everything on the site works: there are no missing graphics or broken links; it has consistent layout among all major browsers. Copy is well written and greatly enhances the understanding of the project theme.

Wordpress Theme Development

1 point
Theme is used "out-of-the-box" with almost no customization or additional CSS styling. No link to theme homepage in footer.

3 points
Either the colors or fonts were customized, but not both. There is a link to the theme homepage in the footer.

5 points
Custom CSS and plugins were used to completely modify the colors, layouts, and fonts. There is a link to the homepage in the footer.

Credibility

1 point
Contact/copyright information is not shown on any pages.

3 points
A few pages contain contact/copyright information but not all pages.

5 points
Contact/copyright information is included on all pages (at least an email address or phone number). If the site is e-commerce, it should have the mailing addresses, phone numbers and email addresses

Author's name, affiliations, and credentials are included if applicable;

Mad Libs Contact Form

Class 12 Description

This week we will look at the business side of the web.

Assignment

1 of 1

Find your Dream Job(s)

Go on job search sites:

find links to 3 jobs that you think would be a good fit for you. For each job, provide a link and a paragraph (at least 4-5 sentences) of why you think the job would be dreamy. Upload your links and paragraphs to e-learning.

Should I Work For Free?

Spring Break: No Class

After break we will get nerdy with Google Analytics.

Watterson, Bill. "Calvin and Hobbes." CalvinandHobbes.com. N.p., n.d. Web. 07 Mar. 2016.

Week 13 Description

This week we will look at final project peer reviews.

In-Class Assignment

Find an individual in this class who is unfamiliar your project. Take turns presenting your project to each other. When critiquing your partner's website, please list the top 3 strengths and the top 3 areas that need improvement. You may use the rubric in addition to the following questions when reviewing the other person's presentation and website.

Helpful Questions for Critique

  • Navigation / Focus:
  • Does the design have a focal point?
  • What is your first impression? How does the designer use color and layout to make the site appealing and engaging?
  • Is the navigation clear?
  • How many links are in the navigation? Are there too many?
  • Target Audience:
  • Who is the websites target audience?
  • What is the theme or concept behind the site?
  • Does the concept match the content? Do they reinforce each other?
  • Is the site effective in engaging the audience?
  • Usability:
  • Is the website's interface and navigation intuitive and effective?
  • Does the navigational structure allow the user to find content quickly and efficiently?
  • Do interactive navigation and elements add or detract from the user experience?
  • Multimedia:
  • How does the site use multimedia such as text, photo stills, video, audio and graphics?
  • How fast does the site load on a mobile device?
  • Are the photos well toned and sharpened, saved for the web?
  • Typography:
  • Does the typographical choices reinforce the design theme and aesthetics? example: modern sans-serif vs. a formal more classic serif?
  • Is there a noticeable difference between the "Display Type" and "Body Copy?"

Assignment

1 of 1

Peer Website Critique

In a text document to e-learning, submit a 6 (six) paragraph review/critique of your partner's website.

  • Please Include:
  • Your Name
  • Other Student's Name
  • Other Student's Website Link
  • The three (3) strongest aspects about the other student's website with a paragraph each explaining why.
  • The three (3) aspects about the other student's website that need the most improvement with a paragraph each explaining why.

Lab Time

Attendance is optional. I will be in class to answer questions and help with final projects.

Watterson, Bill. "Calvin and Hobbes." CalvinandHobbes.com. N.p., n.d. Web. 29 Nov. 2015.

Final Presentations

April 27, 2017 & (if necessary) May 4, 2017

Final Project Requirements:

  • The page design should be visually pleasing, professional, and should support the page content. 
  • The page design should be appropriate for its intended audience. 
  • The site should be well organized. 
  • All pages should have meaningful titles. 
  • Page navigation should be obvious and easy to maneuver. 
  • Navigation should be on every page and should be easy to find.  
  • The navigation should be consistent throughout the site.

Final Project Rubric

The Final Project Rubric will be used as a guide for assessing student performance and evaluating the quality of student work. The rubric includes multiple objectives each with a range of quality levels (performance criteria). The rubric is a guide for assessing the student's knowledge of each objective.

Rubrics can also be used as a method of self evaluation. Because the project objectives and grading criteria is clearly stated, students can assess their own progress on a project. Before you submit your project, use the rubric below to evaluate your site. You should evaluate your project by using the evaluation form.

Students will have the opportunity to submit a project evaluation form for each presentation. For every Final Project Evaluation Form that you submit, you get 1 point added to your final project. The most evaulations that you will get credit for is 2. So you have a chance to increase your Final by a score of 2.

Peer evaluations should provide constructive criticism, not attacks. This means that students will provide valuable feedback to other students regarding their designs. Students should give their initial perceptions and reactions, and their reasoning. Students who evaluate projects should be prepared to provide sound reasoning and suggestions for improvement if necessary. Evaluations should include the positive aspects of the project, as well as, any suggested improvements. Remember, comments should always be backed up with reasons.

 Download the Final Project Evaluation Form in RTF format

The rubric covers the following areas:

  1. Design
  2. Layout
  3. Navigation
  4. Mechanics
  5. Theme Development
  6. Credibility
Final Project Rubric
Objectives Select Quality Criteria that Best Matches Project
Design

1 point
The page design is not entirely appropriate to the content or its intended audience

3 points
The page design is visually pleasing, although it may not be entirely appropriate to the content or its intended audience

5 points
The page design is visually pleasing, supports the page content, and is appropriate for its intended audience

Layout

1 point
The page layout is usable, but it has problems with clarity or placement of elements.

3 points
The sites layout is largely effective, although there may be some occasional problems with clarity or placement of elements

5 points
Pages use an effective and uncluttered layout, using background color to enhance the readability of text and the appearance of graphics;

Navigation

1 point
A reader can get around the site, but only with some difficulty

3 points
The site is well organized and easy to navigate for the most part, with clear relationships between pages; however, some sections may be more difficult to find or there may be "dead end" pages

5 points
The site is well organized and easy to navigate; the relationship between pages is clear and it's easy to find an individual page; each page is clearly linked to another; links are appropriate, clearly labeled, and have a definite purpose; page titles are appropriate to content and have a definite purpose

Mechanics

1 point
The site includes missing pictures or broken links.

3 points
Everything on the site works: there are no missing graphics or broken links;

5 points
Everything on the site works: there are no missing graphics or broken links; it has consistent layout among all major browsers.

Theme Development

1 point
Theme is used "out-of-the-box" with almost no customization or additional CSS styling. No link to theme homepage in footer.

3 points
Either the colors or fonts were customized, but not both. There is a link to the theme homepage in the footer.

5 points
Custom CSS and plugins were used to completely modify the colors, layouts, and fonts. There is a link to the homepage in the footer.

Credibility

1 point
Contact/copyright information is not shown on any pages.

3 points
A few pages contain contact/copyright information but not all pages.

5 points
Contact/copyright information is included on all pages (at least an email address or phone number). If the site is e-commerce, it should have the mailing addresses, phone numbers and email addresses

Author's name, affiliations, and credentials are included if applicable;