GD 66 Assignments

Assignment 9

Due Tuesday, May 5


2. Complete Take Home Quiz 3 before our next class on May 5.

Take Home Quiz 3

2. Continue working on Design comps.

Final design comps due May 12.

Continue working on your Design comp for each of the three pages of your final project. You’ll need to complete a design comp for smartphone, tablet and desktop (all three for each page). Please bring your design comps with you to class.

3. Continue work on Responsive Drop Down Navigation demo.

Continue working on the Responsive Drop Down Navigation demo from Class 10. Work on styling the mobile navigation in the slicknav.css file. Bring your work (and any questions) with you to our next class, or email me with your questions.

Modify the demo files and create the drop down menu for your final project.

Assignment 8

Due Tuesday, April 28


1. Continue working on Design comps.

Final Design comps for all 3 pages are due Tuesday, May 12.

Start working on your Design comp for each of the three pages of your final project. You’ll need to complete a design comp for smartphone, tablet and desktop (all three for each page). Bring design comps to class every week.

Keep in mind the Basics of Web Design:

  1. The Grid (Use this Grid, or you can find your own)
  2. Basic Design Principles (composition, balance, white space, proportion etc.)
  3. Color
  4. Typography (Keep in mind: hierarchy)
  5. Navigation

2. Embed fonts.

Please Read: Choosing the Right Font: A Practical Guide to Typography on the Web

Create a webpage in HTML/CSS using the text below, or you may use your own text if you find other text more inspiring. Use the fonts you’ve selected for your final project!

Be sure to use paragraph and heading h1, h2 etc tags.
Using color, size, font, spacing, and layout, enhance the overall look of the text on the page.

  • Embed one font-face into page
  • Use one web-safe font
  • Must use more than one color
  • Must use more than two different sizes
  • Must use line-spacing and letter-spacing
  • Use white space or negative space well.
Sample Text


Seasons Together Void Called Under Was Divide

Appear There Second Years Good To Over

Moving can’t seasons them brought it heaven let divided midst. Spirit image whose, third cattle living. Likeness and hath, saying from creepeth won’t morning. He. Life spirit. Good him, don’t above in i unto under which place fly years days, so. I. You’re, every moveth so set dry kind so blessed him land. Whose creeping. Earth gathered which said may fifth shall abundantly.

Were Shall His Land After

Won’t seas second don’t fish Beast creature likeness. Abundantly our Winged appear be behold lesser in third fifth Every moveth made doesn’t is light is one shall first.

Our Multiply Light Land

Itself to third, sea hath divided sea very signs. His you’re you’re fly after waters beginning moveth without there third female years face, seed called. Don’t brought called sixth sixth set that, behold so moveth appear our gathering you’re blessed seed fish.

Them upon bring meat living they’re winged i spirit life Also signs appear own thing dominion herb air beginning doesn’t were to seas night for Seed land whales he so upon dominion there was for life grass you’re above very blessed without days second. Was hath fowl wherein said he behold saw firmament fourth herb fish lights signs lights very creeping green he and you’re unto, dominion.

Assignment 07

Due Tuesday, April 7


Start Design comps. Home page design comps due April 07.

Start working on your Design comp for the home page of your final project. You’ll need to complete a design comp for smartphone, tablet and desktop (all three for each page). These design comps are one of the deliverables for your Midterm Project.

Keep in mind the Basics of Web Design:

  1. The Grid (Use this Grid, or you can find your own)
  2. Basic Design Principles (composition, balance, white space, proportion etc.)
  3. Color
  4. Typography (Keep in mind: hierarchy)
  5. Navigation


  • Refer to your Style Tile and wireframes. Your design should support these although they don’t need to follow the Style Tile or wireframe exactly. Don’t create a design or layout that you can’t make responsive. Simplify your design if you need to. Look at responsive websites here:

Midterm Project Deliverables due:

  1. Design Brief
  2. Sitemap
  3. Style Tiles
  4. Wireframes
  5. Design Comp for Home page

Please save all the above documents as PDFs and combine into ONE pdf file and upload to the class server before the beginning of class on the 21st.

Here’s an online PDF Converter if you need help combining your files into one:

Extended Due Date for Responsive Prototype
Due Tuesday, April 21

Deliverable due:

  1. Responsive Prototype of the home page in HTML5/CSS

Please upload to the class server before the beginning of class on the 21st

Assignment 06

Due Tuesday, March 31


1. Create wireframes for the 3 pages of your midterm project.

Keeping in mind “mobile first,” and referring to the sketches you made for Assignment 05, create a wireframe for the smartphone template and then move on to the tablet layout, and finally the desktop layout. Remember that wireframes are NOT normally visual design (typography, colors, images, final layout, etc.). Wireframes are a rough draft of required content only.

Don’t forget that the specifications for the final project includes the following features below. Be sure to include these in your wireframes.

  • Form (Responsive)
  • Slideshow (jQuery – Responsive)

Wireframe Template for Responsive Web Design

Free Photoshop Wireframe Kit

Assignment 05

Due Tuesday, March 24


1. Create sketches for the 3 pages of your midterm project.

Refer to the information in the class notes regarding sketching. The 3 pages should include the home page and 2 other pages from the site for your midterm project

Taking in consideration that “sketching is where creating the basic concept is done,” start sketching the layout for your midterm project. Yes, I’d like these to be hand sketches (pencil and paper) rather than digitally created.

Keeping in mind “mobile first,” start sketching the layout in the smartphone template and then move on to the tablet layout, and finally the desktop layout. What elements are most important and need to be included in the mobile versions? Review the responsive restaurant websites we looked at in class for ideas.

For this assignment, use the Responsive Web Design Sketch Sheet found here:

Take pictures or scan your sketches and post to your WordPress site.

2. Finish your Style Tile + Site map.

Post your finished Style Tile and Site Map to your WordPress blog.

What elements in your Style Tiles are you least satisfied with? Based on a self-evaluation of your own work, post a paragraph describing what is working with your Style Tile and what still needs more work.

3. Complete Take Home Quiz 2 before our next class.

You may use whatever resources that you’d like (Class notes and, ahem, Goggle) to answer the following questions. Please complete the Quiz before our next class. (I will not accept Quizzes that are completed during our class time.)

Take Quiz 2

Assignment 04

Due Tuesday, March 17


1. Read the following article:

Style Tiles: An Alternative to Full Design Comps

2. Continue work on your Midterm Project. Create the Site Map.

Start working on site map for the Midterm Project redesign. Don’t forget to include a title for the site map and to include the alpha-numerical labeling.  Also, be critical of the current organization of the website and re-organize the content when you create the site map. The final site map should be posted to your WordPress site.

Also, save the site map as a PDF and place it in the “source_files” folder when you upload your final midterm project to the server.

3. Continue work on your Midterm Project. Create a Style Tile.

The important thing to remember about Style Tiles is that they are not a literal representation of how the site will look; instead, they help define the mood, tone and “feeling” of a site based on what you’ve learnt from the client and know about the project.

Common key features to include in your Style Tile (for more information regarding the eight features below, be sure to take a look at the assigned reading):

  1. Client Logo
  2. Possible Colors
  3. Textures
  4. Adjectives
  5. Typography (Refer to Font Squirrel, Google Fonts or other website for possible web fonts)
  6. Buttons
  7. Background
  8. Version

The final Style Tile should be posted to your WordPress site. Also, save this as a PDF, place it in the “source_files” folder when you upload your final midterm project to the server.

Assignment 03

Due Tuesday, March 10


1. Read the following articles:

What to Ask a Client Before You Start Their Project

Seven Basics to Create a Good Design Brief

The restaurant website redesign for the midterm project will take in consideration the information here: Better Restaurant Websites:

2. Write Design Brief for your Midterm Project.

Full details on Midterm Project are located here:

Start working on writing a Design Brief for the website redesign for your midterm project.

Now that you’ve completed the following tasks (see below), use the information you discovered when writing the Design Brief.

  • Completed an informal competitive analysis of competitor websites. Looked at 4-6 other restaurant websites.
  • Completed research to help define your client’s goals and the target audience for the website.

Include the following four things in your Design Brief:

  1. Objectives and Goals of the new design
  2. Target Audience
  3. Scope of the Project
  4. Overall Style/Look

Post the design brief to your WordPress blog.

3. Watch the videos from our HTML 5 Two Column Layout demo.

Please watch and review the videos from our class demo. We will continue working on this next week. The videos are located on this page: 

Assignment 02

Due Tuesday, March 3


1. Start Research for midterm/final project

Complete the following research before our next class:

  • Existing website: analysis and study the existing website you’re redesigning for the midterm/final project. Post your thoughts about what works and what doesn’t work about the current design.
  • “Interview” the Client: Determine Goals for the website, Target Audience and direction of Look + Feel. (For this, use your best judgement based on your research to determine the answers to these).
  • Competitive Analysis: Choose 4-6 websites that are competitor sites for your client (majority of the sites analyzed need to RWD) and analyze the websites in the following areas: Visual Design, Content, “Call to action” on home page, Navigation, Functionality, Community building (social media) and any other areas that you think play an important part in the redesign.

Post all your thoughts, ideas and findings to your student WordPress blog.

2. Study for Quiz 1

Quiz 1 will be taken in class on Tuesday, March 3. The test will cover basic HTML tags and basic code. The quiz will be a 10-question multiple choice exam and will include the questions below. Please come prepared to answer the following:

  1. The four basic tags used to create a basic HTML page
  2. HTML code to insert an image into the body of an HTML page
  3. HTML code to add a link to text
  4. HTML code at add an email link to text
  5. Tags for inserting a paragraph, line breaks, unordered lists, ordered lists, bold text, italic text, headings.

Please study the Basic HTML tags from this article:

Assignment 01

Due Tuesday, February 24

1. Take the Class Skills Survey

I’d like to know more about your skill level and previous web design experience so please take the survey below before our next class.

2. Review. Read materials outlined in the class notes.

We’re going to dive into HTML/CSS next week, so come to class prepared. Brush up on what you learned in Web Design 1. Read through and watch the videos from the 9 links listed in the Class 01 notes.

3. Create your first WordPress blog post

Based on our discussion in class, post answers to the following questions to your WordPress blog:

  1. What resources will we use in this class?
  2. What additional things will you need to know to be a great web designer? Which things are the most important to you and why?
  3. What are your career goals? What’s your plan to achieve your goals?

47 Responses to "GD 66 Assignments"

Leave a commentLeave a Reply to Jade Smith