Mockup and prototype using a Sketch + Axure Workflow
For this project, I wanted to familiarize myself with Sketch and see how to incorporate what I created using Sketch into an Axure prototype. To start, I needed to understand the components of Sketch and followed a tutorial from SkillThrive. The tutorial was helpful and I modified the design into something that could be used to fill a business need. Every year around convocation, colleges need a nice splash screen to guide traffic to 3 things: convocation live stream, their convocation schedule, and where to park. The tutorial's design had some nice design elements but also had some potential accessibility issues (i.e. 3:1 and 4.5:1 contrast ratios) that I addressed with white panels. Since I was mocking up the University template, I decided to design a potential alternative to the current desktop navbar. Currently the desktop navbar only utilizes a hamburger icon and a flyout nav. Since industry experts have advised against flyout-only navigation on desktop, I decided to design a hybrid nav with key items visible at all times and a flyout nav for additional navigation items.
My mockup in Sketch was complete and I was ready to start prototyping in Axure.
Axure has developed a nice plug-in that allows for Axure-ready copying of Sketch assets. When I first used the plug-in, I went straight for a full Sketch artboard copy and pasted it into Axure. The result was not what I wanted. Many of the image overlays, masks, and edits were not copied over into Axure. It turns out the plug-in works best for scalable graphics and even then still has some drawbacks. Aside from these small drawbacks, the plug-in is extremely helpful in speeding up a design to prototype workflow. Once I had copied over my designs from Sketch I was ready to start adding interactions.
When setting the interactions it became apparent that some of the shapes from Sketch, especially those with different opacity levels would not be translated fully in Axure. For example, if a shape has a 50% percent fill opacity in Sketch, it shows as 100% opacity in Axure even though it is semi-transparent. This will require you to remake the shape when adding mouseover interactions. The goal of this project was to better familiarize myself with both apps, Sketch and Axure and how they can work together. It was a fun project that introduced me to creating designs in Sketch and pulling them into Axure.