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 an exact 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). Remember, very close is not pixel-perfect.
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, 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.
Assume the role of design critic, and put together a set of notes for the designer you are assigned to support (per the document below). You are responsible for providing written feedback for the designer. Upload your feedback in the form of an HTML document here, as a reference for your subsequent discussion.
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.
You will be the Creative Director for your topic — but somebody else will be your designer/developer. 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 your designer can use as a reference as they develop mockups for your topic. It will be your responsibility to follow-through with your designer over the course of this project to make suggestions and decisions about the treatment, so treat the brief as your best opportunity to clearly define your goals, and make sure you're providing the information and resources you would want to receive as a designer. 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. In the meeting, be prepared to discuss the topic, the Creative Director's concept, and your own ideas for possible treatments. 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.
Just as you will act as the Creative Director for your selected topic, you will also act as the designer/developer for someone else's topic. You'll be responsible for synthesizing their ideas and yours into a coherent and compelling design, and then building it. When the meeting is complete, you (the designer) will create visual mockups for the site and post them.
Meet with your Designer, and review the mockups they've created. Discuss what works, and what needs to change. Make a plan for improvements, and post your notes from the discussion here. Make sure you include at least three areas for improvement.
Per your discussion with your Creative Director, build your microsite as HTML. Expect to present a *COMPLETE* first draft to your Creative Director by Tuesday, November 26.
Make arrangements to meet with, either in person, via Slack, email, text, or phone, 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 if applicable. Make a plan for improvements, and post your notes from the discussion here. Include at least three areas for improvement.
Per your discussion with your Creative Director, 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 presentation-ready.
If you choose, prepare your own Interaction Foundations portfolio for your final reviews. This page should provide links to the work you would like to feature. Keep in mind that this is how other faculty will explore your work. Keep this simple, but put your best foot forward.If you are not a communication design major with a final semester review, this type of simple portfolio is an excellent addition to your resume when applying for internships.