arexank/look-and-feel-living-styleguide

Maak een living styleguide voor een opdrachtgever

look-and-feel-living-styleguide's Issues

Op de layoutpagina staan wat spelfouten.

oba = Oba
Sneler = sneller

Afbeeldingen hebben geen alt

Titel naam veranderen?

look-and-feel-living-styleguide/pages/kleur.html

Line 9 in 31e7170

<title>Document</title>

Code review - Responsive

Op sommige plekken is de site niet responsive, bijvoorbeeld op de image pagina worden de foto's afgesneden

Code review - Typografie

Op veel plekken op de website wordt niet de juiste font gebruikt, alleen op de typografie pagina, terwijl je juist op de hele styleguide wil zien wat voor font er wordt gebruikt.

Code review - Stijl

De styleguide is niet helemaal dezelfde stijl als de OBA, zie bijvoorbeeld de witte achtergrond, de rode headings (typografie pagina), rode kleur hover op bijv. navigatie items.

Background-color -> Kleuren

Misschien een andere background-color.

De tekst is nu lastig te lezen.

Pagina 'kleuren' niet duidelijk

Het is niet in 1x duidelijk welke kleur bij welk stukje tekst hoort.

twee scrollbars

Je hebt twee scrollbars ipv een.

Afbeelding is niet scherp en is weinig informatie

^

Feedback Team Vini Mini

Typografie:

Top: Pagina is mooi overzichtelijk! Mooi onder elkaar. Goed gedaan!
Tip: Voorbeeld letters netjes naast elkaar, zoals onderaan de pagina.

Kleur:

Top: Pagina is mooi overzichtelijk! Mooi onder elkaar. Goed gedaan!

Icons & Buttons:

Top: Pagina is mooi overzichtelijk! Mooi onder elkaar. Goed gedaan!

Tip: bij de button size aangeven welke grootte ( media query).

Lay-out & Imagery:

Tip: Gebruik afbeeldingen die niet misvormd zijn.

Navigation & Interaction

Tip: De tekst wat groter maken.
Tip: Meer overzicht creëren.

Algemeen:

Tip: alle pagina's hetzelfde lettertype geven.

Titel naam veranderen?

look-and-feel-living-styleguide/pages/layout-imagery.html

Line 9 in 31e7170

<title>Document</title>

Afbeelding is stretched

de eerste afbeelding van layout pagina is stretched.

Sneler moet sneller zijn :D

look-and-feel-living-styleguide/pages/layout-imagery.html

Line 35 in 31e7170

overbrengen waar het overgaat. Dit is omdat illustraties en afbeeldingen sneler een boodschap doorgeven aan de user.

Layout & Imagery

Goede keuze om wat woorden in het rood te zetten zodat je wat sneller door het document kan gaan als je bepaalde dingen zoekt & het past bij de huiststijl van de OBA, wat ook misschien handig zou zijn als je bijvoorbeeld wat voorbeeld code geeft bij flexbox of iets zodat er wat meer info over is.

Imagery is ook erg duidelijk en word een goed voorbeeld gebruikt.

secties maken bij onderdeel -> Typografie

Ik zie een scheiding gemaakt met een <hr> tag.
Misschien visueel meer onderscheid maken door middel van secties of articles.
Mogelijk gebruik maken van een border bij deze secties of articles

ruimte in de nav

In jullie nav is geen ruimte links van de tekst. Als dit opzettelijk is oke maar, het is lekker om te lezen en ik raad aan om het een margin left te geven.

wat doet jullie iframe?

Het lijk alsof jullie een website willen inladen via iframe. Maar onder de iframe bouwen jullie de code zelf.

Ik heb ook gebruik gemaakt van een iframe en deze ziet er ander uit als code structuur. Ik vraag de pagina op en doe mijn styling achter de code in plaats van css.

Slecht kleurcontrast in dark-mode bij 'kleur'

In de dark mode van de pagina 'kleur' is het contrast tussen de tekstkleur en de achtergrond kleur niet goed.

Mis logo

Mis informatie over logo gebruik.

Pagina 'icons&buttons' dropdown menu

De dropdown button sluit alleen als je weer op de button zelf klikt. Overweeg om het dropdown menu ook te laten verdwijnen als je ernaast klikt.

je plaatsen een html en body in een body.

Jullie plaatsen een html en body in een body. Dit zal ik niet zo doen.

De opbouw struktuur van code is:

je kan ook div, section, articel, enz gebruiken met een class name voor styling