Consistentie behouden met een website-stijlgids

Het creëren van stijlhandleidingen is een veelgebruikte praktijk voor webontwerpers aan het worden, vooral als het gaat om sites met inhoud die zwaar is. Met een website-stijlgids kunnen ontwerpers een uiterlijk instellen en onderhouden door een reeks regels te maken die het ontwerp volgt. Het proces wordt flexibel, gemakkelijk bij te werken en consistent.

Tijdens deze tutorial zal ik laten zien hoe je een stijlgids kunt implementeren in je eigen site of project.

Wat precies is een stijlgids?

Stijlgidsen bestaan ​​al een tijdje. Zelfs vóór de dagen van het web moesten bedrijven vaak consistente en uniforme visuals voor hun merk maken. Dit werd en wordt nog steeds bereikt door het gebruik van merk- of identiteitsrichtlijnen. Dergelijke richtlijnen worden meestal vastgelegd in een document en kunnen informatie bevatten zoals:

  • Merkkleuren
  • Typografie, zoals lettertypen, formaten, leidende enz.
  • Positionering van het logo en gebruik in verschillende situaties dwz. afdruklayout kan verschillen van de weblay-out
  • Toon van stem

Wat precies in een merk / identiteitsgids staat, is afhankelijk van het bedrijf. Het kan van alles zijn, van een document van een enkele pagina tot een enorm uitgebreid document, zoals het Engelse tv-kanaal, de stijlgids van Channel 4.

Webstijlgidsen werken op dezelfde manier als merk / identiteitsrichtlijnen, met als enig verschil dat u geen identiteit voor een merk maakt, maar eerder een identiteit voor een website. Dit keer is het merk de website en als zodanig is een stijlgids opgesteld om consistentie en eenheid te creëren binnen het ontwerp van een website.

Wanneer zou ik een stijlgids kunnen gebruiken?

Ik zeg niet dat er een stijlgids voor moet worden geschreven elk website waar u mee bezig bent, maar soms is het logisch om er een te maken.

Het kan bijvoorbeeld een goed idee zijn ...

  • ... wanneer een website inhoud zwaar is en veel inhoud bevat die op verschillende manieren moet worden weergegeven.
  • ... bij het werken binnen grote teams op een site. Een gids kan van pas komen omdat elk onderdeel van de site consistent moet worden gebouwd, ongeacht welk lid van het team het heeft gemaakt. Zelfs als het lid van het team een ​​nieuwkomer is. Een ander voordeel voor teams is dat door een vaste definitie en naamgevingsconventies voor elk websiteonderdeel, u duidelijker en effectiever kunt communiceren precies naar welk moduleonderdeel wordt verwezen.
  • ... wanneer een site eenvoudig moet worden bijgewerkt of als er regelmatig nieuwe functies aan zijn toegevoegd.

De manier waarop we websites ontwerpen, maakt momenteel een verschuiving door. We beginnen ons te realiseren dat het ontwerpen van websites op een pagina per pagina mogelijk niet langer de juiste oplossing is in sommige omstandigheden. Door een systeem en structuur zoals een stijlgids te maken, kunnen we het grotere plaatje zien van hoe een website bij elkaar past, waardoor het hele proces van het updaten van de site een stuk overzichtelijker wordt.

Nu dat u een beetje meer begrijpt over de stijlgids van een website, laten we een paar voorbeelden bekijken.

Voorbeelden van gidsen voor websitestijlen

Twitter Bootstrap

Waarschijnlijk zijn de bekendste stijlregels voor een website te vinden in de Bootstrap van Twitters. Hoewel niet specifiek een stijlgids voor twitter.com, zijn een aantal componenten ervan te vinden op twitter.com en worden ze veel gebruikt voor Twitter's interne applicaties..

Github

Github is een goed voorbeeld van een website die een stijlgids moet gebruiken. Github heeft een team van ontwerpers en ontwikkelaars die aan het product werken en het is daarom van essentieel belang om de consistentie te behouden, ongeacht wie aan nieuwe functies en secties voor de site werkt.

MailChimp

Als u naar deze afbeelding van de stijlgids van MailChimp kijkt, ziet u verschillende componenten van de MailChimp-website. Een van de dingen die je misschien hebt gemerkt is de gebruiksvriendelijke menselijke benadering van MailChimp voor de dialoog die het op zijn hele site gebruikt. Dit is consistent omdat Mailchimp een set regels heeft gemaakt waaraan deze tone of voice moet voldoen.

Een websitestijlgids maken in Photoshop

Wat u besluit op te nemen in uw stijlgids, hangt af van de site waarvoor u ontwerpt. Een site voor sociaal netwerken heeft bijvoorbeeld verschillende componenten dan die van een website voor filmrecensies.

Je kunt zo gedetailleerd of zo kort zijn als je wilt, maar hoe gedetailleerder je bent, hoe meer uniform je ontwerp zal zijn.

Bij het maken van een stijlgids is het belangrijk om alle situaties op te nemen waar een element of component zich in bevindt. U zou bijvoorbeeld verschillende toestanden moeten overwegen voor knoppen en ingangen, evenals huidige menu-items enz. Deze moeten worden gedemonstreerd binnen uw. PSD-bestand.

Tip: U kunt verschillende visuele staten binnen Photoshop schakelen met behulp van Layer Comps. Bekijk onze recente tutorial over dit onderwerp.

Stap 1: De voorbereiding

In dit voorbeeld ga ik een stijlgids voor een blog maken. De blogstijlgids zal uit componenten bestaan ​​- dit zijn:

  • Auteur kaart
  • Blogpost
  • Commentaar
  • Toetsen
  • Paginering
  • Vorm elementen
  • tabellen

Ik ga ook de volgende zes kleuren gebruiken:

  • blauw # a4d4e8 - Dit wordt gebruikt als de primaire kleur
  • groen # aee1a3 - deze wordt gebruikt als een secundaire kleur
  • rood # f67f77 - Dit wordt gebruikt als een secundaire kleur en voor foutmeldingen
  • zwart # 474747 - Dit wordt gebruikt als primaire tekstkleur
  • donkergrijs # 919191 - Dit wordt gebruikt als een secundaire tekstkleur
  • lichtgrijs # e7e2de - Dit wordt gebruikt voor contouren

Alle ingangen en knoppen gebruiken een grensradius van 5 px, terwijl alle componentwidgets een randradius van 0 px hebben, waardoor ze rechthoekig van vorm zijn.

Stap 2: Ons document opzetten

Stel eerst een nieuwe documentwerkruimte in. Ik heb besloten om de mijne op 580px breed te zetten. Dit is een comfortabele maat om aan te werken en vertegenwoordigt een ruime ruimte voor een op modules gebaseerd ontwerp.

Ik gebruik een raster (Beeld> Tonen> Raster) om me te helpen bij mijn ontwerp en alles goed uitgelijnd te houden. Ik heb ervoor gekozen om elke 10px een 20px x 20px raster te gebruiken met een onderverdeling. Dit kan worden gewijzigd door naar Voorkeuren> Gidsen, Raster en Segmenten te gaan.

U ziet dan het onderstaande scherm. Hier kun je de rastergrootte veranderen in wat je maar wilt, maar ik vind dat een rasterlijn van 20px met onderverdelingen ingesteld op 2 goed werkt. Ik heb ook een aantal gidsen op 460px breed aan weerszijden van mijn document opgesteld om me een helpende hand te bieden. Daarnaast kan het handig zijn om 'snap' in te schakelen door naar Beeld> Snap te gaan. Dit zorgt ervoor dat uw elementen terechtkomen bij exacte pixelmetingen en niet afdwalen met zwerf-subpixelmetingen.

Stap 3: De auteurscomponent

Het eerste dat we gaan maken is de auteurcomponentmodule. Sociale netwerken zoals Twitter hebben deze auteurskaarten onlangs vrij populair gemaakt en ik dacht dat het misschien leuk zou zijn om het te gebruiken als onderdeel van onze website stijlgids. Op deze manier kan elke auteur van onze blog zijn eigen auteurskaart hebben.

Begin door het vormgereedschap te selecteren en selecteer een voorgrondkleur van wit. Maak met deze selectie een rechthoek van 380x250 px. Nadat dit is gemaakt, klikt u met de rechtermuisknop op de laag voor die vorm en selecteert u 'overvloeimogelijkheden'. Het deelvenster met mengopties verschijnt nu. Selecteer 'Stroke' in de linkerzijbalk van de pop-up en geef het een slaggrootte van 1 px. De kleur die we gaan gebruiken is de lichtgrijze # e7e2de uit onze kleurset.

Selecteer nu 'Buitenste gloed' en stel de kleur van de buitenste gloed in op dezelfde kleur, maar zet de dekking op 80. Stel de spreiding van de gloed in op 100% en de grootte op 4. Dit geeft ons onderdeel een grens met een dikke gloed die is vermomd als een rand.

De laagstijlen die we zojuist hebben gemaakt, zullen veel worden gebruikt in andere elementen die we later maken, maar hier is een korte tip over het gebruik van dezelfde laagstijlen op een ander element. Als u met de rechtermuisknop op de laag van het element klikt dat we zojuist hebben gemaakt en klik op 'Laagstijlen kopiëren'. Dit zal precies doen wat het zegt en je kunt het op elke andere laag plakken die je hebt. Om dit te doen, klikt u eenvoudig met de rechtermuisknop op de laag waaraan u de stijl wilt toevoegen en selecteert u 'laagstijl plakken'. Noteer dit, want we zullen het tijdens deze tut vrij veel gebruiken. We verwijzen naar deze specifieke laagstijl voor dit element als de 'hoofdlaagstijl'.

Neem voor de auteuravatar een voorbeeld van een foto en verklein deze naar 75px x 75px. Selecteer vervolgens de tool 'Elliptische selectiekader' en sleep de cursor over de afbeelding, beginnend in de linkerbovenhoek rechtsonder. Houd shift ingedrukt terwijl je dit doet om proporties te beperken en een perfecte cirkel te creëren. Als u vervolgens een selectie over de afbeelding hebt gemaakt, kopieert u deze en plakt u deze in uw stijlgidsdocument. Kopieer en plak ons ​​'hoofdlaagstijl' element en bewerk vervolgens de laagstijlen en verwijder de lijn.

Als u de drie statsvakken wilt maken, maakt u eerst drie witte rechthoekige vormen die gelijk verdeeld kunnen worden over de 380 px. Zodra u dit hebt gedaan, neemt u een van hen en opent u het paneel met lagenstijlen opnieuw door met de rechtermuisknop op de laag te klikken. Selecteer vervolgens 'Innerlijke schaduw'. Zorg ervoor dat de 'overvloeimodus' op normaal staat en de dekking op 100% staat. Zet de hoek op '-90' en verander de afstand naar 5px. Gebruik voor de kleur onze primaire blauwe kleur # a4d4e8. Herhaal dit proces vervolgens in de andere twee statboxen, maar verander deze keer hun innerlijke schaduwkleuren in elk van onze secundaire kleuren; groen # aee1a3 en rood # f67f77. Voeg vervolgens de tekst voor elke statistiek toe. In de mijne heb ik ervoor gekozen om het aantal volgers, volgingen en berichten te tonen.

Om de tekst en de bio van de auteur toe te voegen, heb ik ervoor gekozen om 'Droid Sans' te gebruiken, beschikbaar als een Google-weblettertype.

Maak voor het kleine hoekje in de rechterbovenhoek van de auteurskaart een vierkant van 50px x 50px met onze primaire kleur blauw en selecteer vervolgens het 'veelhoekige lasso-gereedschap'. Teken een rechte lijn vanaf de linkerbovenhoek van het vierkant naar de rechterbenedenhoek en teken vervolgens rond het linkergedeelte van het vierkant. Zodra dit is gebeurd, selecteert u Laag> Laagmasker> Selectie verbergen en maakt u de driehoek.

Selecteer voor de ster het vormgereedschap 'Veelhoek'. Zorg ervoor dat de zijkanten in het hoofdmenu op '5' staan. Selecteer vervolgens de kleine pijl naast het woord 'Kanten'. Selecteer ster en 'Inspringing zijden bij' tot 50%. Teken vervolgens een witte ster bovenop de driehoek en plaats deze in de rechterbovenhoek van de auteurskaart.

Stap 4: De blogpostcomponent

De blogpostcomponent is op dezelfde manier gemaakt als waarop we het hoofdelement van de bovenstaande author-kaart hebben gemaakt.

Ik heb de 'hoofdlaagstijl' hieraan toegevoegd. De miniatuurafbeelding 70px x 70px wordt links van deze geplaatst. Ik heb drie verschillende tekststijlen gemaakt; de hoofdkop, de datum en de alineatekst. Rechtsonder heb ik een knop 'meer lezen' toegevoegd. Zie stap 6 voor het maken van de knoppen.

Stap 5: het commentaarcomponent

Als u de eigen commentaarballon wilt maken, maakt u een afgeronde rechthoek van 316 x 90 pixels en voegt u de stijl 'hoofdlaag' hieraan toe.

Maak een vierkant vierkant van 15px x 15px en roteer deze> Bewerken> Transformeer pad> Roteer en draai het vervolgens vanuit het optiemenu 45 graden. Selecteer de werkelijke vormlaag en ga naar Bewerken> Kopiëren en ga vervolgens naar de grote afgeronde rechthoek die we zojuist hebben gemaakt. Zorg ervoor dat het vierkant op een rij staat waar u de tip wilt laten gaan. Ga vervolgens naar Bewerken> Plakken en dit zal de twee vormen samenvoegen. Voeg hier de hoofdlaagstijl aan toe en daar is de tekstballon!

Ik heb besloten om twee componenten voor commentaar toe te voegen; de ene is een standaardcommentaar en de andere is een auteurscommentaar. Voor het voorbeeld van de auteur heb ik de lijn als primaire blauwe kleur gewijzigd.

Stap 6: Knoppen

De knoppen zijn relatief eenvoudig te maken omdat we enkele richtlijnen hebben opgesteld voordat we aan de slag gaan in onze stijlgids.

Om een ​​grote knop te maken, selecteert u de tool 'afgeronde rechthoek'. Controleer in de balk met opties of de straal is ingesteld op '5px' en teken een primaire blauwe rechthoek van 125 px x 40 pixels. Voeg vervolgens de tekst van uw keuze toe. Dupliceer de laag door met de rechtermuisknop op de laag te klikken en 'Laag dupliceren' te selecteren. Zodra u dit hebt gedaan, verandert u de kleur in een van onze secundaire kleuren. Herhaal dit proces voor de knop met de andere secundaire kleur. Herhaal ook dit proces voor de kleine knoppen, maar maak dit keer de rechthoeken 30px x 105px en maak voor de 'call to action-knop' het 374px x 40px.

Voor de hover-statussen heb ik een subtiel verloop toegevoegd door een laagovergangsstijl toe te voegen. Stel de kleurmodus in op 'Normaal' en de dekking op 10% met het verloop van zwart naar wit. Dit is net een hint dat een gebruiker de knop heeft omgedraaid.

Voor de gegroepeerde knoppenreeks maakt u een afgeronde rechthoek van 380 px x 30 pixels breed en splitst u deze in vier gelijke knoppen. U kunt dit doen door een 1px-potloodlijn te tekenen of door secties uit te snijden met een 1px 'rechthoekig selectiekader' hulpmiddel.

Stap 7: paginering

De paginering wordt op dezelfde manier gemaakt als de gegroepeerde knoppenreeks die we zojuist hierboven hebben gemaakt. Maar deze keer, in plaats van het te maken in vier gelijkwaardige knoppen, maakt u tien vierkante knoppen van gelijke grootte met de pijlknoppen aan beide uiteinden een beetje groter. De onderstaande afbeelding demonstreert dit. Voor de pijlen heb ik een aantal voorgevormde vormen gebruikt die specifiek zijn voor webontwerppijlen.

Stap 8: Formulieren

Inmiddels had je moeten beseffen hoe gemakkelijk we het leven voor onszelf maken door een heleboel elementen en stijlen te herhalen. Het mooie hiervan is dat het consistentie creëert binnen ons ontwerp.

De invoer- en tekstgebieden voor deze set worden gemaakt met behulp van de methoden die we eerder hebben gebruikt. Teken voor de ingangen een afgeronde rechthoek van 380 x 90 pixels en pas de lijnkleur toe. Verleng de hoogte van het tekstgebied een beetje tot ongeveer 90 px. Voor de focus op de elementen heb ik onze 'hoofdlaagstijl' gebruikt en een extra element toegevoegd voor fout- en succesberichten.

Conclusie

Het is aan u hoeveel elementen u voor uw stijlgids wilt maken. U kent de vereisten voor de site waaraan u werkt en zult weten wat u wel en niet nodig zult hebben. Het mooie van het maken van een stijlgids is dat alle elementen die je in de toekomst introduceert, regels en praktijken bevatten waaraan moet worden vastgehouden en die consistentie binnen deze structuur mogelijk zullen maken..

Het zorgt voor bekendheid met gebruikers en zorgt voor een algehele betere ervaring, zowel esthetisch als functioneel.

Verdere links, lezen en bronnen

  • Mozilla's Style Guide
  • Common Patterns Library
  • Starbucks Style Guide
  • Een verzameling front-end stijlgidsen
  • Front-end stijlgidsen