Have you ever wondered about how websites were made? I mean without using WordPress. No? Well, neither have I. But as part of my summer placement at the music tech company PhonicScore GmbH in Vienna, Austria, I was able to explore the exciting world of Adobe XD and teach myself how to make an interactive prototype of a website!

Prototypes 101

Let’s start from the very beginning. If you were an architect, you are not just going to erect a building without having the blueprint for it at first, right? So, that is basically what Adobe XD is for. Before software developers start coding to build a webpage, they need a basic layout of what the page is supposed to look like. This is where I came into play. I was given the (kind of scary) task to design a very basic layout of a website that will be used and developed for musicians, so that they can generate sheet music to practice their sight reading.

Building the prototype

*** Short disclaimer: my first language is German, so my desktop and the app is set to German too ***

You usually start with a blank canvas, which is called an artboard, like this:

Since the purpose of the site is to generate sight reading exercises, there should be a field in which the final notes should be displayed. To simulate this, I have put a grey box onto the artboard.

In order to generate the practice sheets, users will need something to put in what notes, intervals and even articulations they want. To achieve this, we came up with a very basic user interface with buttons, dropdowns and boxes for the users to tick.

There are many templates you can find online which can be used for the buttons and dropdowns to make this process even easier. For this specific project, I used a free UI kit called “Material Design”. After adding a few more sections to put in information, the website prototype started to gain some shape. I also added the top and bottom bars of a desktop to make it look more realistic.

Once I was happy with the layout of the interface on the main page, it was time to create the pages that the users see when clicking on the dropdowns and buttons. This is where it got a little more intricate since I had to take into account every click that the user could possibly do. So basically, for every click that is made, a new artboard has to be made as a “result” page. Below you can see some of the artboards I made, each one a little different from the other.

Why Adobe XD is so much fun

Now to the actual prototyping. Adobe XD has this really cool feature where it essentially lets you connect artboards so that when you go to the prototype-mode, you can click through the buttons as if it were a real website. This is to help software developers understand what the design team wants the website to do. In this case, you can put in how many measures you want, what your tone range will be, which intervals you want to practice and so on. Finally, the user will click on the “Create Practice” button to generate sheet music, which can then be saved or printed. This is what these connections look like:

The Final Result

As I said in the beginning, this prototype is still quite basic, but it fulfils its duties very efficiently. I am proud to say that the developers at Phonic Score are currently building the website on the basis of this prototype and I will be uploading a link to it once it is up and running in its full functionality. I am very excited to see the final result and happy with the way it turned out. Watch the short video below to see the fully working prototype I created on Adobe XD. Thank you for reading my post and now go out and learn something new!