2. Semester | PILEMAND DESIGN

Flow 1

WordPress & SEO

Vi byggede et website for en håndværker efter eget valg, med fokus på design og funktionalitet.

Se Resultat!

Projektet

Layoutmæssigt skulle jeg overveje nem og overskuelig navigation, et farveskema som reflekterer håndværkets natur, og klar typografi....

Jeg skulle lave forslag til hjemmeside, om os, services, galleri og kontakt-siden. Hjemmesiden skulle vise håndværkerens ansigt udadtil med fokus på tjenester. Om os siden skulle indeholde baggrundsinformation, kvalifikationer og erfaring. Services skulle give oversigt med billeder og beskrivelser. Galleriet skulle vise før-og-efter billeder for at demonstrere arbejdskvaliteten. Kontaktsiden skulle gøre det nemt at komme i kontakt med integration af Google Maps.

Teknisk skulle jeg vælge et responsivt tema med plugins til billedkomprimering, SEO, page builder, sikkerhed og kontaktformular. Websitet skulle være SEO optimeret med de rigtige søgeord, så siden kommer op når folk leder efter en håndværker. Jeg skulle også gøre det muligt at dele indhold på sociale medier for at skabe mere trafik.

Tryk for at laese mere

Processen

Processen startede med research og analyse af konkurrerende håndværkersider for at forstå best practices og brugerbehov....

Derefter lavede jeg wireframes og mockups for hver side, fokuseret på brugeroplevelse og konvertering. Jeg valgte et responsivt WordPress tema og installerede vigtige plugins til billedoptimering, SEO, og sikkerhed.

Jeg designede et farveskema der reflekterer håndværkets natur og sikrede klar typografi for læsbarhed. Efter implementering af alle sider og integrationen af Google Maps til kontaktsiden, testede jeg responsiviteten på forskellige enheder og optimerede siden for søgemaskiner ved hjælp af relevante søgeord og meta-tags.

Tryk for at laese mere

Flow 2

Design Thinking, Avanceret Figma & InDesign

Temaet for flowprojektet er transport og vi kigger specifikt på transportudfordringer i området, og omkring Lyngby.

Se app!

Projektet

Opgaven var at udvikle prototypen til et nyt produkt eller en ny service på transportområdet i og omkring Lyngby ved at følge Design Thinking-processen (Empathize, Define, Ideate, Prototype & Test)....

Dertil skulle der laves en landingpage, hvor der præsenterers og markedsførers produktet. Ved udviklingen af prototyper skulle derarbejdes med forskellige slags prototyper, bl.a. avanceret Figma.

Tryk for at laese mere

Processen

Processen startede med at empathize - vi observerede og interviewede brugere for at forstå transportudfordringerne i Lyngby. Derefter definerede vi problemet og genererede idéer gennem brainstorming....

Herefter lavede vi prototyper i Figma for at visualisere løsningen, startende med wireframes og fremadskridende til high-fidelity designet. Vi testede prototypen med brugere og itererede baseret på feedback. Til sidst designede og udviklede vi en landingpage, der effektivt kommunikerer værdien af vores nye transportløsning.

Tryk for at laese mere

Flow 3

Interaktiv frontend-udvikling

I de første to uger arbejdede jeg med de grundlæggende byggesten i interaktiv frontend-udvikling.

Se Website!

Projektet

I de første to uger arbejdede jeg med de grundlæggende byggesten i interaktiv frontend-udvikling. Jeg fokuserede på at forstå, hvordan små funktioner kan bygge en større løsning op....

Jeg arbejdede med små, isolerede opgaver, hvor jeg øvede mig i at forstå, hvad der sker, når en bruger klikker, hover eller interagerer med en løsning.

Jeg lærte at arbejde med DOM’en, at lytte på events, at styre UI state med add, remove og toggle, at bruge if/else til logik og at håndtere data gennem arrays og objekter. Jeg arbejdede også med tid via new Date(), så en løsning kunne reagere på den aktuelle situation.

Det gav mig en bedre forståelse af, hvordan data, logik og brugerhandlinger kan spille sammen i et interaktivt website.

Tryk for at laese mere

Processen

Jeg arbejdede også med tid via new Date(), så en løsning kunne reagere på den aktuelle situation....

I denne opgave skulle jeg samle og anvende alle teknikker og principper i én samlet Sweet-Shop-løsning.

Jeg forestillede mig en ny specialbutik, der er ved at åbne, og udviklede den første digitale version af butikken, hvor arrays dannede grundlag for produkterne, if/else styrede logikken, event listeners håndterede brugerens handlinger og UI state blev kontrolleret via klasser.

Jeg arbejdede også med systembeskeder som åbningstider eller ordrestatus, så løsningen blev et lille interaktivt webapplikationssystem, hvor data styrer indholdet, og brugerens handlinger ændrer systemets tilstand.

Tryk for at laese mere

Flow 4

Oplysnings kampagne

Vi arbejdede med kampagnemateriale, der informerer og gavner borgere i Danmark. Kampangen skulle have et samfundsgavnligt formål.

Se vores videoer!

Solsikke-snor med navneskilt til kampagnen

Foldet brochure om solsikke-snor kampagnen

Mockup med laptop og mobil til solsikke-kampagnen

Projektet

I dette forloeb producerede jeg en kampagne paa tvaers af digitale og printede formater med fokus paa animation, datavisualisering og tydelig formidling....

Kampagnen var maalrettet en relevant maalgruppe og tog afsaet i en offentlig institution/NGO med et samfundsgavnligt formaal.

Jeg udviklede en 30-60 sekunders SoMe-video samt printmaterialer som plakat og folder, saa budskabet kunne fungere baade online og i det offentlige rum. Maalet var at omsaette data og information til en visuel fortaelling, der var engagerende, let at forstaa og handlingsskabende.

Tryk for at læse mere

Processen

Processen startede med research af maalgruppe, afsender og tema samt indsamling af relevante datasaet....

Herefter brugte jeg Flourish til at finde datavinkler, som kunne omsaettes til visuelle elementer i baade video og print.

Jeg producerede grafikker i Illustrator, layoutede kampagnematerialer i InDesign og redigerede video i Premiere Pro med fokus paa motion graphics, infografikker og avanceret lyddesign. Undervejs testede jeg kampagnen paa en relevant maalgruppe og justerede indhold, visuel stil og formidling ud fra feedback, saa resultatet blev mere praecist og effektivt.

Se vores Figma!

Tryk for at læse mere

Her begyndte min kreative rejse

Flow 1, 2, 3 og 4

WordPress & SEO

Projektet

Processen

Design Thinking, Avanceret Figma & InDesign

Projektet

Processen

Interaktiv frontend-udvikling

Projektet

Processen

Oplysnings kampagne

Projektet

Processen