I wanted Dorothy’s branding experience and online presence to be fun, elevated and modern while allowing her photos to be the focus. I set out to create a visual identity with an editorial vibe to position Dorothy favorably in the eyes of galleries and magazines interested in her work. I chose clean, inviting background tones  complemented by a pop of bold color for excitement. The entire suite is meant to inspire leads to display her work in a public setting and to showcase her narrative of modern women across the globe.

inspiration

Dorothy DeLong is a feminist photographer who travels the country snapping photos of women doing amazing things. Whether it’s protesting for pay equality, fighting for environmental regulation, or standing up for those in the #MeToo movement, she covers it all.

In Dorothy’s work and collections, the themes of feminism in action or feminism in moments take center stage.  Her work focuses on candid photographs taken on location at events for women’s rights, places where women are owning their space, and fleeting encounters on the streets. Her work engulfs the viewer in real moments of strength, vulnerability, and solidarity.

Adobe XD
Adobe InDesign (mockups)
Adobe Photoshop (mockups)
Chrome DevTools

Tools

Web Design Class Project

PROJECT TYPE

Single-Page Website Design
Logo & Brand Refresh
Color Scheme
Typography Pair
Icon Set

scope & Deliverables

My work focuses on candid photographs taken on location at events for women’s rights, places where women are owning their space, and fleeting encounters on the streets. My work engulfs the viewer in real moments of strength, vulnerability, and solidarity.

Artist's statement

Optimistic
Youthful
Bold
Contemporary
Editorial

tone

"I Capture the Realness Behind Feminism,
No Filter."

Tagline

Dorothy’s established camera aperture primary logo was kept unchanged. While I was given creative liberty to update the logo color, I felt it looked minimal, clean, and elevated in it’s original black color-way. I kept the logo size small and only displayed it in the header so as not to detract from her stunning photography.

Logos

Montserrat Medium & Bold

ABCDEFGHI
JKLMNOPQR
STUVWXYZ

Lora Medium

ABCDEFGHI
JKLMNOPQR
STUVWXYZ

For Dorothy’s typography pair, legibility and professionalism were important considerations in the selections while also conveying the mood of her work. I went for a headline typeface that is modern, strong, progressive, and stylish - all traits exemplified in her photography. This was complemented by a modernized serif for paragraph text to emulate traditional publications, promote legibility, and stay in line with her personality. 

The clean sophistication of the pair were ultimately engineered to appeal to magazines and galleries.

Typography

hex#: FC5E5E

pop passion

hex#: 000000

black

hex#: ffffff

white

hex#: F7F5F2

porcelain

Dorothy’s color scheme was rooted in black and white, to allow the her photos to color the site. The soft sandy tone for the background adds warmth and optimism while preserving the editorial vibe. The pop of color was carefully selected to add excitement and personality, and tie in to similar bright tones from her images.

Color Palette

Icons & Imagery:  Icons were kept to a minimum so as not to detract from the photos, but to help guide site users to important information in the footer and reduce the amount of text on the page. These were displayed in the fun pop color to attract attention to her contact information. No additional images were sourced for this project other than those provided by Dorothy of her work and her portrait.

Styles: Overall styles for the interface extend the editorial theme by being minimal, with modern accents and clean lines.

Interface Elements

I was hired to help my client, feminist photographer Dorothy DeLong, design her first website and brand identity based on her specifications and project goals.

Previously, her work only lived on a Facebook page. But after an influx of new interest in her work, she wanted an actual portfolio website for galleries and magazines to view her photos and request to use them for exhibits and publications. 

Dorothy’s request was for an original one-page website design comp using her personal photography brand as a foundation. For this design, I curated additional brand elements such as color, icons, and typography and delivered the finished design as developer-ready files. 

Her detailed parameters for the website were to keep it to a single-page for ease of future content updates, and to include sections for her About, Portfolio, and Contact, and a navigation menu of links to each section. 

Her site essentials also include her headshot, artist statement, mission quote, logo and full name, social media links, contact information, and a selection of recent work samples.

Overview

My role for this project was primarily as the website designer, but I also served as the brand designer, building off of Dorothy’s existing personal brand and using her submitted project brief as a guide.

This was a mock client project, so while I didn’t converse with an actual client directly, my class instructors did their best to conduct the project in a way that was as close to a real-life commissioned project as possible.

This was accomplished by providing me with written content in modules and a project brief, and providing real-world feedback through the class Slack channel and through instructor feedback on selected lessons.

In the project client scenario, I was tasked with working directly with the client, and went through one round of iterations based on feedback provided by the “client” (my instructors).

Roles & Responsibilities

For the branding work, I utilized the data gathered from my initial exploration stage in the feminist documentary photographer space to get a feel for the general aesthetic and vibe.  Having clear visibility to the landscape of Dorothy’s industry informed my design process so I could create a unique design that would hit her goals while setting her apart from the competition in an elevated yet relevant way. With intention, I determined a look and feel that would amplify her work and curated new brand elements of color and typography to match; delivering them on an organized Style Tile.

Throughout this stage, I paid close attention to the visual hierarchy of her content while constantly referring back to her primary goals and specifications to inform what was prioritized and ensure those elements were prominently displayed. I took careful consideration for creating a unique layout that would showcase her work in a stylish way while allowing the different page sections to work in tandem.

I mapped out the framework for her site by determining the structure, navigation, and layout. I considered what design pattern would work best for her content while meeting the needs of her target audience. I organized her site content from initial sketches, to low-fidelity digital wireframes, to final high-fidelity designs in Adobe XD. 

To initiate the web design workflow, I conducted research to understand my client’s needs and find creative inspiration, using her project brief. Once I understood my client, her goals, and parameters, I studied her direct competitors and perused the sites she was most inspired by in order to visualize her style preferences. Gathering images onto a mood board was an extra step I took in this project, as I’ve found it’s a useful method to summarize my findings, inform keywords, and get an overview of the bigger picture.

Design Process

The primary problem Dorothy and I were solving was to make sure we addressed the different needs of both parties that would be interested in her work. We wanted to ensure her most recent work was prominently displayed and that her contact information was clear and easy to find for magazines to reach out with specific requests and place orders. We also wanted to showcase her personality and artist’s statement above the fold so galleries and museums would have direct visibility to Dorothy and her mission immediately upon landing on her site.

As for the aesthetics, a problem we needed to address was choosing an attractive and bold layout that would communicate her personal style but allow the photos to be the focus, as is customary for documentary photographers. Dorothy’s site had to be both visually appealing and intuitive for a wide range of magazines and galleries to peruse in lieu of a physical portfolio. The brand colors needed to be enticing but complement her work without distraction because we wanted the stories and themes of the images to stand out and generate excitement to work with Dorothy. Finally, we needed to ensure there were no flaws in the User Experience so the most important information was easy to locate and obtain. 

The most important work was ensuring her top goals were visually met, with the layout and hierarchy of content being key factors. By thoroughly studying design principals to discern the best arrangement of elements, I placed emphasis on her photo and artist statement by placing them in the hero area. I also strategically situated an eye-catching call-to-action contact button in the navigation and repeated a variation of it in the mission statement box.

Additionally, I felt it was imperative to engineer the design to keep her clients focused and in the flow of the site all the way to the footer.

To drive user engagement beyond the hero section, I overlapped her first image slightly on the hero background which helped draw the eye down. I maintained interest with a playful, editorial-style two-column layout of her photography, alternating the photos from left to right down the page. 

I also overlapped the last image to guide users into an organized, contemporary contact section in the footer, which included fun, colorful accents and icons to draw attention to pertinent contact information. 

Overall, the design was engineered with plenty of breathing room around elements, and by organizing images in a compelling way, injecting minimal color pops, keeping low-priority type neat and small, and using bold titles sparingly, I aimed to create visual interest throughout the page without overwhelming the user.

goals

Website

The primary goals of this project were to graduate from Facebook and showcase Dorothy’s photography in a digital portfolio with the aim of enticing magazines to purchase her photos for publication and to gain a wider reach to galleries and museums locally and abroad to get her work shown in exhibits. Her vision to accomplish these goals was to provide a professional setting to display her work online with a clear and easy way for galleries and magazines to extract her name, mission, and contact info from site.

However, my design journey didn't end there. After the first design comp was finalized, Dorothy decided to add more images to the mix, which presented another challenge. I had to go back to the design and revisit the order to ensure that the new images flowed seamlessly with the existing ones.

Since the new images were more recent, I wanted to make sure that at least one of them was placed near the top of the assortment. This required me to consider several factors, including image placement, message, and tone.

In the end, I'm pleased with the resulting layout. By following the best practices for portfolio building engrained in my former career, I was able to create a layout that showcases Dorothy's work effectively. Moreover, the resulting layout lets the visual appeal of the photos create an exciting experience for the user, regardless of the dates of the photos.

The result was a visually appealing layout that creates an exciting experience for the user. 

Relying on my previous design experience as a hiring manager for fashion assistants, and as a creator of my own physical and digital fashion portfolios and thousands of apparel presentations for fashion buyers, I knew the best practice for laying out a collection of work that engages and excites is to lead and end the presentation with one’s strongest work samples. Then, while keeping visual flow in mind, pepper the remaining strong pieces throughout the presentation to keep things interesting.

However, where a physical portfolio book may designate each image to it’s own page, designing a single-page portfolio website requires all images to be displayed together. This posed a challenge to determine the best way to arrange them so that they could each shine on their own without one overpowering the other. 

Leaving my realism aside, I played with the order of her images based on visual appearance and image mood. I placed a strong, exciting image first, alternated the darkest images with brighter or lighter images, and intentionally surrounded the most colorful image with monochromatic choices. I used my own judgement to arrange the selection, keeping the image colors, mood, and message in mind until I found an order that looked the most balanced in the sense of light, dark, and color, and did my best to spread the positivity theme around.

It was my intention to leave her users feeling inspired and excited.

Designing the layout order for Dorothy's featured images presented a unique challenge.

Although all images shared a common theme of feminism in action or moments, they were diverse in coloration, year, and mood. I felt it was essential to ensure that the image hierarchy was sending the right message, given that the look and feel of her images were a mix of positivity, vibrance, drama, strength, and fun.

Although some of her images had dark undertones, Dorothy managed to portray these themes in a strong and inspiring way, and it was crucial that the layout hierarchy complemented her work.

As a detail-oriented realist, I initially felt obligated to place her images in reverse-chronological order. However, I realized that this arrangement lacked balance, as it crowded her most colorful images together and ended the presentation with her darkest, moodiest image, which didn't meet the goal of enticing galleries or museums to feature her work.

Challenges

The resulting project was one stylish, modern site layout that addressed each of Dorothy’s goals, and solved her most important problems, through an intuitive user flow, intentional copy hierarchy, exciting color pops, spacious layout, and an overall positive vibe.

Bold headers introduce the artist and her work, and contrast buttons and icons guide actions to contact her without confusing the user.

Space around elements and thoughtfully-placed visual content separate different sections and ideas, allowing for the photography to be center of attention, and to keep users engaged across the site.
Meanwhile, colors support, communicate, and elevate the content by being mostly neutral and soft, and with the bold hue used sparingly and complementing the photos. Through application of the color scheme to the interface elements along with the curated typography set, Dorothy’s personality and feminist theme is expressed site-wide in a modern, sophisticated way.

Finally, users are supported with accessible colors, engineered layout, and legible typography, so they can peruse the site with ease to find what they need.

Conclusion

work with me

Want to Know More If I'm the Right Fit For Your Mission-Driven Business?

I'd love to schedule a video-chat to get into the details, find out about opportunities in your organization, and answer all your burning questions about my career transition! 

GET IN TOUCH

find me wherever I am:

Based in the New York Tri-State area. 
I work from home most days, but unlock another level of creativity at coffee shops surrounded by other self-motivated creators.

I typically stumble on my best ideas while hiking in nature or exploring a new city.

contact me

about me

Wanna know more?

I love working with mission-driven small businesses to develop an elevated online presence that not only looks great, but is clean, functional, highlights their purpose, and truly feels like their brand.

A modern designer with vision + expertise.

About Angela

top of
page