Due February 28: Choose One*
You will need to submit the certificate of completion and the tutorial files you completed.
- Create an e-greeting inspired by the candy hearts provided.
- Project must be contained in a single file.
- At least one photo or scan of a candy heart must be included.
- Bonus: Include motion.*
- Bonus: Send the greeting via email (and not as an attachment) by the end of class.*
*Graduate students must complete one bonus as part of their challenge.
Rebecca will not be in class today because of a family emergency. Although there is not class, there is still work to be done in preparation for Monday. For class today (Friday) you should have the mobile design for your webpage implemented. Use class time today to start exercise 7:
- Create a copy of exercise 6 and use the copy to complete this exercise.
- Add space between your paragraphs by adding the property margin-bottom to the p selector in your stylesheet. Em would be the appropriate unit.
- Invent a name for the website and add it to the header of the webpage.
- If you used a sans-serif typeface for your body text, find a companion serif typeface to use for your headings. Likewise, if you used a serif typeface for your body text, find a companion sans-serif typeface to use for your headings. Use your text for guidance on how to choose a second typeface (a similar x-height is necessary). Implement your new heading styles.
- Use the CSS-Tricks Almanac to look up the following CSS properties that impact horizontal rhythm: letter-spacing, kerning, text-align, text-indent, hanging-punctuation. Use this information to improve the horizontal rhythm of your headings and your body text on your small screen design
Help each other out. Ask the advance students for guidance if you get stuck. If no one can help, post a question on Slack and I’ll help you out.
- Read Chapters 7-8 in Better Web Type
- Finish exercise 7.
I will not be in class today because of a family emergency. Please give each other feedback today and mentor beginning students who need help. Use the class time you have to refine your work — remember that you need to do user testing, so feel free to ask students in 317 to help you out. We’ll critique your projects on Monday and will bump the remaining deadlines for the assignment by one class period. If you have questions, please reach out in Slack.
Challenge 1: “Show Love” Button Design
Recreate this button using only CSS and the following HTML: <body><button> Show Love</button></body>. You may not use ANY images. Submit a single html file that contains an internal style sheet. Remember that the example above is just an image and does not show any interaction; it is up to you to decide an appropriate user feedback and interaction.
In addition to submitting your coded solution provide a written explanation of how you tackled this problem. It is not uncommon to have a hard technical test in an interview where the purpose is to demonstrate your thought process and problem solving skills and not necessarily a perfect solution.
- Hint 1: Multiple Borders
- Hint 2: HTML Entities
- Hint 3: Pseudo Elements
- Hint 4: Text Shadow & Text Transform
- Hint 5: CSS Gradients
A process book documents all major design decisions and steps in the design process. Summarize research methods and key findings. Explain how findings during discovery, critiques or user testing influenced how a particular deliverable or asset was revised. Remember to both show and tell.
Other members of your design studio who might need to update or revise your project or do a similar one in the future are the intended audience of this document.
Process book will be evaluated with the department’s process rubric. The process outlined in the book, the actual design of the book, and the writing in the book are all evaluated.
- letter size
- designed for screen
- design in InDesign (use stylesheets)
- submit as an accessible PDF