Below is a list of the deliverables (things you have to turn in) for your final project.
With the exception of the proposal (which you have already turned in), these deliverables are all due on the day of our final presentations (Dec. 12).
When you present your final website, be prepared to talk about your team's design process and workflow. What did you learn from your user testing and how did it influence your design decisions? Do you think you were successful in designing a solution for the problem statement in your initial proposal?
For this final project, you will be working in groups to redesign a website for a local non-profit organization.
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.
Before we leave class today, let's do some quick, casual usability testing. Review the current website with your group and write down two specific tasks that you think are important to the success of the website. Then ask a couple classmates from different teams to execute those tasks while you observe. Be sure to ask them to think out loud. This should give you a little insight into problems areas you may need to address in your redesign of the website.
It is important that the tasks you make up are very specific. This will allow you to watch someone navigate the site in a realistic way. Here are some examples.
Poorly written task: "Learn more about the museum."
Well written task: "Find out if the museum is appropriate for children under two years of age."
By Thursday, you will create a proposal document for the redesign project. It should include:
Name your proposal
proposal.html, save it into a folder named
redesign, and upload it into your
GD50 directory on the server. Each member of the team should upload a copy of the file into their own directory.
|Centro de Folklor||Bully Rescue||Meux Museum||Feral Paws Rescue|
During class, you went out in groups and gathered data from participants about how they would categorize a collection of navigation items. The next step is recording and analysing that data. I suggest using a spreadsheet to type out the different organizational patterns of your participants. Refer to the last couple videos in the playlist from Tuesday for tips on how to how to do that.
Look for patterns in their naming choices, are they using verbs or nouns, did certain cards cause confusion, etc.
Based on your analysis, come up with your own information architecture (how the navigation will be organised — what will each section category be called and what will it contain?
Have one person in your group email me your data and navigation choices.
Watch this Lynda playlist on card sorting (duration: 27 minutes). The videos give instructions for an activity we will be doing in class, so be ready!
Make sure you watch the playlist assigned last week, and take the quiz.
A mockup is a visual representation of the layout and design of your website. Use your content as structure and your mood board as your artistic "north star." Since this is a one-page site, you will probably need to design something as a long rectangle, in order to include all the scrollable content. Or perhaps you think of it as separate screens that scroll up in sections, like a slide show. Maybe you invision a sideways scroll. Design your mockup however best represents your vision.
Take note: some have a lot of text while others rely mostly on images. It all depends on your subject.
Save your mood board as a pdf named
mockup.pdf and upload it into your
one-page folder on the server.
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.
Save your mood board as a pdf named
mood.pdf and upload it into your
one-page folder on the server.
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.
Save you work in any type of text format (i.e. .docx, .txt., etc.) Place it in a folder named
one-page and upload it into your GD50 directory on the server.
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:
Feel free to add your own classes.
Save the files into a folder named
hw8-1 and upload it into your
GD50 folder on the server.
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...
Name your html file
index.html, save it into a folder named
hw7-1 and upload it into your
GD50 folder on the server. You can name and organize your image files however you like, as long as the file path names
are correct in the html.
For a review of the uploading/FTP procedures, go to the resources page on this site, or watch this video.
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
In typography, type specimen refers to a presentation of a certain typeface to showcase its design and/or use.
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:
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.
Before completing this assignment, be sure you watch the playlist for the online class (posted below).
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 "Exercises" collection in my codepen account.
Save your layout as Assignment 5 and add it to your GD 50 collection in codepen.
Watch this Lynda playlist all about creating layouts in CSS using floats and other tricks.
Complete the coding exercise described in Assignment 5 (above).
Also, you might find this short video to be helpful when trying to visualize how CSS floats work.
Watch my tutorial on using Google web fonts.
Find a quote you like. Choose something that you think you can express well using typography. Here are some visual examples. You might find a quote you like from Bruce Mau's An Incomplete Manifesto for Growth.
Choose the typeface/s you want to use and incorporate them into codpen with your text. We will work on this in class Thursday, but at least have the font applied to the quote.
Create a sketch of your design (pencil/paper, Photoshop, Illustrator, whatever...), then recreate it in html and css. Play with as many new properties as you can.
When finished, name it "Assignment 4" and add it to your GD 50 codepen collection.
Here are two videos for you from my Youtube playlist. Enjoy!
CSS Basics, duration: 37 minutes
After you've watched that, take this short quiz.
Fork the pen below and apply your own styles to the HTML.
Be sure to...
Do not change the HTML.
Name your final design
2.0 and place it in your 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