Fladt design vs realisme: hvilken side er du på?

Sidste år overtog fladt design verdenen af ​​digitalt design. Kendetegnene ved skeuomorf design - prægede og skrå effekter, 3D kunstige teksturer, dropskygger og reflekterende glitrer - forsvandt alt sammen og blev erstattet med minimalistisk design, dristige farver skarpe kanter og linjer, enkel typografi og meget lidt, om nogen overhovedet, skygge .



For at fremhæve denne designtrend, interaktivt bureau intakt skabte denne strålende interaktive infografik Fladt design vs realisme .Det seje projekt inkluderer også interaktivt spil, hvor brugerne vælger en side og derefter kæmper mod fjenden. Vi talte med inTactos kreative direktør Alejandro Lazos for at finde ud af mere om projektet.



Hvordan opstod konceptet?

I slutningen af ​​hvert år opretter vi en interaktiv hilsen fra agenturet, hvor vi gerne demonstrerer vores kreativitet sammen med høje produktionsværdier. For hver hilsen, vi opretter, kan vi lide at bruge de mest fremtrædende temaer fra det år i den digitale verden, og i 2013 så vi i juli var der en stor debat, da Apple endelig ændrede designet af iOS7 i tråd med fladt design, hvilket Windows 8 havde allerede vedtaget nogen tid før.

Emnet blev viralt og blev diskuteret på designblogs overalt med både tilhængere og modstandere, der diskuterede denne nye stil, som hurtigt etablerede sig som den nye designtrend for digitale medier. Denne undertiden heftige diskussion gav os ideen til begrebet en kamp mellem to grupper af designere.



InTacto baserede deres interaktive hilsen på ankomsten af ​​fladt design sidste år

InTacto baserede deres interaktive hilsen på ankomsten af ​​fladt design sidste år

HTML5-spil blev også populære og fik stor opmærksomhed, så vi ønskede at demonstrere vores færdigheder inden for dette område. På grund af dette skete ideen om at genskabe formatet af ¨Street Fighter¨ for at hjælpe med at skildre denne designkamp.

hvordan man gør øjnene hvidere i Photoshop

Vi skabte en historie, der metaforisk fortæller, hvad vi følte foregik i verdenen af ​​digitalt design



Spillet alene var dog ikke tilstrækkeligt, og vi følte, at det manglede noget. Derfor skabte vi en historie, der metaforisk fortæller, hvad vi følte foregik i verdenen af ​​digitalt design, og det bragte også lidt baggrund og kontekst til spillet. Endelig tilføjede vi en videohilsen fra vores team.

Fortæl os om din designtilgang til dette projekt ...

Når vi først havde defineret ideen om 'Flat design vs Realism or Skeuomorphism' og hovedpersonernes personligheder, undersøgte vi detaljeret de to designstilarter for virkelig at opdage hver enkeltes særlige forhold. I løbet af denne fase var Pinterest en stor hjælp og inspirationskilde.

Bagefter oprettede vi et storyboard baseret på vores script og skabte forskellige skitser på papir for at definere udseendet på hver karakter. Endelig søgte vi derefter efter en passende skrifttype, og i dette tilfælde var vi meget tilfredse med Roboto Slab fra Google Fonts, som fungerede godt i begge stilarter.

InTacto-teamet oprettede forskellige skitser på papir for at definere udseendet på hver karakter

InTacto-teamet oprettede forskellige skitser på papir for at definere udseendet på hver karakter

Hvad brugte du til at opbygge projektet?

Vi byggede hovedsageligt webstedet ved hjælp af HTML5, CSS, JQuery, JavaScript, og til spillet brugte vi Construct 2.

For at bringe spillets karakterer til live brugte vi Puppet Warp-værktøjet i Photoshop til at omdanne vores originale tegninger, og vi animerede dem derefter ramme for ramme.

Nintendo spil og se donkey kong

Photoshop

Photoshop's Puppet Warp Tool blev brugt til at bringe spillets karakterer til live

Vi brugte 3D-kamerafunktionen i After Effects, i scenen med søjler, der bevægede sig længere væk, for at give os den nøjagtige bevægelse og det perspektiv, vi havde brug for. Vi tog dette og replikerede det ved hjælp af CSS.

Endelig brugte vi en 24-bit PNG-kompressor (uden for Photoshop) på billederne, hvilket gjorde det muligt for os at nedbringe antallet af farver, mens vi stadig bevarede gennemsigtigheden af ​​grænserne med antialias.

Hvad var det mest udfordrende aspekt?

Vi stødte på mange tekniske problemer, og til tider måtte vi have tværfaglige møder og brainstorme mulige løsninger.

Et af de største problemer var at indsætte HTML5-spillet midt i en parallaxrulle. Vi ønskede, at alt skulle være kontinuerligt og uden spring under rulning, så brugerne til enhver tid kunne gå fra start til slut uden afbrydelser. For at opnå dette brugte vi Ajax-teknologi til at overføre parametre til url, og spillet, der indlæses i en div, er ansvarlig for at indsamle disse parametre og vise den tilsvarende indlæsningsskærm (flad eller realisme).

Et af holdet

Et af holdets største problemer var at indsætte et HTML5-spil midt i en parallaxrulle

Et andet problem var den langsomme ydeevne, når den blev vist på fuld skærm. For at løse dette arbejdede vi med et 960 pixel lærred (50% af skærmens størrelse) og strakte det derefter ud til dobbelt så stort ved hjælp af CSS. Billederne ser ikke strakte ud, fordi vi indsatte dem i spillet i dobbelt størrelse for at kompensere for dette.

Et stort problem for os var webstedets samlede vægt og indlæsningstid, hvilket resulterede i, at vi komprimerede hver PNG ved hjælp af farvekvantiseringsenhed og også indlæste webstedet i forskellige faser, så det ikke alle forekommer i starten. En interessant løsning var at indlæse den endelige video, mens brugeren ser den oprindelige historie. Også til denne sekvens af billeder brugte vi 2 forskellige JPG-kvaliteter. Hvis brugeren hurtigt ruller til den endelige video, vil de se den i lavere kvalitet, men hvis de venter, vises videoen i højere kvalitet.

To forskellige kvaliteter af JPG

To forskellige kvaliteter af JPG'er blev brugt til billedsekvensen for at muliggøre hastigheden på brugerruller

Endelig havde vi et uventet, men positivt problem, der opstod et par dage efter lanceringen af ​​webstedet. Vi var nødt til at migrere den server, der var vært for webstedet for at klare det høje trafikniveau, vi modtog.

hvordan gør jeg mit forsidefoto privat

  • Kreativ direktør : Alejandro Lazos
  • Kreativt, lyddesign : Sergio Chaile
  • Art director, illustrator : Damian Lettiero
  • Multimediedesigner : Natalia Manterola
  • Front end direktør : Guillermo Vazquez
  • Spiludvikler : Lucas Pallares

Kan du lide dette? Læs disse!