10 Ghid de design și stil digital Ilustrații de la companii populare precum Apple, Google și Starbucks

Dacă v-ați întrebat vreodată cum designerii de la Apple au definit fiecare aspect minor în iOS, atunci când au ajuns să-l construiască, atunci s-ar putea să vă aflați în locul potrivit.

Pe măsură ce inovația tehnologică evoluează în mod constant, designul web continuă să devină mai oficializat. Designerii și dezvoltatorii web la nivel mondial trebuie să creeze un cod care să se poată traduce fără probleme de la laptop la produsele celulare, să facă ușor de înțeles navigarea pe site și să inoveze alte abilități ale site-urilor de internet - aceștia sunt toți factori pe care corporațiile îi standardizează în ghidurile de design digital.

Ghidurile de design electronic s-au dovedit a fi foarte practice pentru imaginea generală a mărcii și pentru memorabilitatea pe net, pentru că au stabilit anticipațiile și reperele pentru ecranul de afișare web al companiei. Ele sunt deosebit de vitale pentru site-urile web și produsele care trebuie să ofere utilizatorilor încercări de prim rang.

În acest articol, vom explora în detaliu ghidurile de tip digital și vă vom arăta câteva ilustrații impresionante de la companii bine cunoscute care le-au completat corect.

Acest stil de informații despre modă trebuie să fie îngrijit ca un manual care stabilește criteriile de stil și design pentru existența digitală a unei companii. Intenția sa cheie este de a produce un tip de stil universal pentru numele mărcii și de a asigura o anumită regularitate pe toate canalele și mediile, locul în care vă construiți marca, paleta de culori, tipografie, sugestii de imagini și așa mai departe.

Spre deosebire de ghidurile de modă ale producătorilor care încapsulează sigla unei companii, afirmarea misiunii, personajele cumpărătorului și tonul vocii, designul web și ghidurile de stil sunt centrate pe prezentarea digitală, cum ar fi UX/UI.

Dar, în calitate de designer UX, am fost în general curios, ce puteți găsi în ghidurile de modă digitală ale furnizorilor influenți precum Apple, Google și Starbucks?

Simțiți sau nu, o mulțime de furnizori fac ca aceste detalii să poată fi obținute în mod public - pur și simplu nu le fac destul de ușor de găsit. Așa că, de fiecare dată când dau peste un singur, îl pun la carte. Iată câteva dintre cele mai bune pe care le-am localizat atât de semnificativ.

Exemple de ghiduri de stil digitale strălucitoare

1. Apple iOS

Ghidul de design și stil de la Apple este deosebit de interesant pentru că privește modul de proiectare a unei metode de funcționare completă. Monterey, una dintre cele mai actualizate versiuni de OS X de la Apple, are o interfață de consum mai simplificată decât predecesorul său, Yosemite. Apple demonstrează această distincție subtilă, dar totuși palpabilă, cu comparații grafice foarte bune și apoi continuă să discute despre rațiunea care alimentează fiecare aspect unic al aspectului sistemului care rulează. Vă oferă o fereastră în mintea designerilor.

2. Google: Aspect materiale

Google a inițiat o modă de design și stil identificată ca Structură de produs, care există ca un hibrid între Designul și stilul Skeuomorphic (gradiente, texturi, elemente blânde) și Stilul plat (simplu, colorat, geometric). În realizarea acestui lucru, au combinat aspectele pozitive. aspecte legate de fiecare design și design stil, deși evitând negativele.

Deoarece Google lucrează la stilul de produs de câteva decenii, probabil că ați interacționat cu acesta pe o bază zilnică - aplicația Google Calendar, orice persoană? Acest manual de design și stil detaliază exact ce este Materials Design și cum îl utilizează Google. Și trebuie să spun că este, în mod considerabil, unul dintre cele mai bune ghiduri pe care le-am întâlnit oricând.

3. Starbucks

Acesta este doar unul dintre cele mai minimaliste ghiduri de design și stil pe care le-am văzut - și, însă, conține o mulțime de fapte practice. El pune un accent semnificativ pe cod și vă puteți explica că a fost construit de constructori, pentru constructori. Îi lipsesc elementele legate de numele mărcii, așa că merge pe linia dintre un manual de proiectare a site-ului web și o bibliotecă de coduri.

4. atlasian

Suita de marfă pentru care modelează Atlassian este gigantică - așa că, prin mijloace naturale, au un ghid de modă gigantic. De la lucruri de bază (cum ar fi paleta de culori și tipografia) până la componente (cum ar fi tabele și sfaturi cu instrumente) până la o bibliotecă de modele completă, acest ghid conține aproape toate lucrurile pe care ați conta de la un produs de această dimensiune.

Posibil cel mai bun dintre toate, rațiunea care conduce manualul complet este rezumată în 3 condiții înșelător de simple pe pagina web a reședinței.

5. Mozilla

Acest tutorial de design electronic se preocupă în principal de branding și comunicare. Dar cu Mozilla primind o tactică de „confidențialitate și web deschisă” în ultima vreme, este uimitor să vedem cum replic acest lucru în designul lor.

Pagina principală a Mozilla face, de asemenea, o carieră fantastică, subliniind modul în care UX/UI ar trebui să fie accesibil bărbaților și femeilor cu deficiențe de vedere sau dizabilități - un lucru incluziv și important, deoarece know-how-ul va deveni mult mai revoluționar.

6. Tampon

Ghidul tipului tamponului este mic și concis, probabil de la grilă prin modal, toate într-o singură poziție. Este o reamintire plăcută că tutorialul tău de modă electronică nu trebuie să fie strigător dacă comunică toate punctele ideale. Companiile care caută un loc de unde să înceapă pot lua în considerare notele din factorii de proiectare simpliști ai lui Buffer și pot construi de acolo.

7. Yelp

Dacă sunteți în căutarea unui exemplu de încredere al unui ghid de design și stil de site de internet, Yelp a obținut asta. Nu numai că este complet, dar explică procedura de proiectare atomică ca o carte de bucate și împarte componentele site-ului web ca substanțe care contribuie la un fel de mâncare.

Acest detaliu are totul: tipografie, aspect, soiuri, containere, navigare și fragmente de cod pentru fiecare piesă. Ei fac o muncă grozavă de a explica ce este aproape fiecare element, unde ar trebui să fie cu adevărat utilizat și cum ar trebui să fie executat.

8. GOV.Insulele britanice

Site-ul web de soluții guvernamentale din Anglia a fost în mod obișnuit cunoscut ca un exemplu principal de UX de calitate superioară. De ce? Din cauza faptului că are un stil și un design necomplicat și rapid de utilizat, care găzduiesc prea multe cantități de informații și fapte.

Dacă sunteți interesat de ceea ce poate alcătui un aspect cu siguranță curat și puternic (indiciu: începe, în general, cu utilizarea culorilor solide, tipografie și spațiere), atunci manualul de tip GOV.UK merită să folosiți o privire închisă. La fel ca site-ul de internet, este extrem de simplu, dar foarte iluminator.

9. DeviantArt

Noua informație în stilul DeviantArt este exclusivă, pur și simplu pentru că este cu adevărat mai mult decât o simplă informație - este o cunoaștere. Spune o poveste și folosește elementele vizuale îndrăznețe, cu lățime întreagă, pentru a cufunda persoana în expertiza emoțională a mărcii DeviantArt. Acestea fiind spuse, este strict un ghid de model de branding, așa că numai produse precum culoarea și tipografia sunt acoperite.

10. Disqus

Culoare, pictograme, tipografie și logo... Disqus le păstrează mai scurt și dulce cu aceste informații. Dar totul poate fi oferit într-un mod destul de plăcut, organizat. Acest ghid ar putea fi folosit ca un exemplu fantastic pentru „locul de a începe” atunci când produceți un ghid de stil al dvs., deoarece atinge toate elementele fundamentale.

Experiență influențată să vă creați propriul manual?

Acum poate fi comutatorul tău. Utilizând un tutorial de tip electronic în întreprinderea dvs., puteți comunica limbajul de design al mărcii dvs. designerilor din interior, organizațiilor, partenerilor de marketing și chiar clienților.

Începeți cu factorii de bază standard (nuanță, tipografie, logo, imagini), încorporați câteva recomandări de utilizare („fa și nu ar trebui”) și chiar încorporează unele părți de net dacă va fi nevoie (module, șabloane, fragmente de cod. Folosiți exemple de la alți furnizori pentru a învăța de la cei mai buni. Forța de muncă va crea modele obișnuite în cel mai scurt timp.