I have designed an online portfolio for a mock client named Tina Morrison, a makeup artist who wishes to display her skills to potential employers and clients. From smartphones to tablets to desktop computers, employers are able to view Tina's makeup artistry skills without hassle. I designed the low-fidelity wireframes before proceeding to the creation of the high-fidelity wireframes and the prototypes.
This is Tina Morrison who is a Makeup Artist who lives in Manhattan, New York City. She is a 22 year old single woman who lives in a one-bedroom/one-bathroom luxury apartment with her pet yorkie. She already has a small clientele, but wants to expand by working in fashion shows and photoshoots. She needs a strong online portfolio to showcase her skills. Her makeup style is artsy and elaborate. Because of this, she has difficulty gaining ordinary clients. She aims to work for celebrities and runway models. To gain extra income, she works as a Makeup Artist at MAC Cosmetics.
Brainstorming
Before starting any design, I identify any pain points Tina has and come up with solutions. Her main concern is being able to showcase her makeup artistry skills with ease. Tina could use social media, but she is always on the go so she needs to easily share her abilities on a large platform that isn't heavily saturated.
Early Stage of Designing
Once I have identified the requirements of Tina's portfolio, I find appropriate solutions and begin sketching the structure immediately after. I keep in mind the placement of each element and make sure they're easily accessible so that those who do visit her portfolio are able to access necessary information and view her work with little to no difficulties. To view all the sketches, please click here.
Low-Fidelity Wireframe
Once I have sketched the layout of Tina's portfolio, I begin creating the low-fidelity wireframe based on the sketches made. It's common for me to make adjustments in the sketches as well as the wireframes in order to make the design as accessible as possible. Figma is the tool that I used for this project.
I'm aware that employers and clients would use multiple devices to access her portfolio. I made low-fidelity wireframes for smartphones, tablets, and desktop computers.
High-Fidelity Wireframe
After understanding that Tina needs a portfolio that not only shows her skills on a large platform, but properly promotes her brand, I start adding colors to each page of her portfolio. I learned more about her brand as I continued with the design process of her portfolio. She's an artist who uses vibrant colors to express herself and it constantly shows in her work.
Just as I have done for the low-fidelity wireframes, I made high-fidelity wireframes for smartphones, tablets, and desktop computers.
Prototyping
I made adjustments before reaching the final stage, which is prototyping. Once I created the prototype, I tested it so that I can remove any errors that emerge. Labeling each element finalizes the entire project since it will make the development process easier. I made prototypes for smartphones, tablets, and desktop computers.
