Project Scope


This project was a one-page scrollable photography portfolio website design. The final deliverables included a final design comp in Figma and several additional design assets: typeface, color scheme, a device mockup, and notes for developer handoff.
ย 

Project Overview


Dorothy Delong is a contemporary intersectional feminist photographer who travels the U.S. documenting the female experience, the fight for womenโ€™s rights, and the variety of challenges that women face. As she and her work have become more visible, she has recognized the need for a professionally branded online presence to market herself to publications and arts venues.

Project Role


ย 
As the sole visual designer on this project, I worked closely with Dorothy to understand her goals and parameters (including target audience) for her portfolio, designing and packaging an easily shared comprehensive final website comp with design assets for developer handoff.

Problem Statement


Dorothy travels as a photographer year-round, documenting the female experience through an intersectional feminist lens.ย  With the current shift in social media trends, she has recently found that the Instagram platform now works better for connecting with her audience, new exposure, showcasing her work process and travels.
Dorothy was previously using the Facebook platform to share her work, but as she began to build a reputation as a professional photographer, she realized she needed a portfolio website to share with publication editors, galleries, museums and for pursuing professional opportunities in her field.

Project Goals


At the end of this project, Dorothy will have a branded one-page portfolio website linked to her social media profiles. It will also include:
  • Her logo
  • An artistโ€™s statement, which will help visitors of the site learn more about Dorothy
  • A photo or headshot of Dorothy
  • A featured quote about her mission
  • Samples of her work
  • Site navigation that will link to each content section
  • Contact Information for inquires

Design Process


ย 

Design Research & Planning

To establish and prioritize Dorothy DeLongโ€™s goals for her portfolio website, I used a client onboarding questionnaire to identify her target audience and to easily allow her to share links to examples of photography portfolio sites that she is inspired by and provide any other relevant information.
ย 
Using a shared Google Doc workspace Dorothy and I were able to easily look at and discuss her existing design assets and content such as her brand logo, photography examples, and her artistโ€™s statement.
View of client's project onboarding questionnaire created in Google Docs.
View of client's project onboarding questionnaire created in Google Docs.

Developing Site Layout & Navigation

ย 

Wireframing

Now that I was clear on Dorothy's vision and parameters for her website, I completed a rough paper sketch to develop the site structure and establish the layout and navigation.
I prioritized featuring a slideshow format with tilted photos for the header area, incorporating Dorothy's desire to show her work in a creatively unique yet professional way.
The next sections of the site include a tiled-image area for her portfolio photos, a featured quote, an about section featuring a headshot image of Dorothy and her artist's statement, and a footer featuring contact information and social media icons/links.
Paper wireframe sketch for Dorothy DeLong's website.
Paper wireframe sketch for Dorothy DeLong's website.
ย 
ย 

Digital Wireframe

Low Fidelity Comp

High Fidelity Comp


notion image
notion image
notion image

Once I'd planned Dorothy's site structure and sketched my wireframe ideas on paper, it was time to import my paper wireframe into Figma to create a first digital wireframe, which would become the foundation for the site design comp.
At this point, I chose a multi-tiled layout for Dorothy's portfolio section to accommodate a wide variety of image sizes, dimensions and complement the large slideshow header at the top of the site.
Next, I focused on the accurate placing and spacing of the text and other placeholder items. I wanted to ensure a solid layout was in place before moving on to the color scheme and typeface decisions in my next step, constructing a low-fidelity design comp.
Introducing the elements of Dorothy's color scheme and typeface styles to the low-fidelity comp began the process of evaluating whether my stylistic decisions aligned with the desired look and feel of her website.
In our initial consultation, Dorothy specifically mentioned she wanted to balance the use of color & typography trends with her desire to present a clean, professional-looking platform for her work.
I considered whether the initial aesthetic design choices made matched her goals for the site and the message she wants to communicate about her professional identity, utilizing my visual research materials and references provided by Dorothy.
In the next design stage, I placed Dorothy's logo, images, icons and incorporated some initial design feedback from the low-fidelity comp.
I decided to bring Dorothy's quote section above the portfolio section after iterating on feedback that new visitors to her site might not already be familiar with her work and artistic viewpoint, which is extremely important to how Dorothy desires to position herself as a photographer.
With the layout structure now finalized, I began to add several illustration components to add visual interest and dimension to the design.
ย 

Color Scheme & Typography


I wanted to select a minimalist color scheme as a foundation for Dorothy's images to be presented. Her desire to position herself as a working contemporary artist with a bold visual viewpoint meant I needed to find a palette with a touch of personality that didn't distract visually from her photographic work.
I researched visual trends in artist portfolio design, reviewed samples of sites and inspiration that Dorothy submitted as part of the client onboarding process, and selected 'rose white' (#FDEFE6) as a primary color with classic pure black (#000000) and white (#FFFFFF)ย  as text and accent colors.

For the typefaces on Dorothy's site, I wanted to choose a very bold, editorial style for the headings, subheadings, and quote section. I again incorporated Dorothy's modern inspiration source material-selecting Monument Extended, a powerful quality extended sans-serif typeface that is often used for bold editorial statements.
Paired with DM Mono, a modern serif, the typescale choices are intended to support the aim of adding a touch of personality and trend without becoming distracting.
ย 

Client Feedback


After presenting the final design to Dorothy, she decided to include an additional social media icon linked to a stock photography site she has a profile on and requested several small spacing adjustments.
She also wished to increase the intensity slightly of the background color gradient accents, which I happily altered after showing her a few swatches showing the different appearances.

Iteration


I made the requested adjustments and ensured that all of the design files and assets were organized for use by a developer coding her website. This included checking that all elements were aligned to the grid/guides, removing any leftover placeholders, clearly labeling layers, artboards, and design assets.
Once I'd given everything a thorough check, I organized and grouped layers for export and prepared handoff notes and assets for the developer.
ย 

Final Design


notion image
ย 
ย 
ย 
ย 

Challenges & Takeaways


Designing a one-page portfolio website for Dorothy DeLong was a project that required me to research design trends and industry-specific standards (in this case, photographer portfolio websites) to produce a modern and unique layout that met her need to market herself professionally.
ย 
This project also allowed me to further improve my skills with Figma, a collaborative interface design tool that's a great option for developer handoff-files can be annotated as much as necessary and source files and links can be embedded in the design for future access.ย 
ย 
I learned that my design workflow could be substantially sped up by utilizing the Figma Community's large libraries of pre-existing assets, such as wireframing component groups-no need to always start 100% from scratch! This freed me to take more time working on creative components such as custom arrow vector drawings and gradient shapes for adding dimension to a one-color background.
ย 

Conclusion


I designed a website with a minimalist, clean, contemporary feel for Dorothy DeLong to market herself as a professional feminist photographer. The one-page layout focuses on showcasing her work, information about her, her artistic philosophy, social media links, and contact information. The flowing 'tiled' layout I choose for her portfolio section will allow her to seamlessly subtract and add photos to the design in the future, as she creates more visually striking work.
Using Figma allows for smooth future collaboration and troubleshooting-if the developer Dorothy chooses to work with has questions or needs additional assets, the file is easy for all parties to access and make any necessary changes. Dorothy was provided with the final design, which included color codes, fonts, and the Figma file with included developer handoff notes and links to make coding the design as smooth a process as possible.
ย 
ย 
โœ๏ธ
Project Credits
Visual/Web design: Victoria Farr
Copy: Dorothy DeLong
Photography: Dorothy DeLong for Skillcrush, additional images via Unsplash
ย 
badge