18 Mobile UIs with Amazing Layout

logo 18 Mobile UIs with Amazing Layoutmobile-uis-layouts 18 Mobile UIs with Amazing Layout

Mobile has been all the rage for a little while not. But for some reason, it’s not the most common thing you see among design galleries like Behance or Dribbble, or among inspirational posts.

Mobile design can be so beautiful at times I’ve decided to write a long post filled with great mobile UIs. I’ve gathered a list of 18 beautiful mobile UIs with amazing layouts.

These designs are extremely impressive and I hope they will spark some inspiration. It doesn’t matter if you’re designing for mobile right now or not these UIs are bound to inspire you to create something amazing albeit it a desktop app or even a responsive single page landing page. Let’s take a look!

01. Email Blast

1 18 Mobile UIs with Amazing Layout

Look at this small layout that is filled with creativity! I love that is’ not cookie cutter because it gives it interest. Mobile designs are often pretty straightforward because they are so small but not this one. Although this is an email design it works great an as example of a mobile interface.

The diagonal backgrounds and the big handwritten font give this design interest. It makes the design look great. The play in scale is well done too from the big handwritten font to the smaller decorative dashes. All in all, this an amazingly well-executed layout!

02. Dictionary Application

2 18 Mobile UIs with Amazing Layout

Here we have a design for a dictionary app. What I like about this screenshot is the fact the UI uses different swiping axis. You can swipe up to get more details on the current definition of awesome or you can swipe the smaller squares to see more variations of the word. This interactivity gives a simple app some dimension.

Not to mention, the use of color is well done too; there are a few accent colors used and the bright green background is definitely something else.

03. Sparkles and gifs!

3 18 Mobile UIs with Amazing Layout
Here we have another email but its mobile layout is spot on beautiful! The little animated welcome gif atop is fantastic. And, as you scroll/swipe down the email, the layout is lovely too.

The little bits of seafoam green accent works well throughout. The typography is really beautiful too. All in all, it’s a great looking mobile email.

04. What a f**king day

4 18 Mobile UIs with Amazing Layout

This mobile weather app concept is too cute (although I’m not sure about the raindrops looking like pills, but I digress). It may be a stereotypical weather app design, sure, but it’s god great style. The 8-bit inspired, 3D graphic is adorable! The animation adds a lot of character and personality to the whole experience as well.

Lastly, the layout itself, within the white, thin box is pretty modern looking. You definitely don’t see layouts like these often, or UI for that matter.

05. Pinefor App

5 18 Mobile UIs with Amazing Layout

I am in love with the clean look of this design – especially on the left-hand side. Although, the menu is not that bad either. Between those two screens, the app is stunning and modern.

06. TV Show Characters

6 18 Mobile UIs with Amazing Layout

This UI uses photography very well on both the left and right screens. On the left-hand side layout, the fact that there is text overlapping the image of Sherlock is well done.

Actually, it’s a clever way of saving space. On the right-hand side, the fact there is a little bit space above the content card is also brilliant. It helps keep the aesthetic of the app in check.

07. E-Commerce Stumptown

7 18 Mobile UIs with Amazing Layout

On the left-hand side screen, the products are showcased by overlapping the photo over the text. It looks interesting, to say the least. It’s a little jarring because the text is semi-transparent over the image. But, the middle part has different spacing and is totally different than the top and bottom section which makes the UI and the layout of the app interesting. I am a bigger fan of the right-hand side product display.

The coffee bag is cropped in the top right corner is fantastic! It definitely draws your attention and captures it.

08. NeuReads App

8 18 Mobile UIs with Amazing Layout

I love this layout – it’s jarring and different. The yellow is used very sharply within the background and it grabs your attention for sure. At the same time, over ever the yellow make it looks fun.

The eyeglasses logo has rounded edges making it the style more friendly, which is a good thing. Without it, and without the rounded font, the app might look too edgy. Then again, I don’t know the style this designer was going for.

09. ToDo List

9 18 Mobile UIs with Amazing Layout

I’ve included this UI because it’s so simple. It’s a checklist UI that doesn’t look overwhelming. For some reason, most to-do lists try to be creative while they don’t need to be.

The green is used very well as an accent color and the spacing works good too. The green, the spacing and the typeface combined make the app’s style very friendly. Simple looks very good on this app’s design.

10. Xiaomi Mi Band App

10 18 Mobile UIs with Amazing Layout

This is a redesign of a fitness tracking app and I like the idea of the different background relating to the topic at hand. For instance, the right-hand side background is darker because it’s showing you your sleep patterns. Even though this background is darker than the one on the left, they both appear subtle still.

It’s an interesting design choice but there is absolutely nothing wrong with it as it works well for the overall UI. The background extending to the top of the screen and being showcased under the phone information like time and battery life was a good call too; it makes the UI much more cohesive.

11. Optimize – Free vs Premium

11 18 Mobile UIs with Amazing Layout

The amount of content present here is large for a mobile screen; most UIs and layout stay away from so much copy.

Furthermore, most mobile UIs are not this color heavy – just check out this list – but it works because it’s well designed. The copy is small in font size and the icons are repetitive (because it’s a comparison table) making it easier to digest, visually.

12. Demo screens for a chat app

12 18 Mobile UIs with Amazing Layout

The blue social media triangles look fantastic on the right-hand side screen. It’s a unique take on how to include social media and it works well. Without icons or text, you can still easily tell one is for Twitter and one for Facebook.

On the left-hand side, the spacing around the bottom white box is well done too. The text doesn’t feel too crowded – at least not while I’m checking out the UI on a desktop.

13. Concept transition – Multi-window switch

13 18 Mobile UIs with Amazing Layout

This is a multi-functional animation concept that gives a good amount of depth to the mobile UI. When it comes to animating hidden interaction it’s all about the overall UX – does everything make sense for the user? It’s hard to tell with just a concept but it does look great to use at a glance.

14. CloseCircle Mag

14 18 Mobile UIs with Amazing Layout

I am in love with the style of this UI. The minimal and clean look-and-feel is combined with the black and white and pink tones in order to achieve a high-end style and I love it.

I’m a very big fan of the colors but also of the typography. “Circle” being off the grid and overlapping is a wonderful touch! The use of the green color as the background is fantastic. It’s just bold enough to really make a statement and highlight a section that needs to be.

15. News app experimentation

15 18 Mobile UIs with Amazing Layout

My favorite is the layout on the right; the fact that the layout is divided up into three polygons is awesome to me. It’s a pretty creative way to go about mobile layout as most are divided into rectangles. The different light shades of backgrounds give the three section the perfect amount of definition.

The composition of spacing and typography is also well done on the left-hand side screen. There are four different font sizes and weights yet it doesn’t look overwhelming; it looks great.

16. Hackathon – framerJS Challenge #9

16 18 Mobile UIs with Amazing Layout

This is an animated concept of an application that will let people with allergies know how safe it is to go outside.

You can select which allergies is giving you the most trouble and you get a lovely report on the local conditions of the outside. Again, this is a simple interface but the colorful background and the % animation give it amazing life.

17. Keroessa

17 18 Mobile UIs with Amazing Layout

Here is an UI for an AI. I love how simple and clean it is. The main screen doesn’t have a lot going on within it, just a question “How are you?” and a little weather report because it’s a nice day outside.

There is ample of white space on this screen and the two hiding behind it. Yet, it doesn’t look minimalistic or cold. Something about that navy blue keeps things lively within the UI.

18. Recipe Application

18 18 Mobile UIs with Amazing Layout

The last design is a lovely animation of a recipe app. I’m in love with the typography and headings. The layering of the ampersand  with the title of the recipe and it’s tiny two letter flavor description is really nice. You don’t see that too often in mobile apps; it’s refreshing just like the fudge mint chocolate brookies would be!

To show main source of content:
https://www.designbombs.com/mobile-uis-layout/

%d bloggers like this: