Icons & UI design : tip, tools and ressources

Facebook Twitter
Let’s look at improving your site’s performance by reducing the number of HTTP requests it makes. We’re going to take advantage of a technique known as the data URI scheme; encoding both images and fonts into pure data strings that can be directly integrated into your markup and stylesheets. Thumbnail: The Broccolidryiconsaniconsetitisfullof…icons by Visual Idiot (we’ll be using these icons in a minute..) The What, Why and How of Data URIs in Web Design The What, Why and How of Data URIs in Web Design
New Four Page Guidelines Template For Download 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. Logo identity guideline template for download Logo identity guideline template for download
Using @Font-face and Unicode for icons

SOFA - The Versions Icon SOFA - The 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.
SOFA - Sofa Icon
Update: iOS 7 introduces a number of new app-icon sizes. The specific sizes mentioned in this post may not be useful any longer. However, feel free to read on for some basic theory about icons, regardless of size or intended use. Let’s say you’re working on an icon for an iOS app. All the sizes of iOS app icons All the sizes of iOS app icons
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
Designing the new Campaign Monitor iOS icons Designing the new Campaign Monitor iOS icons 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.