How to Design a Mobile App – Weather App Example

Note: This tutorial was first published on Smashing Magazine.

Being a designer at the moment is great because a wealth of modern design applications are available that let you easily bring your ideas to the screen. One app that is quite new, though — and perhaps a bit overlooked — is the free Gravit Designer app. Gravit gives you all of the tools needed to create functional and elegant screen designs. It can also be used to make icons, designs for print, presentations and much more.

With the recent release of version 3.1, it’s gotten even better: Now you can import your Sketch files into Gravit, save designs locally or sync them to Gravit Cloud, and get started quickly with design templates. Gravit is currently free, works on all major OS platforms and is available as both a web and desktop (standalone) app.

Figure 1: The completed weather app.

Every new tool can feel daunting at the beginning. In this tutorial, I will walk you through the creation of a neat weather app (designed by Claudia Driemeyer). You can download the design file to inspect it or use it as the base of your own work. (Please remember that you need to select “View” → “View Mode” → “Output View,” so that the overflowing parts of the design are clipped when you initially open the design in Gravit.)

Start Me Up

The first thing you will see when you open Gravit Designer is the start screen, with a broad selection of presets (see figure 2). For the purpose of this tutorial, let’s start with the “Nexus 5” template, which has the common size of 360 × 640 pixels. (Click and select the template from the dropdown.) If you don’t want to limit your imagination, you can also leave the “width” and “height” fields at the top empty, which will create an infinite canvas; going for a fixed-dimension canvas later will be easy: Just enter width and height values. This initial screen also lets you open files (either from Gravit Cloud or from your computer) and start from a selection of templates.

Figure 2: Bottom-left: Start from the “Nexus 5” preset. Top: Leaving “width” and “height” empty will create a design file with an infinite canvas.

After having selected the “Nexus 5” preset, you will be presented with a new “page” (known as an artboard in other design applications) at the center. The page will hold all of the elements of the proposed app. Because it’s an app about weather and a potential user should see the current conditions at a glance, let’s start with a full-sized background image. I’ve prepared a rainy image, which you can either save to your computer and drag it to the canvas from there, or copy and paste directly from the browser.

This image will create the first entry in the Layers panel (on the left), and it will also be placed in the center area of Gravit Designer, on the canvas (figure 3). In case the image hasn’t been centered to the page, right-click and select “Align” → “Align Center,” followed by “Align Middle.” Alternatively, you can drag the image until the pink smart guides show you this centered position.

Now, switch to the Pointer tool (press V), hold Shift and Alt both to constrain the ratio of the image and to resize it from the center, and drag out the bottom-right handle.

Continue reading

This post was originally published on this site