Assignments

Semester Inventory

Files That Should Be on the Server

The diagram below shows the files that should be in your GD50 directory on the server, and how the file structure should be organized.

/
+--> GD50/
      |
      +--> hw7-1/
      |
      +--> hw9-1/
      |
      +--> hw10-1/
      |
      +--> hw11-1/
      |
      +--> hw11-2/
      |
      +--> type-specimen/
      |
      +--> info-site/
      |    |
      |    +--> mood.jpg
      |    |--> home.jpg
      |    |--> interior.jpg
      |    |--> markup.html
      |    +--> index.html
      |
      +--> final/
            

All codepen assignments should be in your GD50 collection in you codepen account.

FINAL PROJECT

Due 5/15

Website Redesign: Turning It In

Make a copy of you team's entire website redesign project folder and save it into your GD50 folder on the server. Rename the project folder final. Be sure to check your personal portfolio page to ensure that everything is exactly the same as your group's website.

FINAL PROJECT

Website Redesign: Getting Started

For this final project, you will be working in groups to redesign a website for a local non-profit organization.

Step 1: Choose a Site

Visit the websites listed below to preview their content and design.

Now use this link to choose which site you would like to work on. You will asked for a first choice and a second choice. I will use the results to form your teams.


Design Teams
Arte Americas group 1 Arte Americas group 2 Rock Climbers Meux Home group 1 Meux Home group 2 Bully Rescue Feral Paws Centro de Folklor group 1 Centro de Folklor group 2
Daniel Darin Corbin Zia Mi Hunter Thea Yuchen Luke
Robert Samantha Ethan Kabao Cecilio Julian Matthew Cynthia Hue
Jackie Charity Liza

Step 2: Inventory

As a group, thoroughly go through the site you will be redesigning. Talk about the different people who would use this site and what their needs and interests are. Create an inventory of the site by listing all of the content you find, even things that might not be in the navigation. Make a list of all the different tasks a person can do or would want to do at this site. This list will become your cards for the card sorting.

Step 3: Card Sorting and Analysis

Using the techniques you learned in class and from the Lynda playlist, set up and conduct a card sorting experiment. You may use physical cards or ux testing software such as Optimal Sort. Conduct the test on a minimum of five people. Make sure you have the final data saved in some sort of spreadsheet (if using physical cards) or online.

# 15

Due 4/26

UX Design: Videos + Quiz

  1. Watch the following two Lynda playlists
  2. Take this quiz.

# 14

Due 4/5

Website Content in Semantic Markup

Collect all of the content for your website into an HTML file. Every element should be inside some sort of semantic tag. This is the same thing you did in assignment 10, so check out that description below, and the helpful reference links.

Name your page as markup.html and save it into your info-site folder on the server.

# 13

Due 4/3

Website Mockups

When you begin the process of designing a website, a good first step is to create a set of website mockups to communicate the structure, user interface, and overall "look and feel" of the site. These mockups are simply images we create that show what the website will look like without needing to dive straight into coding. These mockups are just flat images that cannot be interacted with, but look like a screenshot of a website page. We use these mockups as a way to communicate design ideas back and forth with our clients and also as a “blueprint” to develop the website once design is approved.

Mockups aren't always used during the design and development process. Some people use other methods, such as style tiles or frameworks and templates.

Create at least two mockups of your website. One should be the homepage and the other should be an interior page. Often, the interior pages of websites have the same layout, so you don't have to mockup every page. Make sure your mockup contains all the detailed elements you will need on the site. Your final coded website will look as close as possible to these mockups.


Turning in it

Save your mockups as jpgs named home.jpg and interior.jpg and save them into your info-site folder on the server.

IMPORTANT TIP: Designing for the web in Illustrator is not the same as designing for print. You need to set up your artboard in pixels and stay in a 100% view as much as possible. Here's a how-to article about all that: Use Adobe Illustrator to Create a Clean Website Layout. However, STOP when it the article gets into "slicing" (section 4). That method is very antiquated.

# 12

Due 3/20

Mood Board

A Mood Board is a collection of images that are tied together by a particular theme, keyword, or concept. Think of this as a collage, like an interior design would gather photos and swatches to convey the mood of the space they are creating. In addition to photos, you can include color palettes, typography, and textures.

Start by gathering as many inspiring images as you can find. Then filter them down to those that seem best suited for the project you are working on. Organize them visually and play with different combinations and compositions. Be sure to include a color palette and type choices.

Visual Reference:
assignments 2 assignments 2 assignments 2 assignments 2 assignments 2

Turning in it

Create a folder named info-site inside your GD50 directory. Save your mood board as a jpg named mood.jpg and upload it into the info-site folder. Make sure that you optimize your jpg for web viewing.

Online Class

3/13

Flexbox

  1. Sign up for this free course on CSS Flexbox.

  2. Watch videos 2,3,4,6,7,8, and 9. I encourage you watch more if you have time or would like more instruction.

  3. Play the FlexBox Froggy game.

  4. Watch this short video in which Jen Simmons gives an overview of the relationship between CSS Grid and Flexbox.


  5. Coding Exercise: Using Flex in a Layout

    [download exercise files]

    I'm giving you two versions of a typical web layout where flexbox could be used to properly place the navigation and social media elements. This is what they look like now: horizontal layout, vertical layout

    Your assignment is to make them match the screenshots below using flexbox, plus other CSS properies for styling.

    flex-horz flex-vert

    Name the folder with the horizontal layout hw11-1 and the folder with the vertical layout hw11-2. Upload them both into your GD50 directory on the server. Make sure the HTML file is named index.html.


Lots of helpful stuff about flexbox

"What the Flexbox?!" online course
A Complete Guide to Flexbox
How Flexbox works — explained with big, colorful, animated gifs
Flexbox and Grids, your layout’s best friends
another good flexbox guide

# 10

Due 3/13

HTML Semantics

  1. Watch this Lynda playlist about HTML semantics. Duration: 38 minutes

  2. Take the content of this word document and turn it into an HTML page using only sementic tags. There isn't just one way to organize this, so use the tags that make sense to you. Do not apply any CSS styles — only basic HTML.

  3. Name your file index.html, save it into a folder named hw10-1, and upload it into your GD50 directory on the server.

More resources on semantic code

Semantic HTML
HTML is about meaning
HTML semantics cheat sheet

# 9

Due 3/8

Pseudo Selectors

Here is a zip file with an unfinished webpage. Download it and apply styles to all the different link elements. You will need to create four different syles for the following types of elements:

  1. body copy text link
  2. text links in the list
  3. next button
  4. cancel button
Requirements
  1. All the styles should also have the pseudo selectors :link, :visited, :hover, and :active.
  2. Each type of link should have something visually different about it. You don't have to change the appearance on each state. At minimum, style the hover effect.
  3. Design the buttons so that they look "button-like".

Save the files into a folder named hw9-1 and upload it into your GD50 folder on the server.

References:
Meet the Pseudo Class Selectors
w3schools page

# 8

Due 3/6

Pseudo Selectors: Videos + Coding Exercise

  1. Watch this Lynda playlist about the CSS pseudo selectors. Duration: 12 minutes

  2. Starting with the pen I have created for you (embedded below), add the necessary pseudo selectors to make the squares change color when hovered over and when clicked, like in the animated gif underneath. Use whatever colors you like. Save the pen in your GD 50 codepen collection.

    Need more instruction? Check out the w3schools' pseudo class tutorial.


    Your code should do this...
    css hover state demo

# 7

Due 2/28

Using Images on the Web

Now that you know how to upload files to a server and link them in your html with specific file path names, you are able to include more media assets into your pages, such as images.

For Thursday, do the following...
  1. Watch these two videos about web graphics file formats and how to resize and compress them in Photoshop.
  2. Watch my screencast, where I go through the process of creating the page you will be creating.
  3. Create a webpage that displays three photos that have have been sized equally and appropriately. See the screen shot below for an example. Name your html file index.html, save it into a folder named hw7-1. Place your images inside a folder named imgs. You can name your image files however you like, as long as the file path names are correct in the html.
Turning in In

On Thursday you should bring two project folders to class.

  1. your hw7-1 folder with you image gallery page in it
  2. your type specimen project folder

web-imgs

Type Specimen Project

Due 2/26

Final Web Type Specimen

Your final type specimen should be in html and css and uploaded to the server (see Resources section for FTP instructions). Be sure that it includes all the elements listed in the mockup instructions.

Save your html and css in a folder named type-specimen and upload it into your GD50 directory on the server. Be sure to name your html file index.html.

# 6

2/15

CSS Grid: Videos + HTML Structure for Type Spec

  1. Watch this Lynda playlist on CSS fundamentals. Duration: 34 minutes

  2. Now create a grid that will serve as the overall structure of your type specimen website. Start by analysing your mockup. Identify the larger sections and create a grid in HTML and CSS, based on those lines. Here's the example I did in class. It doesn't have to be perfect, and you'll probably make changes later, but you gotta start somewhere right?

    It might help to add a border to the divs, and maybe some height, so that you can actually see the grid. Here's an example in codepen.

    Save your work in your GD 50 collection in codepen.

# 5

2/13

The Beginnings of Layout: Videos + Coding Exercise

  1. Watch this Lynda playlist about the way HTML elements are aligned and displayed. Duration: 14 minutes

  2. Starting with the pen I have created for you (embedded below), recreate the screenshot using what you learned from the videos. You can also find the pen in the "50 — in-class exercises" collection in my codepen account.


    Recreate this screenshot
    float-layout

# 4

2/13

Type Specimen Project: Mockup

In typography, type specimen refers to a presentation of a certain typeface to showcase its design and/or use.

—TypeGuru.com

For this extended project, you will be creating a web version of a typeface specimen. You may use the typeface of your choice, as long as you can provide information about its history and/or designer, so be sure to do your research and select carefully.

The first part of the project is to design a mockup of the specimen, using the design tool of your choice (PS, AI...). Your design needs to contain the following elements:

  • name of typeface
  • examples of the characters
  • examples of all fonts in the family
  • at least one paragraph of body copy
  • information about the typeface's history and/or designer

Your overall layout and design should evoke the spirit of the typeface and be an example of the type of design it is best suited for.


Reference

Google image search
Historical examples

Upload a jpg of your mockup here. no larger than 10MB

# 3

2/1

CSS Styled Quiz Website + Web Typography

Work through these exercises at your own pace. Focus on understanding the mechanics of what's going on.

For a review of linking HTML files to CSS files, this tutorial might be helpful.

  1. Finish the quiz website you created, with CSS styles applied. All of the HTML pages should be linked to an external CSS file.

  2. Watch this video tutorial I made about using web fonts.

  3. Incorporate a web font into the styles of your quiz website.


Here are examples of the quiz site at the three different stages. This is just my example. Yours might look different.

plain HTML
HTML with CSS styles
HTML with CSS styles and web font

Online Class

1/23

Intro to CSS

This is what you've all been waiting for — Cascading Style Sheets (CSS)! This magical language let's you actually control the visual design of your web pages. No more Times New Roman and ugly blue underlined links. From now on, YOU are in control.

Below is a Lynda playlist that will introduce you to CSS. Watch it, then complete assignment #2 (a simple coding exercise).

Lynda Playlist: CSS 1: GD 50, duration: 41 minutes

★ YES, THERE WILL STILL BE AN HTML QUIZ ON THURSDAY. ★

# 2

Due 1/25

Your First Stylesheet

In this exercise you will write a few simple styles to the HTML that's already there (do not edit the HTML). The first one style has been written for you. The results should look like the screenshot below.

Under the screenshot there is an embedded pen. Click "Edit on Codepen" to open it in codepen. Then click "fork" to save a copy for yourself. When you are finished, add the pen to your GD 50 collection in codepen. You can also find the pen by going to my codepen page and looking in the "50 — in-class examples" collection.

For a quick CSS reference, here's a cheat sheet. Or just google stuff like "how do I make text turn purple in css?"

assignment 2

#1

Due 1/23

HTML Basics: Videos + Coding Exercises

First, watch the screencasts that I made reviewing the HTML basics. Then, using the HTML tags we have learned so far, complete the three exercises below. Save your work in codepen and place the pens in your GD 50 collection.

1. Watch These Videos
★ THERE WILL BE A QUIZ ON TUESDAY. ★

2. The List

Create a list of your choosing (i.e. grocery, to do, pet peeves, favorite baked potato toppings...). All the items should be numbered (hint: the numbering with be created automatically if you use that right tag). Give your list a heading.

assignments 2
3. The Letter

Compose a letter, using HTML tags as your typesetting tools. The letter should have at least two paragraphs in the body, and five of the words or phrases should be italicized. Make it fun by using some creative dummy copy.

assignments 2
4. The Special Cat

Using the HTML codes for special characters, produce the "word" you see below.

assignments 2
HTML tags from class:
Other Recommended Resources

Unit 1: Intro to HTML >> Lesson: HTML basics (codecademy tutorial)
Video 1: Not a Series of Tubes (from dontfeartherinternet.com)
Video 2: HTML: Hamburger Text Markup Language (from dontfeartherinternet.com)