Class: Wednesday 8:30am CST/CDT
Lab: Monday 6:00pm CST/CDT
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.Over the next few weeks, you will be designing and building a web page that presents a recipe. We'll start that project by finding/choosing a recipe, and doing some design research. This week, you will upload an HTML document that presents the following:
The CSS Diner exercise below is a fun and effective way to learn about more complex CSS selectors. Work your way through the set of challenges in the CSS Diner link below.
Then, walk through the short lesson on pseudo-classes and pseudo-elements.
Based on your research and the presentation in class, you should be ready to create three sets of low-fidelity prototypes for your recipe page. The objective is to experiment with the visual arrangement of elements in a fast, low-commitment way. You probably have a picture in your mind of what a recipe 'should' look like. Sketch that, but then set it aside, acknowledge that your first solution might not be the best one, and take a run at it from a different perspective!
At minimum, each set should include a portrait-oriented mobile view and a landscape-oriented laptop-view. Don't 'crop' the sketches at the bottom of the device, sketch the full layout. You don't need to spell out words, but if it's not obvious what a box or mark represents, label it!
Deliver your sketches as images collected and presented on a single HTML page, organized and labeled appropriately.
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'.
BE ADVISED: This assignment may require considerably morse time than the exercises we've done thus far. Plan accordingly.
Build your recipe as a responsive, finished html page.
Our goal is to translate your mockups into an actual webpage that will work visually on any device screen. Be aware that this may require significant compromises to your initial mockups, and that's okay. I'm not judging how accurately you reproduce your mockup. I would rather see a final layout that has evolved from your initial plans (if necessary) in order to work successfully in this new context.
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.
As a Creative Director, you will facilitate a short zoom meeting with your designer (as documented in the 'Creative Director <=> Designer Relationships' reference below) to present your topic and concept. Cloud-record the meeting. If you meet in person and can't record it, indicate as much in your notes. Make notes about the decisions/consensus the two of you reach regarding how to approach two sets of high-fidelity mockups. In the meeting, be prepared to discuss the topic, the concept, and ideas for possible treatments. Post your 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.
As a Designer, you will be responsible for creating two sets of high fidelity mockups based on the topic, creative brief, and meeting notes provided by your creative director. (Upload these using the assignments below). Each set should include, at minimum, a mobile view and a desktop view – but work with your creative director to determine what views are necessary to communicate the visual treatment. Do you need to see home page and interior page in order to demonstrate how the site will work? Is there a particular page of the site that deserves special consideration?
Your first creative treatment, per instructions above.
Your second creative treatment, per instructions above.
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."). Meet in class with your designer to discuss your feedback, and update your notes to reflect decisions you make as a result. Post your notes here.
Per your notes from your Creative Director and your revised mockup, build your microsite as HTML. Present a first draft for review. At minimum this is all of the content structured in HTML, but not necessarily styled.
Meet with your designer once again and discuss the initial build. Discuss what's working, what still isn't, where there microsite goes from here. Also, discuss a strategy for technical and design issues that may exist. How is the page structured? What is the plan for how the design will function responsively? What elements seem to be problematic or difficult? Post your notes with your feedback and planning decisions.
Build out your microsite in HTML. It should include all pages and content. It should have functioning navigation. It should work responsively. In other words, it should be complete and ready for one final review with your creative director.
After one last meeting with your project partners to collect/provide feedback, make and post your final, finished, beautiful, brilliant, portfolio-ready microsites!
For extra credit, you can build a simple but elegant launch page you can run on your laptop during your end-of-semester review, making it easier for faculty to review your Interaction work. Link to your recipe and both microsites you participated in creating.
(Even if you aren't a comdes major and don't have a formal review, you can still earn extra credit for this assignment.)