Inhoud
1. Waaruit bestaat een functioneel ontwerp? Terugblik.
2. Wat is een styleboard?
3. Wat is het verschil tussen een style tile en een styleboard?
4 Wat is user interface design?(UI)
5. Voor wie maak je een styleboard?
6. Opdracht: Studievragen 
7. Opdracht: styleboard? maken 
8. Voorbeelden

Richard Slakhorst

---

1. Waaruit bestaat een functioneel ontwerp? Terugblik

A. Het is een methode om een aankoopproces of een dienst vanuit het perspectief van de klant te visualiseren.
B. Het beschrijft de ervaringen van een klant gedurende de reis die een klant maakt om zich te oriënteren, of een product of dienst aan te schaffen en beschrijft voor de rest alle functionaliteiten van de web-app-webshop.
C. Het ene functioneel ontwerp (FO) is uitgebreider dan het andere. Het verschilt namelijk per type opdracht wat er in het functioneel ontwerp (FO) moet komen. Daarom is er niet maar één juist format voor een functioneel ontwerp (FO).

Wel bestaat een functioneel ontwerp (FO) meestal ten minste uit de volgende elementen:
1. Doelgroeponderzoek
2. Doelen van de website voor gebruikers en de onderneming (User Story’s)
3. Structuur van website (flowchart)
4. Uitwerking functionaliteiten per pagina gedetailleerd (Wireframes)
5. Input voor design en techniek (Basis styleboard)
6. Interaction ideeën (interaction design) (interactive mockups?) (Prototype)

---

---

2. Wat is een styleboard?

Bij het ontwerpen van een site of app is het niet handig om scherm voor scherm een visueel ontwerp te maken. In een styleboard laat je de ontwerprichtlijnen zien die je gaat gebruiken voor een site of app. Zeg maar een soort huisstijlboekje +. Elke pagina is opgebouwd als een soort blokkendoos uit een vast aantal terugkerende stijlelementen/ html-elementen. Met deze elementen kun je in de 2e fase van je ontwerpproces de verschillende pagina’s samenstellen en ontwerpen. Daarvoor hebt je dus ontwerprichtlijnen nodig.

Wat laat je minimaal in de huisstijl styleboard zien?
1-Alle basiskleuren: (hexadecimale waarde)(Html)( kleurcode #CC4478)
2-Visuals: Logo <img>
3-Visuals: foto’s, <img> (kleur zweem)(vorm)
4-Visuals: <img> texturen en patronen

5-Kop1: <h1><h2>><h3>(Naam Typografie) <(grootte)>
6-kop 2: <h1><h2>><h3>(Naam Typografie) <(grootte)>
7-kop 3: <h1><h2>><h3>(Naam Typografie) <(grootte)>
8-Tekst -Paragraaf/ platte tekst <p>

Interface design (UI)

9-Navigatie: <menu> (kleur) 
10-Navigatie: <menu> <mouseover<active><hover>
11-Navigatie: <menu> <mouseover click>

12-Knoppen :<button> vorm (kleur) <Border-radius>
13-Knoppen: <mouseover> <Border-radius><active><hover>
14-Knoppen: <mouseover click><Border-radius>

15-Links: (actief, hover) <a>
16- Opsommingen: <ul> <ol>
17- Vormen: >Elements<

---

3. Wat is het verschil tussen een style tile en een styleboard?

Bij het ontwikkelen van een website of app begin je ook met het ontwikkelen van een visuele huisstijl. Deze elementen leg je traditioneel gezien vast in een huisstijl-styleboard waarin je de ontwerprichtlijnen vastlegt, meestal in eerste instantie voor papier. Bij het ontwerpen voor interactieve media, websites en apps ga je ook aan de slag met Interface design.

Het styleboard en de style tile liggen in elkaars verlengde. Een moderne mediavormgever is ook in staat om een interface design te ontwerpen voor interactieve media zoals een website en apps.

---

4 Wat is user interface design? (UI)

De User Interface (UI) is de gebruikersomgeving van software. Het is de voorkant van een website of app. Wanneer je naar een website navigeert of een mobiele app opstart is alles wat je ziet de User interface (UI).. De gebruikersinterface maakt interactie tussen mens en machine mogelijk.

Waarom is een goede UI belangrijk?
Een goede User Interface maakt onderdeel uit van een goede User Experience. Door de UI aantrekkelijk en gebruiksvriendelijk te maken zorg je voor een betere ervaring voor jouw gebruikers. Websitebezoekers hebben bijvoorbeeld niet veel geduld op het internet. Ze willen meteen kunnen vinden wat ze zoeken en hun zaken afhandelen. Door een duidelijke en gestructureerde User Interface te hebben kun je jouw bezoekers tevreden stellen en hun vertrouwen winnen.

Vergeet niet: User interface (UI)-elementen zijn de diverse visuele elementen op jouw website of app waar de gebruiker interactie mee heeft. Zorg dus ook dat jouw keuzes niet alleen gebaseerd zijn op smaak, vorm en merkwaarden, maar ook op gebruikersbehoeften, gebruikersvriendelijkheid en een interessante interaction design en navigation design.

Kijk nog even naar het plaatje “Fundamentals User experience design”. Je ziet dat “navigation design” en “interaction design” in elkaar verstrengeld zijn, dus bijvoorbeeld een knop op een website heeft naast de vorm en de kleur ook een interactie (interaction design) Met een interactieve knop kunt ook navigeren door de site, de knop brengt je naar de plek op de website waar jij naar toe wil (navigation design).dus in een knop zitten dus verschillende laagjes design.
-Visual design
-Interaction design
-Navigation design
Deze 3 laagje samen noemen dan de User interface (UI) of gebruikersinterface.

Voorbeeld Interface

---

---

5. Voor wie maak je een styleboard?

• Jezelf
• Voor andere visueel ontwerpers
• Back-end Developers
• Front-end Developers:
• Voor de gebruikers
• Voor de klant
  Met deze mensen werk je straks samen voor een succesvol project.

---

---

6. Opdracht 16: Studievragen 

---

---

7. Opdracht 17: Style tile maken 

8. Voorbeelden

Voorbeeld 1

Voorbeeld 2

---