DESIGN TIL DIGITALE KOMMUNIKATIONSPLATFORME. 3. Oktober 2013 #5 Genre, stil og billeder

Transkript

1 DESIGN TIL DIGITALE KOMMUNIKATIONSPLATFORME 3. Oktober 2013 #5 Genre, stil og billeder

2 DAGEN I DAG Genre og stil [Pause] Det digitale billede og Projekt idébørs [Pause] Individuel obligatorisk øvelse

3 EVALUERING I uge 45 ( november)

4 GENRE & STIL

5 GENRE A genre classifies a group of objects with common or related expressions. Genres are convention-based frames of reference shared by and connecting senders and recipients. Ida Engholm (2008)

6 HVAD KAN VI BRUGE GENREBEGREBET TIL? Klassificere og segmentere Fungere som rammer og målsætninger Forventninger og forståelsesrammer Eksperimentere og differentiere. I konstruktionen af f.eks. et website vil det altid være relevant at forholde sig til webgenren og udnytte den viden.

7

8

9

10

11

12

13 INTRODUKTION TIL GENRER Det handler om ligheder og forskelle. - Genrer ligger ikke fast - De bliver genereret af os - En slags underforstået konvention mellem afsender og modtager. Dvs. at der ikke eksisterer faste genrer inden for webmediet - ingen rigtige eller forkerte. Webgenrer udvikler sig og opstår kontinuerligt.

14 FORVENTNINGSSKABENDE Our definition of genre is based on a claim that genres on the web act to generate expectations. They establish a conceptual and cognitive framework building on norms and conventions... Ida Engholm (2005)

15 FACILITERER KOMMUNIKATION...the phenomenon of genre serving to increase the efficiency of communicating by providing a frame of reference shared by sender and receiver. Ida Engholm (2005)

16 FACILITERER HANDLEN...recognition facilitating social and commercial interaction Ida Engholm (2005)

17 BRUGERVENLIGHED Forventning sådan plejer det at virke Genkendelse sådan plejer det at se ud og være placeret Et hav af ikke nedskrevne web-konventioner, som har betydning for brugernes interaktion med websitet. Websider benytter sig ofte af de samme funktionaliteter og grundlæggende opbygning, hvorved brugeren har vænnet sig til at websider ser ud og fungerer på en bestemt måde.

18 BRUGERVENLIGHED Brugernes udbredte forventning til, hvordan elementer fungerer og ser ud kan med usability-briller ofte gøre det problematisk at afvige fra konventionerne. Konventioner (og genrer) er bl.a. et resultat af brugerne men også af udviklerne og teknologien. Usability-functionalism (Ida Engholm, 2008)

19 NIELSEN NORMAN GROUP

20 HVAD SKABER EN GENRE? Genres are generated by the repetition of phenomelogical constellations - such as textual content, navigational elements, layout, graphics, the use of dynamic or static images and colour range. Ida Engholm (2005)

21 KONVENTIONERS EVOLUTION

22 KONVENTIONERS EVOLUTION

23 KONVENTIONER Ved at arbejde konventionelt sikrer man at brugerne: Ved, hvilke hovedtræk, de skal forvente. Ved, hvordan disse hovedtræk ser ud. Ved, hvor de skal finde disse hovedtræk på websitet. Ved, hvordan de skal bruge disse hovedtræk for at opnå deres mål. Ikke skal tænke over meningen med ukendte design elementer. Ikke mister vigtige emner, fordi de overser ikke-standard element. Ikke skal have ubehagelige overraskelser, når noget ikke virker som forventet. The Need for Web Design Standards, Jacob Nielsen, nngroup.com/articles/the-need-for-web-design-standards/

24 STIL...i praksis er det gennem genren, at producenter skaber konventionsbestemte forventninger til et produkt, og det er gennem stilen, at man positionerer og differentierer sig. Ida Engholm (2004)

25 STIL Stil individualiserer et produkt inden for en bestemt genre. Stil møder og udfordrer brugernes forventninger. Genre grupperer og kategoriserer, mens stil modificerer og udvikler. Ved hjælp af en bestemt udtryk kan designeren skabe kreativ støj - en stil. Stil er dog, ligesom genren, et redundant fænomen, da et bestemt udtryk først bliver en stil, når det går igen og kan genkendes fra website til website (Charlie Breindahl, 2006).

26 GENREBRUD Our definition of style is based on the concept that style on the web serves to provide differentiation within a genre and in this function may break with norms of a genre. Ida Engholm (2005)

27 RISIKO Et middel til at skabe normbrud er at lade sig inspirere og introducere stilarter og virkemidler fra andre genrer. Normbrud kan være en måde at differentiere sig på og stå bedre i konkurrencesammenhænge. Eksempelvis basisbank (Engholm, 2005). Kan med tiden skabe nye genre-konventioner. Men normbrud er selvfølgelig ikke et sikkert middel til succes (jvf. forventninger) og er derfor forbundet med risiko.

28 I DAG

29 GENREANALYSE Æstetik Brugskontekst Form/heterogen, multimedial konstruktion Teknisk konstruktion Brugerfunktionalitet Analysemodel for websites, Ida Engholm (2003)

30 GENREANALYSE Teknisk funktionalitet knytter sig til struktur og det materiale eller medium, der danner grundlaget for objektets udformning. Brugermæssig funktionalitet relaterer sig til sitets anvendelse (bestemt af de navigationelle og interaktive bruger-interface-aspekter). Æstetiske dimension er knyttet til de mere udefinerbare forhold, der vedrører de emotionelle og nydelsesmæssige effekter, et website bibringer brugeren. Form er betinget af både den tekniske funktionalitet, de brugsmæssige og de æstetiske aspekter, summen af websitets karakteristika. Mange af ovenstående karakteristika er kontekstuelt betinget, idet de tolkes individuelt. Derfor indgår brugskonteksten i modellen, da webdesign ikke kan betragtes isoleret fra brugssammenhængen. Ida Engholm (2003)

31 STYLE TILES STYLE TILES Værktøjer til at sikre design, udtryk og visuel identitet

32 STYLE TILES Det modsatte af wireframes Skrifttyper, farver, UI-elementer, teksturer osv. Former og formidler den visuelle identitet og udtryk Et redskab i designprocessen Tester grundidéer af tidligt og formidler dem (lav flere)

33 STYLE TILES EKSEMPEL #2 Logo Mulige farver Teksturer Adjektiver Typografi Knapper Baggrund Centralt indhold Version

34 STYLE TILES EKSEMPEL #2 Logo Mulige farver Teksturer Adjektiver Typografi Knapper Baggrund Version

35 AT BRUGE STYLE TILES Lyt, observer, spørg og diskuter (brugere, afsender, team) Fortolk og oversæt feedback til Designelementer: Linjer, farver, former, typer, mønstre, rum, tekstur Designprincipper: Enhed, harmoni, balance, rytme og vægt Skab et visuelt udtryk i form at dine style tiles Gentag! Ved at udvikle videre på dine stilistiske elementer skærper du dit visuelle sprog Fordele: Hurtig visualisering af designidéer = nemmere at få feedback undervejs Dokumenterer din iterative designproces Rummer de responsive rammer i design i dag

36 PAUSE 10 minutter Clayton Good Morning (Pinterest):

37 DIGITALE BILLEDER DIGITALE BILLEDER Ganske kort

38 Why describe something when you can simply and more memorably show it? Webstyle Guide 3 rd Edition (2009

39

40

41

42

43

44

45

46 PHOTOSHOP

47 BITMAPS Rasterbilleder

48 BITMAPS Rektangulært grid af pixels (pic picture elements). Opløsning: Bredde x højde i pixels. 10 x 10 = 100 pixels. BIT: Binary digit En bit er et binært tal (kan være én af to muligheder). Farvedybde: Mængden af information (BITs) i hver pixel.

49 BIT DEPTH 1 bit = 2 farver 2 = 2 2 bit = 4 farver 2 * 2 = 4 3 bit = 8 farver 2 * 2 * 2 = 8 4 bit = 16 farver 2 * 2 * 2 * 2 = 16 5 bit = 32 farver 2 * 2 * 2 * 2 * 2 = 32 8 bit = 256 farver 2 * 2 * 2 * 2 * 2 * 2 * 2 * 2 = 256

50 FARVEDYBDE bit 57 % 89% bit 41 % 5 % bit 1,7 % 5 % 4. 4 bit 0,05 % Kilde: fdim.dk/statistik/teknik/farvedybde

51 INDEXED COLOUR Bruger få farver (fra 2 til til 8 BIT) Color Look-Up Table (CLUT) eller Palette. Hver farve i paletten har et index. Hver pixel refererer til et specifik index. Fil formater: PNG-8, GIF.

52 INDEXED COLOUR Farvetabel Hver enkelt pixel i et indekseret farvebillede rummer numeriske referencer til farvetabellen for billedet. Farvetabellen matcher numrene til RGBfarveværdier. Dette er en tabel for et 2 bit-billede med kun 4 farver Billedet vises med farverne på plads

53 DITHER En web-sikker farve kan vises uden at farven skal blandes (dither).

54 ALIASING Hårde overgange fra pixel til pixel kaldes for aliasing. Ved anti-aliasing mikses overgange og gøres blødere. Der findes forskellige styrker af anti-aliasing. Aliased Anti-aliased

55 VEKTORER Vektorer er baseret på matematiske forhold som placering, retning og skalering. Kan derfor skaleres uendeligt uden at blive pixeleret. Fil-formater:.eps (Encapsulated PostScript),.ai (Adobe Illustrator),.svg (Scalable Vector Graphics),.pdf (Portable Document Format).

56 VEKTORER

57

58 FORSKELLIGE VISNINGSFORHOLD Billeder kan i nogle sammenhænge på web være bedre helt at fjerne. Eksempelvis på meget små skærme eller i print. Brug media style sheets, flere billeder og only screen and only screen and (min-device-pixel-ratio:2) CSS: selector { display: none; }

59 FORMATER & KOMPRIMERING

60 HVILKET FORMAT TIL HVAD? PSD JPG ORF TIFF PDF GIF? RAW SVG AI BMP PNG EPS

61 HVILKET FORMAT TIL HVAD? PSD JPG ORF TIFF PDF GIF RAW SVG AI BMP PNG EPS

62 VALGET AFHÆNGER AF: - Billedets natur: Er billedet naturtro med en masse bløde overgange eller diagramlignende med hårde kanter og linjer. Effekten af forskellige typer af filkompression på billedkvalitet. Effektiviteten af en kompressionsteknik som sikrer den mindste filstørrelse, som ser godt ud.

63 FORMATVALG GIF PNG8 PNG24 JPG PNG

64 GIF Graphic Interchange Format Indexed billede med maksimalt 8 bits pr. pixel (256 farver) Lossless kompression (intet kvalitetskompromis i kompressionen - enten eller ). God når ensfarvede områder skal komprimeres. Ikke god i forbindelse med gradienter og fotografier. Kan indeholde gennemsigtige områder med bratte overgange. Kan indeholde flere billeder i en animationsrækkefølge.

65 JPG Joint Photographic Experts Group. RGB 24-bit farve billeder. Lossy kompression: Ikke optimalt for ensfarvede områder. Optimalt til fotografier. Mulighed for at specificere graden af kompression. Ingen gennemsigtighed.

66 LOSSY VS. LOSSLESS JPG 218KB GIF 254KB

67 PNG Portable Network Graphics Udviklet til nettet. 24- eller 48-bit farve, 16-bit greyscale eller 8-bit indexed. Lossless kompression: Bedre kompression end GIF, større filer end JPEG. Anbefalet til fotografier med skarpe overgange, eksempelvis grafik som indeholder både fotografier og tekst. 8- eller 16-bit alpha channel (fuld gennemsigtighed) Understøttes ikke af gamle browsere.

68 DE ANDRE FORMATER PSD: Adobe Photoshop fil, redigerbar, fortrukkent format til webudvikling og overlevering. TIFF: Et billede format som kan indeholde lag, samme kompression som JPG. Raw: Råbilledet (ikke autoformateret af kameraet) fra professionelle digitale kameraer. BMP: Microsoft Windows native billede format.

69 DE ANDRE FORMATER EPS: Primært til vektorgrafik, men kan også indeholde bitmaps og raster effekter (som er inkluderet i filen). AI: Adobe Illustrator format (primært vektorgrafik). SVG: Vektor-format til internetbrug (HTML5). PDF: Et format som kan indeholde vektor, tekst og bitmaps (AI-formatet). Plus mange, mange flere...

70 HVOR STORT SKAL BILLEDET VÆRE?

71

72

73 BILLEDER REPRÆSENTERER INFORMATION

74 INFORMATION FYLDER

75 KOMPRIMERING ER NEMMERE, NÅR: - antallet af farver reduceres eller begrænses - der er færre detaljer eller skarpe kanter - der er mere plads, flade farver eller gradueringer - der er mindre essentiel information

76 OPLØSNING & PIXEL- DENSITET

77 PIXEL DENSITET Opløsning Densitet (PPI) iphone x Galaxy SIII 720 x ipad x MacBook Pro Retina 2880 x WSXGA+ 15, Thinkpad T410i 1280 x WSXGA Især vigtigt nu med high resolution displays (som f.eks. retina)

78 PROJEKT IDÉBØRS

79 ØVELSEN I DAG ØVELSEN I DAG Der vil være vanskeligheder. GoogleDocs muliggør kommentarer.