jsm + icons   109

Creating an Awesome Icon Set — Part 1: Visual Consistency and Setup — Medium
"We’ve learned a few things since creating Font Awesome a few years ago, so we’re putting together a collection of articles on Creating an Awesome Icon Set. We’ll cover the whole gamut of what it takes to put together a pixel-perfect, visually-consistent set of icons that are powerful and super-simple to use. We’ll tackle everything necessary to create an awesome icon set."
Icons  GUI  Tutorial  Process  Illustrator  Vector 
december 2015 by jsm
Thomas Byttebier - The best icon is a text label
"So let me repeat: don’t use an icon if its meaning isn’t a 100% clear to everyone. When in doubt, skip the icon. Reside to simple copy. A text label is always clearer."
Design  Research  Icons  UI-Patterns  Article  Tutorial 
march 2015 by jsm
iOS 7 and the Iconography of ‘Alien’ | Iconfactory Design Services
"The symbols themselves are wonderful examples of simple, strong icon design – Cobb’s innate feel for logical, sensible design shows in everything he turns his hand to, from giant spacecraft and their control decks down to beer cans and clothing labels*. The icons are clean and direct, colour-coded and adhering to a grid-based construction method. They are essentially the same design intent as Apple’s iOS 7 system iconography. Here are some of Ron Cobb’s original sketches for the icon designs (from the book “Colorvision”):"
Film  GUI  Icons  History 
december 2014 by jsm
Bulletproof Accessible Icon Fonts | Filament Group, Inc., Boston, MA
At Filament Group, we build elegant communications and interactions that help people understand, work, and collaborate effectively across a variety of media - from web sites to wireless, to interactive exhibits and print.
Icons  Webfonts  Tutorial  Accessibility  Fonts  Typography  UI-Patterns 
january 2014 by jsm
Adactio: Journal—Icon fonts, unicode ranges, and IE8’s compatibility mode
Well, it turns out that using assigning glyphs to this private use area was causing IE8 to flip into compatibility mode. Once Mark assigned the glyphs to different characters, IE8 started behaving itself.
Icons  Fonts  Accessibility  Debugging 
november 2013 by jsm
On Mobile, Data URIs are 6x Slower than Source Linking (New Research) | Mobify
"So you can imagine my surprise to discover, when measuring the performance of hundreds of thousands of mobile page views, that loading images using a data URI is on average 6x slower than using a binary source link such as an img tag with an src attribute!"
Icons  CSS  Mobile  Performance  Testing 
july 2013 by jsm
In Defence of the Floppy Disk Save Symbol – Connor Tomas O'Brien
Those who believe that the floppy cannot represent saving a document because nobody uses real floppy disks anymore miss an important point: while symbols initially piggyback on the meaning we assigned to a material object in order to stand in for something more abstract, once a symbol is used often enough, the symbol itself is enough to carry meaning, and the material object is no longer important. (You could think of the physical object upon which a symbol is based as a kind of scaffolding). This is how all symbols operate, by the way. Once any symbol enters a culture’s visual language, the physical object it was initially based upon is no longer really relevant.

If we look at the floppy disk save symbol, there are a few things to consider. First, it’s a fairly unique symbol: a rounded square with one ‘bevelled’ corner, with two rectangles of differing sizes inside it, the smaller of these with another smaller rectangle inside of it. It’s immediately distinctive, unmistakable, and reproduces extremely well at a variety of sizes. Next thing: the floppy-save symbol is kinda fun, insofar as it references something from ‘another time’. You certainly don’t have to know what a floppy disk is to use the save icon (to you, the symbol may just be “the square with one corner cut off”), but it’s interesting to know that the symbol has a history. So far, there’s nothing really wrong with the symbol. It does its job.

If we’re picking on the floppy-save symbol, we may as well take a look at other symbols to see whether they’re similarly ‘anachronistic’. When we see a stylised depiction of a cog in an interface, we immediately recognise that it stands for “settings”, even though few of us have cranked any heavy cog-based machinery recently. Similarly, I suspect few of us use magnifying glasses to search for physical objects, but in a digital interface, we understand that a magnifying glass stands for “search”. Both the cog and the magnifying glass are fantastic symbols not because we are necessarily intimately familiar with the items they represent, but because they are simple and unmistakable. (I could continue, but I’d urge you to take a look around your screen right now: every symbol you see likely references an ‘antiquated’ physical object, in some way or other).
UI-Patterns  Design  Article  Thinking  Inspiration  Icons 
april 2013 by jsm
Kodian.com - Icon Slate
Icon Slate lets you easily compose, import and export icons in many formats.
Icons  GUI  Mac  App  Favicon  iOS 
august 2012 by jsm
"Symbolsets are semantic symbol fonts. They work in modern browsers and anywhere OpenType features are supported."
GUI  Icons  Fonts  Friends  UI-Patterns 
july 2012 by jsm
X-Icon Editor
"X-Icon Editor is an HTML5 application (based on <Canvas>) that allows you to create high resolution icons that lets your sites shine with IE9 and above. With X-Icon Editor you can quickly get your site ready with a large icon which will be available for pinned sites and the new tab page."
Icons  UI-Patterns  GUI  Favicon  Resources  Web-app 
july 2012 by jsm
Cue – A gesture icon system—Some Random Dude
Cue is a public domain gestural icon system which focuses on legibility and symbolic representation.
GUI  Icons  Resources 
april 2012 by jsm
That's right. For the first time ever you can now build your own icon fonts with the Pictos Server! It's easy: choose any icon in the Pictos Library and assign a keyboard key that will correspond with that icon. Use as many or as few icons as you'd like, even change them on the fly!
Fonts  Foundries  Icons  GUI 
january 2012 by jsm
Flat, simple icons for interface design - Owltastic — writing about web design by Meagan Fisher
"I can’t overstate the value of a good flat, sharp, detailed icon. You can style it any way you please, use it in a variety of projects, and communicate difficult interface concepts in a 16 pixel space. Considering the incredible amount of work that goes into designing each icon, and the quality exhibited below, these sets are scandalously low priced. So get ready to do some serious tax-deductible shopping."
Article  GUI  Icons  Stock  Design  Resources 
august 2011 by jsm
Pure CSS GUI icons (experimental) – Nicolas Gallagher
"An experiment that uses pseudo-elements to create 84 simple GUI icons using CSS and semantic HTML. Shared as an exercise in creative problem solving and working within constraints. This is not a “production ready” CSS icon set."
Icons  CSS  GUI  Resources 
june 2011 by jsm
The Noun Project collects, organizes and adds to the highly recognizable symbols that form the world's visual language, so we may share them in a fun and meaningful way.
Inspiration  Design  Stock  Icons  Resources 
january 2011 by jsm
probertson: Scott Pilgrim vs. the World: The Game
Paul Robertson's animation sprites from Scott Pilgrim vs. the World: The Game. Wow.
Animation  Art  Comics  Games  Icons  Video  Inspiration 
august 2010 by jsm
Icon Reference | Hicksdesign
"A comprehensive chart of icon information for various platforms and devices"
Browsers  Favicon  GUI  Icons  Interface  iPad  iPhone  Mobile  Reference  Resources  Template 
july 2010 by jsm
Blog | Graphicpeel — iOS Icons Made in Pure CSS
"11 iOS icons made in only CSS, no images whatsoever."
Code  CSS  Design  Icons  Inspiration  iPhone 
june 2010 by jsm
ignore the code: Realism in UI Design
"The thing on the left is a house. The thing on the right means “home”. Somewhere between the two, the meaning switches from “a specific house” to “home as a concept”.
Design  Resources  Article  Reference  Icons  Interface  Psychology  GUI 
january 2010 by jsm
Crafting Subtle & Realistic User Interfaces — Flyosity: Mac & iPhone Interface Design
"The underlying secret to beautiful user interface design is realism: making 2D objects on your screen appear to sit in 3D space with volume, surface properties and undulations that might appear in real life. These faux 3D objects have highlights and shadows just like objects on your desk might have, and they have textures that emulate real objects from glass to sandpaper and everything in between. Designing beautiful user interfaces has more to do with the why than the how."
Design  Inspiration  Reference  Tutorial  Icons  Interface  Photoshop  GUI  iPhone 
december 2009 by jsm
YouTube - iconwerkTV HD episode 01
First episode of the IconwerkTV video podcast, showcasing the work of Stefan Dziallas, one of the best pictographic icon creators in the business.
Design  Video  Icons  Podcast  GUI  Inspiration 
december 2009 by jsm
Modern pixel art //case: YouTube | Typophile
Awesome: Sub-pixel re-workings of YouTube and BBC favicons.
Favicon  Design  Icons  GUI  Tutorial  Color 
september 2009 by jsm
« earlier      
per page:    204080120160

Copy this bookmark: