Cum să transformi rapid pictogramele plictisitoare în capodopere originale

Icoanele sunt o parte integrantă a design-urilor noastre. Sunt indicii vizuale pentru a indica diverse acțiuni și pot da o identitate unică unui produs. Dar prea des alegem să sărbătorim importanța lor descărcând aceleași seturi de pictograme și făcând ca fiecare pictogramă pentru fiecare site web să arate mai mult sau mai puțin la fel. Ce mod de a trata ceva atât de important.

Pentru a rezolva această problemă, am creat un ghid pentru a ajuta designerii să adauge profunzime vizuală pictogramelor lor și să le facă unice pentru produsul pe care îl reprezintă. Acest tutorial este în mare parte inspirat de influentul design Google Material.

Principiile Google pentru proiectarea materialelor

După cum spune Google, „materialul este o metaforă”. Imprumută indicii vizuale din lumea fizică și creează un nou limbaj vizual pentru a standardiza toate interfețele lor. Principiile Material Design sunt accesibile și pot fi aplicate rapid pentru a îmbunătăți atractivitatea interfețelor și experiența utilizatorului.

1. Folosiți forme geometrice simple și culori îndrăznețe

Tendința designului plat a inspirat Material Design, care se bazează și pe forme plate de bază. Selectați cu atenție care formă reprezintă cel mai bine elementul pe care îl înfățișează pictograma.

2. Adăugați adâncime cu umbrire subtilă

O umbră este o modalitate bună de a păcăli ochiul și de a da o senzație de profunzime designului tău, deoarece stimulează efectul luminii aruncate asupra unui obiect.

Rețineți că lumina naturală este adesea simulată ca venind din colțul din stânga sus.

3. Utilizați nuanțe de culoare pentru a înlocui umbrele interioare

Fiecare culoare este folosită în mai multe nuanțe pentru a simula profunzimea vizuală. De exemplu, în pictograma Gmail, puteți vedea că sunt folosite diferite nuanțe de roșu pentru forma M, iar sub capacul plicului este folosită o nuanță mai închisă de gri.

Cum poți să o faci și tu: demonstrații pas cu pas

Vom aplica o versiune simplificată a stilului Material Design și, pentru fiecare pictogramă, vom folosi doar trei nuanțe de aceeași culoare și vom păstra umbrele plate și scurte, în locul efectului obișnuit de „umbră lungă”.

Resurse

• Verificați setul complet de pictograme gratuit de la Google aici.

Să începem.

1. Pictograma șurub

Rupeți pictograma originală în două și faceți ca partea de sus să pară ridicată. Puteți realiza acest lucru creând un efect de umbră la intersecția celor două forme. Folosește trei nuanțe de galben - mai deschisă deasupra, una mai închisă în partea de jos și păstrează cea mai închisă nuanță pentru umbră.

2. Pictograma Chat

Pe pictograma originală, avem un indiciu de efect de umbră în golul dintre cele două bule, acolo vei crea o umbră.

Pe forma inferioară, selectați punctul care formează unghiul drept în gol și mutați-l în sus spre stânga până când formați un unghi drept în colțul din stânga sus.

Duplicați balonul de sus și mutați copia în jos și la dreapta. Selectați copia și forma bulei inferioare, utilizați „Pathfinder” pentru a crea o diviziune și păstrați doar intersecția cu copia anterioară.

Acum puteți aplica trei nuanțe de albastru și dați cea mai deschisă în partea de sus, cea mai închisă la mijloc și a doua cea mai întunecată în partea de jos.

3. Pictograma Bifă

Vom crea un efect de hârtie pliată.

Duplicați pictograma și eliminați cele două puncte suplimentare din dreapta sus, apoi din extrema stângă pentru a scoate două piese.

Duplicați pliul din stânga și mutați-l deasupra celui din dreapta.

Intersectează cele două forme pentru a crea efectul de umbră. Apoi aplicați trei nuanțe de culoare păstrând cea mai închisă pentru umbră, a doua cea mai întunecată pentru piesa lungă și nuanța mai deschisă pentru partea de sus.

4. Pictograma steag

Începeți prin rotunjirea marginilor, apoi extrageți baza steagului.

Pentru a crea un efect de pliere, trasați două linii care se intersectează în diagonală. Folosind „Pathfinder”, împărțiți forma steagului cu linii și aplicați trei nuanțe de verde pe steag, păstrând baza gri.

5. Pictograma inimii

Duplicați pictograma inimii.

Izolați jumătatea stângă a formei.

Trasează o linie diagonală în jos, care vine din punctul din dreapta sus.

Suprapuneți forma rezultată cu inima, apoi mutați-o spre dreapta pentru a scădea forma umbrei. Aplicați cele trei nuanțe de roz.

6. Icoana Munților

Spațiul gol din interiorul pictogramei originale indică locul unde putem plasa o umbră.

Creați cele două forme de triunghi din fiecare alegere.

Mutați o copie a celei mai mici la dreapta și extrageți intersecția rezultată ca formă de umbră.

Aplicați trei nuanțe de maro păstrând pe cea mai deschisă la stânga, pe a doua cea mai deschisă la triunghiul mare și pe cea mai închisă pentru umbra din mijloc. Aplicați o rază de colț pentru a înmuia rezultatul.

7. Pictograma Oameni

Selectați și duplicați partea inferioară a persoanei din stânga. Aliniați copia respectivă cu persoana din dreapta. Acum, selectați cele trei forme care se suprapun și aplicați instrumentul „Divide” din panoul „Pathfinder”. Acum, implementați culorile pentru a termina.

8. Pictogramă pătrată plutitoare

Selectați forma inferioară și mutați-i punctul din mijloc-sus în sus până când arată ca un diamant.

Duplicați forma de diamant de sus și mutați copia în jos cu 10 sau 20 px.

Selectați cele două forme inferioare și aplicați instrumentul „Divide” din panoul „Pathfinder”.

Din formele intersectate rezultate, păstrați doar cele două piese inferioare și ștergeți orice puncte suplimentare.

Încheiați-l prin aplicarea a trei nuanțe de roșu, în timp ce atribuiți cele mai întunecate în mijloc.

9. Pictograma Literei

Cu „Instrumentul de selecție directă (A)”, alegeți al doilea punct superior al formei plicului.

Adăugați un punct pe segmentul din dreapta acestuia folosind „Instrumentul Pen”.

Acum că aveți un punct în plus, puteți remodela acel spațiu negativ pentru a arăta ca o hârtie, ridicând cele două puncte superioare și mutându-le la dreapta și la stânga, așa cum se arată.

Selectați totul și aplicați o diviziune din panoul „Pathfinder”. Separați forma de sus a hârtiei de plic, apoi duplicați partea de plic deasupra hârtiei pentru a tăia forma umbră înainte de a aplica trei nuanțe de albastru.

10. Icoana Tort

Izolați o versiune duplicată a părții de jos a tortului.

Îngustează-i lățimea deplasând marginile din stânga și din dreapta spre interior.

Mutați forma rezultată deasupra pictogramei originale și extindeți punctele superioare pentru a suprapune forma de glazură.

Creați o împărțire a tuturor formelor care se suprapun cu „Pathfinder” și eliminați punctele suplimentare de lângă baza îngustă de tort creată mai devreme.

Completează-ți tortul aplicând un portocaliu deschis pe glazură și lumânare, o nuanță mai închisă la bază și un portocaliu și mai închis pentru forma flăcării și marginea umbrei.

Îmbunătățiți aspectul și senzația setului dvs. de pictograme

Crearea pictogramelor cu stilul Material poate fi realizată cu simplitate. Ai nevoie doar de o combinație bună de forme geometrice gânditoare, nuanțe de culori îndrăznețe și un efect de umbră.

Vestea bună este că nici măcar nu trebuie să creați toate pictogramele de la zero, așa cum am făcut în acest tutorial. Puteți începe de la pictogramele plate și gratuite existente și puteți aplica tehnicile simple pe care tocmai le-ați învățat.

Spune-ne ce crezi! Vă rugăm să lăsați mai jos gândurile, comentariile și feedback-ul dvs.

• • •

Citiri suplimentare pe Blogul Toptal Design:

• Principiile designului și importanța lor
• Cele mai bune portofolii de designeri UX – Studii de caz și exemple inspiratoare
• Explorarea principiilor Gestalt ale designului
• Adobe XD vs. Sketch – Ce instrument UX este potrivit pentru tine?
• Cele 10 produse UX pe care le folosesc designerii de top