Prototyping User Interfaces Using Sketch & InVision

By Chelsea Shaw

Content Models

We recently decided to migrate our current site to a Wagtail CMS along with refining and redesigning some of our current site. As a designer this was a great way to test out some new tools that simplify designing for UI and UX.
For both our existing pages and redesigned ones we started by creating content models. By using content models we are able to focus on the actual content of our site rather than getting hung up on aesthetics. There is never a right way or a wrong way to create a content model, it can take many different forms. Ours was a simple spread sheet, which allowed us to define the element, element type, element description and field name. We can also use content models to refine content, decide of what content is needed and assign a team member to that particular piece of content.

How Sketch And Invision Work Together

We recently discovered Sketch, a tool created for digital and UI design which is perfect to turn our concepts into digital prototypes. We already knew that we would be using Foundation to support the front end development of our site and Sketch enables you to download layout frameworks such as Foundation or Bootstrap directly onto your art board. Once we have created flat prototypes sketch works in sync with Invision, a prototyping app, that allows to turn static designs into interactive prototypes we can use to test the UI and UX. Sketch allows you to export art boards and assets directly to Invision using a plug in called Craft to combine the two. Once we had tested UI and UX, along with user feedback from UsabilityHub, we created hi fidelity wire frames for each aspect of our site to ensure the developers fully understood how the site would look and function.

sketch interface
Design Hand Off

Another feature of Invision, which makes communication with developers much easier and precise is it’s ability to pull out CSS classes directly from your artboard in it’s inspect mode. This allows the designer to export a style sheet directly for the front end developer to work from.

The content models are given to our backend developers for them to create the Django models. This is were the content model element types and defining repeatable content become important and provide our developers with the information they need to create the right field such as rich text or image along with how to structure the stream fields within Wagtail. Using this information are developers were also able to create snippets for the repeatable content.

invision interface

Using HTML we ensured that the content was being displayed in the right order, once this was the case we were able to add styling, in this instance we used Sass and Foundation.

To see more about our design process visit our Playbook!

<< Back to Insights