Super prosty przewodnik po ikonografii

Ile średnio zajmuje Ci zaprojektowanie niestandardowej ikony?

Kilka minut? Dziesięć minut? Dłuższy? A jeśli pokazaliśmy Ci, jak zrobić 10 wspaniałych ikon w mniej niż 10 minut?

Ikonografia to forma komunikacji, która wzbogaca język wizualny marki, więc niestandardowy zestaw ikon jest bardziej znaczący i angażujący niż prosty, ogólny. Większość projektantów nigdy nie zadaje sobie trudu, aby nauczyć się tworzyć niestandardowe ikony, głównie dlatego, że jest to kolejny kurs do dodania do naszej kolejki nauki.

Postanowiłem więc stworzyć super prosty przewodnik, który pomoże ci nauczyć się podstaw ikonografii w mniej niż 10 minut (mam na myśli to).

Możliwość tworzenia niestandardowych ikon otworzy zupełnie nowy świat, w którym możesz zacząć tworzyć skomplikowane kształty do swoich projektów, które wyróżnią Cię spośród reszty tłumu, dając Ci przewagę nad konkurencją jako projektantowi.

Pierwotnie do stworzenia tego przewodnika zainspirował mnie ten GIF od Morgana Allana Knutsona, pokazujący, jak stworzyć ikonę usług lokalizacyjnych w kilka sekund. Uważam, że to odświeżające, inteligentne i szybkie. Demistyfikuje proces tworzenia niestandardowych ikon i pokazuje, jak proste może być. Ikona jest w rzeczywistości kształtem geometrycznym, który może powstać w wyniku połączenia lub deformacji podstawowych kształtów, takich jak kwadraty, trójkąty czy koła. Zasadą w projektowaniu logo lub ikon jest prostota.

Celem tego artykułu jest utworzenie 10 ikon w ciągu 10 sekund każda, używając tylko prostych kształtów.

Ważna uwaga: w tym poście będziemy używać programu Adobe Illustrator, ale te same wyniki można uzyskać za pomocą programu Sketch, a nawet Figma. Za każdym razem, gdy będziemy potrzebować dodać lub usunąć punkt na kształcie, użyjemy „Narzędzia Pióro (P)”. Wybieranie i przesuwanie punktów odbywa się za pomocą „Narzędzia do bezpośredniego zaznaczania (A)”.

Ikona oka

Wyrównaj do środka cztery okręgi, przechodząc od największego do najmniejszego ze zmieniającymi się kolorami, jak pokazano. Na największym okręgu, do tyłu, odciągnij lewy i prawy punkt od środka. Na koniec przesuń najmniejszy, wewnętrzny okrąg do krawędzi następnego, aby uzyskać efekt świetlny na tęczówce.

Wskazówka: Zamiast używać białego koła, po prostu odejmij (za pomocą panelu Pathfinder) dwa koła od koła znajdującego się pod każdym z nich. Tworzy czystszy efekt na tle.

Ikona strzałki

Chodzi o to, gdzie dodajesz te dodatkowe punkty na krawędziach początkowego kwadratu. Wskazówka: Alternatywnie możesz po prostu narysować cienką linię w kształcie strzały.

Ikona baterii

Używając jednego kwadratu z obrysem i dwóch z wypełnieniem. Po prostu baw się proporcjami, włączając jeden wypełniony kwadrat do kształtu obrysu i utrzymując drugi na zewnątrz, aby utworzyć końcówkę baterii.

Wskazówka: baw się grubością pociągnięć i dopełnieniem, aby zachować dobrą równowagę wizualną.

Ikona listy punktowanej

Zacznij od prostego kwadratu; zduplikuj go raz po jego prawej stronie; i przekształć go w długi prostokąt. Wybierz całą rzecz i zduplikuj dwukrotnie, zachowując jedną kwadratową przestrzeń pomiędzy nimi.

Wskazówka: zastąp kwadrat kółkami, aby uzyskać bardziej miękki wygląd.

Ikona chmury

Narysuj trzy koła o różnych rozmiarach. Wyrównaj do dołu dwa najmniejsze koła, aby uzyskać podstawę, a największy okrąg umieść pomiędzy nimi, w wyższej pozycji. Utwórz podstawę chmury, deformując jedno z małych kół.

Wskazówka: użyj różnych rozmiarów okręgów, aby uzyskać bardziej organiczny wygląd chmury.

Ikona odtwarzania do przodu

Narysuj długi prostokąt. Dodaj punkt na środku lewej krawędzi i usuń górny i dolny punkt. Teraz, gdy masz już jeden trójkąt, po prostu zduplikuj ten kształt raz w prawo, aby ukończyć ikonę.

Wskazówka: aby zrobić to jeszcze szybciej, po prostu zacznij od trójkąta zamiast kwadratu.

Ikona lejka

Zacznij od długiego prostokąta. Dodaj punkt na środku lewej i prawej krawędzi. Teraz rozciągnij górną krawędź w poziomie i gotowe.

Wskazówka: umieść dwa kwadraty brzegiem do brzegu i po prostu rozciągnij górną krawędź w poziomie.

Ikona odtwarzania/wstrzymania

Zacznij od trzech długich prostokątów równolegle. Zmień kształt najszerszego prostokąta na trójkąt.

Wskazówka: Ewentualnie po prostu narysuj jeden trójkąt, a następnie dwa równoległe prostokąty.

Ikona strzałki pozycji

Ten jest remiksem ikony usługi lokalizacyjnej Morgana. Po prostu narysuj jeden kwadrat, a następnie pociągnij lewy dolny punkt w kierunku ukośnym, przesuwając się w górę, aż miniesz punkt przeciwny.

Porada: W programie Illustrator naciśnięcie klawisza Shift podczas przeciągania punktu pomaga zachować symetrię przy zachowaniu kąta przekątnego w prawo.

Ikona pinezki pozycji

Wybij okrąg wewnątrz większego (za pomocą panelu Pathfinder). Przeciągnij najniższy punkt prosto w dół i wyostrz uformowany kąt - przełącz na „Pióro (P)”, a następnie trzymając wciśnięty klawisz „Shift”, kliknij punkt.

Wskazówka: Użyj zaokrąglonego narożnika w tym punkcie zwrotnym, aby zmiękczyć wygląd - dostosuj wartość „promienia narożnika” w panelu opcji „Przekształć”, gdy punkt jest zaznaczony.

Ikona dźwięku

Podobnie jak ikona lejka, ale z obrotem o 90 stopni.

Wskazówka: po prostu skopiuj i wklej ikonę lejka i obróć ją zgodnie z ruchem wskazówek zegara.

Ikona fali

Narysuj linię prostą i dodaj punkty w równej odległości na jej długości. Przeciągnij w dół zmieniające się punkty i zaokrąglaj każdy róg do maksimum, aż wszystko będzie gładkie.

Wskazówka: zaokrąglij końcówki linii, aby uzyskać jeszcze gładszy wygląd.

Górna ikona

To jest ikona bonusu.

Narysuj kwadrat wystarczająco grubą kreską. Za pomocą narzędzia nożyczek wytnij prawy górny i lewy dolny punkt. To podzieli kształt na dwie części. Przesuń dolną połowę w górę i obróć całość o 45 stopni w kierunku przeciwnym do ruchu wskazówek zegara.

Wskazówka: Zwróć uwagę na grubość linii i białą przestrzeń utworzoną wewnątrz logo.

Ikona jest warta 1000 słów.

Często słyszymy, że obraz wart jest tysiąca słów. Cóż, dotyczy to bardzo ikon, które zastępują długie zdania i słowa, aby zoptymalizować przestrzeń wizualną, użyteczność i estetykę. Wiedza o tym, jak stworzyć zestaw prostych i skutecznych ikon, może przejść długą drogę. Właśnie zobaczyliśmy, jak szybko i łatwo można to zrobić, obserwując i wykorzystując podstawowy zestaw kształtów.

Podsumowując, 10 głównych zasad ikonografii to:

• Niech będzie symboliczny i znaczący.
• Słyszałeś to: zachowaj prostotę. Styl nie powinien zagrażać czytelności.
• Bądź świadomy i rozważny. Pomyśl, zanim zaczniesz tworzyć.
• Upewnij się, że działa w różnych rozmiarach.
• Pamiętaj o jednolitości.
• Tylko wektory, proszę!
• Używaj kolorów tylko wtedy, gdy jest to konieczne i rób to ostrożnie.
• Pomaga poznać podstawową geometrię.
• Pomyśl „afordancja”, aby upewnić się, że zaprojektowana ikona pomoże w ogólnym projekcie.
• Ikonografia to język, który powinien być uniwersalny.
• Bonus: Alfabet to tylko zestaw 26 ikon.

Graj i zobacz, co możesz wymyślić w mniej niż 10 sekund.

• • •

Dalsza lektura na blogu Toptal Design:

• eCommerce UX – przegląd najlepszych praktyk (z infografiką)
• Znaczenie projektowania zorientowanego na człowieka w projektowaniu produktu
• Najlepsze portfolio projektantów UX – inspirujące studia przypadków i przykłady
• Zasady heurystyczne dla interfejsów mobilnych
• Projekt przewidujący: jak tworzyć magiczne doświadczenia użytkownika