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.Based on the discussion of the "box model" in class, 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. There are various ways to complete this assignment, but your final HTML should be as 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).
Notes: use the Chrome browser to avoid any browser rendering discrepancies. You'll need to link to the Google font 'Archivo Narrow'.
Reminder: you are designing a mobile web page, intended for us on a smartphone.
In class today, meet with a classmate to both provide and receive feedback about your recipe wireframe. You will have two meetings: one as the designer receiving feedback, one as an independent set of eyes providing feedback. Cover topics like basic layout and structure, placement and flow of content, usability, and potential technical challenges, particularly with regard to mobile device usage.
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.
Reminder: you are designing a mobile web page, intended for us on a smartphone.
When you are confident in your recipe wireframe and plan, build it. This page will be built for mobile device screens only (phones), so it is safe at this point to completely disregard how the page looks on a desktop browser. Don't assume that we'll be fixing or addressing details later — Google your questions, come to lab, work with your peers, refer to your notes, do what it takes to complete the project to your (and my) satisfaction.
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, meet with at least two different classmate to gather feedback about your recipe wireframe. You will gather feedback on your own recipe page from at least two people. You may also be asked to provide feedback to others as well. 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.
Use the starter content and the responsive wireframes I've provided to create a responsive layout for a news article. The layout will work at desktop size, and mobile size, and everything in between. At desktop size, be sure to set a max-width for your content of 960px. The main content, including the photo, will fill 100% of their column container's width, as will the related-articles box. At some responsive breakpoint that you choose, the related-articles box will move under the article content, and the two-column layout will be come a single column.
Use your best creative judgment in choosing font sizes, styles, and colors, but keep in mind that we are focusing on clean, responsive behavior and delivery of content.
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.
Pretend you will be the Creative Director for your topic — but somebody else will be your designer. What information, ideas, and resources do you need to provide to your designer so they can successfully execute your vision for the topic?
Following the example provided below, write a create brief that a designer could use as a reference if they were to develop mockups for your topic.
You will be designing this site, but treat the brief as your best opportunity to clearly define your goals, and use it as a guide as you move forward with your design. Upload the brief as a PDF.
Using your content outline and your creative brief, create visual mockups for the site and post them.
Meet with someone you feel can provide useful feedback, and review the mockups you've created. 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. Make sure you include at least three areas for improvement.
Include the name of your reviewer, and your relationship with them in your notes.
Per your discussion with your reviewer, build your microsite as HTML. Expect to present a *COMPLETE* first draft by April 21.
Be sure to watch the lesson video from the previour assignment for direction, tips, and advice.
Based on notes from your instructor, and your own self-assessment, improve and revise your microsite. If your site is responsive, make sure it responds correctly to window width changes. This assignment is not complete until your site is portfolio-ready.