Apps UI Design Trends – Balance between beautiful Designs and Usability

If you are an app developer or designer, you surely know how challenging it is to design something that is creative and effective at the same time.  As a designer you need to know that sometimes the smallest details can make your app stand out from the crowd.

Today we see thousands of apps with great functions and usability, but their design let them down. Thus they fail to get the deserving recognition and popularity. We know when you are designing the user interface there are lots of limitations and rules you need to follow – but if you give equal amount of importance to the design as you give to the usability, I’m sure the end result will be beautiful and useful at the same time.

Nowadays we do some great looking apps that offer amazing user experience. Let me give you some interesting examples for your inspiration:

Moodswings

The first app I like to discuss is Moodswings. It’s a concept app made by a very talented Swedish designer Gustav Schiring. With this app you can track your mood throughout the day. I absolutely love the user interface; it is very unique, clear, creative and fun at the same time.

Diacarta Planner

I really like the retro feel of this app. The overall design is very unusual and you get the old school retro feel. Designer has effectively used light textures and faded colors. All the elements are in perfect balance and very well blended, especially the navigation.

The ChoreMonster

This app has a strong illustrative style; it’s very bright, fun and creative. The designer has given full attention to the navigation, and illustrated each menu option with detail. The colorful design and playful typography make this app fit for its audience as we know this app is aimed towards children.

Now we have gone through some unique and colorful apps so let’s start with our own app. Today we will design clean yet stylish weather app. It will be clean, colorful and appealing. So let’s get started.

Step1:

Open Photoshop and create a new file with 600px width and 800px height.

Step 2:

For the Base, select the ‘Rectangle Tool’ and create a big rectangle in the middle with color # 920049.

Step 3:

Create a new layer and fill it with color # ffffff, reduce the fill to 0%. Now add the pattern, click on layer styles> Pattern overlay.

Step 4:

Select the ‘type tool’ and add title text with color # ffffff. Then click on Layer styles> Drop shadow and add a very thin shadow to the text.

Step 5:

Repeat the same process and add the temperature text and drop shadow.

Step 6:

Set the foreground color to # ffffff and select the Pen tool to create the cloud shape.

Step 7:

Now click on layer styles to add Stroke, color and drop shadow.

Step 8:

Select the ‘Polygonal tool’ and adjust the top settings to create the sun with color # fff691. Now add the stroke with color # ffba00 and place the layer under the cloud.

Step 9:

Now let’s start with our details panel. Select a new layer and place it under the main pattern layer then select the ‘Rectangular marquee tool’ and create a small strip. Fill it with color # 00bff3 using the paint bucket tool.

Step 10:

Click on layer styles> Gradient Overlay and add some gradient to the above a strip.

Step 11:

Create another stripe and fill it with color # 1f2f4e.

Step 12:

Now let’s add text and details to the first strip, so select the ‘eraser tool’ and adjust the brush size and shape in the brush panel. Now use it on the bottom of the strip to get a nice pattern.

Step 13:

Now select the ‘Pen tool’ to create the triangle shape with color # 00bff3. And use a soft round brush to create a little shadow at the bottom.

Step 14:

Select the ‘Type tool’ and add text with color # ffffff. Now add the ‘more’ icon on the side, then add some drop shadow to both the text and icon with the same settings as below.

Step 15:

Now let’s move on to our navigation options. First we will create some dividers so select the ‘Line tool’ with 1px weight and foreground color # 00000 to draw a straight line. Then click on layer styles> Drop shadow and keep the settings same as below.

Step 16:

For the main button select ‘Rectangle tool’ and create a rectangle in the middle with color # 88022e then add the drop shadow.

Step 17:

Select the ‘Type tool’ and add the navigation text, then click on layer styles to add some drop shadow to our text.

Step 18:

Now place the rest of the icons (same way we created the cloud and sun above) then add some drop shadow with the same settings as below.

And here is our final result.

And we are done our vibrant weather app UI is ready. You can see our app is a simple example of what we stated above. Here we have designed a stylish and appealing app without compromising the usability and clarity. So next time when you are working on an app design, be creative, play and experiment with textures, patterns, and colors.

Just remember these points and I’m sure the end result will be beautiful!

Source PSD

Download Source PSD