This semester, I will excepting past-due assignments. They will be deducted 20%.
When grading, I will be dropping one homework assignment in the final tally. If you completed everything, then you will receive extra credit.
The final project grade is influenced by the final testing and edits, as well as the following process documents.
These documents should be uploaded into a folder named
documentation in the same directory as the final site, except for the wireframe prototype which I can view through Balsamiq.
Based on your user testing today, identify at least three items that need to be adjusted on the site, and why. You will expected to have those changes made by the final class.
Send your team's list to my email.
For the Beta Lauch of your site, you should have a finished redesign of your "clients" website. You are only required to have the mobile version of the site completed. The minimum required components are...
The website should be live a ready for user testing.
"A style guide is a living document of code, which details all the various elements and coded modules of your site or application. Beyond its use in consolidating the front-end code, it also documents the visual language, such as header styles and color palettes, used to create the site. This way, it’s a one-stop place for the entire team—from product owners and producers to designers and developers—to reference when discussing site changes and iterations. Several companies have even put their guides online; Starbucks is the most well known of the bunch, but others exist." —Susan Robertson
For Tuesday, your team should have a complete style guide that defines and displays the design of all elements on the site. A static guide will be accepted, although a coded one will be due by Thursday 12/1.
Important: Try to design at 100% resolution as much as possible. That means that the design area on your screen should be as close to the actual size of a mobile device as possible.
Crafty Rusty Offerings: Template of HTML elements to style
Creating Style Guides by Susan Robertson
Assign each team member one of these three jobs.
One team member will complete the final balsamiq wireframe prototype. Not every single page on the site has to be represented, but the navigation's organization and behavior should be clear. A user should be able to successfully execute each one the three tasks you defined in class.
Two team members will design mockups for the navigation, in all its various states. Each mockup should show at least one whole screen with the navigation in context — more if the navigation has more than one state (i.e. collapsed and expanded). It should also have a color palette, font choices, and icon styling (if applicable).
Each designer should create their own mockup so that on Tuesday the whole team can discuss the various design options.
In your team's Balsamiq account, lay out all the screens necessary to create a clickable prototype that will allow a user to complete the first two of your three targeted tasks. Be care when working separately but simultaneously; don't save over each other's work.
If you have not been added to your team's Balsamiq account, please email me.
Using the cards you created in class, conduct the activity using four participants outside of class. Be sure to use a script so that you give each participant the same instructions. Record your data results in your spreadsheet and bring it to class.
Watch all the videos in my lynda.com playlist called "Information Achitecture 1" It should take you about 27 minutes.
Armenian Museum of Fresno: Kendall, Vong, Chantel
The Discovery Center: Jordan, Taylor, Josh
Meux Home Museum: Kristine, Nanju, Jaime
African-American Museum: Ghada, Vincent, Bruno, Fred
Fresno Art Museum: Carla, Xeng, Elisa
Arte Americas: Madison, Elaine, Zach, Eddie
Watch all the videos in my lynda.com playlist called "User Experience" It should take you about two hours.
For Thursday, read chapters 1 and 2 in Don't Make Me Think, by Steve Krug. This should take about 20 minutes.
Click here for the epub file.
Have your final one-page responsive website ready to present at the beginning of class. Be sure that it is saved on the server as
index.html inside a folder called
one-page-site. The path name should look something like this:
Check the project gallery page to make sure you saved it corectly.
Using your wireframe as a reference, build the main structure of your site. At minimum, it should look like a bunch of boxes. Go ahead and start adding content if you can.
Save your file as index.html into a folder called one-page-site in your FTP server directory.
A Mood Board is a collection of images that are tied together by a particular theme, keyword, or concept. In addition to photos, you can include color palettes, typography, and textures.
Starting 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.
For Thursday, save your mood board as a PDF and upload to Blackboard.
For the one-page, informational website you will be designing, choose your topic and gather the copy (text) you will be working with. Organize that copy into a formally structured outline (see example below).
No dummy copy! This is the text you will be working with. You don't have to write it yourself, but it needs to be final.Click here for example.
Watch all the videos in my lynda.com playlist called "HTML5 Semantics" It should take you about 38 minutes.
On Tuesday, your final Type Specimen Webpage is due at the beginning of class. You won't have to formally present your work, but we will have a peer critique exercise.
For Thursday, read chapters 1, 2 and 6 from the book On Web Typography, by Jason Santa Maria. It should take about an hour to read.
Then take this quiz.
Using the Illustrator templates attached here, design the mockup of the type specimen that you will eventually layout as a web page. You may use the font of your choice. Be sure to choose one with a known history and designer. A font with historical significance is recommended. You can find inspirational images here and here.
The design needs to include the following elements
Upload a PDF of your design to BB.
In class we learned how to construct a navigation bar in the industry-standard way: using a list
<ul>. We also learned about pseudo classes and how they affect the different states of any given element (i.e. hover, active, visited, etc...)
Your assignment is to design a horizontal navigation bar using the
<ul> structure, and incorporating pseudo classes.
Title your pen "Assignment 6" and add it to your GD 50 collection in codepen.
Recreate these three layouts in HTML and CSS, using responsive widths. Save your work into your codepen collection.
Watch all the videos in my lynda.com playlist called "CSS Layout 1" It should take you about 46 minutes.
Do not change the HTML.
Place your final design in your GD 50 collection in codepen.
Reading: By Tuesday, read the article "Opening the Box Model" by Shay Howe.
Recreate these screen shots with nested divs. Start by opening my codepen example "Nesting divs exercise" and forking a copy of it for yourself. I have written styles in that pen that will make your divs visible as you code them. You will only be working in html.
Name your pens 2.1 and 2.2 and add them to you GD 50 collection in codepen.
Using the HTML tags we have learned so far (scroll to bottom for list), complete the following three exercises. Save your work in codepen and be sure to name each assignment by its name (i.e. 1.1, 1.2...), and place the pen in your GD 50 collection.
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.
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.
Using the HTML codes for special characters, produce the "word" you see below.
Complete the following interactive tutorial on codecademy.com:Unit 1: Intro to HTML >> Lesson: HTML basics
When you accomplish that section, take a screen shot of your "Congratulations" badge and upload it into this assignment module.
For Thursday, watch videos #1 and #2 from dontfeartheinternet.com.Video 1: Not a Series of Tubes