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:
In class today, review your own recipe page and provide a self assessment. High-level criteria you should consider are: usability, visual design. Make a list of what you like about your site, but also places where you made compromises, either because you weren't sure how to solve a problem, or because you didn't have the technical expertise to execute it.
After documenting your own self assessment, we will meet in breakout sessions to gather feedback about your recipe from your classmates. In each group, take turns providing feedback, such that each person receives feedback from the other people in the group. Cover all of the basic usability topics that make sense. View your recipe pages on your phones, and provide critiques from there. Discuss suggestions for not only usability improvements, but also visual improvements.
Once your meetings are over, document all of the feedback that was provided to you, and notes on how you intend to address any concerns. Post the document to the assignment link below.
You've built a wireframe, and adapted it into an initial draft. You've gathered feedback from yourself and from your peers. You'be drawn conclusions about what the right solutions are to the problems identified. Now build the final version of the page.
One of the hardest things about this assignment is being afraid of 'breaking' what you've already done. For this reason, I ask you to start from scratch on the actual code. Walk away from what you've done so far, build from the ground up, applying what you've learned. Reconsider your html structure, your class-names, your application of styles. Make a plan based on the new version of the page you have articulated in your mind, not based on what you already have. It may sound like more work, but I suspect it will go quickly, and you'll find freedom in being released from the mistakes that bound you the first time around!
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.
During the initial meeting with your designer, make notes about the decisions/consensus the two of you reach regarding how to approach the initial mockups. Post these notes immediately after the meeting so your designer can use them as a reference. Make sure your notes include the names and roles for both participants in the meeting.
Using the content outline and creative brief posted by your Creative Director, create visual mockups for the site and post them.
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.
Meet with your Designer, and review the mockups they've created for your topic. Discuss what works, and what may need to change. Make a plan for improvements, and post your notes from the discussion here. Include any ideas or thoughts you may have come up with on your own during review as well.
Per your discussion with your Creative Director, revise your mockups and post them, as needed. If you and your Creative Director agree, you can skip this step and go straight to HTML.
Per your discussion with your Creative Director, build your microsite as HTML. Expect to present a *COMPLETE* first draft by July 28.
Meet with your Designer, and review the site they've created. Discuss 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 from the discussion here. Include at least three areas for improvement.
Based on notes from your meeting, 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.