Andrew Martin - Instructional Designer

Scales Are Easy

A fully featured website and accompanying eBook

This website provides resources and thoughtful curriculum for teaching scales on the piano.

Audience: Beginner musicians and music teachers

Responsibilities: Instructional Design, Web Design, eLearning Development, Curriculum Design, Graphic Design, Typesetting

Tools Used: HTML, Tailwind CSS, Javascript, GIMP, Figma, Visual Studio Code, Google Docs

Problem & Solution

I was a full-time music instructor when the COVID-19 pandemic began. I swiftly pivoted to teaching 45 students per week remotely over Zoom. I decided to make a music theory resource for my students and colleagues to use — especially so that I didn't have to repeat foundational lessons 45 times each week!

I synthesized my thoughts on scale pedagogy for the piano in an eBook, and then created a responsive website for all screen sizes. These resources are intended to be a step-by-step guide for the beginner pianist practicing scales. They contain essential exercises and information that will help all students of music to mature their understanding of the piano and advance their technical performance.

Process

First, I considered which parts of a general music curriculum were most universal — and therefore the most repetitive. I also reflected on the pros and cons of current available teaching materials and methodologies. I decided to create a resource dedicated to teaching scales on the piano.

Next, I outlined how I teach scales during in-person lessons. I organized all of the most useful information into clearly ordered sections. These sections mirror the structure of how I teach the same concepts as an instructor.

I used Google Docs to flesh out all of the content in each section, as well as typeset and draft a basic visual layout. I created supporting visuals in GIMP that correspond with each concept and lesson. After finishing the content, I used Calibre to convert my work into various eBook formats.

I used Figma to mock up a planned website layout featuring the content and images from the eBook. Finally, I used HTML, CSS and Javascript to convert all content into a website.

eBook Authoring: Google Docs, Calibre

I created the draft of the Scales Are Easy eBook in Google Docs. This process was fairly straightforward and mostly involved typesetting, content writing, and editing.

During this period I began experimenting with using the pages and materials during lessons as an instructor. I also sent copies to colleagues and friends, as well as to new students.

I received and implemented a lot of valuable feedback. For example, a background color that looks great on a screen uses unnecessary ink when printed out on paper.

After finalizing a set of resources I was happy with, I used Calibre to convert my work into various eBook formats for distribution.

Visual Design: Figma, GIMP

I used GIMP to manipulate various assets and to create custom visuals for the project. I opted for a sleek duotone color scheme — in reference to the duotone black and white of both sheet music and piano keys. Important information is highlighted with one of two custom colors. Everything else is rendered with shades of black and white.

Color Scheme

Title Font: Old Standard TT

SCALES
ARE EASY

Intro Visual Asset

Scale Visual Asset

Before beginning web development, I laid out some wireframes and user flows in Figma. I was especially inspired by other design-focused knowledge repositories like Dash Dash, Laws of UX, and Web Field Manual.

Figma Wireframes:

Web Development: HTML, Tailwind CSS, Javascript

I designed each page to be accessible, easy to navigate, and visually engaging. Bold, contrasting colors are used to highlight important information. Each page features a navigation footer that leads the user to the next chapter in the curriculum.

I used Tailwind CSS (with some customized additions) to ensure the website remains dynamic, operable and legible regardless of device type, screen size, or chosen browser. All links and other user-driven clickable events are clear and interactive.

Features

  • Progressive Curriculum: Six step-by-step units clearly outline the information necessary for a beginner to study musical scales on the piano. The curriculum is designed for ease of use on behalf of the student and teacher.
  • Downloadable eBook: For learners who want to access or print the scale book without an internet connection.
  • Custom Visuals: Each unit is illustrated with an inviting duotone color palette that clearly highlights useful information. These colors expand traditional paper and ink formats of scale books by emphasizing the visual aspect of playing an instrument, as well as create a smooth user experience.
  • Responsive Design: Each page is programmed to be rendered dynamically based on screen size. To achieve this, I used Tailwind CSS to generate media screen size queries that alter the display of elements. In addition, I created clear hover events that succinctly clarify site navigation.

Reflection

The process of creating the Scales Are Easy resources provided me with several key takeaways:

  • Future Methods: I believe the future of instructional design will resemble the intersection between user experience design, web development, and product design. There is true power in giving an end user agency in sourcing their information, and in sculpting their learning journey to be as similar and enjoyable as their own normal web browsing habits.
  • Iterate & Grow: This project began as handouts and resources for me to use while teaching remote music lessons, but ultimately grew into an organized knowledge repository for a much larger audience. I enjoy being able to offer tools for growth that scale up along with the audience.
  • User Experience (UX): It's too easy to be more interested in screens than in the world around us — luckily, that works in my favor for this project. I designed each element to be user-friendly and feature clear navigation and accented colors. I believe in designing learning resources to be visually appealing — otherwise they will be easily ignored or replaced. Although I enjoy my vintage piano books, my students are more engaged with interactive digital tools.
  • Code: I really enjoyed creating my own dynamic cascading style sheets (CSS) and HTML markup during the web design portion of this project. Coding CSS inline with a framework like Tailwind was a simple choice. I prefer Tailwind to other frameworks because it is not highly opinionated and isn't affiliated with massive social media companies like Twitter, (Bootstrap) Facebook, (React) or Google (Angular). I decided against creating a single page application (SPA) for this project — instead opting to treat each page as a different chapter or section, with clear navigation between pages available in the header and footer.

As an instructional designer, I had a great time bringing my own methodology and curriculum for a subject I'm passionate about to life in different formats. I look forward to hearing from other teachers and learners that use it on their musical journey.

Check out another project:

Gluten-Free Food Preparation

Articulate Storyline 360, Figma, GIMP

Let's make an impact.

Hire me to build your next effective learning experience.

Click to copy my email address.