Mobiele Navigatie

Een 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 de juiste huisstijlkleuren.

Bij een visuele stijlgids, of styleguide, ligt de nadruk vooral op het nauwkeurig bewaken van de online huisstijl van uw website of mobile app zodat de visuele identiteit van uw online applicatie consistent blijft.

Een online huisstijl ontwikkelt zich nu eenmaal in de loop der tijd, dus het kan raadzaam zijn een dynamische stijlgids op te zetten waarin de veranderingen voortdurend worden vastgelegd.

Een groot voordeel van een ‘levende’ digitale stijlgids is dat elke wijziging direct kan worden doorgevoerd en toegepast, waardoor overal en realtime 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 ‘levende’ digitale Styleguide 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.

Poor Man’s Styleguide

Op deze manier wordt de digitale stijlgids een nuttige tool die daadwerkelijk (zowel intern als extern) zal worden gebruikt.


1. Typografie


Er worden 2 lettertype families gebruikt in deze website, voor broodtekst is dat het Verb lettertype (light, regular and semibold en in de stylen normaal en schuingedrukt). De super leesbare letters van deze schreefloze super familie Verb is ontworpen door Ryan Martinson.

Voor de Kopteksten (Headings) wordt het lettertype Aleo gebruikt, een gratis lettertype ontworpen door Łukasz Dziedzic in 3 verschillende diktes (light, regular en bold) en in 2 stylen.

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 u in de website gebruikt krijgt een standaard opmaak zonder dat u daar zelf iets aan hoeft te doen. Maar door gebruik te maken van bepaalde standaard elementen en attributen kunt u de inhoud van uw pagina op maat stylen in CSS.

Hieronder ziet u 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 big 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 u tabulaire data, of in het Engels ‘tabular data’ in een webpagina wilt verwerken móet u daar een tabel (<table></table>) voor gebruiken. Voor het weergeven van simpele tabellen heb ik voor de responsive aanpak gekozen vergelijkbaar met de Codepen ‘Responsive Table’ van Geoff Yuen.

Table Header 1Table Header 2Table Header 3A Bit Longer Table Header 4
Division 1Division 2Division 3Division 4
Division 1Division 2Division 3Division 4
Division 1Division 2Division 3Division 4
Division 1Division 2Division 3Division 4
Responsive Table

4. Formulier Elementen


Hieronder volgen alle formulieren die vooraf zijn gestyled.

The Fieldset:

Legend




Radio 1
Radio 2
Radio 3


Radio 1
Radio 2
Radio 3



HTML5-specific Form Elements








5. Ingesloten Media


a. Afbeeldingen inclusief Captions

hou-t-simpel

Onderschrift bij full-width afbeeldingen

Links uitgelijnde afbeelding met caption

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.

Rechts uitgelijnde afbeelding met caption

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.

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 uw tekst op te maken. Hieronder ziet u extra knoppen, en daarmee extra functionaliteit, die ik heb toegevoegd aan dit WordPress thema.

a. Externe of Interne Link  en Download Buttons

gonzoblog ionicons

b. Citaat, Aantekening en Gebeurtenis Block

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.
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.
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.

c. Responsive Video

d. Dropdown Menu

Lorem ipsum

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.

e. Tabbladen

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.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

f. Responsive Kolommen (2 stuks)

  • 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.
  • 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.

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 uw bedrijf belangrijk zijn, zoals bestaande klanten, prospects, toeleveranciers en potentiële werknemers.

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

Auteur: Jan Rajtoral

Jan - AKA Gonzo the Great - Rajtoral is een ervaren grafische en web designer, gespecialiseerd in (front-end) Responsive Web Design, WordPress Ontwikkeling, Logo en Huisstijl ontwerp.

Nog Geen Reacties

Laat een Reactie achter


*) Verplichte velden.

Meest Recent Project

gonzocons 2.0 (Demo Site)

Colofon