Wireframes og mockups

Fonte og farver (GERDA)

Vi har valgt at have 6 grundfarver i vores design, hvor 2 af dem er mørke baggrundsfarver, og de 4 andre farver er til tekst, CTA-knapper og illustrationer. Den lysegrøn og hvid farve har god kontrast til den mørkegrøn og sort farve, og derfor skaber de sammen en god farvekombination. Vores farvevalg er taget på grund af den stemning vi fik, da vi besøgte Brainiacs kontor og efter vi havde spurgt personalet om hvilke farver de syntes passede bedst til Brainiacs. De syntes at den grønne farve passede rigtig godt til Brainiacs, da det handler om folk der er åbne og vil kæmpe for det de tror er rigtigt, ligesom de folk der kæmper for grøn omstilling. I forhold til fonte, har vi valgt at have ”Helvetica Neue Regular” til brødtekster, da vi syntes at den sans serif var enkel, letlæselig og overskuelig som gør det nemmere for brugeren at læse informationer på hjemmesiden. For at fange brugerens opmærksomhed, har vi valgt at have ”Keep Calm Medium” typografi til overskrifter som også er en sans serif, og den står stærkt i sig selv og dermed passer også rigtig godt med det som Brainiacs står for.

Designmanual1

Vores designmanual har vi lavet for at holde styr på vores design og hvad vi må og ikke må. Den er lavet, på baggrund af de valg vi har truffet sammen i designprocessen. Den indeholder, de forskellige elementer som logo, farver, typografier, billeder, infografik og illustrationer, så man kan få et godt billede af vores visuelle identitet til Brainiacs.

Illustrationer og Motion graphics (GERDA)

Vi har lavet illustrationerne med fokus på vores logo, da vi gerne vil skabe den visuelle identitet for hjemmesiden, samtidig have at logoet bliver hurtig genkendt og husket. Vi tog særlig udgangspunkt i pitbullens hjerne, hvor vi har lavet en tidslinje illustration i Adobe illustrator. Den har vi lavet for at fange brugerens opmærksomhed og pege på de forskellige faser, som Brainiacs skal gå igennem. Derefter har vi lavet en Motion Graphics i Adobe Animate ved brug af keyframes på scale. Animationen har vi lavet for at skabe et overblik og vise hvilke forskellige kompetencer er vigtige at have, hvis man gerne vil være en Brainiac.

Ikoner (MIE)

De ikoner der er lavet til Brainiacs er taget ud fra at bruge samme type streg som vi bruger i logoet, det er vigtig at vi viser en rød tråd imellem vores design af elementer. Vi har valgt at lave ikonerne som vektorgrafik, så de kan skaleres op og ned i størrelse uden at miste information i grafikken, derudover er har vi meget video på siden, så ved at lave vores ikoner i vektor grafik, gør det at vi ikke gør siden tungere end højest nødvendigt da vektorgrafik fylder langt mindre i kilobyte end pixelgrafik gør.