Grafik & Billede weloveorganic.com webshop
Opgaven og afsender: Weloveorganic.com er en forholdsvis ny virksomhed, der pånuværende tidspunkt udelukkende sælger økologisk tøj til kvinder. På længere sigt ønsker virksomheden at udvide til mænd og børn. Weloveorganic.com ønsker at få etableret en webshop - da meget af deres salg skal foregå online. De har dog en fysisk butik i Aarhus C - men de ser gerne at de kan få udvidet deres kundekartotek og handler med hele Danmark. Målgruppe: Tøjet, der sælges ved Weloveorganic.com er forholdsvis klassisk - men bærer præg af mange små detaljer. besøges på både store og små skærme. Ydermere skal forbrugeren skal føle sig tryg ved at handle ved Weloveorganic.com. Programvalg: Webshoppen er opbygget gennem Brackets, så den er kodet helt fra bunden. Ydermere er Photoshop samt Illustrator anvendt til at udarbejde billeder og grafik. InDesign er benyttet til at lave en skitse. Til udgivelsen er der anvendt programmet FileZilla. Arbejdsproces: Webshoppen er bygget op ud fra følgende: endelige version uden luft imellem da dette så bedre ud). Skitsen kan ses på næste side: Tøjet kan kategoriseres som en anelse hippie/konservativt - det er ikke for meget, men heller ikke for lidt. Målgruppen her kan derfor være svær at præcisere, da vi i dagens Danmark ofte er enten eller. Men Weloveorganic ønsker at ramme kvinder i alderen 35+ og deres primære målgruppe er placeret i storbyerne rundt omkring i Danmark eksempelvis København, Odense, Aalborg, Aarhus osv. Budskab: Webshoppen skal være nemt at navigere rundt på og skal være reponsiv så den kan Brainstorm: farver, stilart, elementer på shoppen, generelt research Udarbejdselse af skitse Kodning Testning Udgivelse Komposition/modulopbygning: Grundet tidspres er der ikke udarbejdet et flowchart eller et storyboard. Men der er udarbejdet en skitse i InDesign som skal forestille den endelige forside (dog skal alle billederne være forskellige og de er i den 20
21
Kodning: Herunder ses hjemmesidens stylesheet: * { padding: 0; box-sizing: border-box; content: ; display: table; header.subnav:after { content: ; form { float: right; width: 275px; height: 90px; padding-top: 10px; fieldset { body { font-family: lato, sans-serif; display: table; border-style: none; font-size: 12px; header { height: auto; header > div:nth-of-type(1) { box-shadow: 0 8px 6px -6px #666; overflow: hidden;.clear { header div:first-child:after { content: ; display: table;.logo { background-color: white; height: 80px; label, input [type= text ] { width: 40%; input[type= submit ] { padding: 0px; padding-top: 10px; padding-bottom: 5px; 22
border-style: none; font-size: 16px; font-family: lato, sans-serif; background-color: white; h2 { font-size: 16px; width: 245px; height: 35px; margin-bottom: 20px; padding-left: 5px; padding-top: 7px; border: solid 0.5px #666; margin-top: 25px;.subnav ul { display: block; background-color: white; float: right; margin-right: 35px; margin-top: 30px;.subnav ul li { display: inline-block; font-size: 16px; margin-left: 18px; text-align: center;.subnav ul li a { display: block; color: black; text-decoration: none; text-transform: uppercase; border-bottom: 3px solid text-transform: uppercase; border-bottom: 3px solid transparent; letter-spacing:.13rem; border-bottom: 3px solid transparent;.subnav ul li a:hover { border-bottom: 3px solid #666; box-shadow: 0 8px 6px -6px #666; transition: all 0.5s ease;.picture { nav { height: 55px; box-shadow: 0 8px 6px -6px #666; margin-bottom: 30px; nav ul { nav ul li { display: inline-block; font-size: 16px; margin-top: 13px; display: block; 23
color: black; text-decoration: none; text-transform: uppercase; border-bottom: 3px solid transparent; border-bottom: 3px solid transparent; nav ul li a:hover { border-bottom: 3px solid #666; box-shadow: 0 8px 6px -6px #666; transition: all 0.5s ease; main { main ul li { width: 25%; padding-top: 10px; padding-bottom: 30px; main ul:after { content: ; display: table; h1 { font-size: 30px; text-align: left; padding-left: 35px; ul { list-style-type: none; mg { max- min-.kolonne { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 1%; -moz-column-gap: 1&; column-gap: 1%; footer { font-size: 24px; margin-left: 130px; margin-bottom: 35px; padding-top: 14px h4 { font-size: 24px; line-height: 200%; text-transform: uppercase; margin-top: 25px; margin-left: 90px; aside { width: 30%; height: 300px; section { width: 70%; height: 300px; 24
float: right; border-left: 1px solid black;.ikon { font-size: 24px; color: black; letter-spacing: 16px; margin-left: 90px;.nyhedsbrev { font-size: 12px; width: 400px; margin-left: 330px; h6 { font-size: 12px; padding-top: 43px; height: 105px; p { font-size: 14px; line-height: 160%; @media screen and (max-width:580px) { h1 { font-size: 20px; padding-bottom: 5px; padding-top: 15px; h2 { width: 40%; margin-bottom: 20px; nav ul li { display: inline-block; font-size: 12px; margin-top: 13px; form, { display: none; fieldset { display: none; main ul li { width: 50%; padding: 0; nyhedsbrev { display: none; h6 { display: none; aside { height: 220px; section { 25
.kolonne { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; -webkit-column-gap: 1%; -moz-column-gap: 1&; column-gap: 1%;.ikon { h3 { margin-top: 20px; margin-bottom: 30px; h4 { h5 { footer { height: 40px; TESTNING: Hjemmesiden er blevet test løbende via Brackets. Det er dog ikke 100% retvisende - men er en fin indikator for hvorledes hjemmesiden fungerer i de forskellige størrelser. Siden er blevet testet følgende browsere og fungerer umiddelbart fint. Dog er der nogle ting som rykker sig en anelse på iphone SE - nemlig Kurv og beløb og Nyhedsrevet - men da der ikke er 100% forståelse overfor dette er det ikke muligt at rette på nuværende tidspunkt (det er nemlig forsøgt en del gange). Hjemmesiden er testet på følgende: Safari (på både mobil og computer) Chrome på både mobil og computer) Udgivelse: Hjemmesiden er udgivet ved hjælp af programmet FileZilla. Der var ingen problemer med upload og den endelige hjemmesiden kan ses her: http:// mediegrafiker-ats.dk/16sf35mgfkd/meeta/ index.html 26
Grafisk Workflow Preview Mobil: Preview Desktop: Kvalitetsvurdering: Webshoppen er langt fra bygget færdig og det skyldes manglende tid og komptencer op til dette hovedforløb. Dog fungerer hjemmesiden fint og designet lægger utrolig godt op af skitsen (hvilket ikke er ændret siden den blev lavet) - og det er et stort plus. Men udgangspunktet er produceret og med mere tid ville det kunne opfylde kundens krav og blive en god webshop til dem. P.S. jeg er klar over at dette ikke er fyldestgørende til at dække dette kompetenceområde - der skal gåes mere i dybden med selve koden. Men jeg har simpelthen ikke kunne evne dette, da jeg ikke sidder med web til dagligt.. 27