Dorothy DeLong Portfolio
Tools: Adobe XD
A UI/Visual Design project focused on designing a portfolio site for an up and coming photographer.
THE PROJECT
Dorothy has been using a Facebook page to share all her photos. Now that she’s becoming more noticed, Dorothy wants a portfolio website so that galleries and magazines can see her work and request to use it.
Dorothy’s goals for her new site are:
​
-
It should entice magazines to purchase her photos for publication. Up until now, she hasn’t had a good place to showcase her work when magazines ask for a portfolio.
-
It should help get her work shown in museums, both locally and abroad. Up to now, she has had to put together a physical portfolio for museums interested in her work—a great portfolio site would allow her work to be shown much more widely!
Dorothy’s site must fit the following parameters:
​
-
The site is one page since she doesn’t want a ton of content to update
-
The site must include:
-
An artist’s statement, which will help visitors of the site learn more about Dorothy
-
A photo or headshot of Dorothy
-
A quote about her mission
-
Site navigation that will link to each content section
-
Her logo and full name
-
Four samples of her photography work - she wants to start small and potentially add more at a later date
-
Contact information
-
Social media links
-
MY ROLE
For this project, my role was the Lead UI Designer.
For my role as the Lead UI Designer of this project, I was responsible for all wireframing and designing of the client's portfolio site.
BREAKING DOWN THE PROCESS
My process for designing the client's portfolio site consisted of sketching snd creating the wireframes and designing the final design comp of the site using Adobe XD.
​I began the designing process by sketching the layout of the website to decide on what the structure of the site content should be to best accomplish the client's goals.
Once the structure was decided, I created a paper and then digital wireframe of the site​ to refine the decided layout of the site. I used a 12 column grid for this design. Next, I created a style tile to layout the color scheme and font choices for the design. When that was completed, I began adding visual elements to create the final web design comp before handing off the files to developers.​
Site Layout Sketch
Paper Wireframe
Digital Lo-fi Wireframes
After the initial wireframe, I remembered the client's goals, in wanting to be able to add more photos and for their photos to be easily viewed. So, I revised the layout of the photos in the wireframe.
Style Tile
Final Design Comp
TITLE OF THE CALLOUT BLOCK
LESSONS LEARNED
This project definitely taught me lessons and expanded my knowledge about UI/visual design.
One of the main lessons I learned from this project was to not try to reinvent the wheel and that simplicity is key. I learned this specifically when it came to how I designed the photo layout for the portfolio. The first idea I had initially chosen was designed with mainly uniqueness in mind. However, I realized that I was trying to execute an idea that was too complex and because of that, I had started to lose sight of the client's goals for the site. When I came to that realization, I revised the layout of the site. This helped me to realize that I could create a design that was not boring, while also accomplishing the client's goals.
​
This project also taught me how to execute good design while staying within gridlines​. My initial design was also tough to smoothly execute while staying in the gridlines.