Design a Clean, Intuitive Weather App User Interface

If you are designing a mobile app interface, you know how hard it can be to create a balance between beautiful design work and usability. Whenever you are working on an app’s user interface, the interactive aspect of your design work leaves you with lots of different objectives to juggle. Talented interface designers have to do more than just make their work pretty; their interface has to be intuitive and functional as well.

So, today we are going to create a clean and intuitive weather app UI in Photoshop. We will balance aesthetics with functionality, and we’ll use some interesting patterns and blending options to achieve both of our goals.

Resources:
Icons

Patterns

Now, let’s have a look ahead at our final result: (Downloaded the finished, layered PSD file.)

Step 1

Open Photoshop and create a new file with a 665px width and a 980px height.

Step 2

Select the paint bucket tool and fill the background with color #b4b4b4.

Step 3

For the top area, create a new layer and click on the rectangular marquee tool to select a rectangular area. Then, fill it with color #f5f5f5.

Step 4

Now, click on “Layer styles” and add inner shadow, color overlay, gradient, and pattern using the following settings.

Now, select the eraser tool and adjust the brush size and shape in the brush panel. Then, use it apply a rippled pattern on the strip.

Step 5

Select the text tool and add the title using color #f0f1f1.

Step 6

Select the title layer and click on “Layer styles” to add both a gradient and a drop shadow. Use the following settings.

Step 7

Select the rounded rectangle tool and create a small rectangle using color #f3f3f3. Now, click on “Layer styles” to add an inner shadow and a drop shadow. Use the settings below.

Step 8

Now, add text to the button, duplicated it, and create a similar button on the other side of your title.

Step 9

Create a new layer and place it underneath the top layer. Now, create a large rectangle using color #f1f1f1.

Step 10

Select the newly-created layer and click on “Layer styles” to add an inner shadow, a gradient, and a pattern using the following settings.

Step 11

Repeat the same process and create another rectangle with the same style, but change the fill color to #545454.

Step 12

Select the pen tool to create our cloud using color #ffffff. Then, click on “Layer styles” to add a drop shadow using the settings below.

Step 13

Select the polygonal tool, set the sides to 25, and create the sun. Now, reduce the fill to 0% and add the stroke and drop shadow shown below.

Step 14

Now, add text using color #20a79e and add a subtle drop shadow to it.

Step 15

Now, create the second cloud using the same technique used before. This time change the cloud color to #94d2d4. Create a new layer and select a hard round brush and create rain using color #1fa1a6.

Step 16

Click on “Layer styles” and add a drop shadow to the rain. Use the settings below.

Step 17

Select the text tool and add the text using the same methods as above. This time, keep the text color #ffffff.

Step 18

For the navigation, create a rectangle using color #f1f1f1 and add an inner shadow and a gradient.

Step 19

For the main button, create a small rectangle and simply copy the layer style of the top background (right-click on the layer and select “Copy layer style”), and then paste the layer styles onto this new rectangle.

Step 20

Select the line tool with a 1px weight to create two dividers using color #f1f1f1. Then, add apply a subtle drop shadow to the dividers.

Step 21

Now, add some icons and text to the navigation, and we are done.

Our clean, intuitive weather app design is ready. I hope you enjoyed the tutorial. You can also develop this design into fully functional app by learning the necessary programing languages. You can find lots of useful programing tutorials and courses at BuildMobile.com, Learnable.com, and SitePoint.com.

I’ll be back with some more interesting tutorials. Until then, have fun!