Sui
DIGITAL FASHION PUBLICATION
For this project, the task was to develop a responsive digital publication based on an existing or personally-created brand. A home page, category page, and article page were required to be designed for desktop and mobile.
UI/UX Branding


Brand Concept
I've always loved fashion, but it often felt exclusionary and reseved for people already "in-the-know." As a result, I decided to develop a brand that I believe is missing in the market; one that provides the latest, exclusive news in fashion without the air of privilege and stuffiness that often encompasses the industry. The visual direction for Sui takes a bold stance while still maintaining a sleek and elevated look and feel.
Project Goals
With this project, I prioritized developing a clean, engaging UI that is easily navigable and encourages users to subscribe to the publication. I knew the importance of effective, cohesive photo selection and focusing on imagery throughout the site, as this is a key part of fashion and expected content for the subject.

Style Tile

User Personas
Through market research and personal stories related to fashion interest and information accessibility, I developed three user personas that represent distinct user segments that Sui targets.

Wireframes: Desktop

Protoype Walkthrough: Desktop
Wireframes: Mobile
The first three wireframes represent the "Streetwear" category page, the fourth wireframe is the article page, and the last three represent the home page.

Protoype Walkthrough: Mobile
Challenges
With this project, I learned the importance of exercising restraint. The main focus of digital publications is on the articles and their information, and my primary goal was to create a clean layout that doesn't distract from the message on the page. At times, I found myself spending too much time experimenting with visual elements, but using a limited color palette and singular typeface helped me focus on simplicity.