# 14

Due 5/18

Interactive Infographic

For your last project, you will be designing an interactive infographic. This will be a one-page site that communicates a topic through strategic visuals, in a story-telling sort of way. You will incorporate interactivity through whatever means is most appropriate to your design (CSS animations, transitions, Javascript, etc.). In this piece, your design choices are as important as the technical execution. Focus on what is most appropriate for your design, topic, and medium. How does designing an infographic for the web differ from a static image? How can you use that to your advantage?

Save your work into a folder named infographic and upload it to the server.

Have a great summer!

# 14

Due 5/2

Infographic Research

For your last project, you will be designing an interactive infographic. By Tuesday, you should have selected your topic and gathered the detailed information you will be working with.

# 13

Due 4/27

Javascipt: Playlist and Quiz

Playlist on JS - GD 150


# 12

Due 4/25

Animated UX Design

Design three small animated prototypes that demonstrate a creative, new way for a user to accomplish a task. You are welcome to use whatever prototyping tool or method you prefer. The final designs should represent a high-fidelity UI graphics.

Some available prototyping tools

Save your work into a folder named ux-proto and upload it to the server.

# 11

Due 3/21

Mobile Interactions: Your App Description

This project is an exercise is thinking "outside the box" in terms of mobile design and the navigation challenges that small screens present. You will be prototyping an idea for a journal app of your choice. By "journal" I mean that it serves to record something meanful for the user over time. The content that's recorded can be anything that you can input on a mobile device, like a phone. For example, they could be text entries (diary, blog, class notes, reminders...), measurable data (fitness tracking info, nutrition log, weather, GPS, time...), photos, sound, etc.

The first step is defining the purpose of your app and its functionality. Next, you will identify the design challenges that you want to tackle. Then you will design prototypes that demonstrate your innovative ideas for dealing with those design challenges.

Click here to communicate your ideas and complete the first step.

# 10

Due 3/16

Issues with Hidden Navigation

The practice of hidding navigation choices behind an icon has been a popular design trend. Let's analyze that. Read the following two articles critiquing the 'hamburger menu' design pattern. Afterwards, submit your own analysis and feedback using this form.

  1. Hamburger Menus and Hidden Navigation Hurt UX Metrics, by the Nielson Norman Group

  2. The hamburger menu doesn’t work, by James Archer

Recommended reading: Hamburger menu alternatives for mobile navigation, by Zoltan Kollin

Click here to submit your written response.

# 9

Due 3/9

Hacking Psuedo Elements

Use the ::before and ::after psuedo elements to produce interesting and/or useful design elements. Instructions:

  1. Create your own custom bullets for an HTML list. You can use an icon font, or design your own.
  2. Freestyle! Come up with something unique and awesome. Dig around the web to see what kind of hacks other people have come up with.
Submitting Your Work
  1. create an HTML page named index.html with your two experiments
  2. give each one a label and quick description
  3. save your work into a folder named hw9-1 and upload it to the server

# 8

Due 3/7

Loading Sequences

Experiment with CSS animation techniques and create three loading sequences. Make each one different from the last.

Create an HTML page named index.html with your 3 animations, save it into a folder named hw-8-1, and upload it to the server.

# 7

Due 3/2

CSS Animations: Exercises + Reproduction


Animate an HTML element to produce the following effects:

  1. slide in/fade in
  2. slide out/fade out
  3. zoom in with delayed start (optional challenge: use zoom to give it a slight pulsing effect)
  4. rotate
  5. floating side to side
  6. pull down (as in pulling down a tab)

Just like in assignment #6, find a animated microinteraction that you like. Recreate that effect on your own.

Submitting Your Work
  1. create an HTML page named index.html with all your animations
  2. give each one a label
  3. include a link to the animation your chose to recreate
  4. save your work into a folder named hw7-1 and upload it to the server.

# 6

Due 2/23

CSS Animations: Playlist and Presentation

1. Presentation

Find an example of a subtle animation used in a website or app and share it with the class. Be prepared to show it to us and tell us why you think it is effective.

You might want to search out good examples of microinteractions. Many of these are animations. Here's an article about that.

2. Playlist

Watch this Lynda playlist on CSS Animations.

# 5

Due 2/16

Ecommerce Site: User Interface

Using your mockups as your inspiration, design your ecommerce website using the Bootstrap files provided. You will need to become comfortable with the browser's developer tools so you can inspect the Bootstrap code to figure out how to target the items you want to apply styles to. If you need some help using the dev tools, watch this short Lynda playlist.

Save all your files in a folder called ecommerce and upload it to the server. Make sure the landing page is named index.html.

[download the bootstrap template here]

# 4

Due 2/7

Ecommerce Site: Design Mockups

This assignment is the first part of a larger project. You will be designing an ecommerce website based on common design patterns for online stores. Download the wireframe sketches and use them as a content framework. Use whatever graphics software you like (Ai, Ps...). Remember, wireframes are NOT design documents. They are just representations of the content that needs to be on the page. Your interpretation may look very different. Mockups are design documents. They determine what the page is going to look like. Here is an example of what I mean:

assignments 4
assignments 4

This online shop you will designing is for a fictious company that you invent. It can sell anything that is legal. Have fun with this. It could end up as a great portfolio piece, showing off both your web skills as well as your branding skills.

Make sure you are viewing your design at 100% on the screen as you work. This will ensure that your elements are properly sized.

Click here to download the PDF with the wireframe sketches

Save each page mockup as a separate jpg. Name them landing.jpg category.jpg and detail.jpg. Place them in a folder named hw4-1 and upload them to the server. No need for any html file.

# 3

Due 2/2

Media Query Breakpoints

In this assignment, you will be taking a pre-styled layout and add your own media query code to make the page responsive. As it is right now, the layout looks terrible on a mobile device. You will need to provide alternate styles so that the elements are arranged better, while maintaining the style of the original style. Make whatever design decisions you think are necessary.

Click here to download the HTML and CSS files. Add your media query code to the bottom of the CSS file. Make sure you add your mobile styles only to media query, not into the desktop styles above it, otherwise you might break the desktop layout.

Save your work into a folder named hw3-1 and upload it into your GD150 directory on the server. Make sure the HTML file is named index.html.

In-class example:

See the Pen Media Query exercise 1 by Rusty Robison (@rustyrobison) on CodePen.

# 2

Due 1/26

Specificity and Complex Selectors

Two videos, an article, and a quiz.

1. Watch these videos:

2. Read this article: Complex Selectors by Shay Howe

3. Take this quiz:

# 1

Due 1/24

Dual Stylesheets

Create two separate layouts for this article using only CSS. Use the same HTML file for each layout. You may add classes and ids if needed, but do not add any new tags. Try to give them very different styles.

Each layout should be saved into a folder of its own. One should be named hw1-1 and the other should be hw1-2. The HTML file should be named index.html. It is very important that the name is correct.

When finished, upload the two files into your GD150 directory on the server. The final URL's should look something like this:*yourname*/GD150/hw1-1/*yourname*/GD150/hw1-2/

For instructions on how to use FTP to upload to the server, check out the Resouces page on this site.

[download HTML file]