36 Mobile UI Designs for Your Inspiration

Here we present an inspiring collection of interface designs for mobile devices, which we’re sure will give you some ideas. Enjoy!

Viber iOS8 Concept by Todor Russanov in 36 Mobile UI Designs for Your Inspiration

Ubi by aminTorres

Ubi by aminTorres in 36 Mobile UI Designs for Your Inspiration

F1 App by Piotr Kwiatkowski

F1 App by Piotr Kwiatkowski in 36 Mobile UI Designs for Your Inspiration

Mingle Snap Menu by Mateusz Jurkiewicz

Mingle Snap Menu by Mateusz Jurkiewicz in 36 Mobile UI Designs for Your Inspiration

New profile by Joao Paulo

New profile by Joao Paulo in 36 Mobile UI Designs for Your Inspiration

Magix Healthcare by Carving Dezine

Magix Healthcare by Carving Dezine in 36 Mobile UI Designs for Your Inspiration

Menu Shopping Mall App by Jessica Johnson

Menu Shopping Mall App by Jessica Johnson in 36 Mobile UI Designs for Your Inspiration

iOS – Buoy by Imran Kayani

iOS - Buoy by Imran Kayani in 36 Mobile UI Designs for Your Inspiration

Mobile eCommerce Wireframes by Jon Izquierdo

Mobile eCommerce Wireframes by Jon Izquierdo in 36 Mobile UI Designs for Your Inspiration

Revolv 2.0 – Before and After by Alberto Vildosola

Revolv 2.0 - Before and After by Alberto Vildosola in 36 Mobile UI Designs for Your Inspiration

MingleSnap by Mateusz Jurkiewicz

MingleSnap by Mateusz Jurkiewicz in 36 Mobile UI Designs for Your Inspiration

Mingle Snap Profile by Mateusz Jurkiewicz

Mingle Snap Profile by Mateusz Jurkiewicz in 36 Mobile UI Designs for Your Inspiration

VT iOS App by Dustin LaMont

VT iOS App by Dustin LaMont in 36 Mobile UI Designs for Your Inspiration

Calendar by Toloknova Ksenia

Calendar by Toloknova Ksenia in 36 Mobile UI Designs for Your Inspiration

Audio Card iOS App by Blake Gentry

Audio Card iOS App by Blake Gentry in 36 Mobile UI Designs for Your Inspiration

Cookspiration App for Android L by Jordan Ouellette

Cookspiration App for Android L by Jordan Ouellette in 36 Mobile UI Designs for Your Inspiration

uChat Elements by Daniel Klopper

uChat Elements by Daniel Klopper in 36 Mobile UI Designs for Your Inspiration

ZipCode Mobile by Isabel Sousa

ZipCode Mobile by Isabel Sousa in 36 Mobile UI Designs for Your Inspiration

Launch Screen by Jihye Mok

Launch Screen by Jihye Mok in 36 Mobile UI Designs for Your Inspiration

Vertical player by Vincenzo Petito

Vertical player by Vincenzo Petito in 36 Mobile UI Designs for Your Inspiration

App Shop 2 by tolik_designer

App Shop 2 by tolik_designer in 36 Mobile UI Designs for Your Inspiration

Celebrity Profiles by Adrian Goia

Celebrity Profiles by Adrian Goia in 36 Mobile UI Designs for Your Inspiration

iOS Player by Andrey

iOS Player by Andrey in 36 Mobile UI Designs for Your Inspiration

CardStream Interactions by Ed Chao

CardStream Interactions by Ed Chao in 36 Mobile UI Designs for Your Inspiration

Mobile UI Stats by Pierre Marais

Mobile UI Stats by Pierre Marais in 36 Mobile UI Designs for Your Inspiration

User profile by Igor Leygerman

User profile by Igor Leygerman in 36 Mobile UI Designs for Your Inspiration

Fashion Catalogue by Ade Permana

Fashion Catalogue by Ade Permana in 36 Mobile UI Designs for Your Inspiration

Task Centre Concept by Jamie Hayman

Task Centre Concept by Jamie Hayman in 36 Mobile UI Designs for Your Inspiration

Adune Sidebar by Gianluca Rispo

Adune Sidebar by Gianluca Rispo in 36 Mobile UI Designs for Your Inspiration

Noble mobile app design by Mateusz Jakobsze

Noble mobile app design by Mateusz Jakobsze in 36 Mobile UI Designs for Your Inspiration

Podcast App by Eric Hoffman

Podcast App by Eric Hoffman in 36 Mobile UI Designs for Your Inspiration

Pepper Mobile log in screen by Kuu Hubbard

Pepper Mobile log in screen by Kuu Hubbard in 36 Mobile UI Designs for Your Inspiration

Crown | Music Player by Pix3lize

Crown | Music Player by Pix3lize in 36 Mobile UI Designs for Your Inspiration

Ishtadevata Wireframe by suresh

Ishtadevata Wireframe by suresh in 36 Mobile UI Designs for Your Inspiration

Focus Lights by Liam Tucker

Focus Lights by Liam Tucker in 36 Mobile UI Designs for Your Inspiration

It’s sunny out there by Jonathan Quintin

It's sunny out there by Jonathan Quintin in 36 Mobile UI Designs for Your Inspiration

 

via mag.splashnology.com

Advertisement

Mobile Design Kit

Imagem

Mobile Design Kit

Free to use, real pixels screen sizes for 15 flat designed devices, in multiple colors, outlined and with grids.

danielchitu.com/mobiledesignkit.html

Opera Mobile Emulator for desktop

Imagem

Introduction

Making sure that your site looks great and works exactly as it should in mobile and tablet browsers can often be a tedious process — you typically need one or more physical devices, or some form of virtual machine emulating the whole operating system, and that’s just the start.

Our Opera Mobile Emulator for Windows, Linux and Mac makes things a whole lot easier.

It’s a small, native application that’s easy to install on your desktop machine and runs exactly the same code as its mobile phone version — that way, you can be assured that what you’re seeing on your test environment is practically identical to the experience your end users will get.

The Profile Selector

When you first open the Opera Mobile Emulator, you’re presented with the Profile Selector — see Figure 2. This Profile Selector allows you to spawn different instances of Opera Mobile on your desktop to accurately test different phone configurations, as seen in Figure 3. Here we will discuss the different options available in the Profile Selector.

Profiles

The Profile Selector comes preconfigured with a series of popular phone and tablet device profiles, such as Samsung Galaxy S IIISamsung Galaxy Tab 10.1 and HTC One X. You can then start an Opera Mobile instance using the selected profile by clicking on the Launch button.

If you want to create a new profile, select the Custom option from the profile list and set the relevant options forResolutionPixel DensityUser InterfaceUser Agent StringWindow Scale, and Arguments. When you’re all set, select the Add button under the profile selection box, choose a name for the new profile, and save it to the list. Note that you can also tweak existing profiles via the Save/save as… button appearing below the selected profile, or delete them using the Remove button.

The Opera Mobile Emulator’s Profile Selector

Figure 2: The Opera Mobile Emulator’s Profile Selector.

Resolution

Mobile phones and tablets come in varying shapes and sizes. The screen resolution can be changed by choosing between the different options in the Resolution dropdown menu. You can also create your own custom resolutions using the Add button, and delete the existing ones using the Remove button.

Pixel Density

In the same manner as screen resolution, you can choose the pixel density — which affects Opera Mobile’s default zoom factor and devicePixelRatio — using the dropdown menu in the Pixel Density section. As above, you can select options from the menu, add your own custom ones, and remove options as you see fit.

User Interface

The User Interface section of the Profile Selector contains a dropdown menu with three options to choose from:TouchKeypad and Tablet. The Touch option will give you our touch-screen phone UI, whereas choosing Keypadwill result in our UI for phones with only keypad input. The Tablet option enables Opera Mobile’s tablet-optimized touch UI. To learn more about the differences between these UIs and input modes they trigger, see the input modes section below.

Multiple instances of Opera Mobile Emulator

Figure 3: Multiple instances of the Opera Mobile Emulator with different screen sizes, orientations, and UIs.

User Agent String

This option allows you to set a custom User Agent before launching an Opera Mobile instance. Available options are Default (Opera Mobi on Win/Mac/Linux), Android (Opera Mobi on Android), MeeGo (Opera Mobi on MeeGo),Desktop (Opera Desktop).

When running in tablet mode, the UA string is slightly different: Opera Mobi is replaced with Opera Tablet, so as to avoid that sites that use browser-sniffing send a mobile/small-screen optimised version to a large-screen tablet device.

If you need to set a totally custom UA string, then this can be done as well: launch Opera Mobile with any UA string setting, open opera:config, search for the Custom User-Agent property in the User Prefs section, give it your preferred UA string value and save. To revert to the default value, simply click the Default or Reset button.

Window Scale

Window Scale allows you to display the full browser window at a percentage of its original size. This is useful when the spawned Opera Mobile instance has a larger height than the height of your computer screen and you want to make it fit inside: e.g. the HTC One X profile triggers Opera Mobile to have a size of 720×1280px in portrait orientation, which is too tall to fit on my Dell monitor. The Profile Selector knows this and therefor launches the HTC One X Opera Mobile instance at 50% of its original size, while preserving the reported width, height, anddevicePixelRatio values.

If you want to change the Window Scale value after launching, you can do this as well through the dropdown menu in the bottom right corner of the Opera Mobile instance.

Arguments

The Arguments field allows you to add various command line options to the Opera Mobile instance you’re launching. You can find an overview of the available arguments by clicking Help on the Profile Selector.

Some example arguments:

  • -displayzoom percentage: this allows you set any arbitrary window scale factor.
  • -delaycorethread delay: this allows you to delay each message in the Presto thread by a certain amount of ms, so as to emulate a slow device.
  • -url url: define a URL to open on startup.

Full browser reset on startup

Checking this box will reset all browser settings when Opera Mobile is launched, including cache, cookies, and so on.

Launching Opera Mobile instances from the command line

Depending on your workflow, you may want to start Opera Mobile instances from the command line, bypassing the Profile Selector. That is entirely possible, with various configuration options to boot. The most important ones are:

  • -displaysize widthxheight: set the window size
  • -ppi ppi: set the pixel density you want to use
  • -notouch: start Opera Mobile with Keypad UI
  • -user-agent-string uastring: set the user agent option to the specified value. Options are: Default, Android, MeeGo, Desktop.
  • -notouchwithtouchevents: same as -notouch, but it’s still possible to use the mouse for easier debugging
  • -tabletui: switch to the tablet UI

Note: For a full list of command-line arguments, see the application’s help text with operamobile --help.

So, if we wanted to run Opera Mobile as a keypad device with an FWVGA-sized screen in portrait orientation, we’d use the following commands:

  • On Windows: OperaMobileEmu.exe -displaysize 854x480 -notouch
  • On Linux: operamobile -displaysize 854x480 -notouch
  • On Mac: ./Opera\ Mobile -displaysize 854x480 -notouch

The default location of the Opera Mobile Emulator’s executable will depend on your operating system. By default, you should find it here:

  • Windows: C:\Program Files\Opera Mobile Emulator\
  • Linux: /usr/bin/
  • Mac: /Applications/Opera Mobile Emulator.app/Contents/Resources/Opera Mobile.app/Contents/MacOS/

Input modes: touch, keypad and tablet

In the Touch and Tablet User Interface, you use the mouse as if it was a finger on an actual touch-screen device. A short click activates links and controls, double-click zooms in and out of a page, while clicking for more than a second (tap-and-hold) brings up the context menu. Scrolling is achieved by clicking and dragging.

Any text entry field (such as form elements in a web page, or the browser’s own address bar) will trigger an emulated on-screen keyboard, but you can of course use your regular keyboard for convenience. If you’d like to suppress the virtual keyboard (to simulate a mobile device with its own physical keyboard), use F6 to toggle it on/off.

Emulating pinch zoom is also possible: simply scroll the mouse-wheel while holding CTRL (Windows and Linux) or  (Mac). On Mac OS X 10.6 and above, you can even use the pinch zoom gesture on the trackpad.

In Keypad input mode, the primary controls are:

  • Cursor keys can be used for spatial navigation around the Speed Dial, address bar and search field. On a web page, the cursor keys move the virtual mouse pointer.
  • F1 and F2 map to the top left and right soft keys, which activate the functions at the bottom of the screen.
  • Enter can be used to activate a control, zoom into the page, etc.

For your debugging convenience, the Keypad input mode comes with mouse interaction enabled by default (in other words, -notouchwithtouchevents is the default), allowing you to click on the different UI and page elements. If you prefer the emulator to just respond to keyboard input, you can add a -notouch argument when initiating an Opera Mobile instance from the Profile Selector.

In all input modes, ALT /  + R is used to simulate a device rotation (or you can click the Rotate screen button in the info bar at the bottom), switching between portrait and landscape mode. F5 or CTRL /  + R on the other hand reload the current page.

Also note that in all modes you can perform select all, cut, copy and paste actions using the standard OS clipboard and shortcut keys. In addition, CTRL /  + E allows you to open the last string copied to the clipboard as a URL in a new tab. You can also use TAB and SHIFT+TAB to navigate between form elements andbackspace to go to the previous page.

Features and settings of the browser

In general usage, Opera Mobile Emulator offers the same functionality available on mobile phones and tablets, including integration of Opera Turbo and Opera Link, which allows you to sync your bookmarks with our Opera Link servers and other Opera instances.

Settings, Privacy and opera:config

Figure 4: Changing settings in the Opera Mobile Emulator.

As with Opera Mobile running on devices, the Settings (Figure 4) give quick access to toggle various features and, under Privacy, to clear the history, passwords, cookies, cache and shared locations.

Power-users can enter opera:config into the address bar for complete access to all configuration options.

Remote debugging and browser automation

Using Opera Dragonfly’s remote debugging functionality, you can analyze and debug pages running in the Opera Mobile Emulator — see Figure 5.

Opera Dragonfly debugging a Web page in Opera Mobile Emulator

Figure 5: Remote debugging with Opera Dragonfly

Setting this up is a simple three-step process, which is explained in great detail in our Opera Dragonfly documentation.

Opera Mobile Emulator 12.1 is also able to talk to our browser automation library, OperaDriver. OperaDriver is an implementation of the W3C WebDriver specification and part of the free software web testing frameworkSelenium. Selenium provides a lightweight and elegant way of testing web apps by emulating user interaction with actual web browsers. For details on how to use this, see our introducing mobile browser automation Labs article.

Conclusion

We hope that with this release of the Opera Mobile Emulator we’ve made it even easier to develop, optimize and debug on mobile and tablets. Happy developing!

via dev.opera.com

Responsive Web Design is Not the Future

In 2000, The FWA (a popular website awards program) gave their prestigious Site of the Year award to Look and Feel New Media, shown below. Visit the site for some context of what I’ll be discussing, but turn down your speakers or headphones because it has background music.

The Look and Feel New Media site is a simple Flash website by today’s standards, but it was state of the art back when Flash was an innovative web technology.

Now, thirteen years later, with the capabilities of HTML5 and CSS3 standards, Flash is now on the way to extinction in the sense of, at the very least, modern web design and development.

Even Flash technology’s owner, Adobe, decided to discontinue the development of this ubiquitous rich media platform’s mobile version.

So what does this have to do with responsive web design (RWD)?

Well, responsive web design has gained an enormous amount of momentum since its introduction in 2010 through an article named “Responsive Web Design” published on A List Apart.

And the design philosophy’s popularity today is comparable to Flash websites in the early-2000s.

Let me state that Flash is a technology, whilst responsive web design is a device-independent design philosophy, so that is not a direct, apples-to-apples comparison.

However, it’s a parallel to hopefully open our minds when considering the ever-attractive design philosophy that is responsive web design.

Just as HTML survived the Flash versus HTML debate of the last decade, I believe we should not write off other mobile development techniques and alternatives just yet.

Below, I will discuss some issues I’ve come to realize with responsive web design (RWD).

Web Performance

Responsive websites are not much smaller in download size when viewed on smaller devices or screen resolutions when compared to being viewed on a desktop browser jacked into a broadband internet service provider.

Last year, Guy Podjarny, chief product architect at Akamai tested 347 sites featured on the responsive web design gallery Media Queries using Google Chrome with multiple devices, and the web-based tool WebPagetest.

He found that the web page size and load time results were nearly identical regardless of device or screen resolution being tested. The results from Podjarny’s test can be found in his presentation at BDConf.

What does that mean? Even though we might view a responsive website on a smaller screen and it displays less visible content or smaller-sized images, this does not mean that the site will load faster.

You might say, “But that’s not a big deal, mobile internet is really fast now.”

It’s true that mobile networks are becoming increasingly faster.

However, mobile internet speeds still lag behind broadband internet speeds. Currently, browsing the Web using a desktop computer is still significantly faster.

Last year, the average broadband internet speed was 2.6Mbps[1] versus only2.02Mbps[2] for the average smartphone mobile network internet speed. The year before, the average mobile internet speed was only 1.18Mbps.

In the best-case scenario, broadband internet is still 28.7% faster than smartphone mobile internet.

How important is website speed? What types of margins do we have in terms of users being forgiving of even a slightly longer load time? According to Google research, mobile users “expect their mobile experience to be as good as their desktop experience.”

The infographic by KISSmetrics below shows the dramatic impact of loading time. An e-commerce website making $100,000 per day could actually be losing $2.5 million a year with just a 1-second page delay.

Source: blog.kissmetrics.com

It’s not a far stretch to assume that dedicated mobile web development solutions is going to be more optimized than responsive web design because they specifically address mobile devices. A rudimentary comparison of dedicated mobile solutions versus RWD solutions suggests that this is true.

Of course, there are ways to optimize responsive web designs, such as serving smaller images and conditionally loading scripts, but you have to think about the performance ceiling of these optimization techniques compared to developing wesites specifically for mobile devices.

Complexity

Blame the Implementation, Not the Technique” is a great article to read.

The article, by web developer and book author Tim Kadlec, challenges the stance of some folks that responsive web design is slow compared to other solutions that cater only to mobile devices. The article argues that good implementation of RWD can address most performance issues on the Web.

We can probably make most responsive websites load dramatically faster on a mobile screen, but there is no denying responsive web design is inherently complex.

When comparing responsive websites to dedicated mobile websites — such as “m dot” subdomains like m.sixrevisions.com — there is no argument when the point of discussion is complexity.

A typical “m dot” site  is simple. It usually has a small amount of HTML, limited scripts, CSS, and images (if at all). It is built specifically for its intended viewing experience: small-screen, touchscreen mobile devices.

And if we were to talk about development time and ease, there are many web toolsthat can take your site’s RSS feed and convert it to a dedicated, mobile website.

Responsive web designs, on the other hand, are inherently complex because they are trying to support many viewing experiences without necessarily optimizing the experience for one particular device (or genre of devices).

Without going into the details, mobile browsers will have to deal with a big HTML file, and the site would need to carefully avoid running specific scripts, loading certain CSS and download large images.

Perfect implementation is possible, but avoiding over-resourcing requires scripts or code and therefore additional complexity.

A responsive website tuned for best performance would still not be as fast as a dedicated mobile website that’s implemented equally well.

Time and Money

With a higher level of complexity comes a higher resource cost.

With responsive web design, gone are the days of simple mock-ups in Photoshop and a designer’s work is done.

Responsive web design workflow is still evolving and is becoming gradually more streamlined, but currently, it’s quite impossible to complete the same website project without increasing the resources you spend.

Borrowing Viljamis’ responsive web design workflow above, you can see the workflow can start to look like Agile development paradigm or use of Scrum development framework.

The obvious issues with flexible development philosophies and frameworks has always been a higher resource cost, whether it’s the skills required, the cost required or increased client interaction demands.

UI and UX Limitations

The difference between a desktop user and a mobile user is not only screen size.

Responsive websites are limited for utilizing or recognizing key mobile features such as user location, connectivity, device limitations, software potential, and user needs.

Yes, there are many ways to create an ideal user interface and experience for several layouts with responsive web design, but there are clear limitations compared to having a dedicated mobile website.

Above, admittedly not the finest example, illustrates straightforward differences between great user experience on mobile devices (left) versus a very average user interface (right) for mobile devices.

When a different UI is required for mobile users, responsive web design becomes an obvious secondary choice to me.

Brian Fling, author of the book Mobile Design and Development puts it beautifully:

“Take an airline website, for example. Simply taking the web experience and trying to put it on a small screen doesn’t help the user at all; in fact, it has the opposite effect. If the user is on the way to the airport and needs to check whether a flight is delayed, the last thing your user has time to do is scroll around to find where to check flight times. If you’ve found yourself racing to make a flight and needing to find your flight information, such as times, gate, etc., you need that information quickly.”

Preventing Innovation

This is the danger in having tunnel vision and claiming responsive web design is the future: innovation in solutions outside of RWD might be overlooked.

And outside of RWD, there are innovations that a few companies are reaping the rewards of.

For example, the banking giant JP Morgan Chase thought about the specific characteristics of mobile devices that they could use to enhance the online banking experience, instead of simply reformatting their desktop website for mobile customers.

Their mobile app has a feature called Quick Deposit that uses smartphone cameras to take pictures for depositing checks.

According to the company, consumers have used this feature to deposit over $4 billion dollars and the app has won several awards including the highly renowned Webby Award in 2011.

Google is another good example. Despite their recommendations towards responsive web design, the tech company is into heavily developing mobile-only technology and content.

One example is Google Now for Android. It has been called “the jewel of Android 4.2”and it won the Popular Science’s Innovation of the Year.

Google could have made their content responsive and refrained from innovating. But they did not, and their business is better for it.

As smartphone sales hit an all time high, should we not be innovating for these devices?

Certainly, for types of websites with limited user interaction — such as informational sites, blogs and news sites — responsive web design is a good, and often very practical, solution.

But for websites and web apps that want to take advantage of what touchscreen mobile devices offers, can they effectively do so with a responsive web design philosophy compared to native/dedicated mobile site development solutions?

Current or Future?

You may be surprised if I told you I love responsive web design, because I do.

It definitely has its place on the Web right now.

I believe responsive web design is a current trend, but I dare not say it is the future at all.

With the rapid growth of the Web and future improvements in screen technology, it would be a folly to label responsive web design as the future.

What do you think? How heavily should we invest into responsive web design?

References

  1. “Akamai: Global Average Broadband Speeds Up By 25%, U.S. Up 29% To 6.7 Mbps” (techcrunch.com)
  2. “Global Mobile Data Traffic Forecast Update, 2012–2017” (www.cisco.com)

via sixrevisions.com