Logo

[wartburggraaf]

We willen graag meer leren over de Logo component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?

Deel hieronder een link naar Figma, Storybook of screenshots. Met deze informatie kunnen we bewijzen dat het component onderdeel moet worden van de NL Design System component library.

Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag!

Link naar bericht in Slack

---

Naam

Logo

Doel

Afbeelding met het beeldmerk of woordmerk van de organisatie.

Onderzoek

Website Logo Placement for Maximum Brand Recall - NN Group
In dit artikel wordt beschreven dat gebruikers logo's die traditioneel linksboven staan ​​89% beter onthouden dan logo's die rechtsboven staan.

Centered Logos Hurt Website Navigation - NN Group
In dit artikel wordt beschreven dat gebruikers ongeveer 6 keer lastiger naar de homepage navigeren als het Logo in het midden van de pagina staat, vergeleken met wanneer het in de linkerbovenhoek staat.

Logo Placement Affects Web Navigation and Brand Recall - NN Group
In deze video worden bovenstaande artikelen samengevat.

Homepage Links Remain a Necessity - NN Group
In dit artikel wordt beschreven dat het nog steeds nodig is om logo's naar de homepage te laten linken (behalve op de homepage zelf). En dat naast het Logo het expliciet aanbieden van een Link 'Home' verstandig is. Deze Link zou onderdeel kunnen zijn van de Main Navigation of de Breadcrumb.

A link on a logo in the header, what should the alt-text be? - HTMHell
Rian Rietveld beschrijft op welke manier je een Logo in de Page Header moet linken aan de Homepage.

Richtlijnen

Contrast (Minimum) (Level AA)
In deze richtlijn staat aangegeven dat tekst in logo's zich niet aan deze richtlijn hoeft te houden.

Non-text Contrast (Level AA)
In deze richtlijn staat aangegeven dat het beeldmerk in logo's zich niet aan deze richtlijn hoeft te houden.

[jeffreylauwers]

Amsterdam

• Storybook
• Figma
• Github

---

Screenshots / Varianten

Storybook

Default

GGD Amsterdam

Stadsarchief

Stadsbank van Lening

VGA Verzekeringen

Museum Weesp

---

Notities

• Documentatie beschikbaar (Storybook)
• Er worden verschillende verplichtingen genoemd die voor alle logo's gelden:
  • Het logo wordt altijd getoond.
  • Het logo staat links uitgelijnd in de header.
  • Het logo linkt naar de homepage van de website of applicatie.
  • Het logo heeft altijd een hoogte van 40 pixels.

Implementatie (Storybook) is een svg binnen een <a> met een visueel verborgen <span> met de tekst 'Ga naar de homepage'.

<a href="/" class="ams-header__logo-link">
  <span class="ams-visually-hidden">
    Ga naar de homepage
  </span>
  <svg class="ams-logo" aria-hidden="true" focusable="false" viewBox="0 0 115 40" xmlns="http://www.w3.org/2000/svg">
    svg code
  </svg>
</a>

[jeffreylauwers]

Den Haag

• Storybook - binnen Page Header
• Figma
• Github - Header logo

---

Screenshots / Varianten

Storybook - binnen Page Header

Figma

Den Haag logo variaties

MijnDenHaag logo variaties

---

Notities

Implementatie (Storybook) is een svg binnen een <a> met een arial-label 'Gemeente Den Haag'.

<div class="denhaag-header__logo">
  <a class="denhaag-logo denhaag-header__link" href="https://www.denhaag.nl" aria-label="Gemeente Den Haag">
    <svg class="denhaag-header__logo" xmlns="http://www.w3.org/2000/svg" width="153" height="48" viewBox="0 0 153 48" fill="none">
    svg code...
    </svg>
  </a>
</div>

[jeffreylauwers]

DSO

Storybook

---

Screenshots / Varianten

Storybook

Default

With Label

With (Beta) Ribbon

With Label and Ribbon

---

Notities

• Documentatie beschikbaar (Storybook)
• Mogelijkheid om Label en Ribbon toe te voegen.
• Responsive gedrag wordt beschreven.
• Toegankelijkheid: Er wordt aangegeven als er een label en/of een ribbon wordt toegevoegd, deze op het component wordt gezet met een aria-label.

[jeffreylauwers]

DSO

Documentatie website - binnen Header

---

Screenshots / Varianten

Documentatie website

Default

Ministerie van Onderwijs, Cultuur en Wetenschap

College voor Toetsen en Examens

Education Executive Agency
(Engelse variant van het DUO logo)

---

Notities

• Als onderdeel van Header component.
• In de documentatie wordt aangegeven dat als de gebruiker op het logo klikt, deze wordt verwezen naar de hoofdpagina van de website.
• Over toegankelijkheid wordt het volgende geschreven:

Voor de toegankelijkheid van de link met het logo is het niet voldoende om alleen een title op te nemen, omdat screenreaders dat niet altijd goed verwerken. Neem daarom naast de title ook altijd een tekst in de link op.

Omdat we die tekst niet zichtbaar willen hebben, maar deze er alleen voor screenreaders is, krijgt deze de class screenreader-only . Natuurlijk moet de link tekst een duidelijke beschrijving bevatten.

Implementatie bestaat uit meerdere <span> elementen binnen een <a> met een title 'Logo Dienst Uitvoering Onderwijs'. De eerste 3 <span> elementen zorgen voor het beeldmerk, de medium en small tekst. Allen als svg bestand. De 4e <span> bevast de visueel verborgen tekst 'Dienst Uitvoering Onderwijs Ministerie van Onderwijs, Cultuur en Wetenschap logo. Naar de homepagina'.

<a data-v-7fb6ff2a="" href="#/" class="" title="Logo Dienst Uitvoering Onderwijs">
  <span data-v-7fb6ff2a="" class="header-logo__brand">
    <svg data-v-7fb6ff2a="" class="svg-beeldmerk" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 57.6 100.9">
      scg code...
    </svg>
  </span>
  <span data-v-7fb6ff2a="" class="header-logo__text header-logo__text--medium">
    <svg data-v-7fb6ff2a="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 221.79 58.6">
      svg code...
    </svg>
  </span>
  <span data-v-7fb6ff2a="" class="header-logo__text header-logo__text--small">
    <svg data-v-7fb6ff2a="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 114.66 31.23">
      svg code...
    </svg>
  </span>
  <span data-v-7fb6ff2a="" class="screenreader-only">
    Dienst Uitvoering Onderwijs Ministerie van Onderwijs, Cultuur en Wetenschap logo. Naar de homepagina
  </span>
</a>

[jeffreylauwers]

OpenGemeenten

OpenGemeenten heeft als leverancier te maken met verschillende logo's. We zijn nu uitgegegaan van het logo dat gebruikt worden binnen de voorbeeld website.

• Voorbeeld website lenteveld.nl
• Patternlab

---

Screenshots / Varianten

Voorbeeld website - binnen Page Header

Patternlab

---

Notities

Implementatie bestaat uit een <a> met daarbinnen een <picture> element. Binnen het <picture> zijn er 2 <source> elementen en 1 <img> element. Allen verwijzen naar een svg bestand. Het <img> heeft een alt tag met de tekst 'Logo Home'.

<a class="page-header__logo" title="Naar homepage" href="1">
  <picture>
    <source srcset="pad naar svg..." media="(max-width: 29.999rem)">
    <source srcset="pad naar svg..." media="(min-width: 30rem)">
    <img src="pad naar svg..." alt="Logo Home">
  </picture>
</a>

[jeffreylauwers]

Rotterdam

• Storybook
• Figma
• Github

---

Screenshots / Varianten

Storybook

Base logo
The base logo is formed by the mark and the word mark, executed in landscape mode. If there’s enough space use the base logotype.

Square logo
If there isn’t enough space to use the base logo you’re allowed to use the ‘Square logo’.

Mark
For smaller displays you could use only the mark of Gemeente Rotterdam. Be sure to use the base logo in the footer on the web page or somewhere within the app (splash screen for example).

Avatars & favicons
For use in avatars & favicons the element that represents ‘water’ in the mark is removed. This leaves the distinct ‘R’.

---

Notities

• Verschillende varianten beschikbaar.
• Implementatie zoals toegepast voor 'Mijn loket template'. <a> met aria-label 'homepage'. Binnen de <a> zit een webcomponent met aria-label 'logo gemeente Rotterdam'.

<a href="#" class="utrecht-link utrecht-link--html-a utrecht-link--box-content" aria-label="homepage">
   <rods-logo-image aria-label="logo gemeente Rotterdam" role="img" class="example-page-header__logo hydrated">
   </rods-logo-image>
</a>

[jeffreylauwers]

RVO

• Documentatie website
• Storybook
• Figma
• Github

---

Screenshots / Varianten

Storybook

Default

Alternatieve tekst

---

Notities

In Storybook de mogelijkheid om de 'title' en 'subtitle' zelf in te vullen 🤩

Implementatie zoals toegepast op Content template. Een <a> met daarbinnen een <div>. Binnen deze <div> zitten 2 <div>'s. De eerste <div> zorgt voor het beeldmerk (svg). De 2e <div> groepeert de 'title' en optionele 'subtitle'. Zowel 'title' en 'subtitle' zijn een <p> element.

<a href="#" class="rvo-header__logo-link rvo-link rvo-link--no-underline">
  <div class="rvo-logo rvo-header__logo-img">
    <div class="rvo-logo__emblem">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -12 44 88">
        svg code...
      </svg>
    </div>
    <div class="rvo-logo__wordmark">
      <p class="rvo-logo__title">
        Rijksdienst voor Ondernemend Nederland
      </p>
    </div>
  </div>
</a>

[jeffreylauwers]

Logo

• Storybook - Logo
• Storybook - CSS implementatie
• Figma
• Github

---

Screenshots / Varianten

Storybook - Logo

Normaal
Het normale logo in het rood met geel. Gebruik voor desktop webapplicaties en e-mail handtekeningen met donkere achtergrond. Dit logo is het meest herkenbaar en straalt vertrouwen uit.

Normaal zonder balk
Het normale logo in het rood zonder balk. Gebruik voor desktop webapplicaties waar de achtergrond in conflict is met de gele kleur van de balk.

Medium
Kleiner formaat van het logo voor gebruik van apps of andere mobiele applicaties.

Klein
Basic klein formaat van het logo van de Gemeente Utrecht, voor gebruik van avatar of mobiele oplossingen waar ruimte gebrek kan onstaan.

Favicon
Gebruiken als favicon.

---

Notities

Uitgebreide documentatie beschikbaar (Storybook - CSS implementatie)

Implementatie zoals beschreven in de documentatie wanneer het logo linkt naar de homepage. Een <a> met als aria-label 'Homepage'. Binnen de <a> een <img>. Deze <img> verwijst naar een svg bestand en heeft de alt tekst 'logo Gemeente Utrecht'.

<a href="/" aria-label="Homepage" rel="home">
  <img src="logo.svg" alt="logo Gemeente Utrecht" height="100" width="150" />
</a>