Designing for the Web Worksheet

1. Develop Your Idea

The goal of this website is to create a personal portfolio website that showcases my creative work and skills. The problem I am trying to solve is how to present my projects in a clear, visually appealing, and easy-to-navigate way so that viewers can quickly understand my abilities and style.

Many creative people have strong work but struggle to present it effectively online. My website will organize my work into clear sections and provide short explanations for each project so visitors can easily understand the process behind the designs.

The website will also communicate my personal style and identity as a designer. By combining strong visuals, clear navigation, and thoughtful layout, the site will act as a professional platform to present my work.

2. Discovery and Research

To develop my idea, I researched several portfolio websites from designers and creative professionals. I analyzed how they organize projects, use images, and guide users through their work.

Some common patterns I noticed were clean layouts with lots of white space, large project images that grab attention, simple navigation menus, and short descriptions explaining the design process.

From this research I learned that successful portfolio websites focus on clarity and storytelling. Instead of overwhelming users with too much content, they highlight a few strong projects and guide viewers through them.

Based on this research, I decided that my website should prioritize simple navigation, strong visual hierarchy, and clear project presentation.

3. Target Your Audience

The primary audience for my website includes professors and classmates, potential employers, creative professionals, and anyone interested in my work.

These users want to quickly understand my skills, design style, and creative process.

Because of this, the site must be easy to navigate, visually engaging, organized clearly, and responsive across devices.

Keeping the user in mind helps ensure the website communicates my work effectively without confusing visitors.

4. Introductory Framing and Call to Action

The homepage will introduce who I am and what I do. It will include a short statement describing me as a designer and the type of work I create.

The introduction should quickly answer three questions for the user: who I am, what I do, and what can be seen on the website.

At the end of the experience, the site will encourage users to take action. The call to action will invite visitors to view my projects, contact me, or connect with me professionally.

5. Inspiration and Concepts

To develop the visual style of the site, I created mood boards exploring different design directions. These boards included references for color palettes, typography, photography style, layout styles, and overall mood.

From this process I developed two design concepts.

Concept 1 is minimal and clean with a light background, simple typography, large images, and a focus on clarity and professionalism.

Concept 2 is bold and creative with strong colors, experimental typography, dynamic layouts, and an emphasis on creativity and personality.

6. Thumbnails and Sketches

I created several small thumbnail sketches to explore different layout ideas. These sketches helped me experiment quickly without worrying about details.

The thumbnails focused on navigation placement, image arrangement, text hierarchy, and page structure.

I also considered how the layout would adapt to different devices such as phones, tablets, and desktops.

After comparing my sketches, I selected the concept that best balanced visual impact and usability.

7. Wireframes and Prototypes

Next, I translated my chosen thumbnail sketch into wireframes. Wireframes remove visual design elements like color and typography and focus only on layout and structure.

I created wireframes for different device sizes including smartwatch, phone, tablet, and desktop. These wireframes helped determine how content would be arranged and how users would navigate through the site.

Wireframe