WORK- FLOW PLATFORM WEBSITE H2

WORK- FLOW PLATFORM WEBSITE H2

Platform Min opgave var at lave logo og website til et nyt spillested i Vejle. Genren der spilles på stedet er alternativt og indie Rock + elektronisk musik. Kunden er en fiktiv person, som var min daværende mester. 2 Workflow Workflow 3

Slideshow Slideshow Slideshow Wireframes Arrangemanter Knunstner X Aktuelt Det er en virkelig god ide, at lave wireframes til sin hjemmeside inden man putter content ind. Af samme grund, er det også meget nemmere at overskue den responsive del, altså hvor alting skal hen og hvilket skal gemmes væk. Desktop // startside Desktop // Kunstner/event KØB Slideshow Arrangemanter Video Kunstner Nyhedsbjælke Aktuelt SE FLERE Arrangementer Video Tablet // startside Tablet // arrangementer Tablet // kunstner/event logo logo logo Desktop // arrangementer Arrangementer I toppen sidder logoet og et slideshow. Så har jeg en menu. Derefter kommer content i bokse, som er nemme at skubbe rundt når det skal være tablet eller mobil. I bunden har jeg footeren med en kontaktformular og div. socialcons. Aktuelt Arrangementer Kunster X Video Det er svært for en ikke web vant kunde at kigge på sådanne tegninger, det erfarede jeg. Efter wireframes var præsenteret til kunden, kunne jeg begynde at lave et layout med content. Arrangementer Mobil // startside Mobil // arrangementer Mobil // kunstner/event 4 Workflow Workflow 5

Jeg havde rigtig mange forslag til et logo. Navnet havde jeg bidt mig fast i skulle være. En er et sted eller et område, og i forbindelse med mit sted, var det et sted man kunne kalde en scene. latform Layout Jeg fik min inspiration fra Tinderbox hovedsageligt og diverse andre sider. Jeg har meget fokus på billeder og stemning. Der skulle ikke være andet end call to action knapper og billeder. Jeg har lavet layoutet i illustrator, fordi jeg synes det er der, jeg arbejder bedst og mest effektivt. Photoshop kom med en opdatering, lige efter jeg havde lavet dette layout, hvor man kunne have flere artboards, hvilket er en fantastisk funktion. Det var det her logo, jeg valgte at bruge. Det skal forestille en højtaler, men også en vinyl, som kører på sin afspiller. 6 Workflow Workflow 7

Billede af kunstneren med dato, call to action Hjem Arrangementer Kontakt Hjem Arrangementer Kontakt d. 6/8 2015 En menubar med det mest vigtige. L.O.C d. 23/6 2015 JULIASOON d. 6/8 2015 Her skal stå lidt smart om kunstneren, altså en lille mini teaser og lidt facts omkring kunstneren. d. 6/8 2015 21:00-22:30 179 kr. RANGLEKLODS d. 6/7 2015 TOPGUNN d. 13/6 2015 Dette er stedet med en masse info, som jeg har gjort overskueligt. DIZZY MIZ LIZZY d. 17/6 2015 WHOMADEWHO d. 23/6 2015 Et ikon som viser, hvilken genre det er. Julias Moon er en dansk progressiv Electro Pop-duo med base i København.Julias Moon debuterede i oktober 2013 med nummeret "Bay", som blev Ugens Uundgåelige på P3. Wikipedia SANGE: Lipstick Lies, Bay MEDLEMMER: Oliver Kincaid, Louis Samson Myhre, Nicolai Gabold ALBUM: Backseat Thunder, Lipstick Lies, Bay ET DANSK FÆNOMEN, SOM GIVER DEN DANSKE SCENE EN HELT NY LYD ET FANSTAS- TISK TALENT Et citat fra en anmelder der er med til at skabe interesse. NOMINERINGER: Danish Music Award for årets nye danske navn, Danish Music Award for årets danske gruppe D-A-D d. 17/6 2015 kl. 19-22 CHRISTOPHER Dato over hvornår de d. 24/6 2015 spiller og hvad tid. kl. 19-21 SHAKALOVELESS d. 6/8 2015 Her ser vi arrangementer, hvor der er mulighed for at bestille billetter ud i fremtiden. L.O.C d. 25/6 2015 kl. 19-21 RANGLEKLODS d. 6/7 2015 BIKSTOK JULIAS MOON d. 6/8 2015 Her er en smagsprøve af kunstneren gennem en Youtube video. GO GO BERLIN d. 6/8 2015 PLATFORM A/S Tlf: 12 34 56 78 Godsbanen 1 7100 Vejle ÅBNINGSTIDER Alle hverdage 10:30-23:00 KONTAKT OS HER... Hej, jeg har lige et spørgsmål... TILMELD NYHEDBREV Fornavn Her er det TILMELD muligt at følge spillestedet. PLATFORM A/S Tlf: 12 34 56 78 Godsbanen 1 7100 Vejle ÅBNINGSTIDER Alle hverdage 10:30-23:00 KONTAKT OS HER... Hej, jeg har lige et spørgsmål... TILMELD NYHEDBREV Fornavn TILMELD Kontakt og info. Desktop // arrangementer Desktop // event 8 Workflow Workflow 9

Tablet //startside Tablet // arrangementer Tablet // event Mobil // startside Mobil // arrangementer Mobil // event 10 Workflow Workflow 11

type og webfont Opsætning Som logotype har jeg valgt Varela round, fordi det er en speciel skriftype, som skiller sig ud, men stadig er moderne. Den fungere ikke specielt godt som brødtekst, så på sitet har jeg været nødt til at kombinere Lato og Varela Round, hvilket begge 2 er google fonts. Google fonts er frie skrifttyper, som man embedder i sit html, hvilket gør at næsten alle browsere kan læse dem. Varela Round AaBbCc 123456789 Lato Medium Black Bold italic Black italic AaBbCc 123456789 Der er mange forskellige måder at lave responsivt design, de fleste bruger procenter og nogle bruger grid, som ligger ude på nettet. Jeg er ikke avanceret webintegrator, så jeg bruger procenter, hvilket fungerer rigtig godt for mig. Man kan kun bruge procenter i bredden. d. 6/8 2015 RANGLEKLODS d. 6/7 2015 100% 33,33% TOPGUNN 66,67% d. 13/6 2015 Hjem Arrangementer Kontakt L.O.C d. 23/6 2015 DIZZY MIZ LIZZY d. 17/6 2015 WHOMADEWHO d. 23/6 2015 100% 80% D-A-D d. 17/6 2015 kl. 19-22 CHRISTOPHER 45% d. 24/6 2015 kl. 19-21 10% SHAKALOVELESS 45% L.O.C d. 25/6 2015 kl. 19-21 BIKSTOK RANGLEKLODS d. 6/7 2015 JULIAS MOON d. 6/8 2015 GO GO BERLIN d. 6/8 2015 #f444444 #004960 #008789 #ededed #77b7c2 #fcf4dc Jeg kører med en gradient i baggrunden af min slider. Derudover 4 farver, som er meget kraftfulde og moderne. PLATFORM A/S Tlf: 12 34 56 78 Godsbanen 1 7100 Vejle 20% ÅBNINGSTIDER Alle hverdage 10:30-23:00 KONTAKT OS HER... TILMELD NYHEDBREV Hej, jeg har lige et spørgsmål... 40% Fornavn 40% TILMELD *Det er sådan jeg ca. har regnet det ud. 12 Workflow Workflow 13

Kodning Highlights Jeg har tilføjet noget javascript og specielle features til min side. Efter min kunde har godkendt layoutet, skal jeg igang med at hive materiale ind og have lavet mappestruktur. Jeg har holdt min mappestruktur sådan her. org filer er til psd filer osv. images er til png, jpeg osv. Css er til mit css js til javascript. Normalt har man en mappe til undersider, men nu hvor jeg har så få undersider, giver det ingen mening. Det her er en css hover, som jeg har lagt på A reglen, hvilket gør, at der kommer en pil ud fra højre. En god ting at starte med er at sætte denne simple kode ind i sit stylesheet. Den fjerner alt default margin and padding på alle elementer på din side. Normal. Når du hover. Et af de krav min kunde stillede mig var, at hun gerne ville have et slideshow. Jeg har lavet en anden form for slideshow, i og med jeg personligt selv synes det er vildt kedeligt at kigge på. Nogle af billederne jeg har fundet, har stadig en stor ppi, hvilket ikke er relevant for mig. Så jeg laver dem om til 72 ppi, så de er weboptimeret. For at være helt sikker, så gemmer jeg dem som web. (save for web (legacy)). Jeg har valgt en carrusel som et godt alternativ, der hedder flickity, som er meget brugervenlig og 100% responsivt. Man kan bruge det på desktop og touch-styrede devices, da man kan panne igennem carrusellen. Den kører med en simpel javascript, man ikke bliver skræmt af og jeg vil helt sikkert bruge den igen. Jeg har valgt at droppe Dreamweaver, da jeg synes det er blevet for bøvlet at kode i. Der ligger en masse rigtig gode kodningsprogrammer ude på nettet, og jeg har valgt at bruge Sublime Text 2, hvilket vores digitale afdeling også bruger. Jeg koder også i html 5, som giver mig mange flere muligheder for styling. 14 Workflow Workflow 15