iconwerk-app-2.jpg
iconwerk-spin.png
iconwerkespn01.jpg
iconwerk-wrq365-100.jpg
iconwerk-yahoo-02.png
iconwerk-address.jpg
iconwerk-UI.jpg
iconwerk-scrivner.jpg
iconwerk-pad-2.jpg
iconwerk-logo.png

iconwerk. Custom icon system design

for your next project.

iconwerk-switch.jpg
iconwerk-wrq365-101.jpg
iconwerk-icons-3.png

Icons are the road signs for our daily rituals – the instantly recognizable symbols you press, click and toggle countless times a day when you interact with your computer, your phone, car or even your microwave.

Simple, clear, useful. It’s the details. The latest technology. The complete experience. Better is only better if every detail is considered in the tools that inspire others to make the best.

divider-1940.png
iconwerk-app-3.jpg
iconwerk-think.jpg
iconwerk-bloomberg.jpg
iconwerk-7b.jpg
iconwerk-camera.png
iconwerk-guitar.jpg
iconwerk-slow-fast.jpg
iconwerk-watch.jpg
iconwerk-twitter.jpg

INSIGHT #37



»Simple is good.«

This sounds obvious but the simplest representation of a metaphor might not always be the most comprehensible. The right amount of detail is the key to a successful icon design!

iconwerk-on-off-33.jpg
iconwerk-outline-03.jpg
iconwerk-outline-01.jpg
iconwerk-outline-04.jpg
iconwerk-outline-02.jpg
iconwerk-game-04.jpg
iconwerk-game-02.jpg
iconwerk-game-03.jpg
iconwerk-game-01.jpg
insight
iconwerkecar.jpg

Show, don’t tell. Here are some project snippets. Every project has a unique style, icons work just like (and together with) fonts. They give your visual communication a distinct tone, character and direction.

iconwerk-tech-03.png
iconwerk-tech-04.png
iconwerk-tech-01.png
iconwerk-tech-02.jpg
iconwerk-park-04.png
iconwerk-park-04.png
iconwerk-park-04.png
iconwerk-park-04.png
divider-1940.png
iconwerk-gm-02.jpg
iconwerk-gm-03c.jpg

Opel / GM wayfinding pictograms & numbers

Repsol map pictograms

Study for a german car manufacturer

iconwerk-ikea01.jpg
iconwerk-ikea-02.png
iconwerk-ikea-03.png
iconwerk-ikea-04.jpg

IKEA KONDIS app with f&b. See the little product movies here and here...

iconwerk-gm-01.jpg

BeLive Hotel & Resorts icon system for web, print and wayfinding.

Logitech product feature indicator icons

iconwerk-belive-04.jpg
iconwerk-belive-01.jpg
iconwerk-belive-05.jpg
iconwerk-belive-02.jpg
iconwerk-logitech-01.jpg
iconwerk-viewbook-05.jpg
iconwerk-viewbook-04.jpg
iconwerk-viewbook-02.jpg
iconwerk-viewbook-01.jpg

viewbook portfolio builder. More than 100 glyphs built into a webfont. See more here: http://next.viewbook.com

iconwerk-logitech-1002.jpg

ESPN.com is launching a major redesign in 2015. SportsCenter is the No.1 sports app of all time. Running on more than 44 million devices. With the unification of the UI and icons for all media covering almost all sports, ESPN focusses on the core fan experience.

The new site is a mobile-first design that is fully responsive. Public beta has already started. The site's official relaunch will come in Spring of 2015 in time for ESPN.com's 20th anniversary.

divider-1940.png
iconwerk-espn-app.jpg

Some recent projects in detail:

iconwerk-espn-501.jpg
iconwerk-espn-502.jpg
iconwerk-espn603.jpg
iconwerk-espn604.jpg
iconwerk-espn601.jpg
iconwerk-espn602.jpg
iconwerk.espn-phones.jpg

Outlined or solid. Here’s a comparison of the icons in outlined and solid state. The outlines match Apple’s User Interface Guidelines and the solid versions work well on Android devices.

We are Family. Icons that come from a similar family of functions share identical design elements.

Production ready. Both styles derive from one single vector master. The outlined version has a contour of 2 units, the solid version has 3 units. Both share the same container size of 56x56 units.

iconwerk-espn-802.jpg
iconwerk-espn-801.jpg
iconwerk-espn-403.jpg
iconwerk-espn-404.jpg
iconwerk-espn-401.jpg
iconwerk-espn-402.jpg
iconwerk-espn-2001.jpg
iconwerk-espn-app-02.jpg
iconwerk-espn-1004.jpg
iconwerk-espn-1003.jpg
iconwerk-espn-1002.jpg
iconwerk-espn-1001.jpg

ESPN covers a wide area of sports. This set is used for Cricket:

Philips 2014 4K TV with Android UI. Super sleek, super simple. More than 300 icons have been built together with the TPVision design team. Here’s an example with the brandnew Philips gesture control interface:

iconwerk-philips-01.jpg
iconwerk-philips-1001.jpg

All icons base on a main container with the aspect ration of 16:9 that derives from the TV screen:

iconwerk-philips-1002.jpg
divider-1940.png
iconwerk-philips-mini.jpg
iconwerk-cisco-201.png

Scaleable vector icon system for Cisco. A systematic icon system with more than 1000 icons helps Cisco to replace text labels on hardware & software to reduce production cost of the localization of their broad line-up from IP phones to network routers.

iconwerk-cisco-01.png
iconwerk-cisco-2.jpg
iconwerk-cisco-03.png
iconwerk-cisco-04.png

This is the fantastic Cisco logo by Joe Finocchiaro and Jerry Kuyper. It symbolizes the San Francisco Golden Gate bridge.

The hardware also speaks the new design language.

The solution is a scaleable icon system that matches the corporate design!

These elements form the graphical foundation for the icon system.

The single elements that form the icon system come up in different icons and unify the appearance of the family.

iconwerk-cisco-101.png
iconwerk-cisco-102.png
iconwerk-cisco-103.png
iconwerk-cisco-104.png

Number Pad

Search Phones

Lock Phone

Call!

iconwerk-cisco-phone.jpg
iconwerk-cisco-202.png
iconwerk-cisco-204.png

A reduction to the very basic metaphor helps to simplify the design of the icons.

The icons look absolut identical on hardware and in software. This helps to identify the new icons easily.

The use of icon-only labels decreases the need for the different localized versions of the hardware radically. And this means lower production cost!

iconwerk-cisco-205.jpg

Cisco Unified IP Phone DX650 Series

divider-1940.png

The new Yahoo! icon system. Flat design is the new chrome.

The new system steps away from the rendered look of the previous versions. Simple, flat friendly shapes that work together with type form the new information units. More than 400 icons have been built!

iconwerk-yahoo-01.jpg
iconwerkyahoo02_1.jpg
iconwerk-yahoo-screen.jpg

Complex icons derive from the basic icons that have been combined with additional symbols. In this example the »Homes« icon returns in a simplified form with additional elements:

divider-1940.png
iconwerkyahoo505_1.jpg

Let’s work together! Just send an email. I’d love to join your design team for the next project to build great stuff! –Stefan Dziallas

Google, IKEA and you.

logos2.jpg
iconwerk-email-button.png

Copyright © iconwerk 2001–2014. All rights reserved. All other trademarks are the property of their respective owners. Imprint. If actual people, companies, bands, or animals are referred to, it’s in the spirit of tribute and free advertising.

While you’re reading this, I’m shopping or at the movies.

divider-1940.png
divider-1940.png
stefan dziallas.jpg
iconwerk-twitter2.jpg
h-logo.jpg
espn-logo.jpg