Hitomi UI
This project was the result of a Figma class I took on Skillshare. I wanted to gain a greater understanding of Figma, given its ubiquity in the industry, and dive deeper into UI along the way. I used a brief generator to create a project, and it assigned me a responsive e-commerce site for a camera company. The class focused on a four-step purchase flow.
My target demographic was men in their 30s looking for a premium product. I called the company Hitomi, which is Japanese for pupils. I like the double meaning of both vision and study since both are required for a beautiful composition. I went with a black-and-white color palette because it spoke to the beauty and contrast of black-and-white photography. I created custom icons and styled my buttons and form fields with an angular style that spoke to the technical nature of the product and the frames used in photography. Last but not least, I added a camera animation for the confirmation screen. This project taught me what is possible with Figma and what the limitations are. My next step would be to explore prototyping tools such as ProtoPie, and bring custom micro-interactions to life.
Desktop Prototype: https://tinyurl.com/4v6jd5ft
Mobile Prototype: https://tinyurl.com/2p8b7e6z
Mobile Prototype
Desktop Prototype
Brief
Mobile Wireframe
Style Guide
Moodboard
Components
Mobile Hi Fi
Desktop Hi Fi