Designing for the Web

Step 1: Develop Your Idea

The problem I want to solve with my portfolio website is to have a place where I can display my strongest artistic assets, talents, and aesthetic in an organized and visually communicative format. I want my portfolio to be a place that people's eyes are drawn to and makes them want to know more about how far my work can go. My goal is to make a website that is informative while also remaining aesthetically true to my practice.

Step 2: Discovery and Research

I visited a variety of websites from successful photographers. I also looked at smaller photographers to gain an understanding of how others are presenting themselves as they become introduced to the career field.

Petra Collins landing page is colorful yet minimalistic. All of her bodies of work are clearly displayed on the left-hand side in an accessible manner. She has displayed some of her strongest images on the landing page to immediately catch the client/viewer’s attention. I feel that this almost invites people into the world of her photography and makes them want to click on the links on the left. This horizontal format follows throughout the rest of her website. I’m not sure if I like this as it makes the viewing experience feel a bit complicated.

Olivia Bee’s landing page is an array of different kinds of work that she's done. I don't really like this idea, because she has a combination of editorial and environmental photography and things that don’t look good side by side. She does have a navigation bar at the top that directs you to an organized list, but my eye is still confused as to what her aesthetic is when first entering the page. I also think that her photos are too large on the page. I do like the design of her logo, and I know that I would like to design a logo for the website as well.

AJ Keyser’s landing page has the different sections of their portfolio on the main page. Featured photos from each body of work serve as the images you see when loading onto the page, and also as the links. However I feel like the website doesn't make good use of the space, as there is a lot of negative space.

Me: I'm making a portfolio website. I've analyzed the websites of three different photographers saying what I like and don't like about them. From what I’ve said, what should I include in my website?

AI: To balance the strengths and weaknesses of your inspirations, your website should lead with a curated "hero" landing page featuring a single, high-impact image or a small, cohesive gallery that immediately establishes your specific aesthetic, avoiding the cluttered "array" style you disliked in Olivia Bee's work. To address AJ Keyser’s issue with negative space, use a full-bleed or structured grid layout where large "cover images" serve as links to your different bodies of work, ensuring the screen feels intentional and "full" without being overwhelming. Finally, pair this with a fixed, minimalist navigation bar and a vertical scrolling format to keep the user experience intuitive and accessible, while placing your custom logo prominently but subtly to anchor the design.

Step 3: Target Your Audience

My target audience for this portfolio is potential clients, which in photography can include a wide variety of people. I will design my website to be organized and consistent, presenting my work in a way that highlights my aesthetic and technical skills while remaining approachable and engaging for clients. This approach ensures that every choice I make, from layout to imagery, supports the goal of connecting with the audience I want to reach.

Step 4: Introductory Framing and Concluding Call to Action

I will engage my audience by featuring some of my strongest work on the homepage, immediately showcasing my skills and aesthetic. The site will help potential clients envision their brand or project within my style, encouraging them to explore further and ultimately reach out to collaborate.

Step 5: Inspiration and Concepts

Step 6: Thumbnails and Sketches

Step 7: Wireframes and Prototypes

Step 8: Photoshop Comps