GRAFISK DESIGN 40 41
er en fiktiv opgave fremstillet til mit skoleforløb, i samarbejde med en arkitekt hos C.F. Møller. Jeg havde et ønske om at opbygge en grafisk identitet til en virksomhed. Eftersom jeg er elev hos en arkitekvirksomhed, hvor der altid layoutes ud fra en designmanual, var en fiktiv opgave en oplagt mulighed. Jeg blev derfor enig med en kollega om, at jeg skulle stå for udviklingen af den grafiske identitet for hendes fiktive arkitektvirksomhed. OPSTART Jeg har sparret meget med min kollega, Anne Katrine Arrildt (), for at nå frem til et professionelt design, som matchede virksomhedens personlighed og værdier. Hun lagde især vægt på, at udtrykket skulle være minimalistisk, kontekstuelt og uprætentiøst. Med bl.a. disse ord som udgangspunkt gik jeg i gang med at idéudvikle, via mindmapping og overordnede tanker omkring proces, udtryk og produkter. AFSENDER, MÅLGRUPPE OG BUDSKAB Afsender er selvsagt arkitektvirksomheden en Århusiansk baseret arkitektvirksomhed med kerneværdier som natur, simplisme og materialisme. En virksomhed, som efterhånden er ved at etablere sig blandt de større spillere på banen. Målgruppen spænder vidt lige fra den offentlige sektor, som står for sygehusbyggerier, biblioteker, kontorhuse, skoler o.l. til private kunder, som boligforeninger, koncernvirksomheder m.m. Endeligt henvender de sig også til privatpersoner, som er ude efter det særegne og arkitekttegnede drømmehus og har kapitalen til det. PRODUKTER Antal og art af produkter er i overvejende grad bestemt ud fra min vurdering. Her har jeg både haft tanke på, hvilke produkter jeg gerne ville fremstille for at etablere en grafisk identitet, at portfolien skulle indeholde digitalt design (hjemmeside) og hvilke produkter C.F. Møller benytter sig af. Slutteligt endte den komplette liste over produkter således: Hjemmeside, visionsfolder, visitkort, brevpapir (inkl. konvolutter), logo og logotype. GRAFISKE VALG Jeg vil komme nærmere ind på de grafiske valg i løbet af de næste par sider, når jeg gennemgår proces og produkter. Overordnet set skal det dog nævnes, at jeg har ladet kundens holdning veje tungt, da hun selv har et skarpt øje for design og stærke holdninger herom. Udtrykket er overordnet set minimalistisk, men spændende og der er gjort en kunst ud af at lade små detaljer, masser af luft og kreative tiltag stjæle opmærksomheden. PROCES Efter at have indledt hele processen med idégenerering og mindmapping og derigennem indsnævret det grafiske udtryk gik jeg i gang med skitsering. Dette både i forhold til logo, logotype, visionsfolder, visitkort, brevpapir og hjemmeside. Hele tiden har det været vigtigt, for både kunden og mig, at samarbejdet var tæt og sparringen gensidig. KVALITETSVURDERING Jeg er meget tilfreds med den proces kunden og jeg har haft gennem hele forløbet. Dog ville jeg faktisk gerne have haft længere tid, da der som oftest sker noget, når man går fra skitse til reel fremstilling af produkt. Alle skitser er godkendt hos kunden, men desværre har vi ingen sparring nået på den færdige visionsfolder og hjemmesiden. Disse to produkter kunne godt have haft brug for mere tid, i og med at layoutet ændrede sig fra skitserne, da jeg satte folderen op i InDesign og hjemmesiden i Dreamweawer. Jeg er ikke selv helt tilfreds med designet, på især visionsfolderen. Jeg synes konceptet fungerer, med det skal til en anden gang have mere tid til at formes og vokse til det rigtige layout. Mere konkret kvalitetsvurdering foretager jeg over det næste par sider. 42 43
FARVEKODER RGB: CMYK: BLOODY HELL: 60, 29, 30 45, 87, 54, 74 MOSSY: 109, 115, 99 57, 38, 56, 26 ANTRACIT: 27, 27, 27 78, 69, 61, 87 WARM: 89, 44, 3 37, 82, 99, 56 PALE: 250, 246, 240 2, 4, 7, 0 MANDARIN: 216, 128, 52 0, 59, 88, 0 MINDMAP Via mindmap har jeg indsnævret de elementer jeg skal arbejde med og har bl.a. været omkring produkttyper, stemning, farver og meget andet. Se samtlige skitser her MOODBOARD For at få et mere visuelt udtryk af stemningen omkring, opsatte jeg et moodboard, som fortæller noget om den stil virksomheden tillægger sig og især deres værdier. Anne Katrine Arrildt kan godt lide idéen om altid november et udtryk hun især benyttede om renderinger, hvor omgivelserne er kølige og kolde, ligesom en november aften. Her er tanken så, at byggeriet står i kontrast til de mørke omgivelser og udstråler varme og hygge altså et rart sted at være. Denne følelse vil de gerne fremkalde hos deres kunder og måden jeg har forsøgt at fortolke det på i den grafiske profil, er gennem et mildt minimalistisk udtryk, men små varme og finurlige detaljer. 44 45
LOGO OG LOGOTYPE Jeg startede design af logo og logotype med en lang skitseringsproces, som var igennem flere runders granskning, inden kunden og jeg begge var tilfredse. På siden her ses de første skitseforslag og kundens to favoritter, inden jeg gik videre til at arbejde med logo og logotype i Illustrator. LOGO OG LOGOTYPE - FORTSAT Valget faldt i sidste ende på kombination nummer to, på billedet nederst i højre hjørne. Det var vigtigt, at logoet kom til at hælde en smule, så F et blev oprejst og logoet ikke derved kom til at ligne et Æ for meget. For at skabe sammenhæng hælder A et i logotypen ligeledes. En anden sammenkædende detalje er vinklen, som optræder på F i både logo og logotype og desuden også på + i logotypen. 46 47
WeblySleek UI Helvetica Neue Anne Katrine Arrildt Partner T: +45 1234 7722 D: +45 2277 7722 aka@arrildtfriis.com GUIDE TIL DIN ARBEJDSPLADS GUIDE TIL DIN ARBEJDSPLADS Mange spørgsmål kan melde sig i løbet af en arbejdsdag. Personalehåndbogen er et opslagsværk, der hurtigt kan vise vej til svar. Den indeholder først og fremmest information til nye ansatte. Mange spørgsmål kan melde sig i løbet af en arbejdsdag. Personalehåndbogen er et opslagsværk, der hurtigt kan vise vej til svar. Den indeholder først og fremmest information til nye ansatte. Holdbergsgade 31, 8000 Aarhus C T: +45 1234 5678 arrildtfriis@arrildtfriis.com www.arrildtfriis.com Holdbergsgade 31, 8000 Aarhus C T: +45 1234 5678 arrildtfriis@arrildtfriis.com www.arrildtfriis.com Personalehåndbogen fortæller om virksomhedens historie, værdier, politikker og almindelige praktiske retningslinjer. For at håndbogen ikke skal være for omfattende, har vi mange steder valgt at henvise til andre muligheder for uddybende information. Hvor teksten henviser til medarbejdernes overenskomst, gælder det medlemmer af disse tre forbund: FAoD, Teknisk Landsforbund og Konstruktørforeningen. Andre faggrupper uden overenskomst henvises til ansættelseskontrakten. Er der oplysninger eller emner, som mangler? Så kontakt kommunikationsafdelingen eller HR, så dine input kan blive indarbejdet, inden næste, reviderede version af personalehåndbogen bliver trykt. Flere steder i denne håndbog anvendes begrebet nærmeste overordnede. Det kan variere lidt hvem det er, afhængig af kontrakten, men det vil typisk være enten din projektleder, afdelingsleder eller en partner. Alternativt er du altid velkommen til at kontakte HR. Personalehåndbogen fortæller om virksomhedens historie, værdier, politikker og almindelige praktiske retningslinjer. For at håndbogen ikke skal være for omfattende, har vi mange steder valgt at henvise til andre muligheder for uddybende information. Hvor teksten henviser til medarbejdernes overenskomst, gælder det medlemmer af disse tre forbund: FAoD, Teknisk Landsforbund og Konstruktørforeningen. Andre faggrupper uden overenskomst henvises til ansættelseskontrakten. Er der oplysninger eller emner, som mangler? Så kontakt kommunikationsafdelingen eller HR, så dine input kan blive indarbejdet, inden næste, reviderede version af personalehåndbogen bliver trykt. Flere steder i denne håndbog anvendes begrebet nærmeste overordnede. Det kan variere lidt hvem det er, afhængig af kontrakten, men det vil typisk være enten din projektleder, afdelingsleder eller en partner. Alternativt er du altid velkommen til at kontakte HR. Holdbergsgade 31, 8000 Aarhus C T: +45 1234 5678 arrildtfriis@arrildtfriis.com www.arrildtfriis.com Anne Katrine Arrildt Partner T: +45 1234 7722 D: +45 2277 7722 aka@arrildtfriis.com Holdbergsgade 31, 8000 Aarhus C T: +45 1234 5678 arrildtfriis@arrildtfriis.com www.arrildtfriis.com Anne Katrine Arrildt Partner T: +45 1234 7722 D: +45 2277 7722 aka@arrildtfriis.com Holdbergsgade 31, 8000 Aarhus C T: +45 1234 5678 arrildtfriis@arrildtfriis.com www.arrildtfriis.com Holdbergsgade 31, 8000 Aarhus C T: +45 1234 5678 arrildtfriis@arrildtfriis.com www.arrildtfriis.com Holdbergsgade 31, 8000 Aarhus C T: +45 1234 5678 arrildtfriis@arrildtfriis.com www.arrildtfriis.com Anne Katrine Arrildt Partner D: +45 1234 7722 M: +45 2277 7722 aka@arrildtfriis.com FONTVALG Fra start var det klart, at en font som skulle passe til, og være med til at definere, skulle have en enkelt, men stærkt udtryk. Et minimalistisk udtryk er prioriteret og fonten skulle derfor gerne være sans-serif og ikke for bred. En anden prioritet har været, at fonten havde et stort udvalg af glyphs, hvilket er vigtigt, nåe der benyttes mange faglige udtryk med tal og andre karakterer. Desuden også elementært, hvis man ænsker at bruge fonten, når man kommunikerer på andre sprog. En sidste afgørende faktor var også, at fonten skulle være varieret og som minimum kunne skrives som både bold og italic. Mit udvalg endte med at være på 21 forskellige fonte. Herfra vurderede jeg hver enkelt font efter de overnævnte kriterier. De fonte, som levede nogenlunde op til kriterierne blev vurderet på udtryk og herfra brugte jeg simpelthen udelukkelsesmetoden, indtil jeg til sidst stod tilbage med to fonte. Disse var Helvetica Neue og WeblySleek UI. Udtrykket i WeblySleek UI var lidt mere mildt og harmonisk end Helvetica Neue, hvilket jeg mente var mere passende for. Derfor faldt det endelige valg på Fonten WeblySleek UI. VISITKORT Kunden ønskede at have billede af medarbejderen på kortet, samt logo og kontaktinfo for både medarbejder og virksomhed. Visitkortet er lavet efter standardmål på 55 85 mm, med tryk på begge sider (sort/hvid). Både kunden og jeg var enige om, at logotype på forsiden var bedre end logo, da man kunne risikere, at kortet simpelthen blev for anonymt. Løsningen blev, at virksomhedens logotype og kontaktinfo skulle findes på forsiden og medarbejderens foto og kontaktinfo på bagsiden. MATERIALEVALG Visitkortene skal trykkes på kvaliteten Gmund Stone, i enten farven Quarz eller Pebble. Den strukturerede overflade vil være med til at gøre visitkortet unikt og give det en taktil dimension. Visitkortene kan trykkes inhouse, hvis virksomheden har en større kontorprinter, som kan håndtere tykke papirkvaliteter. Printet bliver ikke helt jævnt og kan fremstå med skrabet farve nogle steder, hvilket kunden anså for en fed feature. På den måde for hvert visitkort sit eget unikke udtryk med karakter og kant. Økonomisk kan det godt betale sig at investere i den noget dyrere papirkvalitet, da til gengæld vil kunne printe inhouse i S/H. Endeligt visitkort 1:1 48 49
Se folderen her BREVPAPIR Til alle officielle breve og dokumenter, både internt i huset og eksternt, benytter brevpapir, med logo, logotype og kontaktinfo for at sikre en professionel profil og understege det grafiske udtryk. Det valgte brevpapir har en harmonisk layout, med et grafisk og enkelt udtrk. MATERIALEVALG Kvaliteten til virksomhedens brevpapir er Cyclus Offset. En 100% uncoated genbrugskvalitet, som fås i forskellige gramvægt. Den kan dermed opfylde virksomhedens behov for papir til både postkort, officielle breve, ansøgninger, mapper, interne dokumenter mm. Det får desuden både som A4 og A3 og med matchende kuverter i C4. Sidst, men ikke mindst, ønskede kunden at tage hensyn til miljøet og ville heller ikke have noget imod, hvis denne profil kom synligt til udtryk. Den høje procentdel af genbrugsfibre i papiret giver det et let gråligt og nogle steder spættet udseende et udtryk som værdsætter, da de på den måde kan skilte med deres grønne profil på en kreativ måde. Kunden ønskede en lille folder, som hurtigt kunne give et indtryk af virksomheden og fortælle kort om deres vision og værdier. Folderen er i et lille format (210 210 mm), som matcher en A4-side i bredden. Dette gør den praktisk i forhold til fragt og den er nem at håndtere og medbringe til eksempelvis forretningsmøder. Layoutet er simpelt og præget af masser af luft, som giver plads til at opfatte tekstsafsnit som objekter i sig selv. Billederne er konsekvent opsat som enten kvadrater eller cirkler gennem hele folderen. Al tekst i folderen er centreret et ønske som kunden var meget ihærdig for at værne om. Idéen var, at tekststykkerne i sig selv skulle fungere som flotte symmetriske objekter på en ellers blank side. Al grafik i folderen er vektorbaseret. De store runde cirkler er billeder, som er behandlet med image trace i Illustrator og de små ikoner er håndskitser, som er fotograferet med AdobeCapture (app til smartphones) og importeret direkte i Illustrator via AdobeCC Libraries. Her er de redigeret kort, for stadig at fremstå med et håndtegnet og rustikt udseende. MATERIALEVALG Visionsfolderen ville skal trykkes på Cyclus Offset, 120 g/m 2, med et omslag i kvaliteten Gmund Stone på 150 g/m 2. Til omslaget skulle farven være Quarz. Denne er dog meget lys, næsten hvid og ville stå i skarp kontrast til indholdets grålige Cyclus Offset. Det er derfor en mulighed i stedet at benytte farven Pebble, som bedre matcher kuløren på Cyclus Offset. 50 51
www.dianasoerensen.com/arrildtfriis) WWW.ARRILDTFRIIS.COM Idégenereringen til udvikling af layout på hjemmesiden indledtes, ligesom alle de andre processer, med skitsering i hånden. Opbygningen er meget simpelt, med få virkemidler og god funktionalitet. Der er igen lagt vægt på brugen af luft, centrering af tekst og et billedindhold som står stærkt, men uden at stjæle for meget opmærksomhed fra de øvrige elementer. LAYOUT Layoutet er opbygget i Illustrator, hvor hver enkelt side er lavet i fire varianter, alt efter hvilken viewport der benyttes. FONT Fonten WeblySleek UI er ligeledes brugt på hjemmesiden. Den er klart markeret og fungerer godt på web igen er det en fordel, at tekstmængderne ikke er for store. RESPONSIVT DESIGN Hjemmesiden er lavet responsiv, så den kan ses optimalt på smart phones, tablets og PC. Menuen er designet således, at den på mindre skærme konverteres til et ikon og brugeren fra denne kan tilgå en drop-down-menu. BRUGERVENLIGHED Selve sitet er særdeles brugervenligt, med en nem og synlig navigation. Siderne er opbygget med små mængder indhold, som bliver præsenteret på en meget overskuelig måde. En side indeholder ikke mange links, men fylder måske derimod nedad. Dette ser jeg dog ikke som en ulempe, da flere brugerundersøgelser har vist, at folk finder det mere behageligt at scrolle, end at klikke sig rundt mange forskellige steder. Størrelser på billeder og tekst er også tilpasset nogenlunde, så teksten eksempelvis ikke bliver for lille at skulle læse på en mobil. Alle billeder er gemt ned i Photoshop som save for web, 72 ppi i rgb og tilpasset så kvalitet og uploading-tid begge tilgodeses. BROWSERKOMPATIBILITET Sitet har fonten indbygget i sin CSS, hvorfor den vises med det rigtige font i samtlige browsere. Ellers har jeg arbejdet med en responsiv drop-down-menu, billeder der er gjort runde med border-radius og a:hover med transition. Disse ser også ud til at fungere fint i samtlige browsere. 52 53
ARRILDT + FRIIS FLOWCHART MOBILVENLIGHED Jeg har testet mobilvenligheden på mit site via Google Developers, og den bliver godkendt på samtlige sider, med undtagelse af index-siden. Den eneste tekst index-siden indeholder er dog i footeren, så jeg vælger at se bort fra det, i dette tilfælde. INDEX NYHEDER PROJEKTER RESPONSIVT DESIGN Hjemmesiden er responsivt designet og skiller med disse mål: @media (max-width: 320px) @media (min-width: 321px) and (max-width: 480px) @media (min-width: 481px) and (max-width: 768px) @media (min-width: 769px) @media (min-width: 900px) LINK TIL PDF PROJEKTER PROJEKTER FLOWCHART Flowchartet her på siden illustrerer, hvorledes man navigerer rundt på sitet, og hvad der linker til hvad. Fra index-siden kan man navigere til en af de tre undersider via menuen. På både nyheds- og projektsiden skal fungere med lazy-load, som indlæser flere elementer, jo længere man scroller ned. På projektsiden skal hver enkelt projekt være klikbart og åbne en ny side, hvor projektet præsenteres med flere billeder, tekst og fakta. På siden Om os kan man i screen-versionen se en PDF-folder, som man kan bladre i direkte på skærmen. I de mindre formater (under 768 px) vil man få vist et billede, som via klik linker til PDF-folderen, der åbner op i en ny fane. PROJEKTER ELEMENTER, SOM PÅVIRKES I @MEDIA: header img nav nav ul nav ul li nav li a nav ul li, li a nav ul li:last-child.show-menu footer address object h2 p.nyhed.billede.nyhedstekst div.visionsfolder img.om.vision.projekter.projekter. billede.projekter h2 54 55
@media (max-width: 320px) @media (min-width: 321px) and (max-width: 480px) @media (min-width: 481px) and (max-width: 768px) @media (min-width: 769px) @media (min-width: 900px) Header: 8% width Top: 100% width li a: min-width 140px Header img: 40px width height 50px Nav: 90% width Margin-top: 5px Om + Vision: padding 15% højre og venstre LOGO LOGO LOGO NYHEDER PROJEKTER LOGO NYHEDER PROJEKTER adipiscing elit. In eu pulvinar nibh. Nullam tincidunt, lacus in aliquet pharetra, orci leo rutrum velit, eu egestas metus diam eu tristique, dui metus vestibulum mauris, eget scelerisque est nunc et massa. id eget nulla. Phasellus condimentum nisl lacus, sed aliquet Duis eu sapien tristique, congue turpis ac, iaculis diam. Nam vel enim lectus. Suspendisse venenatis nisl a ipsum rhoncus rutrum. Etiam maximus metus tortor, sit amet tempus est volutpat egestas. In facilisis leo at lacus euismod euismod. Suspendisse tellus erat, interdum sed velit efficitur, feugiat posuere nulla. Vestibulum malesuada ante in quam viverra mattis. VISION Praesent imperdiet, diam a egestas tristique, dui metus vestibulum mauris, eget Om + Vision: padding 0% adipiscing elit. In eu pulvinar nibh. Nullam tincidunt, lacus in aliquet pharetra, orci id eget nulla. Phasellus condimentum nisl lacus, sed aliquet Duis eu sapien tristique, congue turpis ac, iaculis diam. Nam vel enim lectus. Suspendisse venenatis nisl a ipsum rhoncus rutrum. Etiam maximus metus tortor, sit amet tempus est volutpat egestas. In facilisis leo at lacus euismod euismod. Suspendisse tellus erat, interdum sed velit efficitur, feugiat posuere nulla. Vestibulum malesuada ante in quam viverra mattis. VISION Praesent imperdiet, diam a egestas scelerisque est nunc et massa. PDF adipiscing elit. In eu pulvinar nibh. Nullam tincidunt, lacus in aliquet pharetra, orci id eget nulla. Phasellus condimentum nisl lacus, sed aliquet Duis eu sapien tristique, congue turpis ac, iaculis diam. Nam vel enim lectus. Suspendisse venenatis nisl a ipsum rhoncus rutrum. Etiam maximus metus tortor, sit amet tempus est volutpat egestas. In facilisis leo at lacus euismod euismod. Suspendisse tellus erat, interdum sed velit efficitur, feugiat posuere nulla. Vestibulum malesuada ante in quam viverra mattis. VISION Praesent imperdiet, diam a egestas tristique, dui metus vestibulum mauris, eget adipiscing elit. In eu pulvinar nibh. Nullam tincidunt, lacus in aliquet pharetra, orci id eget nulla. Phasellus condimentum nisl lacus, sed aliquet Duis eu sapien tristique, congue turpis ac, iaculis diam. Nam vel enim lectus. Suspendisse venenatis nisl a ipsum rhoncus rutrum. Etiam maximus metus tortor, sit amet tempus est volutpat egestas. In facilisis leo at lacus euismod euismod. Suspendisse tellus erat, interdum sed velit efficitur, feugiat posuere nulla. Vestibulum malesuada ante in quam viverra mattis. VISION Praesent imperdiet, diam a egestas tristique, dui metus vestibulum mauris, eget PDF PDF PDF adipiscing elit. In eu pulvinar nibh. Nullam tincidunt, lacus in aliquet pharetra, orci leo rutrum velit, eu egestas metus diam eu lorem. Praesent imperdiet, diam a egestas tristique, dui metus vestibulum mauris, eget lacus, sed aliquet Figure img: 200 x 200px adipiscing elit. In eu pulvinar nibh. Nullam tincidunt, lacus in aliquet pharetra, orci leo rutrum velit, eu egestas metus diam eu lorem. Praesent imperdiet, diam a egestas tristique, dui metus vestibulum mauris, eget lacus, sed aliquet Nullam tincidunt, lacus in aliquet pharetra, orci leo rutrum velit, eu egestas metus diam eu lorem. Praesent imperdiet, diam a egestas tristique, dui metus vestibulum mauris, eget scelerisque est nunc et massa. Phasellus condimentum nisl lacus, sed aliquet adipiscing elit. In eu pulvinar nibh. Nullam tincidunt, lacus in aliquet pharetra, orci leo rutrum velit, eu egestas metus diam eu lorem. Curabitur a nunc nec augue venenatis commodo id eget nulla. Phasellus condimentum nisl lacus, sed aliquet diam luctus nec. adipiscing elit. In eu pulvinar nibh. Nullam tincidunt, lacus in aliquet pharetra, orci leo rutrum velit, eu egestas metus diam eu lorem. Praesent imperdiet, diam a egestas tristique, dui metus vestibulum mauris, eget scelerisque est nunc et massa. lacus, sed aliquet adipiscing elit. In eu pulvinar nibh. Nullam tincidunt, lacus in aliquet pharetra, orci leo rutrum velit, eu egestas metus diam eu lorem. Praesent imperdiet, diam a egestas tristique, dui metus vestibulum mauris, eget scelerisque est nunc et massa. lacus, sed aliquet adipiscing elit. In eu pulvinar nibh. Nullam tincidunt, lacus in aliquet pharetra, orci leo rutrum velit, eu egestas metus diam eu lorem. lacus, sed aliquet Arrildt & Friis Holbergsgade 31, 8000 Aarhus C +45 1234 5678 arrildtfriis@arrildtfriis.com www.arrildtfriis.dk CVR. 1234 5678 Arrildt & Friis Holbergsgade 31, 8000 Aarhus C +45 1234 5678 arrildtfriis@arrildtfriis.com www.arrildtfriis.dk CVR. 1234 5678 Footer: 100% width adipiscing elit. In eu pulvinar nibh. Nullam tincidunt, lacus in aliquet pharetra, orci leo rutrum velit, eu egestas metus diam eu lorem. lacus, sed aliquet adipiscing elit. In eu pulvinar nibh. Nullam tincidunt, lacus in aliquet pharetra, orci leo rutrum velit, eu egestas metus diam eu lorem. lacus, sed aliquet adipiscing elit. In eu pulvinar nibh. Nullam tincidunt, lacus in aliquet pharetra, orci leo rutrum velit, eu egestas metus diam eu lorem. Praesent imperdiet, diam a egestas tristique, dui metus vestibulum mauris, eget scelerisque est nunc et massa. lacus, sed aliquet adipiscing elit. In eu pulvinar nibh. Nullam tincidunt, lacus in aliquet pharetra, orci leo rutrum velit, eu egestas metus diam eu lorem. Praesent imperdiet, diam a egestas tristique, dui metus vestibulum mauris, eget scelerisque est nunc et massa. Curabitur a nunc nec augue venenatis commo- Arrildt & Friis Holbergsgade 31, 8000 Aarhus C +45 1234 5678 arrildtfriis@arrildtfriis.com www.arrildtfriis.dk CVR. 1234 5678 Arrildt & Friis Holbergsgade 31, 8000 Aarhus C +45 1234 5678 arrildtfriis@arrildtfriis.com www.arrildtfriis.dk CVR. 1234 5678 Section: 70% width, auto margin LAYOUT/SKELET På disse sider ses det komplette layout for om os-siden som eksempel på layout/skelet. 56 57
CASCADE STYLING SHEET EKSEMPLER PÅ BETINGELSER @font-face { font-family: weblysleek_uilight; src: url(../fonts/weblysleekuil-webfont.eot); src: url(../fonts/weblysleekuil-webfont.eot?#iefix) format(embedded-opentype), url(../fonts/weblysleekuil-webfont.woff2) format(woff2), url(../fonts/weblysleekuil-webfont.woff) format(woff), url(../fonts/weblysleekuil-webfont.ttf) format(truetype), url(../fonts/weblysleekuil-webfont.svg#weblysleek_uilight) format(svg); font-weight: normal; font-style: normal;.background { background: url(../pictures/ahhfot78.png) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; h1 { footer { font-family: weblysleek_uilight; background-color: #1b1b1b; width: 100%; position: fixed; float: left; clear: right; bottom: 0px; text-align: center; color: rgba(255,255,255,1.00);.projekter:after { content: ; display:table; clear:both; object { -webkit-box-shadow: 3px 3px 7px 2px #484848; box-shadow: 3px 3px 7px 2px #484848; CSS-betingelser for min font-family. Indlejret, så min side kan ses i samtlige browsere, med den rigtige font..background indeholdende billede, som skalerer i takt med mit responsive design. Min font-family er defineret i mine basisbetingelser, som mine mediaqueries efterfølgende arver fra. Footer har position: fixed og bottom: 0px, så den altid bliver i bunden af skærmen. content: "", display: table og clear: both, gør at min object får en højde. Mit object har skygge vha. box-shadow. li:hover a { color: #d88034; transition: 500ms ease-in-out;.show-menu { font-family: weblysleek_uisemilight; text-decoration: none; padding: 10px 0; display: none; float: right; clear: left; height: 37px; margin-top: 20px; width: 54px; padding-top: 18px; padding-left: 6px; input[type=checkbox]{ display: none; input[type=checkbox]:checked ~ #menu{ display: block; @media (max-width: 320px) nav ul { position: static; display: none; list-style-type: none; width: 160px; text-align: center; float: right; margin-right: 10px; margin-top: 15px; nav ul li:last-child { margin-bottom: 30px; object { display: none; @media (min-width: 769px) Mine links i menuen har en hover-farve med transition på. Styling af min menu, som i min basis-css skjules som default. Den knap som trigger min drop-down menu skjules. Min knap viser min drop-down menu, når den er klikket til og skjuler den igen ved andet klik. I mit mobile view skjules den brede menu fra mit desktop-view. Sidste element i min menu udvælges med en child-selektor, for at give den margin i bunden. Min bladre-pdf skjules i de små media-quries. div.visionsfolder img { width: 80%; height: auto; -webkit-box-shadow: 3px 3px 7px 2px #484848; box-shadow: 3px 3px 7px 2px #484848; figure img { width: 200px; height: 200px; display: block; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; margin: 0 0 10% 0; text-align: center; Mit img i.visionsfolder har skygge vha. box-shadow. Img i figure er gjort rundt med border-radius. div.visionsfolder img { display: none; @media (min-width: 900px) object { width: 700px; height: 351px; Mit billede af visionsfolderen og linket på den skjules i desktop-versionen, til fordel for en bladre-pdf. Størrelsen på min bladre-pdf justeres ved større skærme. 58 59