How to build a material design prototype using Sketch and Pixate - part one
Have you ever had a great idea for an app or wanted to demonstrate to someone how you think it would work? Have any of these things ever held you back?
- Lack of time to develop a proof of concept
- You not sure how well your colour scheme, layout, animations etc. would look
- You’re an app developer who’s not sure how to go about this design lark but you want to try it out
- You’re an app designer who wants to learn how Sketch and Pixate may benefit your design and prototype process
- You’re not sure if Material Design would improve your app but would like to see what it would look like (hopefully this one isn’t the case!)
If you can identify with any of these, or maybe you’re just inquisitive about either Sketch or Pixate, then I implore you to read on.
Sketch and Pixate are my favourite tools for mocking up simple designs and prototypes. I am an Android Developer by trade and I don’t have much interest in learning the learning the complexities of Adobe Illustrator or the like. A few months ago I started designing the Fantasy Football Fix app. I heard good things about Sketch and I had just read a Tech Crunch article about Google’s acquisition of Pixate and decided to give them both a go.
Sketch is a design app that is easy and simple to use. The app splits design up into pages and artboards that allow you to group your designs. For example a page could consist of all the artboards for one feature of an app, say the login for instance. Or maybe one page for for beta/prototyping and one for the actual release designs. Regardless of how you do it, it is great for organising your designs. It also has plenty of plugins for added functionality. Some of my plugin highlights are:
- Sketch Artboard Tricks which can help rearrange your scattered artboards
- Sketch Export Assets which easily helps you export your designs to iOS, Android and Windows Phone sizes
Pixate is a prototyping from Google. It’s has predefined animations and interactions. It has accompanying mobile apps so you can interact with your prototypes on an Android on iOS device. It has cloud features which start at $5 per month. These allow you to share your prototypes to the cloud, so clients and colleagues can get access. I enjoy using Pixate as I find it has some similarities to coding when doing condition and referencing layers for animation. We’ll just be using the free version that allows you to share through your Wifi to the app on your device.
In Part 1, I’ll be running you through importing assets to Sketch and using them to create a Login Screen. We’ll use this in Part 2 to create the start of the prototype in Pixate. In Part 3, I’ll provide you with all the assets you need to create the next stage of the prototype. This is so that we can speed things up a bit and get you to the juicy stuff, as i believe Sketch is pretty easy to get a grasp of.
Things you’ll need to make the super awesome prototype
- Sketch - $129 for full version but does have free trial
- Pixate - Free but cloud features start at $5 per month (used in Part 2 and 3)
- Assets Sticker Sheet
- Android device - You can use an iPhone, but an Android device is preferable. If you use an iOS device i cannot help you out if it doesn’t look right (used in Part 2 and 3)
The colours used within the tutorial are as follows:
- Primary - #4CAF50
- Primary Dark - #388E3C
- Accent - #D500F9
- Login Screen Background - #E8F5E9
These are all available in the Assets Sketch file as well. Feel free to use your own!
Quick warning, i’m going to assume you have some sensibilities when it comes to creating this. If i leave something out i’ll assume it’s logical enough for you to work out yourself! This is not the complete, in depth, how to guide to using Sketch or Pixate. But if you feel like i’ve missed something important then please do drop me a comment.
Let’s make a login screen!
Adding the email and password text fields
First of all open the Assets Sketch file provided. In this are all the components we’re going to be using to create our prototype. Everything you need for this tutorial is under the Login Screen Assets artboard.
Open a new Sketch file and save it as something logical like “Material Design Prototype”. Next insert a new artboard using the “Insert” menu from the toolbar. From the right hand menu click the “Material Design” dropdown and select “Mobile Portrait”. If all’s gone well you should have a nice white rectangle on your screen.
Let’s rename the artboard to “Login Screen” by right clicking on “Mobile Portrait” in the left hand menu and clicking "Rename". It sounds simple but making sure that everything is named will avoid confusion, as it’s very easy to get lost while creating the Login Screen.
Let’s give the background some colour, while we’re at it. Select the Login Screen artboard from the left hand menu and some options should open up on the right hand side. Tick the “Background Color” box and then select the colour box next to it. Paste our background colour “E8F5E9” in to the “Hex” box and press enter. Et voila! A beautiful light green background. Have I mentioned green is my favourite colour?!
Do you notice how the size of the artboard is 360 x 640? This helps for exporting to screen densities for different Android devices like hdpi, xxhdpi etc. More on this later.
At this point it’s going to be easier to have the Material Design Prototype and Assets Sketch files open side by side for easier drag and drop. Find the Login Screen artboard and find the text field asset and copy this into our login screen. Then rename “Hint Text” to “Email”. I placed mine in the middle of the screen. I’ve resized the text field asset so it is exactly 328 pixels. This gives a 16 pixel left and right margin which means we’re adhering to Google Material Design guidelines on layout bounds. Copy and paste the text field asset again and make sure it’s 16 pixels below the email text field. Sketch will inform you of the distance between the two objects as you place it with a red line and number.
Adding a logo
Now we’re going to add in our logo at the top, because you know… branding and stuff ;) Grab the Logo and place it above the email text field and password text field.
We just need the disabled login button that we’ll be transforming later for our login operation. Copy this from Assets to our Login Screen. If all’s gone well you should have something that looks like this:
Right we finally have our Login Screen! Well sort of. What we’ve created is our start state. We'll need some of the other components to create our filled in state.
Adding the filled in email and password
We need to copy and paste the email text field with input component. Place this on top of the email text field. This should just slot in over the top. Make sure the bottom lines match up. Now, hover over the email text field in the left hand menu and click the little eye that appears. The email text field should be hidden. You should only see the email text field with input. You’ll need to edit the actual text to something more relevant.
Next we just have to repeat the process for the password text field. Make sure you are renaming the input fields in the left hand menu after you have copied them over. I’ve just used stars for the password text field with input to represent an entered password.
Now you should have something that looks like this:
Next up is the other login buttons. It’s the same process for the buttons; copy, paste, place over the top, and hide the previous.
Adding a status bar
Just one more little thing we’re missing. That’s the Status bar. When we’re in our prototype later on it won’t be displayed as the prototype goes full screen on the device. It could be left out, but i think adding it in makes it feel like you’re actually using a real app.
Find the status bar in the assets folder, copy it across and place it at the top and centred. We added this last so that we make sure it is over the top of everything else, otherwise it wouldn’t be visible.
Exporting for Pixate
Finally, we should now get all of our assets exported for using in Pixate. As we want our prototype to have a bit of movement we need to get the Login Screen back to basics. Hide everything that we’ve added to the Login Screen so far. Only the logo and status bar we imported should be left.
Click on the Login Screen in the left hand menu. This should select the whole artboard for you. In the bottom right hand corner there should be some text, “Make Exportable”. Click this to make the Login Screen exportable and to open up a menu. This menu is handy, it can allow you to export your assets at various scales. This is great when trying to meet different device specs. Now that VectorDrawableCompat is out for Android, it’s not needed as much. Make the “Size” dropdown 3x and leave the suffix empty. This is also a nifty feature that lets you set some text for all the different size images e.g. login_screen_mdpi, login_screen_xxhdpi but we don’t need to use it. Lastly, make sure the “Include in Export” is ticked below “Background Color”. Without this the screen will be exported without our coloured background, which is not what we want! Click “Export Login Screen” and save it to some where appropriate. I placed mine in a folder call “Login Screen Assets”.
The rest of the items need to be exported individually. Let’s start with the email text field. Make sure the email text field is visible first of all, otherwise when you export it you’ll be exporting nothing! Click on email text field in the left hand menu. Click “Make Exportable”. Make the “Size” 3x and leave the suffix empty. Then click “Export email text field” and save to your chosen location.
This now needs to be done for the rest of the left over items:
- email text field with input
- password text field
- password text field with input
- login button
- raised login button
- disabled login button
Just make sure you’ve made them all visible before you export!
Update Podcast Episode 20 - Prototyping tools
Episode 20 of Update podcast the team talk about Prototyping, have a listen!