Det har vært en stund siden Stil fliser ble brakt inn i denne verden av enes geni Samantha Warren . For de av dere som kanskje har sett dem en gang, og så glemt hva de er, her er en rask forklaring:
Stilfliser er en slags mal som lar deg raskt teste og forhåndsvise forskjellige farger, fonter, teksturer og andre estetiske stilrelaterte alternativer for designene dine før du oppretter en high-fidelity-mockup, men etter at trådrammer er laget. De er ment å bli presentert for kunder, interessenter eller andre interesserte rett tidlig i designprosessen. På den måten kan du komme forbi bekymringer om skriftvalget, og spørsmål som "Kan vi få en" flashier "rød?"
Enkelt sagt, bør du bruke dem, selv om bare for deg selv. Det kan virke som en masse problemer med å legge enda et skritt til designprosessen; men jeg kan fortelle deg fra personlig erfaring at det er verdt det. Jeg designer i nettleseren: stirrer på et tomt Photoshop lerret kan være skremmende; stirrer på et tomt nettleservindu synes å treffe det mye vanskeligere.
Sans for retning gitt ved å lage en stilflise gjør utformingen av resten av nettstedet så mye enklere. Det er ingenting så komplisert eller sammenbrudd som en stilguide; dermed gir det både et sted å starte og friheten til å justere ting mens du går.
Dette medfører imidlertid et lite problem med de opprinnelige stilfliserne. De er PSDer. Nettleserbaserte designere som meg selv vil ha nettleserbaserte stilfliser. Vi vil se hvordan disse tingene kommer til å se på nettet, tross alt, og på så mange enheter som mulig.
Flere mennesker har allerede gått langt foran oss på den fronten. Det er forhåndsdefinerte maler for folk som ønsker å komme i gang med å lage Style Tiles i nettleseren sin. Sjekk de ut:
De nydelige menneskene på Sparkbox opprettet en responsiv stil flis mal basert på HTML og Sass. Det er en av de enklere alternativene, sett i demoen, men koden er godt kommentert. De gikk selv og inkluderte valgfrie skript for å gjøre det kompatibelt med IE 7 og under, hvis klienten din ikke har oppdatert nettleseren sin i ... for alltid.
Laget av Namanyay Goel , Webstiles har mye felles med de andre løsningene på denne listen. Det som gjør dem forskjellige er at de ble bygget med de mindre kjente (noen ville si undervurdert) Stylus CSS preprosessor.
Hvis du jobber med Compass-rammen, sammen med ting som Ruby og Sass, kan du prøve denne på for størrelse. Den kan installeres som alle andre Ruby perler, så det skal falle ganske pent inn i arbeidsflyten din. Interessant kan kroppskopi "genereres" via en Sass-variabel og innholdet: attributt. Hele greia er utformet slik at du aldri må røre HTML-koden.
De Responsive Boilerplate for Style Tiles bringer noen ganske sterke drop-skygger med det, men det er responsivt, og bruker ingenting mer komplisert enn klassisk HTML og CSS. Ingen rammer, ingen forprosessorer, ingenting. Det er et godt utgangspunkt hvis du bare vil åpne den i et tekstredigeringsprogram og gå.
Med disse mange forhåndsdefinerte alternativene der ute, hvorfor vil du bygge dine egne HTML / CSS stilfliser fra bunnen av? Virker som en sløsing med tid? Vel, ja og nei.
Hvis du lager et enkelt nettsted, og du ikke har alt innholdet planlagt ennå, eller hvis klienten ikke har sendt den, vil en av de forhåndsdefinerte alternativene gjøre det bra. Men hvis du bygger en kompleks webapp, eller et veldig stort nettsted med mange forskjellige innholdstyper eller brukergrensesnittelementer, vil du kanskje lage en Style Tile-mal fra bunnen av.
De eksisterende oppgir bare ikke det store omfanget av mulig innhold og elementtyper der ute. Dermed vil du kanskje ha en stilkilde som inneholder en innebygd video, lydspiller eller et kart. Du vil kanskje ha en som viser et fanebladgrensesnitt, eller en trekkspillingsmeny.
Hvis du bygger et nettsted som avhenger av visse uvanlige brukergrensesnittelementer, kan det være lurt å lage en Style Tile-mal som inneholder disse funksjonene.
Det trenger ikke å være så vanskelig. Bare sett opp en enkel to-tre kolonneoppsett, og start med å inkludere de visuelle elementene som vil være viktigst for ditt design, basert på innholdet / funksjonaliteten. Disse vil inkludere:
Det er generelt ikke nødvendig å gjøre det til produksjonsklar kode for alle nettlesere. Hold det enkelt, hold det til HTML5. Med mindre du bruker et ikke-standard UI-element som må kodes fra grunnen i HTML og CSS, ikke bry deg med JavaScript.
Den beste delen? Du kommer til å finjustere og bruke alle relevante CSS når du begynner å kode din nettleserbaserte mockup!
Style Tiles er mer enn verdt å se på hvis du ikke allerede bruker dem.
Vis dem til klienter, hold dem til deg selv, bruk de forhåndsdefinerte alternativene, eller kast ditt eget ... det spiller ingen rolle. Bare å ha den følelsen av stilistisk retning vil gjøre det enklere å fylle ut det tomme nettleservinduet.