presents

Web Design II

Project 3: Responsive Personal Site

Overview

In this project you will build a personal website that includes a home page, a blog, and a portfolio. Your site may use whatever look and feel you'd like, but should generally conform to the wireframes provided on the Resources tab as you're learning responsive web design.

As this site is primarily meant to practice responsive web design techniques, you do not have to create actual blog posts or feature real portfolio items but you are encouraged to use as much genuine content as possible. Fill any remaining requirements with neat placeholder content that simulates what actual content could be like.

Requirements

Your site must include the following:

  • Responsive site that spans from a smartphone size, 318px minimum, up to modern desktops at least 1200px wide.
  • Visually pleasing and cohesive design of three primary layout templates: home, article, and portfolio.
  • 8 total minimum pages as follows:
    • Home page based on home layout template.
    • 4 Portfolio pages based on the portfolio layout template.
    • 3 Blog pages based on the article layout template.
  • Usable and fully navigable.

Deliverable A: Mobile Designs

Follow this process:

  1. Thoroughly analyze the wireframes to ensure you understand the required layout overall for each page template and responsive stop.
  2. Use a new "Page" in Figma for each set of device-specific mockups and place each mockup on its own Artboard/Frame. So you should have at least three Pages in your Figma file (smartphone, tablet, desktop) each with three artboards/frames (home page, portfolio page, article page).
  3. Set up navigable hotspots to simulate the interaction between the homepage and other pages you've prototyped using Figma's prototype features.

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

Deliverable B: Full Responsive Designs

Follow this process:

  1. Apply any changes to your mobile mockups based on feedback from the professor.
  2. If you don't already have them, add two additional pages in Figma: one for the "tablet" mockups and the other for the "desktop" mockups.
  3. On each page, add three artboards on which you can rearrange the elements from your mobile mockups according to the provided wireframes and your design sense. Your tablet artboards should be 768px wide (as tall as needed), and your desktop artboards should be 1200px wide (as tall as needed).
  4. Add navigational hotspots to complete the mockups so that each responsive set is a complete prototype.

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

Deliverable C: WIP Build

Apply any feedback from your professor to your design comps.

Then move into the provided project space in Codio and create the your home page, a sample portfolio page, and a sample blog page. Add clean, simple, semantic markup in each. Then add a central stylesheet and add at least the content styles you'll need for your build out. Focus on the settings in just your mobile mockup at this point and don't fret about any layout aspects; just type, color, and spacing.

Ensure your work in progress (WIP) is on Codio before the deadline

Deliverable D: Final Build

Make any updates based on feedback from your professor. Then proceed to build out the responsive layout for your project. Be sure to start with the mobile styles as your default settings and add min-width media queries to scale up as discussed in the lessons.

Ensure your final work is on Codio before the deadline

Resources

Base your website design on these layout template wireframes (coming soon):