Et er søkort at forstå, et andet, skib at føre. Guidelines for udvikling af nyhedsgrafik.
ÉT STYKKE MED GRAFIK, TAK! MAX ONE SIZE DOES NOT FIT ALL På de følgende sider redegøres der for en række principper hvis formål er at skabe bedre visuel synergi mellem den enkelte nyhedsgrafik og det overordnede udtryk på dr.dk. Ambitionen er at kortlægge en tilgang til produktionen, således at den kan tilgås og deles i hele DR. Da ikke to stykker data er ens, hverken i tema eller omfang, bør det følgende fortolkes som vejledende. MIKRO MAKRO Vi arbejder med et bredt spænd af indhold på tværs af nyhedsgrafikker på dr.dk. Nogle grafikker er lette, både i tema og datamængde og indeholder blot et enkelt stykke data (makro). Andre er mere komplekse og indeholder flere lag af informationer, fra det overordnede billede, til den underliggende og mere specifikke data (mikro). Begge yderpunkter kræver forskellige tilgange, men det er god praksis at sætte sig ind i omfanget af data i den ekelte grafik, før produktionen startes. Dette vil hjælpe til en naturlig kategorisering af data, til hjælp både i design og kompositionsfasen. MIKRO DATA INTERAKTION MAKRO DATA UNIVERS MIN
DATA ANALYSE Inden start bør man altid læse data grundigt igennem. Find ud af hvilke parametre der er i spil, for bedst at kunne vurdere, hvilke visualiseringsgreb der er optimale for formidling af den enkelte data. Et eksempel kunne være : Antallet af datavisualiseringer er steget med % siden 08, i sammenhæng med at 1 ud af 10 nyhedsgrafikere får stillet diagnosen stress. I dette tilfælde vil man eks. arbejde med parametrene: Tid, Udvikling og Forhold METODE Denne analyse vil hjælpe med til at definere den bedste måde at tilgå visualiseringen på. Eksempelvis vil et histogram være en velegnet måde at vise kombinationen af: Tid, Udvikling og Forhold på. Andre ekempler ville være: TID RUM OBJEKT VOLUMEN FORHOLD UDVIKLING FREKVENS Histogram, Tidslinie, Gantt Chart, Progression Chart Kartogram, Density Map, Målestoksforhold Teknisk Tegning, Exploded View Pie Chart, Carroll Diagram, Bar Chart Bar Chart, Venn Diagram, Spider Chart Family tree, Sankey diagram, Bachmann Diagram Radar Chart, Scatterplot, Tabeller 2
40 60 60 60 60 60 60 60 60 60 60 40 FUNDAMENT GRID Grundlæggende for enhver grafik er, at den i sidste ende skal integreres på dr.dk - det er derfor vigtigt altid at arbejde ud fra det grid, der ligger til grund for dr.dk Som udgangspunkt er griddet opdelt i 3 over- samt 12 under-kolonner. Det er vigtigt at venstrestille grafiske elementer (billeder, forme, etc.) og skrift efter disse, da det vil skabe en ensretning af marginer på den enkelte side, hvor grafikken i sidse ende skal optræde. STOR TEMA GRAFIK Det er derfor vigtigt at kende præmissen for, hvor grafikken skal optræde og om den er i forbindelse med en artikel for at få defineret af hvilken skabelon(er) der arbejdes udfra. 40 60 60 60 60 60 60 60 60 60 60 40 BILAG formatering.ai DR.DK DESIGNFUNDAMENT http://www.dr.dk/assets/documentation/base-grid ARTIKEL MOBIL
DATA VISUALISERING Elementært, min A B C D E kære Watson... KONSTRUKTION Tilgå kontruktion af elementer via et, 40, 60px. princip, således at alle elementer kan indgå i grafikken under samme præmis. På denne måde sikres et uniformt udtryk i data laget på tværs af forskellige temaer, universer og illustrationer. Hold stilen klar og tydeligt, arbejd i fast form. og komponér elementer efter skabelon grid. Disse elementer bør tænkes som fleksible moduler, der let kan genbruges fra opgave til opgave. Se flere eksempler på konstruktioner i bilag. 33% 42% 87% X PX BILAG konstruktion.ai
KONSTRUKTION - EKSEMPLER 1990 00 14 1960 1965 1970 1975 1980 1985 M K 33% 42% 87% 23% 75% 100% 64% 64% 80% 100% LABEL XXXXXXXXX LABEL 88 A B C D E GRUPPE 1 GRUPPE 2 LABEL XXX
FARVER UDVIDET PALETTE FLERE FARVER Vigtigt for en dynamisk grafik er brug af farver. Derfor anbefales det at gøre brug af en en udvidet farvepalette i forhold til den eksisterende dr.dk designguide. Den udvidede palette vil kunne bruges til langt de fleste situationer, da den indeholder en fuld farveskala med 6 toninggrader + skraverings mønstre i gråtoner. Farvevalg bør så vidt muligt begrænses til denne palette. For specifikke farvekoder i RGB værdier, se bilag. BILAG farvekoder.ai DR.DK PALETTE
FARVEBRUG Krig og Katastrofe Sport Børn og Unge Det er god praksis at vurdere hvilket emne der arbejdes med i forståelsen af, hvilken palette der er egnet til formålet. Dette er ikke en absolut måde at tilgå farveholdning på, men derimod en hjælp til at definere stil og tone. En god palette bør indeholde følgende: Teknologi og medier Bolig og Livsstil Religion og Tro Farver eller toner der kan agere i kontrast til hinanden, til brug i situationer, der kræver opdeling (eks. mellem canvas og typografi). En klar accentfarve til at generere fokus på relevante data, eller interaktive elementer. Politik og Samfund Natur og Miljø Penge og Industri En skala af toner, der kan agere som teksturfarver. OPBYGNING Kontraster Accent Skala
SKRIFT BEST PRACTICE For at opnå et samlet udtryk, der kommunikerer klart og tydeligt, at DR er afsender, er det vigtigt at følge anvisningerne relateret til brug af skrift nøje. Vær opmærksom på, hvordan placering af margin vil skifte i forhold til forskellige kolonne-skabeloner, da der altid arbejdes med en padding på px i både venstre og højre side af formatet. Overholdes dette ikke, vil tekstmarginer ikke flugte med resten af indholdet i artiklen eller generelt på dr.dk PADDING PX. Gibson Semibold Header 54pt. GIBSON REGULAR MANCHET 18PT. Georgia til rubrik tekst. 14pt. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. PADDING PX. Gibson Semibold Header 30pt. GIBSON REGULAR MANCHET 14PT. Georgia til rubrik tekst. 14pt. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum. Brug KUN Gibson til Overskrifter, og Georgia til rubrikskrift. Arbejd med skriften som anvist, overhold generiske skriftsnit og størrelser. VENSTRE MARGEN IFT. PADDING VENSTRE MARGEN KOL. 2 VENSTRE MARGEN KOL. 3 REFFERENCE LIST ITEM # 1 REFFERENCE LIST ITEM # 1 REFFERENCE LIST ITEM # 1 Hvis du er i tvivl om guidelines for brug af skrift, kan information tilgåes via dr.dk s designfundament. REFFERENCE LIST ITEM #2 REFFERENCE LIST ITEM #3 REFFERENCE LIST ITEM #2 REFFERENCE LIST ITEM #3 REFFERENCE LIST ITEM #2 REFFERENCE LIST ITEM #3 VENSTRE MARGEN IFT. PADDING VENSTRE MARGEN IFT. PADDING VENSTRE MARGEN KOL. 2 REFFERENCE LIST ITEM # 1 REFFERENCE LIST ITEM # 1 REFFERENCE LIST ITEM # 1 REFFERENCE LIST ITEM #2 REFFERENCE LIST ITEM #2 REFFERENCE LIST ITEM #2 DR.DK DESIGNFUNDAMENT http://www.dr.dk/assets/documentation/base-type REFFERENCE LIST ITEM #3 REFFERENCE LIST ITEM #3 REFFERENCE LIST ITEM #3
ILLUSTRATION Formel 1 DETALJEGRAD V6 turbo engines 1,6 liter Omdrejningshastighed på op til 15.000 i minuttet Effekt på 600 hk Da ikke to illustratorer arbejder på samme måde, vil det følgende skulle forståes som vejledende. For at kunne arbejde med illustrationsuniverserne, på en måde som komplimenterer den generelle stil og tone for dr.dk, bør kodeordene være: Enkelt, Afkodeligt og Struktureret. 95cm høj Ved at arbejde i et enkelt formsprog og en systematisk komposition, skabes der mindre forvirring og samtidig gøre den egentlige data lettere forståelig. 463cm lang Høje kontrastforhold samt brugt af accentfarve er med til at gøre oplevelsen dynamisk. Undgå at arbejde i monokrome illustrationer og mørke baggrunde, da disse kan virke tunge og ude af trit med den generelle stil og tone på DR.dk Med et enkelt, formfast udtryk gøres nedskalering af komplekse objekter lettere aflæselige i mindre formater som eks. mobile skærme. Bilerne skal mindst veje 161kg Inklusiv føreren - eksklusiv benzin Tophastigheden varierer fra sæson til sæson, men der bliver som minimum kørt med 300 km/t I de hurtige sving kan han udsætte sig selv for 2-3,6g vandret acceleration Dæk er altid Pirelli gummi Dækkende har et tryk på 1,4 bar og er oftest pumpet op med nitrogen, da det har et mere stabilit tryk end luft. Under hård opbremsning generer en formel 1 bil 5 g-kræfter. Til sammenligning kan hurtigere rutchebaner på de lodrette stræk give en g-påvirkning på op mod 4.5g. Der er placeret fem kameraer på bilen. Et kamera bagerst og to på næsen. (Re-design af eksisterende nyhedsgrafik)
ANVISNINGER Undgå at arbejde i flydende gradienter. Brug istedet tringradienter til at illustrere lys/skygge effekter. Undgå at arbejde tre-dimensionelt. Tænk dit emne fladt og to-dimensionelt, dette vil give en bedre synergi med andre grafikker samt skriftens udtryk. Undgå brug af outlines (strokes), når der udvikles piktogrammer eller bomærker. De bliver svært læselige i små størrelser. 31 5 31 5 Undgå overlappende elementer i grafikken. Informationen bliver ulæselig og udtrykket rodet. DATA Brug altid Gibsonskriften efter anvisningerne i forbindelse med illustrationer. Andre skriftvalg virker ukorrekt og rodet. Undgå at bruge mange referencelinier, der kan let opstå forvirring i overblikket. Brug i stedet et minimalt antal af linier, der ikke overlapper hinanden. Undgå at arbejde med analoge udtryk eller håndtegning. Opløs gerne dit emne i geometriske primitiver for et renere udtryk. Brug aldrig teksturer eller anden bitmapgrafik i illustrationerne. Brug i stedet skraveringer og efterstræb altid at illustrere i vektorer. Dropshadow og andre flydende skygger hører ikke hjemme i en infografik. De hæmmer enkeltheden og fjerner fokus fra informationen. A Smarte effekter som Bevel/Emboss, Vignetter eller lignende hører ikke hjemme i et rent udtryk. Undgå helt at bruge dem.
ILLUSTRATION Eksempler BILAG illustrationer.ai L M S D 3 A B E C 1 4 5 F 2
INTERAKTIVE LAG De fleste ulykker sker i hjemmet MAKRO På et overordnet niveau bør mængden af data ikke overvælde beskueren. Det handler om at få et overblik. Tydeliggør klart, hvilke områder der er mulige at tilgå via interaktion (her vist med info (i) symboler samt via en undermenu). Vurdér hvilken metode, der vil være bedst egnet ift. situationen. TRYK FOR MERE INFO MIKRO & MAKRO Mikroniveauet handler om fokus på en bestemt data. Det er en god ide at dedikere plads i formatet til mikroinformationerne, således at de ikke konflikter med makroniveauet. Ved brug af pop-up bokse i grafikken kan man risikere at miste overblikket ved at tildække andre data. GARAGEN TAGET TERASSEN BAGTRAPPEN HAVEN STUEN De fleste ulykker sker i hjemmet Bagtrappen Bagtrappen LOREM IPSUM DOLOR SIT Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequa. GARAGEN TAGET TERASSEN BAGTRAPPEN HAVEN STUEN A B C D LOREM IPSUM DOLOR SIT Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.
EKSEMPEL De fleste ulykker sker i hjemmet De fleste ulykker sker i hjemmet TRYK FOR MERE INFO Bagtrappen LOREM IPSUM DOLOR SIT Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.
FORMATERING TIL MOBIL BROWSER INFORMATION OVERLOAD Ofte kan mængden af data i en enkelt grafik være for kompliceret til at konvertere direkte til mobilens lille skærm. Undgå at presse alle informationerne ned i størrelse, da de let kan blive svære at aflæse. Dataerne bør indeles i mindre afsnit, således at de er lette at aflæse, blot én af gangen. DATA IMPLEMENTERING De enkelte afsnit kan præsenteres i en karrusel eller som slides enten med eller uden navigationselementer eller som data i listeform uden illustration. MOBIL D A T A
EKSEMPEL 1. Oversigt 2. Konfrontationer Hviderusland Krisen i Ukraine Polen Russisk talende BILAG Den ramte region Rusland Lviv Krisen i Ukraine Ukraine Gorlivka Moldova 40.000 Rumænien Novorossjysk Donetsk Russisk som modersmål Lugansk 25-49 % 50-74 % Artemivsk 25-49 % Mariupol 50-74 % Kramatorsk 1.750 Russiske Soldater Gorlivka Makiivka Odessa Donetsk Lugansk Rumænien 25.000 Novorossjysk 4. NATO Styrker 3. Russiske Tropper Byer, ramt af Sammenstød Krisen separate aktioneri Ukraine NATO Styrker Russiske tropper Rusland Kijev Kijev Lviv Lviv Novorossjysk NATO Tropper Krisen i UkraineByer Rusland 1 3 Byer, ramt af separate aktioner Sammenstød Sevastopol 75-100 % 1.750 Odessa 40.000 Ukraine Ukraine 2 25.000 75-100 % 25.000 Slovakiet Russisk som modersmål Odessa RussiskSlavjansk som modersmål 0-24 % Moldova Makiivka Sevastopol Samlet nær grænsen Ukraine Ungarn Kramatorsk 1.750 0-24 % Lviv Mariupol Odessa RuslandUngarn Kijev Artemivsk Ukraine Slovakiet Polen Slavjansk Kijev Lviv Hviderusland 25-49 % Krisen i Ukraine Kijev eksempel_ukraine.ai 0-24 % Rusland Moldova Odessa 4 25.000 25.000 50-74 % 75-100 % Sevastopol Sevastopol Novorossjysk Nabolande med NATO Styrker Russiske Soldater Byer, ramt af separate aktioner Sammenstød NATO Tropper Byer 1 Polen 2 Slovakiet 3 Ungarn Sevastopol 4 Rumænien Novorossjysk 40.000 Russiske tropper opstillet nær grænsen. Land By
KVALITETS KONTROL ALTID AFPRØVE, ALDRIG ANTAGE Inden implementering er det vigtigt at teste grafikken sammen med det generelle udtryk på DR.dk Brug PSD-filerne til at danne dig et indtryk. Du kan downloade dem fra designfundamentet. Kig efter om marginer flugter, om skriften står i de rigtige størrelser og om den gennerelle vægtning af elementer komplimenterer udtrykket på resten af sitet. Krisen i Ukraine Hviderusland Rusland Polen 40.000 Kijev Lviv Samlet nær grænsen Slavjansk Ukraine Artemivsk Mariupol Slovakiet Kramatorsk 1.750 Ungarn Moldova Gorlivka Makiivka Odessa Donetsk Lugansk Rumænien Russisk som modersmål 0-24 % DR.DK DESIGNFUNDAMENT http://www.dr.dk/assets/documentation/#concept 25-49 % 25.000 25.000 50-74 % Russiske Soldater 75-100 % Byer, ramt af separate aktioner Novorossjysk Sevastopol Sammenstød NATO Tropper Byer LABEL XX XXXXXX
A 33% AMBITION 80% 42% 87% 23% 75% 100% 64% 64% A Gruppe 1 Gru 15 Header 48pt. Subheader 24pt. Manchet 18 pt. Lorem ipsum dolor sit amed. M K 1965 1970 1975 1980 1985 1990 00 14 Rubrik 14pt. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat. LABEL LA Dropdown Lorem Ipsum dolor sit amed 85% NYHEDGRAFIKKER I DR UDTRYK Lorem Ipsum dolor sit amed 15% ABSTRAKTE NYHEDSGRAFIKKER Dropdown Lorem Ipsum dolor sit amed Lorem Ipsum dolor sit amed PDF Dropdown Lorem Ipsum dolor sit amed Lorem Ipsum dolor sit amed LABE