Web Design II

Overview

In this project you will select an existing corporate site that you find aesthetically interesting and rebuild at least four different layout/pages from the site.

• Select a site that has an appropriate amount of challenge for you to mimic, but don't feel pressure to be too fancy.
• You will create mockups of the pages you select in Figma to first get into the design mindset for the site, and to build experience with Figma. You must match as closely as possible, even if you don't have the precise fonts or some other assets.
• You will not base your markup or styles on the actual site's markup or styles, but you must recreate the pages to match the final rendering as closely as possible.

Deliverable A: Design

First you will recreate the pages you've selected in Figma.

• Position your browser at a consistent size such as 1200px wide and take screen shots of the pages you're rebuilding.
• Obtain any image assets you can from the site by right-clicking on the image in the browser and choosing to download the image file.
• You can also use the developer tools to inspect the CSS and ascertain font settings, colors, and even background image urls.

Aim to mimic the page designs as precisely as you can using the design tools in Figma. What you build here should be as close to the original designs as possible while making use of assets that you can export or otherwise use in your build out. Consider fonts and images (background images and foreground images).

Clarify the source site pages from which you're working by adding a distinct art board with the web addresses for those original pages.

Use Figma's prototyping feature to simulate any interactions between pages of your site.

Complete your work in Figma and submit the corresponding assignment by the deadline.

Deliverable B: Work in Progress (WIP) Build

Next you must begin to build the project in the space provided in Codio. Aim to at least create the markup and add content styles using the best practices discussed in the course.

Ensure your WIP is completed in the provided project in Codio by the deadline.

Deliverable C: Final Build

Finally, finish building out the page layouts, aiming to match your comps with as much precision as possible.

Ensure your final build is completed in the provided project in Codio by the deadline.