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
sui desktop mockup sui 3 phones mockup
sui comes from 'suigeneris' which means unique in latin

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.

sui article page on a macbook

Style Tile

visual direction and elements for Sui

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.

user personas that detail the target users

Wireframes: Desktop

desktop layout wireframes

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.

wireframes of the mobile pages for the Sui site

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.