https://www.codecademy.com/enrolled/courses/intro-to-ui-ux
https://uxdesign.cc/how-to-become-a-ui-ux-designer-self-taught-8a511170fd7c
https://www.codecademy.com/content-items/c2b65f9281fdeff54c3a228926ed913c?preview=true
https://www.codecademy.com/courses/intro-to-ui-ux/articles/what-are-ui-and-ux-design
I detta projekt kommer vi att öva på UI/UX och tillämpa det på ett case. Ni kommer att arbeta i grupper om 3 i projektet där ni får bestämma medlemmar. Caset är att designa en webbsida till ett online kafé (konditori) där uppgifterna är förutbestämda, dock bestäms inte utseende och design. Er uppgift är att utifrån en målgrupp designa och om tiden räcker implementera (skapa/programmera) hemsidan med stark betoning på design och UI/UX i åtanke.
Denna uppgift har stor frihet i hur du utformar den.
Ert mål är att skapa en sitemap, wireframe och design i Figma. Vad dessa är kommer ni lära er och förstå bättre när ni gått igenom innehållet.
Det enda som tillhandahålls är en mycket grundläggande backend, bara en db.json-fil som körs med json-server. Den ger datat som ska presenteras.
- Små barn + föräldrar
- Pensionärer
- Ungdomar + unga vuxna (15 - 25år)
- Lastbilschaufförer
- Turister på soligt ställe
- Religösa grupper
- Politiker
- Gamers och spelentusiaster
- Botanister
- Akademi och skola
- Djurpark/zoo
Designen ska anpassas till den målgrupp som du har blivit tilldelad.
Några krav:
- Kakor presenteras för kunderna.
- Kunder kan logga in/logga ut från butiken.
- Kunder kan välja tårtor och göra beställningar.
- Personal ska visas upp på ett trevligt och tilltalande sätt.
Kakor måste presenteras på ett snyggt sätt med UI/UX i åtanke, kan vara en lista eller ett rutnät det är upp till dig. Du kanske vill ha lite kort information om tårtan i listan och sedan klickar du på ett objekt kan en dialogruta eller en ny sida med detaljerad information om kakan öppnas.
Backend innehåller kunder med e-post och lösenord som kan användas för att logga in/logga ut användare, ni behöver inte ställa in något själv utan de är fördefinierade. Så ingen registering behövs.
Ni kan designa en varukorg som kommer att innehålla de valda kakorna och det totala priset som summerar priset för baserat på de valda kakorna.
Du bör ha en sektion eller sida där personalen som arbetar på bageriet presenteras.
Ta en titt i db.json.
Ett REST api är vad "npm run start-server" ger dig.
I grund och botten ett CRUD api där du kan göra GET, PUT, POST, DELETE, PATCH och OPTIONS på alla samlingar.
Backend har fyra typer av data:
cakes: en lista över kakor som bageriet erbjuder.staff: en lista över personal som arbetar i bageriet.customersen lista över kunder.orders: en lista över beställningar från kunder.
GET localhost:3000/cakes
Jag kan rekommendera att installera Visual Studio-tillägget Thunder Client för att testa API-anrop prova i t.ex. Thunder Client, eller lägg bara upp webbadressen i webbläsaren
- Baserat på er målgrupp så kommer ni behöva motivera era design val.
- Designen måste implementeras i Figma.
- Använda lämplig färgtema på designen.
Du måste ha node och npm installerade. Klona sedan det här repot, kör npm install och kom igång :)
npm install -g json-serverjson-server generate.js- tryck på
sför att spara en ögonblicksbild av databasen. Efter det byt namn på din ögonblicksbild till "db.json" och starta sedan om servern.
om du vill modifiera din generator, ändra generate.js. Mer information om hur du använder faker här.
Man delar länk till sina designs i Figma. Om ni hinner implementera designen så checkas den in på ett Github-klassrumsrepo som kommer tilldelats.
- Skapa en grupp på 3.
- Välj en målgrupp ni vill skapa webbsidan för. Man får inte välja samma målgrupp, så har någon valt målgruppen får man välja en annan. Meddela läraren vilken målgrupp ni har valt.
- Skapa ett konto på codecademy och gå igenom materialet i kursen "Introduction to UI and UX Design"
Om du tycker det är lättare ta in texten på svenska kan du kopiera in det i Chat-GPT och be den översätta. Till texterna finns kontrollfrågor, diskutera gärna dem inom gruppen. - Skapa ett konto i Figma och börja designa och samarbeta med gruppmedlemmarna i Figma. På samma sätt som i Office 365 Word kan man samarbeta flera personer i ett dokument/design skiss.
Ni ska göra en sitemap, wireframe och design. Datat att presentera hämtar ni från backend db.js
Sitemap - visar navigeringshierarkin på webbsidan
Wireframe - grov och enkel bild av gränssnittet, inga färger och riktiga bilder m.m. Ett Figma plugin för wireframes.
https://www.figma.com/community/file/880190575678066152
Design - förväntar mig inte den här nivån, men designen är det snygga slutresultatet. I codecademy finns en kort introduktion till Figma. Men vill man ha en djupare och längre genomgång är denna bra: https://www.youtube.com/watch?v=kbegkFoKvUM
- Det känns som att tiden räcker till att implementera webbsidan med valfria tekniker. Men jag föreslår starkt att ni använder Vue och Quasar Framework som jag kommer gå igenom. Ni kommer ha stor nytta av det i framtida projekt också. Jag tillhandahåller ett exempel projekt i Quasar på länken:
https://github.com/abbjetmus/programmering/tree/master/Vue
Men gå först igenom grunderna i Vue innan ni hoppar in i Quasar mallen.