Distinct is an app for the culturally curious. It is a platform for future makers & creatives to be inspired by their contemporaries on the vanguard of art, design, fashion, food & culture. I designed the first version of the app, help drive the creative team, & collaborated with the development team. I worked closely with the CEO/Founder to define the brand into a simple message.
The wireframe was one level deep to keep the message simple.
The front page was designed to feel like a modern magazine cover with links to all the featured sections with a featured artist as the main story. The content was easily switched out depending on what content was provided each issue, but all were directly accessible from the main page. The CMS was designed to have a custom template for each section, but was easily updated by their writers and contributors. On the editing side, it was similar to a WSYIWIG editor.
A common process I use is to define the art direction is using mood boards. So, a Pinterest board was collected by the creative team. It was a living document that was presented to the client to help drive the art direction. There were great talking points that eventually lead to a desired style and look that would carry the brand and app. The client enjoyed being able to contribute to the design conversation and it helped define the aesthetic quicker.
The color palette was obvious and it fit with the classic modern feel derived from the Pinterest board. Black, white, & gold would hold the brand colors and the app would take on an editorial layout ideally consumed on tablets, but would be designed responsively to desktop and mobile devices as well.
There was a balance of maintaining the newly defined brand as well as the integrity and spirit of the artist. So, I worked with the photographer to get the images right and working for our layout. We were able to visit the artists and creatives in their natural environment. We could then take elements from theirs lives and work and use them in the shoot. During shoots, I was able to film behind the scenes content for our library.This content could be used for upcoming videos and help inform the writers about the featured artists. It was important to maintain the artist's vision through every section and still fit with in our brand guidelines. Below are comps from an early iteration. I wanted to take the grid and use circles as a focus point to draw the user's eye to that content first.
Motion graphics brought the brand to life.
Several UI motion tests were also done to explore the proper animation language to match the brand. A smoother easing in & out helped show the elegance of the brand. A defined fade in transition was defined from my motion studies in After Effects. It was important to define the look of all animation to build the brand.