Designeren og Content Management Systemet 16. november 2006 | DGH

Mig Communications Manager og medstifter af Synkron (vi laver Content Management Systemer) Synkron Arbejdet med formidling på nettet siden ’95 Alter ego: Asynkron – –

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

Webdesign

Status over nettet

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

Mediet bestemmer indholdet

finsk google

finsk avis

finsk nokia

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

Hvad er godt webdesign?

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

CMS

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

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

Hvad er problemet? ≠

Skabelonbaseret publicering

Proces-styring: Workflow

Ex: Synkron Via CMS

Ex: WordPress

Designeren

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”

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

Modtageren er selv designer GreasemonkeyRSS/XML

Hvor mange skal der til at lave et website?

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

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

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

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...)

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

Manglende overholdelse af standarder er dårligt webdesign

Schur

Computerworld

ao-online

ASE

Virk.dk

Sonofon

KOT

Arla

Designmanualen Se blog.webdesignmanuals.comblog.webdesignmanuals.com

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?

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

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

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

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

KUM - sidestruktur

Sidestruktur

Designelementer Farver Skrift Link Navigation Logo Billedbrug Mediebrug

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

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

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

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

Klasse:Normalt link Farve:HEX 0000FF, RGB Klasse:Besøgt link Farve:HEX , RGB Klasse:Aktivt link Farve:HEX FF0000, RGB Klasse:Hover Farve:HEX FFFFFF, RGB Baggrund:HEX 0000FF, RGB Dekoration:Ingen

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

Logo Palcering Funktion

Billedbrug Størrelser og placeringer ALT-tekst Rammer Indhold

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

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?

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

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

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

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

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”

Tak for opmærksomheden Kontaktinformation Tlf: Mail: IM: Skype: andreas-johannsen Publicerer på Blog: Firma: Bog: blog.webdesignmanuals.comblog.webdesignmanuals.com Links: del.icio.us/andjohandel.icio.us/andjohan Flickr: 23: