G$earch

20 Beautiful Mobile User Interface Your Inspiration

Posted by Harshad

20 Beautiful Mobile User Interface Your Inspiration

20 Beautiful Mobile User Interface Your Inspiration

Posted: 05 Sep 2013 08:01 AM PDT

Designers of mobile interfaces are becoming more prominent in today’s faced-paced web space. While mobile-optimized sites may lighten the burden on a site developer, some prefer building a full featured app instead.

App designers and developers are in high demand now particularly in user interface. UI design focuses on user experience and interaction, and while being easy-to-use is important, an attractive yet still practical design is essential to the success of an app.

Today I’d like to show you some mockups, sketches, buttons, tables, splash screens, and many more examples of iPhone app (UI) designs for your inspiration. If you’re familiar with iPhone or iPad designing, you’ll recognize all these terms above. So, let’s get inspired!

Recommended Reading: Design Killer Mobile App Websites: Tips And Examples

1. iOS 7 UI Components by GraphicBurger

2. Flat Design UI Components by GraphicBurger

3. Free Flat UI Kit by Enes Daniş

4. Free Color UI Kit by Cüneyt ŞEN

5. Free Flat UI Kit by Wahib El Younssi

6. iOS7 inspired UI kit by Kreativa Studio

7. iPhone Chat App by Ramotion

8. Profile Tasks View – iOS/iPhone by Jason Wu

9. Stupid iCalendar by Paresh Khatri

10. App Yohago Descuentos by Patricia Campuzano

11. iOS UI DESIGN by Bhaktisudha Naithani

12. Mobile app Launchcard UI/UX by Sergio Povea

13. AirBlue – Flight Ticket Booking App by fida khattak

14. Vintage iOS UI Kit by PixelKit

15. UI Kit by Al Power

16. Apex Series: Apex One by Roy Soetantio

17. Screen App concept by Falcon White – Designagentur

18. Linkedin Iphone by Tony DeAngelo

19. WIP fitness app iOS 7 by Cuberto J

20. MyDay – Main Screen by Dmitry Prudnikov

Related posts:

  1. 8 Next-Generation User Interface That Are (Almost) Here
  2. Showcase of Weather App UI Design For Your Inspiration
  3. Evolution of Video Games User Interface (UI)
  4. Showcase of Beautiful Flat UI Design


    

7 Tips To Better Mobile-Optimized Websites

Posted: 05 Sep 2013 06:01 AM PDT

More and more people get online through their smartphone and tablet these days. So, it is important that we as designers and developers address how our websites are displayed on these devices. In this post we will see several components that you need to include to make your website optimized and accessible on mobile devices.


(Source: Responsive Web by Chris Bannister)

1. Meta Viewport Tag

The meta viewport is an HTML tag for specifying viewport width and controlling page scale. Using this tag, we can set the page zoom when it is first loaded, the maximum zoom allowed for the page, and also disable zoom capability.

Below is an example of how we commonly add meta viewport tag inside the <head>.

 <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

You can also add it inside your stylesheet this way:

 @-viewport { width: device-width; }

The meta viewport tag is an indispensible tag (together with Media Queries) if you are building a responsive website. However, you can technically set viewport meta tag for non-responsive web design all the same.

2. Media Queries

Media Queries let you shift the styles of your website at specified break points. Not everything from your website can properly fit on a narrow viewport size of a mobile device.

By using Media Queries, you can add specific style rules for specific viewport width. We can also apply styles based on the screen orientation and the screen pixel density.

You can embed Media Queries either directly in the stylesheet link:

 <link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 960px), projection" href="style.css" />

Or code it inside the stylesheet, which is the most common way used by developers.

 @media screen and (max-width: 960px) { /** Style Rules here **/ }

3. Modernizr

Modenizr is a JavaScript for browser/device feature detection. Browsers vary and they may or may not support certain features. When building a website for mobile you probably will use new and cutting edge features of CSS3 and HTML5, which unfortunately are not supported in earlier browsers (not everyone uses the latest of browsers).

Modernizr allows you to give fallback of functions and presentation for less capable browsers by adding extra HTML classes in the body tag and a set of method.

Check Out: Getting Started with Modernizr

4. TouchSwipe

TouchSwipe is a jQuery plugin to enable touch interaction for websites (phone or tablet). It supports a set of common gestures like Swipe, Pinch, Zoom and Scroll.

With more devices dropping physical keyboards and enabling the screen for touch, you should consider applying this plugin on your website for a better and richer user experience.

Read Also: A Look Into: Building Websites For Tablet Users

5. iOS Icons

The first thing you see after unlocking your iPhone (or iPad) is the app icon. Apart from app icons iOS will also display icons for websites that have been added on the Home Screen.

To do this for your website, simply add the following link element within the <head> tag.

 <link rel="apple-touch-icon" href="touch-icon-iphone.png" /> <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" /> <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-retina.png" />

Alernatively, you may remove those link elements, but ensure that the icons are saved in the root directory, and prefixed with apple-touch-icon-* on its name.

Check out: Easily Generate Android Or IOS App Icons With MakeAppIcon

6. Splash Screen

Splash Screen is the first image that is displayed when users start an application. The screen tells the users that the app is loading. It is common to use the Splash Screen as an opportunity to show off brand identity.

To add it to your website, simply insert the following lines at the <head>.

 <link rel="apple-touch-startup-image" href="splash-screen.png" />

When users open your website through the Home Screen, the image assigned in this link element will be displayed briefly before users see the whole website.

Although using Splash Screen to display brand is actually against the guideline, but as long as the the Splash Image is very well designed and loads briefly, it can gives better user experience and adds a cool factor to your website.

7. Windows 8 Pin Icon

Windows 8 and RT also have the same feature of adding icons when a website is pinned at the Home Screen. In Windows 8, this is called Pin Icon.

Unlike in iOS, which uses link element, Windows 8 uses meta tag to add icons. Here is an example.

 <meta name="msapplication-TileColor" content="#000"/> <meta name="msapplication-TileImage" content="icon.png"/>

The first meta is defining the Tile Color, and the second is referring the icon image. There is a site called Build My Pinned Site that allows you to generate this meta tag easily.

Final Thought

The mobile device revolution have changed the way we, web developers, build websites. And, at least, these elements that we have discussed above should be included in your Web document to make your website turn out well for viewing on mobile platforms, like iOS and Windows 8.

Related posts:

  1. Strikingly: Create Beautiful Mobile-Optimized Websites Without Coding
  2. Responsive Web Layouts for Mobile Screens: Intro, Tips and Examples
  3. Design Killer Mobile App Websites: Tips And Examples
  4. UI Design: Applying CSS Based on Screen Orientation


    

Keep Files Organized &#38; Accessible On The Cloud with Doctape

Posted: 05 Sep 2013 03:01 AM PDT

What do you look for when it comes to file sharing services or apps? Security and privacy of your files, accessibility and functionality to quickly share to others and of course, file organization, so it’s not just a pile of clutter. If you’re looking for an all-in-one service, you can check out Doctape, a new cloud storage competitor.

Doctape

Doctape comes with 5GB of online storage after registration, for more storage, recommend a friend and you can earn 500MB (for up to 5GB). On top of its web app, It also has an app for Mac, Chrome and a mobile app that’s currently supported on iOS only with Android on the way. Here are all the cool features Doctape has to offer.

Recommended Reading: 10 Free Apps To Convert PDF On Smartphones & Tablets

Getting Started With Doctape

You’ll first have to register for an account at Doctape before you can log into the iOS app.

Adding Files To Doctape

You can now begin adding files onto Doctape through the web app. It’s as simple as dragging and dropping multiple files into the Doctape website.

Doctape

Another way to upload your files is by sending an email with attachments to your special Doctape email (it looks like username@my.doctape.com). All the attachments sent to this email will then be uploaded to your account. The email upload feature is useful as other cloud storage services normally require third-party services in order to do this.

File Type Support

Doctape supports a large list of files that include zip, audio, video, document, image and vector file types. These files are ‘converted’ so that it can be viewed (but not edited) on the Doctape website and on the smartphone app. Don’t worry about your original files, they are still intact and can still be downloaded again at a later time.

File Support

Organizing & Sharing Your Files

By default, Doctape automatically organizes your files by file types so it is easy to look for specific files. A cool feature that Doctape has is the ability to organize your files using tags which you can assign to your files, giving your more organization flexibility.

They also have a special tag for sharing your files called Tapes. Tapes allow you to prepare all your files before sharing it with your teammates. When you are compiling the correct files and group member emails, the status of the Tape is grey (pending-project).

Tags

This tape file organization is unique and unlike any other cloud storage service out there. Once everything is set, you can make it ‘live’ by clicking on the gear icon next to the Tape.

Making it live sends a email notification to all the shared members and allows them to view the files. Users who you share Tapes with have to register for a Doctape app in order to view the files.

Live Tape

If however, you just want to share a link so that others can view your files, you can make a file public by clicking on the arrow next to Share and select Make public. This gives you a simple link to share it with anyone.

Public Share

Full-Featured App & More

Doctape’s iOS app is simple to use and yet impresses. All the features and controls found on the Doctape website can also be accessed on the iOS app.

  • You can view your uploaded files on the app
  • You can also upload photos by tapping the + at the top right corner
  • Upload other files from other apps by opening it in Doctape.
  • Swipe right to left on a file to add tags, share it with other Doctape users or with a public link.

Doctape App

Integration With Google Doc

Doctape also allows you to edit basic documents with Google Docs. An edited file will be uploaded to Doctape leaving your original file untouched. This is cool because some other cloud storage services don’t have the option to edit documents through the web or mobile app.

Doctape Viewer iOS App

Another app that works well with Doctape is Doctape Viewer. It works with other online services like Dropbox, Google Drive, SkyDrive, Box and even Facebook, Instagram and Gmail. Once you’ve linked all these services, you’ll be able to grab your files off them and view it on Doctape Viewer. Doctape Viewer supports over 80 file types including PDF, Microsoft Office, Open Office, audio, video and image files.

Doctape Viewer

Related posts:

  1. How to Manage Files Across Different Cloud Storage [Android]
  2. Attach Cloud Files Into Gmail (On The Fly) With Cloudy
  3. Getting started with Amazon Cloud Drive
  4. Share And View 200+ File Formats With Jumpshare


    

|

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)