DESKTOP VIEW OF DOROTHY DELONG HERO SECTION
A one-page scrollable photography portfolio website.
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.
PROBLEM STATEMENT
Dorothy was previously using the Facebook platform to share her work, and as she began to build a reputation as a professional photographer, she realized she needed a portfolio website to share with publication editors, galleries, and museums and for pursuing professional opportunities in her field.
SOLUTION
Investigating current social media usage trends, we also found that the Instagram platform now works better for connecting with her audience, new exposure, and showcasing her work process and travels-so she had a strong desire to feature links to that platform on her professional website.
The final deliverables included a final design comp in Figma and several additional design assets: typeface, color scheme, and notes for developer handoff.
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.
DESKTOP VIEW OF DOROTHY DELONG WORK SECTION
GOALS
At the end of this project, Dorothy will have a branded one-page portfolio website linked to her social media profiles.
DELIVERABLES
Dorothy's brand logo
A brief artist’s statement
A professional headshot
A featured quote about Dorothy's mission
Samples of her work
Site navigation that will link to each section
Contact Information for inquires & bookings
CREDITS
Photography & Copy・Dorothy DeLong
Mockup Photography・Anna Nekrashevich
Typography・Pangram Pangram Foundry, Displaay
DESIGN PROCESS
CLIENT ONBOARDING QUESTIONNAIRE IN GOOGLE DOCS
RESEARCH
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 could quickly look at and discuss her existing design assets and content such as her brand logo, photography examples, and her artist’s statement.
Project intake questions included:
Who are you trying to reach with this website?
Who are your competitors?
What are some website designs that inspire you?
Can I see some of your work samples?
Do you have a logo, specific colors, or any other content I should include on the site?
Using insights from interviewing Dorothy, I was clear on Dorothy's vision and parameters for her website. I then completed additional research into portfolio examples and inspiration provided by the client and current photography portfolio best practices.
MOOD BOARD
Although I would not be developing the look & feel of the site until further along in the project workflow, I like to begin mood boarding early in the design process, collecting visual references as soon as possible.
Using Figma, I began to assemble a collection of swatches, images, some of Dorothy's photography samples, and typeface examples-also incorporating the inspirational references provided by Dorothy via the client questionnaire.
Creating a mood board early (and updating it often) helped give the client an idea of what the visual 'feel' of the project was, and provided a way to present and discuss visual ideas in addition to verbal concept discussions.
INITIAL SKETCH CREATED WITH GOODNOTES
DEVELOPING SITE LAYOUT + NAVIGATION
Now that I was clear on Dorothy's vision and parameters for her website, I completed a rough 'paper' sketch digitally in GoodNotes to quickly develop the site structure and establish the layout and navigation. This allowed me to accelerate the decision-making process visually, basing the sketches on the initial client interview and her business goals.
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.
WIREFRAMES + DESIGN COMPS
Using Figma, I translated my first sketches into digital, low-fidelity, and then high-fidelity wireframes, thoroughly testing at each phase to verify that the layout remained easy to use and visually appealing.
DIGITAL WIREFRAME
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 the 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, and dimensions and complement the large slideshow header at the top of the site.
Next, I focused on the accurate placement 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.
LOW FIDELITY 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.
HIGH FIDELITY COMP
In the next design stage, I placed Dorothy's logo, images, and 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
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.
TYPOGRAPHY EXAMPLES CREATED FOR PROJECT STYLE TILE
TYPOGRAPHY
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 type scale choices are intended to support the aim of adding a touch of personality and trend without becoming distracting.
DESKTOP VIEW OF DOROTHY DELONG ABOUT SECTION
CLIENT FEEDBACK + ITERATION
After presenting the final design to Dorothy, she expressed a wish 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.
She also requested several small spacing adjustments in the appearance of the image gallery section, including four additional featured images.
As the project progressed, Dorothy also realized she wanted her website to feature a larger call-to-action feature directing visitors to contact her specifically about bookings, so we decided to increase the visibility of the CTA button by enlarging it to full-width in the contact section.
FINAL DESIGN
SCROLL THROUGH THE FINAL DESIGN IN THE PROTOTYPE ABOVE ↑
TABLET VIEW OF ABOUT AND CONTACT SECTIONS
FINAL DESIGN + DEVELOPER HANDOFF
Communicating with the client frequently, 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, and clearly labeling layers, artboards, and design assets.
Once Dorothy approved the final design, and I'd given everything a thorough check, I organized and grouped layers for export and prepared handoff notes and assets for the developer.
These files, brand assets, and links were organized in a project Playbook that is easily shared with anyone Dorothy needs to work with in the future to continue investing in her professional brand.
CHALLENGES + TAKEAWAYS
1 → CHALLENGE
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.
2 → CHALLENGE
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 that can be annotated as much as necessary and source files and links can be embedded in the design for future access.
3 → TAKEAWAY
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 gradient shapes for adding dimension to a one-color background.
DESKTOP VIEW OF DOROTHY DELONG HERO & QUOTE SECTIONS
DESKTOP VIEW OF DOROTHY DELONG GALLERY SECTION
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.
Thanks for taking the time to look at my work!
Need help getting started on a project?
Questions about my work or availability?
Send me a note anytime, connect with me on LinkedIn, or see what I'm up to this week on Instagram!