Oblig.04 – Book Design

Design book cover, title page, table of contents and sample pages of the book «Typography from the East». Text, photos and illustrations are given from the writer, so you should concentrate on layout, typography and color. This book contains examples of Asian, Arabic or Indian Typography – you can choose which area you want to focus on. The book is meant for designers in the West who want insight into the expression and design of Eastern typography.

You should only work with typography, colors, and grid, as ways to express your theme. Download files from Noroff.

 

I denne oppgaven skal jeg designe et bokomslag, tittelside, kolofon side,  innholdsfortegnelse, forord og vise eksempler på sider hvor tekst og bilder skal fungere sammen. Jeg må vite om typografiske design prinsipper og metoder, få et innsyn i hvordan det er å jobbe med bok design og utforske typografi, layout og grid.

Jeg har valgt å fokusere på India, og Indisk typografi. Jeg ønsker å lære mer om deres typografi, kultur og historie, og synes det er et veldig spennende og interessant land. Jeg startet med å se gjennom filene som jeg har fått lastet ned fra Noroff. Deretter har jeg sett på bilder fra og om India i Google, og brukt diverse søkeord for å finne inspirasjon til design og layout. Videre har jeg lånt bøker fra mitt lokale bibliotek.

Fakta om India:
Språk: 18 offisielle språk, de største er hindu, urdu, engelsk, punjabi, tamil
Hovedstad: New Delhi
Innbyggere: 1,2 milliarder
Areal: (km2) 3,2 mill
Myntenhet: Rupi
Religion: Hinduisme 82%, islam 12%, buddhisme, 2% sikhisme, jainisme, kristendom 2,3%
Nasjonaldag: 26.januar
– Dyrelivet er mangeartet og rikt.
– India er blant verdens største økonomiske makter, samtidig som landet også er blant verdens fattigste.
– Indisk kultur har blitt eksponert over hele verden, for eksempel gjennom religion, yoga og mat.
– India har det høyeste antall spillefilmer per år, og det produseres om lag 1000 filmer årlig.

Videre har jeg jobbet med å lage moodboards, så langt har jeg laget fire forskjellige. Med fokus på elementer fra alfabetet og skriften, religion og historie, kultur og farger, samt med inspirasjon fra tre bøker som er lånt fra bibliotek.

moodboard_01moodboard_02


moodboard_04

 

moodboard_03

Videre i prosessen har jeg jobbet med idéutviklingsmetoder, slik som tankekart og ABC-metoden. Her har jeg samlet ord om India og typografi, samt annet.

img050img051

 

«Avstand er nøkkelen til god typografi» Eric Gill

Kilder

Rannem, Ø. (2005). Typografi og skrift, Abstrakt forlag.

http://snl.no/hindi

http://snl.no/urdu

http://snl.no/Alfabet_i_India

http://snl.no/India

http://www.kulturstudier.no/fakta-om-india

Learning activity week 3 – Question 2

Look at the history timeline at the beginning of this lesson. Gather information from 1900-2000, and design your own timeline for the Swiss Design Style. Each movement should be described in a creative way.

Denne læringsaktiviteten har tatt mye mer tid enn planlagt, både fordi jeg ikke helt har forstått oppgaven og fordi det rett og slett har vært svært utfordrende å gjennomføre den.

Først gikk jeg tilbake til linken jeg ble anbefalt å bruke fra pensum, hvor det var en tidslinje over grafisk designs historie, du kan finne den her. Fra forsiden kan du klikke deg videre til selve tidslinjen, og deretter utforske de ulike bevegelsene/stilene og videre fordype deg. Utifra dette tolket jeg først oppgaven som at jeg skulle designe en tidslinje over grafisk designs historie. Dette gjorde jeg slikt:


Etter dette leste jeg oppgaven flere ganger, på nytt, itillegg til å se på andre studenters arbeider fra Noroff. Jeg hadde tydeligvis misforstått. Oppgaven gikk ut på å designe en tidslinje over Swiss stilen, og lage dette kreativt og oversiktlig. Med noe av det samme designet, laget jeg en oversikt som så slik ut:


Selv nå følte jeg at tidslinjen manglet tekst, bilder og illustrasjoner, og ikke virket særlig kreativ, tross mye tid som er brukt til planlegging og research. Videre bestemte jeg meg for å lage en oversikt over hva jeg kunne plassere over, og prøve å få en bedre helhet, samt flyt i designet. Jeg benyttet meg flittig av grid system og linjaler i Illustrator, og internett til å samle inn relevante bilder og illustrasjoner. Etter mye arbeid, ble resultatet slik:


Denne tidslinjen er kanskje ikke så oversiktlig, og bruker ikke farger for å illustrere år, slik som tidslinjene over. Den denne har mer tekst, altså mer informasjon, samt bilder og illustrasjoner som viser arbeider som er utført, fonter som er utviklet, bøker som er utgitt m.m.

Jeg har lært veldig mye om både grafisk designs historie og Swiss stil bevegelsens historie og kjennetegn. Denne tidslinjen håper jeg å bruke i fremtidige oppgaver, eller at andre finner inspirasjon eller informasjon de kan bruke til sine oppgaver.

– Annette B. D.

WEBP – Idéutvikling 1

Denne uken startet jeg arbeidet med moodboards. Med de to moodboardene nedenfor ønsker jeg å vise farger, tekstur og andre viktige elementer som kunden ønsker at jeg skal ta hensyn til underveis i prosessen. Fargene indigo og burgunder var hovedsaklig kundens ønsker, og om dette er noe som passer til det endelige resultatet får jeg teste ut. Jeg har også brukt noen av kundens egne bilder av prosess og produkt, for inspirasjon.

Videre har jeg jobbet en del med wireframes, og digitale skisser av design og layout av nettstedet. Disse har jeg laget i Photoshop, og fokusert på plassering av elementer, samt navngivelse av disse for en bedre oversikt. Wireframe er et storyboard, og et visuelt uttrykk som viser hovedelementene som skal være med.

 

De 4 wireframene over viser hovedsiden (Home) til nettstedet. Jeg ønsker å ta for meg hovedsiden først, deretter de andre sidene. Derfor kommer wireframes, elementer, tekst og annet til de andre sidene til nettstedet senere.

Ha en fin 17.mai alle sammen! Hipp Hipp HURRA!

– Annette B. D.

10.1 Nettsted for regnskapsfirma

Et regnskapsfirma trenger nettside. De ønsker noe enkelt og greit, og har ingen føringer på design. Det viktigste for firmaet er at de selv kan legge ut nyheter hver dag, og oppdatere tekst og bilder ganske ofte. De trenger minst 4 sider:
– en side for kontaktinformasjon og besøksadresse
– en side med oversikt over de ansatte
– en prisliste og generell informasjon til kunder
– en nyhetsside

Nå føler jeg det er på tide å avslutte denne læringsaktiviteten, og vise dere hva jeg har klart å produsere de siste ukene. Det har vært enormt mye nytt å sette seg inn i, samt opparbeide kunnskap og erfaring om. Det har vært 2 veldig tøffe uker, siden jeg har hatt mye problemer med installasjonenen, struktur, navngivning, themes, etc. I prosessen har det vært mange feilmeldinger som har dukket opp, dette er noen av dem:

Etter mange dager med frustrasjon, og etter å ha løst alle problemene mine måtte jeg sette igang med selve nettstedet. Jeg valgte themet Techozoic Fluid, fra wordpress.org, her.
Deretter valgte jeg et navn på regnskapsfirmaet, og som jeg har benyttet til nettstedet og denne oppgaven, navnet ble Regnskapsfirma1.

Dette er selve innloggingssiden: 

 

Deretter kommer dette opp på skjermen: 

Slik ser selve Dashboardet ut, med mange innstillinger og valg: 

Først lagde jeg en egen meny, slik: Menyen består av 5 sider/pages jeg har opprettet. Jeg har flyttet på dem, og valgt en rekkefølge jeg er fornøyd med, og gitt selve menyen et navn. Siden/page «tjenester» har 6 undersider, som gjør at man kommer til en ny side ved å trykke på linkene. Totalt har jeg opprettet 11 sider til dette nettstedet.

Videre i prosessen valgte jeg et header bilde fra themet jeg likte svært godt, og ønsket kun at dette ene bildet skulle vises på alle sidene på nettstedet. Jeg vurderte å lage et eget bilde/et collage som jeg kunne brukt til header, men likte godt det bildet fra themet jeg valgte. Jeg synes det passer svært godt til et regnskapsfirma, og deres nettsted.

Jeg har installert noen plugins, og aktivert disse. Jeg har jobbet en del med å sette meg inn i andre innstillinger, hva disse gjør og eksperimentert litt med de ulike valgene. Det er ikke alle alternativer og valg som jeg skjønner meningen av, derfor må jeg teste ut og se hva som er forandret. Jeg har valgt at «hjem» siden skal være hovedsiden til nettstedet, altså en statisk side. Videre valgte jeg at «nyheter» siden skal fungere som en side hvor kunden kan poste innlegg og informasjon.

På alle sidene har jeg fylt ut en del informasjon som er nødvendig for kunden. Denne informasjonen har jeg funnet på ulike regnskapsfirma nettsteder, kopiert og videre bearbeidet. Slik ser selve hovedsiden til Regnskapsfirma1 ut, når jeg er logget inn på wordpress:

Om du ønsker å se hele nettstedet, og hvordan alle sidene ser ut, benytt linken under. Klikk deg videre og gjennom nettstedet, og legg gjerne igjen en kommentar på hva du synes om Rengskapsfirma1’s nettsted.

http://elevarbeid.webstudent.no/dmk1_nettstudier/annette_dahlen/wordpress/

– Annette B. D.

Oblig.08 – Banner prosess

Nå begynner banneren, som skal reklamere for fotogalleriet, å bli ferdig. To dager før innlevering gjenstår det å gå igjennom Flash arbeidene mine, ferdigstille rapporten og få integrert banneren på mitt enkle nettsted, samt laste opp fotogalleriet. Jeg er veldig spent på om jeg klarer å få til dette på første eller andre forsøk, og gleder meg til å få alt på plass, samt vise dere hva jeg har jobbet med i 5 uker.

Banneren skal inneholde en enkel animasjon. Jeg har valgt å lage en animasjon av en bukse/jeans som blir brettet, og har jobbet med fire hovedstadier i animasjonen. Disse tegningene har jeg tatt prinscreens av, så dere kan se hvordan buksen ser ut i de ulike stegene. Først en tegning av en jeans i full lengde og bredde, bakfra. Deretter en tegning av en jeans som er brettet til den ene siden, hvor det andre «beinet» ligger bak. Videre en tegning i prosessen som viser hvordan buksen ser ut idet den blir foldet en gang. Den siste tegningen viser hvordan en jeans ser ut når den er ferdig brettet, kompakt og plassbesparende.

 

Jeg har brukt veldig lang tid på å utvikle disse fire stadiene i animasjonen, og det har vært svært krevende å bruke Adobe Flash sine tegneverktøy. Jeg har allerde gjort noen forandringer til tegningene for å forenkle de enda mer. Etter mye jobbing med å tegne og finpusse på buksene har jeg laget et movie clip. Jeg har brukt en blå farge i stroke for å illustrere hvilken farge jeansen har. Jeg startet med å velge Create Shape Tween mellom de fire tegningene, og laget en animasjon på tilsammen 10 sek. Videre jobbet jeg med plassering av shape hints, altså hint man kan legge til for å få mer kontroll over animasjonen. Problemet mitt var at mellomposisjonene fra det ene stadiet til det andre ble helt feil, og absolutt ikke slik jeg hadde tenkt det. Jeg prøvde videre, og jobbet svært lenge med å få tweeningen slik jeg ønsket. Resultatet ble greit nok for å være nybegynner, men jeg følte meg veldig usikker på om dette kom til å bli godkjent.

Min eneste mulighet for å rette opp i animasjonen var rett og slett å starte på nytt, men jeg hadde fortsatt mine fire stadier å arbeide etter. Jeg opprettet et movie clip, startet med det første stadiet, og forandret tegningen i hver enkelt ramme. Deretter fortsatte jeg med å legge inn 2 sek pause, for deretter å jobbe videre med det andre stadiet, samt gradvis forandre tegningen. Arbeidet fortsatte med pause, steg 3, lage forandringer i 24 frames, pause, steg 4, pause. Animasjonen min ble 10 sek denne gangen også, men selve animasjonene kun 1 sek hver, med 2 sek pause/hold. Jeg har jobbet utrolig presist og vært nøyaktig med plassering, samt hvordan jeg har laget animasjonen. Mye tid er blitt brukt til å gå gjennom og rette opp animasjonen, og jeg føler selv jeg er mer tilfredsstillt ved dette resultatet.

På scenen skrev jeg inn tekst som skal brukes på banneren, og la til jeans animasjonen min. Måtte jobbe nøyaktig med plassering her også, og hvordan de ulike elementene skulle stå i forhold til hverandre. Tilslutt la jeg til en effekt på fotoessayets tittel for å få banneren mer interessant, en Clockwise rotasjon, som skal gjenta seg 2 ganger i sekundet. Utfordringen var å få dette til å stoppe akkurat i det animasjonen starter.

Jeg har valgt å benytte de samme fargene på animasjon og tekst som i fotogalleriet, for å skape en helhet og følelse av at alt henger sammen. For å få banneren til å fungere som en knapp/peker har jeg opprettet et button symbol og laget en knapp som er like stor som banneren, altså 640 px x 320 px. Knappen er usynlig og har kun innhold på Hit- stadiet. Fra banneren skal brukeren kunne trykke og komme direkte til fotogalleriet. Se printscreen under for hvordan banneren ser ut i scenen, det lyse blå laget illustrerer knappen.

– Annette B. D.