[WEB] Ultimate Resources For Mobile Web Application Design

Ultimate Resources For Mobile Web Application Design

 

 

http://www.hongkiat.com/blog/webapp-design-resources/

 

 

Ultimate Resources For Mobile Web Application Design.mht

 

 

High Res Aerial Mappingwww.Aibotix.com Multi-rotor with GPS Autopilot Navigation and heavy payload

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.

In this post, I have put together just over 70 resources for developing mobile websites and web applications. 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.

Recommended Reading: A look into: Designing for Mobile Devices

PSDs & UI Graphics

Free PSDs are generally the most helpful assets to web developers. If you are not savvy in Photoshop then it can be stressful attempting to design a beautiful interface. Likewise this set of graphics will include plenty of buttons, forms, textures, toolbars, and other helpful GUI kits.

iOS 6 GUI PSD

The mobile GUI kit by Teehan+Lax is an infamous resource for all mobile developers. Even native iOS programmers genuinely enjoy this mobile kit for the precision of each element. All of the buttons, gradients, dropdowns and menus look exactly as they would on a native iPhone 5.

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.

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.

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.

Fresh iPhone UI Kit

The designers over at MediaLoot publish both free and premium content. However a lot of their free content is still of exceptional quality. This UI kit is labeled Fresh iPhone and displays a helpful iOS app design. You can work with the PSD graphics to duplicate similar title bars and gradients/textures in your own webapp.

@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.

Leather iOS Menubar PSD

The top toolbar design is also a prominent area of screen real estate. Especially for mobile applications where you do not often have room for a big flashy header. Check out this free PSD which offers a leather textured iOS-style top menu bar. It has easy customization for different color schemes and provides a much cleaner UI for developers.

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.

Raindrop iOS Toggle

Toggle switches are actually native to iOS devices but not found anywhere in HTML5/CSS3. Using this PSD graphic you may attempt to build a similarly styled toggle switch with a more pleasing color scheme. The backgrounds are much deeper than the normal interface elements plus the text is also larger and easier to read.

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.

Map Pointers

So many native Android and iOS applications will focus on geolocation. HTML5 web applications have also been created around APIs such as Google Maps. And these mini map pin icons are the perfect companion for any style of mobile webapp.

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.

Mobile iOS App Navigation

Some mobile designers will use a fixed top navigation bar as opposed to mirroring the iOS tabbar effect. This free PSD graphic is built around the very idea of mixing the tab buttons into a fixed toolbar. You can update the gradients and icons to blend nicely into any theme.

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.

iPhone Wood UI

The wood texture is another great feature we will find all around the Web. Both full-screen websites and mobile apps have been pushing out more interest towards detailed textures. This PSD freebie has some tabbar icons and a top toolbar which is worth checking out.

iPhone App UI Freebie

We saw a similar mobile iPhone UI PSD earlier in the list and I want to mention this kit as a companion. The features here are dialed down to appear more commonplace. The gradients and buttons are very simple and will match almost any design type.

Twitter iOS App Icon

The iOS app icon style is brilliant and reflects the current advancing era of technology. I feel this PSD freebie is a good piece of design inspiration for young app developers. It is very simple to apply meta tags into your HTML5 webapp for styling a custom iOS icon graphic onto your user’s homescreen.

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.

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.

UI + UX Mobile Fold

Recently we published an article explaining how to build a sliding mobile nav just like this PSD. By using a bit of jQuery the process is very simple and does not require a lot of development knowledge to implement. Check out the freebie and see if you think this would be worth investigating.

Mobile Templates

The process of sketching out your mobile webapp can be difficult. It is often more tempting to jump right into coding and detail the layout afterwards. But taking the time out for planning your results can be a huge help. This small collection of mobile stencils and wireframes should help you out with this task. I have included wireframing templates for both Android and iOS devices.

iPhone 5 Homescreen Template

Would you want to check out how your app icon will look like on the homescreen of an iPhone? This free PSD template is the perfect solution. Attach your app icon into the PSD and scale it down to overlap the blueprint icon. You can get a sneak preview and this provides a nice graphic to be published somewhere on your website.

iOS App Icon Template

Almost every iOS designer/developer must know about Michael Flarup’s iOS Icon template over at Pixel Resort. Recently he purchased a top-level domain for AppIconTemplate.com where you can download this free PSD. I must 100% recommend grabbing this freebie if you plan to support your mobile webapp to be saved onto the iPhone homescreen.

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!

AppView iPhone UI Theme

I like to think of the AppView theme as more of a template for minimalist designers. This PSD set will include all of the typical interface elements you expect to find in iOS applications. It makes the perfect starting ground for adding your own content and setting up basic page templates for your webapp.

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.

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.

iPhone 5 Grid

When constructing your basic webpage template, this grid PSD may be of some use. The iPhone 5 is everywhere and lots of Apple enthusiasts have already picked up the new technology. The horizontal grids should fit similar into iPhone 4 and 4S devices, so it makes for a revolutionary template.

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.

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.

iPhone Sketch Elements AI

Similarly you can find Adobe Illustrator elements and stencils used for iPhone app interfaces. These AI kits will include vector sketches which may be resized and scaled down without any quality loss.

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.

Interface Sketch

I just recently found this Tumblr page which is full of helpful freebies. These templates are actually loaded into Google Drive and they are all free to use. Another example of something which may not help everybody, but these interfaces will be useful to a specific sect of designers.

iPhone App PSD Template

This freebie iPhone app PSD template is courtesy of PixelsDaily. Their library includes many helpful mobile graphics but this particular iPhone interface offers a tabbar and icon sets. Plus a homescreen and content page design for your own customizations.

Icon Sets

What mobile webapp would be complete without a series of related interface icons? Think about all the places you will find these glyphs and symbols. The top navigation toolbar and bottom tab bar areas will frequently use icons to represent button actions. Plus you may embed icon sets into your page content for a more visual approach on mobile screens. Most of these collections will include a retina version along with the standard icon sizes.

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.

Free iPhone Toolbar Icons

PixelPress Icons are actually marketed as iPhone app toolbar icons. The glyphs are styled as white-to-grey and should be used on a darker background. Also the icons are totally free for personal and commercial use.

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.

Free iOS Tabbar Icons

Another series of perfect iPhone toolbar app icons. When redesigning your ideas for an iPhone UITabBar in HTML5/CSS3 it may require a lot of extra time squashing bugs and UI fixes in different browsers. But with such powerful interface features it will be worth the effort.

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.

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.

Web0.2ama

These well-designed icons are also useful in typical mobile content areas. Not all mobile webapps will need loads of icons aside from interface features. But the collections are all free of use and free to download.

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.

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.

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.

IconBeast Freebie Pack

The IconBeast freebie pack is also full of beautiful glyphs for iPhone tabbars. The grey-colored pack includes over 300 icons which are sized out for retina devices.

Device Storage Icons

This mini device storage pack really stuck out to me and I wanted to include the set here in our mobile resources. These are monocolored icons which fit nicer into your content, in paragraphs, or in menu buttons.

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.

Shades of White

The Shades of White are strangely built for a more deeply colored background. This BG may be your iOS-style title bar. But it could also include a content widget or webapp footer area.

Icns Free PSD

As opposed to the other icon sets, this pack is built into a free PSD as opposed to vectors or PNGs. This means you have the ability to move the icons and update their sizes, colors, and textures right inside Adobe Photoshop!

Native Android Icons

Finally we have some more native Android-based mobile UI icons. This freebie is an excellent addition to the set which is mostly controlled by iOS styles.

Online Tools

Admittedly there are not as many online tools and webapps used for building mobile sites. However the tools which are online can provide lots of help in expediting the development process. Web tools can make your job easier by providing HTML5/CSS3 code templates, icon generators, smartphone demos, and lots of other goodies too.

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.

Icons DB

If the icon sets listed above are not enough you can always check out the Icons DB. Their database is packed with new open source GPL icons for use in your own applications. Just do a search on the website or click any of the related tags in the sidebar.

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.

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.

Mobjectify

Mobjectify is a mobile wireframing toolkit which works directly in-browser. Just navigate onto the homepage and you will be setup with your own workspace. It is a fun tool even if you are not familiar with the wireframing process.

Mockup Designer

Mockup Designer is a tool hosted at Github which is free for everybody. They provide very basic interface elements for structuring your own layout. Extremely helpful if you are just getting started building layouts for mobile webapps.

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.

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.

Open Source Code

The final piece to building a mobile webapp is the code. All frontend developers have at least heard about responsive web design. I want to point out this is not always the way to go when building mobile webapps. However many of these plugins and code frameworks allow for mobile responsive web design, which is great when supporting desktop browsers too. You will also find code snippets which mirror the native effects of Android and iOS smartphones.

Jo Mobile Framework

The open source Jo framework provides an easy solution to HTML5 mobile webapps. Not all developers will feel comfortable using a framework. But it is a solution if you are interested in testing other 3rd party templates.

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.

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.

iTabbar

Remember all those tabbar icons and glyphs we provided earlier? They can be used in conjunction with this free script iTabBar. This will provide a basic HTML5/CSS3/JS framework used in creating mobile webapps with the need for tabbed navigation.

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.

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.

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.

iOS-Style jQuery Mobile Theme

Another awesome package on Github is this iOS-style jQuery Mobile theme. Most frontend web developers know about jQuery Mobile which offers a dynamic HTML5/CSS3 mobile interface. If you enjoy their library then you’ll definitely want to try out this theme which replicates iOS native applications.

jQuery slideToucher

slideToucher is a jQuery plugin for adding swipe-to-slide panels into your mobile app. These will not work the same in your desktop browser with the mouse navigation. So although this plugin can be great for mobile users, it is not ideal for responsive websites.

Sencha Slide Navigation

Sencha Touch is an exciting mobile HTML5 framework used for building in-browser webapps. This code will help you implement a sliding navigation feature into any Sencha mobile app.

LimeJS

Along with the typical mobile web applications there are lots of designers who are interested in HTML5 mobile games. This open source Lime.js library is an HTML5 framework for in-browser games. It supplies native touch gestures and it also supports powerful extensions through JavaScript codes.

Custom Content Scroller

Out of all the jQuery plugins here I think the Custom Content Scroller is my favorite. This will mimic the iOS style of sliding content which may be applied onto any div or section on the page. You can swipe to scroll or click & drag on the semi-transparent OSX-style toolbar.

Junior Framework

Junior is a much more polished and refined HTML5 framework for building mobile webapps. Their website has a lot of demos and the documentation is very easy to read. It may require a bit of initial upfront work to nail down the basics, but it is a step forward in supporting mobile HTML5 webapps.

iOS-Style Checkboxes

We all know about the native ON/OFF switches found within iOS. This jQuery plugin will allow you to style any input form checkbox element to behave like a slider. The codes are free to download and very easy to get going on any website.

Luckyshot HTML5 iOS Template

The Luckyshot template is a free open source HTML5/CSS3 project for building layouts similar to iPhone and iPad applications. The whole framework is built without any JavaScript and it is fully responsive to fit naturally into all monitors and mobile screens. Anybody looking for an HTML5 solution to natural iOS webapps should definitely check out the Luckyshot framework.

Final Thoughts

This exhaustive collection of mobile codes and GUI kits should provide a library for new developers. As trends advance we will likely see a whole new onslaught of tools and resources being published online. I am hoping this guide will offer a bold starting point to getting your webapp idea launched on the right foot. But if you have any questions or additional resources we may have missed, feel free to share your thoughts in the post discussion area.

You might like:

1. Mobile App Design/Dev: Beginner’s Guide to jQuery Mobile
2. Mobile App Design/Dev: Custom Themes with jQuery Mobile
3. Mobile App Design/Dev: Building Navigation with jQuery
4. A look into: Designing for Mobile Devices