2017

PortfolioPortfolioDaniel Farcinsen

Hovedforløb 1

Grafisk design 1

Dokumentation - Grafisk design

OpgavenFilmskolen Film Jylland, søgte et nyt logo. Jeg havde fået til opgave at komme med et oplæg til et nyt design.

MålgruppeDen primære målgruppe er for unge med lyst til at arbejde med film og tv.

TypografiJeg brugt fonten Calibri Bold, da det var det kunden ønskede, at bevare fonten fra deres tidligere logo.

FarverFarverne der er brugt i logoet er primært; sort, hvid, grøn og mørk grå. De sorte og hvide farver er valgt fordi det er nogle gode kontrast farver der kan fungere på mange forskellige baggrunde.

Den grønne grønne farve giver associationer til en greenscreen, som er et værktøj der er meget brugt i film og tv branchen. Den mørke grå farve er valgt, fordi den stiplede streg skal forestille en filmstrimmel.

IllustrationerLogoet består af en række simple elementer, hvorved elemenet er en sort cirkel med en mindre grøn cirkel (Nogle ville nok kalde det en stroke) og bogstaverne “FJ” inden i.Ud af den sorte cirkel kommer der en punkteret streg som skal forestille en filmstrimmel. det er min hensigt at loget skal give associationer til en gammeldags filmrulle

Logoet skulle kunne andvendes både på sorte og hvide baggrunde.

Arbejdsproces• Søge inspiration på nettet• Skitsering & Brainstorm• Lave grafik i Illustrator• Finjustere logo i Illustrator• Udarbejde eksempler til forskellige baggrunde og størelser• Afsende oplæg

KvalitetsvurderingJeg er selv meget tilfreds med logoet, efter en del tilpasniger synes jeg det er faldet meget godt på plads. man kunne måske godt arbejde lidt mere med pladscering af navnet.

Grafisk design 2

Skitsering & Brainstorm

Grafisk design 3

Udvikling

FJ

FJ

Grafisk design 4

Det færdige resultat

Grafik og Billeder 5

Dokumentation – Grafik og Billeder

OpgavenOpgaven gik ud på at fremstille et Banner til brug på web og sociale medier. Bannert indeholder et billede af Alexsander, samt et Citat fra Alexander. Baggrunden består af to billeder. Jeg har arbejdet selvstændigt med hele opgaven.

ProgramvalgJeg har benyttet Photoshop til hele opgaven, da jeg primært har arbejdet med fritlægning og farvejustering, i denne opgave.

Værktøjer benyttet i PhotoshopLevels: Brugt på billedet af Alex, for at skabe balance og skarphed i billedets farverHue/satuation: Giver Alex mere kontrastQuick selection tool: Brugt til udvælgelsen til fritlægningSelect and Mask: brugt for at få en mere præcis udvælgelse, inden der puttes Layer mask påLayer mask: Fjerner baggrunden på en non-destruktiv mådeBrush tool: Brugt til at finpudse fritlægningType tool: til indsætning af tekstCurves: Brugt til at skabe en ensartethed i farve og kontrast, mellem de to baggrundsbillederBlack & White:

For at gøre baggrunden sort hvid

Arbejdsproces• Åbnede billedet af Alexander i Photoshop• Fritlagde billedet• Oprette et nyt dokument, 851x 315px, opløsning 72 px (RGB-color)• Åbenede billedet af Pejsestuen• Lavede levels justering på billedet af Alexander• Tilføjede Hue/Saturation på billedet af Alexander• Tilføjede tekst• Åbenede billedet af Stone Texture• Lavede Curves justering på de to baggrundsbilleder• Fritlagde lænestol og pejs• Tilføjede sort hvid på de to baggrundsbilleder

KvalitetsvurderingJeg er generalt meget tilfreds med resultatet, men jeg kunne godt have arbejdet mere med farvejustering.

Grafik og Billeder 6

Andvendte billeder

Grafik og Billeder 7

BaggrundBaggrunden består af to sammensmeltede billeder. Lænestolen og pejsen er blevet fritlagt, med Layer mask. Efterfølgende er der lavet en Curves justering, for at skabe en større ensartethed.

Til sidst er der lagt black & white på.

Grafik og Billeder 8

AlexanderFørst har jeg fritlagt Alexander, medQuick selection tool, Select and Mask, og Layer mask.

Dernæst har jeg lavet en Levels justering, for at skabe mere balance og en bedre helhed med baggrunden.

Til sidst har jeg lavet en Hue/Saturationjustering, For at give mere kontrast.

Grafik og Billeder 9

Det færdige resultat

Workflow 10

Dokumentation - Workflow

Opgaven Opgaven gik ud på at fremstille en plakat til #iskTRI (Ikast Triathlon)

Designkrav• Plakaten skal være en str. A3• Indeholde 3 af de billeder de havde sendt• Indeholde deres tekest• Der skal være tidspunkter og kontaktoplysninger• Der skal være et blikfang

Layout• Logoet er placerte i toppen• Rubrik og Manchet• I middten er billederne placerte• Mellemrubrick og brødtekst• Kontaktoplysninger•Stjerne og bølge

ProgramvalgJeg har valgt at fremstille plakaten i InDesign. Stjernen har jeg lavet i Illustrator.

Arbejdsproces• Søge inspiration på nettet• Brainstorm• Beskæring og opsætning af billederne• Indsætter vector #iskTRI• Insætter tekst• Laver tekst formatering• Laver Stjernen i Illustrator

• Stjernen sættes ind og der tiføjes tekst• Bølgen sættes ind• Plakaten sendes afsted til godkendelse hos kunden• Kunden melder tilbage med rettelser• Jeg fortager rettelserne• Kunden godkender plakaten

KvalitetsvurderingJeg er ret god tilfreds med den endelig plakat, det betyder meget for mig at kunden blev gald for den. i sidste ende handler det om at kunden for det de gerne vil have.

Men Jeg kunne godt ønske mig nogle bedre billeder.

Workflow 11

Det færdige resultat

Deltagere får en rabat kode til Ikast Triatlon Lørdag 6. maj 2017

Der vil være mulighed for, at prøve kræfter med svømmetræning, krydstræning og ikke mindst en sjovt mini-tri konkurrence.

Medbring: Badetøj, svømmebriller, cykel og hjelm, løbesko og godt humørDet er gratis og uforpligtende.Mødested: Ikast Svømmeklub (indgang fra Vinkelgade)

Kontakt: Brian JakobsenMobil: 26 22 18 80Mail: brian.jakobsen0208@gmail.com

Lørdag d. 29. april kl. 10 - 13Inviterer iskTRI Ungdom alle interesserede i alderen 12 - 17 år til

ÅBEN TRÆNING

Typografi & Ombrydning 12

Dokumentation - Typografi og ombrydning

OpgavenOpgaven gik ud på at lave et indstik om gestalt lovene til det grafiske magasin UD KOM.

SkrifttyperJeg har valgt at bruge skrifttyperne Myriad Pro og Minion Pro.Rubriker og Mellemrubrikker har jeg brugt Myriad Pro Bold.

Til brød teksten har jeg brugt Minion Pro, fordi en skrift med seriffer(fødder), er god til tryksager, da den er rar at læse, og teksten er mere overskuelig.

Til sidetallene har jeg brugt Myriad Pro for Skabe et godt helhedsindtyk.

LayoutsMargins: Top: 20mm, Bund: 30mm, Yderside: 20mm, Inderside: 10mm.Siderne er lavet med facing pages, så de har den rigtige opsætning i forhold til magasinet, og kan derved stå sammen.

A, og B mastersider har sidetal.A-Master: har 3 kolonner for at kunne få en masse tekst til at fylde mindre for at gøre det mere overskueligt at læse.

B-Master: 2 kolonner for at kunne få tekst der ikke kan fylde en hel side med 3kolonner, til at fylde mere, og stadig værre læseligt.

Sidestørelserne er 199mm x 279 mm som er et angivet krav.I layouts med flere kolonner har jeg delt dem op med en sort streg, der skal gøre det nemmere for læseren at følge læseretningen.

BillederJeg har primært valgt at bruge små illustrationer til at vise brug af gestalt lovene i praksis. Jeg har brugt forskellige typer af text wrap i opgaven. Jeg blandt andet brugt Photoshop clipping path, til at lave figursats.

IndholdDet meste af teksten og nogle af illustrationer er fundet på hjemmesiden her: http://www.nielsgamborg.dk/?p=gestaltloveneDerudover har jeg fundet mere materiale på google.

KvalitetsvurderingJeg er godt tilfreds med det færdige produkt. Jeg kunne godt have brugt noget mere luft, blandt andet i kolonne renderne og rundt om billederne.

Typografi & Ombrydning 13

Det færdige produkt side 32 & 33

/ s. 32 / s. 33

Loven om Figur og BaggrundRubins vaseDenne klasiske figur viser på fremragende vis, hvad der kan ske når figur og baggrund er lige store, og ikke er klart defi-neret. Vi kommer i tvivl. Hvad er forgrund og hvad er baggrund?

I dette tilfælde har Rubin selvfølgelig arbejdet bevidst med at pirre vores sanser, men hvis vi ikke er tydelige nok i vores definition af for og baggrund, vil vores brugere blive forvirrede og have svært ved at overskue indholdet på vores side.

I forhold til et design

Betyder gestaltloven om figur og grund, at det er vigtigt, at

forgrunden og bag-grunden er godt definerede.

Så sørg for at baggrunden ikke tager magten fra figuren eller

forgrunden.En måde at gøre det på,

er ved at sørge for at der er nok kontrast. Kontrasterne er med til at løfte figuren fra baggrunden og dermed

tydeliggøre, hvad der er figur, og hvad der er baggrund.

En af de hyppigste fejl, er en urolig eller kraftig farvet baggrund, der gør tekst vanskelig at læse. Jeg hører ofte argumen-tet: “Jeg kan godt læse, hvad der står”. Og det kan jeg som regel også, men pointen er, at den ener-gi jeg bruger på at tyde bogstaver, kan jeg ikke bruge på at fange indhold og budskaber.

Det handler om at gøre det let for brugeren. Så er der en chance for, at han vender tilbage.Gestaltlovene

Handler om perception. Lovene beskriver, hvordan vi sanser, og forsøger at give bud på, hvordan den menneskelige hjerne opfatter sammenhænge i omverdenen.

Getaltlovene udspringer af videnskabelig forsøg, og de virker meget logiske.

På de følgende sider vil jeg beskrive, hvordan den enkelte gestaltlov, kan bruges til at skabe mere overskuelige og brugervenlige webdesign.

Gestaltlove skaber overblikBrug af gestaltlove i dit webdesign skaber overblik for brugeren. De enkelte gestaltlove hjælper dig med at organisere dine informationer, så brugeren lettere kan overskue indholdet på din siden.

Gestaltlovene sørger altså for at design og funktionalitet går hånd i hånd i stedet for at modarbejde hinanden.

Elementer og helhederHer er et par sjove eksempler på, hvordan hjernen forsøger at finde meningsfyldte forklaringer på vores sansninger:

Analyse af elementer afslører ikke helheden. Helheden er mere end summen af de enkelte dele.Denne klassiske figur er et andet

sjovt eksempel på, at vi sanser mere end det der rent faktisk er. Her ser

vi tydligt en trekant, som rent fak-tisk ikke er til stede i figuren.

Hvorfor er Gestaltlovene stadig aktuelle?Gestaltlovene har efterhånden 80-90 år på bagen, men i forhold til skærmdesign er de mere aktuelle end nogensinde.

Mængden af information på nettet er stor, og brugerens op-mærksomhed flygtig. Derfor er overskuelighed vigtig for at bruger-en hurtigt kan gennemskue, hvad vores hjemmeside kan tilbyde.

Endvidere er det sværere at læse på skærm end på papir. Det giver også et stort behov for at organisere informationerne på en overskuelig måde.

De enkelte gestaltlove handler netop om, hvordan vi som men-nesker opfatter og organiserer elementer i vores hoveder. Ved at bruge lovene aktivt kan du få oplys-ningerne på dine hjemmeside til at hænge bedre sammen.Det øger brugervenligheden og hjælper din bruger med at fokusere på din hjemmesides indhold.

Typografi & Ombrydning 14

Det færdige produkt side 34 & 35

/ s. 34 / s. 35

Loven om lighed“Symboler, der ligner hinanden, opfattes som hørende sammen.”

Vi opfatter figurerne her som 2 cirkler, 2 firkanter og 2 trekanter.

Vi kan forstærke samhørigheden med farver og det vil blive både hurtigere og lettere for os at foretage grupperingen.

Loven om lighed dækker f.eks. form, farve, størrelse og placering. Navigationen på vores websted er god til at anskueliggøre denne lov.

Vi placerer vores menuer, det samme sted på alle vores sider. Vi bruger endda ofte de samme placeringer, som

loven i praksisalle de andre websteder. Menuerne er f.eks. topstillede og venstrestillede. Det giver vores brugere hurtigt overblik og en følelse af at kunne gennemskue navigationen fra første besøg. Det giver brugeren overskud til at fokusere på indholdet.

Endvidere giver vi alle vores knapper samme form, samme størrelse og oftest også samme farve.

Hvis du bruger flere forskelige navigationsformer, er det vigtigt, at disse er forskellige. Netop for at brugeren kan adskille dem fra hinanden. Så brugeren f.eks. ikke er i tvivl om, hvad der er hovedmenu og hvad der er undermenu.

Gestaltloven om lighed er også en af årsagerne til, at vi ikke må bruge understregninger i webtekster. Brugeren er vant til at en understregning betyder at der er tale om et link, og derfor skal vi ikke bruge under-stregninger i andre sammenhænge.

Loven om Nærhed“Symboler, der er anbragt nær hinanden, opfattes som hørende sammen.”

Vi opfatter umiddelbart cirklerne som hørende sammen to og to.

Ved at bruge næste gestalt lov, Loven om Lighed, kan

vi forstærke indtrykket yderligere. Se hvad der sker, når vi tilføjer nogle former til figuerne.

I forhold til webdesignNoget at det første vi gør, når vi prøver at skaffe overblik, er at afgøre, hvad der hører sammen, og hvad der ikke hører sammen. Når vi skaffer os overblik sker det autom-atisk og ubevidst. Derfor er det vigtigt, at du organiserer informationerne på din hjemmeside.

Gestaltloven om nærhed er meget logisk. Informationer der hører sammen, skal placeres nær hinanden. Det gælder f.eks. for

Billedteksten og billedet.Overskriften og teksten.Menupunkterne i menuenBrugeren skal intuitivt kunne fornemme, hvilke infor-

mationer, der er hænger sammen.

Når vi anbringer nogle elementer tættere på hi-nanden, betyder det også at andre skal placeres længere fra hinanden. Vi skal med andre ord arbejde med luften eller de negative flader i vores design. Vi skal arbejde bevist med at bruge mere luft for at adskille elementer og mindre luft for at knytte dem sammen.

Det betyder også, at det f.eks. kan være farligt at bruge lige margener (justify). Der kan let opstå endog meget store mellemrum mellem ordene. Det kan betyde at ord fra de andre linier faktisk kommer tættere på og dermed nedsætter læsbarheden.

Her er nogle eksempler

Typografi & Ombrydning 15

Det færdige produkt side 36 & 37

/ s. 36 / s. 37

Loven om forbundethed“Symboler, der er forbundet, opfa-ttes som hørende sammen.”

Vi opfatter, at figurerne, der er forbundet med streger eller farver, hører sammen. Og det på trods af, at de har forskellige former.

Selv om man ændrer på farv-erne, vil vi stadig automatisk parre de figurer, der er forbundne. Se bare her.

Gestaltlove i praksisElementer kan være forbundet med hinanden på flere måde. Det kan være ved at man trækker linier mellem de enkelte elementer, ved at lade farvede flader forbinde hi-nanden eller ved at lade forskellige elementer overlappe.

Linier er gode at bruge, hvis du tvinges til at placere sammenhøren-de elementer langt fra hinanden.

Det kan f.eks. være fork-laringerne i en tutorial, der skal placeres uden for selve illustra-tionen. Her kan du bruge streger til at forbinde dine elementer. Samme metode bruges også ofte i forbindelse med brugsanvisninger og samlevejledninger.

Eller det kan være hjælpelinier, der leder øjet i brede tabeller. På nettet bliver metoden ofte brugt i forskellige fora.

Forbundne farver ses ofte i forbindelse med menuer. Især er det udbredt ved faneblads-naviga-tion. Her får det aktive fane-blad typisk samme farve som indholdet på siden. Hvilket viser samhørigheden mellem menupunkt og indhold. I faneblads navigation bruges gestalt loven om forbunde-thed også ofte, når man skal vise sammenhængen mellem et hovedmenupunkt og den tilhørende undermenu.

Overlapninger forbinder også elementer, og kan være gode, hvis du skal have samlet meget forskellige elementer.

Loven om lukkethed“Symboler, der står i samme ramme, opfattes som hørende sammen.”

Selv om formerne er forskellige vil vi gruppere figurerne efter rammerne.

Og selv om vi ændrer på farv-erne, vil vi stadig opfatte, at det er figurerne i rammerne, der hører sammen.

Eksempler på brugI skærmdesign bruger vi ofte ge-staltloven om lukkethed. Vi placerer vores tekster og billeder i forske-lige former for bokse og rammer. Det skaber overblik over, hvilken information, der hører til hvor. Så gestaltloven om lukkethed, gør os i stand til at overskue sider med selv rigtig meget information.

Ved at ramme elementerne ind, kan du også placere dem tættere på hinanden, uden at det går ud over overskueligheden. Ergo kan du også placere en større mængde informa-tion på den samme plads, når du bruger gestaltloven om lukkethed.

Rammer er også gode, hvis du vil samle elementer, der er meget forskellige. Eksemplet til venstre viser at rammerne kan overvinde selv store forskelle på elementers udseende.

Endvidere bruges gestaltloven om lukkethed også flittigt i de tradi-tionelle medier som f.eks. aviser, ugeblade og magasiner. Specielt i aviser er det nødvendigt at organ-isere store mængder af ofte meget forskellige typer information på en overskuelig måde.

Et par Grafiske Eksempler

Typografi & Ombrydning 16

Det færdige produkt side 38 & 39

/ s. 39/ s. 38

GestaltpsykologiPsykologisk retning, som fra omkring 1920 kom til at spille en stor rolle, især i perceptions- og kognition-spsykologi, ved at hævde, at mennesket er aktivt struk-turerende og meningssøgende i sin måde at opfatte og erkende på. Derved førtes den klassiske psykologis humanistiske tradition ind på et område, der hidtil havde været domineret af naturvidenskabelig, sansefysiologisk, psykofysisk og neuropsykologisk forskning.

Hovedmændene er de tyske psykologer Max Wertheimer, Kurt Koffka, Wolfgang Köhler og Kurt Lewin, der alle rejste til USA i begyndelsen af 1930’erne og udgav deres hovedværker der. Førstnævntes arbejde fra 1912 om det såkaldte phi-fænomen gav stødet til gestaltpsykologien. Fænomenet er, at man kan opleve, at en genstand bevæger sig, skønt den fysisk set er i ro. Det viser, ligesom undersøgelser over forskellige geometrisk-optiske illusioner, at der ikke er en entydig korrespondance mellem de fysiske påvirk-ninger af sanseapparaterne og den oplevelse, personen har. Köhler er især kendt for sine undersøgelser over indsigtsfuld problemløsning hos chimpanser. Sammen med forsøg over menneskers problemløsning viser de, at opfattelse og nyopfattelse (omstrukturering) af hele den foreliggende situation er afgørende for, om og hvordan et problem løses. Lewin blev siden mest kendt som person-ligheds- og socialpsykolog med sin gestaltpsykologisk-prægede feltteori om felter i personers “life space”.

Gestaltpsykologien i DanmarkGestaltpsykologien fik stor betydning i Danmark, idet Edgar Rubin, professor ved Københavns Universitet 1921-51, med sin disputats Synsoplevede Figurer (1915) anlagde et tilsvarende helhedssyn og arbejdede med figur-grund-fænomenet, jf. hans berømte vasefigur. Rubin kunne dog ikke acceptere gestaltpsykologiens teoriopbygning, men arbejdede mere beskrivende, idet han vha. fænomenologisk metode tilstræbte størst mulig indsigt i, hvordan forskellige fænomener oplevedes af hans forsøgspersoner.