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:
- Naam van het bestand: Voornaam_Achternaam_Studentnummer_OnderdeelX_User-Interface
- Bestandsformaat: Je levert je .sketch file in.
- 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