05 Frontend
Med forbehold for mindre ændringer
- Review af sidste uges fredagsopgave og hvad der ellers måtte opstå af spørgsmål.
Der er en del forberedelse I skal have gjort inden tirsdag. Du skal have set 3 videoer, installere et mockup værktøj og have set et lynkursus i det:
Intro-videoer:
Se først disse 3 videoer. Det er hyggevideoer, som giver dig et overblik over www’s historie, hvad full stack web development er, og hvad UX/UI er. Altsammen vigtige begreber, som skaber begreber og kontekst for det vi skal i gang med.
Den 4. video handler om Gestaltlove, der er en vigtig del af UX/UI design:
- Intro til www’s historie (13:03)
- Hvad er full stack we development? (18:57)
- Hvad er UX/UI? (11:18)
- Gestaltlove
Artikler
Læs om hvordan man laver god UX/UI. Her er 10 tommelfingerregler, som er gode at have i baghovedet:
Figma
Download og installer mockup værktøjet Figma:
- Opret en konto på Figma (gratis) med din
@stud.ek.dkemail: Figma apply for educational. Du skal nok indsende dit studiekort for at få godkendt din ansøgning. Fordelen ved at få en konto med din stud.ek.dk email er at du så kan dele dine designs med dine medstuderende og undervisere, som også har en konto. Du får også adgang til en række ekstra features, som er rare at have i undervisningen. F.eks. en developer handoff feature, som gør det nemmere at implementere dine designs i HTML/CSS. - Download og installer Figma Desktop App
Vi skal i dag have en introduktion til UX/UI og Figma. Vi skal blandt andet lave nogle simple mockups.
Brugergrænseflader er typisk ikke noget programmører selv designer. Her arbejder vi samen med UX/UI designere. UX/UI er et fagområde i sig selv. Derfor er vi datamatikerundervisere ikke ligefrem verdensmestre i f.eks. Figma. Vi bruger det dog alligevel, da det er et vigtigt værktøj at kende til. Og specielt skal vi kunne tage en Figma prototype og implementere den i HTML/CSS/Javascript.
I år har vi været så heldige at få besøg af to nyuddannede designere, som introducerer os til Figma. Så glæd jer til at få en introduktion af to som faktisk ved hvad de laver ;-)
Se disse videoer og kod med hele vejen. De er MEGET vigtige for at komme i gang med HTML og CSS:
- HTML basics - kod med tutorial. Eksempelkode fra videoen.
- CSS basics - kod med tutorial. Projektet fra HTML video
- Skim dette dokument om Paper Prototyping af Caroline Snyder
- Læs denne opsummering i vores værktøjskasse: Paper Prototyping
- Se en ultrakort video om Paper Prototyping
- Introduktion til paper prototyping og “tænke-højt-test”
- Introduktion til HTML/CSS
Se disse videoer:
Skim denne artikel om Heuristisk evaluering
- UX/UI + heuristisk vurdering af jeres Carpool designs
- CSS Grid og media queries
Fredagsopgaven følger op på jeres CodeLab produkt. Uanset om I lavede Carpool eller et andet projekt, så skal I lave en responsiv version af jeres design. Det er selvfølgelig vigtig at kunne lave designs, der fungerer på både desktop og mobil, da mange brugere i dag bruger deres telefoner til at tilgå hjemmesider. Specielt kan man nok forvenete at mange brugere vil tilgå jeres Carpool app fra deres telefon, når de er på farten.
Her er lidt hjælp hvis du mangler grafiske elementer eller ideer til designs: Carpool Responsive Design. Ellers ruller I bare med jeres Figma designs og laver en responsive version af det. Forventet output er et lille website i html og css. Vi kigger på det mandag til reviews. I må selvfølgelig gerne lave arbejdet i teams, hvis I har lyst til det. Omvendt er det også helt fint at lave det selv, hvis du gerne vil have lidt mere øvelse i HTML/CSS på egen hånd.