Visual Strategy
Design Thinking
substantive material.
UX / UI Design I Development
Quincey Xavier is a prolific writer, poet, activist, and brand strategist based in Washington D.C.  Working with Eulie Creative, we are building a digital library of his content and the content he curates as well as a home base for his consulting services.
Assignment
Create the foundational landing page for Quincey Xavier writings and newsletters.
Objective
Capture Quincey’s tone and avant-garde approach to communicating philosophy and personal well being that will resonate with his audience
Project Includes
•Discovery
•Design Ideation
•Interactive Design
•Design Presentation
•Development
•Iterations
Timeline
6 weeks
Assignment
Create the foundational landing page for Quincey Xavier writings and newsletters.
Objective
Capture Quincey’s tone and avant-garde approach to communicating philosophy and personal wellbeing that will resonate with his audience
Project Includes
•Discovery
•Design Ideation
•Interactive Design
•Design Presentation
•Development
•Iterations
Timeline
6 weeks
Substantive Material hero section website screenshot
Interactions to draw attention and keep things simple.
In essence this was a landing page meant to intrigue. Quincey offered consistent intrigue on his social feeds to his users and that’s something I wanted to make sure converted to his landing page.

It was also important that we kept the attention on his words.  Few distractions.  We set up the pages in much the same way you would find paintings arranged in an art gallery.  Significant negative space.

As the page moves we fade out older text and transition to new colors to draw you into the next section.

Substantive Material "what is this project" website screenshot
Substantive Material contact section website screenshot
Substantive Material newsletter signup section website screenshot
Phase Three: Design & Implementation
We work with Quincey to develop designs that fit with his personality, work, and communication style.
1. Information
Architecture
Nail down information priorities overall informations structure.
Rebloom learn more section Screen Shot
2. Wire Frames
Build scaffolding to support the informational architecture.
3. Building Digital
Asset Library
This includes graphics, photos, quotes, testimonials, and other assets that would be used to communicate as tightly as possible.
4. Mockups
Fill out  wireframes for a complete look at what to expect for delivered product.
5. Development
Move this concept from
paper to the web.
Substantive Material website mockup screenshotSubstantive Material website wireframe screenshot
Design: From
Wire Frames
to Mockups
A Simplified, Readable, & Beautiful Mobile Experience
I went through each div block one by one to resize all the modules for the most attractive and readable mobile experience possible.  This means all content, such as video, photography, and icongraphy, were carefully resized to meet this goal.
A seemlessly flexible site was paramount to meeting our project goals.
Thank you for reading!
Eulie Creative
Menu button