TYPOGRAFI & OMBRYDNING

Transkript

1 20 3SVENDEPRØVE

2 TYPOGRAFI & OMBRYDNING

3 Danielle Mandix Jensen Svendeprøve 2013 Opgavebeskrivelse Ombrydning og layout af magasinet Salat Bladet, et madmagasin der fokuserer på hverdagsmad, samt sundhed, økologi og minimering af madspild. Jeg har layoutet forsiden, i alt 4 artikler, samt de to reklamer. Briefing Magasinet henvender sig til både mænd og kvinder fra ca års alderen. Folk der holder af at lave mad, der er nemt, sundt og sæsonbestemt. Magasinet skal bruges som en opskriftsbog, altså et magasin man gemmer og bruger som opslagsværk. Samtidigt skal det have et imødekommende og hjemligt udtryk. Designmæssige overvejelser Formatet er 210 mm x 265 mm, er et forholdsvist lille format til et magasin, der giver et mere uformelt, kompakt samtidigt lidt bogligt udtryk til magasinet. Magasinet er billedrigt, da det er billederne der skal vække læserens appetit. Brødtekst Brødteksten er sat med skriften Univers Roman 10/12 pkt. Skriften er tegnet af Adrian Frutiger, og findes i hele 44 snit. Den er sans serif, og god til brødtekst, da den er yderst letlæselig af en sans serif at være. Det optimale ordmellemrum er tilfældigvis 100%, og da jeg kører med løs bagkant, er minimum og maksimum ikke relevante i dette tilfælde. De 10pkt til brødteksten er relativt stort, men da magasinet skal kunne bruges som opslagsværk i køkkenet, er det vigtigt at det er let og overskueligt at læse, selv på en vis afstand. Spaltebredden er sat til at være relativt smal, med kun 34 enheder i linjen, da det igen gør teksten hurtigere og mere overskuelig at læse. Med hensyn til den smalle spaltebredde, har jeg også valgt at have en løs bagkant bl.a. for at undgå floder i teksten. Nye afsnit markeres ved et dobbelt linjeskift. Først og fremmest fordi den smalle spaltebredde ikke tillader indrykning, da det ser rodet ud. Programvalg Indesign, Photoshop. Dokumentets opsætning Format: 210 mm x 265 mm Sider: 12 Spalter: 3 Spaltemellemrum: 6 mm Margin: top: 13 mm, bund: 16 mm, inside: 13 mm, outside: 13 mm. Beskæring: 3 mm Master text frame. ARBEJDSPROCESS 001. Generelle indstillinger i Preferences: orddeling, dansk sprog/ordbog, danske anførselstegn, mm Opsætning af dokument Oprettelse af mastersider, grids, grundlinjenet, sidetal indsættes med brug af current page number på mastersiderne Indsætning af råtekst, fjerne dobbelte ordmellemrum og indsætte korrekte citationstegn og tankestreger Paragraph styles oprettes til brødtekst, mellemrubrikker, overskrifter. Liste-punkter sættes til at være pile Der laves character styles til info-delen af Best Dressed-artiklen På side 2 og 3 er der brugt en text wrap på billederne i overskriften Blanke tegn indsættes ved høje skilletegn f.eks!,?, : og ; Der laves en tabel med brug af tabs Der læses korrektur. UNICIAL MASTER PAGE PARAGRAPH STYLES TEXTWRAP Mellemrubrik Mellemrubrikker er sat med Univers Bold, 10/12 hvor jeg har valgt at bruge versaler på hele mellemrubrikken. Og for at fremhæve den yderligere, har jeg valgt en anden farve end brødteksten. Luften er fordelt med 1/3 under og 2/3 over, hvorefter jeg har været inde og tilpasset dem rent optisk. På Best Dressed artiklen er der valgt Clarendon til mellemrubrikkerne, hvorefter der er oprettet en Rule Below, med en understregning på hele spaltebredden. 3 af 18

4 Opgavebeskrivelse: Re-branding af en lokal fiskeforretning, selvfølgeligt med henblik på at få flere kunder. Min opgave gik ud på at researche, analysere og komme med et bud på en designguide, et logo, samt paperline til butikken. Briefing: Silden og Torsken er en lokal fiskedelikatesse, der skiller sig ud fra ande fiskeforretninger, ved at specialisere sig i at forberede fisken så det er nemmere at gå til for forbrugeren. Forretningen er ejet af den herboende englænder David Brooks, og hans kone. De har på nuværende tidspunkt ikke rigtigt noget logo eller grafiske retningslinjer, bare et skilt over forretningen, og en masse håndtegnede neonfarvede skilte med dagens tilbud på. Målgruppe: Det er oplagt at appelere til et yngre publikum. På nuværende tidspunkt er kunderne fortrinsvist ældre pensionister, der har bedre tid til at gå i specialforretninger, og er vandt til at tilberede fisk. Unge er tit rådvilde når det kommer til tilberedningen, og tør ikke kaste sig ud i detselvom de egentlig gerne vil. Segmentering: Fortrinsvist grønne, miljøbevidste kvinder og mænd i alderen 20-35, der gerne vil spise mindre kød, og er bevidste om fiskens sundhedsfremmende egenskaber. De er i forvejen veloplyste, og vil gerne informeres om fiskens oprindelse (lokalt vs. ikke lokalt fanget), sustainability osv. Æstetiske overvejelser: Butikken har bestemt brug for et mere strømlinet grafisk udtryk, for bedre at udstråle professionalisme. Istedet for tilfældige neonfarvede tilbudsskilte kunne man bruge sorte tavler til at skrive tilbud på. Istedet for almindeligt hvidt papir kunne man pakke fiskene ind i det mere venligt udseende brunt papir, lukket med et klistermærke med forretningens logo på. Fastsætte få, enkelte farver og bruge materialer der udstråler kvalitetog sørge for at butikken bliver brandet som et sympatisk alternativ til supermarkedets fiskedisk. Man kunne eventuelt også overveje af være mere synlig på nettet. Programvalg: Illustrator Photoshop InDesign De grafiske designparametre: Stil og stemning: Uformelt, uden at blive sjovt. Moderne, med en hint af retro. Professionelt, og kvalitetsorienteret. Typografi: Det var vigtigt for kunden at logoet var originalt derfor valgte jeg at håndtegne ordet Silden samt det lidt utradtionelle & tegn, der gerne skulle lede tanker hen på fiskens form. Ordet Torsken er skrevet i Trade Gothic Pro LT Std Condensed Bold, for at give det håndetegnede et maskulint modspil. Derudover bruges Trade Gothic LT Condensed Bold (i versaler), til overskrifter og Univers LT Std Light Condensed til al øvrig tekst. Farvevalg: Logo er i holdt i sort og hvidt, med en svag lyseblå skygge på ordet Torsken. Valget af den blå farve var nærmest oplagt, og minder om is og hav, og den lyseblå spiller rigtig godt op imod med det brune papir der bruges til at pakke fiskene ind, og på butikkens poser. Kontraster og kompostion: Ternene er de klassiske køkkentern, da det ikke kun er en fiskeforretning men også en delikatesse, og dermed giver kunderne en hjælpende hånd i køkkenet. Jeg har omkranset hele logoet med to ringe, det giver det et label agtigt udtryk, en trend jeg kan se bliver brugt rigtig meget blandt unge grafikere bl.a. i New York på lignende caféer, og delikatesser. Arbejssprocess: 1. Briefing fra kunden 2. Research og inspiration. 3. Skitsering af forskellige logo, designs og farvevalg. 4. Feedback fra kunden. 5. Rentegning af logo samt og mockup i Photoshop. AIDA: Attention: Blikfang der udtrykker modernitet, fornyelse og kvalitetsbevidsthed. Venligt og imødekommende design. Interest: Desire: Action: Man bliver inspireret og får vækket sin appetit. Kunderne ved godt at det er sundt at spise fisk, men ved ikke hvordan man tilbereder den. De har behov for råd og vejledning. Man får et tilhørsforhold til sin lokale fiskemand. Man støtter en mindre lokal virksomhed, det giver point på trendkontoen. SWOT: Styrker: Et unikt koncept, der placerer sig i et hul i markedeten venlig, hjælpende hånd i køkkenet, der samtidigt er godt for miljøet og dig selv. For butikken er udtrykket ret enkelt at ramme, og investeringsprisen er lav. Svagheder: Det kræver lidt tilvænning af butikkens ansatte at følge designguiden. Man kan ikke bare købe standardposer når man løber tør. Muligheder: Trusler: USP: Det er et relativt unikt koncept, der rammer lige ned i gruppen af firstmovere, og trendsettereog det i sig selv giver det en værdi. Konceptet kan nemt laves som franchise, eller evt. som en mobil butik og kan dermed dække hele Storkøbenhavn. Konceptet er enkelt og derfor let at kopiere for andre med lignende markedsrelationer. Det er svært at forudsige om det grafiske udtryk bliver outdated, og so last year om ganske få år. Den flinke fiskemand har forberedt maden til dig, så du nemt kan forkæle både dig selv og miljøet. Du ved at det er sundt at spise fisk, og godt at hande og spise lokalt. GRAFISK DESIGN

5 Danielle Mandix Jensen Svendeprøve 2013 Opgavebeskrivelse Re-branding af en lokal fiskeforretning, selvfølgeligt med henblik på at få flere kunder. Min opgave gik ud på at researche, analysere og komme med et bud på en designguide, et logo, samt paperline til butikken. Briefing Silden og Torsken er en lokal fiskedelikatesse, der skiller sig ud fra andre fiskeforretninger, ved at specialisere sig i at forberede fisken så det er nemmere at gå til for forbrugeren. Forretningen er ejet af den herboende englænder David Brooks, og hans kone. De har på nuværende tidspunkt ikke rigtigt noget logo eller grafiske retningslinjer, bare et skilt over forretningen, og en masse håndtegnede neonfarvede skilte med dagens tilbud på. Målgruppe Det er oplagt at appelere til et yngre publikum. På nuværende tidspunkt er kunderne fortrinsvist ældre pensionister, der har bedre tid til at gå i specialforretninger, og er vant til at tilberede fisk. Unge er tit rådvilde når det kommer til tilberedningen, og tør ikke kaste sig ud i det selvom de måske egentlig gerne vil. Segmentering Fortrinsvist grønne, miljøbevidste kvinder og mænd i alderen 20-35, der gerne vil spise mindre kød, og er bevidste om fiskens sundhedsfremmende egenskaber. De er i forvejen veloplyste, og vil gerne informeres om fiskens oprindelse (lokalt vs. ikke lokalt fanget), sustainability osv. Æstetiske overvejelser Butikken har bestemt brug for et mere strømlinet grafisk udtryk, for bedre at udstråle professionalisme. Istedet for tilfældige neonfarvede tilbudsskilte, kunne man bruge sorte tavler til at skrive tilbud på. Istedet for almindeligt hvidt papir, kunne man pakke fiskene ind i det mere miljøvenligt udseende brunt papir, lukket med et klistermærke med forretningens logo på. En god idé er at fastlægge enkelte farver og bruge materialer der udstråler kvalitet og dermed sørge for at butikken bliver brandet som et sympatisk alternativ til supermarkedets fiskedisk. Man kunne eventuelt også overveje at være mere synlig på internettet, og sociale medier som Instagram, ved at ansatte, og indkøbere tager billeder af butikkens hverdagsliv. Det udtrykker åbenhed i virksomheden. Programvalg Illustrator, Photoshop, InDesign De grafiske designparametre Stil og stemning Uformelt, uden at blive for sjovt. Moderne, med en hint af retro. Professionelt, og kvalitetsorienteret. Typografi Det var vigtigt for kunden at logoet var deres eget, og ikke lignede noget andet, derfor valgte de logoet med det håndtegnede i ordet Silden samt det lidt utradtionelle & tegn, der gerne skulle lede tanker hen på fiskens form. Ordet Torsken er skrevet i Trade Gothic Pro LT Std Condensed Bold, for at give det håndetegnede et lidt tungere og maskulint modspil. Derudover bruges Trade Gothic LT Condensed Bold (i versaler), til overskrifter og Univers LT Std Light Condensed til al øvrig tekst. Farvevalg Logo er i holdt i sort og hvidt, med en svag lyseblå skygge på ordet Torsken. Valget af den blå farve var nærmest oplagt, og minder om is og hav, og den lyseblå spiller rigtig godt op imod med det brune papir, der bruges til at pakke fiskene ind, og på butikkens poser. Kontraster og kompostion Ternene er de klassiske køkkentern, da det ikke kun er en fiskeforretning, men også en delikatesse, og dermed giver kunderne en hjælpende hånd i køkkenet. Jeg har omkranset hele logoet med to ringe, det giver det et label agtigt udtryk, en trend jeg kan se bliver brugt rigtig meget lige nu i udlandet på lignende caféer, og delikatesser. USP Den flinke lokale fiskemand har forberedt maden til dig, så du nemt kan gøre noget godt for både dig selv og miljøet, og lokalmiljøet. ARBEJDSPROCESS 001. Briefing fra kunden Research og inspiration Skitsering af forskellige logo, design og farvevalg Feedback fra kunden Rentegning af logo samt og mockup i Photoshop. AIDA 2 FORSKELLIGE ANALYSER Attention: Blikfang der udtrykker modernitet, fornyelse og kvalitetsbevidsthed. Venligt og imødekommende design. Interest: Desire: Action: SWOT Styrker: Man bliver inspireret og får vækket sin appetit. Kunderne ved godt at det er sundt at spise fisk, men ved ikke hvordan man tilbereder den. De har behov for råd og vejledning. Man får et tilhørsforhold til sin lokale fiskemand. Man støtter en mindre lokal virksomhed, det giver point på trendkontoen. Et unikt koncept, der placerer sig i et hul i markedet en venlig, hjælpende hånd i køkkenet, der samtidigt er godt for miljøet og dig selv. For butikken er udtrykket ret enkelt at ramme, og investeringsprisen er lav. Svagheder: Det kræver lidt tilvænning af butikkens ansatte at følge designguiden. Man kan ikke bare købe standardposer når man løber tør. Mulighed: Trusler: Det er et relativt unikt koncept, der rammer lige ned i gruppen af firstmovere, og trendsettere og det i sig selv giver det en værdi. Konceptet kan nemt laves som franchise, eller evt. som en mobil butik og kan dermed dække hele Storkøbenhavn. Konceptet er enkelt og derfor let at kopiere for andre med lignende markedsrelationer. Det er svært at forudsige om det grafiske udtryk bliver outdated, og so last year om ganske få år. 7 af 18

6 GRAFIK & BILLEDBEHANDLING

7 Danielle Mandix Jensen Svendeprøve 2013 Opgaver Svanesøen: Redesign af LP cover, fritlægning, sammenkopiering, blending modes. Salatbladet: Fritlægning, afmaskning, farvekorrigering. Julekort: Illustration, scatter brush, rotate, pathfinder, smart objects. Bogforside: Fritlægning af hår, restaurering, retouchering af s/h billed. Programvalg Illustrator, Photoshop. penneværktøjet, hvorefter jeg oprettede en maske. Da der var et gult farvestik på billedet, lavede jeg derefter en kopi af laget, markerede masken fra det første lag og malede en ny maske på det område hvor skyggen var misfarvet. Så rettede jeg farven i Selective Color. Så lagde jeg en lille smule mere kontrast på hele billedet, med brug af en Action, da samme effekt skulle bruges på flere billeder. I dette tilfælde skulle billedet gemmes som CMYK, 300 ppi og ISO coated V2. 3. Julekort Her har jeg selv illustreret et julekort fra bunden, holdt i en lidt naiv 50 er retrostil. To mennesker står på hver sin side af et juletræ, hvor mandens hånd er i et seperat lag, så det er foran træet. Til sidst har jeg exporteret samtlige lag, så de kan redigeres som smart objects i Photoshop SVANESØEN 002. SALATBLADET Indhold Fritlægning Retouchering Farvekorrigering Sammenkopiering Smart objects Smart filters Color lookup Masker Actions Vektor grafik Opgavebeskrivelser 1. Svanesøen Jeg har lavet et redesign af coveret til en LP med sammendrag fra den klassiske ballet Svanesøen, udtrykket skulle være sørgmodigt, teatralsk og poetisk. Danserne er fritlagt med pixelmasker, og konverteret til Smart Objects. Derefter gik jeg ind og finpudsede fritlægningerne, så jeg fik de fine strukturer i tylsskørtet med samt lidt af gulvet med for at skabe en fornemmelse af dybde/rum. Danserne er lagt ovenpå hinanden, og derefter nedsat opaciteten, så nogen af bevægelserne fremstår udtydeligt og spøgelses-agtige. Derefter har jeg lagt lidt støj og støv ind over billedet, brugt forskellige blending modes, samt en mørk vignet for at imitere spotlys, samt en Color Lookup der giver hele billedet en kølig blå tone. Trykkeriet bad om at al tekst skulle konverteres til outlines, at den skulle gemmes som CMYK, 300 dpi, og lægges i en tilsendt PSD-fil med en stanseform, der så skulle sendes tilbage til dem som PDF. 2. SalatBladet I denne opgave har jeg fritlagt og farvekorrigeret et billede af et par salathoveder, der skulle bruges i en artikel i Salat Bladet. Jeg startede med at fritlægge salaten med 4. Bogforside Dette var en online konkurrence jeg deltog i, hvor opgaven lød på at lave et bud på et design til en e-bog med en serie billeder af en skuespillerinde og Marilyn Monroe lookalike fra 1960 erne. Jeg fandt et billede af pigen i LIFE magazines arkiver, men det var desværre i ret dårlig stand, så efter jeg havde konverteret det til sort/hvid og sat lys/skygge, måtte jeg ind og fjerne en masse støv, ridser og pixelering. Derefter fritlagde jeg pigen, og var efterfølgende inde og rette maskerne til omkring håret, for at få det fine nærmest candyfloss-agtige hår med. Til sidst gemte jeg billedet som RGB, jpeg, i 72 dpi, for at minimere tiden for at loade det i en e-bog. ARBEJDSPROCESS 005. Gøre mig klar, hvilket medie billedet skal bruges til Tjekke at jeg arbejder i det rigtige farverum (CMYK/RGB osv), den rigtige ICC profil samt den korrekte opløsning Eventuelt indsætte 3 mm til beskæring Foretage generelle farve/tone korrektioner som at sætte lys/skygge Korrigere evt. støv/støj Generelt korrigering: Fritlægning, beskæring, favreændringer. Navngive alle lag Gemme PSD filen, inklusive samtlige lag i dens oprindelige version Gemme filen mht. til output og anvendelse, f.eks PDF, EPS, Jpeg JULEKORT 004. BOGFORSIDE 11 af 18

8 GRAFISK PRODUKTION & WORKFLOW

9 Danielle Mandix Jensen Svendeprøve 2013 Opgavebeskrivelse Jeg blev kontaktet af en ejendomsmægler, der gerne ville have lavet et designforslag til en hjemmeside-idé, han skulle fremlægge. Min opgave lød på at designe en hjemmeside der kunne ses på samtlige enheder, både web og mobil. Briefing Lejlighedsvis.dk er et udlejningskoncept for ejendomme, der for en periode ikke er salgbare, men som ejeren er interesseret i at aktivere gennem korttidsudlejning. Baggrunden er, at der i København i forbindelse med en række konkurser inden for byggesektoren står mange tomme lejligheder i ejendomme, der er overtaget af banker og andre kreditorer. Ejerne venter på gunstigere tider og på, at hele ejendomme kan sælges, men kan formodes at ville benytte den mellemliggende periode inden et salg til at udleje enkeltlejligheder. Siden skal fremstå imødekommende og troværdig med en lethed, der afspejler enkeltheden i konceptet. Strukturen skal derfor gøres så enkel som muligt, lidt ud fra tankegangen: Din nye bolig er blot et klik væk. Derfor skal websiden også være let tilgængelig fra alle enheder, og et design til en responsiv webside er klart at foretrække. Programvalg Illustrator, Photoshop. Funktion Sitet skal være super brugervenligt, og let overskueligt. Man skal i løbet af ganske få klik kunne komme ind på en lejlighed og hurtigt bestille en fremvisning. Der skal også være min. 4 aktuelle såkaldte fokusboliger, som opfylder nogle simple krav, ikke kun for nemhedens skyld, og til hjælp for f.eks firmaer, der ikke har tid for at sætte sig ind i boligens specifikationer. På enheder over 960 px, følger søgeboksen, headeren og menuen således med når man scroller, så man hele tiden har mulighed for at redigere i ens søgning. Responsive webdesign er også en del af søgemaskine optimering. Hvis et emne er søgt på google mobile, og dit websted har responsive webdesign vil Google automatisk anbefale din side kort sagt, din hjemmeside vil få en meget højere rang i en mobilsøgning. Ulempen rent teknisk set ved et Responsive Webdesign, er så at det kan tage betydeligt længere tid at loade siden, da den automatisk vil hente alle billederne og objekterne, i de forskellige størrelser, uanset hvilken enhed du bruger. ARBEJDSPROCESS 001. Briefing fra kunden. Der fastsættes krav til hjemmesiden, målgruppen, ønsker og al anden relevant information indsamles Der laves et sitemap. For bedre at kunne navigere i hvilke sider der er at lave Indsamling af billedmateriale, samt billedredigering. Her arbejdes naturligvis i RGB og 72 ppi så de er klar til brug på web Der laves et wireframe for den version af basis hjemmesiden der er udgangspunktet til designet Der laves et mockup af hjemmesidedesignet i Photoshop. Både til mobil, Ipad og traditionel webbrowser Korrektur, kommentarer og godkendelse fra kunden Der laves en oversigt til over breakpoints, fluid grids og hvilke billeder der skal skaleres, så det ligger klart for webudvikleren der i sidste ende skal kode hjemmesiden. Iphone Tablet Responsive webdesign Grundlæggende er der bare alt for mange mobile enheder der rammer markedet, til at vi kan skræddersy vores hjemmesider for at se godt ud på dem alle. Næsten alle enheder har en anden skærmstørrelse og opløsning, end sin forgænger. Det giver ikke mening for virksomheder, hverken store eller små, at bruge tid og penge på at skabe en skræddersyet web-oplevelse for hver enhed i den konstant voksende line-up. Den største fordel ved at lave en responsive web side, er at man kun behøver én kodebase til én hjemmeside, for at samtlige kunder en behagelig oplevelse af ens website. PC 15 af 18

10 Danielle Mandix Jensen Svendeprøve 2013 Responsive webdesign Iphone visning Tablet visning Eksempler på Media Queries Det er forholdsvist nemt at implementere media queries i CSS3, når først der er tænkt over designet til de mange forskellige skærmstørrelser. Der findes flere forskellige måder at definere visningen. Her er et par eksempler på hvor lidt kode der faktisk skal til. Max Width Følgende CSS er til alle visnings-områder der er mindre end 600px i bredden. CSS3 Media Queries Responsive webdesign bruger en CSS3 funktion kaldet Media Queries, der oversat til dansk betyder noget i retning af Medie Forespørgsel. En Media Query kan f.eks. spørge enheden du bruger, om den horisontale opløsning på enheden er lig med eller mindre end 480px. Hvis svaret er ja, kan CSS en så justere layoutet til f.eks. at være én enkelt kolonne. Media Queries identificerer altså højde, bredde, opløsning, orientering, skærmformat osv. Det er vigtigt at vide, for at lave et responsive webdesign der skal reagere på vores enheder og tilpasse hjemmesiden til at være en fornøjelig brugeroplevelse. Det hele sker i real-time, mens du tænder enheden, drejer enheden eller ændrer størrelsen på dit screen and (max-width: 600px) {.class { background: #ccc; Min Width Denne kode er til visninger, større end 900px i screen and (min-width: 900px) {.class { background: #666; Multiple Media Queries Man kan også kombinere flere media queries. Følgende kode bruges når skærmen er mellem 600px og screen and (min-width: 600px) and (max-width: 900px) {.class { background: #333; 16 af 18

11 Danielle Mandix Jensen Svendeprøve 2013 Standard web visning Breakpoints LOGO, fuldt skalerbar SØG UDLEJ INFO KONTAKT SØG UDLEJ INFO KONTAKT SØG BOLIG NU.. Område MENU, skalerbar ned til 50%, derefter breakpoint på midten. SØG BOLIG NU.. Skalerbar ned til 50%, Område derefter forsvinder den Pris Areal Sagsnr. SØG IMAGE SLIDER, fuldt skalérbar Pris Areal Sagsnr. SØG Lejlighedsvis udlejer lejligheder til mennesker, der vil vente med at sælge. Til folk, der vil vente med at købe eller har et akut behov for en lejlighed i 3-6 måneder eller en begrænset årrække. VED SAMME LEJLIGHED.. Hvad så med flytning? Vi har samarbejde med byens mest velrenomerede vognmænd, og kan ofte skaffe en god pris. Lejlighedsvis udlejer lejligheder til mennesker, der vil vente med at sælge. Til folk, der vil vente med at købe eller har et akut behov for en lejlighed i 3-6 måneder eller en begrænset årrække. Breakpoints VED SAMME LEJLIGHED.. Hvad så med flytning? Vi har samarbejde med byens mest velrenomerede vognmænd, og kan ofte skaffe en god pris. Skalerbar ned til 50%, derefter forsvinder den FOKUSBOLIG: FOKUSBOLIG: FOKUSBOLIG: FOKUSBOLIG: Breakpoints Fiolstræde 26, 3., 1171 København K Fiolstræde 26, 3., 1171 København K Fiolstræde 26, 3., 1171 København K Fiolstræde 26, 3., 1171 København K Boligareal: 98 m² Værelser: 3 Boligareal: 98 m² Værelser: 3 Boligareal: 98 m² Værelser: 3 Boligareal: 98 m² Værelser: 3 Se mere.. Se mere.. Se mere.. Se mere.. Fluid Grid Layout Som mediegrafiker kender man alt til det med at oprette et grid, oprindeligt tænker vi på et grid som et net af kolonner, og rækker med faste bredder, højder og spaltemellemrum. Man kan f.eks. opbygge en hjemmeside ved hjælp af et 960px grid, opdelt i 12 kolonner der hver er 40px brede, og med 20px spaltemellemrum, det virker godt på hjemmesider med en fast bredde. Men når man designer til en responsive webside, skal man tænke på kolonne og spaltemellemrummenes bredder som procentdele af den maksimalt tilgængelige bredde. Det er det der gør at indholdet kan skrumpe eller udvide sig baseret på enhedens dimensioner. Kort sagt vil den justere indholdet til enheden. Et CSS ekspempel kunne f.eks se sådan her ud:.wrapper {.make-row();.content-main {.make-lg-column(8);.content-secondary {.make-lg-column(3);.make-lg-column-offset(1); Flydende billedskalering Dette hører lidt under samme kategori som overfor, den justerer bare billederne til at skalere baseret på dimensionerne på enheden, men uden at miste skarpheden i billedet. Her er et eksempel på hvordan man skriver det i CSS: img { max-width: 100%; Breakpoints Et breakpoint er overgangen mellem media query ens værdier. For eksempel: Hvis den tilgængelige browsers bredde er mindst 780px kan hjemmesiden sagtens vise menulinjen, der spreder sig på tværs i toppen af siden. Men hvis den tilgængelige bredde er mindre end 780px kan CSS en omstrukturere menulinjen i to rækker eller flytte links ind i en drop down menu. Når du så ændrer størrelsen på browser vinduet til under 780px i bredden, vil menuen justere sig. Den overgang kaldes et breakpoint. I øjeblikket er der ingen fast vedtaget praksis for at definere hvor et break point kan ligge, det er udelukkende op til designet. 17 af 18

12 FIN