Ballet School UI Design (Webpage layout)

I’ve always wanted to create the interface of a website — last time I tried to create the welcome pages of an app, and this time I gave website a shot. Have been inspired by the gym websites all around, I decided to mock up a ballet school’s website, which not only includes ballet courses, but also consultation/events on nutrition and well-being service.

Photo by Kelly Sikkema on Unsplash

Idea initiation

I didn’t plan too much for this prototype, but when I dug into it, I realized that it demanded much more than what I had thought. Some basic design principles I’ve followed are:

  • Color theme

Well, when I first had this idea to create a sample website for a dancing school, l couldn’t help myself but think about pink (I’m not biased… sorry not sorry). However, later on I decided that I wanted a low-key but elegant look, which led me to choose the grey scheme.

The final color palette I went for
  • Thematic color combo

Maximum 3 throughout the whole theme. I could have done 2 (added another layer of grey), but that would be the max # I go. For this design, I used #333333 (a layer brighter than the #000000 black), #C8C8C8 (second layer darker than pure white, towards grey-ish), and #F2F2F2 (one layer darker than pure white, towards grey-ish). All of these are the default colors shared in InVision.

  • Size

I went after Web Medium (1200 * 800) to test out the solution. Again a choice by default. When I tried to upload my portfolio onto Dribbble, it actually told me the solution was too low — good to try the larger dimension next time. Yet it worked out well as a standard screen canvas.

  • Picture selection

I had the focus of simply selecting photos connected to “ballet”, with a sense of elegance and dynamism — otherwise, the minimum requirement was to follow a similar color pattern with the theme. Nothing too colorful because my base was light and dark grey, so in general I tried to keep it at a not too dim but not depressing theme.

I also positioned this as a whole female-focus experience. Fully acknowledging the gentlemen who are passionate about ballet out there, but just think the position will be easier to mock up on a short turnaround.

  • Font

I chose Niagara Engraved and Niagara Solid for this design.

The description from Microsoft Typography on Niagara (a great source to gain insights into the fonts!) attracted my eyes. “While not a revival in the strictest sense of the word, Niagara recalls the crisp, elegant geometry found in some of the best American styles from the thirties and forties”. Bang! It matched my expectations. However, the thumbnails and previews didn’t seem to highlight the beauty of this typography. In reality, it hurt my eyes when I tried to look a bit closer…

  • Font size

Title: 60

Main body: 25/30

Logo: 15

Again, when not seeing them full-screen, I hurt my eyes when looking at them… visibility needes to be prioritized next time.

  • Alignment

I’m a fan of having big pictures taking over the majority of the canvas. So in this version of the design, I set up a cleaner layout that mostly aligns left and right (with the help of Grid views). Still some inconsistencies here and there for the exact measurement on the blocks and the pictures. Next time I shall follow the golden rule more strictly.

Welcome Page
Home
Classes
Workshop
Events Page — layer lead
Instructors Page
Should probably open this business in Singapore, haha

*All pictures are stock pics and/or found from Google Open Source. If anything violates your privacy setting, please let me know and I will delete at my most convenience.

My takeaway from this exercise

  • Consistency is key

This has been mentioned way too often by all the designers out there, and whilst I was practicing making this layout, I felt the challenge. When you really put yourself out there for all the details hitting, it can lose track sometimes.

This time, I broke down the consistency into font, color, and picture. For the font, it has size, position, color, alignment; color has alignment; pictures need to follow certain thematic layouts, position, and fall into the theme without too much color clashes… Maybe a well-planned approach will make it easier. The truth stands that a good designer should have quite some patience :)

  • Copywriting is actually a hard work

Each design tells a holistic story. In order to make this story shine through and show your creativity behind, a designer has to compose everything from scratch. When building a website, I had to think about what to include there. What are the information I try to deliver? What do my potential customers want to see? What pieces of content are eyecatching?

After selecting the pictures, I have to work out how to put each one on the right page to convey the information. What is a ballet dancer in the sunset conveying to the audience? A sense of freedom? Or simply just elegance and nothing else? It should potentially go well with the information I have on the page too. Maybe it could indicate something positive, something new, coming up? Therefore, utilizing the power of words to create compelling and holistic pages become important. To do the copywriting that goes along well with the general message and with the individual/multiple pictures on the page can be challenging and would require even more time to plan and execute. Although this is not a designer’s job usually, it’s a crucial skill to develop for quick mockups and MVPs — at least to provide inspiration.

  • Build a bridge between content creation and visualization

It might not be a universal problem (yes, I’m looking at myself) but it’s a very important skill to build. I often have a lot of ideas, but somehow lack the ability to visualize them.

Each design I do is like to deliver useful information whilst having a lean design that suits the message. Based on the big picture, I put small details out. What shapes to use? What division and layout to better convey my message? What are the good, should, and must knows? Also, hard skill to build but the basic drawing and animation skills are important. Get a good hang of the common software such as Invision, Sketch, PS, AE, ID, and really get the foundations right (aka. how to scratch something out) really require practice and being creative, open-minded to things.

Photo by Serafima Lazarenko on Unsplash

Now after all of the analysis of my own design (which when I look back in some time will look crap, for sure), I will do a quick comparison and analysis from a user’s point of view on some of the leading recipes/cooking apps out there.

Much appreciated that you are here! Please feel free to comment/give me feedback on my design and approaches!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store