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 and 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: Shelby, Nathaniel, Kirk
The Discovery Center: Dominic, Mario, Mai
Meux Home Museum: Erik, Abby, Salina
African-American Museum: Ashley, Madison, Cindy
Fresno Art Museum: Daniel, James
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.
To turn in your finished type specimen, upload it to your web directory. Save it into the folder "typespecimen" and name it "index.html".
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.
Watch all the videos in my lynda.com playlist called "CSS Layout 1" It should take you about 60 minutes.
Using the Illustrator templates attached here, lay out two versions of a type specimen design using 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:
Turn in on Tuesday:
Using the CSS Zen Garden pen in my codepen account, design a layout using CSS positioning properties. There are three sections:
Make the header a fixed position element. For the other two sections, you decide which gets a relative or absolute property. Use these properties to create a unique layout.
Watch all the videos in my lynda.com playlist called "CSS Positioning, etc." It should take you about 42 minutes.
Have Assignment 3 perfected, with appropriate web fonts and detailed styling.
Your goal is to analyze an existing webpage and create it's HTML structure. You will be using an article page of your choice from medium.com. The objective is to think in terms of boxes and getting them to align themselves correctly. We are not concerned with type and images, however you will want to control the spacing as much as possible.
Save your code in codepen and add the finished pen to your "GD 150" collection.