Type: Visual design, and Website design
Tools: Adobe XD/ Photoshop / HiFi Wireframing / Prototyping/ HTML, CSS, Flexbox, Grids
Project Scope
HiFi Wireframe and a single-page portfolio Web Design for a photographer
I was reached out to by feminist photographer Dorothy DeLong to create a professional web design for her photography portfolio which would help her expand herself online and get contacted by magazines and museums to feature her work and hire her for future events.
The Project's Goals
Dorothy Delong is a very talented photographer who attends several national and international events showcasing women's power in a very unique and candid style focused on feminism. She originally was only using a Facebook page to share her work, however, as she has been becoming more popular and in demand, she needed a more professional platform to share with galleries and magazines and increase her exposure.
I have created a one-page website design to showcase her work and add new more photos as her portfolio continues to grow. It includes her artist’s statement, a photo of herself, an image gallery, and a contact section for interested parties to get in touch with her.
The Design Process
Design Research
After a meeting with Dorothy Delong, we established her goals as well as provided me with her logo, photography files, artist’s statement, quote, and any social media that she currently uses.
Wireframe Sketch
I drew a sketch of the website on paper to visualize the layout. I decided to use a simple header with her logo, name, and navigation links. Below it, on a placeholder, I used one of her favorite and eye-catching images as well as a quote as an intro. Then her image gallery showcases her work. The following is the About section, which includes a photograph of herself and Dorothy’s artist’s statement. Finally, I have added a Contact section with her social media and contact information.
Digital Wireframe
I have handcrafted in AdobeXD a digital wireframe with Dorothy’s goals in mind to visualize the layout. Adding text only, as well as using placeholders for images helps me have an idea of the amount of spacing each section would need. Since this is a basic design, no colors and pictures are added until further processing.
Low Fidelity Comp
After my first revision with my client, she asked me to add 2 more pictures to her portfolio. I suggested putting the About section below the hero image as an introduction so that the users would know what the website is about, and continue browsing to the next section, her portfolio gallery.
Color Scheme and Typography
Since we are talking about a very special woman who represents amazing women in the world through her photographic work, for her color scheme, I selected colors that would match her modern, feminist style. I chose to use a bold vibrant color for her main brand color, like magenta, and to contrast a plum purple and a light silver for an accomplished and skillful look.
I selected the Magenta pink in the palette: #f900e7 as her main brand color, which I helped incorporated into the design logo to fit in with the overall color scheme. I also chose Elsie which is a display font that adds a touch of uniqueness, wildness, curiosity, and artistic soul to her brand. Dorothy Delong’s name is placed beside her logo in Elsie font as her page title. The body text font is Prompt, to give it a more edgy and clean look.
Revision 2
In this step, I have added colors and typography so that we are able to see better the content together.
Hi-Fidelity Comp
I have finally added the images and logo that Dorothy provided me. The social media icons match the color of her logo so that the users can recognize her brand, follow and get in touch with her to hire her.
Final Design
Takeaways
While designing Dorothy’s website on AdobeXD, I wanted to make sure that her sections looked defined and organized with plenty of white space fitting all the content on a single page, emphasizing her beautiful image gallery which I showed her how she can update as her portfolio grows.
Conclusion
I delivered Dorothy Delong Photography a beautiful one-page website that she can use to showcase her work on a more professional platform across different social media and online. Having a website is now helping her be more established and professional which will help her attract magazines and museums to hire her or exhibit her work. She has also decided to hire me to code up her website and maintain it as she was very pleased with my skills.