This design was used in conjunction with our partner site Mobiletuts+. Bart Jacobs, very skilled developer, has taken this UI and created a working app out of it and best of all you can follow along and learn how to create your own! You can find his series here: Part 1, Part 2, Part 3.
In this tutorial I would like to show you how to create a retina ready user interface for a weather application. We’ll use multiple art boards and typography to create a very minimal interface.
Download the font assets here:
When using fonts for applications or for any reason really, please be sure to check the Licensing Agreement. Because this is only a tutorial and the app itself will not be available for sale we’re okay with using the aforementioned fonts. However, if you plan to create your own and wish to obtain a commercial license please follow the type designers instructions on how to do so.
1. Setting Up Your Document
We’ll be using multiple art board for the different views the app has so once we’ve decided this with help from our developer we can go ahead and get our document created.
Step 1
To start off with we need to create a document the size of our mobile device. Since we’re working on the iOS platform we’ll be designing for the iPhone 5 which has a taller screen size than the previous incarnations of the iPhone. I find working at the larger size it is easy to scale down later for other devices. Since the over all design is so minimal it will be easier to remove space later rather than try and scale it up. To that end our document will be 640 x 1136 pts (not pixels).
While brainstorming with the developer it was decided that there will be a main screen that will slide to the left or right to reveal more information. With this in mind we’ll also set up multiple art boards at this time as well. One for each window that will appear. Be sure to look over the screenshot thoroughly for the specifics.
Step 2
Once the document is created we’ll need to adjust the color profile. So go to Edit > Assign Profile and be sure to disable all color profiles. When XCode prepares your assets to be bundled with the app it completely strips any color profiles associated with assets. Because of this it is best to simply remove any color profiles from your document and regularly test your design on a mobile screen to ensure correct color output.
2. Create the Background
Step 1
Our background is fairly simple. Because we’re working with a more or less ‘flat’ design we’ll be working with solid colors and blending to achieve our effects.
We’ll be using the middle art board to represent our main page of the app. The one to the left will be what happens when you select the location. And the one to the right will appear when you select the date. Begin by drawing a rectangle the same height and width of the art board in the middle and filling it with our base color
Step 2
Next, create a circle that is exactly 30 x 30pt and fill it with the color outlined below.
Step 3
Copy this newly created circle and paste it behind the other. Now adjust the size to 2300 x 2300pt and drop the Opacity down to 0%.
Step 4
Now go to Object > Blend > Blend Options… and select Specific Steps then set it to 30. Then make (Object > Blend > Make) the blend.
Step 5
With the blend still selected center it horizontally on the art board and then center the circle at the very top of the art board as seen below.
Step 6
Duplicate the flat background rectangle and paste it above the blend we just created. Now select both the rectangle and the blend from the layers palette and select Object > Clipping Mask > Make. This way we don’t have to worry about our rather large blend bleeding over into our other art boards.
Step 7
A neat feature that we thought would add some flair to the app would be to have the background change color depending on the temperature. So while the background we made just now is for when it is ‘hot’, we’ll now duplicate these elements and adjust the color and position to represent a more ‘cold’ feel.
3. Add the Main Information Text
Because our blended circle effect has so many steps you may notice some lagging while continuing to create your app design. Since this is only for aesthetic purposes, we can go ahead and disable the blend layers and leave the flat background color for now. Be sure to re-enable the blend layer when testing on your mobile device so you can see how the text works with your background.
Step 1
We’ll be relying heavily on type to get the weather information across. For this reason I’ve chosen some nice, clean, easy to read fonts that really give the app some personality. I’ll be sticking with two font families and using varying widths to create the elements seen.
To begin, we’ll need to show a date of some sort. Select the Type Tool (T) and enter a day of the week. I’ll be using “Tuesday”, and our “Mission Gothic” font with the weight set to “Thin”. The text itself will be white and we’ll add a Drop Shadow to help it stand off of the background. Then we’ll position it so it is centered on the art board and 20px from the top. To do this, simply align it to the very top where the bounding box touches the edge of the art board then hold Shift and press the Down arrow on the keyboard twice.
Step 2
Select the Type Tool (T) again and let’s create our temperature gauge. I like the idea of the numbers themselves being centered while the “degree” symbol is off to the right. So, rather than centering the type in the Paragraph panel I have kept it left aligned and only typed the number we’ll be using for the placeholder. I’ll be using “86″ and the font “Maven Pro” with the following information seen in the screenshot below.
Once created, align it to the center of the art board then the top. Once aligned to the top, right click the text and Transform > Move… it down 210pt. Now select the type and add the degree symbol.
Tip: Be sure to tell your developer about this detail so they can work out how to create the different elements within the app itself.
Step 3
Now that we have the temperature let’s add a location. Type out your location, for me it is “Nassau, BAH” feel free to use your own. To give the City and Country some contrast we’ll be using two different weights. The City will be “Mission Gothic” set to “Regular”, and the Country will be “Mission Gothic” set to “Thin”.
As for the placement, I said previously I like the idea of the temperature figure being centered, but for all the other text I want it to be aligned to the left based on the width of the temperature figure. So for now I will manually line this address to the left of the temperature and place it about 20pt from the bottom. Feel free to tweak this distance as you see fit. Making sure to always check the elements on your mobile device.
Step 4
We can stop here if we want, but the developer would like to include some additional information. So we’ll create three separate lines of text. One for the current time, one for the wind speed, and another for the humidity. Make sure to create them separately as we’ll be using different font sizes and weights and this can throw off the line height for these elements.
I like the number forms from our “Maven Pro” font so I’ll continue to use this font for the numbers in these elements only we’ll using the “Medium” weight and contrast them with the “Mission Gothic” font set to “Thin” and for this thinner font we’ll also set it to “Small Caps”. You can set small caps by highlighting the appropriate font and clicking the menu icon in the top right of the Character panel then choosing Small Caps.
4. Add the Main Information Icons
Our typography gets our message across pretty well but we still need to create icons to represent what the different figures are and to specify menus in the app. I fell in love with the shape of the degrees symbol of our “Maven Pro” font so I thought I would tie the icon elements together with the type by reusing this shape to create the icons.
Step 1
With the Type Tool (T) enabled type the degree symbol. The exact size doesn’t matter at this point since we’ll be adjusting it to suit our icon sizes. Then right click and choose “Create Outlines” in order to convert the type to an editable shape. Now enable the Direct Selection Tool (A) and select the smaller inner path and remove it. We’ll be using a stroke later on to get the proper widget for our icons. Once you have your curved square shape be sure to adjust the height/width so that they are exactly the same. They will be slightly off and we need to ensure they are precise when adding elements later on.
Step 2
We’ll be using and reusing this shape several times so make sure you have a copy of it in case you loose the original while working. For now we’ll create an icon to represent the location menu.
With our rounded square shape copied, let’s shrink it down to 32 x 32pt, and add an inner Stroke of 3px
Step 3
Enable the Rounded Rectangle Tool and create a rectangle that is 3 x 12pt and increase the rounded corners so that the ends are completely round. Now duplicate this shape three more times and rotate it so it forms a sort of cross hair shape then group all the objects together. Finally with the group selected, add a Drop Shadow and place it 30pt from both the top and the left of the art board. Be sure to check the spacing on your mobile device and adjust accordingly.
Step 4
Let’s copy our rounded square shape from our Location icon since the other icons will be based off this same shape and size. Adjust the location of rounded rectangle to the be next to our Time element. Much like the actual degree symbol from the temperature element I want the icons for these extra details also to be outside of the temperature only this time it will obviously be to the left of the elements.
As you can imagine, for the Time element we’ll be created a Clock icon. Our rounded square shape will be the clock face and now we need to make the clock hands. Select the Rounded Rectangle Tool and create a rectangle that is 10 x 4pt and align it to the center of the clock face. Duplicate this process only this time make it 4 x 12pt. Once you have the clock hands in a comfortable spot group the elements together and add a Drop Shadow.
Step 5
Duplicate the rounded square once again from our previous icon and align it next to our Wind element. For this icon we’re going to try and achieve a nice effect where the icon itself helps further the wind information by providing an arrow which indicates the direct the wind is currently blowing in. So as you can guess we’ll be creating an arrow in the center for this particular icon. Begin by creating a Rounded Rectangle that is 4 x 9pt and centering it in the rounded square. Next, create a perfect square with the Rounded Rectangle Tool that is 12 x 12pt and remove one of the corners. Now close that open path and rotate it so it create the up point to our arrow then center it over the stem part of the arrow, making sure to hide the top rounded corners completely.
With our arrow completed, group the stem and point together then create seven more copies. Rotate each of these copies in quarter increments so you have one pointing up, one pointing to the upper right, another to the right, and so on. Because our main shape isn’t a complete circle simply rotating the shape with the arrow won’t work so we need to have an arrow icon for each direction the wind could be blowing. Once these are created you can hide the unneeded arrows and then group the arrows and rounded square together and apply a Drop Shadow.
Step 6
Paste a copy of our rounded square shape one last time and line it up with our Humidity element. Now create a circle that is 8 x 8pt and center align it in the main shape and put it more to the bottom. Enable the Direct Selection Tool (A) and select the top most anchor point from the circle and drag it up to create a drop like shape, also bring in the handles a bit to make a finer point to the droplet. Duplicate this droplet shape two more times and reduce the size and place them near the top and on either side of the bigger droplet. Finally Group (Control + G) the elements together and add a Drop Shadow.
Step 7
For the last icon of this main section we’ll need something that represents the date. We came up with a calendar icon that will also show the date of the month.
To begin create a Rounded Rectangle that is 40 x 36pt and give it an inner stroke of 3pt. Now go to Object > Expand Appearance to convert the stroke to an actual shape. With the Direct Selection Tool (A) enabled, select the top inner anchor points and nudge them down 9px using the arrow keys on your keyboard. With the Rounded Rectangle Tool create two rounded pill shapes that are 9pt wide and any height you wish then place them over the larger rounded square so the bottom meets half way between the large white area. Then minus these new shapes from the square shape using the Pathfinder panel. Create two more pill shapes, this time they will be 3 x 8pt and line them up inside the cut out sections. Finally we’ll add a place holder date with the following settings, then we’ll group these elements and add a Drop Shadow.
5. The Hourly Widgets
When pitched, the developer wanted to have a set of scrollable widgets along the bottom of the app main page that showed projected hourly weather for that particular day. So to finish off our main page of the app let’s create those now.
Step 1
Enable the Rounded Rectangle Tool and create a white rectangle that is 165 x 250pt, center align it with the art board and place it 40px from the bottom of the art board.
Duplicate this rectangle and fill it with black. Duplicate it once more and nudge it up 4px then Minus Front in the Pathfinder panel. You can then drop the Opacity to 15%.
Step 2
Duplicate our white rectangle again and fill with black that is reduced to 15% Opacity. Draw another rectangle shape over this one that is 79pt high and any width and line it up to the top of the underlying rectangle shape. Select his new rectangle and the larger black filled on below then choose Intersect from the Pathfinder panel.
Step 3
Enable the Type Tool (T) and enter a temperature of your choosing. I wanted to make sure I had enough space to expand so I chose the number “100″. For this I’ll be using the “Missing Gothic” font in the weight of “Black”. The text itself will also be a flat black with the Opacity dropped to 15%. We’ll then align it near the top of the white section of our container.
Step 4
Since this is supposed to be projected weather it won’t be that accurate so we’ll also include the possible “low” and “high”. With the Type Tool (T) again create type out your estimates and instead of using the “Black” weight, we’ll instead use “Thin”. Align this towards the bottom, making sure there is enough breathing room.
Step 5
The darker bar up top will be our time indicator. Copy the clock icon we created previously in this tutorial and place it centered and to the left of this darker bar area. You can also copy the Time text from before as well. Be sure to remove the Drop Shadow from these elements as it is not needed.
Step 6
Finally, add a Drop Shadow to the main white rectangle, then group these elements together. You can now copy this grouping and place them 20px apart on either side of the centered elements making sure to adjust the time for each new copy. As an added bonus I’ve taken the time widgets that go off the page and reduced their size to be 235pt high. If you have the constraint locked when resizing the height the widget will follow suit. This will have a decimal number behind it so it’s not exact. Since these are off the page make use or the mask we created earlier to hide the elements that go off screen.
With that our main page is complete. Be sure to turn on the background blend and test to see how it looks on your mobile device.
6. Create the Location Menu
Step 1
Now let’s start to work on our menus. I found it easiest just to copy the layer with all the elements from the main page, then select the art board to the left of the main page and paste in the duplicate layer. Position it so that only the location icon is visible on the right most side of the art board. Now create a mask that is the same dimensions of our art board and hide the elements that are off page.
Step 2
Since our overall design is ‘flat’ instead of a graduated shadow to indicate that the main page is over the menu element we’ll use a flat black filled rectangle set to 10% Opacity that is 4pt wide and the same height as our art board.
Step 3
In this menu we will need an area to add a new location, as well as list off our set locations and switches to enable/disable automatic location detection and the Units in which the temperature is displayed. Let’s start by creating the new location section.
Select the Rectangle Tool (M) and create a rectangle that is 640 x 100pt and align it to the top of the art board then add a Drop Shadow.
Now enable the Rounded Rectangle Tool and create a rectangle that is 8 x 32pt and fill it with black. Duplicate this rectangle and rotate it so it intersects the previous shape forming a “+” symbols. Select both rectangles and Unite them from the Pathfinder panel. Reduce the Opacity to 25% and center it vertically with the rectangle element we created with the Drop Shadow from before. Once centered vertically nudge it over so it is about the same distance from the left as it is from the top and bottom borders.
Finally select the Type Tool (T) and enter the sentence “Add new location…” using the “Mission Gothic” font sent to “Thin” and drop the Opacity to 15%.
Step 4
Duplicate the previous rectangle and align it to the bottom of the previous one then adjust the Drop Shadow.
Copy over our rounded square shape that we used for our icons previously and instead of a stroke fill it with flat black then reduce the Opacity to 15%. Copy the “+” symbol we made in the previous step and rotate it so it forms an “X” and center it inside our rounded square shape then choose the Minus Front option from the Pathfinder panel.
Now copy over the Location element text from our main page and remove the Drop Shadow and set the font color to black and reduce the Opacity to 25%. Feel free to add multiple instances just so we can see how the list will populate as new items are added.
Step 5
Let’s work on the switches element for this menu. This element will be stuck to the bottom of this menu no matter how long the list of locations gets. Begin by creating a rectangle that is 640 x 200pt and add a Drop Shadow.
With the Type Tool (T), type out the labels for the switches we’re about to make. One will be for automatic location detection and the other will set whether the temperature is displayed in Fahrenheit or Celsius. Since the main element these switches are sitting in is 200pt high space.
Let’s add a separator between these two labels. With the Line Segment Tool (\), create a line that is 476pt wide and give it a stroke of 2pt. This stroke will be black with the Opacity reduced to 10pt.
Step 6
To create the switches themselves we’ll be reusing the rounded square shape from before. Copy this shape and resize it to 50pt and fill it with black. Right click this shape and choose Transform > Move… then move it horizontally 80pt and click “Copy”, not “OK”. You should now have two rounded squares next to one another.
Select the Rectangle Tool (M) and draw a rectangle that is the same height as our rounded squares and meets each directly in the middle. Select all three of these elements and Unite them in the Pathfinder panel. Reduce the Opacity of this shape to 15% and align it correctly next to our label.
Step 7
Paste in our rounded square once more and fill it with white and adjust the size to be 40 x 40pt. Align it to the left or right side so that there is distance around the edge pieces. You can now duplicate these shapes and flip them horizontally to indicate the opposite switch state. Next add in your text to represent the switch state. Do this for both on and off.
Finally you can duplicate this element for the Unit picker as well. And with that our location menu is complete. Let’s move on to our Date menu.
7. Add the Date Menu
Step 1
This date menu will show the weather for the upcoming days. Let’s repeat the first few steps from the Location menu and copy over the entire main page layer then mask off the elements that go off page and add a rectangle to represent the menu shadow.
Step 2
Now create a rectangle that is 640 x 160pt and align it to the top of that art board then give it a Drop Shadow.
Step 3
We’ll need something to represent the day and date so just like before let’s create a calendar icon. Create a rounded rectangle that is 120 x 120pt and add an inner stroke that is 8px. Now go to Object > Expand Appearance to convert the stroke to an actual shape. With the Direct Selection Tool (A) enabled, select the top inner anchor points and nudge them down 30px using the arrow keys on your keyboard. Then reduce the Opacity to 15%.
Step 4
Now add your text to the icon. We want the top action to be the day of the week. This will be white text. The date itself will be black with the Opacity dropped to 15%. Both using “Maven Pro” in the “Medium” weight.
Step 5
Finally add the expected temperature. The font will be “Mission Gothic” for the numbers and “Maven Pro” for the degree symbol. We’ll also add a “high/low” selection in the bottom right of the element.
If you wish you can duplicate this element and adjust the day/date for the rest of the week.
Here You Have the Three Screens
Be sure to take note of the spacing between elements and any exact location figures you can think of to make the developers job easier. The more information you provide the easier it will be for the developer to code the product to match the design. I also cannot stress enough how important it is to always test while you design so you know your design will translate to the mobile screen. Best of luck with your app design!
{excerpt}
Read More