Dorothy DeLong

cat origami logo

Photographer and activist Dorothy DeLong reached out to me for a website redesign. She needed a digital place to exhibit her photography, which she describes as "real moments of strength, vulnerability and solidarity for women owning their space. This portfolio would also have to be the primary point of contact for museums and art galleries alike that wanted to inquire about showing Dorothy's work.

Client

Dorothy DeLong

*Academic Case Study

Year

2022

Category

Photography

Type of Work

Color Scheme

Typescale

High Fidelity Design Comp
Web Design

To begin Dorothy's onboarding, I provided her with my standard questionnaire. This process is foundational to understanding every client's vision. Dorothy already had her logo, photography samples, artist’s statement, and a quote ready for me to work into her portfolio.

While designing Dorothy's one-page portfolio, I sought to find balance between trends I knew she would love and the solid design patterns I knew her clients would appreciate as they navigate her site.

In the production of her high-fidelity designs, I used Adobe XD to ensure all design files and assets would easily translate for her development team.

When reviewing the final design with Dorothy, she decided to add some additional photos and social media links. In anticipation of this, I created the site layout to accommodate additional assets without disrupting the design flow.

Typography & Color Scheme

style-tile.png

I chose a bright fuchsia and slightly toned down yellow to mirror the life in Dorothy's photography. I brought in an off-white to allow the text to pop and balanced the whole palette with a black and white base.

Wireframing & Design Comp

Putting pencil to paper is one of the best ways to think through a website; even if it's only a few words and rough shapes. For Dorothy's site, I had a firm idea of the navigation and site design in mind, but having the placements mapped out on paper gave me a consistent frame of reference during the wire framing process.

With the paper wireframe sketched, I transferred my designs to Adobe XD to create a digital format, then placed her text to have a better understanding of the space I would need for each element. I worked through the basic design without colors or typeface to make sure my focus stayed on the overall layout.

Once every item had a placeholder, I added the colors and typefaces in to assess them in the context of the layout. One change that I made to the initial design after placing the colored text was moving the location of the about me. I realized once the quote was positioned that the amount of space left for that section had greatly diminished. Adding the section to the main body seemed to be the most sensible solution as there was ample space for the about me and the portfolio gallery.

With everything else in place, I added the assets Dorothy provided. I added a black gradient over the hero image to help with the text contrast and to complement the yellow used in Dorothy’s quote as well as the hover effect and off-white for her navigation menu. I then sectioned off her about me in yellow and carried that through to the icons in her footer to encourage visitors to find her on social. 

Final Design

main-mockup-dd.png