03 Frontend I

I denne uge starter vi på frontend delen af webudvikling. Vi skal arbejde med HTML, CSS i denne uge og Javascript i næste uge. Før vi kan kode noget skal vi som altid have en plan. Derfor skal vi også arbejde med UX/UI design og brugertest.

• Læringsmål

• Review af sidste uges fredagsopgave og hvad der ellers måtte opstå af spørgsmål.

• introduktion til HTML og CSS

Vi koder en formular og arbejder med layout.

1. Intro til www’s historie (13:03)
2. Hvad er full stack web development? (18:57)

Se disse videoer og kod med hele vejen.

1. HTML basics - kod med tutorial. Eksempelkode fra videoen.
2. CSS basics - kod med tutorial. Projektet fra HTML video
3. grid layout

Grid layout cheat sheet

• brugervenlighed og gestaltlove
• wireframes (hi-fidelity og low-fidelity)
• test af brugergrænseflader

Intro-videoer:

1. Hvad er UX/UI? (11:18)
2. UX laws
3. Gestaltlove

Artikler Læs om hvordan man laver god UX/UI. Her er 10 tommelfingerregler, som er gode at have i baghovedet:

1. Usability heuristics Du skal sætte dig ind i hvad papir prototyping går ud på. Her er nogle forskellige alternativer
2. Low fidelity prototype
3. alternativ: Skim dette dokument om Paper Prototyping af Caroline Snyder
4. Læs denne opsummering i vores værktøjskasse: Paper Prototyping
5. Se en ultrakort video om Paper Prototyping

Vi arbejder med en konkret case hvortil vi designer en eller flere skærme som vi til sidst brugertester.

Resulatet fra brugertesten integreres i en ny prototype og implementeres.

Bestem selv om den nye prototype skal skal være på papir igen, i et tegneprogram som fx. miro eller draw.io, eller hvis du har mod på det, brug figma som er det, der anvendes professionelt til high-fidelity prototyping:

Download og installer mockup værktøjet Figma:

1. Opret en konto på Figma (gratis) med din @stud.ek.dk email: 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.

2. Download og installer Figma Desktop App

Tag fat i jeres pet project og beslut jer for en sektion i det, som man med fordel kan have kørende online. Det kan fx. være en formular til settings eller sign-up. Forventet output er et lille website i html og css. Vi kigger på det mandag til reviews.

• Diverse links og materialer om Frontend