8 prostych kroków do lepszego projektowania ikon
Ikony są wszędzie. Od ikon aplikacji na ekranach domowych po graficzne reprezentacje, które prowadzą użytkowników przez projekt, projektowanie ikon to wielka sprawa.
Do dobrego projektu ikon wystarczy sztuka. Element nie tylko musi być rozpoznawalny w najmniejszych rozmiarach, ale również w oparciu o odpowiednie ikony wektorowe może być skalowany do użycia w zbyt dużych proporcjach. Niektórzy projektanci używają nawet ikonograficznych obrazów do dominujących wizualizacji.
Więc gdzie zaczynasz? Oto przewodnik po projektowaniu lepszej ikony w ośmiu (nieco) prostych krokach.
1) Zacznij od siatki
Dobry projekt ikony zaczyna się od solidnego fundamentu. Prosta kwadratowa siatka blokowa to wszystko, czego potrzebujesz, aby rozpocząć szkicowanie ikony.
Użyj tego samego papieru z siatką, z którym pracowałeś w szkole podstawowej, aby tworzyć szkice ikon z ołówkiem i papierem lub zacznij od kwadratowej siatki pikseli w oprogramowaniu do projektowania. Powinieneś prawdopodobnie projektować na kwadratowym płótnie, ponieważ większość ikon musi się dopasować do kwadratowych przestrzeni. (Obejmuje to wszystko, od ikon do aplikacji, ikon w projektach witryn internetowych lub profilach mediów społecznościowych).
Po uzyskaniu siatki, upewnij się, że dasz sobie element białej przestrzeni wokół obwodu. Zapewni to wystarczająco dużo elastyczności, aby dodać tło, jeśli jest to potrzebne, i uniemożliwić odcięcie ikony w aplikacjach, które mogą mieć zaokrąglone krawędzie lub inne rodzaje ukosowania.
Tylko dlatego, że twoja siatka jest kwadratowa, nie znaczy, że twoja ikona musi być. Może być okrągły lub bardziej prostokątny. Pamiętaj: projektując coś, co nie jest kwadratowe, powinno ono być wyrównane poziomo i pionowo w siatce, aby ułatwić późniejsze użycie. Pomoże to również zachować spójną skalę dla zestawu ikon.
Siatka ma pomóc Ci w stworzeniu ram, w których możesz konsekwentnie projektować. Jako bonus możesz również użyć siatki do pomocy w narysowaniu elementów ikony; użyj linii siatki, aby narysować proste kąty lub określić położenie pociągnięć w projekcie.
2) Buduj z geometrią
Ikony są często niewielkie, dlatego ważne jest budowanie z elementami, które użytkownicy rozpoznają na pierwszy rzut oka. Dlatego tak wiele ikon ma swoje korzenie w geometrycznych kształtach.
Koła, kwadraty i trójkąty to najbardziej popularne kombinacje kształtów. Użytkownicy nie muszą o nich myśleć ani kwestionować ich. Każdy kształt jest prosty i możliwy do zidentyfikowania. Następnie można je łączyć i łączyć w celu utworzenia innych elementów o tej samej geometrycznej stylizacji.
Spójrz na ikonę Dropbox, na przykład. To nic więcej niż kilka kwadratów połączonych ze sobą, tworząc skrzynkę. Koncepcja jest kreatywna, prosta i łatwa do odczytania w dowolnym rozmiarze.
Inną popularną opcją "geometryczną" jest użycie pojedynczej, wielkiej litery jako części ikonografii. Chociaż nie działa to dobrze w przypadku szerokiego zastosowania, może służyć jako funkcjonalny identyfikator marki. Facebook jest podstawowym przykładem użycia tej ikony w akcji.
3) Utwórz unikalny kształt
Rozgrywka zaczynając od kół i kwadratów jest pomocna, ale chcesz stworzyć kształt, który należy do Ciebie. Jest to najważniejsze, jeśli pracujesz z ikoną identyfikującą markę. Nawet pozornie skomplikowane ikony często zaczynają się od prostych kształtów, które przekształcają się w coś bardziej unikalnego.
Jeśli chodzi o wyjątkowość, jest kilka elementów do przemyślenia.
- Trzymaj się z dala od obrazów. Nie będą dobrze wyglądać na małe.
- Trzymaj się z dala od tekstu. Użytkownicy nie będą mogli go odczytać.
- Niektóre trendy są warte zachodu. Płaskie i prawie płaskie style ikon zdziałają cuda.
- Praca z liniami prostymi i kątami połączonymi punktami na siatce. Krzywe mogą szybko stać się niezręczne.
- Najlepsze ikony działają w kolorze, ale są rozpoznawalne również jako czarne i białe kontury.
4) Daj mu dużo miejsca
Ikony potrzebują dużo miejsca do oddychania. Pomyśl o tym, jak używane są ikony. Zwłaszcza jeśli projektujesz ikonę aplikacji, którą użytkownicy zobaczą na szalonych tapetach na swoich urządzeniach, projekt musi zostać osadzony w ramce, aby była bardziej czytelna i rozpoznawalna.
W obrębie swojej siatki utwórz spójną ramkę wokół krawędzi. Pomyśl o tej przestrzeni prawie tak, jak w przypadku pracy z projektem upuszczania w druku. Kolor musi rozciągać się na tę część płótna, ale prawdopodobnie będzie niewidoczny.
5) Trzymaj się kolorów marki
Nie szalej z ikonami palet kolorów tylko dlatego, że możesz. Jeśli tworzysz coś dla marki, trzymaj się swojej palety kolorów. Chociaż możesz odejść od normalnego logotypu marki w przypadku ikony, kolor powinien pozostać spójny.
Jeśli pracujesz nad zestawem ikon dla pakietu projektowania stron internetowych lub w innym celu, zacznij od czarnych lub białych ikon. Następnie dodaj kolor, zbliżając się do ukończenia projektu. Pracując z prostymi elementami o wysokim kontraście - czarnym na białym lub białym na czarnym - naprawdę poczujesz, jak każda ikona wygląda w przestrzeni. Jeśli działa niezależnie od koloru, jest większa szansa, że będzie dobrze działać z dodanym kolorem.
6. Używaj spójnych divot
Zwróć uwagę na każdy szczegół w projekcie ikony. Czy wykreśliłeś kątowy kąt w projekcie? Następnie rozważ to zrobić na wszystkich rogach.
Chociaż te drobne szczegóły mogą nie wydawać się ważne - mogą nawet nie być całkowicie widoczne w najmniejszych rozmiarach - mogą dodać klasyczny styl ikonom wyświetlanym w bardziej graficznych wyświetlaczach.
Więcej projektantów używa ikon jako przycisków w całym projekcie i pomaga w oku między większymi elementami tekstowymi. Starannie wykonane ikony mogą pomóc zachwycić użytkownika i zachęcić do konwersji witryny.
7. Zaprojektuj dla najmniejszego rozmiaru
Chociaż ikony mogą być używane w niemal dowolnym rozmiarze, chcesz zaprojektować projekt tak, aby działał w najmniejszych rozmiarach. Najczęściej ikony favicon są ładowane w zaledwie 16 na 16 pikseli. Czy twoja ikona odszyfrowana w tym rozmiarze?
Jeśli odpowiedź brzmi "nie", masz dwie możliwości:
- Zacznij od projektowania ikony.
- Utwórz alternatywną ikonę dla małych przestrzeni, takich jak favicons.
8) Nie dekoruj
Wreszcie, zachowaj to proste. Oprzyj się pokusie, by udekorować swój projekt ikony. Niektóre z najlepszych aplikacji wciąż cierpią na niewygodne ikony. (Wunderlist natychmiast przychodzi mi na myśl, pomyśl tylko, jak ładniej by wyglądał bez cieni i konturów.)
Dekoracja kończy się na niezgrabnych miejscach. Może również przytłoczyć projekt. Pomyśl o ikonach jako o znakach akcentujących projekt, nie są one głównym celem. Jeśli użytkownik zbyt długo będzie trzymał ikonę, ponieważ stara się ją zrozumieć, może stracić kontrolę nad tym, co powinien zrobić. Ikony powinny sygnalizować szybkie interakcje.
Wniosek
Projektowanie ikon może być świetną zabawą, jeśli masz czas na doskonalenie tej umiejętności. Ale jeśli nie jesteś ekspertem, nie martw się. Istnieje wiele wspaniałych sklepów, które udostępniają zestawy ikon, które możesz wykorzystać w swoich projektach.
Jeśli dopiero zaczynasz od projektowania ikon, warto pobrać jeden z tych zestawów. Wrzuć ikony na siatkę i rozłóż je na części. Możesz dowiedzieć się, jak lepiej tworzyć własne proste kształty z tego ćwiczenia.