Share
Di recente abbiamo dato ai nostri follower di Twitter l'opportunità di chiedere tutto ciò che volevano sull'argomento di Front End Style Guides. Ecco le migliori domande e (ovviamente) le risposte!
@anna_debenham @wdtuts Qual è la differenza tra una guida di stile e una libreria di pattern? (Sia nella teoria che nella pratica).
- Jack Appleby (@jackappleby), 12 maggio 2014
Ci sono molte interpretazioni, ma è così che la vedo: le Guide di stile sono un termine generico per una serie di possibilità; guide di stile editoriale che discutono il tono della voce, guide di stile di progettazione che esplorano la tipografia e i colori che possono essere utilizzati sul sito e persino le guide di stile del codice per mantenere la coerenza quando più persone aggiungono alla base di codice.
Una libreria di pattern è un tipo di guida di stile che è vicino a un framework completo. Le librerie di pattern sono ottimi risultati per gli sviluppatori: contengono tutti i frammenti di codice dei moduli trovati sul sito. Può essere messo insieme come un manuale di istruzioni per il mantenimento degli stili di un sito e del codice di front-end.
Nelle parole di Dave Rupert: "I deliverable reattivi dovrebbero assomigliare molto a sistemi di bootstrap di Twitter pienamente funzionanti, personalizzati per le esigenze dei tuoi clienti". Questa è una descrizione abbastanza buona di ciò che penso sia una libreria di pattern.
@anna_debenham Quanto tempo inizi a creare la guida allo stile in un progetto di riprogettazione? @wdtuts
- Matt Quirk (@MattQuirk), 12 maggio 2014
Proprio all'inizio. È il primo sviluppo che faccio. Ogni sito ha elementi comuni come paragrafi, collegamenti, intestazioni, elenchi, moduli ... e avere un file pre-preparato con tutti questi pezzi di markup è davvero utile per collaborare fin dall'inizio nel progetto con i designer.
Un buon punto di partenza è con Paul Lloyd's Barebones, in quanto contiene tutto l'HTML grezzo che potrebbe essere utilizzato su un sito. È quindi facile costruire su questa base con ogni funzionalità che viene aggiunta.
@anna_debenham @wdtuts Come gestisci il processo di creazione / manutenzione di SGs insieme ai deliverable hi-fi: pattern libs, comps
- James Nettik (@jnettik), 12 maggio 2014
Nei progetti precedenti su cui ho lavorato, il designer ha utilizzato TypeCast per creare i propri stili in modo che possano provare la tipografia di base nel browser e testarlo su dispositivi diversi, prima di impegnarsi in un progetto specifico. Questo ha funzionato molto bene per entrambi, perché ha aiutato a segnalare problemi con cose come i webfonts dall'aspetto oscuro o problemi con il contrasto del colore su schermi a bassa risoluzione all'inizio.
Alcuni designer, come Dan Mall, costruiscono librerie di elementi nel loro software di grafica durante il processo di progettazione. Suddividendo il design in moduli, la conversione di questo in una guida di stile è davvero semplice. Jon Aizlewood ha utilizzato questo approccio durante la riprogettazione di Code for America, e ciò significava che potevo iniziare a costruire componenti e idee di prototipazione mentre il resto del progetto era ancora in corso.
Tratto da http://codeforamerica.clearleft.com/@anna_debenham @wdtuts Qualche consiglio sulla comunicazione / approvazione del cliente? Come fai a coinvolgere i clienti con qualcosa che non possono visualizzare completamente?
- James Nettik (@jnettik), 12 maggio 2014
@anna_debenham @wdtuts Come presentate / coinvolgono / fanno familiarizzare i clienti con la guida allo stile? (Soprattutto quelli senza conoscenza web)
- natalie (@talkanatalka), 12 maggio 2014
(Ho raggruppato queste due domande insieme perché sono molto simili).
Dipenderà molto dal cliente. Ho trovato che le guide di stile sono una vendita davvero facile ai team Web interni perché se mantengono un sito sprawing, riscrivono costantemente lo stesso codice e si occupano di un foglio di stile supermassiccio, vedranno immediatamente il vantaggio di averne uno.
I clienti che non hanno a che fare direttamente con il design o il codice giorno per giorno probabilmente non capiranno i vantaggi di averne uno (normalmente non è qualcosa che vorrei mostrare al CEO), ma ne costruisco uno indipendentemente perché so che aiuta io, e spero, aiuterà chiunque debba aggiungere codice al sito un anno dopo. È bello poterlo consegnare al prossimo sviluppatore alla fine di un progetto. Sembra una buona educazione.
@anna_debenham @wdtuts Come difendere l'uso di styleguides in organizzazioni che non li usano per mancanza di cultura / scadenze ravvicinate?
- Daniel Fosco (@notdanielfosco), 12 maggio 2014
Spiega che sebbene le guide di stile richiedano un po 'di tempo per svilupparle e mantenerle, in realtà risparmiano tempo nel lungo periodo. Forse ne sono più consapevole come imprenditore, ma ci vuole un po 'di tempo per familiarizzare con un nuovo progetto, e non avere tutte le informazioni di cui ho bisogno costa tempo.
Con un sito che dispone di una libreria di pattern preesistente, posso aggiungere una nuova funzionalità al sito molto più rapidamente che se dovessi cercare il sito per cercare stili simili o ricreare qualcosa di cui nessuno è a conoscenza esiste già.
Avere una guida di stile che posso anche risparmiare fa risparmiare un sacco di tempo, quindi produrre uno per un progetto non richiede molto sforzo. Assicurarsi che le persone lo mantengano è un duro lavoro.
@anna_debenham Mi piacerebbe sapere cosa ne pensate di questi generatori automatici di guida di stile di cui ho sentito parlare di recente ... @wdtuts
- Westley Knight (@westleyknight), 12 maggio 2014
Ci sono alcuni generatori di guide di stile, Welch Canavan ha scritto un elenco di loro qui: http://welchcanavan.com/styleguide-roundup/
Un paio di altri non menzionati includono Stylify Me e Frontify, quindi dovresti dare un'occhiata anche a quelli. Mi piace molto il suono di KSS (Knyle Style Sheets) perché genera una guida in stile di vita dai commenti nel tuo CSS.
In alcuni casi, i generatori di guide di stile possono essere utili, ma uno dei vantaggi di sviluppare una guida di stile come lo sviluppo di un sito è che ti costringe a pensare più attentamente al tuo codice: ogni modello è come un blocco lego, quindi aiuta a mantenere sei nella giusta mentalità se stai per un approccio più orientato agli oggetti.
Dove penso che i generatori siano utili è se entri in un progetto per un sito che è già stato progettato, sei in una scadenza serrata e stai cercando quali colori e stili di intestazione sono usati. È utile se vuoi prendere una lista di codici esadecimali.
Anche la Type-o-matic di Nicole Sullivan va bene per questa situazione. È un plug-in del browser che conta tutti i font di una pagina e li ordina in base al colore e alle dimensioni.
@anna_debenham @wdtuts In che modo comunichi efficacemente sia i progettisti che gli sviluppatori di back-end all'interno della guida allo stile BEYOND che mostra il codice? TY
- Joseph James (@joeaugie), 12 maggio 2014
Quando crei la tua guida di stile, mettiti nei panni di un appaltatore o di un nuovo dipendente a cui è stato chiesto di aggiungere una nuova sezione al sito. Di quali informazioni avranno bisogno?
Se aggiungi informazioni per ruoli diversi, diventa un luogo centralizzato dove le persone possono andare e trovare ciò di cui hanno bisogno. Questo è qualcosa che GOV.UK ha ottenuto con successo con il loro Service Design Manual.
@anna_debenham @wdtuts Quali sono alcuni buoni modi per utilizzare le guide di stile nello sviluppo del design e un riferimento quando il sito viene pubblicato?
- Marc Drummond (@MarcDrummond), 12 maggio 2014
@anna_debenham @wdtuts In particolare la sfida di mantenere la guida di stile pertinente e accurata se il design si evolve una volta che è vivo.
- Marc Drummond (@MarcDrummond), 12 maggio 2014
Proteggi il codice e progetta con esso e fai riferimento ad esso il più possibile davanti ad altre persone. Quando crei alcune nuove funzionalità per il sito, costruiscile prima nella guida allo stile in modo tale che se stai sviluppando in questo, prima di apportare modifiche, non diventerà obsoleto. In questo modo, puoi anche verificare che altri stili non siano in conflitto con quelli nuovi.
La versione controlla la tua guida di stile. Rendilo open source se possibile: le persone hanno maggiori probabilità di tenerlo aggiornato se è all'aperto.
Ian Feather ha recentemente scritto come Lonely Planet mantiene la propria guida allo stile con un'API. Questo non sarà adatto per ogni progetto, ma posso vedere quanto sarebbe utile per un grande sito costantemente in sviluppo. Sembra una buona tecnica a cui mirare.
Spero di essere stato in grado di rispondere ad alcune delle tue domande sulle guide di stile front-end! Se ne hai altri, non esitare a chiedere loro nella sezione commenti.
Accentsconagua