SIMPLICITY JOEK © TEC 2011 Selv om nogle designere har svært ved at udsmykke en hjemmeside nok til at gøre den interessant, er det de fleste som har det.

Præsentationer af emnet: "SIMPLICITY JOEK © TEC 2011 Selv om nogle designere har svært ved at udsmykke en hjemmeside nok til at gøre den interessant, er det de fleste som har det."— Præsentationens transcript:

1 SIMPLICITY JOEK © TEC 2011 Selv om nogle designere har svært ved at udsmykke en hjemmeside nok til at gøre den interessant, er det de fleste som har det modsatte problem. De forsøger at proppe for meget på en side. Hvis du falder ind under denne kategori, skal du gennemgå dit designs elementer, og finde frem til de elementer der kan fjernes eller forenkles. Et helt grundlæggende eksempel er, at en hjemmeside sjældent ser godt ud med 15 forskellige skrifttyper. Husk på, at simplicity ikke altid er kedeligt, ofte er det moderne og elegant i stedet.

2 OPRETHOLD EN DOSMO AF IDÈER JOEK © TEC 2011 Læg mærke til billeder, farveskemaer, generelle layout, interessante skrifttyper og uddrag af kode der gør interessant ting. Andre hjemmesider kan generere ideer og inspirere, og det samme kan magasiner, bøger, film indledninger, eller sågar det farverige tøj i H&M eller et simpelt postordrekatalog. Hold dine øjne åbne overfor inspiration på alle tidspunkter af døgnet.

3 BRUG TILBAGEHOLDENHED JOEK © TEC 2011 Som designer render man tit rundt med nogle smarte idéer som man ønsker at søsætte. Der er desværre ofte langt imellem smarte idéer og realitet, og de smarte idéer ender ofte med at ramme helt ved siden af det egentlige mål med hjemmesiden. F.eks. er umotiveret animation ofte irriterende og kan forøge download tiden betydeligt, ofte så meget, at de besøgende bliver utålmodige og forlader stedet. Som designer er det derfor en kunst at være tilbageholden og ydmyg overfor projektet. I det tilfælde, at man får en idé der rammer helt ved siden af formålet, så skal du ikke smide idéen ud men gemme den i din dosmo-fil, for man ved aldrig hvornår idéen rent faktisk bliver anvendelig. Som designer render man tit rundt med nogle smarte idéer som man ønsker at søsætte. Der er desværre ofte langt imellem smarte idéer og realitet, og de smarte idéer ender ofte med at ramme helt ved siden af det egentlige mål med hjemmesiden. F.eks. er umotiveret animation ofte irriterende og kan forøge download tiden betydeligt, ofte så meget, at de besøgende bliver utålmodige og forlader stedet. Som designer er det derfor en kunst at være tilbageholden og ydmyg overfor projektet. I det tilfælde, at man får en idé der rammer helt ved siden af formålet, så skal du ikke smide idéen ud men gemme den i din dosmo-fil, for man ved aldrig hvornår idéen rent faktisk bliver anvendelig.

4 TJEK KONKURRENDE HJEMMESIDER JOEK © TEC 2011 Det handler om at udnytte de andres erfaringer, så man undgår at opfinde den dybe tallerken endnu en gang. Søg konkurrerende virksomheder på nettet, besigtig deres hjemmesider som var det en prototype af din egen. Analysere deres sider og find ud af hvad konkurrenterne gør godt, men ha’ også fokus på hvor de gør det dårligt og lær af deres fejl. Overvej hvordan du overgår konkurrenterne. Du bør også overvej om dit design skal læne sig op af deres design (Udelukkende hvis dette er uundgåeligt i forhold til konkurrence parametrene), eller om dit design skal være radikalt anderledes. (Så dit design er unikt, mindeværdigt og skaber selvstændighed)Begge valg er legitime alt efter omstændighederne.

5 KRYDS BROWSE JOEK © TEC 2011 Når du bruger tid på at surfe rundt iblandt hylderne i din lokale boghandel eller på biblioteket, så slå et lige så hyppigt besøg forbi kunst og design sektionen som webudviklings hylderne. Selvfølgelig, som jeg også argumenterede for under punkt 2, ” Hold dine øjne åbne overfor inspiration på alle tidspunkter af døgnet”, så finder du inspirationen her og der og alle vegne.

6 VÆR FORDØMMENDE JOEK © TEC 2011 Omsider! En situation hvor du opfordres til at være fordømmende. Det handler om at tage til efterretning og lære af de egenskaber, du personligt godt kan li’ og de egenskaber du ikke kan li på en hjemmeside du besøger. Hvad irriterer dig? Hvad inspirere dig? Formod herefter, at de samme karakteristika har potentialet til at genere eller glæde dine besøgende.

7 FOKUS PÅ AT LØSE DEIGN PROBLEMER JOEK © TEC 2011 Husk, at selv om design er kunst, så er det ikke bare kunst for kunstens skyld. Fordi en kunstner skaber noget der er stilrent og tiltalende, betyder det ikke nødvendigvis at det løser formålet eller opfylder publikums krav. Man kan altid male eller forme som man selv ønsker. De eneste begrænsninger er mediet i sig selv, hvad enten man arbejder med maling eller ler mm. En webdesigner skal på den anden side løse en masse kommunikationsproblemer, der har iboende begrænsninger: Budgetmæssige retningslinjer, forretningsmæssige mål, eksisterende branding, målgrupper og organisationens ledelse mm. Den rene kunst kommer ofte i vejen for kommunikationen. De webdesignere som started ud som kunstnere og bagefter foldede sig ud som webdesigner, har generelt meget svært ved at klare disse opgaver. Husk, at selv om design er kunst, så er det ikke bare kunst for kunstens skyld. Fordi en kunstner skaber noget der er stilrent og tiltalende, betyder det ikke nødvendigvis at det løser formålet eller opfylder publikums krav. Man kan altid male eller forme som man selv ønsker. De eneste begrænsninger er mediet i sig selv, hvad enten man arbejder med maling eller ler mm. En webdesigner skal på den anden side løse en masse kommunikationsproblemer, der har iboende begrænsninger: Budgetmæssige retningslinjer, forretningsmæssige mål, eksisterende branding, målgrupper og organisationens ledelse mm. Den rene kunst kommer ofte i vejen for kommunikationen. De webdesignere som started ud som kunstnere og bagefter foldede sig ud som webdesigner, har generelt meget svært ved at klare disse opgaver.

8 DE 4 GYLDNE REGLER JOEK © TEC 2011 LET AT VEDLIGEHOLDE. -Det skal være fleksibelt og skalerbart, således at løbende opdateringer kan udføres med et minimum af tid og kræfter. ÆSTETETISK TILTALENDE. -Det skal være en attraktiv og spændende sanseoplevelse for hjemmesidens målgruppe/brugere. LET AT BRUGE. -Det vil sige brugervenligt, effektivt og hurtigt at downloade. Besøgende skal ha’ en succesoplevelse. De skal nemt kunne finde hvad de leder efter og udføre deres opgaver uden at spilde tiden. TEKNISK FAST. - Hjemmesiden opfører sig forudsigeligt og uden nogen form for brudte links mm. Målgruppen kan udføre handlinger med et minimum af tid og kræfter. LET AT VEDLIGEHOLDE. -Det skal være fleksibelt og skalerbart, således at løbende opdateringer kan udføres med et minimum af tid og kræfter. ÆSTETETISK TILTALENDE. -Det skal være en attraktiv og spændende sanseoplevelse for hjemmesidens målgruppe/brugere. LET AT BRUGE. -Det vil sige brugervenligt, effektivt og hurtigt at downloade. Besøgende skal ha’ en succesoplevelse. De skal nemt kunne finde hvad de leder efter og udføre deres opgaver uden at spilde tiden. TEKNISK FAST. - Hjemmesiden opfører sig forudsigeligt og uden nogen form for brudte links mm. Målgruppen kan udføre handlinger med et minimum af tid og kræfter.

9 DE 4 GYLDNE REGLER JOEK © TEC 2011 1- VÆLG EN STØRRELSE PÅ HJEMMESIDEN. De fleste computerskærme i dag kommer med en fabriksindstillet opløsning på 1024 x 768 pixels eller højere. Selvom de fleste mennesker aldrig justere denne indstilling, kan størrelsen på skærmopløsningen stige eller falde fra så lavt som 640 x 480 pixels, til så højt som 2560 x 1600 på nogle af de nye widescreen LCD-skærme. Herunder har jeg defineret nogle konkrete eksempler på typiske opløsninger for LCD-skærme: 14–15-tommer: 1024 x 768 (XGA) 17–19-tommer: 1280 x 1024 (SXGA) 20-tommer+: 1600 x 1200 (UXGA) 17-tommer: 1280 x 800 (WXGA, Widescreen) 19-tommer: 1440 x 900 (WXGA+, Widescreen) 20-tommer: 1680 x 1050 (WSXGA+, Widescreen) 24-tommer: 1920 x 1200 (WUXGA, Widescreen) 30-tommer: 2560 x 1600 (Widescreen) Med denne store variabel i baghovedet, kan det være svært for en designer at vælge den rette layout brede, uden at komme til at støde en lang række brugere. Her et godt tip: Vælg en størrelse, der når så bred en målgruppe som muligt. Vælg f.eks. opløsningen 800 x 600 eller vælg at lave indholdet så det kan tilpasse sig, og sæt så opløsningen til 90%. Desuden skal man tage i betragtning, at de fleste browsere stjæler meget af designrummet med deres elementer, så som rullepaneler, statuslinjen, navigationen bar mm. 1- VÆLG EN STØRRELSE PÅ HJEMMESIDEN. De fleste computerskærme i dag kommer med en fabriksindstillet opløsning på 1024 x 768 pixels eller højere. Selvom de fleste mennesker aldrig justere denne indstilling, kan størrelsen på skærmopløsningen stige eller falde fra så lavt som 640 x 480 pixels, til så højt som 2560 x 1600 på nogle af de nye widescreen LCD-skærme. Herunder har jeg defineret nogle konkrete eksempler på typiske opløsninger for LCD-skærme: 14–15-tommer: 1024 x 768 (XGA) 17–19-tommer: 1280 x 1024 (SXGA) 20-tommer+: 1600 x 1200 (UXGA) 17-tommer: 1280 x 800 (WXGA, Widescreen) 19-tommer: 1440 x 900 (WXGA+, Widescreen) 20-tommer: 1680 x 1050 (WSXGA+, Widescreen) 24-tommer: 1920 x 1200 (WUXGA, Widescreen) 30-tommer: 2560 x 1600 (Widescreen) Med denne store variabel i baghovedet, kan det være svært for en designer at vælge den rette layout brede, uden at komme til at støde en lang række brugere. Her et godt tip: Vælg en størrelse, der når så bred en målgruppe som muligt. Vælg f.eks. opløsningen 800 x 600 eller vælg at lave indholdet så det kan tilpasse sig, og sæt så opløsningen til 90%. Desuden skal man tage i betragtning, at de fleste browsere stjæler meget af designrummet med deres elementer, så som rullepaneler, statuslinjen, navigationen bar mm.

10 DE 4 GYLDNE REGLER JOEK © TEC 2011 2- FAST ELLER FLEKSIBEL BREDDE. Overvej om dit layout skal ha’ en fast eller fleksibel brede. Fast bredde layout: Et design med fast bredde betyder, at indholdet på hjemmesiden vil blive positioneret inden for et forudbestemt område på siden, og at eventuelle overløb i bredden vil udvide siden lodret i stedet for vandret (Bredden). Fleksibel bredde layout: Til gengæld er et design med fleksibel bredde, et design som spænder over browservinduets fulde bredde og omfatter én eller flere kolonner med oplysninger, hvilke kan udvides i forhold til browservinduets bredde/størrelse. En del designere refererer til denne teknik som flydende design. 2- FAST ELLER FLEKSIBEL BREDDE. Overvej om dit layout skal ha’ en fast eller fleksibel brede. Fast bredde layout: Et design med fast bredde betyder, at indholdet på hjemmesiden vil blive positioneret inden for et forudbestemt område på siden, og at eventuelle overløb i bredden vil udvide siden lodret i stedet for vandret (Bredden). Fleksibel bredde layout: Til gengæld er et design med fleksibel bredde, et design som spænder over browservinduets fulde bredde og omfatter én eller flere kolonner med oplysninger, hvilke kan udvides i forhold til browservinduets bredde/størrelse. En del designere refererer til denne teknik som flydende design.

11 DE 4 GYLDNE REGLER JOEK © TEC 2011 3- VALG AF FARVESKEMA. Som jeg tidligere har været inde på i afsnittet om farver, så har dit valg af farver meget større betydning for projektet end man umiddelbart forestiller sig. De farver du vælger gøre mere end blot at dekorere hjemmesiden, de kommunikere ideer, vækker følelser, ændrer stemninger og formidler uudtalte psykologiske budskaber om ejerne af hjemmesiden. Jeg vil dog ikke komme mere ind på farvevalg i sig selv. Her anbefaler jeg du går tilbage til afsnittet om farver. 3- VALG AF FARVESKEMA. Som jeg tidligere har været inde på i afsnittet om farver, så har dit valg af farver meget større betydning for projektet end man umiddelbart forestiller sig. De farver du vælger gøre mere end blot at dekorere hjemmesiden, de kommunikere ideer, vækker følelser, ændrer stemninger og formidler uudtalte psykologiske budskaber om ejerne af hjemmesiden. Jeg vil dog ikke komme mere ind på farvevalg i sig selv. Her anbefaler jeg du går tilbage til afsnittet om farver.

12 DE 4 GYLDNE REGLER JOEK © TEC 2011 4- VALG AF FONTS. Når man laver en hjemmeside er der en uskreven regel der siger, at al tekst på sitet forholder sig til et konkret regelsæt. F.eks. så skal brødteksten defineres af en skrifttype og skriftstørrelse igennem hele sitet. Hvis det ønskes, så kan man godt bruge en sekundær skrifttype eller en smule grafik til overskrifterne, og du kan bruge flere skrifttyper, hvis du ønsker at sætte indhold ind i specifikke regioner. Brugen af ​​ grafik der indeholder tekst, skal dog hovedsageligt være begrænset til overskrifter, side overskrifter og citater. Vælger man at bruge grafik der indeholder tekst, skal man ha’ for øje, at download hastigheden forringes betydeligt pga tungere grafiske objekter, ligesom det forringer søge mulighederne, da søgemaskiner som google ikke kan fange teksten i en billedfil. Google og andre søgemaskiner kan dog godt læse billedfilens HTML-tags, hvilke kan indeholde attributter som alternativ tekst og lange beskrivelser, men billeder med en masse tekst skal være undtagelsen på en hjemmeside snarere end en regel. Det er dog helt klart at foretrække, at man skriver teksten i HTML og definerer design formateringerne i et internt eller eksternt stylesheet. Sidst men ikke mindst, de skrifttyper du vælger til dit websted skal kunne læses på begge platforme, PC og Mac. Men hvilken Font/skrifttype skal jeg så vælge? Hvilke skrifttyper er lette at læse på skærmen? Hvilke skrifttyper har brugeren installeret? Hvilke visuelle signaler udsender skrifttypen? Brug højst 2 forskellige skrifttyper på et websted. Brug af flere kan give et rodet og billigt indtryk. 4- VALG AF FONTS. Når man laver en hjemmeside er der en uskreven regel der siger, at al tekst på sitet forholder sig til et konkret regelsæt. F.eks. så skal brødteksten defineres af en skrifttype og skriftstørrelse igennem hele sitet. Hvis det ønskes, så kan man godt bruge en sekundær skrifttype eller en smule grafik til overskrifterne, og du kan bruge flere skrifttyper, hvis du ønsker at sætte indhold ind i specifikke regioner. Brugen af ​​ grafik der indeholder tekst, skal dog hovedsageligt være begrænset til overskrifter, side overskrifter og citater. Vælger man at bruge grafik der indeholder tekst, skal man ha’ for øje, at download hastigheden forringes betydeligt pga tungere grafiske objekter, ligesom det forringer søge mulighederne, da søgemaskiner som google ikke kan fange teksten i en billedfil. Google og andre søgemaskiner kan dog godt læse billedfilens HTML-tags, hvilke kan indeholde attributter som alternativ tekst og lange beskrivelser, men billeder med en masse tekst skal være undtagelsen på en hjemmeside snarere end en regel. Det er dog helt klart at foretrække, at man skriver teksten i HTML og definerer design formateringerne i et internt eller eksternt stylesheet. Sidst men ikke mindst, de skrifttyper du vælger til dit websted skal kunne læses på begge platforme, PC og Mac. Men hvilken Font/skrifttype skal jeg så vælge? Hvilke skrifttyper er lette at læse på skærmen? Hvilke skrifttyper har brugeren installeret? Hvilke visuelle signaler udsender skrifttypen? Brug højst 2 forskellige skrifttyper på et websted. Brug af flere kan give et rodet og billigt indtryk.

13 DE 4 GYLDNE REGLER JOEK © TEC 2011 Serif skrifttypen: som brødtekst kan det anbefales at bruge en Serif skrifttype. Serif har små fødder der danner en linje, som øjet følger når man læser. Skrifttypen er også kendtegnet ved de tynde hårstreger og elegante svungne linier. De fine hårstreger og de skrå linjer i fødderne giver dog problemer på computerskærme med lav opløsning, hvor Skriften kan blive hakket og pixeleret. Men efterhånden som skærmenes opløsning er blevet højre, er problemet blevet mindre. Serif skrifterne signalerer tradition, historie og gammeldags værdier, når de bliver brugt på nettet. En af de bedste serif skrifttyper til netbrug er Georgia. Georgia er designet til skærmbrug og er en stor åben skrifttype med en høj x-højde (højden på et lille x). Dette gør den let at læse på skærmen Verdana: Denne skrifttype er desginet til at være let at læse i lille størrelse på en skærm. Den høje x- højde (højden på et lille x), de brede propertioner og den store afstand mellem bogstaverne, er alt sammen med til at gøre skrifttypen meget let at læse. Selv i små størrelser. Arial & Verdana: Denne skrifttype er også en meget ubredt skrifttype. Den blev designet i 1982 og opfattes som en af de mest moderne sans serif skrifttyper. Arial har en lavere x-højde (højden på et lille x) end Verdana. Endvidere er skriften mere kompakt med mindre afstand mellem typerne. Det gør at Arial ikke kan bruges i så små størrelser som Verdana. Serif skrifttypen: som brødtekst kan det anbefales at bruge en Serif skrifttype. Serif har små fødder der danner en linje, som øjet følger når man læser. Skrifttypen er også kendtegnet ved de tynde hårstreger og elegante svungne linier. De fine hårstreger og de skrå linjer i fødderne giver dog problemer på computerskærme med lav opløsning, hvor Skriften kan blive hakket og pixeleret. Men efterhånden som skærmenes opløsning er blevet højre, er problemet blevet mindre. Serif skrifterne signalerer tradition, historie og gammeldags værdier, når de bliver brugt på nettet. En af de bedste serif skrifttyper til netbrug er Georgia. Georgia er designet til skærmbrug og er en stor åben skrifttype med en høj x-højde (højden på et lille x). Dette gør den let at læse på skærmen Verdana: Denne skrifttype er desginet til at være let at læse i lille størrelse på en skærm. Den høje x- højde (højden på et lille x), de brede propertioner og den store afstand mellem bogstaverne, er alt sammen med til at gøre skrifttypen meget let at læse. Selv i små størrelser. Arial & Verdana: Denne skrifttype er også en meget ubredt skrifttype. Den blev designet i 1982 og opfattes som en af de mest moderne sans serif skrifttyper. Arial har en lavere x-højde (højden på et lille x) end Verdana. Endvidere er skriften mere kompakt med mindre afstand mellem typerne. Det gør at Arial ikke kan bruges i så små størrelser som Verdana.