Cart 0
User Experience • Branding & Identity • Websites

Branding & Identity Design • User Interface Design • Developer Handoff
Collaborator: Jordan Doig, Front End Engineer 


Business Objectives

Design and launch a web app where people can walk through a series of questions to help them select a class for their Dungeons and Dragons character. Use the existing flow and wireframe provided, elevate the look and feel. Identify the best way to handoff assets to the developer in order to ensure seamless scalability to add various features to the project down the line. Provide final design assets and a style guide to the developer for seamless implementation.

 User Interface Design


Style Guide & Developer Handoff

After creating a custom .zip file including @2x PNG assets, fonts, style guide , and reference views, I met with the developer in person to review. We realized we needed a better system for measuring units. Pixels, points, ems? What made the most sense for the project? We decided we needed a more scalable tool for asset handoff, so I did some research and decided to use Zeplin.

First I created a new project in Zeplin. Then I moved to Sketch, where I designed the UI, to optimize the file for importing to Zeplin — I ensured document colors were set, text styles were set, and symbols were created for all components. Next, I moved back to Zeplin and imported my Sketch artboards and symbol library. From there, I optimized everything in Zeplin and invited the developer to join the project. Zeplin made it easy to collaborate and it allowed me to hand off @1x, @2x, and @3x components in PNG, JPG, and SVG seamlessly. It also allowed me to create a style guide and provide reference views all in one location!

Thanks for iterating on these designs with me! And Zeplin is an awesome tool, made my job a lot easier!
— Jordan Doig, Front End Engineer

➪ Denver, Colorado

< Portfolio