Zbuduj swoją bibliotekę wizualną: wskazówki i wyzwania dotyczące projektowania

Jedną z dużych różnic między doświadczonym projektantem a młodszym projektantem jest biblioteka wizualna, którą tworzy.

Co to jest biblioteka wizualna?

To jest rzecz w twojej głowie, jeśli chodzi o elementy UI i praktyki UX. Co zbudowałeś i wiesz, jak to działa. Im bogatsza biblioteka, tym szybciej możesz znaleźć rozwiązania na miejscu.

Podajmy przykład: jako projektant masz za zadanie zbudować nową witrynę internetową.

Jaka strona internetowa? Możesz zapytać. Cóż, to wszystkie Twoje wymagania. Wyzwanie ze strony współpracownika. Och, też masz na to godzinę. To wyzwanie, które wykonaliśmy w DevriX, a oto jeden z wyników po 3600 sekundach:

Projekt: Alex Dimitrov

Nie było zbyt wiele czasu na zastanawianie się nad tym tematem, więc znalazłem się w nagłówku. Jakie składniki ma nagłówek?

• Tytuł na pewno
• Nawigacja
• Pasek wyszukiwania
• Niektóre linki społecznościowe
• Niektóre przyciski wezwania do działania, głównie do rejestracji i / lub tworzenia konta
• Trochę nawigacji, aby uczynić to interesującym

Skąd się to wszystko wzięło? Wcześniej była to pusta strona. Przede wszystkim nie było nawet tematu. Wszystko za sprawą biblioteki wizualnej, która powstawała w umyśle projektanta przez lata budowania stron internetowych, aplikacji i wszystkiego dookoła.

Na ile sposobów możesz zaprojektować nagłówek? Setki sposobów. Jest tak wiele różnych typów elementów, topografii, kolorów, nakładek, przycisków, elementów i wiele więcej. To ciekawy eksperyment.

Jak zbudować bibliotekę wizualną

Chociaż najprostsza odpowiedź brzmi „zrobić więcej projektów”, nie jest ona zbyt satysfakcjonująca po prostu dlatego, że jest w niej znacznie więcej. Ważniejsza jest różnorodność. Budowanie różnych projektów. Jednym z bezpośrednich sposobów rozwiązania tego problemu byłoby przeprojektowanie dużych witryn.

Oto kilka przykładów:

Facebook:

Źródło obrazu: Dribbble

Gmail:

Źródło obrazu: Dribbble

Świergot:

Źródło obrazu: Dribbble

Jest tak wiele przykładów. Im bardziej złożony jest projekt, tym szybszy będzie postęp. Ale jak to dokładnie działa?

Spójrzmy na listę jako przykład. Lista może mieć nagłówek z nazwą, może zawierać ikony, które mogą być kolorowe, podobne pod względem projektu lub inne. Może również mieć większy tytuł i podtytuł, może etykietę z numerem. Następnie możesz dodać stany najechania kursorem, elementy, które można wybrać lub wyłączyć, i tak dalej. Dzięki tym wszystkim odmianom możesz tworzyć różnorodne projekty list.

Źródło obrazu: Dribbble

Aby móc wymyślić tak wiele konfiguracji i układów, musisz mieć dobrą bibliotekę wizualną. Aby wiedzieć, że możesz to zrobić w ten sposób. To tak, jakby ktoś obok ciebie mówił „Narysuj mi pudełko”, a potem „Dodaj tytuł” ​​i robisz to bez zastanowienia. Wszystkie te decyzje są podejmowane, ponieważ robiłeś to wcześniej. Rzeczywiście, jest to również zgodne z podstawami projektowania, ale nie możesz cały czas sięgać do swoich notatek lub książek. To jak szkolenie sztucznej inteligencji - musisz budować wzorce, używając „udanej kolejności elementów”.

Wszyscy artyści wizualni muszą budować biblioteki

Znakomitym tego przykładem jest Kim Jung Gi - geniusz, który potrafi stworzyć realistyczne dzieła sztuki z dowolnej perspektywy.

Sztuka autorstwa Kim Jung Gi

W wywiadzie opowiada, jak przez całe życie patrzył na wszystkie otaczające go przedmioty, próbując zrozumieć ich kształt i narysować je z innej perspektywy. Dzięki tej umiejętności jest teraz w stanie narysować wszystko, co widzisz na powyższym obrazku, po prostu zaczynając od białej kartki papieru bez żadnych odniesień.

Albo lepiej powiedzieć - bez odniesień, po które może sięgnąć, bo myśli o nich - jego wizualną bibliotekę. To przykład pracy mistrza, do której dąży projektant.

W ten sam sposób, w jaki projektanci stron internetowych uczą się o przyciskach, listach, kartach, polach wejściowych, wyskakujących okienkach i wielu innych rzeczach, artyści cyfrowi dowiadują się o materiałach, oświetleniu, sylwetkach, działaniu mięśni, jak grawitacja cię ciągnie w dół i ciało i tak dalej.

Grafika: Suzanne Helmigh

To jest przykład tego, jak artyści cyfrowi uczą się o różnych materiałach, próbując zastosować je do kuli. Magma, drewno, futro, wino, jajko, ser, wszystko jest ważne. Dowiedzenie się o tym, robienie tego rękami, odciska to stopniowo w mózgu. A kiedy nadejdzie czas, aby zastosować ten materiał do prawdziwego obrazu, teraz lepiej zrozumiesz, jak to naprawdę działa i jak powinien realistycznie wyglądać efekt końcowy.

Oto przykład, w którym skóra, skóra, metal i włosy są używane do wytworzenia bardzo dobrze wyglądającego produktu końcowego. Brak podstawowego zrozumienia tych materiałów może sprawić, że metal będzie wyglądał jak plastik, papier podobny do skóry i tak dalej.

Źródło obrazu: Artstation

Wyzwania związane z komponentami projektowania stron internetowych

Przyjrzyjmy się teraz ponownie niektórym typowym komponentom, których będziesz często używać w projektowaniu stron internetowych, oraz praktykom do wykonania:

1 - Przyciski

Jeden z najbardziej podstawowych elementów witryny internetowej. Przyciski mają różne kształty i rozmiary. Możesz ustawić gradienty, zmienić kolory, dodać cień tekstu, dodać obramowanie (więcej niż jeden), dodać styl połysku, obrysować je, zmienić ich kształt (kwadrat, zaokrąglone rogi, koło), niektóre mają ikony, inne mają ikony oddzielone obszar, który można kliknąć.

Źródło obrazu: Dribbble

Zadanie : Zaprojektuj przycisk w 20 różnych stylach. Im większa różnica między nimi, tym lepiej. W przypadku każdego z nich postępuj zgodnie z najlepszymi praktykami projektowymi pod względem kontrastu, równowagi i tak dalej.

2 - Karty

Karty lub pudełka to kolejny bardzo powszechny element. Może zawierać dowolny rodzaj treści, chociaż niektóre typowe elementy to nagłówek / stopka + główna treść.

Źródło obrazu: Dribbble

Zadanie : Korzystając z treści, uformuj powyższe karty, zaprojektuj 10 wariantów, najlepiej jak najbardziej różnych. Zmień styl, dodaj nowe elementy, obracaj je, użyj gradientów, cieni, ikon i ilustracji. Spróbuj z tym zaszaleć.

3 - Komentarze

Prawie wszystkie blogi mają jakąś formę systemu komentarzy. Ale czy wziąłeś pod uwagę, że komponent komentarza może tak naprawdę nie zawierać faktycznego komentarza, ale bardziej przypomina zmianę „statusu”?

Źródło obrazu: Dribbble

Zadanie: powyższy przykład pokazuje właśnie to. Teraz spróbuj wymyślić cokolwiek związanego z komponentem komentarza - komentarze od użytkowników, statusy aktualizacji zadań (które znajdują się w obszarze komentarzy), komentowanie w stylu czatu, cokolwiek. Wartość pomiędzy 7-10 wariacjami byłaby dobra. Ponownie - postaraj się, aby wszystkie były inne. Więcej informacji, wyszukiwanie pomysłów, przeglądanie witryn.

Celem tych ćwiczeń jest znalezienie sposobów wykonywania wspólnych elementów w nowy sposób, o którym wcześniej nie wiedziałeś .

4 - Suwaki

Suwaki są jednym z elementów, których wielu programistów front-end nienawidzi ze względu na ogromną liczbę problemów, które tworzą, a także ze względu na ciężki JavaScript, który może działać w tle. Ale to nie znaczy, że nie będziesz musiał go tworzyć.

Źródło obrazu: Dribbble

Zadanie: przeglądaj Internet i różne projekty, aby dowiedzieć się więcej o różnych układach i podejściach. Może spójrz na biblioteki JS, w których robią slajdy, aby zobaczyć, co mają. Stamtąd zaprojektuj 10-15 różnych projektów dla suwaków. Ponownie - postaraj się, aby każdy projekt był jak najbardziej różny od poprzedniego, nie używaj tylko drobnych ulepszeń.

5 - Formularze wejściowe

Formularze wejściowe to kolejna podstawowa część prawie każdej witryny internetowej. Interesujące jest to, że otrzymują informacje zamiast wyjściowej.

Źródło obrazu: Dribbble

Zadanie: Twoim zadaniem jest wymyślenie najdziwniejszych informacji, których ktoś może potrzebować na stronie internetowej. Prześlij plik PDF lub PSD (wybierz jeden), dane karty kredytowej, dodaj przepis na ciasteczka, oblicz proporcje mieszania lakieru, utwórz konfigurator salonu samochodowego. Wszystko, co przychodzi na myśl, im bardziej wyjątkowe, tym lepiej. Ponownie przeglądaj strony internetowe, aby zobaczyć prawdziwe rozwiązania. Zaprojektuj co najmniej 10 różnych unikalnych form o unikalnych wzorach.

Podsumowanie

Budowanie biblioteki projektów jako projektant jest jednym z głównych etapów w usprawnianiu przepływu pracy, szybkim tworzeniu projektów, rozwiązywaniu problemów klientów oraz wymyślaniu wyjątkowych i genialnych sposobów na poprawę komfortu użytkowania. Kiedy zaczynasz przeglądać i uważnie przyglądać się każdemu elementowi w sieci, zaczynasz rozważać działania użytkownika, to, co widzi i jak można to poprawić.

Wykorzystanie powyższych zadań jako propozycji pracy domowej pomoże Ci uzupełnić portfolio. Nie ograniczaj się tylko do 5 wymienionych zadań, idź tam, przeglądaj strony internetowe, przeprojektowuj, studiuj je i kontynuuj rozwijanie zmysłów projektowych i budowanie własnej biblioteki wizualnej!