Inden starten af projektet, valgte jeg at tegne ideerne op. Der var mangle forskellige ideer der var oppe og vende. Den ide jeg valgte, var en meget simpel opstillet, hvor der er nemt at navigere rundt i det. Jeg startede med at tegne det op i hånden, hvor jeg startede med mobilversionen. Jeg valgte at lave en ”burgermenu” oppe i toppen i header, hvor undersiderne som dokumentation, om mig, portfolio og kontakt gemmer sig. Derefter tænkte jeg på et banner, hvor man kunne se hvilke underside man er inde på, på forsiden står der velkommen, så er man ikke i tvivl at man er på forsiden. Derefter lagde jeg et billede af mig selv ind, så man kan se hvordan jeg ser ud, det personliggør også hjemmesiden. Boksen under billedet fortæller kort om mig og der er et direkte knap til siden om mig. Under der er der en ikon af en komputer og en blok, for at indikere at de spiller en fældes rolle. Altså at man først tegner ting på papir og derefter overfører man det til en computer. I footeren, som i headeren, står altid det samme på hver side. Intet ændrer sig på de forskellige hjemmesider. I footeren har jeg placeret et direkte link til kontakt mig siden, samt samme logo der er i headeren. På siden om mig, er det næsten det samme simple opsætning. Lidt uddybende om mig og direkte link til mit portfolie, endnu et portræt af mig, lidt om min hobby og hvad jeg laver i fritiden, videoportræt af mig, samt mine kompetencer og værktøjer jeg bruger. Portfolio siden er blevet rettet til. Til at starte med ville jeg have mine egne projekter med, men da de ikke er lige så vigtige som projekterne vi havde på de flow vi havde på skolen, valgte jeg at fokusere på dem, samt sætte links til dem samtidig. Ved hvert flow har jeg placeret et billede af projektet, samt et link hvis man ville kigge nærmere på det. Der er også kort beskrevet hvad projektet gik ud på. Kontakt siden er der ikke så meget på, men i fremtiden hvor vi kommer til at lære javascript ville jeg indsætte flere ting ind, så som et kort. Når jeg bliver udlært, opretter jeg også en special mail, så det ikke bliver min private mail man bruger. På tablet og desktopudgaven af hjemmesiden er det ikke så meget forskel. I forhold til telefonudgaven står tingene bare ved siden af hinanden i stedet for under hinanden, da skærmene er det større for at kunne vise det ved siden at hinanden.
Jeg har derefter lavet samme tegning som i hånden i figma. Processen i figma gik fuldstændig på samme måde som i hånden. At arbejde i figma er en nem process, isæt hvis man i forvejen har tegnet det i hånden inden. Wireframes på telefonudgaven er stadig sat på under hinanden, hvor på tablet og desktop er de sat ved siden hinanden. Da det skulle være et simpelt design, har jeg lavet designet til tablet og desktop fuldstændig på samme måde, det eneste der er anderledes det er at burgermenu et både på telefon og tablet versionen, hvor på desktop ligger den fast på menuen.
Jeg har valgt at lave en PBS, da det strukturerer arbejdet på opbygningen af hjemmesiden. PBS hjælper på at holde styr på hvad man skal nå inden for den del (underside) man arbejder med. Jeg har sat den op sådan at man holder styr på hvad der skal nåes på undersiden, samt i headeren og footeren. I headeren og footeren er der ikke så meget arbejde i, da det skal kodes op en gang, og derefter bruges på alle siderne der er på hjemmesiden. Forsiden, om mig, portfolioen og kontakten er lidt andernes, det skal tegnes op i hånden, sættes op i figma, kodes og derefter er der billeder, video, samt screenshots der skal laves, kompromitteres og isættes på hjemmesiden. De elementer er lidt forskellige fra side til side, og hver af dem har sig egen fremgangsmåde. For at kode sådan en hjemmeside er der nogle af de samme elementer, men i forhold til de undersider under på min hjemmeside, ændres der lidt indhold, hvor nogle af dem er mere tidskrævende end andre. F.eks. at tage et billede, lave det om i photoshop, kompromittere billedet og isætte det på hjemmesiden, derefter tilpasse det sådan så det ser godt ud på hjemmesiden kan være mere tidskrævende end at lave en tekstboks og skrive noget tekst i det.
Min styleguide er ret simpel, der er oftest kun tre farver der kommer igen. Farven #fadadd, den mellempinke jeg bruger på min hjemmeside bliver brugt i forbindelse af baggrunden på forsiden og alle undersiderne. Jeg har valgt denne farve fordi den godt passer ind som en baggrundsfarve, så hjemmesiden ikke bliver kedelig og hvid. Den er hverken for lys eller for mørk til at være en baggrundsfarve. Farven #f8bbd0 som jeg har brugt til header og footer er matchende da jeg syndes at begyndelsen og afslutningen på hjemmesiden skal være matchende. Den er en del mørkere for at skille sig ud, at det er der navigationen mellem undersiderne ligger. Farven #fce4ec er blevet brugt til de øverste kasser der ligger på forsiden og undersiderne, samt til kasserne hvor teksten på siderne er skrevet. Den er også blevet valgt som baggrundsfarve på de 2 portrætter der er på hjemmesiden. Farven #333333 er blevet brugt til teksten på hele hjemmesiden. Den gør at det ikke er så tungt at kigge på i forhold til sort farve (#000000) Farven #dddddd har jeg brugt til skyggen når man scroller forbi oppe i menuen, så man kan se at der er noget man kan trykke på. De lyserøde nuancer er valgt fordi de er feminine og ungdommelige farver. De udtrykker også kærlighed, omsorg, virker beroligende for øjnene og skaber varme. For mig skaber lyserøde farver varme, omsorg, drømme og femininitet. Farven lyserød er en meget kendt farve for piger/kvinder, der er stærke, som også beskriver mig. Den skaber varme, at man bliver helt glad for at kigge på farven lyserød. Lyserød farve får mig til at tænke at man kan drømme og at opnå det man drømmer om. Nuancerne er valgt både fordi de passer meget godt sammen, men også for at vise at lyserød ikke bare er en farve men også glæde. Den mørke lyserøde (#f8bbd0) er valgt på baggrund af at den viser at det er en stærk farve, måske lidt feminin, men mere til voksne og stærke kvinder i forhold til piger. Den mellem lyserøde farve (#fadadd) går lidt væk fra de traditionelle lyserøde nuancer. Den indikerer mere omsorg end kærlighed. Det er også en farve en voksen kvinde kunne vælge, frem for de traditionelle lyserøde farver. Den lyseste lyserøde farve (#fce4ec) er mere en traditionel lyserød, som efter min mening forbindes med drømme og unge piger. Det er sådan en mellemgang fra ung til voksen i forhold til farvevalget.
På hjemmesiden har jeg benyttet mig af skrifttypen Gill sans. Gill sans er en sans sherif skrift, dvs. den har ikke de små fødder. Det gør at hjemmesiden er mere moderne og minimalistisk. Det gør at læseren ikke scroller til en anden side. Der er ikke så meget skrift i alle boksene på hjemmesiden, men alligevel har jeg valgt den skrifttype, da det gør teksten mere læsbar for brugeren. Størrelsen på brødteksten på forsiden og undersiderne er 20px, for af det er letlæseligt for brugeren. I dokumentationen har sat skriftstørrelsen op til 26px, da der ligger meget tekst inde, så det er nemmere at læse. Jeg har også sat 1,5 lineafstand så det beroliger øjet, og man frit kan læse fra linje til linje, uden at springe en linje over.
Til udvalget af skriften til loget, prøvede jeg i første omgang at finde min stil. Jeg ville godt have noget der lignede håndskrift og med blokbogstaver. Da min hjemmeside EA DESIGN ville jeg have at det så visuelt godt ud men med en enkelt stil. Jeg var oppe og vende skrifttypen Cormorant Garamond, Cinzel Decorative, Bilbo, Aclonica og Bad Script og Bradley Hand ITC, mange af dem så godt ud med navnet på hjemmesiden, men det skulle være et meget simpelt design. Jeg valgte at gå med skrifttypen Bradley Hand ITC, da det fangede mit øje at det lignede en håndskreven skrifttype. Derefter kiggede jeg lidt om det skulle være en horisontal logo, hvor der bare stod EA DESIGN i et, men derefter begyndte jeg at kigge om det skulle stå i to linjer. Det blev til EA i toppen med stortskrift (størrelse 45), og DESIGN en del mindre (størrelse 12) i bunden. Jeg ville i starten have at logoet havde en baggrund (#fadadd samme som baggrunden på hjemmesiden), men da det så ikke så godt ud, lavede jeg baggrunden gennemsigtigt, så der kun stod EA DESIGN.
Til hjemmesiden har jeg lavet to nye portrætter den ene hvor jeg står med fronten og byder velkommen til min hjemmeside, og det andet der ligger på siden om mig, hvor jeg står med højre side mod kameraet. Der er blevet taget to nye portrætter så det samme billede ikke er blevet brugt på begge sider. Billedet er taget med iphone filter dramatisk varmt, for at gøre hjemmesiden endnu mere varm og velkommende. Jeg har også ændret baggrunden til den samme farve (#fce4ec) som tekstboksene på hjemmesiden er, for at matche det ind i hjemmesiden. Det er blevet gjort i photoshop.
Jeg har sat alle vores tidligere flows fra dette semester ind i mit portfolio. Tre af de flow vi arbejdede med 1, 3 og 4, er gruppearbejde. I første flow var vi i grupper hvor vi skulle tage billeder vi forbindende med os selv, samt kærlighed, natur, stærke farver, refleksion og bevægelse. Derefter skulle vi i andre grupper lave en prototype af en hjemmeside, med tematikken event for nye studerende i København. Flow 2 lød på at vi skulle finde en lokalpolitiker fra vores område og lave en hjemmeside til dem, ved hjælp af html og css, samt photoshop. Dette var en alene opgave. I flow 3 skulle vi igen i andre grupper finde en eller to kunstner, hvor vi skulle lave et LP-cover til deres nye album, samt labels der sidder på LP’erne og et selvvalgt banner til streamings tjeneste eller banner til en bygning. Vores grupper lavede et cover til LP, labels til LP og banner til spotify, som ses på billedet under portfolio flow 3. I flow 4 arbejdede vi igen i grupper, men denne gang med en kampagne for et brand der har cirkulær økonomi. Vi skulle lave 3 forskellige film på længderne 30, 15 og 5 sekunder, der viste vores produkt, samt at det er lavet af gennembrugs plastic. Vi skulle også kode en landingpaige, samt producere en video som var et slags banner på vores landingpaige.