Answer these five 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, a couple of pixels off is not pixel-perfect, and 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'. The 'Font Awesome' font is already added to the page. It will be handy for the social media icons in the footer.
We've made a few versions of a lyric sheet as a way to try out technical concepts. But so far, we've treated it like an experiment or sandbox: we've made no attempt to evaluate the lyric sheets in terms of design effectiveness. Spend some time this week making a mockup of a lyric sheet that you'd actually be comfortable putting in a portfolio. We'll build HTML for it next week in class. Consider the following questions as you plan your mockup:
“Everything can be improved.”
In class today, meet with peers (as scheduled below in the 'Design Feedback Relationships' document) to both provide and receive feedback about your Lyric Sheet mockup. You will have two meetings: one as the designer receiving feedback, one as an independent set of eyes providing feedback. Cover the topics in the 'Discussion Points' document (below) in each discussion, and agree with your partner on a plan that improves at least three things about the design.
Once your meetings are over, make the design changes agreed upon for your own Lyric Sheet. Then, create an 'improvement-plan.html' document, and post the refined mockup as a jpeg embedded in it. This improvement-plan should show the original image, the revised image, list the improvement items in your plan, and indicate the name of the person with whom your planning took place.
Meet with your partner again, show them the refined design, and decide if further action is necessary. If so, make a new plan with one or more items to change, and repeat. Show each iteration within your improvement plan page.
Now that you have made an attempt to finish your lyric sheets, take a hard look at it, and turn it into something you will be pleased to present as part of your design portfolio. Seek insight from friends and classmates. Seek insight from your instructors. Provide meaningful feedback to your classmates in order to help them fine-tune their lyric sheets.
Revision and refinement are critical parts of the design process and the goal of this project, and the remaining work in this class, is not to simply complete it. If your lyric sheet is already really good, make it great. If your lyric sheet is rough around the edges, smooth the edges out. If your lyric sheet is a mess, rethink and simplify the design and/or code to make it work.
*This is your final week to refine and present the best possible finished product you can.*
“Everything can be improved.”
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). 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. 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.
Just as you will act as the Creative Director for your selected topic, you will also act as the designer for someone else's topic. You'll be responsible for synthesizing their ideas and yours into a coherent and compelling design. Find your Creative Director in the matchups below. Read their creative brief and explore their selected topic, then arrange a meeting with them, to take place no later than Saturday Nov 11. In the meeting, be prepared to discuss the topic, the Creative Director's concept, and your own ideas for possible treatments. When the meeting is complete, you (the designer) will create visual mockups for the site and post them. You (the Creative Director) will also post meeting notes (see assignment below).
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.
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, revise your mockups and post them.
Per your discussion with your Creative Director, build your microsite as HTML. Expect to present the finished work to your Creative Director in class on Nov 29.
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 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. If your site is NOT responsive, make sure it does NOT change when window width changes. (This may be accomplished by setting a width on <body>.) This assignment is not complete until your site is presentation-ready.
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.