Przewodniki projektowe są nieocenionym narzędziem do maksymalizacji wydajności zespołu projektowego i zapewnienia jednolitej tożsamości marki. Patrzymy na sześć istotnych elementów udanych przewodników projektowych.

Przewodnik projektowania to coś więcej niż dokument, który zawiera nową witrynę lub tożsamość marki. Dobry przewodnik projektowania jest dziełem sztuki i ma praktyczne zastosowanie w codziennych pracach projektowych. Pokazuje, jaki jest twój projekt i jaki ma być. Powinien przynieść elementy projektu, głosu, a nawet kodu razem w sposób, który jest łatwy w obsłudze, łatwy do zrozumienia.

Zaczyna się od tych sześciu elementów przewodnika projektowego, które muszą znaleźć się w dokumentacji. (Jeśli tak nie jest, zrewiduj swój przewodnik od razu!)

1. Przykłady tożsamości marki

Przewodnik po projektach powinien prezentować tożsamość marki w formacie wizualnym, który jest reprezentatywny dla wyglądu materiałów projektowych. To klasyczny przykład show, nie mów. (Chociaż w przewodniku jest kilka wskazówek na temat wizualnych przykładów.)

Najlepszymi przykładami są zastosowania w rzeczywistych przypadkach, które dokładnie ilustrują, jakie standardy projektowania mają być przedstawiane.

Użyj zrzutów ekranu ze strony głównej, strony głównej telefonu, aplikacji lub dowolnego innego miejsca, gdy projekt jest w najlepszym wydaniu.

Co jest w tym miłego Miłość do jazdy przewodnik po projektach jest taki, że każda strona w książeczce wygląda jak strona internetowa, tworząc spójność marki. Przewodnik przybliża nawet małe elementy projektu, takie jak odpowiedni styl ikon aplikacji na dokładnym wyświetlaczu.

Najlepszą rzeczą w używaniu prawdziwych przykładów w przewodniku projektowania jest to, że nie musisz tworzyć dodatkowej pracy, aby zaprezentować elementy wizualne; już je masz. Dodatkowo, członkowie zespołu będą wiedzieć, że pisemna wytyczna działa w rzeczywistej praktyce, ponieważ istnieje dowód wizualny.

jazda

2. Wytyczne projektowe

Wszystko, od próbek kolorów po palety typograficzne, po kształty i wykorzystanie elementów projektu powinno być wyraźnie nakreślone.

Dlaczego projekt wygląda i funkcjonuje w określony sposób? Jaka jest za tym filozofia?

Wyjaśnienie tych kwestii może pomóc użytkownikom w bardziej precyzyjnym i konsekwentnym stosowaniu stylu projektu na różnych nośnikach. Jeśli chodzi o projektowanie stron internetowych, dobrym pomysłem jest uwzględnienie elementów, które mogą się różnić od odpowiedników marki druku i ich związku. Na przykład wielu projektantów wybiera inną paletę typografii online, która naśladuje drukowane marki, aby zmaksymalizować wykorzystanie czcionek Google do Typekit w celu ułatwienia użycia.

Zwróć uwagę, które kroje pisma są podstawione, jeśli jest to część Twojej strategii projektowania.

Kiedy określa się wytyczne projektowe, które mają być konkretne, kiedy ma to znaczenie - znaczniki H1 mają zawsze 88 punktów, a miniatury zawsze mają 200 na 200 pikseli - ale nie przesyłaj niepotrzebnych szczegółów. Chcesz, aby członkowie zespołu przeglądali informacje na pierwszy rzut oka i używali ich, nie będąc przygnieceni próbując znaleźć coś w morzu specyfikacji.

netflix

3. Głos i osobowość

Pisanie wskazówek dotyczących stylu nie jest tak zabawne, jak inne elementy wizualne przewodnika projektowego, ale są one równie ważne.

Opisowy styl pisania kopii może również wpłynąć na efekty wizualne. Przyczynia się do rodzaju zdjęć, które wybierzesz, a nawet do elementów takich jak kolor i typ. Wszystkie te elementy łączą się, aby stworzyć ogólną osobowość marki.

To jak świat zewnętrzny cię rozpozna.

Co więcej, silny głos i osobowość stają się częścią tożsamości wizualnej. Dobra osobowość pokazuje się w elementach projektu, ponieważ użytkownicy mogą niemal zidentyfikować elementy projektu, nawet poza zawartością reszty marki. (Pomyśl o Coca-Coli Red lub kroju pisma Disneya.)

głos

4. SEO Słowa kluczowe

Optymalizacja pod kątem wyszukiwarek może być jedną z najczęściej komentowanych i najmniej zabawnych części projektowania stron internetowych. Pomyśl o słowach kluczowych wcześnie i często.

Dołącz je do sposobu, w jaki mówisz o marce, w opisowym języku na temat projektu i umieść listę najlepszych słów kluczowych w samym przewodniku projektowym.

Urban Outfitters ma dobrze zaprojektowaną (i zabawną) listę słów kluczowych w przewodniku po marce. Podczas gdy marka odzieżowa używa wielu różnych słów kluczowych, najważniejsze słowa są podkreślone kolorem, dzięki czemu można je zobaczyć od razu.

Lista słów kluczowych, takich jak ta, przywołuje słowa, które chcesz powiedzieć, za każdym razem, gdy je widzisz. Większość ludzi, którzy piszą kopię, powie ci, że kiedy zobaczysz lub pomyślisz o danym słowie w pewnym kontekście, utknie to w twojej głowie. Dokładnie to ma robić lista słów kluczowych SEO.

Elementy projektu powinny zawsze korelować z tymi słowami kluczowymi, aby treść była powiązana z całym projektem strony internetowej.

miejski

5. Style wzorów i elementów

Przy tak wielu różnych mediach online (nie wspominając już o firmach, które również projektują drukowane elementy), ważne jest posiadanie przewodników dla wszystkich możliwych zastosowań.

Dotyczy to nadal i animowanych wersji logo, palet kolorów, wzorów, a nawet elementów projektu, takich jak pola formularzy i nawigacja.

Twoja książka projektowa powinna zawierać sekcję poświęconą tym elementom. Jeśli chcesz, aby zespół naprawdę cię kochał, utwórz przewodnik po wzorcach i stylach elementów w lokalizacji online, aby użytkownicy mogli po prostu kopiować i wklejać elementy w celu szybkiego użycia.

ollo

6. Fragmenty kodu

Każdy przewodnik po projektowaniu witryny musi zawierać wiele często używanych fragmentów kodu. Od małych przycisków do małych animacji po efekty suwaków - te małe fragmenty kodu dodają godziny do codziennego przepływu pracy, eliminując konieczność ręcznego wprowadzania specyfikacji dla każdego nowego elementu.

To działa na wszystkie tematy, od postów na blogu - dodaj blok kodu do obrazów, które blogerzy mogą po prostu skopiować i wkleić w odpowiednim rozmiarze i przyciąć - do bardziej rozbudowanych efektów interfejsu użytkownika.

Firefox zawiera informacje o elementach konstrukcyjnych w przewodniku projektowym dotyczącym ostatnio zmienionego wykorzystania marki i logo. Nawet jeśli nie zapewnisz pełnej biblioteki fragmentów kodu, pamiętaj o dołączeniu podstawowych informacji, takich jak gdzie należy używać H1 do H4 na stronach w projekcie strony oraz jak stylizować przyciski i obrazy.

firefox

Wniosek

Najlepszą częścią przewodnika projektowego jest to, że nie musi to być dokument statyczny. Może rosnąć i zmieniać się, gdy twoja marka i tożsamość wizualna robią to samo.

Większość projektantów, w szczególności projektanci stron internetowych, decyduje się na wersje online przewodnika projektowego, dzięki czemu wprowadzanie zmian i chwytanie kodu i kolorowych fragmentów jest szybkie i łatwe. Zastanów się nad dodaniem strony ze stylem do swojej witryny i pamiętaj, aby często się do niej odnosić (i aktualizować).