Przewodnik projektanta do pracy z przewodnikami po stylach i kafelkami stylów

Tworząc tożsamość marki nie jest łatwym zadaniem. Wymaga to ciężkiego wysiłku, ale jest to również jedno z najbardziej satysfakcjonujących zadań twórczych. Projekty internetowe często mixowanie marki z projektem interfejsu. Może to być mylące, ponieważ w obu obszarach jest tak wiele do zrobienia. Przewodniki stylów i płytki w stylu są świetnymi zasobami dla projektantów stron internetowych i choć brzmią podobnie, osiągają dwa różne zadania.

W tym poście chciałabym zagłębić się w oba i opisać korzyści, jakie możesz uzyskać dzięki tym kreatywnym zasobom. Nie wszyscy będą potrzebować (lub podobnego) tworzyć przewodniki stylu lub kafelki stylów. Ale każdy projektant powinien przynajmniej zrozumieć, czym one są i jak działają.

Przewodniki po stylu dla sieci

Czytałem różne opinie na temat przewodników po stylach. Niektórzy twierdzą, że są to cyfrowe makiety, podczas gdy inni twierdzą, że najbardziej przydatne są przewodniki stylów oparte na kodzie.

Tak czy inaczej, cel przewodnika stylu jest taki sam dla sieci, jak dla każdego innego projektu. To definiuje spójne wzorce, moduły interfejsu użytkownika i preferencje twórcze używane w procesie projektowania. Możesz uzyskać bardzo szczegółowe i precyzyjne pomiary pikselowe dla pewnych elementów lub możesz pozostać luźny i oferować wskazówki z wizualnymi przykładami.

Nie ma jednego właściwego sposobu na przewodnik po stylu. Jedynym złym sposobem jest stworzenie zasobu, który po prostu nie może być zrozumiany przez innych.

Celem jest stworzenie atutu, który będzie wytrzymać próbę czasu. Powinno być otwarte na zmiany jeśli zostaną utworzone nowe zasoby. Powinien być również dostępny dla każdego, kto dołącza do zespołu, aby łatwo nurkować w przewodniku.

Powinien być przewodnik stylu tak szczegółowe, jak to potrzebne do projektu. Zazwyczaj zawiera aktywa wielokrotnego użytku, takie jak typografia, przyciski, próbki kolorów, tekstury i wspólne elementy strony.

Niedawno omówiliśmy narzędzia do prowadzenia stylu życia które pomogą ci zbudować od podstaw przewodniki po stylu życia. Te żywe przewodniki są bardziej dla programistów frontendowych, ale mogą być równie przydatne dla projektantów. Możesz przeczytać więcej na ten temat w tym artykule w Smashing Magazine.

Moim absolutnie ulubionym zasobem jest StyleGuides.io. Obejmuje podstawy przewodników po stylach dla sieci, włącznie z żywe przykłady i studium przypadku.

Biblioteka wzorców MailChimp jest jednym z najlepszych przykładów, które można znaleźć w StyleGuides.io. To internetowy przewodnik po stylu na żywo definiuje siatkę, typografię i elementy strony MailChimp.

Podczas projektowania przewodnika po stylach dla firmy internetowej często umieszcza się wszystko w Internecie, ale można również tworzyć wewnętrzne prowadnice, i przechowuj je w lokalnym intranecie lub hostuj je prywatnie za stroną logowania użytkownika. Sposób, w jaki uzyskasz dostęp do przewodnika po stylu, naprawdę nie ma znaczenia. Wszystkie służą temu samemu celowi, jakim jest przekazywanie określonych kolorów, wzorów i elementów wizualnych pasują do tematu projektu internetowego.

Aby dowiedzieć się więcej na ten temat, sprawdź te inne posty w przewodnikach po stylach:

Przewodniki stylów front-end (24ways.org)
Utwórz przewodnik po stylu strony (creativebloq.com)
Jak zrobić idealny przewodnik po stylu projektowania stron internetowych (dtelepathy.com)

Rozgałęzianie w płytki stylowe

Płytki w stylu są zupełnie inną bestią. Te płytki są zasoby kreatywne wykorzystywane we wczesnej fazie projektowania przy próbie przybicia konkretnej estetyki.

Witryna Style Tiles została stworzona przez Samanthę Warren i ma wszystko, co trzeba wiedzieć. Jest brak konkretnego szablonu do projektowania płytki stylu. Ale przykłady Samanty używają nagłówki i typy akapitów, linki, wzory, i możliwe wybory kolorów wraz z logo marki.

Podczas pracy z kafelkami stylów twoim celem jest ostatecznie przedstawić 2-3 różne płytki w stylu do klienta lub dyrektora kreatywnego. Te płytki są bardziej szczegółowy niż tablica nastroju, jeszcze znacznie mniej szczegółowe niż pełna makieta.

Płytki powinny być wystarczająco szczegółowe, aby dać poczucie tożsamość i nastrój strony. Samanta zachęca używając przymiotników opisać szczegółowo każdą płytkę.

Klienci mogą przejrzyj różne płytki, i wybierz swoje ulubione kawałki. To oszczędza czas podczas projektowania, ponieważ klient widział już zasoby, które lubią, więc jest mniejsza szansa na poważne zmiany.

Oto świetny cytat ze strony Style Tiles:

Porównywanie kafelków stylów do zestawu narzędzi projektanta wnętrz jest całkiem trafną analogią. Nie chcesz wlewać wysiłku w perfekcyjną makietę tylko po to, aby klient zdał sobie sprawę, że nienawidzi większości kolorów i czcionek.

Zamiast tego użyj kafelków stylów, aby znaleźć wspólny temat lub język wizualny do użycia w całej witrynie. Może to obejmować branding / tożsamość ale także może obejmować Funkcje interfejsu użytkownika, takie jak menu rozwijane lub przyciski CTA.

Powinieneś ich używać jako aktywa do dostarczenia na początku procesu. Po wykonaniu pełnej makiety nie ma już potrzeby odwoływania się do kafelka stylu. Niemniej jednak na początku płytki stylów mogą być kluczowe dla procesu twórczego oszczędność czasu projektanta i wybór klienta na wiele opcji.

Jeśli chcesz zagłębić się bardziej w stylowe kafelki sprawdź te powiązane posty.

Płytki stylowe i jak one działają
Płytki stylowe: alternatywa dla pełnych projektów
Tworzenie płytek stylów: łatwe podejście do kierunku projektowania

Poradniki stylu a płytki stylu

Różnica między przewodnikami po stylach i kafelkami stylu jest niejasna, ale określona. ZA przewodnik po stylu to znacznie więcej szczegółowy i powinien być używany jako ciągły przewodnik referencyjny dla zespołu kreatywnego. ZA stylowa płytka może być używany jako moodboard do wizualizuj pomysły wizualnie dla siebie lub klienta. Często są do tego przyzwyczajeni badaj pomysły, a po zakończeniu projektu nie służą one zbytnio celom.

Płytki stylów są często bardziej szorstkie na krawędziach i są używane wyłącznie we wczesnym procesie twórczym. Należy użyć przewodnika stylu przez cały proces projektowania i nawet później na przyszłość dla innych projektantów, którzy mogą pracować na stronie.

Obie mają swoje zalety i wady. Są to płytki stylów szybka i zabawna, ale efemeryczny w naturze. Przewodniki stylu są dokładny i zachowuj się jak dokumentacja wizualna, ale oni też wymagają dużo pracy.

Którego należy użyć? To ostatecznie zależy od projektu.

Mniejsze projekty tak jak w przypadku małych firm strony internetowe działają lepiej z kafelkami stylów. Budowanie całego przewodnika po stylu dla małej firmy wymagałoby zbyt wiele pracy i godzin rozliczeniowych. To prawdopodobnie nie jest warte kosztów dla większości klientów.

Jednak duży projekt Podobnie jak przeprojektowanie NY Times skorzystałoby zarówno z płytek stylowych, jak i przewodników stylistycznych.

Znalezienie języka i nastroju nowy projekt jest zawsze cennym procesem. To właśnie sprawia, że płytki stylów idealny do niemal każdego scenariusza.

Możesz także przetrwać bez tworzenia żadnego z tych aktywów. Niektórzy projektanci idą prosto z makiet do szczegółowe makiety. A niektórzy klienci nie chcą nawet przewodnika po stylu, ponieważ nie zostaną one wykorzystane.

Pracuj indywidualnie dla każdego projektu i decyduj, co jest najlepsze dla każdego.

Przykłady na żywo

Zawińmy to przez przykrycie przykłady zarówno przewodników stylów, jak i płytek stylów. Znalazłem te projekty podczas przeglądania Dribbble i myślę, że są przykładem jakości, którą chcesz mieć w swoich przewodnikach po stylu lub kafelkach stylu.

Przewodniki stylu

Ten niesamowity przewodnik w stylu Airbnb został stworzony przez Dereka Bradleya. To bardzo proste, ale wyraźnie ilustruje główne wzory, kolory i elementy strony znaleźć w projekcie.

Oto znacznie większy cyfrowy przewodnik po stylach stworzony przez projektanta Naoshada Alama. Ten przykład to o wiele bardziej zorganizowany z sekcje kolorów, typografii, formularzy, elementów interfejsu i innych funkcji interfejsu użytkownika.

Bardziej szczegółowe przewodniki po stylach umieściłyby wszystkie te elementy projektu w sieci zawierają fragmenty kodu dla każdego.

Projektant Cupi Wong przygotował ten przewodnik dla AfterShip. Typografia, przyciski, wybór kolorów i wspólne elementy strony są starannie wykonane i zorganizowane razem w sekcje.

Może to być również przeniesione do sieci i zbudowane o wiele bardziej jako dokumentacja online.

Projektant interfejsu użytkownika Greg Dlubacz udostępnił swój własny przewodnik po stylach interfejsu użytkownika dla projektu internetowego. To jest naprawdę ogromne. Podgląd pełnoekranowy obejmuje 21 000 pikseli wysokości!

Absolutnie jeden z najlepszych przewodników w stylu cyfrowym, jakie kiedykolwiek widziałem. Można to również przenieść na stronę dokumentacji online dla członków zespołu, do której można się odnieść.

Płytki stylu

Projektant UI / UX Abdus Salam stworzył tę płytkę stylu dla witryny sklepu ze zdrową żywnością. To bardzo proste płaskie elementy konstrukcyjne, kilka drobnych funkcji interfejsu użytkownika, i a paleta kolorów.

Projektant Adrian Cantelmi naprawdę wyszczególnił swoją płytkę w stylu sprzedaży. Ma kolory i typografię, ale obejmuje również ilustracje wektorowe.

Te wektory pomagają zdefiniuj markę, nastrój i ogólną kolorystykę strony internetowej.

Projektanci World Cup Advisors przeprojektowali swój własny styl z bardzo podstawowymi funkcjami. Kilka ikon, kilka kolorów i kilka przycisków. Prostota to nazwa gry.

Jeśli możesz poczuć, jak strona może wyglądać na pierwszy rzut oka wtedy robisz to dobrze.

Oto zabawny przykład odrzuconej płytki stylu używanej w projekcie podróży. Projektant Brennan Gleason dostarcza tylko niewielką próbkę płytki, ale nadal możesz poczuj atmosferę strony internetowej.

Ostatnie słowa

Jeśli przeszukasz sieć, znajdziesz więcej przykładów, porad i zasobów przewodniki po stylach budynków i kafelki stylów. Ale mam nadzieję, że ten artykuł może być podstawą dla obu i sprawi, że będziesz biegły w zrozumieniu i tworzeniu tych aktywów projektowych.