Menu

How to build a material design prototype using Sketch and Pixate - part one

Mike Scamell By Mike Scamell

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:

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.

Another great thing about Pixate is that you can create your own Actions. These are scripts that you can write in a subset of Javascript to automate repetitive tasks or create common patterns. For example you could make an Action that fades a button and have it move 48px to the left, rather than having to use two steps every time. I have not used them yet but they seem handy. The 'Actions' feature is currently in beta.

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.

Blank art board in Sketch

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.

Email field and password field in Sketch

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:

Login screen with all assets on

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.

Login screen with filled in email added

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:

Login screen showing email and password filled in

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.


Login screen with email and password filled in and button showing

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.


Status bar added to login screen art board

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.

Art board with logo and status bar only

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.

Art board with status bar, logo and email showing

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!

Next up is part two - working with Pixate

Now we have everything we need for part two of this tutorial where I will show you how to build a prototype in Pixate. Check it out here!

Follow us on -
Twitter
Facebook
LinkedIn

comments powered by Disqus

We’re a top UK digital agency - wahoo!

By Sophie Hardbattle

We're Eden Agency - one of the UK's top digital agencies.

Read more

An Introduction to Building a SpriteKit-UIKit Hybrid App

By Alan Chung

A guide to help you get started on making an iOS app that seamlessly combines the visual punch of SpriteKit with the practicality of UIKit.

Read more

How to build a material design prototype using Sketch and Pixate - Part Three

By Mike Scamell

Part three of a three-part tutorial on building a material design prototype. This section focuses on adding more detail to the prototype in Pixate.

Read more

We're Hiring - Web Developer Role

By Craig Gilchrist

We are currently seeking a full time full-stack web developer to join the team at our Knaresborough office.

Read more

How to build a material design prototype using Sketch and Pixate - Part Two

By Mike Scamell

Part two of a three-part tutorial on building a material design prototype. This section focuses on creating a interactive login screen in Pixate.

Read more