Skip to content

WyroneBlue/frontend-development

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

94 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

frontend-development

Wie zijn wij?

Dit project is gemaakt door Ymaro Blue en Sven Zoutman.



Onze Case

Wij hebben gekozen voor de 'Webshop' frontend overview page.



Ons Eindproduct

In ons eindproduct zijn de volgende onderdelen terug te vinden:

  1. 12 verschillende producten op overview pagina
  2. Filter
  3. Toevoegen aan winkelmandje

De 4 UI Principles

  1. Keep secondary actions secondary
  2. Provide a natural next step
  3. Appearance follows behaviour
  4. Consistency matters


De UI Principles

In ons eindproduct zijn een aantal UI Principles verwerkt.

Principle 1 | Keep secundary actions secondary

Houd secundaire acties secundair door ze visueel lichter te maken of laat ze pas zien nadat de primaire actie is uitgevoerd.

De gebruiker ziet alleen belangrijke handelingen zoals de kleur en maat kiezen en in het winkelmandje stoppen. De overige dingen staan allemaal in de header of in de footer.

MicrosoftTeams-image


Principle 2 | Provide a natural next step

Laat een persoon niet hangen nadat ze hebben gedaan wat je wilt. Geef ze een natuurlijke volgende stap die ze helpt hun verdere doelen te bereiken.

De gebruiker kan zien dat je verder kan scrollen omdat je een deel van het volgende product ziet.

MicrosoftTeams-image (1)


Principle 3 | Appearance follows behaviour

Vorm volgt functie. In de praktijk betekent dit dat iemand moet kunnen voorspellen hoe een interface-element werkt door er alleen maar naar te kijken.

Als de gebruiker naar de filter kijkt snapt die gelijk hoe die werkt. Je kiest een kleur, prijs of categorie en alleen de producten met die eigenschappen krijg je te zien.

Screenshot 2021-05-07 at 12 39 09


Principle 4 | Consistency matters

Volgens het vorige principe zouden schermelementen niet consistent met elkaar moeten lijken, tenzij ze zich consistent met elkaar gedragen. Dit betekent ook dat je elementen die niks met elkaar te maken hebben er ook anders uit laat zien.

MicrosoftTeams-image (1)



About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published