Class: Wednesday 8:30am CDT/CST
Lab: Monday 6:00pm CDT/CST
Answer the following questions, with your answers formatted as an ordered list in an HTML document that you upload to the server. Make sure you use the folder and file name specified below.
font-weight, font-style, letter-spacing, text-transform, text-decoration. Place each sample on its own line. Include a label for the group that shows which css property the group demonstrates. Include a label for each line that shows which value is used. Style the whole page to present your samples cleanly and clearly.Recreate the structure of the background image from the starter page for this assignment. The starter page includes the CSS link for the required font, and a background image that you will "trace" using HTML. Create each of the five horizontal panels using the <section> element. Use your own images and colors. There are various ways to complete this assignment, but your final HTML should be very close to a pixel-perfect copy of the background image. As you complete each panel, add the panel's background image or background color last (otherwise you won't see the other elements you need to trace).
This assignment will use virtually everything we have learned thus far: type styling, complex selectors, foreground and background images, image optimization, the HTML box model, floats, grids, and shared classes. Referring to those previous lessons will help, but not every answer lies in a previous lesson. Your creative adaptation of what you've learned will be important.
Notes: use the Chrome browser to avoid any browser rendering discrepancies. You'll need to link to the Google font 'Archivo Narrow'.
Over the next couple of weeks, you will be designing and building a recipe web page. This week's assignment is to choose a recipe, gather assets and build a responsive wireframe of the website.
Content must include:
Wireframe requirements:
When you are confident your recipe wireframe is complete content-wise, and working responsively, style it! Apply your communication and design skills. Use type, color, imagery, whitespace, alignment, etc. to turn the wireframe into a fully-realized page. More importantly, use critical thinking, empathy, and imagination to put yourself into the shoes of your viewers, and make decisions on their behalf. How will you encourage potential users to want to make your recipe? How will you facilitate their ability to follow-through with success? Do your design decisions align with their needs?
Copy the starter file below, and read/work your way through it, following instructions to build a dynamic button. When complete, upload the exercise, including your css folder, as noted below.
Select a Wikipedia article that will serve as the basis for a custom-built microsite. We will each design and build a responsive microsite that presents the content in a well-designed and compelling way.
Review the content for your selected microsite topic, and create an outline showing what information you intend to include, and how you expect to organize it. What comes first, what comes second? How many pages? What content goes on each page? Post the outline as a PDF.
Imagine you are a Creative Director leading a design/development team for this project. What information, ideas, and resources do you need to provide to your team so they can successfully execute your vision for the topic?
Now imagine you are a designer or developer on this team. What would you need to know? What guidance, what practical details? What would you expect to contribute creatively?
Following the example provided below, write a create brief that a designer on your team could use as a reference if they were to develop mockups for your topic.
The objective here is to not only set goals, but practice communicating them by creating a reference document — a shared resource that helps articulate a coherent plan. Upload the brief as a PDF.
Using the content outline and creative brief posted by your Creative Director (as documented in the 'Creative Director <=> Designer Relationships' reference below), create visual mockups for the site and post them.
Review the mockups your designer created for your topic. Make notes about what works, and what may need to change. Try to avoid prescriptive solutions (e.g.: "make the title bigger"). Instead, identify concerns (e.g.: "I don't feel like intent of the page is immediately clear."). If possible, connect with your designer to discuss your feedback, and update notes to reflect decisions you make as a result. Post your notes here.
Per the notes from your Creative Director, revise your mockups and post them, as needed. This deliverable is optional, use it if you end up doing extensive design changes and want to document them for discussion with your creative director. Otherwise, you can skip this step and go straight to HTML.
Per your notes from your Creative Director, build your microsite as HTML. Expect to present a *COMPLETE* first draft by Dec 1.
Review the site your Designer has created. Make notes about what works, and what needs to change. Make a point of assessing what actually exists on the screen, not what exists in the designer's mind. Be sure to test navigation and other points of interaction. Also test responsiveness. Make a plan for improvements, and post your notes here. Include at least three areas for improvement.
Based on the review notes you receive from your Creative Director finalize your microsite. Make sure it responds correctly to window width changes. Make sure content is complete. Make sure images and information sources are cited.