Designeren og Content Management Systemet 16. november 2006 | DGH.

Præsentationer af emnet: "Designeren og Content Management Systemet 16. november 2006 | DGH."— Præsentationens transcript:

1 Designeren og Content Management Systemet 16. november 2006 | DGH

2 Mig Communications Manager og medstifter af Synkron (vi laver Content Management Systemer) Synkron Arbejdet med formidling på nettet siden ’95 Alter ego: Asynkron –www.asynkron.dkwww.asynkron.dk –www.synkron.dk/weblogwww.synkron.dk/weblog andreas.joh@nnsen.dk

3 Hvad? Hvorfor er det her interessant? Webdesign: Mindre flip og mere værktøj Hvad er CMS? Designerens rolle i CMS Designmanualen

4 Webdesign

5 Status over nettet

6

7 Nettets hippieperioden er slut, siger Gerry McGovern Gerry McGovern Professionalisering af –webdesign –kommunikation –teknik Genrer for webdesign opstår Værktøjerne modnes (CMS)

8 Mediet bestemmer indholdet

9 finsk google

10 finsk avis

11 finsk nokia

12 Konvetionerne er her! Konvention  Genre Der er genrer og konventioner overalt Faste formater for kommunikation Genkendelse fremmer forståelsen Konventioner på nettet –Genrer af sites –Konventioner for design

13 Hvad er godt webdesign?

14

15

16 Værktøj Kunstværk Det kommer an på hvilket forretningsmæssigt formål, sitet skal understøtte

17 CMS

18 Omfanget af indhold exploderer Tekstbehandling Andre værktøjer Fotos Illustrationer Webmasteren bliver en flaskehals…

19 En CMS-model for indhold Content Management har tre hovedområder: Opsamling, behandling og publicering

20 Hvad er problemet? ≠

21 Skabelonbaseret publicering

22 Proces-styring: Workflow

23 Ex: Synkron Via CMS

24 Ex: WordPress

25 Designeren

26

27 10 things I hate about you 1.I vil have, at designet skal være cutting edge 2.I elsker Flash (-introer) 3.I synes, firmaets skrift som tekst i grafik er fint og identitetsskabende 4.I kan ikke lide navigation og gemmer den i drop-downs 5.I optimerer sites til Windows Internet Explorer 6.I låser vinduer fast i størrelse 7.I designer sider efter, at de ikke må scrolle 8.I sætter tekst for alt, alt for lille 9.I ser sitets forside som en forside på en brochure 10.I synes, brugsoplevelsen skal være ”interaktiv” og ”spændende”

28 Web som medium "Medieteknologi" –Mediets tekniske konfiguration styrer mulighederne for design og kommunikation –Forskelle mellem tryk og web? Hvem styrer præsentationen? –What Do I know?What Do I know? –CSS Zen GardenCSS Zen Garden –Designeren panikker! (og 2)Designeren panikker!2 Nye præmisser: Modtagerstyret præsentation

29 Modtageren er selv designer GreasemonkeyRSS/XML

30

31 Hvor mange skal der til at lave et website?

32 Informationsdesigner/-arkitekt Interaktionsdesigner SEO-ekspert Usability-ekspert Tilgængelighedsekspert Grafisk designer AD'er Front-end koder/ HTML-udvikler Back-end koder/ Systemudvikler Projektleder Tekstforfatter IT-konsulent IT-arkitekt Webdesigner Webkoordinator Webredaktør Management- konsulent

33 Specialisering Webmasteren (generalisten) er død Både implementering og drift af et website bliver specialiseret arbejde Adskillelse af design, teknik og indhold med brugerrettigheder og opdelte interfaces Designeren kommer til at fokusere på... design – og de mere komplekse dele af dette (dokumentation, CI, strategisk brug) –og ikke om et bestemet JavaScript fungerer lige godt i både Firefox 2 på Mac og i Internet Explorer 7 på Windows

34 Fokusskifte for kunden Tidligere var designet det afgørende for sitet (og kunden) Nu er det kommunikationsprocessen og forretningen, der er i fokus for kunden Design bliver en sekundær disciplin Ledelse Chefredaktør (webansvarlig) Redaktør Forfatter Moderator Korrekturlæser Bidragyder Informations- arkitekt HTML-koder Systemadministrat or Grafisk designer Usability-expert Marketingchef

35 Alt det tekniske... Hvorfor er teknikken så meget i fokus? –I kender det også fra PostScript, PSD og AI versioner... –Ung teknologi Standarder er vigtige –Mediet er plastisk, og indhold skal kunne transformeres (RSS, XML, XHTML...)

36 Skal desigeren vide noget om kode? Præsentationsstandarder –XHTML 1.o Transitional –CSS2 –XSLT –W3C WAI WCAG Designere skal kunne træffe teknologiske valg, fordi de har betydning for præsentationen og oplevelsen deraf... –Det er ikke anderledes end når man skal tage stilling til papirkvalitet, trykketyper etc

37 Manglende overholdelse af standarder er dårligt webdesign

38 Schur

39 Computerworld

40 ao-online

41 ASE

42 Virk.dk

43 Sonofon

44 KOT

45 Arla

46 Designmanualen Se blog.webdesignmanuals.comblog.webdesignmanuals.com

47 En struktureret designproces Eksisterend e design Designmanual? Eksisterende site eller materiale? Teknologi IT-demografi, tilgængelighed, system, modtagerenheder... Site- struktur Hoved- og subsites, kampagnesites, sektioner, ekstranet... Side- struktur Dynamiske/statiske elementer, placering, absolutte/relative angivelser Side- elementer Farver, skrifter, grafik, medier, navigation Formidling Designmanual, på nettet?

48 Hvad skal dokumenteres? Design (udefra-og-ind) –Sitestruktur –Sidestruktur –Sideelementer –...og præsentationsteknologi Programmering og anden teknik Indhold (styleguide) –BBCBBC –EconomistEconomist –SynkronSynkron

49 Hvad skal dokumenteres? Alle dele af design skal dokumenteres – selv fejl "Fejlgalleriet" Design Not FoundDesign Not Found

50 Sitestruktur Vægt på principperne Dokumenter evt kun første til tredje niveau Forside Produkter Med ledninger Med antenner Hurtige Langsomme Tjenester Hosting Drift Konsulenter Om os Kontakt os Investor relations Ledelsen

51 Sidestruktur Typer af elementer (igen konvention) –Navigation –Logo –Værktøj –Sidehoved/-fod –Indhold –Relateret indhold Skil det statiske fra det dynamiske

52 KUM - sidestruktur

53 Sidestruktur

54 Designelementer Farver Skrift Link Navigation Logo Billedbrug Mediebrug

55 Farvevalg Hexadecimal, navn, RGB, CMYK, Pantone  ? Flere enheder for at lette konvertering Angivelse i tekst – ikke grafik

56 Skrift Teknologi – CSS vs. FONT Skriftfamilie: Hvad er egnet? –StandardskrifterStandardskrifter –Læsbarhed Størrelse og skydning –Og enheder! Farve Ekstra formater –Kursiv, fed og tekstdekoration

57 Klasse:Rubrik Skrift: Arial, Helvetica, sans-serif Skriftstørrelse: 1.6 em Skydning:150% Farve:HEX 000066, RGB 0-0-102 Format:Fed Klasse:Mellemrubrik Skrift: Arial, Helvetica, sans-serif Skriftstørrelse: 1.1 em Skydning:150% Farve:HEX 666666, RGB 102-102-102 Format:Fed Klasse:Brødtekst Skrift: Georgia, Times New Roman, Times, serif Skriftstørrelse: 0.7 em Skydning:150% Farve:HEX 000000, RGB 0-0-0 Klasse:Billedtekst Skrift: Georgia, Times New Roman, Times, serif Skriftstørrelse: 0.6 em Skydning:150% Farve:HEX 663300, RGB 102-51-0

58 Links Jakob Nielsen?Jakob Nielsen Konsistens Adskil fra andet indhold Markér ved hover

59 Klasse:Normalt link Farve:HEX 0000FF, RGB 0-0-255 Klasse:Besøgt link Farve:HEX 660066, RGB 102-0-102 Klasse:Aktivt link Farve:HEX FF0000, RGB 255-0-0 Klasse:Hover Farve:HEX FFFFFF, RGB 255-255-255 Baggrund:HEX 0000FF, RGB 0-0-255 Dekoration:Ingen

60 Navigation Navigationstyper Niveauer Tekst, grafik og bullets Horisontal og vertikal Markering af valgt/ikke-valg

61 Logo Palcering Funktion

62 Billedbrug Størrelser og placeringer ALT-tekst Rammer Indhold

63 Multimedia Generelle principper for brug Størrelser Tilladte formater Alternativer for tilgængelighed

64 Præsentationsteknologi I modsætning til trykt kommunikation, er præsentationen afhængig modtageren. Derfor er det vigtigt at dokumenteret dette. Kodestandarder Tilgængelighed – for hvem? –Blinde? –Handicappede? –Brugere med andre browsere?

65 Standarder (ja, det er kedeligt) Kodestandarder –HTML –XML –CSS –JavaScript Browsere –Netscape, Internet Explorer... Tilgængelighed –WAI (Bobby-testen) Offentlige krav –Bedst på nettet

66 Formidling Vigtigt! Det er et værktøj Gør det på nettet Eksempler på designmanualer på nettet Manualer til både tryk og nettet

67 Generelle tips til formidling 1.Gør det visuelt 2.Henvis til ressourcer –Standardgrafikker og -filer –Skrifter –Skabeloner 3.Fokuser på retningslinier og begrund evt, så man senere kan applicere på andet

68 Generelle tips til formidling 4.Manualen er dynamisk Hvornår er den opdateret? Hvad er ændret? Hvem kan man kontakte? 5.Download som PDF

69 Herfra og videre... Gerry McGovern: Content Critical –Tilrettelæggelse af indhold på nettet Web Style Guide –Ikke så meget om, hvordan man dokumenter, men mere om hvordan man griber selve designprocessen an Jeff Veen –Inspirerende synspunkter på webdesign Jeff Zeldman –Design med standarder A List Apart –”For people who make websites”

70 Tak for opmærksomheden Kontaktinformation Tlf: 2620 3221 Mail: andreas.joh@nnsen.dkandreas.joh@nnsen.dk IM: andjohan70@hotmail.comandjohan70@hotmail.com Skype: andreas-johannsen Publicerer på Blog: www.asynkron.dkwww.asynkron.dk Firma: www.synkron.dk/weblogwww.synkron.dk/weblog Bog: blog.webdesignmanuals.comblog.webdesignmanuals.com Links: del.icio.us/andjohandel.icio.us/andjohan Flickr: www.flickr.com/photos/andjohanwww.flickr.com/photos/andjohan 23: www.23hq/andjohanwww.23hq/andjohan