I developed the wireframes and designs for Concerto, a piano education platform, by drawing heavily on the needs of my primary personas and the layout of Yamaha Music School's website (yamahamusicschool.ca). Yamaha served as an ideal reference because its central topic directly relates to the piano, and its child-focused classes aligned with my desire for a brightly colored, approachable platform.

​

I was particularly inspired by Yamaha's homepage, with its video background, abundant imagery, icons, and playful backgrounds. This design effectively appeals to a younger demographic while preventing an overwhelming, text-heavy introduction for older beginners. Consequently, I based Concerto's homepage and "Models" page significantly on Yamaha's homepage and "Programs" page. I leveraged elements like banners, flip cards, containers, back-to-top buttons, and video backgrounds to create interactive and enjoyable ways for users to preview Concerto's content and retain newcomers' attention.

​

Similarly, the "Programs" page from Yamaha features square, overlaid images that I adapted for Concerto's "Models" page. These display various piano models and, when hovered over, reveal related information excerpts.

​

Concerto's overall global navigation consists of four main pages: the homepage, "Timeline of the Piano," "Models," and "Genres & Techniques." Despite the original Yamaha site's numerous sections, I focused on piano basics, compressing information into these four core pages. This also avoided content on piano mechanics, which would likely not interest child visitors or average newcomers.

​

Initially, allocating content within the limited number of inner pages posed a challenge, especially in directing readers to information on a specific piano type. This meant all models had to be discussed on a single page. I overcame this by using URI links: "Learn More" buttons for each primary piano type on the homepage direct users to a specific section of the "Models" page. Similar shortcuts were implemented to follow the "Program" page's layout while including all relevant "Models" page information. Although the original's three-square-per-row grid layout is initially followed, detailed text elaborating on each model is located in the page's second half. This is especially mindful of information-seeking beginners like Amelia, providing further information if a particular model piques their interest.

​

To align with the established layout and course teachings, I aimed for a similar amount of largely rendered photographs, minimalist yet straightforward icons, and a consistent colour scheme. While I appreciated Yamaha's violet theme, I sought a palette that maintained a strong impression but better reflected the themes associated with classical instruments. This led to Concerto's primary colours: strong red, coffee brown, and eggshell white, which I can elaborate on later. Although Concerto's creation involved multiple alterations, Yamaha's primary fonts, Roboto and Overpass, were kept intact. While the elegant "Dancing Script" was chosen for the logo, Roboto and Overpass proved far more readable. These fonts appear sophisticated yet subtle, ensuring theme-appropriate typography without sacrificing readability. Additionally, certain facts and concepts are bolded and highlighted in strong red to emphasize their importance to younger readers, making for an easier read and adding necessary colour to longer text blocks.