10 Digital Design and Style Guide Ilustracje popularnych firm, takich jak Apple, Google i Starbucks

Jeśli kiedykolwiek zastanawiałeś się, w jaki sposób projektanci w Apple zdefiniowali każdy drobny aspekt w iOS, kiedy go konstruowali, to możesz być we właściwym miejscu.

Ponieważ innowacje technologiczne stale ewoluują, projektowanie stron internetowych staje się coraz bardziej sformalizowane. Projektanci i programiści z całego świata muszą tworzyć kod, który można bezproblemowo przetłumaczyć z produktów laptopów na komórki, ułatwić zrozumienie nawigacji w witrynie i wprowadzić innowacje w innych funkcjach witryn internetowych — to wszystko czynniki, które korporacje standaryzują w przewodnikach projektowania cyfrowego.

Elektroniczne przewodniki projektowe okazały się bardzo praktyczne dla ogólnego obrazu marki i zapamiętywania w sieci, ponieważ ustanowiły oczekiwania i punkty odniesienia dla firmowych ekranów internetowych. Są one szczególnie ważne w przypadku witryn i produktów, które muszą dostarczać użytkownikom najwyższej klasy próby.

W tym artykule zagłębimy się w szczegółowe informacje o typach cyfrowych i pokażemy kilka imponujących ilustracji od znanych firm, które poprawnie je wypełniły.

Ten styl informacji o modzie ma być traktowany jak podręcznik, który wyznacza kryteria stylu i projektowania dla cyfrowego istnienia firmy. Jego głównym celem jest stworzenie uniwersalnego stylu dla nazwy marki i zapewnienie regularności we wszystkich kanałach i mediach, miejscu budowania marki, palecie kolorów, typografii, sugestiach dotyczących obrazów i tak dalej.

W przeciwieństwie do przewodników po modzie producenta, które zawierają logo firmy, wypełnianie misji, persony nabywców i ton głosu, projektowanie stron internetowych i przewodniki po stylu koncentrują się na prezentacji cyfrowej, takiej jak UX/UI.

Ale jako projektant UX ogólnie byłem ciekaw, co można znaleźć w cyfrowych przewodnikach po modzie od wpływowych dostawców, takich jak Apple, Google i Starbucks?

Poczuj to lub nie, wielu dostawców udostępnia publicznie te szczegóły - po prostu tak naprawdę nie sprawiają, że jest to łatwe do znalezienia. Tak więc za każdym razem, gdy natrafię na singiel, dodaję go do zakładek. Oto niektóre z najlepszych, które tak znacząco zlokalizowałem.

Przykłady świetnych cyfrowych przewodników po stylach

1. Apple iOS

Przewodnik po projektowaniu i stylu firmy Apple jest szczególnie ekscytujący, ponieważ dotyczy projektowania w pełni działającej metody. Monterey, jedna z najbardziej aktualnych wersji systemu OS X firmy Apple, ma bardziej uproszczony interfejs użytkownika niż jego poprzednik, Yosemite. Apple demonstruje to subtelne, ale namacalne rozróżnienie za pomocą naprawdę dobrych porównań graficznych, a następnie przechodzi do dyskusji na temat uzasadnienia każdego pojedynczego aspektu układu działającego systemu. Daje ci wgląd w umysły projektantów.

2. Google: układ materiałów

Firma Google była pionierem mody w zakresie projektowania i stylu określanej jako Product Structure, która stanowi hybrydę pomiędzy Skeuomorficznym Designem i stylem (gradienty, tekstury, łagodne elementy) a Flat Stylem (prostym, kolorowym, geometrycznym). aspekty związane z każdym projektem i stylem, unikając jednak negatywów.

Ponieważ Google pracuje nad stylem produktu od kilkudziesięciu lat, prawdopodobnie masz już z nim kontakt na co dzień — aplikacja Kalendarza Google, czy ktokolwiek? Ten podręcznik projektowania i stylu dokładnie określa, czym jest Materials Design i jak Google go wykorzystuje. I muszę powiedzieć, że jest to jeden z najlepszych przewodników, z jakimi kiedykolwiek się zetknąłem.

3. Starbucks

To tylko jeden z najbardziej minimalistycznych przewodników po designie i stylu, jakie widziałem — ale zawiera mnóstwo praktycznych faktów. Kładzie duży nacisk na kod i można wyjaśnić, że został stworzony przez budowniczych, dla budowniczych. Brakuje w nim elementów związanych z nazwą marki, więc porusza się po linii między podręcznikiem projektowania strony internetowej a biblioteką kodów.

4. Atlassian

Zestaw gadżetów, dla których modeluje Atlassian, jest gigantyczny — więc w naturalny sposób mają gigantyczny przewodnik po modzie. Od podstawowych rzeczy (takich jak paleta kolorów i typografia) przez komponenty (takie jak tabele i podpowiedzi) po pełną bibliotekę wzorów, ten przewodnik zawiera prawie wszystkie rzeczy, na które można liczyć od produktu tego rozmiaru.

Prawdopodobnie najlepsze ze wszystkich, uzasadnienie prowadzenia kompletnej instrukcji typu jest podsumowane w 3 zwodniczo prostych warunkach na stronie internetowej rezydencji.

5. Mozilla

Ten samouczek dotyczący projektowania elektronicznego dotyczy głównie brandingu i komunikacji. Ale ponieważ Mozilla ostatnio zaczęła stosować taktykę „prywatności i otwartej sieci WWW”, niesamowite jest to, jak powielają to w swoim projekcie.

Strona główna Mozilli robi również fantastyczną karierę, przedstawiając sposób, w jaki jej UX/UI ma być dostępny dla mężczyzn i kobiet z wadami wzroku lub niepełnosprawnością — jedna rzecz włączająca i ważna, ponieważ know-how stanie się o wiele bardziej rewolucyjne.

6. Bufor

Wytyczne dotyczące typu bufora są niewielkie i zwięzłe, prawdopodobnie z siatki za pomocą modów w jednej pozycji. To przyjemne przypomnienie, że Twój elektroniczny samouczek o modzie nie musi być krzykliwy, jeśli zawiera wszystkie idealne punkty. Firmy szukające miejsca, w którym można by zacząć, mogą wziąć pod uwagę notatki z uproszczonych wytycznych projektowych Buffera i zbudować je na tej podstawie.

7. Yelp

Jeśli szukasz wiarygodnego przykładu projektu strony internetowej i przewodnika po stylu, Yelp otrzymał je w zestawie. Nie tylko jest kompletny, ale wyjaśnia procedurę Atomic Design jako książkę kucharską i dzieli elementy strony internetowej jako substancje składające się na danie.

Ten szczegół ma wszystko: typografię, układ, odmiany, kontenery, nawigację i fragmenty kodu dla każdego elementu. Wykonują świetną pracę wyjaśniając, czym jest prawie każdy element, gdzie naprawdę powinien być wykorzystany i jak powinien być wykonywany.

8. GOV. Wyspy Brytyjskie

Strona internetowa rozwiązań rządowych Anglii jest powszechnie ogłaszana jako główny przykład najwyższej jakości UX. Czemu? Z tego powodu, że charakteryzuje się nieskomplikowanym i szybkim w użyciu stylem oraz projektem, który zawiera zbyt wiele informacji i faktów.

Jeśli interesuje Cię, co może składać się na czysty i mocny układ (wskazówka: zwykle zaczyna się od wykorzystania jednolitych kolorów, typografii i odstępów), to warto rzucić okiem na podręcznik GOV.UK. Podobnie jak strona internetowa, jest niezwykle prosta, ale bardzo pouczająca.

9. DeviantArt

Informacje w nowym stylu DeviantArt są ekskluzywne, ponieważ tak naprawdę są czymś więcej niż tylko informacją — to wiedza. Opowiada historię i wykorzystuje odważne wizualizacje na całej szerokości, aby zanurzyć osobę w emocjonalnej wiedzy marki DeviantArt. Mówiąc to, jest to wyłącznie przewodnik po modelach brandingowych, więc powlekane są tylko produkty takie jak kolor i typografia.

10. Disqus

Kolor, ikony, typografia i logo… Dzięki tym informacjom firma Disqus zachowuje to krócej i przyjemniej. Ale to wszystko może być oferowane w całkiem przyjemny, zorganizowany sposób. Ten przewodnik może być wykorzystany jako fantastyczny przykład „miejsca, od którego można zacząć” podczas tworzenia wytycznych dotyczących stylu, ponieważ zawiera wszystkie podstawy.

Doświadczenie wpłynęło na stworzenie własnego podręcznika?

Teraz może być twoim przełącznikiem. Korzystając z samouczka elektronicznego typu w swoim przedsiębiorstwie, możesz przekazać język projektowania swojej marki projektantom, organizacjom, towarzyszom marketingowym, a nawet klientom.

Zacznij od standardowych czynników fundamentalnych (odcień, typografia, logo, obrazy), uwzględnij zalecenia dotyczące użytkowania („rób, a nie powinieneś”), a nawet jeśli zajdzie taka potrzeba, uwzględnij niektóre części sieciowe (moduły, szablony, fragmenty kodu). Korzystaj z przykładów od innych dostawców, aby uczyć się od najlepszych. Twoi pracownicy będą w mgnieniu oka tworzyć regularne wzorce.