Wykorzystanie ilustracji w projektowaniu stron internetowych
Ilustracja to niezwykle wszechstronne narzędzie, które może znaleźć wiele różnych zastosowań w projektowaniu. A jeśli chodzi o projektowanie stron internetowych, możemy znaleźć niezwykle szeroką gamę implementacji.
Dziś chciałbym zagłębić się w kilka kluczowych sposobów, w jakie narzędzie to zostało wdrożone, abyśmy mogli czerpać nowe pomysły, aby inspirować i kwestionować projekty, które tworzymy.
Zacznijmy gdzieś, co rzadko robię, z podstawową definicją: Ilustrowane: 1) Aby wyjaśnić ; 2) Aby wyjaśnić , podając lub służąc jako przykład lub przykład; 3) Aby zapewnić funkcje wizualne przeznaczone do wyjaśnienia lub dekoracji .
Wydaje się, że w rzeczywistym świecie projektowania stron internetowych ilustracja ma tendencję do wykonywania obu funkcji jednocześnie. Upiększa, podczas gdy wyjaśnia. A jeśli wykonuje tylko jedną z nich, możesz zadać sobie pytanie, dlaczego. Być może poprzez umieszczenie ilustracji w pracy spełnienie obu ról jest sposobem, aby naprawdę wykorzystać element projektu do wszystkiego, co jest warte.
Nie można oczywiście powiedzieć, że projekt nie może się powieść, jeśli obsługuje tylko jedną lub drugą; na pewno tak. Jednak, aby jak najlepiej wykorzystać naszą pracę, uważam, że rzucanie wyzwania naszemu myśleniu jest zawsze pomocne. Jak zwykle, zagłębimy się w kilka grup próbek, aby zobaczyć, co można zrobić z tym urządzeniem wizualnym. Po drodze rozważ, czy każde podejście zapewnia klarowność lub dekorację, lub jedno i drugie.
Ilustracja tematyczna
Pierwszym podejściem do ilustracji, które chcę tu przedstawić, jest wykorzystanie tego stylu do stworzenia ogólnego podejścia tematycznego. W tej sytuacji przygotowuje się ilustracje do ustalenia ogólnego tematu. Czy wspinamy się po górach, odwiedzamy stację kosmiczną lub zwiedzamy biuro firmy?
Chociaż takie podejście nie musi prowadzić nas do lokalizacji, to dość często. W innych sytuacjach styl po prostu ustanawia ogólny motyw, który strona podąża.
Powodem, dla którego jesteśmy tutaj zainteresowani jest to, że jest on wykorzystywany do radykalnego napędzania ogólnego projektu. Ilustracja nie jest jakimś małym elementem wspierającym. Zamiast tego jest najbardziej widocznym elementem projektu i kontroluje cały układ.
Zabierz mojego szefa do Przylądka Północnego
W tej próbce podejście nie może być bardziej jasne. Projekt witryny wyraźnie odzwierciedla jej najbardziej podstawowy cel. Ilustracja stanowi wizualne odniesienie do tego, co zrobi osoba. I pod względem definicji ilustracji, grafika zapewnia dekorację i piękno strony.
W tym przypadku motyw zdecydowanie określa cel witryny i pomaga użytkownikowi w jej zakupie.
Zestaw startowy
Podejście tematyczne wcale nie musi być tak brutalne. Czasami może to być bardziej naturalna część bardziej typowo zorganizowanej strony. W tym przypadku strona jest nieco unikalna w swoim układzie, a motyw nie wymusza na interfejsie statku rakietowego zbytniego interfejsu.
Zamiast tego temat jest wpleciony w projekt w taki sposób, że komunikuje swoje dekoracyjne elementy bez ingerencji w treść. Tutaj ilustracja służy do dekoracji, ale nie wyjaśnia tak wiele. Nie jest to wcale zaskakujące i oczywiście pokazuje, że nie istnieje żadna formuła do naśladowania.
Atelier Anonyme Design
W innych sytuacjach, takich jak ta, ilustracja tematyczna dosłownie jest stroną. Nie jest to element wspierający, ale całkowicie staje się samym projektem.
Tutaj użycie ilustracji wyraźnie odgrywa rolę dekoracyjną. Ale twierdzę, że zapewnia on również wysoki poziom przejrzystości dla odwiedzających. To jest strona internetowa dla agencji projektowej. Projekt i charakter tej strony komunikuje wiele dla odwiedzających. W związku z tym jestem pewien, że służy on jako potężny filtr dla ich bazy klientów. Będziesz albo wciągnięty i uwielbiasz ich zabawne i twórcze podejście, albo zostaniesz całkowicie przez niego wyłączony. Do tego momentu wydaje mi się, że zapewnia on dużą jasność co do agencji i ich mentalności.
Allure Graphic Design
Na tej stronie wykorzystanie ilustracji ma również wyraźne podejście tematyczne. Chociaż strona podąża za standardowymi formułami layoutu, cały projekt jest zawijany w układ tematyczny. Te elementy kierują nie tylko wyglądem strony, ale łączą się z głównym logo i kopią używaną na stronie. Temat jest wciągający i napędza całą wiadomość prezentowaną na stronie.
Dodatkowe próbki tematyczne
Oto kilka dodatkowych witryn wykorzystujących ilustracje tematyczne do ustalenia środowiska lub motywu witryny.
Chipmunk
Drift Boys
Iutopi
Chandu4u
Maskotki
Jak mogę zakryć pomysł wykorzystania ilustracji bez przejrzenia jednego z najbardziej oczywistych: maskotek? Dzięki temu elementowi wizualnemu projektanci mają tendencję do personifikowania witryny, jej produktu lub celu za pomocą postaci. Wdrożenie takiego elementu różni się nie tylko, ale ma również moc i uzasadnienie.
inkFinder
W tym projekcie ilustrowana maskotka odgrywa dość wyraźną rolę. Jasne, że odzwierciedla nazwę produktu. Zapewnia to nie tylko pewne życie dla projektu, ale stawia mu twarz. W ten sposób widzowie mają coś bardziej wyjątkowego, aby odeprzeć swój mózg. Mam nadzieję, że maskotka pomoże w zapamiętaniu i unikatowym doświadczeniu, które pomoże produktowi wyróżnić się ze słyszanych.
Być może jest to najpotężniejszy cel maskotki, aby coś wyróżnić. Wielką zaletą maskotki z ilustracjami jest to, że może być całkowicie wyjątkowa i specyficzna dla tego produktu. Zakładając, że został wykonany na zamówienie dla tego projektu, powinien być jedynym miejscem, w którym istnieje taka dokładna ilustracja.
The Evnt
Jak na ironię, znajdujemy tutaj ilustrowaną maskotkę podobną do ośmiornicy (czym jest trójskrzydłowe stworzenie morskie?). W tym przypadku maskotka jest oczywiście o wiele większym krokiem od rzeczywistości: robotem o trzech nogach, z mózgiem w bańce.
Chociaż może to być dziwny wybór, zapewnia piękny element wyróżniający wydarzenie. Ta wyjątkowa maskotka daje fajny element wizualny do połączenia z wydarzeniem. Wychodzi na całe życie i naprawdę łączy ludzi z czymś konkretnym. Przypuszczam, że to jest właśnie celem maskotki.
Projekt tej strony jest piękny, ale zastanów się, jak nudny byłby bez tej zwariowanej maskotki. Wytwarzanie takiego elementu nie jest łatwe, ale w tej sytuacji jest niezwykle skuteczne.
Big Eye Creative
Na przykład maskotkę opartą na nie ośmiornicach spójrz na Big Eye Creative teren. Maskotka nie odgrywa tutaj tak dużej roli w projektowaniu. To jednak dodaje mu wiele osobowości. Oczywiście inne ilustracje i ogólny styl witryny powodują mniej formalną prezentację. Ale maskotka w logo jest obecna na całej stronie. Dzięki temu ich lekki styl przenika projekt.
Dodatkowe ilustracje maskotki
Oto kilka dodatkowych próbek maskotek w pracy w projektowaniu. W tym jeszcze jedna ośmiornica; wydaje się, że jest popularny do użycia.
Zarządzanie Pioneer Records
Argyle Octopus
Coucou
Konsebt
Ilustrowana dekoracja
Następnym typem użytkowania, który chciałbym rozważyć, jest to, co nazywam dekoracją tematyczną. Dzieje się tak, gdy ilustracja ma działać w sposób dekoracyjny, który w rzeczywistości nie zapewnia konkretnego fizycznego odniesienia. Na przykład najczęściej ilustracja zawiera zdjęcia ludzi, zwierząt, przedmiotów lub miejsc. Ale w tym przypadku ilustracja nie przedstawia tak naprawdę niczego rzeczywistego, ale po prostu zapewnia dekorację upiększającą projekt w taki sposób, jak tylko ilustracja. Jak zwykle wyjaśnijmy to przez kilka próbek.
1000 motywów WP
Dla naszego pierwszego przykładu rozważmy 1000 motywów WP stronie internetowej. Na tej stronie wykorzystanie ilustracji zapewnia podstawową strukturę i styl witryny. Ale robi to w najbardziej czysto dekoracyjnym. Ogólny styl jest jak ilustracja, a jednak nie ma typowych humanistycznych elementów.
Teraz chcę całkowicie zaprzeczyć sobie. Myślę, że styl jest głównie dekoracyjny. Ale mogę zobaczyć, jak możemy twierdzić, że zapewnia on poziom wyjaśnienia witryny. Styl, którego używa projekt, łączy się z określoną publicznością. Mówi coś o stylu strony i tematach, które mogą wytworzyć. Na tak wiele sposobów, jakość ilustrowanego układu pokazuje jakość pracy, jakiej można oczekiwać za pośrednictwem tej witryny. W ten sposób wyjaśnienie jest być może bardziej subtelne i mniej na twojej twarzy, ale mimo to obecne.
Historia Coca-Coli
Na tej stronie znajdujemy inny projekt oparty na ilustracji. Jest tu kilka zilustrowanych elementów, które demonstrują prawdziwe rzeczy, ale większość podejścia tematycznego jest ustalona z czystą dekoracją. Ten przykład pokazuje nie tylko podejście, ale pokazuje również, że prawie żadna technika nie jest używana w purystyczny sposób. W rzeczywistości prawdopodobnie połączycie te elementy na różne sposoby.
Metafiziks
W tym ostatnim przykładzie dekoracyjnej ilustracji znajdziesz doskonałe elementy tła. Niektóre z nich są bardziej namacalne niż inne, ale ogólnie rzecz biorąc, bardziej dotyczą elementów stylistycznych niż cokolwiek innego. Zadziwiające jest, jak piękne mogą być takie proste rysunki liniowe w połączeniu z pięknym tekstem, dobrze dobranymi kolorami i prostymi ikonami. Końcowy wynik jest tutaj fantastyczny i niezwykle piękny.
Więcej wzorów z ilustrowaną dekoracją
Oto kilka dodatkowych próbek, które uzupełnią ten typ ilustracji w projekcie.
Babeczki Moo
Tech Jobs
Stadion Pixel
Niestandardowe torby HQ
Ilustrowany tekst
Ręcznie renderowany tekst z pewnością nie jest nową koncepcją i jest czymś, co omówiłem wiele razy wcześniej . Jednak nigdy nie rozważałem takiego podejścia z ilustracją.
Tekst renderujący strony to popularna odmiana ilustrowanego tekstu i świetne rozwiązanie dla wielu kreacji. Po pierwsze, jest to świetny sposób, aby wykorzystać wszystkie praktyczne zajęcia szkoły artystycznej. Po drugie, jest to świetny sposób na wyprodukowanie czegoś wyjątkowego. W końcu, jeśli przekażesz jakiś tekst, będzie on w 100% unikalny. Nawet jeśli szkicujesz istniejący krój pisma, nadal będzie on odrębnym dziełem.
Rangus
To doskonały przykład ilustrowanego typu. Styl jest niezwykle wspaniały, całkowicie wyjątkowy i bardzo zachęcający. Ale na tym się nie kończy. Typ renderowany ręcznie demonstruje talenty jednostek. Pokazuje, że tworzy dzieła sztuki rękami i doskonale łączy się z umiejętnościami animacyjnymi. Szczególnie podoba mi się to, że wszystko opiera się na temacie tablicy szkolnej, ponieważ naprawdę doskonale łączy temat i elementy. Moim zdaniem ta strona pokazuje, jak ujednolicona ilustracja może być z celem i przesłaniem strony.
Joey Lomanto
W tym przypadku przedstawiony tekst jest znacznie bardziej subtelny. Zamiast jechać całym kierunkiem projektu, po prostu gra ładnie. W rzeczywistości przy pierwszym podejściu możesz nawet nie zauważyć ręcznie renderowanego stylu dużego tekstu strony głównej. Oczywiście tekst może być czcionką, ale został użyty w taki sposób, aby idealnie komponował się ze stylem strony. Bez względu na to, styl jest pięknie zunifikowany, a ilustracja odgrywa wiele ról w ogólnym projekcie.
Przejdź na żywo
Tekst zilustrowany nie musi być jednak ręcznie renderowany. Jak można zauważyć w tym przykładzie, tekst jest stylizowany na różne sposoby, które zmieniają sam tekst w bity ogólnej ilustracji. Piękno tego podejścia polega na tym, że jednoczy on tekst z innymi ilustracjami. Pozwala to uniknąć mniej jednolitego stylu, w którym po prostu masz ilustracje nad standardowym tekstem internetowym. Te ostatnie mogą działać, ale w tym przypadku wpływ ilustrowanego tekstu jest jasny.
Dodatkowe próbki ilustrowanego tekstu
Poniższe przykłady pasują luźno do tej kategorii. Mówię luźno, ponieważ czasami trudno powiedzieć, ponieważ czasami jest to rzecz subtelna. W niektórych z tych przypadków tekst wydaje się jedynie dziełem sztuki, więc umieściłem go w tej kolekcji.
Contrast Rebellion
Fakta
La Web Shop
Ilustracje informacyjne
Zgodnie z definicją ilustracji jednym z jego celów jest wyjaśnienie i wyjaśnienie. Dlatego dobrze jest znaleźć przykłady, w których ilustracje robią to z niezwykłą klarownością.
Książkowy
Zacznijmy od Książkowy teren. W tym niecodziennym układzie stwierdzamy, że ilustracje bardzo wyraźnie symbolizują różne punkty układu strony głównej. Każdy blok ma element wizualny, który nie tylko upiększa go, ale co ważniejsze, wyjaśnia to. Tak bardzo, że jako czytelnik prawie nie muszę nawet czytać kopii. Grafika urządzeń w lewym dolnym rogu pokazuje to szczególnie.
Conferize
W znacznie mniej widoczny sposób ilustracja w tym projekcie okazuje się równie pouczająca. Prosta ilustracja samodzielnie przedstawia temat witryny. Być może nie przebije cię przez głowę swoim przesłaniem, ale pięknie odzwierciedla cel witryny.
Aktywuj
Ilustracja w tym projekcie nie tylko przekazuje informacje o wydarzeniu, które reprezentuje, ale także odzwierciedla cel tego wydarzenia. To szczególne wydarzenie obraca się wokół odłączania od technologii. To szansa dla ludzi zalewanych technologią, aby uciec z jej szponów.
Ilustracja pokazuje nam, co uczestnicy będą robić, więc ma charakter informacyjny. I z samej swojej natury ilustracja zrywa z technologią i korzeniami w czysto organicznym odczuciu, fundamentalnie świetnym sposobem na przekazanie informacji o celach witryny.
Bardziej pouczające ilustracje
Te dodatkowe strony również przedstawiają ideę ilustracji, które nas informują. Niektóre są malutkimi i podstawowymi ikonami, podczas gdy inne są wciągającymi elementami, które w pełni definiują i reprezentują treść.
Vitality City
Uklizenodoma.cz
Qubiq
Antidotum technologiczne
Ostatni przykład (The Aktywuj strona) wkroczyliśmy w to, co chcę rozważyć w dalszej kolejności, wykorzystanie ilustracji do zerwania z technologicznym stylem rzeczy. Czasami konieczne jest odłączenie się od fundamentów technologicznych sieci i zademonstrowanie bardzo organicznego wrażenia. Ilustracja jest jednym z najpotężniejszych narzędzi do realizacji takiego pomysłu.
Aplikacja do wysyłki
Ta prosta strona już wkrótce jest niczym niezwykłym. I wyraźnie, jak osiąga swoje piękno jest radykalnie proste. Pojedyncza ogromna ilustracja samodzielnie odwraca uwagę od faktu, że jest to strona internetowa. Czuje się bardziej jak dzieło sztuki, które ma mały interaktywny element, na pewno świetny sposób, aby wywrzeć ogromny wpływ na użytkowników i stworzyć niezapomniany obraz.
Muziekpark
Chociaż ta strona nie wykorzystuje tak radykalnego podejścia, ilustracja jest nadal duża i widoczna w układzie. Tutaj animowane obrazy spowalniają życie na stronie. Połącz to z kreatywnym i nietypowym układem, który całkowicie oddziela się od technologii, która je napędza. Być może fakt, że nie wygląda na normalną stronę, również odgrywa tutaj ważną rolę. Weź również pod uwagę, że ilustracja w tym przypadku naprawdę pomaga nam poinformować nas o temacie witryny.
Egopop
W kolejnym nietypowym układzie odkryliśmy, że ilustracja została uruchomiona. W tym miejscu dzieło nie tylko mówi nam o osobach, które reprezentuje strona, ale także odrywa nas od normalnego sposobu myślenia, jaki może mieć odwiedzający. Ponownie, czuje się bardziej jak interaktywne dzieło sztuki niż strona internetowa. Jeśli to jest twój cel i potrzeba, to jest świetne podejście do rozważenia.
Zaarly
W porównaniu do poprzednich przykładów Zaarly strona stoi w jaskrawym kontraście. Chociaż projekt jest rządzony przez pojedynczą dużą ilustrację, a ta ilustracja służy do ustawienia tonu dla strony, podstawowa funkcja jest o wiele bardziej skomplikowana niż te inne próbki.
Ta strona jest aplikacją, która ma być używana. A ilustracja pomaga ustalić określony zestaw oczekiwań. Daje poczucie humoru, humanistyczne, które jest wyraźnie bardzo organiczne i naturalne uczucie. Wyobraź to sobie w przeciwieństwie do minimalistycznej aplikacji bez osobowości. Projekt daje stronie poczucie przystępności i przesuwa nasze oczekiwania.
Wniosek
Wykorzystanie ilustracji w projektowaniu jest odwieczną praktyką, a jej zastosowanie w Internecie jest jasne. Podobnie jak w przypadku każdego elementu projektu cieszę się procesem ponownego przemyślenia jego przeznaczenia i zastosowania. Dzięki takiemu wysiłkowi nieuchronnie stwierdzam, że lepiej rozumiem, jak to działa, sposoby wykorzystania go do zamierzonego celu, a ostatecznie, kilka świeżych i inspirujących pomysłów.
Jak korzystać z ilustracji w projektowaniu stron internetowych? Podziel się swoimi doświadczeniami poniżej ....