Wszystko, co musisz wiedzieć o projektowaniu ikon

Ikony są małe, ale potężne, dlatego ważne jest, aby dokładnie przemyśleć projektowanie ikon. Projektanci na całym świecie będą świadkami ogromu kreatywności i wysiłku, jaki wkłada się w stworzenie dobrej ikony. To dlatego, że musi być wyrazisty, ale jednocześnie prosty.

Tło na ikonach

Projekt ikony to w rzeczywistości tylko mały obraz, który będzie reprezentował obiekt lub program. Są to naprawdę proste obrazy, które przekazują potężny przekaz. Ikony są zazwyczaj bardzo łatwe do zapamiętania, a także stanowią główną funkcję w prawie wszystkich interfejsach graficznych.

Ciekawostka: Słowo „ikona” pochodzi od greckiego dzieła „eikona”, które oznacza obraz. Cyfrowe ikony zaczęły pojawiać się, gdy pojawiły się pierwsze systemy operacyjne GUI, takie jak Macintosh i Microsoft.

Jakie są rodzaje ikon?

Istnieją trzy główne typy ikon, o których powinieneś wiedzieć. Oto kilka informacji na temat każdego z nich i rodzaju wpływu, jaki wywierają na wrażenia użytkownika.

Uniwersalne ikony

To są powszechnie uznawane ikony. Takimi ikonami są na przykład ikony wyszukiwania, drukowania, domu lub koszyka na zakupy. Ale jest tylko jeden mały problem. Uniwersalne ikony są raczej rzadkie. Kiedy mamy na myśli rzadkie, mamy na myśli to, że poza podanymi tutaj przykładami, większość ikon bywa niejednoznaczna i może różnić się znaczeniem w zależności od interfejsu.

Ikony o różnych znaczeniach

Jak sama nazwa wskazuje, ikony te mają wiele znaczeń, które mogą powodować konflikty lub sprzeczności. Na przykład ikony, które są sercem i gwiazdą, są w konflikcie. Funkcjonalność tych dwóch ikon będzie się zmieniać w zależności od aplikacji, a czasami mogą również ze sobą konkurować. Z tego powodu ikony te stają się dość trudne do precyzyjnej interpretacji. Nawet w aplikacji symbole te mogą być mylące, gdy użytkownik kliknie je w nadziei na jeden konkretny wynik, a zamiast tego otrzyma coś innego.

Unikalne ikony

Jak za pomocą ikony opisać unikalny przedmiot lub akcję? Korzystanie z unikalnego projektu ikon. Ale ważne jest, aby zauważyć, że istnieje wiele przykładów tego, gdzie to się nie powiodło. Na przykład znaczenie zostało utracone, gdy Apple zdecydowało się reprezentować swoje centrum gier za pomocą kilku kolorowych kół. Co w ogóle oznaczają te kręgi i jaki mają związek z centrum gier?

Jakich formatów ikon możesz używać?

Istnieje kilka rodzajów formatów ikon, o których powinieneś wiedzieć, prosząc o projekt ikony.

• SVG – są to skalowalna grafika wektorowa i zapewniają idealny format bazowy. Ponieważ jest skalowalny, zasadniczo oznacza to, że możesz zmienić rozmiar ikony bez utraty jakości.
• PNG – format Portable Network Graphic to opcja, z którą możesz skorzystać, jeśli chcesz uzyskać pełną kompatybilność. Jest to format rastrowy, co oznacza, że ​​jest oparty na pikselach i nie można go przeskalować bez pogorszenia jakości. PNG będzie działać w programach Word, PowerPoint i w wiadomościach e-mail. Można je dodawać na dowolnym kolorowym tle bez edycji.
• ICO – format ikon Microsoft Windows jest świetny, jeśli chcesz używać swojej ikony w dowolnej aplikacji Windows lub nawet jako favicon na własnej stronie internetowej.
• ICNS – ten format jest używany do bardzo konkretnych celów. Jest to format specyficzny dla Apple, którego można używać z dokumentami Mac OS X oraz aplikacjami.

Porada Kimpa: Zadbaj o to, by projekt ikony był jak najprostszy. Staraj się wykorzystywać w swoim projekcie elementy ze świata rzeczywistego, które wyraźnie odzwierciedlają Twoje zamierzone znaczenie. Na przykład możesz użyć wykresu słupkowego, aby wskazać finanse. Możesz użyć torby do pracy, aby mieć na myśli interesy. Aby pomóc projektantowi wymyślić odpowiednie ikony, nadaj im jak najwięcej kontekstu. Poinformuj ich dokładnie, w jaki sposób będą używane Twoje ikony.

Co sprawia, że ​​ikona jest skuteczna lub nieskuteczna?

Ponieważ masz już pojęcie o formatach ikon i typach ikon, przyjrzyjmy się również, co sprawia, że ​​ikona jest skuteczna lub nieefektywna. W ten sposób, pracując z projektantem, możesz zwracać uwagę na te właściwości.

Przejrzystość

Projekt ikony powinien komunikować komunikat natychmiast po jego zobaczeniu. Jeśli metafora, której używasz w swojej ikonie, jest nieznana lub niejasna, ludzie będą zdezorientowani, co ona oznacza. Na przykład ikona używana do Home jest znana wszystkim – to jest przejrzystość. Teraz wyobraź sobie, co by się stało, gdyby ikona Home była przedstawiona jako okrąg z kropką pośrodku? To by było mylące, prawda? Mylące ikony są nieskuteczne.

Czytelność

Po posortowaniu współczynnika przejrzystości musisz teraz upewnić się, że ikona jest czytelna. Jeśli spojrzysz na poniższy przykład, pierwsza ikona jest trudna do zrozumienia, ponieważ szczegóły są zbyt drobne, co powoduje rozmycie. Dobrym przykładem małych ikon zrobionych dobrze byłyby te na mapach Google, gdzie jest doskonała czytelność. Używanie cieńszych pociągnięć, nie pozostawianie wystarczającej ilości miejsca i dodawanie zbyt wielu szczegółów do małych ikon sprawi, że będą one nieefektywne, ponieważ stracą czytelność.

Wyrównanie ikony

Projekt ikony powinien mieć poczucie równowagi i można to osiągnąć poprzez optyczne wyrównanie wszystkich elementów. Oznacza to, że projekt musi być dostosowany do tego, jak widz będzie postrzegał elementy.

Zwięzłość ikony

Zwięzłość ikony zostanie określona na podstawie ilości szczegółów, które dodasz. Utrzymuj ikony tak proste, jak to tylko możliwe i unikaj dodawania niepotrzebnych szkiców i szczegółów, które sprawią, że będą nieczytelne i rozmyte.

Spójność

Jeśli projektujesz ikony aplikacji lub określonego interfejsu, upewnij się, że wszystkie ikony zachowują tę samą spójność. Jeśli niektóre ikony wyglądają na bardziej szczegółowe lub ostrzejsze niż inne, tracisz spójność. Spowoduje to, że interfejs ucierpi pod względem doświadczenia użytkownika.

Osobowość projektu

Ponownie, w przypadku interfejsu lub aplikacji, dla której projektujesz, musisz upewnić się, że każda ikona odzwierciedla osobowość marki. Możesz przejść od profesjonalnego do zabawnego i preppy w zależności od stylu marki i głosu. Jest to bardzo ważna część odprawy, którą powinieneś przekazać swojemu projektantowi podczas projektowania ikon.

Twoja ikona powinna być łatwa w użyciu

Nawet po wykonaniu rysunku na „t”, ikona jest daleka od ukończenia. Ikona, którą wykonał Twój projektant, będzie wymagała przetestowania i przygotowania, zanim pozwolisz klientom z niej korzystać. Te testy i przygotowanie zapewnią, że ikona będzie łatwa w użyciu. Oznaki łatwej w użyciu ikony są następujące:

• Dobrze zorganizowany – tutaj musisz upewnić się, że twój projektant umieścił pliki wzorcowe projektu w sposób dobrze zorganizowany, aby w razie potrzeby móc się do nich później odnieść. Możesz poprosić o ułożenie ich w kolejności alfabetycznej lub w innej kolejności, aby można je było łatwo znaleźć, gdy ich potrzebujesz.
• Dobrze udokumentowane – poproś projektanta o przekazanie kluczowych zasad rodziny ikon, a także rozplanowanie zasad technicznych. Możesz również upublicznić tę dokumentację po jej ukończeniu, aby ludzie mogli się do niej odnieść, gdyby chcieli.
• Przetestowane – upewnij się, że omówiłeś to z projektantem. Poproś ich, aby umieścili wszystkie zaprojektowane ikony obok siebie, co pomoże ci zobaczyć ich spójność i znaczenie, jakie mają.
• Obsługiwane przez niestandardowe narzędzia, takie jak menedżer ikon. Jeśli możesz dostarczyć niestandardowe narzędzia, które pomogą w korzystaniu z ikon, powinieneś udostępnić je.

Co powinien zawierać Twój opis projektu ikon?

Rozważ wszystkie przypadki użycia

Dowiedz się, gdzie będą używane Twoje ikony i co będą musiały reprezentować. Będziesz także musiał rozróżnić, które ikony będą wymagały metafory, a które ikony zostaną wykonane na podstawie rzeczywistych obiektów. Gdy już wyjaśnisz te czynniki, możesz przekazać to swojemu projektantowi za pomocą briefu.

Koncepcje i metafory burzy mózgów

Najpierw zrób listę wszystkich przedstawień, których można użyć do jak najlepszego opisania ikony. Zasoby, takie jak zestawy słów i słowniki, pomagają znaleźć słowa kluczowe, podobne słowa i definicje pojęcia, które chcesz przekazać za pomocą ikon. Następnie możesz zacząć od upraszczania tych pomysłów, aby ikona (która musi być abstrakcyjna i prosta) przekazywała komunikat w sposób jasny i skuteczny. Postaraj się samodzielnie przeprowadzić jak najwięcej badań i burzy mózgów, a następnie pozyskaj wsparcie projektanta dla reszty.

Znajdź przydatne referencje

Zawsze inwestuj w badania, aby znaleźć referencje wysokiej jakości. Są szanse, że gdzieś ktoś stworzył już fantastyczną wersję ikony, którą chcesz zaprojektować. Jeśli możesz je znaleźć, możesz również znaleźć inspirację. Kiedy podasz te odniesienia swojemu projektantowi, łatwiej będzie mu zrozumieć twoją perspektywę.

Wybierz styl ikony

Niektóre z popularnych stylów to glif, płaski, konturowy, materiałowy i ręcznie rysowany. Kiedy sfinalizujesz styl, będziesz musiał pomyśleć o dwóch ważnych czynnikach. Jednym z nich byłby interfejs użytkownika, na którym będą one wyświetlane, i jego styl. Drugi to wymagania dotyczące tego interfejsu, na przykład czy jest to Material, czy iOS.

Porozmawiaj szczegółowo ze swoim projektantem

Upewnij się, że projektant zachowuje spójność we wszystkich zaprojektowanych ikonach. Aby wszystko było jaśniejsze, poproś ich, aby wykonali pełny szkic wszystkich ikon do zrobienia.

Po zatwierdzeniu szkiców koncepcyjnych twoich ikon, powinieneś poprosić o wersje zwektoryzowane. Następnie zdobądź kilka makiet swoich ikon, aby sprawdzić, czy dobrze pasują do różnych przypadków użycia.

Teraz omówiliśmy, co należy uwzględnić w odprawie, aby Twoje ikony wyglądały ostro. Przejdźmy więc teraz przez główne rzeczy, które muszą być zawarte w projektowanych ikonach, aby ostateczny rezultat był na miejscu. Upewnij się, że przedyskutujesz je ze swoim projektantem.

Lista kontrolna tworzenia nowych ikon

Opisane poniżej kroki zostaną podjęte przez projektanta w celu stworzenia projektu ikony.

Unikaj rozmytych ikon

Aby ikony wyglądały ostro, ładnie i szeroko, muszą być umieszczone na pikselach. Pozwoli to pozbyć się wszelkich rozmytych czkawek.

Sprawdź wymiary i wagę

Zalecamy wykonanie testu zeza, aby upewnić się, że wszystkie ikony mają tę samą wagę i wymiary. Zasadniczo po prostu zmruż oczy i spójrz, jak Twoje ikony wyglądają względem siebie. Jeśli potrzebne są jakiekolwiek poprawki, skorzystaj z pomocy projektanta. Jedną wskazówką jest użycie idealnego koła i kwadratu, aby upewnić się, że waga jest taka sama w całym zestawie ikon.

Korzystanie z kształtów geometrycznych

Poproś projektanta, aby użył geometrycznych kształtów, które są proste i mocne, aby narysować Twoje ikony. Dzięki temu ikony będą wyraźne i będą wyglądać estetycznie.

Unikaj nadmiernej szczegółowości

Usuń wszelkie szczegóły, które sprawiają, że Twoje ikony wyglądają na zajęte i ciężkie, gdy przejrzysz je z projektantem. Zamiast tego zachowaj tylko podstawowe i proste szczegóły, dzięki którym ikony będą wyglądać czysto i wyraźnie. Ikony są małe i mogą po prostu zmienić się w plamę ze zbyt dużą ilością szczegółów.

Zachowaj miejsce

Wszystkie drobne szczegóły w ikonie wymagają wytchnienia. Jeśli wszystkie skleją się zbyt blisko siebie, cały projekt będzie zabłocony. Kiedy patrzysz na ikony, sprawdź, czy wszystkie mają wystarczająco dużo miejsca, aby szczegóły były jasne i czy ich znaczenie jest dla ciebie jasne.

Kontrast w ikonach

Upewnij się, że ikony mają wystarczający kontrast kolorów. Balans czerni i bieli powinien być w sam raz. Jeśli kontrast jest niewystarczający, ikony będą wyglądać niewyraźnie.

Spójrz na wizualną jedność

Innym czynnikiem, którym powinieneś się przyjrzeć, jest wizualna jedność ikony. Zasadniczo oznacza to, że waga linii, rozmiary rogów, zastosowana paleta kolorów, poziom szczegółowości i elementy projektu pozostają spójne w całym zestawie ikon. Koniecznie porozmawiaj o tym ze swoim projektantem, ponieważ jest to dużo do śledzenia!

Projektowanie ikon jest fajne, ale trudne do wykonania

Przeprowadziliśmy Cię przez wiele informacji, dzięki czemu możesz rozpocząć projektowanie ikon. To dużo do ogarnięcia i zapoznania się, więc upewnij się, że współpracujesz z dobrym projektantem, aby uzyskać odpowiednie ikony. Podaj im wszystkie szczegóły, których będą potrzebować, aby zrozumieć, w jaki sposób będą używane Twoje ikony i kto będzie je oglądał. Wkrótce będziesz mieć świetny zestaw ikon, które są mocne, przejrzyste i łatwe w użyciu.