Figma account aanmaken
Als je nog geen pro-account bij Figma hebt volg je eerst onderstaande stappen.
Stappenplan voor aanmelden Figma education-account (gratis)
Instructievideo Figma
Hiernaast vind je een Figma instructievideo voor beginners op Youtube van Rino de Boer. Je leert om een webpagina te ontwerpen met de prototype software Figma. Hiermee maak je prototypes voor websites en apps.
Opdracht: Prototype single product site
Je gaat een ontwerp maken in Figma van de webshop van jouw Single Product. Je mag hierbij de wireframes hiernaast gebruiken. Dan weet je wat er allemaal in moet en waar het ongeveer kan komen. Je mag natuurlijk volgordes en maten zelf bedenken. Maak er een mooie site van in de huisstijl die je maakt bij Vormgeving. Je gebruikt je monogram als logo en de kleuren van jouw huisstijl.
Stap 0: Project aanmaken
Stap 1: Startpagina namaken
Volg de instructievideo hierboven en doe deze na.
Je krijgt dan nog niet je eigen design, maar dat komt later.
Doe ook het volgende:
- Gebruik als afbeeldingen de afbeeldingen van jouw Single Product. Gebruik voor de header een sfeerfoto, en voor het product in het midden een productfoto.
- Gebruik dummy-afbeeldingen als je nog geen eigen product- en sfeerfoto’s hebt. Vervang je dummy afbeeldingen als je de product- en sfeerfoto’s hebt gemaakt en bewerkt.
- Gebruik ‘auto lay-out‘ waar kan.
- Gebruik ‘compontents‘ waar kan. Alles wat meerdere keren voorkomt kan een component zijn. Dus ook je hele header, footer, buttons, etc.
- Maak een kleurenpallet in Figma, zodat je overal de zelfde kleuren gebruikt. Als je je huisstijl kleuren al weet gebruik je die. Weet je die pas over een paar weken? Dan kan je dat heel snel aanpassen.
- Bovenin de pagina staat een menu. Maak een menu met
- OVER Single Product,
- CONTACT en
- WINKELWAGEN.
- In het midden staan 3 icons. Pas die aan naar 3 social media icons. Je mag er ook een mail of contact icon plaatsen. Je kunt de icons halen van iconfinder.com of fontawesome.com . Zelf icoontjes maken mag natuurlijk ook.
Stap 2: Eigen design
Probeer nu deze nagemaakte pagina aan te passen.
- Gebruik de kleuren en de lettertypes die bij de Single-Product-huisstijl passen.
- Schrijf je eigen teksten. Gebruik geen lorem ipsum of andere dummy tekst. Het moet een echte site lijken.
- Zorg dat het niet heel erg lijkt op de demo site uit de videoinstructie.
Dit kun je bereiken door bijvoorbeeld:- elementen een andere plek te geven
- heel andere kleuren te gebruiken
- die scheve bovenkant een andere vorm te geven (golf of juist recht of nog iets anders)
- elementen ronde hoeken (border-radius) te geven
- elementen (schaduw-)randen te geven
Stap 3: drie extra pagina’s maken
- Maak de winkelwagen, contact- en overpagina’s. In Figma, elke pagina is een layer.
- Kopieer je homepage 3 keer en geef elke layer (pagina) een logische naam. Dus noem ze contact, about en winkelwagen.
- Maak andere content (inhoud) in de drie nieuwe pagina’s. Kijk naar de wireframes hierboven om te zien wat er in die pagina’s zou kunnen komen.
Stap 4: Pagina’s linken
- Zet Figma in de Prototype mode (rechtsboven klikken op Prototype).
- Link nu de knoppen in je menu naar de verschillende layers
Stap 5: Share en feedback
In de Share mode maak je een link. Deze link deel je met een klasgenoot en een ouder/volwassen familielid. Vraag om feedback. Is de interface duidelijk? Snapt de gebruiker wat je moet doen?
Als je de feedback hebt gekregen ga je die ook proberen te verwerken. Daarna lever je geupdate link in in de Teams opdracht.