Share
Când începeți procesul de creare și de aplicare a propriilor Ghiduri de stil, să știți că nu sunteți pe cont propriu. Stil ghiduri au fost în jur pentru un timp acum, astfel încât există un munte de informații utile disponibile. Puteți afla o cantitate extraordinară de la examinarea a ceea ce este deja acolo.
Există, de asemenea, câteva instrumente și resurse excelente pe care le puteți pune în slujba proiectelor dvs., dintre care majoritatea sunt gratuite. În acest articol completăm toate materialele de stil pe care le aveți la dispoziție. Vom adăuga la ea, de asemenea, dacă noi resurse ne sunt aduse la cunoștință, vă puteți aștepta ca acest lucru să depășească 50!
Notă: Așa cum ați citit în introducerea noastră la seria ghidului de stil din această săptămână, uneori termenul "Ghid de stil" este folosit interschimbabil cu alți termeni similari. În conformitate cu aceasta, o parte din resursele enumerate mai jos ar putea fi, în mod evident, sub diferite clasificări.
Aruncați o privire la aceste articole excelente și tutoriale despre lucrul cu Ghidurile de stil:
Ghid de stil Wikipedia
Un bun prilej pentru definirea clasică a ghidurilor de stil.
Menținerea coerenței cu un ghid de stil de site
Tuts + Aaron Lumsden ne conduce prin crearea unui Ghid de stil.
Crearea unui brand Rockstar, Logo & Styleguide în Illustrator
Un turneu fascinant în spatele scenei de creare a mărcii "Rockable Press" și a Ghidului de stil.
Modul în care construim Webul se schimbă
O privire asupra unora dintre forțele motrice care au dus la apariția Ghidurilor de stil, de la Natasha Postolovski la blogul "Inside Envato".
Un ghid stil de întreținere
O discuție de la Ian Feather cu privire la modul în care să păstrați în mod eficient ghizii de stil actualizați.
Ghidajele stilului din față și bibliotecile de modele
O colecție considerabilă de exemple de ghiduri de stil și de biblioteci de modele de la Anna Debenham
Ghid de stil de identitate a mărcilor din întreaga lume
Lista mare de ghiduri de branding și identitate ale companiilor și instituțiilor majore.
Crearea de ghiduri de stil
De Susan Robertson pe A List Apart.
Ghiduri de stil frontal
De Anna Debenham pe 24 de moduri.
Ghiduri de stil frontal: Un ghid de buzunar
O altă resursă a lui Anna Debenham. Parte din colecția originală Cinci pași simplă pentru ghizii de buzunar.
Consultați câteva ghiduri de stil de la unele dintre cele mai mari și cele mai cunoscute branduri de pe web, plus câteva intrări extraordinare de la persoane fizice:
Manualul privind standardele grafice pentru Autoritatea de Tranzit din New York
Primul trebuie să vină la prima ediție iconică a NYCTA Graphics Standards Manual proiectată de întârziere Massimo Vignelli. Dacă urmați un link în această rubrică, faceți-l pe acesta.
Tuts + Ghid de stil
Voce & ton, branding, formatare și multe altele.
Active și linii directoare pentru Twitter
Ghidul pentru utilizarea logo-ului, paleta de culori, tipografia.
Ghidul mărcii corporațiilor Adobe
Un ghid complet de șaizeci de pagini cu privire la tot ce vă puteți imagina să faceți cu Adobe, inclusiv logo-uri, fotografii, mărci comerciale, staționare și mărfuri.
Ghidul stilului BBC GEL
BBC a urmărit să creeze complet totul în legătură cu prezența lor pe web, duplicându-și ghidul de stil cu "Global Experience Language" (GEL).
Ghidul stilului Mozilla
Ghidul stilului Mozilla este extrem de amănunțit. Ei izolează identitatea și branding-ul pentru fiecare aspect important al ofertei lor; Mozilla, familia Firefox, browserul Firefox, sistemul de operare Firefox, Marketplace, Webmaker și Thunderbird. Apoi continuă să acopere stiluri pentru site-urile, prezentările, videoclipurile, tipografia și conținutul textului. În cele din urmă, ele oferă un Ghid de stil complet pentru sistemul de operare Firefox. Acesta este un exemplu de ghid stil la cele mai bune.
Ghid de stil Lonely Planet
Ghidul stilului Lonely Planet oferă o acoperire completă a elementelor de design, a componentelor UI, a componentelor JS și a CSS, fiecare categorie fiind defalcată în mai multe subcategorii care enumeră componentele individuale din ele.
Skype Style Guide
Ghidul de stil Skype face o treabă excelentă de a transmite identitatea companiei prin branding și stilul general de design. Acesta acoperă logo-ul, amprenta, culorile, ilustrația, fotografia și o serie de alte subiecte.
Ghid de stil pentru vânzări
Un ghid de stil foarte vizibil care stabilește linii directoare, culoare, tipografie și icoane cu componente și exemple.
facebookbrand.com
Branding active și ghiduri de stil de la cea mai mare rețea socială din lume.
Ghid de stil pentru vânzări
Câteva imagini frumoase de la gigantul "Customer Relationship Management".
findguidelin.es
Cea mai rapidă modalitate de a găsi active de marcă!
Toate ghidurile de stil
Acest lucru începe cu adevărat toate ghidurile stilurilor, curate într-un Tumblog elegant.
Ghiduri pentru dezvoltatori care creează aplicații pentru Max OSX și iOS.
OSX Linii directoare pentru interfața omului
iOS Ghidul Interfeței Umane
Linii directoare pentru dezvoltatorii care lucrează cu Google Glass, plus o extensie extensibilă în două părți a stilului vizual al Google.
Ghid de stil Google Glass
Instrucțiuni privind materialele vizuale Google - Partea 1
Instrucțiuni privind materialele vizuale Google - Partea 2
Două site-uri care demonstrează cât de utile ghiduri de stil pot fi chiar pentru site-urile personale.
PaulRobertLloyd.com
Oli.jp
Ghiduri stil GitHub
Ghidul GitHub pentru formatarea proiectelor CSS, JavaScript și Ruby pentru GitHub.
Google Open Source Proiecte Style Ghiduri
Convenții pentru proiectele care vor fi găzduite la Google Code, care acoperă zece limbi diferite.
Puneți aceste instrumente să lucreze pentru a genera și menține propriile dvs. ghiduri de stil:
Stil de ghidare Placă de bord
Ghid de stil Boilerplate este în esență un pachet de pornire pentru crearea ghidurilor de stil de bază - se descrie ca generând "bootstrapsuri mici".
Stylify.me
Acest lucru este foarte distractiv: introduceți urlul unui site pe care doriți să îl analizați, apoi urmăriți-i cum se generează un ghid de stil. După finalizare, puteți să descărcați ghidul ca PDF.
Recunoașteți aceste culori?Fiecare dintre următoarele trei instrumente generează ghiduri de stil "vii" care sunt ușor de actualizat pentru a rămâne în concordanță cu dezvoltarea CSS-ului. Ele lucrează prin analizarea comentariilor CSS formatate în mod special într-un document Ghid de stil standular.
StyleDocco
StyleDocco este un modul Node.js care analizează comentariile formatate Markdown într-un Ghid de stil pre-tematic.
Kalei
Kalei funcționează, de asemenea, prin parsarea comentariilor formate Markdown din CSS, dar rulează ca browser bazat pe JavaScript și emite un Ghid stil asemănător cu Twitter Bootstrap's.
KSS (foi de stil Knyle)
KSS cere Ruby și utilizează propria sintaxă de comentare. Ghidul stilului GitHub este generat cu KSS.
Să începem să punem cunoștințele noastre în practică.
StyleTil.es
Acasă a conceptului original pentru plăci de stil de Samantha Warren.
Style Tiles: O alternativă la comenzile complete de proiectare
Chris Brown de la Tuts + ne plimbă prin avantajele utilizării plăcilor de stil.
Stilul de schiuri pentru schiță
Un șablon gratuit, open source Sketch pentru crearea de plăci de stil.
Atomic Design
Brad Frost descrie teoria care a condus la crearea instrumentului Lab Pattern.
patternlab.io
Laboratorul de modele de mai sus.
MailChimp Pattern Library
Biblioteca de modele a lui MailChimp acoperă sistemul grilei, tipografia, formularele, navigația, tabelele, listele, icoanele și multe altele.
O listă de Bibliotecă Patternă
Documentația cu privire la lista de culori, tipografia, formatul imaginii, titlurile, rezumatele de articole și alte aspecte ale designului site-ului.
Yahoo! Design Pattern Library
Yahoo! Design Pattern Library este o resursă de 59 de modele diferite pe care le utilizează în propria lor proprietate, puse la dispoziție pentru a fi utilizate de alți dezvoltatori.
Modele UI
UI Patterns este un site foarte mare care documentează modele din diverse site-uri de pe tot globul. Modelele pot fi accesate în funcție de categorie și votate în sus sau în jos de către utilizatorii site-ului.
Modelul de bază
Pattern Primer vă permite să salvați fragmente de marcare într-un "director de modele" și să le generați într-o listă cu previzualizări și o zonă de copiere și lipire pentru fiecare fragment. Exemplu primer de model
Pea.rs
Pears este o temă WordPress gratuită, open source, concepută pentru a vă ajuta să configurați un site cu previzualizări de marcare pentru exemplu, după care puteți lucra la aplicarea propriilor modele personalizate.
Patternry
Patternry este un serviciu comercial care permite modelelor să fie proiectate, partajate, organizate și colaborate în cadrul unei echipe.
Pattern Lab
Pattern Lab este crearea lui Brad Frost, bazat pe notiunile sale de "Atomic Design". Vă ajută să creați biblioteci de modele în funcție de sistemul de atomi> molecule> organisme> șabloane> pagini. Pattern Lab demo.
Dacă nu ați fost destul de sigur de unde să începeți cu propriile Ghiduri de stil, ar trebui să găsiți acum că aveți o mulțime de surse de inspirație și ajutor suplimentar.
Vă recomandăm să vă lăsați puțin timp să citiți articolele, să examinați cu atenție exemplele pentru a vedea cum funcționează "în sălbăticie" și să încercați câteva dintre instrumentele diferite pentru a vedea care dintre ele vă sunt cele mai bune.
Această listă nu este exhaustivă, așadar ne-ar plăcea să auzim sugestiile proprii în comentarii. Totuși, există multe de învățat și de jucat, deci distrați-vă!
Accentsconagua