UI Design

# Vorm

Webdesign is de combinatie van:

  • Grafisch ontwerp (Eng. Graphic Design)
  • Gebruikersinterfaceontwerp (Eng. UI Design)

Citaat

“Most people make the mistake of thinking design is what it looks like. […] ‘Make it look good!’ That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.”
– Steve Jobs[1] (CEO Apple Computer, Inc.)

Ontwerp ook de inhoud en plaats de gebruiker centraal (User-Centric Design).

# Grafisch ontwerp

# Werkdocumenten

In webdesign vertrekt grafisch ontwerp van deze documenten uit het stappenplan:

  • Moodboard
  • Style Tiles
  • Style Guide

# Welke grafische elementen plaatsen we op het scherm?

  • Logo / Identity

  • Typografie

  • Kleur

  • Navigatie

  • Knoppen / Buttons

  • Iconen

  • Foto’s / video’s

  • Grafieken

  • Tabellen

  • Lijsten

# Gebruikersinterfaceontwerp

# Werkdocumenten

Het UI Design van webdesign komt tot stand met behulp van deze documenten uit het stappenplan:

  • Wireframes
  • Wireflow

# Plaatsing van inhoudelijke en functionele elementen

Hoe en waar plaatsen we de (visuele[2]) inhoudelijke en functionele elementen?

Inhoudelijke elementen:

  • Labels van de navigatie(s)
  • Inhoud van de pagina: tekst en beeld.

Functionele elementen:

  • Navigatie(s).
  • CTA’s (Call to Action).

Tip

Hoe beter de wireframes of wireflow, hoe beter het eindresultaat!

Job/fuctie: Grafisch Ontwerper, Interfaceontwerper, Webdesigner, Application Designer, Usability Engineer
Stappen: Analyse, Moodboard, Style Tiles, Visual Designs, Style Guide

# Webdesignen in een notendop

  • Documentatie klaar en goedgekeurd?
  • Software:
  • Gebruik een grid (kolommensysteem).
  • Dit zorgt voor een consistent tempo doorheen de verschillende pagina’s.
  • Breng een verhaal. Content is king!
  • Let op de leesbaarheid.
  • Ontwerp verschillende typepagina’s (in deze volgorde!):
    1. Gewone (tekst)pagina’s
    2. Pagina’s met specifieke functies
      Fotogalerij, contactformulier, bestelformulier …
    3. Homepagina

Mobile First

Mobile First is beginnen met het ontwerpen voor een klein scherm en daarna aanpassingen maken voor grotere schermen.

Mobile First is in de meeste gevallen een betere keuze dan Desktop First, omdat het als ontwerper makkelijker is om dingen toe te voegen dan weg te halen en ook omdat er meer via smartphone of tablet gesurft wordt. Voor sommige toepassingen is er geen nood aan een mobiele versie en dan kies je uiteraard voor Desktop First.

Desktop First

Desktop First is beginnen met het ontwerpen voor een groter scherm en daarna aanpassingen maken voor kleinere schermen.

# Responsive Web Design

Responsive Web Design

Responsive Web Design (RWD) zorgt ervoor dat een webpagina zich aanpast afhankelijk van de beeldresolutie en de mogelijkheden (bijv. swipe bij Touch User Interface) van het toestel.

ux

# Responsive Design-modus

Om een website eenvoudig op verschillende schermresoluties te bekijken heeft Firefox, Chrome en Safari een Responsive Design-modus.

# Details! Details! Details!

# Inspiratie

Soorten websites:

  • Experience
  • Puur informatief
  • Commercieel
  • E-commerce / webwinkel
  • Webapplicatie
  • SPA

Opmerking

Alle basistypes kunnen gecombineerd worden!

# Experience

  • Het bezoek draait rond het creëren van een ervaring.
  • Een experience website brengt een zeer specifieke boodschap of zeer specifiek verhaal over.
  • Sterke focus op:
    • Technologie (demonstratie van wat technisch mogelijk is).
    • IxD
  • De levensduur van een experience website is meestal kort en er zijn weinig terugkerende bezoekers.
  • Ook vaak gebruikt voor reclame- of sensibiliseringscampagnes.
# Voorbeelden 📦

# Puur informatief

# Persoonlijke websites

Stelt een individu voor, meestal ondernemers, politici, celebrity’s en andere creatievelingen. Dit soort websites komt minder voor, doordat blogs en sociale media-pagina’s deze rol overnemen

# Voorbeelden 📦

# Overheids-, organisatie- en projectwebsites.

  • Algemene informatie digitaal ontsluiten.
  • Weinig CTA’s.
  • Sterke focus op gebruiksgemak en snelheid.
  • IA is superbelangrijk!
  • Aandacht voor toegankelijkheid is wettelijk verplicht (behalen van een AnySurfer label (opens new window)).
# Voorbeelden 📦

# Commercieel

  • Een commerciële website moet bedrijfsinformatie aanbieden aan klanten, journalisten en/of investeerders.
  • In veel gevallen is het doel vooral “aanwezig zijn”.
  • Communiceren over diensten en/of producten.
  • Ondersteunende functie.
  • Veelal aangevuld door sociale media.
  • SEO is hier heel belangrijk.
# Voorbeelden 📦

# E-commerce / webwinkel

  • Uitbreiden verkoopactiviteiten.
  • Soms zelfs enige verkoopkanaal.
  • Bestaande commerciële websites kunnen door kleine ingrepen en bestaande services (bijv. PayPal (opens new window)) uitgebreid worden.
  • Focus op gebruiksvriendelijkheid, snel vinden van het product en oproep tot actie (CTA).
  • Focus op veiligheid en vertrouwen.
  • Houd rekening met de wetgeving!
  • Soms deel van een disruptief business model of zelfs disruptieve technologie doordat het breekt met de bestaande markt of bestaande manier van werken.

Call to Action

Een Call to Action (CTA) is een (eenvoudige) instructie die je doelpubliek aanzet tot een specifieke handeling.

Voorbeelden van een specifieke handeling zijn het bestellen van het product, het bellen van een telefoonnummer of het downloaden van een white paper. De CTA is dan bijvoorbeeld: ‘Call now’, ‘Koop nu’, ‘Schrijf je vandaag in’ …

Voorbeelden 📦

# Webapplicatie (Web App)

::: tip

# Definitie ⭐️

Een webapplicatie is een online softwaretoepassing die werkt in een browser. :::

The sky is the limit! (lees: budget)

Voorbeelden 📦

# Single Page Application (SPA)

  • De SPA brengt alle informatie op één enkele webpagina.
  • Lang en hoog (en/of breed).
  • Story Telling is hier belangrijk, want er wordt een lineair verhaal verteld.
  • De informatie wordt meestal eenmalig ingeladen.
  • Het ontwerp moet de gebruiker aanzetten tot scrollen.
  • Teasend effect.
  • Dynamiek op het scherm.
  • Tijdens het ontwerpproces wordt er veel energie in visueel ontwerp en IxD gestoken.

Voorbeelden 📦

Tip

  1. Jobs, S. (2003, November). The Guts of a New Machine (opens new window). The New York Times Magazine. ↩︎

  2. Een niet-visueel inhoudelijk element is bijvoorbeeld een audiofragment, een niet-visueel functioneel element is bijvoorbeeld een navigatie-element dat werkt via swipen. ↩︎

Inhoud UX - Gedrag
© 2022 Arteveldehogeschool Laatst bijgewerkt: 7/1/2021 14:59:29