Icon Design

Icon design

Iconen zijn een belangrijk onderdeel van elke user interface (UI). Ze zeggen wel eens dat een foto meer dan duizend woorden zegt. Dat geldt ook voor icon design. Een icoon bij een knop maakt in één oogopslag duidelijk wat deze knop doet. Daarnaast laat het je design meer leven. Gebruik daarom altijd iconen in je design.

Bekijk hieronder een aantal voorbeelden van goed icon design.

Toegepaste competenties en tools

Visual Design, Icon Design, Sketch, pen en papier.

Under Construction Icon Design
Football Insights Icon Design

Optaplanner

Deze iconen heb ik gemaakt als onderdeel van het Optaplanner project. Optaplanner wordt gebruikt voor het plannen en roosteren van diensten. Om deze diensten onderscheidbaar te maken, heb ik voor elke dienst een icoon ontworpen. Deze iconen worden gebruikt in de UI van Optaplanner. De iconen staan voor ochtend-, dag-, avond- en nachtdienst.

Bekijk dit project ook op Dribbble.

Optaplanner. Icon design

De uitdaging

De grootste uitdaging voor mij was om iconen te bedenken voor de ochtend- en avonddienst. De simpele oplossing zou zijn om de opkomende zon voor de ochtend en de ondergaande zon voor de avond te gebruiken. Deze lijken echter te veel op elkaar. Hierdoor kun je deze oplossing niet gebruiken. Ik heb gekozen om de zonsopkomst voor de ochtenddienst en de opkomst van de maan voor de avonddienst te gebruiken.

‘Ondermijning’ icon design

Het onderstaande icoon staat symbool voor het woord ‘ondermijning’. De uitdaging  van dit icoon zat hem er in dat ondermijning een onbekend woord is. Veel mensen weten niet wat het betekent. Hoe design je dan toch een symbool wat voor mensen in één oogopslag duidelijk is?

Ondermijning - Icon Design

File Transfer UI Icon Design

Het File Transfer UI project helpt mensen om hun bestanden van A naar B te krijgen. Eén van de onderdelen van het design voor dit project zijn de iconen. Elke stap in het proces heeft een icoon in het design. Het icoon staat meestal bovenaan de pagina.

Twee van deze iconen staan hieronder afgebeeld. Het linker icoon wordt gebruik bij het uploaden van bestanden. Het rechter icoon staat bovenaan de pagina waarop de gebruiker te zien krijgt dat zijn bestanden succesvol verzonden zijn.

File Transfer UI - Icon design

Hoe nu verder?

Ben je benieuwd naar de mogelijkheden van icon design? Neem dan contact op door het onderstaande formulier in te vullen. Ik kom zo snel mogelijk bij je terug!