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. Also, the font name used on the page is 'Archivo Narrow'.
Using the techniques you practiced with the Box Model assignment, design and build your own html page that presents the content of a wikipedia article of your choice. Adapt the structure we used in the HTML Box Model assignment, but modify as needed to fit the content. Start with outer 'framework' structures, and work your way in to the details. You will likely have a few design details that you don't know how to approach technically, but don't let those be an excuse for not proceeding with everything you CAN do. You should be able to create the page sections, populate them with your text content, apply correct typefaces, sizes, colors, add images and background images, and manage padding and margins to position most elements.
Pick an article of appropriate length and content. Avoid content that is mostly lists. Aim for content for which you can find supporting imagery outside wikipedia if necessary.
One of the most important aspects of designing for screens is that often the content 'feeding' a design constantly changes. The designer must anticipate how the content will change, and structure a template allowing for this variability.
Applying this idea, design (in Photoshop or Illustrator) a single-page template for displaying information about your classmates' favorite movies, based on the information we collected in class. This movie browser will present a single movie per screen, and allow the user to navigate forward/backward through movies with 'previous' and 'next' buttons.
Design your mockup so that the important aspects of the design fit within 960px of width, but account for the possibility that the user's window will likely be wider. For the purposes of this assignment, don't worry about smaller device screens.
View source on the starter page listed below, and copy it into your own document as the first step in building your movie viewer mockup into an html template. You will only build a single html page, but this page will be 'filled in' with the live movie data we collected.
Note that this template is using a library called AngularJS to enable the live data view. Learning AngularJS is outside the sccope of the project, but you will need to know enough about it to avoid breaking the placeholders that represent real data on the page.
As discussed in the mockups for this project, build at a fixed 'safe-zone' width of 960px. No need to worry about a responsive layout. Rather, focus on making sure your layout successfully accomodates the variablity of data from movie to movie, so any title, summary, storyline, cast-list, etc. fits without breaking your layout.
Design a personal portfolio website. At minimum, it should present your best work from this class. If you choose, it may also contain work from other classes this term, or pull from your entire WashU experience. Include non-design work if you choose.
The site must have more than a single page, and a reasonable way to navigate between pages.
Aim to keep it simple. Let the content drive the layout — avoid getting caught up creating an elaborate 'frame'. Consider how you'll build the layout in HTML, and try to stay within your comfort zone technically.
Make it!