Iftek.dk

Webshop - Graensefladedesign

Modellering

I denne del af designfasen startes der op på modellering ved hjælp af skitser, strukturdiagrammer, mock ups¹, prototyper eller roughs (kært barn har mange navne). Fremadrettet vil det hele ske som en iterativ proces med mange gennemløb med skitser og dermed udkast.

Opgave:

Lav en eller flere skitser med papir og blyant over den/de sider, I ønsker skal være Frydenlunds websted.²

Krav til designet

Den designmæssige treenighed skal gerne gå op i en højere enhed.

Det er vigtigt at tilgodese alle tre elementer for,
at designet dermed vil opnå flere tilfredse brugere.
Dermed opnås en større levedygtighed af designet.

Keep It Simple Stupid –KISS-reglen

En anderledes forklaring:

Al overflødig information/detaljer skal fjernes.

Enkeltheden skal i højsædet.

Hvad kan tages væk, skal tages væk.

Spørg altid: Vil brugeren savne det? Er svaret nej —> VÆK

Opgave:

Kig grundigt på skitserne. Gennemgå detaljeret KISS-reglen på skitserne og ret til.

Gestalt-lovene

Se beskrivelserne, der er beskrevet under webdesign-visuelt-design

Grundformerne

Opgave:

Find hjemmesider, hvor I ved at knibe øjnene sammen kan genkende overskrifter, tekster, logoer mm som grundformer eller afarter af dem.

Det mindste areal vil blive opfattet som figur.

Se hvor let det er at snyde hjernen: http://www.eyetricks.dk/

Størrelser og kontraster

Opgave:

Se ovenstående 2 eksempler, og forklar hvad der virker bedst og hvorfor?

Blikfang og ting, der flugter

Opgave:

Find andre eksempler på kontraster, størrelser, blikfang og ting, der flugter.

Opgave:

Medtænk gestaltlove, grundformer, kontraster, størrelser, blikfang og ting, der flugter i Frydenlunds websted³.

Farver som medieobjekter

http://marilynmanson.com

Rød er ikke bare rød!


Disse røde farver ser anderledes ud
i virkeligheden, på skærmen (rgb-systemet)
og på print (CMYK-systemet)⁴.

Er det den samme blå farve?

Komplementærfarver

Opgave:

Kig på den sorte prik i det røde felt og tæl langsomt til 20.
Flyt så blikket til den sorte prik i det hvide felt, og lad øjet hvile der.

Hvad ser du?

Forsøg med flere farveeksempler og tal om pilenes berigtigelse i farvecirklen.

Kulturbestemt

Farvevalget er også bestemt af kultur.

Opgave:

Find en japansk hjemmeside (.jp) og sammenlign den med et tilsvarende produkt i Danmark.

Kontraster

Komplementærkontrast

Den stærkeste farvekontrast (billeder med disse virker meget stærke)

Lys/mørkekontrast

Kontrasten mellem lyse og mørke nuancer/farver og mellem sort og hvid skaber fornemmelse af form

Kvalitetskontrast

Kontrasten mellem en klar farve og en, der er dæmpet med sort eller hvid (klare farver virker tættere på end dæmpede farver)

Kvantitetskontrast

Størrelsesforholdet mellem to eller flere farver. Et enkelt rødt element virker stærkt, men forsvinder hvis der er mange røde flader

Varm/kold-kontrast

En kold/varm kontrast giver fornemmelse af dybde

Opgaver:

I hver gruppe skal der findes mindst 2 eksempler på brug af kontraster (gerne billeder/malerier)

Farvers psykologi og symbolik

Farver kan have mange betydninger, så man må se nøje på den konkrete sammenhæng. Man skal ikke bare tage en sammenhæng for givet.

Opgave:

Tilpas farverne og kontrasterne i Frydenlunds websted⁵ i PowerPoint.

Yderligere medieobjekter

I denne del af forløbet vil der blive fokuseret på valg af skrifttyper og billedformater.

Typografi

Selve ordet typografi betyder opsætning af tekst inden trykning, men da vi i dag benytter andre medier end de trykte til offentliggørelse, vælger jeg at bruge ordet i bred forstand til også at omfatte de elektroniske medier. Der er forskellige underområder, der er vigtige at kende til inden for dette felt, og flere af dem er også berørt i danskundervisningen – i særdeleshed under gennemgang af artikler i aviser.

Displaytekst

Displaytekst er den tekst, hvor man sørger for at lave blikfang, herunder også specielle overskrifter, logoer og anden designet tekst. Det, der er typisk for displaytekst, er, at det er designet til brug for genkendelse.

Opgave:

Find logoer på nettet og vis dem på klassen.

Kan I genkende firmaet/produktet bag?

Kan man ud fra logoet have en fornemmelse af firmaets produkter?
Vil firmaet gerne vise noget om deres KSF⁶ via logoet?

Overskrifter og brødtekst

Disse to skrifttyper benyttes i de fleste opgaver, også afleveringsopgaver. Det er skrevet i skrifttyper fra diverse tekstbehandlingsprogrammer. Ordet 'overskrift' siger næsten sig selv, noget skrift, der er over noget andet :-), det samme med ordet 'brødtekst'. Det er tekst, hvor hele substansen er beskrevet (det man er blevet mæt af) – kan også kaldes normaltekst.

Opgave:

Find eksempler fra nettet, hvor det er meget tydeligt, at der er brugt overskrifter og brødtekst.

Hvordan ser skriften typisk ud i overskrifter og brødtekster?
Er der forskel på hvilken skrifttype, der anvendes til overskrifter og brødtekst?
(Hint: Med/uden seriffer)

Konsultativ tekst

Konsultativ tekst er den tekst, der indeholder oplysninger, som skal være lette at opdage. Det kan for eksempel være kontaktoplysninger eller andet.

Opgave:

Find eksempler fra nettet, hvor konsultativ tekst er brugt.

Tegninger og grafik, billeder (stil og bevægelse)

På hjemmesider er det altid vigtigt at tage stilling til, hvilken form for illustrationer der vælges. I dette afsnit vil der kort blive kigget på forskellige former, der kan vælges, og hvad betydning de enkelte valg har⁷.

Bitmap- og/ vektorgrafik

Hvad er bitmap-grafik? Det er smart sagt et billede, hvor der er brugt punkter af farver – kaldes også pixelbaseret grafik. Oftest vil det være tydeligt, når et bitmap-billede forstørres, da det bliver grynet⁸. Vektorgrafik er kendt fra matematik. Det er billeder, hvor streger/former danner billedet. De fleste programmer til vektor-grafik, kan gemme filerne i PDF-format. Hvornår skal man så vælge hvad?




Som det kan ses i ovenstående skema, skal der tages stilling ved valget til den enkelte illustration, hvilket format der skal vælges.

Opgave:

Prøv at finde eksempler på bitmap- og vektorgrafik på internettet.

Grafikformater

Når der skal gemmes i et billedredigeringsprogram, er der flere muligheder af formater at vælge mellem. Man skal ikke bare tage det første og regne med, det er det bedste.

Nedenstående billede er gemt i forskellige formater og resultatet kan ses ved siden af.

Det har altså stor betydning i lagerplads, hvilket format der skal vælges. Størrelse har ikke den store betydning i dette tilfælde, når billedet bare skal være på harddisken. Men i det øjeblik informationerne skal videresendes over internettet, så for eksempel hjemmesiden kan komme frem på skærmen i det tempo og den detaljerigdom, der er ønsket, har det stor betydning. Endvidere skal det medtænkes, at udskrift til papir stiller højere krav til billedets kvalitet, end visning på skærmen gør. Skemaet herunder giver nogle eksempler på nogle af de mest brugte grafik-formater:

Opgave:

Tilpas Frydenlunds websted⁹, så jeres viden om grænseflader kan ses.

I forbindelse med brug af lyd på hjemmesider, skal man overveje flere af de samme aspekter. Dette område er gennemgået i et andet forløb her på iftek.dk¹⁰.

Tænke-højt test af hjemmesider

Noget af det vigtigste ved al form for udvikling it er tests. Herunder også om funktionalitet og brugbarhed af hjemmesider er i orden – brugervenlighed/usability.

Opgave:

Gruppevis skal interaktive hjemmesider analyseres (1 hjemmeside pr gruppe – så hemmeligt som muligt).
Hver gruppe finder 10 forskellige udfordringer, der skal findes, udføres eller lignende. Disse nedskrives punktvis.

Et gruppemedlem rykker gruppe og er nu testperson.
Instruktionen er, at testpersonen skal sige alt højt, lige fra man ser hjemmesiden i første glimt – hvad tænkes der
fx om afsender, mål, design og farver. Listen af udfordringer skal nu udføres.
Alt dokumenteres af gruppemedlemmerne.
Lav en rapport (opsummering) af brugervenligheden på hjemmesiden,
inklusiv oplevelsen af at være testperson og referent.

HTML-designet

Opgave:

Overfør jeres design over i HTML