Tekstura i wzór — niedoceniani bohaterowie projektowania wizualnego

To była świetna zabawa (haha) w Ayagigs Web3 Fellowship, programie edukacyjnym prowadzonym we współpracy z Coinbase .

Doceniam pracę kierownika projektu produktu, Ajiri Omafokpe i współpracownika programu, Folushola Esther . Naprawdę wiele zrobili, aby program był przyjazny, edukacyjny, zabawny i niósł całą grupę, z którą uwielbiasz się spotykać.

Zakończyliśmy fazę podstawową i przechodzimy do fazy głównej, ale wcześniej mieliśmy tydzień wyzwań, który rozpoczął się w poniedziałek, 21 listopada 2022 r., aby sprawdzić, czego nauczyliśmy się podczas fazy podstawowej. To było trudne, przeprowadzanie wszelkiego rodzaju testów, w tym MCQ, QA, test praktyczny (nie uwierzysz, że zrobiono to w 2 dni), a ten artykuł jest ostatnim zadaniem w tygodniu wyzwań.

Otrzymałem wiele próśb o napisanie na temat wykorzystania wzorów i tekstur, więc postanowiłem skorzystać z okazji, aby podzielić się swoją wiedzą na ten temat.

Więc zacznijmy,

Tekstury i wzory to elementy wizualne, które stały się nieodzowne w projektowaniu. Nazywam ich niedocenionymi bohaterami, ponieważ są przeważnie pomijani, ale stają się nieocenieni, gdy zostaną odkryci przez dociekliwego projektanta.

Są to elementy zapożyczone ze sztuki, które uzupełniają cyfrowy projekt i dają poczucie głębi. Tekstury mogą pokazywać kluczową zawartość strony internetowej, kierując wzrok użytkownika. Wzory mogą ożywić nudne przestrzenie. Oba w znacznym stopniu przyczyniają się do uczynienia interfejsu przyjemnym, a tym samym poprawiają wrażenia użytkownika.

Jednak wydaje się, że tekstura była przez długi czas błędnie rozumiana jako projekt w stylu „ GRUNGE ”. Na wielu stronach internetowych widzimy, że w celu podkreślenia fajnych efektów są one używane w dużych ilościach, a nawet podejrzewane o nadużycia. Rezultatem nadużyć jest zakopanie rzeczywistych korzyści. Aby w pełni wykorzystać teksturę, należy ją stosować subtelnie i z rozmysłem.

Z drugiej strony wzory są łatwiejsze w użyciu i można ich użyć do zwrócenia uwagi na określone obszary ekranu. Podobnie jak tekstury, wzory są skuteczne, gdy są używane subtelnie, jednak w razie potrzeby można je wykorzystać w bardziej oczywisty sposób.

Te dwa słowa są czasami zamieniane, co jest błędne. Dzielą tylko niewielkie podobieństwa. Wzór zazwyczaj składa się z kilku drobnych, powtarzalnych elementów, z określonym rytmem wizualnym. Tekstura składa się z większych elementów niż wzór, który niekoniecznie jest powtarzalny.

Przypadki użycia tekstur i wzorów

Tekstura jest najczęściej używana podczas projektowania aplikacji internetowych, a nie mobilnych. Wzorce są popularne zarówno w projektowaniu aplikacji internetowych, jak i mobilnych. Powodem projektowania nie może być tylko to, że „ pięknie wygląda ”, ale powinno opierać się na spełnieniu określonej funkcji, a głównym celem wykorzystania tekstury i wzoru podczas projektowania jest podniesienie poziomu i wizji strony internetowej. Rzućmy okiem na niektóre z ich przypadków użycia:

Zachęć użytkowników do kliknięcia

Elementy takie jak ikony, przyciski, tytuły itp. Wszystkie mogą być teksturowane. Może zachęcać użytkowników do klikania odpowiednich elementów. Może to być powód, dla którego stosowanie tekstury jest popularne. Głównym zastosowaniem tekstury jest nałożenie jej na elementy, aby można je było odróżnić od innych elementów w sieci.

Ulepszona wizualna prezentacja informacji

Ponieważ tekstura może być używana do wyznaczania linii wzroku, podobnie jak linie, ramki i kontrast, może być również używana do składu w celu wyświetlania treści zgodnie z pewnymi regułami wizualnymi. Jednocześnie efekt tekstury powinien być odpowiednio zastosowany i skoordynowany z innymi zasadami wizualnymi, a końcowy efekt wyjściowy będzie świetny.

Jednocześnie tekstura powinna być idealnie dopasowana do stylu i tematyki strony. Na przykład ręcznie robione strony internetowe pasują do wzorów tkanin, a malowane strony pasują do wzorów papieru. Wszystkie te elementy mogą odzwierciedlać zawartość serwisu poprzez pewną regułę logiczną i wzmacniać ogólną hierarchię informacji.

Stwórz atmosferę i podkreśl indywidualność

Teraz coraz więcej klientów lubi, aby ich strona internetowa mogła wykorzystać projekt interfejsu do przekazywania większej ilości informacji o sobie. Mają nadzieję, że strona internetowa może podkreślić ich osobowość i wywrzeć efekt marki. Tekstura i wzór to potężne narzędzia w tworzeniu indywidualności.

Zachowaj czytelność

Czytelność to podstawa, którą musi zachować strona internetowa. Nawet przy użyciu tekstur upewnij się, że zawartość pozostaje łatwa do skanowania i czytania. Nawet jeśli jest to piękna strona internetowa, użytkownicy nie będą z niej korzystać, jeśli czytelność nie będzie dobra. Należy unikać takiej sytuacji, jak pokazano na poniższym rysunku.

Używaj tekstury oszczędnie

Jak wspomniano wcześniej, tekstury należy używać subtelnie i nie nadużywać. Na stronach internetowych musimy być powściągliwi i nie używać ich na dużą skalę, aby nie przeszkadzać użytkownikom w zwracaniu uwagi na główną treść.

Praktyka czyni mistrza

Używając tekstur i wzorów, spróbuj więcej. Dopiero po próbie poznasz ostateczny wynik. Umieść teksturę w miejscu, o którym nigdy nie pomyślałeś, a możesz znaleźć różne rzeczy. Im więcej używasz wzorów i tekstur, tym lepiej.

Użyj go z intencją

Używając wzorów i tekstur, musisz być świadomy. Podobnie jak w przypadku projektowania, nie robisz tego dla samego robienia. Wykorzystanie tekstur i wzorów powinno być środkiem do celu.

Eksploruj, eksploruj, eksploruj...

Istnieją tysiące witryn oferujących świetne tekstury i wzory za darmo. Poświęć czas na odkrywanie, a pokochasz to, co otrzymasz. Aby zaoszczędzić dużo czasu podczas projektowania, uwierz mi, najlepszym rozwiązaniem jest tworzenie kopii zapasowych zasobów w czasie pokoju. Jeśli czas przeznaczony na projektowanie zostanie wykorzystany na pobieranie i gromadzenie zasobów, obawiam się, że zabraknie Ci czasu.

Ręcznie wybrane linki do eksploracji tekstur

365 tekstur do pobrania (JPG, PSD, PAT, ABR) — WeGraphics

Tła | GraphicBurger

Biblioteka wzorców

wzory ava7 /// 1905 darmowych bezszwowych wzorów tła

Ręcznie wybrane linki do eksploracji wzorców

Darmowe generatory SVG, narzędzia kolorów i narzędzia do projektowania stron internetowych (fffuel.co)

Pattern Monster — Generator wzorów SVG

Subtelne wzory | Darmowe tekstury do Twojego następnego projektu internetowego (toptal.com)

Generator wzorców | Twórz bezproblemowe, wolne od tantiem wzory (doodad.dev)

Dziękuję za przeczytanie i życzę miłego dnia!

Bibliografia

• UXdesign.cc