icons & UI design : tip, tools and ressources

< Développement Web <
TwitterFacebook
Get flash to fully experience Pearltrees
As promised, here is the basic template for the A4 single page set of identity guidelines for a general logo design. You can download below. It covers the basic essentials that a client needs to keep the identity looking consistent and to avoid abusing the use of it such as distorting the image, changing colours, changing fonts etc. 3 Styles Since first posting this, I have now updated the download to include 3 styles of identity guide.

Logo identity guideline template for download

http://imjustcreative.com/logo-identity-guideline-template-for-download/2010/04/15/
Using @Font-face and Unicode for icons

• Design usable application interface with hundreds of common GUI elements : just drop them from Illustrator Panels or pick them in the library files. Illustrator CS2 file format - Zipped pack : 2,6 Mo • The GUI elements are based on common interface patterns (accordion, expandable panel, progress bar, tags, slide show…). • They integrate usability good practices and are perfect for wireframes design. • They are also a good start for interface application design : the appearance is consistent, they are easily customizable and all states of interaction are provided. • A pixel precise icon collection created for interface designers and web designers.

User Interface Design Framework | 260 free vectors icons, GUI graphic library for web design

http://www.webalys.com/design-interface-application-framework.php

SOFA - The Versions Icon

http://www.madebysofa.com/blog/versions-icon/ This week I’ve decided to take you through the development of the Versions icon. For those who need some indication of the work involved in creating an icon, you may get a feel for it. Although this was an in house project and we weren't bound by any deadlines, this article still illustrates the lengths we take to create a strong visual brand. Important to know is that, long ago, Versions had an other icon. It was designed by Jasper Hauser even before Sofa was founded.
Let’s say you’re working on an icon for an iOS app. The app is universal, so it should run on all iPhones (and iPod touches), and on the iPad. As a designer, you’re used to drawing icons at various sizes; this is a big part of what “icon design” is (as opposed to other types of illustration). ( Click for full size ) http://mrgan.tumblr.com/post/708404794/ios-app-icon-sizes

All the sizes of iOS app icons - Neven Mrgan's tumbl

http://hicksdesign.co.uk/journal/principles-of-icon-design I’ve never over-run on a talk. Ever. Usually I embarrasingly finish around 10 mins early, leaving plenty of time for questions.

Principles of Icon Design | The Hickensian | Hicksdesign

http://www.campaignmonitor.com/blog/post/3234/designing-campaign-monitor-ios-icons/

Designing the new Campaign Monitor iOS icons - Blog - Campaign Monitor

One of my first icon projects for Campaign Monitor was to create a set of Apple iOS icons for our mobile web application . These are the icons that show up when you bookmark our mobile site to the ‘home screen’ on your Apple device. Now, with all of the iOS devices floating around out there, you can do things the easy way by creating one large icon which is then scaled down for that particular device, or you can do it properly by creating a pixel-perfect icon for each device. For the iPod Touch/iPhone 2.5/3G/3GS, the icon size is a miserly 57 pixels square. For the iPad, it’s 72 pixels square, and for the newer iPhone4, it’s a whopping 114 pixels square. The challenge with iOS icons, or for that matter, any icon that will be used at multiple sizes, is that you need to come up with an idea that is memorable and interesting, whilst keeping things clear and concise enough that it is still recognisable at smaller sizes.