Het is een tijdje geleden Stijltegels werden in deze wereld gebracht door het genie van een Samantha Warren . Voor diegenen van jullie die er misschien één keer naar hebben gekeken en vervolgens zijn vergeten wat ze zijn, hier is een korte uitleg:
Stijltegels zijn een soort sjabloon waarmee u snel verschillende kleuren, lettertypen, texturen en andere esthetische stijlgerelateerde opties voor uw ontwerpen kunt testen en bekijken voordat u een high-fidelity mockup maakt, maar nadat de draadframes zijn gemaakt. Ze zijn bedoeld om vrij vroeg in het ontwerpproces aan klanten, belanghebbenden of andere belanghebbenden te worden gepresenteerd. Op die manier kunt u zorgen over de lettertypekeuze oplossen en vragen als 'kunnen we een' flitser 'rood hebben? "
Simpel gezegd, je zou ze moeten gebruiken, al was het maar voor jezelf. Het lijkt misschien een hele klus om nog een stap te zetten in het ontwerpproces; maar ik kan uit persoonlijke ervaring zeggen dat het het waard is. Ik ontwerp in de browser: staren naar een leeg Photoshop-canvas kan ontmoedigend zijn; Het lijkt erop dat het staren naar een leeg browservenster veel harder gaat.
Het richtingsgevoel bij het maken van een stijltegel maakt het ontwerpen van de rest van de site zoveel gemakkelijker. Het is niets zo ingewikkeld of beperkend als een stijlgids; het geeft dus zowel een plek om te beginnen als de vrijheid om dingen aan te passen terwijl je verder gaat.
Dit levert echter een klein probleem op met de originele Style Tiles. Het zijn PSD's. Browser-gebaseerde ontwerpers zoals ik zullen browser-gebaseerde Style Tiles willen. We willen tenslotte zien hoe dit spul op het web eruit zal zien, en op zoveel mogelijk apparaten.
Verschillende mensen zijn ons op dat vlak al ver vooruit gegaan. Er zijn vooraf gemaakte sjablonen voor mensen die willen beginnen met het maken van Stijltegels in hun browser. Bekijk ze eens:
De lieve mensen bij Sparkbox hebben een gemaakt responsieve stijltegelsjabloon gebaseerd op HTML en Sass. Het is een van de eenvoudigere opties, zoals te zien in de demo, maar de code is goed becommentarieerd. Ze zijn zelfs gegaan en hebben optionele scripts toegevoegd om deze compatibel te maken met IE 7 en lager, voor het geval uw klant zijn browser niet voor eeuwig heeft bijgewerkt.
Gemaakt door Namanyay Goel , Webstiles hebben veel gemeen met de andere oplossingen op deze lijst. Wat ze anders maakt, is dat ze werden gebouwd met de minder bekende (sommigen zouden zeggen onderschatte) Stylus CSS pre-processor.
Als je met het Compass-framework werkt, samen met dingen als Ruby en Sass, probeer het dan deze op voor maat. Het kan worden geïnstalleerd zoals elke andere Ruby-edelsteen, dus het zou heel netjes in je workflow moeten vallen. Interessant is dat body-copy kan worden "gegenereerd" via een Sass-variabele en de inhoud: attribuut. Het geheel is zo ontworpen dat je nooit de HTML hoeft aan te raken.
De Responsieve ketelplaat voor stijltegels brengt een aantal nogal harde slagschaduwen mee, maar het is responsief en gebruikt niets gecompliceerder dan klassieke HTML en CSS. Geen frameworks, geen pre-processors, niets. Het is een goed startpunt als u het alleen in een teksteditor wilt openen en wilt openen.
Met deze vele vooraf gemaakte opties die er zijn, waarom zou u uw eigen HTML / CSS-stijltegels vanaf nul willen maken? Lijkt het een verspilling van tijd? Wel, ja en nee.
Als u een eenvoudige site aan het maken bent en u nog niet alle inhoud hebt gepland, of als de klant deze nog niet heeft verzonden, doet een van de vooraf gemaakte opties het goed. Als u echter een complexe web-app of een zeer grote site met veel verschillende inhoudstypen of UI-elementen maakt, kunt u een geheel nieuwe stijltegelsjabloon maken.
De bestaande maken gewoon geen rekening met de enorme hoeveelheid mogelijke inhouds- en elemententypes die er zijn. U wilt dus een stijltegel met een ingesloten video, audiospeler of kaart. Misschien wilt u er een die een interface met tabbladen of een harmonica-menu toont.
Als u een site bouwt die afhankelijk is van bepaalde ongewone elementen van de gebruikersinterface, kunt u een stijltegelsjabloon maken met deze functies.
Het hoeft niet zo moeilijk te zijn. Stel eenvoudig een eenvoudige lay-out van twee of drie kolommen in en begin met het opnemen van de visuele elementen die het belangrijkst zijn voor uw ontwerp, op basis van de inhoud / functionaliteit. Deze omvatten:
Het is over het algemeen niet nodig om het productiegereed te maken voor alle browsers. Houd het simpel, hou het bij HTML5. Tenzij u een niet-standaard gebruikersinterface-element gebruikt dat van de grond af moet worden gecodeerd in HTML en CSS, hoeft u zich geen zorgen te maken over JavaScript.
Het beste gedeelte? U kunt alle relevante CSS verfijnen en hergebruiken terwijl u begint met het coderen van uw browsergebaseerde mockup!
Stijltegels zijn meer dan de moeite waard om naar te kijken als je ze nog niet gebruikt.
Laat ze zien aan klanten, bewaar ze voor jezelf, gebruik de vooraf gemaakte opties, of rol je eigen ... het maakt niet uit. Alleen al het gevoel van stilistische richting zal het invullen van dat lege browservenster zoveel gemakkelijker maken.