Ikoner kan anses vara en av universiteterna i webbdesignen; nästan alla webbplatser drar fördel av tillägg av minst några av dem. Så det är frestande att anta att om du strömmar i en handfull av dessa små bilder, är ditt jobb gjort. Men det är mycket mer än det: bra ikoner ska känna att de är visuellt integrerade i gruppen av bilder som de befinner sig i, såväl som i webbdesignen som helhet. De behöver ha en konceptuell klarhet och syfte som går utöver att vara blotta ögonljus. En ikon som inte tjänar ett angivet syfte eller inte förmedlar det rätta konceptet i dess bilder, är en som behöver ses över.
Självklart finns det utrymme för tolkning och generalisering med någon form av bildspråk, men ikoner är inte bara illustrationer som bara används för att bryta upp utrymme och lägga till intresse: de är visuella metaforer som kan satsa mening i ett ämne med en enda blick; och som sådana är de ett kraftfullt verktyg för att förbättra användarupplevelser.
Hur ska du använda ikoner?
Ikonografi kan vara ett glatt ämne, eftersom det omfattar så många typer av bilder och kan uppfylla så många roller. Ikoner kan användas för många ändamål, men de två vanligaste och viktigaste tenderar att vara:
- Visuella raster i innehållet: Att göra den mer tilltalande och läsbar. Denna applikation används ofta i webbplatsens kropp, i listor (som ovan) eller andra text-tunga element.
- Snabb visuell referens för ett koncept: Den här användningen uppträder oftast i navigationselement (se ovan), och vissa som förstoringsglasikonen som innebär en sökning är så vanliga att de inte ens behöver en textidentifierare.
Det är uppenbart att även dessa två kategorier ger en mängd olika sätt och anledningar att använda ikoner, så det är troligt att du ser dem i nästan alla delar av webbdesign: rubriker, sidfot, navigeringsfält, listor; Nästan varje del av en design kan förbättras genom tillägg av väl valda ikoner.
Vad gör en bra ikon?
Även om det inte är svårt att se hur ikoner är en väsentlig del för nästan vilken bra webbdesign som helst, kan det ibland vara svårt att känna igen när de inte fungerar så bra som de kan vara. Även en dåligt utformad uppsättning ikoner brukar föredras för en vägg med text, men en vacker uppsättning meningsfulla ikoner, som de ovan, kan göra så mycket mer.
Även om ikondesign är ett komplicerat ämne som förändras med varje ny situation finns det fortfarande några viktiga regler som gäller effektiv ikondesign i alla applikationer: de två kritiska sakerna att överväga i ett ikonsystem är hur man gör ikoner båda visuellt och begreppsmässigt effektiv.
Hur gör du ikoner visuellt effektiva?
Ikoner gör ett bättre jobb för att gruppera relaterat innehåll och leda ögonen till viktig information om de har konsekventa och ansedda relationer till de andra ikonerna i uppsättningen och till webbplatsdesign kring dem.
Ikonuppsättningar ska ha visuell enhetning
En grupp ikoner som inte har tillräcklig sammanhållning ser fel ut, oavsett hur stor de kan vara när de betraktas individuellt. Det finns många knep som kan skapa en känsla av enhet, inklusive:
- Används av samma färg eller färgschema, som ovan.
- Montera alla dina ikoner i samma form, som sedd ovan.
- Styling dina ikoner med eller utan linjer eller andra gränsvärden, enligt ovan.
- Lägga till effekter, som gradienter, OH-film eller droppskuggor, som ovan.
För detta ändamål är det viktigt att överväga hur du anpassar stilen på dina illustrationer för att passa ämnena. Du kan till exempel representera dina ikoner med en 3D-effekt, i en vinkel. Men om en av ikonerna i exemplet ovan behövde representera ett presentkort? En ikon som representerar ett kort skulle nästan säkert behöva vara tvådimensionell och så skulle förstöra effekten du går för.
Ju större ikonernas uppsättning och omfattning, desto mer mångfald bör de ha
Även om ikoner inom en uppsättning ska ha en nära överensstämmelse kan du böja och till och med bryta reglerna när det gäller stora uppsättningar bilder. Den här webbplatsen, sett ovan, är ett utmärkt exempel som behandlar problem med samma dimensionering, eftersom de bestämde sig för att omfamna de olika dimensionerna i dess ikoner. Skillnaderna är inte krossade eftersom de två typerna är separerade, vilket gör dem till relaterade ikonsystem som fungerar bra tillsammans utan att se exakt ut varandra.
Utöver dessa små förändringar avviker webbplatsen ännu mer i de andra ikonerna du stöter på, med några som har större och mer invecklade former och andra som replikerar 3D-effekten, men i en helt annan stil. Men alla arbetar fortfarande bra tillsammans för att de bevarar några vanliga element, och de presenteras i fall som är tillräckligt skilda för att inte överväldiga betraktaren.
Ikoner ska harmonisera med resten av din webbplatsdesign
Det finns självklart ett oändligt antal metoder som du kan använda för att få dina ikoner att fungera med dina andra designelement. Men på en grundläggande nivå är de två mest effektiva sätten att klara det:
- Ikoner som en kontrastpunkt mot resten av webbplatsen: Detta tillvägagångssätt är särskilt effektivt om ikonerna är navigerande, som dessa sociala medier länkar (se ovan), eftersom kontrasten kräver mycket uppmärksamhet åt dem.
- Styling ikoner så att de är integrerade med och liknar andra designelement: Det här är ett bra alternativ för bilder som handlar mer om att ge visuell övernattning och tydlighet, och behöver inte extra betoning på att navigeringselement kan, som ovan sett.
Hur gör du ikoner konceptuellt effektiva?
Det är viktigt att ikoner spelar den rätta rollen för att rikta uppmärksamhet och lägga till designens estetik, men det är lika viktigt att de också är logiska och konsekventa när det gäller de begrepp som de kommunicerar.
Ikoner behöver enkelt förstås
Å ena sidan kan bilder vara svårt eftersom tolkningar aldrig är absoluta. Men å andra sidan är de mycket hanterbara än ord, för om de är tillräckligt klara kan de överskrida språket. De enkla riktlinjerna i vilka webbdesign överflödar är det perfekta fordonet för universell kommunikation, som ovan sett.
Men ibland försöker konstruktörer lägga mer komplicerade begrepp i ikonografi, och effekten är förvirrande snarare än att klargöra, som ovan sett. Under dessa omständigheter är det bra att ta ett steg tillbaka och verkligen försöka distillera innehållet till dess grundläggande väsen. Om du inte kan det betyder det att en ikon inte är rätt lösning för det innehållet. En av de bästa resurserna för att hitta smart ikonografi som skjuter gränserna för bildkommunikation är infografisk design, där målet ofta är att göra en ikon ur alla möjliga uppgifter.
Eftersom webbdesign växer och mognar exponentiellt, så gör ikondesign. Begrepp som en gång var omöjliga att skildra genom ikonografi blir snabbt standardiserade och läggs till webbdesignerns kommunikationsverktyg. Med detta tryck mot universalitet är det en säker förutsägelse att ikoner kommer att bli en ännu viktigare del av designen än de redan är. Genom att hålla dessa väsentliga användningsmetoder i åtanke kommer du att kunna använda dem med all den konstnärlighet och klarhet som behövs för att skapa vackra, funktionella och effektiva mönster för alla projekt.