DOROTHY DELONG

Portfolio Showcase Website

Image alt tag

A one-page scrollable photography portfolio website.

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.

Desktop view of Dorothy DeLong website

Desktop view of Dorothy DeLong website

PROBLEM

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.

Investigating current social media usage trends, she 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.

SOLUTION

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.

The final deliverables included a final design comp in Figma and several additional design assets: typeface, color scheme, and notes for developer handoff.

Desktop view of Dorothy DeLong website 'Work' section

Desktop view of Dorothy DeLong website 'Work' section

GOALS

At the end of this project, Dorothy will have a branded one-page portfolio website linked to her social media profiles.

REQUIREMENTS

  • 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

DESIGN PROCESS
View of client project onboarding questionnaire in Google Docs

View of client project 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.

View of project mood board created in Figma

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.

View of 'paper' sketch created digitally in Goodnotes on iPad

View of 'paper' sketch created digitally in Goodnotes on iPad

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.

View of Figma wireframes and design comps

WIREFRAMES + DESIGN COMPS

Using Figma, I translated my first sketches into low-fidelity wireframes. Then, I improved them by adding a few relevant stock images and copies provided by the marketing team. At this stage, the wireframes were defined enough for some user testing. Based on 4 tests, I’ve made a few alternations and moved on to creating high-fidelity prototypes.

  • Did you create high- or low-fidelity wireframes?

  • What tool did you use for wireframing?

  • Did you test with the wireframes? What were your findings?

  • How many iterations did you make?

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.

View of project style tile and asset links in Figma

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.

View of project Playbook for Dorothy Delong project

View of project Playbook for Dorothy Delong project

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 typescale choices are intended to support the aim of adding a touch of personality and trend without becoming distracting.

Completing a style tile in Figma (that could be viewed and shared easily with a link), I took the additional step of linking to font sources and additional brand assets for future use by others in a project Playbook - allowing developers or future designers to easily align with the branding feel established for this project.

Desktop view of Dorothy DeLong website 'About' section

Desktop view of Dorothy DeLong website '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.

Desktop view of the final website design for Dorothy DeLongScroll in the mockup ⬆︎ to view the entire design!

Desktop view of the final website design for Dorothy DeLong

Scroll in the mockup ⬆︎ to view the entire design!

Tablet view of 'About' and 'Contact' sections

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.

LEARNINGS: 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.

4 → TAKEAWAY

Using tools like Figma and Playbook 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.

Desktop view of Dorothy DeLong website hero section

Desktop view of Dorothy DeLong website hero section

Tablet view of Dorothy DeLong website gallery section

Tablet view of Dorothy DeLong website 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!