This slideshow requires JavaScript.

After I completed the sketches and working out the interactions I then went to Adobe XD to mark out the layout I wanted for the interface uses minimal images and designs so I could re-organise or make adjustments when needed.

This slideshow requires JavaScript.

After I had settled on the format I started inserting images that I would use and fleshing out some the information text and descriptions.

Web 1920 – 3Reference


I then went to develop the look testing how I wanted the “message boxes” to look like and the surrounding layout and design moving it away from being a wire-frame into a designed and stylised interface.


This slideshow requires JavaScript.

After finalising the aesthetic I could then apply the style to the other slides in the wire-frame and inserting more context and make it seem like a real tangible interface for someone to go through. Furthermore, I could then work on the smaller aesthetic details or interactions such as I trailed with different areas for a “further details” button and how I wanted that to look like. Ultimately I shifted it to a “glossary” button to serve as a quick look-up for those uses the interface.


Shown below is one of the process variants of how the user maneuvers to the screen shown above.

This slideshow requires JavaScript.

Full Adobe XD “layout” of all the slides.


Start of XD Prototype.

If I could develop this further I would want to move this out of XD onto its own website with it further developed with animations and sound.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s