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.
Now, let’s have a look ahead at our final result: (Downloaded the finished, layered PSD file.)
Open Photoshop and create a new file with a 665px width and a 980px height.
Select the paint bucket tool and fill the background with color #b4b4b4.
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.
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.
Select the text tool and add the title using color #f0f1f1.
Select the title layer and click on “Layer styles” to add both a gradient and a drop shadow. Use the following settings.
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.
Now, add text to the button, duplicated it, and create a similar button on the other side of your title.
Create a new layer and place it underneath the top layer. Now, create a large rectangle using color #f1f1f1.
Select the newly-created layer and click on “Layer styles” to add an inner shadow, a gradient, and a pattern using the following settings.
Repeat the same process and create another rectangle with the same style, but change the fill color to #545454.
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.
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.
Now, add text using color #20a79e and add a subtle drop shadow to it.
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.
Click on “Layer styles” and add a drop shadow to the rain. Use the settings below.
Select the text tool and add the text using the same methods as above. This time, keep the text color #ffffff.
For the navigation, create a rectangle using color #f1f1f1 and add an inner shadow and a gradient.
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.
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.
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!
Anum is Web and Graphic designer. Addicted to Photoshop and crazy for pixel perfection. She is also an active blogger, sharing her passions, skills and creative details on her blog Websoulz. She loves to connect with the community, sharing the latest design gossips and rolling her eyes on boring trends.
Jump Start Git, 2nd Edition
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers
Form Design Patterns