Sweat
Project Type
Tools
Platforms
UI Design
Figma
Desktop and Mobile
Sweat is a design project inspired by my love of dance, creativity and community building. I created a homepage for a local dance studio that focuses on conveying themes of modernity, creativity and authenticity through text and visual design.
Building the Brand
The first step of the ideation process for Sweat was creating a creative brief that outlined the project mission, the prospective audience, our unique value proposition and a list of competitors that I would later study in a competitive audit.
Here, a brand personality grid was created to zero in on how Sweat would be conveyed to its audience. My biggest inspiration for the branding of Sweat were companies like Spotify and Equinox, both of whose branding feels modern, sleek and cool.
During the ideation process, I created the persona of "Ellie" who represents our target user type in our key demo. A young, outgoing professional looking to express her creativity, grow her dance skills and foster a new community for herself after a recent move across the country.
Layouts, Wireframing and Imagery
Once the brand identity was more established, I created layouts of what the home page would look like, including sections for the hero image, features, benefits and social proof.
I wanted to prioritize large, dynamic imagery and eye-catching color and design choices to capture users with an interest in creativity and self-expression.
After crafting a brand identity and a basic wireframe for the layout, I worked on collecting imagery for the brand. Through my images, I wanted to convey a sense of freedom, joy and accomplishment for potential users. The eventual hero image for the home page, a man performing a dynamic dance move in front of his newly found family of dancers, represented the ethos of the brand: Learning dance in a community that celebrates what you bring to the floor.
Before
After
Since the images were sourced from different places, I worked to adjust the exposure, contrast and brightness of each of them so they would have a shared visual identity. For all images, I aimed for a desaturated look.
Typography
and Typescale
For the typography of the project, I experimented with a number of text styles and at a point, I thought of mixing serif and sans-serif fonts for title and body text, but eventually I decided to use the text style "Inter" throughout, as I wanted to keep the typography simple, while leaving much of the visual expression to the imagery and color. "Inter" is a very readable and simple sans-serif font that I believe works well with the rest of the website design.
I also decided here to make lower case text a defining visual motif throughout the home page in the interest of crafting a unique brand identity.
​
The image to the left shows some experimentation used for the eventual text used in the Hero section of the final homepage.
For the type scale, I wanted to create big, eye-catching headings that would play well with the planned size of the imagery, so I settled with a larger scale that would make headline text really pop.
Color
For color, I drew inspiration once again from sites like Spotify and Equinox, and wanted to primarily use a dark theme. I eventually settled on a dark grey background color with a cream color for text as I thought it added warmth and visual interest
For highlight colors, I chose a bright blue for call to action buttons and used its complimentary orange color as a secondary highlight color.
Later in the design process, I decided to use a darker shade of the previously mentioned bright blue highlight color as an additional primary color when I felt the design needed some additional color to tie everything together.
To the right is an early mock-up of some of the visual design ideas I had been playing with during the ideation process, including an early study with color and text style choices.
Early Iterations
Here are some images from early iterations of the site. After constructing this iteration, I felt that refinement was needed in the logo design, color choices and text placement to make each element more visually stimulating.
To the left is an early example of the eventual features section of the homepage. I wanted to make each section of the site feel unique but still a part of a larger whole so I thought of ways to make each section visually distinct while still sharing strong visual themes with each other.
Final Design
Below are screenshots of the final designs for the Sweat landing page. Between this and earlier iterations, changes were made to unify the design between sections, including adding color gradients over certain sections so that they faded into others more organically.
Mobile Designs
Here is a mockup of the Sweat landing page for mobile. Here, I wanted to transfer all of the functionality from the desktop site, while adhering to mobile design conventions and best practices. Elements on the desktop page have been restricrted to one column for better UX on mobile devices and the page’s menu has now been placed inside a hamburger icon.
