Many mobile developers use gesture icon sets, or interaction icons, to show new users how to use a new application, or to bridge the learning gap of any new features, making them critical to a mobile application’s user experience and popularity.

By using standardized gesture icons, or interaction icons, across various operating systems (iOS & Android) and devices, designers can create UIs that are easy to use, thus making them user-friendly and accessible.

In this collection, we have fifteen free gesture icon sets for you. The gesture icons come in many different styles, sizes, and, most importantly, formats (Figma, Sketch, PSD, SVG, and EPS). And just like all free resources, please check the license of each icon set, as they can change from time to time.

The post 15 Free Gesture Icon Sets for Mobile App Designers appeared first on Speckyboy Design Magazine.

It is fascinating to watch the mobile marketplace soar with new ideas and creations. And I hope these app icon designs may also be relevant for years to come.

Loose Leaf App

Jackal Game

Android Market

Vegetables Tree

Big Speaker

Electric Range

Spotmote

Alta Sartoria

Filmoteka

Android Tickets

Wake App

Atari Joystick

Dream Journal

TriFit for iOS

Android Car Icon

Planets Game

Flat Notepad

Vinyl Music

Cinnamon Roll App

The Island Beach

Direction

Trails App

Dream Journal Alt

Vital Agenda

AudioEngine

Honk Icon @2x

Colourful App

Modern App Concept

Mobile Speaker

Miaochuan Icon

Wooden Bookmark

iOS Rattle

Private Journal

Camerapp

Chocolate Pastry

Wooden Window

Solitaire App

Messages App

Lapse Time App

Jacket Icon

Guitar App

WholeApp

Coca-Cola Machine

Old Fashioned Hot Dogs

Grill App

Whey Gold Standard

Watercolors

Play Button

Chess App

Bowling App

Thermostat

Pancakes App

Digital Printer

USB Flash Drive

Lifelimit App

Dark Laptop Bag

The post 50 Beautiful Mobile App Icons for Design Inspiration appeared first on Speckyboy Design Magazine.

This quick tutorial will cover one approach to creating resolution-independent scalable images that will look great on any screen at any resolution.

The Process

A project I am currently working on requires a simple home icon. To begin the icon design process I always follow the same steps.

Visual research

I always start by jumping into Google and doing an image search. This helps stimulate ideas in terms of form and stylistic treatment. The focus here is on ‘inspiration’. Just mimicking nice examples you find not only creates a risk of litigation but can drain your creative motivation.

Icon research

Searching for the term ‘Home icon’ resulted in a very clear direction. Whilst it is good to be original and not follow the other sheep, it is far more important that the icons fulfil their purpose. Icons need to be intuitive and ultimately instantly recognisable. Usability is vastly improved if you use familiar conventions that people don’t need to think about. They should instinctively know what the icon represents.

The problem

Using raster images (.gif, .jpg, .jpeg) at a resolution of 72dpi has long since been the standard approach for creating web icon graphics. This is fine if you know the icons will only ever be displayed on a standard resolution screen (72 dpi) and there is no requirement for zooming or scaling. The new iPad has now thrown a spanner in the works, causing your 72dpi raster images to look fuzzy and pixelated compared to the crisp, clean appearance of text and other html elements. This contrast in visual quality can dramatically deteriorate the look and feel of an icon.

Problem with raster images on the iPad

One solution could be to detect the screen resolution and serve larger images but this will bloat the file sizes and add yet more http requests, further slowing down page download times. The more elegant solution is to create icon graphics that are resolution-independent. Enter Scalable Vector Graphics!

SVG

Poor old Scalable Vector Graphics. It’s been an official standard since before Internet Explorer 6 was released yet has never gained much of an audience on the web, certainly not the audience it deserves. Just as SVG was beginning to establish browser support, along came the canvas tag, stealing the thunder of dynamically generated client-side images. Despite all the attention being paid to canvas, there’s still a place for good old SVG, particularly for developers looking to replace plug-ins like Flash for data visualization or ensure graphics look crisp at any resolution.

Wikipedia definition:

“Scalable Vector Graphics (SVG) is a family of specifications of an XML-based file format for two-dimensional vector graphics, both static and dynamic (i.e. interactive or animated). The SVG specification is an open standard that has been under development by the World Wide Web Consortium (W3C) since 1999.”

An open language for an open web

The web is all about open standards and unencumbered technologies. W3C standard SVG fits the open web perfectly. An added bonus is that SVG graphics, in the majority of cases, have a much smaller file size than their raster counterparts.

The icon

Following the visual research phase, it became immediately apparent what the form off the icon should be. In the context of this project the style needed to be simple and minimalistic.

Having a clear picture in my mind of how the final icon should look I jumped into Adobe Illustrator 5 to create my SVG home icon.

To begin with I created the individual components required for the home icon.

Once the icon components are ready, it’s simply a case of combining them into a single icon, then simply save the icon using the .svg extension.

SVG in the browser

Now that we have a low file size, resolution-independent, scalable icon, it’s time to implement it into the web page.

This is a simple task following the same approach as used with raster graphics: by using CSS to apply the SVG icon as a background image. In this case it will be an html link.

The HTML

<a class="btn_home" href="#"></a>

The CSS

a.btn_home
	{
	background-color:#FFF
	width:45px;
	height:40px;
	position:absolute;
	top:20px;
	right:0px;
	margin:0;
	z-index:999;
	background:url(../images/icon_home_svg.svg) #FFF center center no-repeat;
	background-size:30px 30px;
	cursor:pointer
	}

The result

We end up with a neat, standards-based solution to our original problem. This will look good at any screen resolution, and retains a very small file size. As it’s driven by CSS as well as SVG, there’s plenty of flexibility to achieve different effects and to fit in with different designs without having to alter the SVG file.

The post Web Icons & the iPad Retina Display appeared first on Speckyboy Design Magazine.