Noir Joo
Group Project

Noir Joo is a mock fashion brand that combines French and Japanese style for a sophisticated edgy look. A mock website design for the fashion company was created as a proof of concept. Branding, UI Design, and Photography were done completely by the individual talents within the group.

  • Role: UI Designer

    Involved user interface design and graphic design.

  • Software
    • Adobe Illustrator
    • Adobe After Effects
  • Team
    • Nicole Arrieta
    • Julia Gu
    • Maisha Khan
    • Hannah Luc

Brand Guide

I designed this branding guide layout with the color sheme and fonts we decided. We created this brand together from all these individual elements:

  • Name: 
    • Noir (Black & White) with the Japanese word for Queen (Joō). Want to empower women through the royal feel of their clothing.
  • Color Scheme
    • Black and White for a sleek and clean look while the accented dark purple is a royal tone to communicate sophistication. 
  • Fonts
    • Serif for the logo because we wanted to emulate French style and San Serif for the body of the website because it's very readable.
Branding-03.jpg
Concept Development
Low Fidelity Wireframes

I wanted to combine both Japanese and French style within this piece. Japanese graphic design seemed to contain more geometric shapes and repeating patterns while French graphic design looked more organic matched with cursive serif fonts. 

  • IMG_7662.jpg

User Interface Design
Illustrator Mockup

Mockup I designed in Illustrator before adding in our personal photography from the studio photoshoot. I choose elements from all my wireframes and brought them together in order to showcase the clothing, the empowerment for women while wearing the clothing, and a clear direction to the new collection. 

I used our brand guide to determine the colors and fonts in order for the company feel to remain consistant.

WebsiteExample02.jpg

Final Product

FINAL.gif
Reflections

Consistency in branding sets a company up for success. Creating a branding guide and matching the user interface design with that allows the user to understand the goals of the company. Consistent pages, such as the "Home" and "Tops" prevents the user from feeling lost.

Communicating with various designers showed me how others think. A consistent brand helps us all understand the product and communicate efficiently with each other. Learned how to set up mock Illustrator files for animating in After Effects so that future UI graphics can be animated.