Web Design


 

Lesson 1

 

Topic covered this week include:

 

 

Analysis:

 

Heuristics are rules that can used to determine the effectiveness of a system, in this case the usability of a web page. For this week's analysis you will perform a heuristic analysis of the website mint.com. Fill out the form here and bring it back to class next week.

 

Lab:

 

This week you will be creating an online resume using the HTML content tags discussed this week.

 

The requirements for the project is as follows:

 

Resources:

 

 

 

Lesson 2

 

Topic covered this week include:

 

 

Buzzwords:

 

 

Analysis:

 

This week, you will be using the diagramming tool found at gliffy.com to create a site map of mint.com. A site map is a diagram created by web designers and information architects (in the case of complex websites) that plans out the hierarchical relationships between pages in a website.  Please read pages 43-52 in Web Design for Dummies, with special emphasis on 50-52 (Deconstructing a web site). A basic definition for site map can be found on page 22. Print out your site map and bring it to class next week. 

 

As an alternative you can consider using Microsoft Visio. There is a steeper learning curve to Visio but it is a software that is used widely by web developers and is another software you can add to your resume.

 

Lab:

 

This week you will be creating a linked stylesheet that will control basic styling of your resume. We will use CSS type selectors to override the tags we utilized last week <h1>-<h6>, <p>, <ul>, <li>, <a> and <body>. We will use CSS class selectors to create variations of a single tag. For example, what if you want to style two paragraphs or headings differently? The problem with type selectors is that they create sweeping changes that apply to all instances of that tag. To create exceptions you must use class selectors. Whitespace will be controlled via the "box model" to control the margins between elements and the padding around elements.

 

The requirements for the project is as follows:

 

Tips:

 

 

Resources:

 

 

 

Lesson 3

 

Topic covered this week include:

 

 

Buzzwords:

 

 

Analysis:

 

This week we will be learning how to optimize web graphics. Go to this website and near the bottom of the page you will find a section titled Download Source Files. Download both the PSD and Web Template files. Before you proceed, please complete the tutorial on this site.

 

The HTML and CSS files are for your benefit. The author has taken the time to actually build the page that he mocked up. Since both of our course projects will be two-column websites such as this one, it will benefit you considerably to study his HTML and CSS in preparation for those projects. Notice the way that he structured his files. This is a very common way to organize a website.

 

Here is an outline of steps you will follow to complete this analysis:

 

  1. Print out a black and white copy of the Photoshop image to fit the paper. Keep this file open.
  2. Open the index.html file in a browser. Take note of what is an image and what is not, particularly when it comes to the text. Label all images on the print out you made in step one so you remember what is an image and what is not. NOTE: Most images will not have a Save As option when you right-click. This is because Javascript is being used to render certain images (those with transparent backgrounds).
  3. In Photoshop use the Slice Tool to cut around the images you want to save. You may find it helpful to zoom in around the areas that you want to cut around. Pixel perfect slicing isn't important for this exercise. As you slice each image, right click on the slice number in the upper left corner of the image. Give the slice a meaningful name. You'll notice that in the process of slicing, Photoshop will create a bunch of slices that you don't want. Right click on their slice numbers, select Edit Slice Options and set their Slice Type to No Image. This will prevent these "autoslices" to not save. If you forget or neglect this step, you'll have to delete all of these junk slices after you export them.
  4. Before you export your images, you will want to turn off the backgrounds for all of the layers. Don't forget to turn the Noise layers off as well. The reason that we want to do this is because we want the images to have a transparent background. Saving images with transparent backgrounds is especially important when graphic text or images are on a background or color that is not supported by hexidecimal code.
  5. Go to File>Save For Web and Devices. In the corner of each slice you want to export byou will see a slice number. If you click on that number you'll be able to save each image out as a separate image type. Since we'll be saving all of our images as PNG-24s this is not important for this assignment.
  6. The last step is to save. All of your slices should be saved in a single folder. If you followed step #3 above, then you should have no "autoslices" to delete. 
  7. Run all of your images through the image optimization tool at punypng.com. Compare the before and after qualities and reductions in file size. Be prepared to discuss these improvements next week.
  8. Bring this folder and your print out where you identified all of the slices to class next week.

 

Lab:

 

This week you will be creating an image gallery in class based on the handout provided. For extra credit you can link the thumbnail images to larger images on another page. Experiment with padding, margins and border to create different looks. Use the text-align property to center the image and text.

 

The learning points for this in-class lab are:

 

NOTE: This implementation is very simple yet looks very crude in comparisons to the slide shows, image galleries and light boxes you tend to see on websites today. To learn how to implement a more elegant and sophisticated solution see 57 image galleries, light box and slide show tools.

 

Resources:

 

 

 

Lesson 4

 

Topic covered this week include:

 

 

Buzzwords:

 

 

Analysis:

 

The first step toward implementing the layout of a web site is the creation of a wireframe. A wireframe is a low-fidelity sketch that blocks out the major structural elements on the page (as seen below). Images are merely boxes with X's through them and text is squiggles. I do recommend that major navigation and heading text are written out. Take a look at some of these wireframe examples. One thing you will notice from the examples is how sketchy some wireframes look and how clean others look. Remember, a wireframe is not a beauty contest. The best wireframe is one that communicates the idea quickly. Therefore, time invested in breaking out straight-edges and fancy coloring is time wasted.

 

Credit to Soxiam on Flickr. Image used without permission.

 

This weeks analysis will be the wireframing of our first major project. While I am old school and prefer to work with sketches, there are a myriad of wireframing tools available online. One of the big advantages of these tools is the ability to hyperlink your virtual pages. One tool that looks simple and promising is Mockingbird. For this assignment, I would like to see a wireframe of the homepage and one interior page.

 

 

Lab:

 

As discussed this week, tables are used to markup tabular content. This week you will be creating a table layout for one or both of the NBA conferences. Your goal is to recreate this table as accurately as possible.

 

The requirements for this project are as follows:

 

 

Extra Credit:

 

Resources:

 

 

 

 

Lesson 5

 

Topic covered this week include:

 

 

Buzzwords:

 

 

Analysis:

 

This week you will be mocking up Project 1 in Photoshop in praparation for building it as a two column website over the next three weeks. We will be using a 960px x 550px form factor. Use greek text in conjunction with Verdana, Arial, Times New Roman or Georgia when laying out text. I use the generator at lipsum.com. Use stand-in graphics until we can develop our own.

 

Lab:

 

Design a contact form for Project 1. Attempt to incorporate each of the form elements discussed in class: text fields, check boxes, radio buttons, submit buttons, text areas and select lists (drop-down lists). Use fieldsets to organize the form into meaningful chunks where appropriate. This design will be layed out in a 2-column table. Style the table as necessary in CSS.

 

Resources:

 

 

 

 

 

Lesson 6

 

Topic covered this week include:

 

 

Buzzwords:

 

 

Analysis:

 

 

Lab:

 

Layout course project 1 in Photoshop. Creating a 2-column website template.

 

Resources:

 

 

 

Appendix

 

Educational Resources:

 

Web Development Communities:

 

Reference Material:

 

Cheat Sheets:

 

Recommended Reading:

 

Tools:

 

Tips: