Prototyping User Interfaces Using Sketch & InVision

Chelsea Shaw

We recently decided to migrate our current site to Wagtail CMS. Improving it along the way. As a designer this was a great way to test out some new tools that simplify designing for UI and UX. We decided to trial Sketch & InVision.

Content Models

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.

Using Sketch and InVision to Tell a Story

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 with Sketch, we use Invision to turn the static designs into interactive prototypes. Having a prototype this quickly allows us to test and refine the UI and UX of the site without committing too much resource. Sketch allows you to export art boards and assets directly to InVision using a plugin called Craft. Once we had tested UI and UX, along with user feedback from areas like UsabilityHub, we created hi-fidelity wire frames for each aspect of our site. This let us ensure that the developers fully understood how the site would look and function across multiple devices.

vixdigital-sketch.jpg

Design Hand Off

InVision makes communication with developers much easier and precise. One of the features that helps significantly is the ability to export CSS classes directly from your art board using the inspect mode. This allows a designer to share a style sheet directly with front end developer, so that they have a base to work from. Perfect when you have a multi-disciplinary team who have design and front-end skillsets.

vixdigital-invision.jpg

The content models are given to our backend developers for them to create the database schemas, in our case 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 along with how to structure the stream fields within Wagtail. Using this information, developers were also able to create snippets for the repeatable content and keep the application DRY.

Related Articles

Back to Technology