Een digitale stijlgids is een overzicht van alle design-gerelateerde richtlijnen (UX/UI) en gaat in op vragen over het gebruik van o.a. typografie, specifieke HTML (tekst) elementen, ingesloten media en huisstijlkleuren. Bij een digitale stijlgids, of styleguide, ligt de nadruk vooral op het nauwkeurig bewaken van de online huisstijl van jouw website of mobile app zodat de visuele identiteit van je online applicatie consistent blijft.

Een online huisstijl ontwikkelt zich nu eenmaal in de loop der tijd, dus het kan raadzaam zijn een digitale stijlgids op te zetten waarin de veranderingen voortdurend worden vastgelegd. Op deze manier wordt de digitale stijlgids een nuttige tool die daadwerkelijk (zowel intern als extern) zal worden gebruikt.

Een groot voordeel van een ‘levende’ digitale stijlgids is dat elke wijziging direct kan worden doorgevoerd en toegepast, waardoor overal en real-time dezelfde informatie beschikbaar is. Maar ook kunnen de componenten niet alleen in vorm, maar ook in gedrag getoond worden (o.a. hoe een button reageert op een mouseover of hoe een component of layout reageert op verschillende schermresoluties).

Deze digitale stijlgids maakt voor het grootste gedeelte gebruik van de Poor Man’s Styleguide (gemaakt door Bryan Braun), een quick-and-dirty frontend stijlgids om te kopiëren en zelf te gebruiken.

#1. Typografie

Voor de broodtekst in deze website worden systeem fonts gebruikt, systeem fonts zijn lettertypes die horen bij het besturingssysteem (bijv. in Windows is dit Segoe UI). Uiteraard heeft elk ander besturingssysteem een ander font maar dit zijn allemaal mooie geometrische schreefloze lettertypes.

Voor de Kopteksten wordt het lettertype Glober van FontFabric gebruikt, een betaald lettertype ontworpen door Ivan Petrov en Svet Simov in 18 verschillende diktes en in 2 stylen (9 staande en 9 cursieve varianten).

In deze website wordt alleen gebruik gemaakt van de ‘Heavy’ dikte voor de verschillende kopteksten. Ik heb gekozen voor dit lettertype vanwege de uitstekende leesbaarheid, gepolijste glyph-contouren, geoptimaliseerde kerning en snelle laadtijd van de webfonts (ingesloten via @font-face).

a. Kopteksten

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

b. Opsommingen, Definitielijst, e.d.

In HTML-documenten kun je verschillende soorten opsommingen toepassen. De meest gebruikte zijn de ongeordende, de geordende lijst en daarnaast ook nog de definitielijst.

Ordered List

1. List Item 1
2. List Item 2
   1. List Item 1
   2. List Item 2
3. List Item 3

Unordered List

• List Item 1
• List Item 2
  • List Item 1
  • List Item 2
• List Item 3

Definition List

Definition List Term 1

This is a definition list description.

Definition List Term 2

This is a definition list description.

c. Standaard/Default Blockquote

“Web Design is 95% Typography”

Oliver Reichenstein

d. Tekst Elementen

De tekst die je in de website gebruikt krijgt een standaard opmaak zonder dat je daar zelf iets aan hoeft te doen. Maar door gebruik te maken van bepaalde standaard elementen en attributen kun je de inhoud van jouw pagina op maat stylen in CSS.

Hieronder zie je een aantal van de meest voorkomende fysieke tekstopmaak-elementen die binnen de broncodes kunnen worden geplaatst.

The a element example

The abbr element element with title example

The ACRONYM element example

The cite element example

The code element example

The em element example

The del element example

The dfn element with title example

The ins element example

The kbd element example

The mark element example

The s element example

The samp element example

The small element example

The strong element example

The _{sub element} example

The ^{sup element} example

The u element example

The var element example

#2. Monospace / Preformatted

Een ‘code block’ wordt aangemaakt door de content in te pakken met <pre></pre> tags in de HTML tekst editor van de desbetreffende pagina of artikel.

// Loop through Divs using Javascript.
var divs = document.querySelectorAll('div'), i;

for (i = 0; i < divs.length; ++i) {
  divs[i].style.color = "green";
}

Als tekst wordt ingepakt in <code></code> tags, dan zal de tekst worden gezet in ‘Monospace Text’ en weergegeven in de kleur blauw.

#3. Tabellen

Als je tabulaire data, of in het Engels ’tabular data’ in een webpagina wilt verwerken móet je daar een tabel (<table></table>) voor gebruiken. Voor het weergeven van simpele tabellen heb ik voor de responsive aanpak gekozen vergelijkbaar met de Pure CSS Responsive Table van Andor Nagy.

#4. Formulier Elementen

Hieronder volgen alle formulier en invoer elementen die vooraf zijn gestyled.

#5. Ingesloten Media

a. Afbeeldingen inclusief Captions

Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Lorizzle shizzlin dizzle gizzle sit amizzle, hizzle break it down elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Lorizzle shizzlin dizzle gizzle sit amizzle, hizzle break it down elit.

Nullizzle sapien velizzle, aliquet volutpizzle, funky fresh yippiyo, gravida vizzle, arcu. Pellentesque away tortizzle. Sed eros. The bizzle go to hizzle dolor hizzle dawg cool own yo’. Mauris pellentesque nibh et turpizzle. Own yo’ izzle fizzle. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Lorizzle shizzlin dizzle gizzle sit amizzle, hizzle break it down elit. Nullizzle sapien velizzle, aliquet volutpizzle, funky fresh yippiyo, gravida vizzle, arcu. Pellentesque away tortizzle. Sed eros. Sed eros. The bizzle go to hizzle dolor hizzle dawg cool own yo’. Mauris pellentesque nibh et turpizzle. Own yo’ izzle fizzle. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Lorizzle shizzlin dizzle gizzle sit amizzle, hizzle break it down elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Lorizzle shizzlin dizzle gizzle sit amizzle, hizzle break it down elit. Nullizzle sapien velizzle, aliquet volutpizzle, funky fresh yippiyo, gravida vizzle, arcu. Pellentesque away tortizzle. Sed eros. The bizzle go to hizzle dolor hizzle dawg cool own yo’. Mauris pellentesque nibh et turpizzle. Sed eros. The bizzle go to hizzle dolor hizzle dawg cool own yo’. Mauris pellentesque nibh et turpizzle. Own yo’ izzle fizzle. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Lorizzle shizzlin dizzle gizzle sit amizzle, hizzle break it down elit. Own yo’ izzle fizzle. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Lorizzle shizzlin dizzle gizzle sit amizzle, hizzle break it down elit. Nullizzle sapien velizzle, aliquet volutpizzle, funky fresh yippiyo, gravida vizzle, arcu.

Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Lorizzle shizzlin dizzle gizzle sit amizzle, hizzle break it down elit. Nullizzle sapien velizzle, aliquet volutpizzle, funky fresh yippiyo, gravida vizzle, arcu. Pellentesque away tortizzle. Sed eros. The bizzle go to hizzle dolor hizzle dawg cool own yo’.

b. Het Audio Element

c. Het Video Element

#6. Extra TinyMCE Functionaliteit

WordPress gebruikt standaard de TinyMCE text editor die over de meest gebruikte opties beschikt om je tekst op te maken. Hieronder zie je extra knoppen, en daarmee extra functionaliteit, die ik heb toegevoegd aan dit WordPress thema.

a. Externe of Interne Link  en Download Buttons

rajtoral.comDownload

b. Citaat, Aantekening en Tip (van de Week) Block

c. Dropdown / Toggle

Conclusie

Net zoals bij grafisch ontwerpen is een huisstijlgids een vooraf vastgesteld document die beschrijft hoe een bedrijf zich visueel presenteert. Hierin worden zaken behandeld zoals lettertypes, huisstijlkleuren, plaatsing logo, indeling visitekaartje, etc. om zodoende een consistent en professioneel bedrijfsimago op te bouwen bij alle doelgroepen die voor jouw bedrijf belangrijk zijn (o.a. bestaande klanten, prospects, toeleveranciers en potentiële werknemers).

Het idee dat een digitale stijlgids met regels en wetten zwart op wit voor een consistent gebruik van de huisstijl zorgt, is stiekem fictie. Deze digitale stijlgids heeft dan ook geen registrerend of documenterend karakter, maar is meer sturend en normerend.

Deel dit Bericht:

Auteur: Jan Rajtoral

Jan Rajtoral is een ervaren grafische vormgever en webdesigner. Hij heeft een ruime ervaring met Front-end web design (HTML, CSS en JS/jQuery), User Experience (UX), Toegankelijkheid (WCAG), Performance en WordPress Ontwikkeling & Thema Ontwerp. Maar hij ontwerpt en ontwikkelt ook logo’s en huisstijlen, waarbij hij altijd streeft naar merkconsistentie in het hele ontwerp.