In this tutorial I’ll walk you through the process of designing a welcome screen for an iOS fitness application. We’ll be working with Affinity Designer, a new and promising tool made by Serif, and a great app for UI design.
You won’t need any previous experience with the application. By the end of this tutorial you’ll have gained a basic knowledge of the Affinity Designer workflow. We’ll be working with type, vector, images, as well as layer styles.
Creating a Working Space
Step 1
Let’s get started by creating a new document.
After opening Affinity Designer go to File > New from the main menu. On the popup which appears you can specify the file parameters that will suit your needs the best. For now let’s focus on two options: Type and Page Preset. We’ll be designing an iPhone App so the best way to go is to choose Type: Devices and Preset: iPhone 5 (Retina). Affinity Designer will atomically set the other options for us.
Step 2
Next up we need to prepare an environment to work in. I’m a big fan of using grids in design. We won’t dwell deep into this right now, but we’ll set up a really simple layout grid.
This design will lean on basic Apple Human Interface Guidelines, which means adhering to a specific hierarchy. We’ll need to allocate a space for the Status Bar (20 pt). Then, although transparent, there will be a simple Navigation Bar below that (44 pt).
Next up, a space for main info about user performance, and a place for a button to start a workout.
Go to View > Guides manager and a popup will appear, with horizontal and vertical guidelines (blank for now). Click on the small blank page icon below the Horizontal Guides section. Doing so will add new horizontal guide. Then double-click on the value which appears in the list and change it to 20 pt. Add other guides using attributes as shown below.
App Background
Step 1
Now we’re going to create our app background. From the tool menu on the left select a Rectangle Tool (M), and draw a rectangle covering the whole working area. On the left side panel there’s a Transform section. You can check your rectangle dimensions here, as well as its starting points (you should have X:0, Y:0 and W: 320 pt, H: 568 pt).
Step 2
Now we’ll change the background color. Go to the Context Toolbar just under the main Toolbar (If you don’t see one go to View > Show Context Toolbar in the main menu). On the left hand side of the context toolbar you’ll see properties relating to the shape we’ve just created. Click on the small white rectangle described as a Fill (with the shape selected). Choose RGB Hex Sliders from the selection list, then enter #151515 in the HEX parameter input field and press Enter.
Step 3
Go to the Layers panel. Double-click on the layer containing our shape and change its name to “BG”. Next, click on the little padlock icon to lock the BG layer. This way you won’t mess with it by accident when working on the other elements.
Status and Navigation Bars
Step 1
Focus your attention on the Status Bar. We won’t bother with reinventing the circle, instead download the source files attached to this tutorial to find the stat-bar file . Then go to File > Import in the Affinity Designer Main Menu, select the stat-bar.afdesign file and single click anywhere on the design.
Select the group and place it at the top of the app screen.
Step 2
It’s time to create our hamburger menu. To begin, turn on the grid, pixel and guides snapping in the Main Toolbar. Change your main color to “white” in the upper left side of the application window. Select the Rectangle Tool from the Tools panel on the left and draw a 18 x 2 pt rectangle. Hold the Alt+Shift buttons and click and drag the rectangle below the original one (we’re just copying the rectangle). Do it one more time and you’ll get a hamburger menu icon.
Select all three shapes (Shift+click) and click on the Add button in the Affinity Designer upper right corner to merge it into one. Find your icon on the Layers pane and rename it “hamburger-menu-icon”.
Step 3
Select the Artistic Text Tool (T) from the tool panel and click somewhere within the navigation bar space on our design. Enter the text “Running App” and select the whole lot.
Click on the Character button, change the text attributes as shown below, thenlose the popup.
Now centre the text in the navigation bar area. It’ll snap automatically. If not, be sure to turn on the snapping options on the main toolbar on top.
It’s time to clean things up in the layers panel. Click the Add New Layer button at the bottom of the Layers panel and drag the hamburger icon, app title and status bar into it. Group the app title and menu icon layers together (select both and click Cmd+G) then rename the layer as shown below:
The Progress Chart
Step 1
Select the Circle tool (M) from the tools panel and draw a circle. With your new shape selected open up the Stroke Properties panel on the upper left side and change the parameters as shown below.
Start drawing from the centre guide we created initially, then press and hold Cmd (drawing from the centre point) and Shift (drawing a circle, not an ellipse) while drawing. Your Circle should be around 200x200 pt.
Select the circle and press the Convert to Curve button on the toolbar menu. Select the Node Tool (A) and click on the Break Curve button. With Node Tool still selected create two points on the curve about 3/4 of its height.
Note: You can create additional guides to align these new nodes better. Press Cmd+R to show Rulers and click and hold on the upper ruler, then drag a cursor down to create a guide.
Select the top node of the circle and click Delete on your keyboard to remove it. You should have a nice base for an open circle chart now.
Step 2
Select the chart shape and duplicate it (CMD+J). Select its upper left with the node tool and delete it. Open the Stroke Properties panel and change the values as shown below. The green color is #4DFA41 and yellow #F7D203.
Step 3
Select the Artistic Text Tool and enter some additional info, then place and format them as shown below.
We now have a really striking progress chart with additional info about user achievements!
Start Running Button
Step 1
Select the Rectangle tool (M) from the Tools panel and draw a rectangle, approximately 290pt x 44 pt. In “Human Interface Guidelines for iOS” Apple designers suggest 44 pt to be the perfect button height for easy tapping.
Shift-click on the background of the app and the rectangle shape you’ve just created, then click the Align Horizontal to Center button on the left top area of the screen. Place it at the bottom of your UI design. You can also select the rectangle shape and change its X/Y settings in the Transform panel to the ones shown below:
Step 2
Select the shape you’ve just created. Open the Color Fill panel at the top left side of the screen and change the fill color to transparent. Than change the stroke to #4CFA41. Open the Stroke Preferences panel (next to the color one), set the stroke weight to 2pt and align it to the inside of the shape.
Step 3
Now for the button label. Select the Artistic Text Tool and use it to create a label in the center of the rectangle you just created. Type in “Start Running” and open the Character window by clicking on the Character button on the top tool menu (with the text object selected). Change all the preferences to reflect the examples shown below:
Sample Statistics
We’re going to place a simple stats view between the progress chart and the “Start Running” button. We’ll display average running pace, total number of runs and the calories burned.
Step 1
Visit the Icons8 website and download the Running icon, the Stopwatch icon, and the Fire Element icon. Icons8 is a great place for finding modern and elegant icons. You can get PNG for free (remember to link back to the Icons8 website if you’re using them) or buy a vector version.
Step 2
Begin by placing the Running icon in your design. Go to File > Place and select the file, or just drag the file into Affinity Designer. Place it centered vertically below the progress chart.
Next go to the Effects panel (with the icon selected) and open the Colour Overlay tab. Change the overlay color to #4CFA41.
Then switch to the Styles tab and create a custom style from the selection by clicking on the small drop down menu icon to the right, and selecting Add Style from Selection. By doing this it will be easier to reuse our style later on.
Step 3
Again, select the Artistic Text Tool and create two text objects. Type in a sample number and the text “Total Runs”. Format them as shown below. Center them vertically and place them below the Running Man icon.
Step 4
Place the other downloaded icons in the UI design. With one of them selected choose the style we just defined from the Styles panel. Voila! Our styles have been reapplied without having to specify them again.
With the icon still selected click Cmd+C or go to Edit > Copy. Select the last icon and Click Cmd+Shift+V or go to Menu > Edit > Paste Style. This will paste the style of previously copied object to the new one. Pretty handy, right?
Finishing Touches
Step 1
When we have all the components placed on our canvas it’s time to work on some details. First of all we have an ugly hole in the middle of the design, let’s do something about this.
If you kept your layers organized, this bit will be easy. Select the layer/group with our progress chart and move it about 50pts down. If you didn’t keep your layers organized, this step will be more difficult–it serves you right!
Step 2
Let’s also spice up the background. Create a 320x320pt rectangle and place it on top of the design. Select it and choose the Corner Tool (C) from the tool panel. Click on one of the anchor points of the rectangle to make it editable, turn on previously defined Guides (Cmd+;) and click on the center of the bottom corner of the rectangle to create a node. Select it and move it down 40pts. And here we have our new custom shaped arrow. Go to the Layers panel and move it to the bg layer (put it on the top).
Step 3
Grab the source files attached to this tutorial and take a look at the photo of a nice Parisian street. It’s one of the photos I took when visiting Paris. It looks pleasant it’s also a great place to run. Open it in Affinity Designer and Copy (Cmd+C) it.
Go back to the design and select our previously made arrow shape (in the Layers panel). Then click Cmd+Alt+V to paste it into the selected shape. Move it to crop as you like. Select the arrow shape and dim it to 40% opacity. Click Cmd+G to put the curve in a Group and change its Blending Mode from Normal to Glow.
Step 4
With the group still selected grab the Transparency Tool (Y) from the tool menu and create a Linear Blending Gradient on the group (click and drag) from the bottom, all the way up. You can play with the tool to achieve the results you like.
Step 5
Now let’s add a drop shadow below our arrow. Select the group and go to the Effects panel. Expand the Outer Shadow tab and turn it on. 20pt radius and 15pt offset should work nicely.
Conclusion
You’re done! You’ve just created your first mobile app design with Affinity Designer. With any luck, the repetitive steps during this process will have taught you a number of very useful Affinity Designer workflow techniques. I look forward to seeing what other designs you make with it!