Share
Vi har nylig gitt våre Twitter-følgere muligheten til å spørre hva de ønsket om temaet Front End Style Guides. Her er de beste spørsmålene og (selvfølgelig) svarene!
@anna_debenham @wdtuts Hva er forskjellen mellom en stilguide og et mønsterbibliotek? (I både teori og praksis).
- Jack Appleby (@jackappleby) 12. mai 2014
Det er mange tolkninger, men det er slik jeg ser det: Stilguider er et overordnet begrep for en rekke muligheter; redaksjonelle stilguider som diskuterer tone i stemmen, designstilførere som undersøker typografi og farger som kan brukes på nettstedet, og til og med kodestilguider for å opprettholde konsistens når flere mennesker legger til kodebase.
Et mønsterbibliotek er en type stilguide som er nær et fullverdig rammeverk. Mønsterbiblioteker er gode leveranser for utviklere - de inneholder alle kodestykker for moduler som finnes på nettstedet. Den kan settes sammen som en bruksanvisning for å opprettholde et nettsteds stiler og front-end-kode.
I Dave Ruperts ord: "Responsive deliverables bør se ut som fullt fungerende Twitter Bootstrap-stil systemer skreddersydd for kundenes behov." Det er en ganske god beskrivelse av hva jeg synes et mønsterbibliotek er.
@anna_debenham Hvor tidlig begynner du å lage stilguiden i et redesignprosjekt? @wdtuts
- Matt Quirk (@MattQuirk) 12. mai 2014
Rett ved starten. Det er den første utviklingen jeg gjør. Hvert nettsted har felles elementer som stykker, lenker, overskrifter, lister, skjemaer ... og å ha en forhåndsforberedt fil med alle disse delene av oppslag er veldig nyttig å samarbeide tidlig i prosjektet med designere.
Et godt sted å starte er med Paul Lloyds Barebones, som inneholder all den røde HTML som sannsynligvis vil bli brukt på et nettsted. Det er så enkelt å bygge på dette fundamentet med hver funksjonalitet som blir lagt til.
@anna_debenham @wdtuts Hvordan klarer du prosessen med opprettelse / vedlikehold av SG sammen med hi-fi-leveranser: mønster libs, comps
- James Nettik (@jnettik) 12. mai 2014
I tidligere prosjekter jeg har jobbet med, har designeren brukt TypeCast til å bygge opp sine stilarter, slik at de kan prøve ut den grunnleggende typografien i nettleseren og teste det ser bra ut på forskjellige enheter, før man forplikter seg til en bestemt design. Det fungerte veldig bra for oss begge, fordi det hjalp med å flagge opp problemer med ting som dodgy-utseende webfonter eller problemer med fargekontrast på lavpdf-skjermer tidlig på.
Noen designere, som Dan Mall, bygger opp elementbiblioteker i deres grafikkprogramvare under designprosessen. Ved å bryte opp designet i moduler, er det enkelt å konvertere dette til en stilguide. Jon Aizlewood brukte denne tilnærmingen under Redesign av Code for America, og det betydde at jeg kunne begynne å bygge komponenter og prototyping ideer mens resten av designet var fortsatt pågående.
Hentet fra http://codeforamerica.clearleft.com/@anna_debenham @wdtuts Noen tips om klientkommunikasjon / godkjenning? Hvordan får du klienter ombord med noe de ikke kan fullt ut visualisere?
- James Nettik (@jnettik) 12. mai 2014
@anna_debenham @wdtuts Hvordan presenterer du / involverer / får kundene kjent med stilguiden? (Spesielt de uten nettkunnskap)
- natalie (@talkanatalka) 12. mai 2014
(Jeg grupperte disse to spørsmålene sammen fordi de er veldig like.)
Det vil avhenge veldig mye på klienten. Jeg har funnet ut at stilguider er veldig enkle å selge til internt weblag, fordi hvis de opprettholder et sprawingssted, hele tiden skriver om samme kode og håndterer et supermassiv stilark, vil de umiddelbart se fordelene ved å ha en.
Kunder som ikke har direkte kontakt med design eller kode i dag, vil nok ikke forstå fordelene ved å ha en (det er ikke noe jeg vil vise til konsernsjefen), men jeg bygger en uansett fordi jeg vet at den hjelper meg, og forhåpentligvis vil det hjelpe den som må legge til koden til nettstedet et år senere. Det er hyggelig å kunne overlevere den til den neste utvikleren på slutten av et prosjekt. Det føles som god oppførsel.
@anna_debenham @wdtuts Hvordan talsmann for bruk av styleguides i organisasjoner som ikke bruker dem på grunn av manglende kultur / stramme tidsfrister?
- Daniel Fosco (@notdanielfosco) 12. mai 2014
Jeg forklarer at selv om stilguider tar litt tid å utvikle og vedlikeholde, sparer de faktisk tid på lang sikt. Kanskje jeg er mer oppmerksom på det som en entreprenør, men det tar litt tid å gjøre meg kjent med et nytt prosjekt, og ikke ha all den informasjonen jeg trenger koster tid.
Med et nettsted som har et eksisterende mønsterbibliotek, kan jeg legge til en ny funksjonalitet til nettstedet mye raskere enn om jeg måtte fôre rundt på nettstedet, jakte på lignende stiler eller gjenskape noe som ingen er klar over eksisterer allerede.
Å ha en boilerplate stil guide jeg kan bygge på sparer også mye tid, så produsere en for et prosjekt tar ikke mye ekstra innsats. Å sørge for at folk opprettholder det, er det harde arbeidet.
@anna_debenham Ville elske å vite hva du tenker på disse automatiske stilgirgeneratorene jeg har hørt om nylig ... @wdtuts
- Westley Knight (@westleyknight) 12. mai 2014
Det er noen stilguide generatorer, Welch Canavan skrev opp en liste over dem her: http://welchcanavan.com/styleguide-roundup/
Et par andre ikke nevnt inkluderer Stylify Me og Frontify, så du bør sjekke ut disse også. Jeg liker virkelig lyden av KSS (Knyle Style Sheets) fordi den genererer en levende stilguide fra kommentarer i CSS.
Stilguidegeneratorer kan være nyttige i noen tilfeller, men en av fordelene med å bygge opp en stilguide som et nettsted utvikler er at det tvinger deg til å tenke mer nøye på koden din - hvert mønster er som en lego blokk, slik at det bidrar til å holde du i riktig tenkemåte hvis du skal for en mer objektorientert tilnærming.
Hvor jeg tror generatorer er nyttige, er hvis du kommer inn i et prosjekt for et nettsted som allerede er utformet, er du på en stram tidsfrist, og du leter etter hvilke farger og forskjellige overskriftsstiler som brukes. Det er praktisk hvis du vil ta en liste over heksekoder.
Nicole Sullivans Type-o-matic er også bra for denne situasjonen. Det er et nettleser-plugin som teller alle skrifttyper på en side og bestiller dem etter farge og størrelse.
@anna_debenham @wdtuts Hvordan kommuniserer du effektivt til både designere og back-end devs i stilguiden BEYOND viser kode? TY
- Joseph James (@joeaugie) 12. mai 2014
Når du bygger opp din stilguide, legg deg i skoene til en entreprenør eller en ny ansatt som har blitt bedt om å legge til en ny seksjon på nettstedet. Hvilken informasjon vil de trenge?
Hvis du legger til informasjon for ulike roller, blir det et sentralisert sted for folk å gå og finne det de trenger. Dette er noe GOV.UK har lykkes med å oppnå med sin Service Design Manual.
@anna_debenham @wdtuts Hva er noen gode måter å bruke stileguider på designutvikling, samt en referanse når nettstedet går live?
- Marc Drummond (@MarcDrummond) 12. mai 2014
@anna_debenham @wdtuts Spesielt utfordringen med å holde stilguide relevant og nøyaktig dersom design utvikler seg når det er live.
- Marc Drummond (@MarcDrummond) 12. mai 2014
Prototype kode og design med det, og referere til det foran andre mennesker så mye som mulig. Når du bygger litt ny funksjonalitet for nettstedet, må du bygge det i stilguiden først, slik at hvis du utvikler det før du trykker på endringer, blir det ikke utdatert. Ved å gjøre dette kan du også sjekke at andre stiler ikke er i konflikt med de nye.
Versjonskontroll din stilguide. Gjør det åpen kildekode hvis mulig: folk er mer sannsynlig å holde det oppdatert hvis det er ute i det åpne.
Ian Feather skrev nylig om hvordan Lonely Planet opprettholder sin stilguide med en API. Dette vil ikke være egnet for hvert prosjekt, men jeg kan se hvor nyttig dette ville være for et stort nettsted som hele tiden er i utvikling. Det føles som en god teknikk å sikte på.
Jeg håper jeg har vært i stand til å svare på noen av dine spørsmål om front end-stil guider! Hvis du har noen andre, kan du spørre dem i kommentarfeltet.
Accentsconagua