Home » Featured » Ultimate Resources For Mobile Web App Design

Ultimate Resources For Mobile Web App Design

The advancements of smartphones have improved the quality of mobile web development. It is now possible to generate entire webapps using only HTML5 and CSS3. Coupled with many JavaScript libraries the possibilities for mobile development are endless.

main

This collection is more focused on HTML5 / CSS3 / JS webapps as opposed to frameworks or native applications. The purpose is to give your mobile webapp a similar look & feel commonplace with native interfaces.

PSDs & UI Graphics

Android Interface GUI

Similar to the first GUI kit we can also find mobile elements related to Android-based native applications. Depending on how you want to style your mobile webapp these two graphics packs may provide everything you will need. Sticking with basic styles will make your designs appear more blended into the device.

k2

Passbook IOS6 App UI PSD

As for more advanced UI kits we have this awesome iPhone app design PSD. This is for a mobile app Passbook which includes a series of screenshots from different pages. The whole design is layered and free to download.

k3

Cloudy UI Kit

365psd is an amazing website which is still publishing new freebies continually every day. Going back in time a bit I want to reference the Cloudy UI Kit which is full of amazing graphical elements. We can find buttons, search bars, sliders, on/off switches, dropdown menus, and tons of other cool stuff.

k4

Mobile And Web UI Kit PSD

The “Mobile and Web” UI kit is fantastic when putting together your average run-of-the-mill interface. These are not common styles but they provide developers with an excellent starting point. The PSD is completely free to download and includes plenty of elements to choose from.

k5

Mobile Downloads UI Freebie

DeviantArt is a great community full of very talented artists. This particular freebie download includes a mobile app screen featuring loader bars. When making an advanced webapp you may need to handle avatar uploads or similar content posted by users. This window UI should provide an excellent starting point.

k6

Flat GUI Elements

The flat metro-style web elements are growing in popularity. Mobile webapps can benefit the most since they are working with very small screens. However some designers would rather not go this route and feel the more detailed graphics will catch the eye. It is worth a peek to see if these elements could work well in your own layouts.

k7

Mobile Quick Menu PSD

This freebie PSD offers a mini vertical quick menu with icon links for navigation. Theoretically the user may tap on the nav header which will animate to display more links. This is one amazing freebie and it is worth keeping in your mind for use on any future projects.

k8

Tooltip IOS App UI

Menu tooltips are not as common but this doesn’t mean they serve no purpose in an HTML5 webapp. The icons and button styles may be repeated either through images or CSS3 codes. This will give you a leg-up on the competition with a rich interface style.

k9

@2x Navbar

Another fairly obscure element is the tabbbar found on many iOS applications. Mobile websites do not often have a means of using this properly since the switching between pages would require some JavaScript. But if you are going this route you will be providing a more native feel to the application. And using this free PSD, it’ll be much easier to customize the gradient and icons.

k10

Free IPhone UITabBar PSD

This particular iPhone UI PSD kit released by Virgil Pana is an exciting look into designing native iOS interfaces. The PSD graphic includes a top title menu bar along with a footer tabbar. Plus the center tab icon is actually inflated to be larger than the rest, a common design style among iOS app developers.

k11

Mobile Templates

Google Play/Android App Icon Template

And in a similar vein we also have a beautiful Android app icon template for designers. This is also a free download and the PSD is set up much in the same way as above. However the standard icon sizes are much different compared to iOS. And if you are developing for both platforms you will want to check them out anyhow!

k12

Lookamore

The Lookamore Android UI Kit is absolutely stunning when it comes to basic templates. You will definitely want to check out the entire freebie which is full of PNG icons and other mobile elements. The resource includes HDPI resolutions which are even better on hi-res screens.

k13

Android UI Template For Fireworks

Developers who are going after the Android graphics style will want to look into this UI kit for Adobe Fireworks. It is a free download and provides an excellent source of common screens for your mobile webapp.

k14

Illustrator Template For IPhone

For users of Adobe Illustrator this iPhone template design will be a much smoother transition. The UI kit is more of a wireframing template for mobile webapps. You can choose from a dozen various screens and manipulate the elements to fit perfectly with your own layout.

k15

Android Sketch Stencil

These Android stencils are another tool for building your core wireframe. Keep in mind that your mobile webapp does not need to mimic either of the mobile operating systems. But it does help using the default elements as a starting point for your projects.

k16

Wire Devices Freebie

The wireframe devices are a nice tool when originally building templates for various smartphones and tablets. I do not think this is a freebie which will help everybody. But it is worth looking into the details if you plan on launching a multitude of mobile webapps.

k17

Icon Sets

30 Free Vector Icons

To start off the icon sets I found this beautiful collection of vector icons from Dezinerfolio. Since the icons are vector-based they may be easily resized and positioned for retina devices.

k18

Gemicon

The Gemicon set has to be included within this series of resources. Their pack offers over 600 icons which are beautifully crafted and will fit into any layout with ease.

k19

100 Retina Glyph Icons

Just recently Speckyboy published a collection of free retina glyph icons for mobile designers. These icons may be used anywhere in your layout and can also be placed @2x for high DPI screens.

k20

MFG Labs Icon Set

MFGLabs has a good track record of releasing freebies into the design community. The landing page really stands out as you can see how these icons may be placed into a typical layout style. Grab a free download of the pack and toy around in your own time.

k21

Android Developer Common Icon Set

Most of the collections we have seen pertain towards Apple-inspired iOS icons. However the Android GUI pack also have a lot of native icons you can find. And this freebie set is perfect for mobile developers who are looking to mimic the Android interface feeling.

k22

Clean Icons

Clean Icons from IconDeposit are a bit too small for use in tabbar elements. But they are just the right size and shape for interface features and toolbar buttons. The graphics are colored white to gray but you can update the colors & effects in Photoshop.

k23

350 Freebie Glyphs

The brankic icon set includes over 350 glyphs for use anywhere in your mobile webapp. These were originally designed as iPhone tabbar icons but they are perfect for any interface. Check out their gallery and you may be surprised at the many variations.

k24

Rectangle Icons

The rectangle icons are another solution for bare content aesthetics. These can easily be updated in size and color, plus they will fit nicely into any mobile layout.

k25

Online Tools

MakeAppIcon

MakeAppIcon is possibly the greatest tool online for mobile developers. If you do not have the time for resizing and creating the different icons, this webapp will handle the job for you. It is completely free to use and will work with all the common icon formats.

k26

Mobile HTML5

Mobile HTML5 isn’t as much of a webapp as an online resource. Their page is coded with a graph displaying all the differences in rendering mobile HTML in browsers. This takes into account many of the different iOS apps, along with Android-based web browsers.

k27

HTML5 Mobile Webapp Videos

Treehouse is a new online learning library which helps developers to pick up new skills. Their video library includes CSS3, HTML5, jQuery, and even Objective-C programming. This page in particular handles HTML5 development for mobile web applications. Check out some of the features to see if you would be interested in studying any of the topics at hand.

k28

Manymo

Manymo is an online tool for emulating mobile browsers. You can double check if your webapps are behaving properly without even owning the original devices. The basic services are free to use and generally provide excellent results.

k29

Initializr

If you do not have a bare-bones HTML5 template then I recommend checking out Initializr. It is a free web tool which will bundle and package HTML5/CSS3 codes as a template for your projects. This will save you time during development and dramatically cuts down your coding requirements.

k30

Open Source Code

IOS.Js

iOS.js is a powerful JavaScript library which updates the look and feel of your webpage. It will force certain features to behave as if they are rendered natively on an iPhone. There is very little support for non-JavaScript users but it’s a nice library worth some attention.

k31

JQuery NiceScroll

jQuery Nicescroll is a really cool plugin for mobile web developers. This will add native scrolling bars onto any elements you choose. These are much better than the Mobile Safari toolbars which extend up into the browser header.

k32

Lungo

Lungo is an HTML5 cross-device framework for building native mobile webapps. It is supported by Android, iOS, BlackBerry, and Palm OS. The codes are fairly easy to implement and definitely worth checking out when you have the time.

k33

IOS ScrollPane

You know how you can flick left/right on the iPhone home screen to switch between icons? This exact effect has been duplicated for the web as a jQuery plugin. iOS ScrollPane is a free resource for your webapp to duplicate the same home screen effect.

k34

PhotoSwipe

When comparing mobile responsive slideshow plugins I will have to recommend PhotoSwipe. Their documentation is very simple and the support is phenomenal. Both smartphones and tablet PCs will benefit from this jQuery plugin.

k35

Tags :
Uzabila

About Uzabila

Web Design, WordPress developer & enthusiast. Co-Founder of CreativeVerse.com

Leave a Reply

Your email address will not be published. Required fields are marked *

*

If you are not a robot - solve an example: * Time limit is exhausted. Please reload the CAPTCHA.

Scroll To Top