Ghidul super simplu pentru iconografie

În medie, cât timp vă ia să proiectați o pictogramă personalizată?

Câteva minute? Zece minute? Mai lung? Ce se întâmplă dacă ți-am arăta cum să faci 10 pictograme grozave în mai puțin de 10 minute?

Iconografia este o formă de comunicare care se adaugă la limbajul vizual al unei mărci, așa că un set de pictograme personalizat este mai semnificativ și mai captivant decât unul simplu, generic. Majoritatea designerilor nu se obosesc niciodată să învețe cum să creeze pictograme personalizate, în principal pentru că acesta este încă un curs de adăugat la coada noastră de învățare.

Așa că mi-am propus să creez un ghid super simplu care să vă ajute să învățați elementele de bază ale iconografiei în mai puțin de 10 minute (adică).

Posibilitatea de a crea pictograme personalizate vă va deschide o lume cu totul nouă pentru a începe să creați forme complicate pentru proiectele dvs., care vă vor distinge de restul mulțimii, oferindu-vă un avantaj competitiv ca designer.

Inițial, am fost inspirat să creez acest ghid de acest GIF de la Morgan Allan Knutson, care arată cum să creați o pictogramă pentru servicii de localizare în câteva secunde. Mi s-a părut revigorant, inteligent și rapid. Demistifică procesul de creare a pictogramelor personalizate și arată cât de simplu poate fi. O pictogramă este de fapt o formă geometrică care poate rezulta dintr-o combinație sau deformare a formelor de bază, cum ar fi pătratele, triunghiurile sau cercuri. O regulă generală în designul logo-ului sau al pictogramei este de a menține lucrurile simple.

Scopul acestui articol este de a crea 10 pictograme în 10 secunde fiecare, folosind doar forme simple.

Notă importantă: Vom folosi Adobe Illustrator în această postare, dar puteți obține aceleași rezultate folosind Sketch sau chiar Figma. De fiecare dată când trebuie să adăugăm sau să eliminăm un punct dintr-o formă, vom folosi „Instrumentul Pen (P)”. Selectarea și mutarea punctelor în jur se va face cu „Instrumentul de selecție directă (A)”.

Pictograma ochiului

Aliniați în centru patru cercuri, mergând de la cel mai mare la cel mai mic cu modificarea culorilor, așa cum se arată. Pe cel mai mare cerc, spre spate, trageți punctele stânga și dreapta departe de centru. În cele din urmă, mutați cel mai mic cerc interior la marginea următorului pentru a crea un efect de lumină asupra irisului.

Sfat: În loc să utilizați un cerc alb, pur și simplu scădeți (folosind panoul Pathfinder) cele două cercuri din cercul de sub fiecare dintre ele. Acesta creează un rezultat mai curat pe fundal.

Pictogramă săgeată

Totul este despre locul în care adăugați acele puncte suplimentare pe marginile pătratului inițial. Sfat: Ca alternativă, puteți desena pur și simplu o linie subțire în formă de săgeată.

Pictograma bateriei

Folosind un pătrat cu o lovitură și două cu umplere. Pur și simplu jucați-vă cu proporțiile, incluzând în același timp un pătrat umplut în formă de contur și păstrând pe cel de-al doilea în exterior pentru a forma vârful bateriei.

Sfat: Joacă-te cu grosimea cursei și căptușeala pentru a menține un echilibru vizual bun.

Pictograma Lista marcatori

Începeți cu un pătrat simplu; duplicați-l o dată în dreapta; și remodelați-l ca un dreptunghi lung. Selectați întregul lucru și duplicați de două ori păstrând un spațiu de dimensiune pătrată între ele.

Sfat: Înlocuiți pătratul cu cercuri pentru a crea un aspect mai moale.

Pictogramă Cloud

Desenați trei cercuri de dimensiuni diferite. Aliniați de jos cele mai mici două cercuri pentru a avea o bază și puneți cel mai mare cerc între ele, într-o poziție mai înaltă. Creați baza norului deformând unul dintre cercurile mici.

Sfat: Folosiți diferite dimensiuni de cerc pentru a obține un nor cu aspect mai organic.

Pictograma de redare înainte

Desenați un dreptunghi lung. Adăugați un punct în centrul marginii din stânga și eliminați punctul de sus și de jos. Acum că aveți un triunghi, pur și simplu duplicați acea formă o dată la dreapta pentru a finaliza pictograma.

Sfat: Pentru a face acest lucru și mai rapid, începeți pur și simplu cu un triunghi în loc de un pătrat.

Pictograma Pâlnie

Începeți cu un dreptunghi lung. Adăugați un punct în centrul marginilor din stânga și din dreapta. Acum, întindeți pe orizontal marginea de sus și ați terminat.

Sfat: Așezați două pătrate margine la margine și pur și simplu întindeți marginea superioară pe orizontală.

Pictograma Redare/Pauză

Începeți cu trei dreptunghiuri lungi în paralel. Reformați cel mai lat dreptunghi într-un triunghi.

Sfat: Ca alternativă, desenați pur și simplu un triunghi, urmat de două dreptunghiuri paralele.

Pictograma săgeată de poziție

Acesta este un remix al pictogramei serviciului de localizare a lui Morgan. Pur și simplu desenați un pătrat, apoi trageți punctul din stânga jos într-o direcție diagonală, deplasându-vă în sus până când treceți de punctul opus.

Sfat: În Illustrator, apăsarea tastei Shift în timp ce trageți punctul ajută la păstrarea simetriei menținând unghiul diagonal drept.

Pictograma Pin de poziție

Scoateți un cerc în interiorul unuia mai mare (folosind panoul Pathfinder). Trageți punctul cel mai de jos drept în jos și ascuțiți unghiul format - comutați la „Instrument Pen (P)”, apoi, în timp ce țineți apăsată tasta „Shift”, faceți clic pe punct.

Sfat: Folosiți colțul rotunjit pe acel punct de răsturnare pentru a atenua aspectul - ajustați valoarea „razei colțului” în panoul de opțiuni „Transformare” în timp ce punctul este selectat.

Pictogramă de sunet

La fel ca pictograma pâlnie, dar cu o rotație de 90 de grade.

Sfat: Pur și simplu copiați și inserați pictograma pâlnie și rotiți-o în sensul acelor de ceasornic.

Pictograma Val

Desenați o linie dreaptă și adăugați puncte la o distanță egală pe lungimea ei. Trageți în jos punctele de modificare și rotunjiți fiecare colț la maximum, până când totul este neted.

Sfat: rotunjește vârfurile liniilor pentru un aspect și mai neted.

Pictograma Toptal

Aceasta este pictograma bonus.

Desenați un pătrat cu o lovitură suficient de groasă. Cu ajutorul foarfecelor, tăiați punctele din dreapta sus și din stânga jos. Aceasta va împărți forma în două. Mutați jumătatea de jos în sus și rotiți întregul lucru cu 45 de grade în sens invers acelor de ceasornic.

Sfat: Acordați atenție grosimii liniilor și spațiului alb format în interiorul logo-ului.

O icoană valorează 1.000 de cuvinte.

Auzim adesea că o imagine valorează cât o mie de cuvinte. Ei bine, acest lucru se aplică foarte mult pictogramelor, care înlocuiesc propoziții și cuvinte lungi pentru a optimiza spațiul vizual, capacitatea de utilizare și estetica. A ști cum să creați un set de pictograme simple și eficiente poate merge mult. Și tocmai am văzut cât de rapid și ușor poate fi observând și utilizând un set de bază de forme.

Pe scurt, cele 10 reguli principale ale iconografiei sunt:

• Fă-l simbolic și semnificativ.
• Ați auzit-o: Păstrați-o simplă. Stilul nu trebuie să compromită lizibilitatea.
• Fii intenționat și atent. Gândește-te înainte de a crea.
• Asigurați-vă că funcționează în diferite dimensiuni.
• Ține cont de uniformitate.
• Doar vectori, vă rog!
• Folosiți culori numai atunci când este necesar și faceți acest lucru cu grijă.
• Ajută la cunoașterea geometriei de bază.
• Gândiți-vă la „affordance” pentru a vă asigura că pictograma proiectată va ajuta designul general.
• Iconografia este un limbaj care ar trebui să fie universal.
• Bonus: alfabetul este doar un set de 26 de pictograme.

Joacă și vezi ce poți găsi în mai puțin de 10 secunde.

• • •

Citiri suplimentare pe Blogul Toptal Design:

• eCommerce UX – O privire de ansamblu asupra celor mai bune practici (cu infografic)
• Importanța designului centrat pe om în proiectarea produsului
• Cele mai bune portofolii de designeri UX – Studii de caz și exemple inspiratoare
• Principii euristice pentru interfețele mobile
• Design anticipator: Cum să creați experiențe magice pentru utilizator