Skip to content
This repository was archived by the owner on Jul 16, 2024. It is now read-only.

assignment-2.md

Latest commit

 

History

History
75 lines (62 loc) · 3.13 KB

assignment-2.md

File metadata and controls

75 lines (62 loc) · 3.13 KB

Opdrachtomschrijving - Onderdeel #2

Omschrijving

Voor het nieuwe streaming platform Rythm maak je een Design System volgens de Atomic Design principes van Brad Frost. Je maakt binnen Sketch gebruik van Shared Styles, Text Styles, Symbols (overrides), Sketch Libraties en het Design with Data principe. Je .Sketch file is gereed voor Developer Hand-Off. Je file is volgens de juiste principes georganiseerd / opgeruimd. Al je losse componenten en assets zijn te vinden in een Sketch library.

Leerdoelen

Subleerdoel: Responsive pattern binnen sketch weten te gebruiken.
Subleerdoel: Componenten in de vorm van symbols en text styles opstellen.
Subleerdoel: Verhouding en ratio kunnen toepassen in een interface.
Subleerdoel: Sketch file georganiseerd houden en klaar maken voor developer hand-off.
Subleerdoel: Eventuele assets kunnen exporteren.

Beoordeling

Onderdeel #2.1 - Design System

Aan voorwaarden voldaan:

  • Sketch library staat in een Repo
  • Gebruik gemaakt van Symbols (reusable elements)
  • Gebruik gemaakt van Shared styles & Text styles (conform code)
  • Gekozen voor een naming convention (css?)
  • Fonts & Colors zijn gedefinieerd
  • Componenten zijn responsive
  • Componenten hebben meerdere states (met symbol overrides)
  • Styleguide is overzichtelijk en developer friendly

Ophoging ten behoeve van creativiteit:

  • Interessante toevoegingen aan styleguide (extra elementen)
  • Er is een styleguide toegevoegd aan de Asset library

Onderdeel #2.2 - User Interface

Aan voorwaarden voldaan:

  • Minimaal 3 schermen met meerdere states
  • Alignment is correct gebruikt, correcte margins en padding
  • Ratio tussen element is correct
  • Goed toegepast Type Scale
  • Design with data principe is toegepast
  • Correct kleurgebruik, primary en secondary (accent) colors kloppen
  • Sketch file is clean

Ophoging ten behoeve van creativiteit:

  • Origineel concept (interessante interface elementen)

Onderdeel #2.3 - Developer handoff

Aan voorwaarden voldaan:

  • Juiste layers zijn exportable
  • Er is gebruik gemaakt van Slices
  • De repo bevat een export folder met de juiste handoff

Ophoging ten behoeve van creativiteit:

  • CSS export en code snippets

Onderdeel #2.4 - Mockup

Aan voorwaarden voldaan:

  • Interface mockup op correcte devices
  • Geen anti aliasing
  • Interface in juiste verhouding op device (geen skew)

Ophoging ten behoeve van creativiteit:

  • Toevoegingen aan mockup (presentatie, perspective)

Inleveren

Je levert je eindresultaat en de tussenopdrachten in op de volgende manier:

  1. Naam van het bestand: Voornaam_Achternaam_Studentnummer_OnderdeelX_User-Interface
  2. Bestandsformaat: Je levert je .sketch file in.
  3. Je Sketch pages deel op de volgende manier:
    • Tussenopdracht_A: Design System Research
    • Tussenopdracht_B: Button to symbols
    • Inspiratie_Onderdeel_#2: Afbeeldingen / Moodboard etc.
    • Onderdeel_#2.1: Eindresultaat interface + eventuele versies
    • Onderdeel_#2.2: Eindresultaat pattern library + eventuele versies
    • Onderdeel_#2.3: Eindresultaat asset export (in GitHub repo)
    • Onderdeel_#2.4: Eindresultaat mockups
    • Link naar je GitHub Repo