Dance School 🕺
CHALLENGE
Use the provided elements and design system rules to create 3 landing pages with 3 different visual balances: symmetrical, asymmetrical, and radial.
SKILLS
UI Design, Prototyping, Visual Hierarchy, Figma
Design Guidelines 🗒️
1 .Use a grid to organize and align content.
2. Only use the specified typefaces and sizes. You may experiment with different font weights and apply italics.
3. Stick to the provided palette of colors.
4. Use only the provided copy.
5. Make the CTA (Call to Action) stand out.
6. Make sure color contrast ratio is at least 4.5:1 for test 17 pts and smaller, and 3:1 for text 18 pts and larger.
Symmetrical Design
The symmetrically balanced page took the least amount of time to finalize. Many successful landing pages use a similar layout because it is simple and effective.
I used the darkest colors from the palette to create a background that resembled an abstract mountain (or abyss) for the dancer in the picture to leap over.
I then arranged all of the required elements centrally, leading the user's eye from the top to the bottom of the page, finishing with the outlined CTA button.
Asymmetrical Design
The asymmetrical design required a more complex grid outline. I knew initially that I wanted to balance the page with the image on one side and most of the text on the other. But knowing that, there were still many options and design decisions to make.
I liked the idea of emphasizing "Make The Leap" by placing it over the dynamic image of the dancer. I also ended up giving the text box a diagonal border to converge with the visual line created by the dancer's legs.
Radial Design
The radially balanced page was the most difficult for me to plan. Most landing pages on the web are symmetrically or asymmetrically balanced.
For a radial balance, it felt natural to place the most important element at the center of the page. But what was the most important element? The Heading, CTA, and dancer image all felt equally important.
I knew that I couldn't just place these elements on top of one another so I arranged them all in a circle so that they would feel like one unit, a collective element encompassing the top of the visual hierarchy.
Reflection 🪞
This project was great practice for working within a design system I didn't create myself. Although I felt restricted at the very beginning, I grew more and more inspired as I experimented with various ideas and layouts.
My personal favorite design is the symmetrically balanced page as it is the simplest and most striking. However, I am most proud of the radially balanced design. It took a lot more time to make that layout work and helped me stretch my abilities as a designer.
