Project: Portfolio

You took some time to think about your message, now you have some words on a page. With that content, you can finally start to define a layout and create elements of a design for that content.

Phase 3: Design

Readings:

• Content First, Design Second: Prototyping with Words
• Clean Up Your Mess: A Guide to Visual Design for Everyone
• Stealing Your Way to Original Designs

This phase of the project is usually done by an experienced web designer who creates the deliverables for you to build as a developer. Maybe that means a low-fidelity wireframe and moodboard, or maybe that means a functional high-fidelity prototype using a design tool like Adobe XD or Figma. Because we're focusing on development more than design, I'll let you decide how far you want to dive into this process.

You can work on simple sketches and provide a list of colors you like. Or you can find a tool to build a more complete mock-up. The choice is yours.

What is most important, though, is that you start thinking about how to employ a design to communicate your content in the best way possible. You might want to explore some principles of good design so that you have some good rules to follow.

Requirements

1. For each of your layouts, create a higher fidelity design to work off of.
2. Don't forget responsiveness! You should show how content might react at different screen sizes.
3. You should have a good idea of your color palette.

Do not start coding yet! This is the last step. Once we have an idea of the design, it's off to the races!