Creating an app prototype template is fairly easy especially when you’re working with the right tools. Adobe Illustrator is not so popular with UI designers because it often requires users to switch between Photoshop and Illustrator for editing raster images and vector objects. Yet, when it comes to app design, Illustrator is definitely a winner.
The app UI design is usually simpler for a better performance on mobile devices. Designing an app prototype on Illustrator makes the template highly resizable and easy to customize. This tutorial on app UI design will guide you through the basics of creating app prototypes with Adobe’s best vector design software.
P.S.: The app title is totally random and does not represent nor support any existing app.
Quick Tutorial: Design Your Own App Prototype Template In Illustrator
Step #1: Prepare Your Artboard
Set the canvas size to the one that best matches your needs. You can see the different mobile device screen resolutions here.
Step #2: Create a Layout Wireframe
Wireframing might sound complex but, in fact, it’s really simple. All you have to do is make a rough drawing of your app layout. You can do this on a piece of paper or use specialized software.
Step#3: Choose a Color Palette
Pick a color palette and stick to it. Consistency is an important factor for creating an appealing app prototype template. You can also check websites like Behance and Dribbble for some inspiration on a good color choice. If you want a quick solution, head to this article and try out one of the color picking tools listed there.
Step#4: Create Your App PrototypeTemplate
Let’s start with the menu. In this particular app prototype template, I will create a 400 x 75 menu.
Now, let’s make a rectangle with 400px width and 565px height. This will be the background of the app. It can be solid or it can be a cropped image. To crop a photo in the size of the rectangle position it above the image, then, right-click on the image and choose “Make Clipping Mask”.
You can give your background image a dim look by putting another rectangle on it and lowering its opacity. You can paint the rectangle in any color and it will give the image underneath it a light tint, depending on what opacity style you’ve chosen.
This design layout will be our app’s home page so we’ll want to put the logo in the center. Since the background image contains many contrasting objects it will be hard for users to read text on it. To make the logo pop out we’ll place a solid object beneath it.
With the circle creation tool, draw a circle a size of your choosing. Give it a similarly blurred effect by selecting it and going to Effects > Blur > Gaussian Blur.
After putting the logo, we can proceed to the second layout. We’ll now replace two large gray rectangles with our featured images. Cropping an image in the shape of a specific object can be done with the Make Clipping Mask option as explained above.
To make our article headlines readable we need to put a solid background above the featured image. You can create a nice transition between the photo and the background with a gentle blur. Draw a rectangle and select Effects. Since we already used the Gaussian Blur option, it will appear above all the other options in the Effects menu. Click it and it will apply the same effect as the one we created on the logo circle. To change the blur’s intensity, you can click on the Appearance settings in the right sidebar menu ( If you don’t see it, turn it on from Windows > Appearance ).
Stretch the blurred rectangle outside the edges of the artboard. Now, create another solid rectangle with the width of your artboard. Its height should be slightly bigger than the blurred object. Place it above the blurred object and right-click to select the Make Clipping Mask option. Now combine the cropped blurred object with a solid rectangle to create a place for the article’s title, description, and additional information.
We should also create a menu icon. To do so, drag three identical lines with the Line Segment Tool ( / ).
Put a profile photo with the Clipping Mask option as shown above. Then, copy the first article box and paste it below to use the already formatted style.
Since the second box will be a featured article we’ll want to change the background color to something more eye-catching. Adding a simple “featured” badge to the post will also attract attention. To create a similar badge, draw a rectangle, set the stroke to 3 px and make the object transparent. You can do this from the Color Picker options in the left menu.
Now, let’s create the menu design. To create a custom icon for the toggled app menu, draw a small square with a 3px stroke. Use the Direct Selection Tool ( A ) to select specific lines from the square. Delete two adjacent lines to create a minimalist arrow that will show users that the app menu has been clicked.
To create this app menu design you can use a shape with the size of the main menu ( 400 x 75 px ) and then copy it below for each app category. If the menu is long enough, it could cover the phone page so this particular design has a little “more” button integrated on the bottom.
For the last app page layout, we’ll create a Sign Up page. The information boxes have a classical ghost button style and a 3px-wide stroke. The profile portrait is created by grouping two circles with Ctrl (Cmd) + G and then cropping them with the Clipping Mask option in the shape of the profile picture.
Resources:
Photography: All photos are taken from Pexels.
Fonts: The font used in this tutorial is Montserrat.
If you’re looking for free resources for your app prototype design, you’ll love this article.
Learn more awesome design tricks with these tutorials:
The post How To Design an App Prototype Template in Illustrator appeared first on SpyreStudios.
from SpyreStudios http://spyrestudios.com/design-app-prototype-template-illustrator/
In the video tutorial above I go over how to create a dot navigation menu in 
