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 20% siden 2008, 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 FUNDAMENT 20 40 20 60 20 60 20 60 20 60 20 60 20 60 20 60 20 60 20 60 20 60 20 40 20 60 20 60 20 40 20 20 20 20 20 GRID 20 20 20 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. 20 20 20 20 STOR TEMA GRAFIK 20 20 20 20 20 20 20 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. 20 20 20 20 20 20 20 20 20 40 20 60 20 60 20 60 20 60 20 60 20 60 20 60 60 20 20 20 20 20 20 20 20 BILAG formatering.ai DR.DK DESIGNFUNDAMENT http://www.dr.dk/assets/documentation/base-grid 20 20 20 20 20 20 20 ARTIKEL MOBIL DATA VISUALISERING A B C D E Elementært, min kære Watson... KONSTRUKTION Tilgå kontruktion af elementer via et “20, 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% 20 X 20 PX 87% BILAG konstruktion.ai KONSTRUKTION - EKSEMPLER 8888 1990 2000 8888 1960 1965 2014 8888 8888 1970 1975 8888 8888 1980 1985 M K 33% 42% 87% 23% 75% 100% 64% 64% LABEL XXXXXXXXX 80% A B C D E GRUPPE 1 100% GRUPPE 2 LABEL 88 LABEL XXX FARVER 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 UDVIDET PALETTE FARVEBRUG 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. Krig og Katastrofe Sport Børn og Unge Teknologi og medier Bolig og Livsstil Religion og Tro Politik og Samfund Natur og Miljø Penge og Industri En god palette bør indeholde følgende: 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. 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å 20 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 Brug KUN Gibson til Overskrifter, og Georgia til rubrikskrift. Arbejd med skriften som anvist, overhold generiske skriftsnit og størrelser. Hvis du er i tvivl om guidelines for brug af skrift, kan information tilgåes via dr.dk’s designfundament. 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. VENSTRE MARGEN IFT. PADDING http://www.dr.dk/assets/documentation/base-type VENSTRE MARGEN KOL. 2 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. VENSTRE MARGEN KOL. 3 REFFERENCE LIST ITEM # 1 REFFERENCE LIST ITEM # 1 REFFERENCE LIST ITEM # 1 REFFERENCE LIST ITEM #2 REFFERENCE LIST ITEM #2 REFFERENCE LIST ITEM #2 REFFERENCE LIST ITEM #3 REFFERENCE LIST ITEM #3 REFFERENCE LIST ITEM #3 VENSTRE MARGEN IFT. PADDING DR.DK DESIGNFUNDAMENT PADDING 20 PX. PADDING 20 PX. 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 REFFERENCE LIST ITEM #3 REFFERENCE LIST ITEM #3 REFFERENCE LIST ITEM #3 ILLUSTRATION Formel 1 V6 turbo engines 1,6 liter DETALJEGRAD 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 Bilerne skal mindst veje 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 161kg Med et enkelt, formfast udtryk gøres nedskalering af komplekse objekter lettere aflæselige i mindre formater som eks. mobile skærme. 300 km/t Inklusiv føreren - eksklusiv benzin 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. Tophastigheden varierer fra sæson til sæson, men der bliver som minimum kørt med 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. I de hurtige sving kan han udsætte sig selv for 2-3,6g vandret acceleration Der er placeret fem kameraer på bilen. Et kamera bagerst og to på næsen. (Re-design af eksisterende nyhedsgrafik) ANVISNINGER DATA 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. Undgå overlappende elementer i grafikken. Informationen bliver ulæselig og udtrykket rodet. 31 5 315 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 L illustrationer.ai D A M S 3 B E F 4 C 5 1 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 A 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. 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. GARAGEN TAGET TERASSEN BAGTRAPPEN HAVEN STUEN EKSEMPEL De fleste ulykker sker i hjemmet TRYK FOR MERE INFO De fleste ulykker sker i hjemmet 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 DATA 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. 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 8888 8888 8888 8888 8888 8888 8888 8888 8888 8888 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 8 A AMBITION 33% 42% 87% 23% 75% 80% 100% 64% 64% A Gruppe 1 Header 4 Subhead er 24pt. 2015 8888 1965 Gru 8pt. M Manchet 1 8 pt. Lorem ips um dolor sit am 8888 1970 8888 1975 8888 8888 1980 19 85 1990 2000 2014 K ed. Rubrik 14 pt. Lorem ip sum dolo r sit amet isicing eli , consecte t, sed do e tur adipiusmod te labore et mpor inc dolore ma ididu gn minim ve niam, qui a aliqua. Ut enim a nt ut s nostrud d co laboris exercitati nisi ut ali on ullamquip ex ea quat. Dui c s aute iru ommodo re dolor i consevoluptate n reprehe velit esse nderit in cillum do pariatur. lore eu fu Excepteu giat nulla r sint occ aecat. LABEL LA Dropdow n 85% 15% Lorem Ips u m dolor sit Dropdow NYHEDGRAFIKKER I DR UDTRYK ABSTRAKTE NYHEDSGRAFIKKER Lorem Ips u m dolor sit amed amed n Lorem Ips u Lorem Ips u m dolor sit m dolor sit Dropdow n amed amed Lorem Ips u PDF m dolor sit Lorem Ips u m dolor sit LABE amed amed