Freelance commission i form af website til en content pack til et gratis og open-source spil kaldt Etterna. Packen hedder World of Corruption og har et seriøst og "edgy" tema, der er ment som et tilbageblik på internet kulturen i starten af 2000'erne.
Derfor er hjemmesiden lavet specifikt i en ældre stil, der tager inspiration fra de eksperimentelle hjemmesider fra den tid. Specifikt blev jeg bedt om at lave et design ud fra disse kriterier:
"For the design, I'm aiming for a bold, visually intense, gen x cyber aesthetic--something reminiscent of depthcore/trendwhore, and the early 2000s style. I want it to feel chaotic, eye-catching, and full of energy. Webpage design will be for a single splash page and the only page of the site. The purpose of the site is to host not only the pack, but information about it, songlist, charters, and other various subjects surrounding it"
Før vi når til processen, prøv at gå ind og se det endelige resultat lige nu!
Billedet ovenover blev brugt som content packens banner, og bliver vist i embeds på slack, discord m.v. når man sender linket!
Proces
Siden der blev efterspurgt et kaotisk design, var min første idé at lave et layout der både er struktureret og ikke struktureret. Eller som jeg selv har forklaret det, et layout der "corruptes" og "shifter" position horisontalt.
Dette var min wireframe skitse til kunden:
Derefter begyndte jeg på en reel skitse, for at se om den efterspurgte stil kunne rammes:
Det var ikke helt ved siden af med humøret og følelsen, men det kunne gøres bedre, så jeg tog fat i "kill your darlings" princippet og lavede en ny iteration.
Og herfra var fundamentet af site splashet sat, og de forskellige sektioner med informationer om content packen blev tilføjet trin for trin herefter.
Undervejs forsøgte jeg at holde fast i et zigzag mønster for øjnene som først planlagt
Jeg springer over rigtig mange iterationer herefter! Der var rigtig meget frem og tilbage mellem kunden og jeg, som i sidste ende gjorde layoutet meget bedre efter revurdering af alle dele af siden.
Jeg prøvede herefter at revurdere det left-aligned layout, og prøvede centre-aligned i stedet, og det virkede langt bedre til den kaotiske stil, da billederne kunne nå længere ud fra venstre side. Aldrig vær bange for iterationer! De første er sjældent de bedste.
Metalheart Essentials
Til projektet er der anvendt en pakke med metalheart essentials lavet af Dreadlabs. Mange steder er 3d formerne manuelt transformeret til "pixel shards" for at passe til temaet, men andre steder anvendes Metalheart elementerne til image compositing.
Jeg lavede også rammer osv. ud fra forskellige stykker af de større former
Stock Images
I hele layoutet er der brugt rigtig meget image compositing og mange effekter, der transformerer stock images til noget helt nyt. Nedenunder finder du en håndfuld af de brugte billeder.
Mon du kan spotte hvor de er blevet brugt? ☺️
Alle billeder er hentet fra pexels.com og er under free license
