It’s all a matter of using the building blocks we made in the template. This takes next to no time and the best thing is none of these elements need to be custom designed for the interface. Later on we will add this to an InVision project where we can get feedback from colleagues and test the flow by sending out a link to users testing the new interface. Now let’s populate the dummy page with a form that links through to a confirmation page. Then add the footer to finish setting up the blank page. Voila! Dummy Page Now I’m ready to start adding our building blocks.
Together this means that I can start with a clean slate and still have quick access to all the assets I need. I use Font Book to quickly copy any icons for use in the mockup. The symbols created previously will still be accessible since they are embedded in the template. To begin a new mockup I first remove all the artboards. Once I had all icons, major UI elements and typography prepared we were ready to start mocking things up.Ĭreating a new file using the Envato Market Style Guide template gives us all of the artboards, symbols, icon fonts and typographic styles that we created. Now we’re ready to rock ‘n’ roll! Rock ‘n’ Roll With the Template When we’re all done, we save by going File > Save as Template. We have 17 different typographic variations, so each one was turned into a text style within Sketch.ĭo do this add a text box and style the text using options in the sidebar: The last piece of the puzzle was the typography.
The result of this laborious work was the creation of 89 symbols in total. I repeated this process for each type of major UI element we currently have catalogued in the style guide. The names happen to coincide with the classes used in the actual build, but it’s up to you how you approach this: Each element was added to its own artboard and subsequently saved as a symbol: Next I hand-made all the different UI elements. Copy each glyph and add them to an artboard in Sketch. “Repertoire view” ( ⌘ + 2) needs to be active in order to see all the available glyphs. The best way to approach this is to open the font in Font Book. I started by adding all our icon fonts: Considering we had an icon font that we wanted to use in our Sketch designs, first the icon font needed to be installed: Step one in my case was to create the template mimicking our style guide. However, all techniques discussed will be applicable to your own situation. Creating the Sketch Templateĭuring the course of this tutorial I’ll be using my own experiences with Envato Market to demonstrate the process. A template with all the Lego pieces already in there, ready to be built. What we need is an easy way to create a clickable prototype using our UI library. On Envato Market we already have an established visual look and we’re working on a style guide to collate all our UI elements. Starting from scratch every time you mock up a design is a waste of time, especially when building on top of an existing product.
0 kommentar(er)
