Det har varit ett tag sedan Stilplattor fördes in i denna värld av etts geni Samantha Warren . För er som kanske har tittat på dem en gång och sedan glömt vad de är, här är en snabb förklaring:
Style Tiles är en sorts mall som gör att du snabbt kan testa och förhandsgranska olika färger, teckensnitt, texturer och andra estetiska stilrelaterade alternativ för dina mönster innan du skapar en high-fidelity mockup, men efter att trådramarna är gjorda. De är avsedda att presenteras för kunder, intressenter eller andra berörda parter ganska tidigt i konstruktionsprocessen. På det sättet kan du komma över bekymmer om typsnittet, och frågor som "Kan vi få en" flashigare "röd?"
Enkelt uttryckt bör du använda dem, även om det bara är för dig själv. Det kan tyckas som mycket problem att lägga till ytterligare ett steg till designprocessen. men jag kan berätta för dig av personlig erfarenhet att det är värt det. Jag designar i webbläsaren: stirrar på en tom Photoshop-duk kan vara skrämmande; stirrar på ett tomt webbläsarfönster verkar slå så mycket svårare.
Den känsla av riktning som skapas genom att skapa en Style Tile gör att designa resten av webbplatsen så mycket lättare. Det är ingenting så komplicerat eller försträngt som en stilguide; Således ger det både en plats att börja och friheten att justera saker som du går med.
Detta medför dock ett litet problem med de ursprungliga stilplattorna. De är PSD: er. Webbläsarbaserade designers som jag vill ha webbläsarbaserade stilplattor. Vi vill se hur dessa saker kommer att se på webben trots allt och på så många enheter som möjligt.
Flera människor har redan gått långt framför oss på den fronten. Det finns färdiga mallar för personer som vill komma igång med att göra Style Tiles i sin webbläsare. Kolla på dem:
De underbara människorna på Sparkbox skapade en responsiv stil kakel mall baserad på HTML och Sass. Det är ett av de enklare alternativen, som ses i demo, men koden är väl kommenterad. De gick även och inkluderade frivilliga skript för att göra det kompatibelt med IE 7 och nedan, om din klient inte har uppdaterat sin webbläsare i ... för alltid.
Skapad av Namanyay Goel , Webstiles har mycket gemensamt med de andra lösningarna på denna lista. Vad som gör dem annorlunda är att de byggdes med de mindre kända (vissa skulle säga undervärderade) Stylus CSS förprocessor.
Om du arbetar med kompassramen, tillsammans med saker som Ruby och Sass, försök den här på för storlek. Det kan installeras som alla andra Ruby-pärlor, så det borde falla ganska snyggt i ditt arbetsflöde. Intressant kan kroppskopia "genereras" via en Sass-variabel och innehållet: attribut. Hela saken är utformad så att du aldrig behöver röra HTML.
De Responsive Boilerplate för Style Tiles ger lite ganska hårda drop-skuggor med det, men det är lyhörd, och använder inget mer komplicerat än klassiskt HTML och CSS. Inga ramar, inga förbehandlare, inget. Det är en bra utgångspunkt om du bara vill öppna den i en textredigerare och gå.
Med dessa många färdiga alternativ där ute, varför skulle du vilja bygga dina egna HTML / CSS stilplattor från början? Verkar som ett slöseri med tid? Jo ja och nej.
Om du gör en enkel webbplats, och du inte har allt innehåll planerat än, eller om kunden inte har skickat det, kommer en av de färdiga alternativen att göra det bra. Men om du bygger en komplex webapp eller en mycket stor webbplats med många olika innehållstyper eller användargränssnitt, kanske du vill skapa en mall för stilplattor från början.
De existerande redovisar inte bara det stora utbudet av möjliga innehåll och elementtyper där ute. Således kanske du vill ha en stilplatta som innehåller en inbäddad video, ljudspelare eller karta. Du kanske vill ha en som visar ett flikgränssnitt eller en dragspelmeny.
Om du bygger en webbplats som beror på vissa ovanliga användargränssnitt, kanske du vill skapa en mall för stilplattor som innehåller de här funktionerna.
Det behöver inte vara så svårt. Ställ in en enkel två-tre kolumnlayout och börja med att inkludera de visuella elementen som kommer att vara viktigast för din design, baserat på innehållet / funktionaliteten. Dessa kommer att innehålla:
Det finns i allmänhet inget behov av att göra det produktionsklar kod för alla webbläsare. Håll det enkelt, håll det till HTML5. Om du inte använder ett icke-standardiserat användargränssnitt som måste kodas från början i HTML och CSS, stör inte JavaScript.
Den bästa delen? Du får förfina och återanvända alla relevanta CSS när du börjar koda din webbaserade mockup!
Style Tiles är mer än värt att titta på om du inte redan använder dem.
Visa dem till kunder, behåll dem till dig själv, använd de färdiga alternativen, eller rulla dina egna saker ... det spelar ingen roll. Att bara ha den känslan av stilistisk riktning kommer att göra att fylla i det tomma webbläsarfönstret så mycket lättare.