webtrends 0206 hiq_jere_elo
TRANSCRIPT
![Page 1: Webtrends 0206 hiq_jere_elo](https://reader033.vdocuments.site/reader033/viewer/2022052602/55cb5accbb61eb87608b4615/html5/thumbnails/1.jpg)
WEB TRENDS
![Page 2: Webtrends 0206 hiq_jere_elo](https://reader033.vdocuments.site/reader033/viewer/2022052602/55cb5accbb61eb87608b4615/html5/thumbnails/2.jpg)
”Do. Or do not. There is no try.”
Jere Elo Art Director
![Page 3: Webtrends 0206 hiq_jere_elo](https://reader033.vdocuments.site/reader033/viewer/2022052602/55cb5accbb61eb87608b4615/html5/thumbnails/3.jpg)
Ennustaminen on vaikeaa,
varsinkin tulevaisuuden ennustaminen.
![Page 4: Webtrends 0206 hiq_jere_elo](https://reader033.vdocuments.site/reader033/viewer/2022052602/55cb5accbb61eb87608b4615/html5/thumbnails/4.jpg)
THE EVOLUTION OF FLAT DESIGNFROM SKEUOMORPHISM TO (ALMOST) FLAT DESIGN
![Page 5: Webtrends 0206 hiq_jere_elo](https://reader033.vdocuments.site/reader033/viewer/2022052602/55cb5accbb61eb87608b4615/html5/thumbnails/5.jpg)
SKEUOMORPHISMI (siirtomuotoisuus)Tarkka reaalimaailman piirteiden jäljentäminen digitaalisessa maailmassa. Alkuperäisessä toteutuksessa tarpeellinen piirre tai ominaisuus pidetään koristeena mukana uudessa toteutuksessa, vaikkei sille olisi enää tarvetta.
FLAT DESIGNKäyttöliittymätyyli, jossa ei ole lainkaan 3-ulotteisuutta jäljitteleviä elementtejä (varjot, gradientit tai tekstuurit).
![Page 6: Webtrends 0206 hiq_jere_elo](https://reader033.vdocuments.site/reader033/viewer/2022052602/55cb5accbb61eb87608b4615/html5/thumbnails/6.jpg)
FROM SKEUOMORPHISM TO (ALMOST) FLAT DESIGN
![Page 8: Webtrends 0206 hiq_jere_elo](https://reader033.vdocuments.site/reader033/viewer/2022052602/55cb5accbb61eb87608b4615/html5/thumbnails/8.jpg)
![Page 9: Webtrends 0206 hiq_jere_elo](https://reader033.vdocuments.site/reader033/viewer/2022052602/55cb5accbb61eb87608b4615/html5/thumbnails/9.jpg)
TYPOGRAPHY
![Page 10: Webtrends 0206 hiq_jere_elo](https://reader033.vdocuments.site/reader033/viewer/2022052602/55cb5accbb61eb87608b4615/html5/thumbnails/10.jpg)
![Page 11: Webtrends 0206 hiq_jere_elo](https://reader033.vdocuments.site/reader033/viewer/2022052602/55cb5accbb61eb87608b4615/html5/thumbnails/11.jpg)
![Page 12: Webtrends 0206 hiq_jere_elo](https://reader033.vdocuments.site/reader033/viewer/2022052602/55cb5accbb61eb87608b4615/html5/thumbnails/12.jpg)
BIG PICTURES
![Page 14: Webtrends 0206 hiq_jere_elo](https://reader033.vdocuments.site/reader033/viewer/2022052602/55cb5accbb61eb87608b4615/html5/thumbnails/14.jpg)
DETAILS & MICRO
INTERACTIONS
![Page 15: Webtrends 0206 hiq_jere_elo](https://reader033.vdocuments.site/reader033/viewer/2022052602/55cb5accbb61eb87608b4615/html5/thumbnails/15.jpg)
Kun designistä tulee yksinkertaisempaa,
tulee pienistä yksityiskohdista tärkeitä.
Niillä luodaan usein erottuva”wow-efekti”.
!
Niillä luodaan erottuva”wow-efekti”.
![Page 16: Webtrends 0206 hiq_jere_elo](https://reader033.vdocuments.site/reader033/viewer/2022052602/55cb5accbb61eb87608b4615/html5/thumbnails/16.jpg)
![Page 17: Webtrends 0206 hiq_jere_elo](https://reader033.vdocuments.site/reader033/viewer/2022052602/55cb5accbb61eb87608b4615/html5/thumbnails/17.jpg)
PARALLAX SCROLLING AND
INTERACTIVE STORYTELLING
![Page 18: Webtrends 0206 hiq_jere_elo](https://reader033.vdocuments.site/reader033/viewer/2022052602/55cb5accbb61eb87608b4615/html5/thumbnails/18.jpg)
Taustalla olevat kuvat liikkuvat scrollatessa hitaammin kuin edessä olevat kuvat tai objektit luoden illuusion 2-ulotteisuudesta ja syvyydestä.
PARALLAX SCROLLING
![Page 20: Webtrends 0206 hiq_jere_elo](https://reader033.vdocuments.site/reader033/viewer/2022052602/55cb5accbb61eb87608b4615/html5/thumbnails/20.jpg)
GRID LAYOUT AND CARD DESIGN
![Page 21: Webtrends 0206 hiq_jere_elo](https://reader033.vdocuments.site/reader033/viewer/2022052602/55cb5accbb61eb87608b4615/html5/thumbnails/21.jpg)
![Page 23: Webtrends 0206 hiq_jere_elo](https://reader033.vdocuments.site/reader033/viewer/2022052602/55cb5accbb61eb87608b4615/html5/thumbnails/23.jpg)
Tekemällä jotain ihan muuta.
Miten erottua?
![Page 26: Webtrends 0206 hiq_jere_elo](https://reader033.vdocuments.site/reader033/viewer/2022052602/55cb5accbb61eb87608b4615/html5/thumbnails/26.jpg)
Miksi on on tärkeää, että verkkopalveluiden ulkoasu
on ”ajantasalla” ?
Brändin rakentaminen !
Uskottavuus
![Page 27: Webtrends 0206 hiq_jere_elo](https://reader033.vdocuments.site/reader033/viewer/2022052602/55cb5accbb61eb87608b4615/html5/thumbnails/27.jpg)
Webissä on kaksi kuningasta:sisältö ja käyttäjä
![Page 28: Webtrends 0206 hiq_jere_elo](https://reader033.vdocuments.site/reader033/viewer/2022052602/55cb5accbb61eb87608b4615/html5/thumbnails/28.jpg)
WEB TRENDIT
The evolution of flat design
Typography
Big pictures
Details & micro interactions
Parallax Scrolling and interactive storytelling
Grid layout and Card design
!
![Page 29: Webtrends 0206 hiq_jere_elo](https://reader033.vdocuments.site/reader033/viewer/2022052602/55cb5accbb61eb87608b4615/html5/thumbnails/29.jpg)
”Creativity is born from conflict of ideas, but dies on conflicts of humans.”
![Page 30: Webtrends 0206 hiq_jere_elo](https://reader033.vdocuments.site/reader033/viewer/2022052602/55cb5accbb61eb87608b4615/html5/thumbnails/30.jpg)
Kiitos.