Pageflow – interactive multimedia storytelling

Tuli vastaan mielenkiintoinen artikkelin toteutus MeNaisten sivulla. Ei sillä, etteikö itse artikkeli olisi ollut mielenkiintoinen, oma kiinnostukseni suuntautui heti tämän artikkelin toteutustapaan, jossa on yhdistetty kuvaa, ääntä ja onhan tämä nyt aikamoista scrollausilotulitusta. Trendikästä ja nykyaikaista, tuore tapa toteuttaa artikkeli.

Artikkeliin tästä:
http://jutut.menaiset.fi/aina-kotona#69175

Sen verran sain selvitettyä, että tämä on toteutettu sellaisella sivustolla kuin pageflow. Tuolta sivuilta löytyy myös muita tällä tavalla toteutettuja esityksiä. Melko kivan näköisiä ja tässä on nyt sitä UX:ää (user experience) mietitty. En ole koskaan tähän törmännyt, mutta vähän sama ajatus kuin Adobe slate:lla, jota olen yhteen kouluprojektiin kokeillut. Mutta tämä on ehkä jotekin vieläkin kivemman näköinen. Täytyy laittaa muistiin tulevia esityksiä varten :). Ilmainenkin näyttää olevan.

pageflow

Suunnittelija vs. asiakas

Facebookissa tuli vastaan seuraava linkki joka on paitsi hauska, myös oikein kuvaava:

Designer vs. client

Samoin tämä infograafi asiakkaan puheen kääntämisestä suunnittelijan kielelle, johon olen törmännyt jo joskus aiemmin:

Translating client speak

Olen tässä jo lyhyen kokoemuksen perusteella huomannut, että suunnittelija ja asiakas hyvin usein puhuvat eri kieltä. Se on ehkä suurin oppimisen paikka aloittelevalla suunnittelijalla, miten puhua asiakkaan kielellä siten, että asiakas ymmärtää mitä tarkoitat. Miten saa sen päässä olevan visuaalisen kuvan kerrottua mahdollisimman kuvaavasti asiakkaalle? Onko kellään tähän mitään hyviä vinkkejä?

Sama ongelma on myös toisinpäin, kuten tuossa toisessa linkissä, jossa asia on nyt ehkä tietysti pienellä huumoritwistillä esitetty. Miten ymmärtää asiakasta ja mitä tämä oikein haluaa. Sellaisista kuvailevista ja hyvin epäkongreettisista adjektiiveista, kuten freesi, jämäkkä tai luotettava on joskus vaikea päätellä mitä asiakas oikeasti haluaa ja miten siitä tuotoksesta nyt saa freesimmän tai luotettavamman näköisen. Mitkä tekijät vaikuttavat esimerkiksi siihen, mikä koetaan esimerkiksi luotettavana?

Tämähän on tietenkin juuri sitä ammattitaitoa – tietää mitkä käytännön valinnat esimerkiksi typografian ja värien suhteen vaikuttavat tietyn mielikuvan tai tunteen luomisessa.

Syksyinen pariskuntakuvaus ja ajatuksia henkilökuvauksesta

Aikaisemmissa postauksissa jo mainitsinkin, että henkilökuvaus on minulle hyvin uutta hommaa. Olen käynyt monilla henkilökuvausta ja mallinohjausta käsittelevillä kursseilla, mutta käytännössä ihmisten kuvaaminen onkin sitten paljon haastavampaa kuin teoriassa. Valokuvaajan täytyy kokoajan kommunikoida kuvattavien kanssa ja ohjata mallia/malleja, pelkkään kuvaamiseen ei voi keskittyä, vaan mukana on hyvin monta liikkuvaa osaa. Varsinkin, kun kuvattavia on kaksi, mukana on taas yksi elementti lisää. Mihin ne kädet laitetaan ja jalat, yhdenkin ihmisen raajat on jo haasteelliset saatika sitten kun niitä raajoja on kahdet parit ja niiden pitäisi vielä jotenkin hyvin mennä yksiin :D. Varmaan ehkä osaksi tästä syystä huomasin kuvanneeni paljon vyötäröstä ylöspäin olevia kuvia – jalkojen asettelua ei tarvinnut niin paljon miettiä. Ylävartaloissa oli jo ihan riittävästi näin henkilökuvausnoviisille.

Tykkään maisemien ja luonnon kuvaamisessa siitä, että siinä saa ikäänkuin rentoutua ja rauhoittua ja olla omissa ajatuksissaan. Maisema/luontokuvaus on aivan erilaista kuin henkilökuvaus ja vaikka olen nyt vasta ihan muutaman kerran henkilökuvausta tehnyt, olen alkanut tykätä myös siitä.

Kävin kuvaamassa valloittavaa pariskuntaa Elisaa ja Jannea syksyisessä puistossa Tampereen Arboretumissa ja omasta mielestäni onnistuin oikein hyvin näin ensimmäiseksi varsinaiseksi kuvauskeikaksi. Mutta koska olen itse itseni pahin kriitikko, kehityskohteita kyllä tietenkin löydän ihan riittävästi :D.

Tässä muutama syksyinen kuva, kommentit ja palaute ovat tietenkin tervetulleita :).

Varusteet: Canon 70D + Canon 70-200mm 4.0 L

elisajajanne-9

elisajajanne-5

elisajajanne-27

elisajajanne-16

elisajajanne-19

elisajajanne-33

elisajajanne-35

Graafisen suunnittelun trendit

Graafiset muodot

Itse olen ainakin törmännyt usein alla olevan esimerkin kaltaiseen polygon -tyyliin, jossa kuva on rakennettu eri kokoisista kolmioista. Itsekin olen suunnitellut joskus ensimmäisenä vuonna seripainoon tällä tyylillä paitaprintin, joka nyt ei tietty ihan yhtä komea ole kuin tämä alla oleva Marilyn 😀

 

linnut2014-1-01

Ja tässä esimerkiksi hyvin modernia tyyliä, jossa on paljon erilaisia graafisia linjoja ja elementtejä. Itse tykkään tällaisesta tyylistä tosi paljon!

Tässä graafisia muotoja on käytetty erittäin kauniisti tanssistudion ilmeessä.

Laitan tähän vaan, että <3. Tykkään tällaisesta valokuvien ja graafisten elementtien yhdistämisestä.

Tässä vähän sellaista retromeininkiä, ja tämä kävisi myös tuonne alempana olevaan moderni retro -tyyliin esimerkiksi.

 

Rohkeat värit

Liukuvärit voi helposti aiheuttaa inhoreaktion, mutta tämä on mun mielestä aika freesi. Yleensä tykkään tällaisista kuvan päälle laitetuista gradienteista tai color leakeista, käytän niitä itsekin jonkin verran.

Näyttökuva 2016-10-7 kello 14.50.26.png

Moderni retro-tyyli

Tätä näki jossain vaiheessa apljon paitaprinteissä, kangaskasseissa jne. Erityisesti juuri kameroita, c-kassuja ja muuta ysärikamaa. Retrotyylissä kulmakivinä on värivalinnat ja aika usein tällaista jälkeä saa flat designilla.

Sitten hieman erilainen retrotyylinen lähestymistapa.

 

Minimalistiset logot

Kun kirjoittaa Pinterestiin logo design, tällaisia minimalistisia logoja lävähtää nenän eteen koko ruudun täydeltä. Itse tykkään tällaisista selkeistä ja minimalistisista logoista, joissa on jokin pieni kekseliäs juju.

Web-suunnittelun trendejä 2016

Tässä lisäys tähän trendi-sarjaan, josta aikaisemmin postasin jo typografian trendeistä.

Tähän olen nyt nostanut muutamia trendejä, joita olen ihan itsekin havainnoinut ja joita on lueteltu eri listauksissa web-suunnittelun trendeistä.

Suuret Hero-kuvat tai -videot

Tähän kohtaan ei ole kovin vaikea löytää esimerkkejä, oikeastaan jopa valtaosalla yrityksistä on nettisivuillaan käytössä suuri, koko taustan tai melkein koko taustan täyttävä hero-kuva. Videoitakin löytyy. Monella nettisivulla on myös hero-kuvassa pyörii muutaman kuvan sarja.

Tässä esimerkissä on koko taustan kokoinen staattinen kuva ja navigaation löytyy kuvan ala-osasta. Herokuva on koko selainikkunan kokoinen, riippumatta selainikkunan koosta.

capture2

Hero-kuva voi olla myös illustraatio, kuten tällä portfoliosivulla.

capture4

AirBnb:llä on käytössä hero-video.

capture

Juliana-pyöräfirmalla herona on kuvakaruselli.

capture5

Material design

Material design on flat designin muoto ja niiden ero onkin hiuksen hieno. Material designissa on pientä syvyysvaikutelmaa ja siinä on käytetty esimerkiksi pieniä heittovarjoja luomaan illuusiota siitä, että jotkin elementit ovat toistensa päällä ja kerroksissa. Material designissa voidaan käyttää myös erilaisia animaatioita.

Tässä vertailun vuoksi pinterestin hakutulokset sanoilla flat design ja alempana material design

flat

material

Saman tyylisiä simppeleitä laatikoita, nappuloita ja kuvakkeita löytyy molemmista tyyleistä, erona tosiaan material designin syvyysvaikutelma, pienet gradientit, heittovarjot jne.

Material design -konseptin on kehitellyt google ja luonnoliisesti google itsekin käyttää tyyliä omilla sivuillaan. Tässä esimerkiksi Google-kalenteri ja Google design-sivu, josta löytyy kaikenlaista kivaa, esimerkiksi materiaalipankki, erilaisia pohjia, väripaletteja jne jne.

google

googdesign

Googlelta löytyy myös kattava opas material design -tyyliin osoitteesta material.google.com

capture11

Myös esim. WhatsApp-webissä on käytössä material design -tyyli. En viitsinyt ottaa sisäänkirjauduttuani print screeniä ja paljastaa kaikkia viestejäni intternetissä, ties mihin naurunappulaan olisivat päätyneet 😀

whatsapp

Parallax-effect

Parallax-effectissä sivun osat on ikäänkuin eri kerroksissa ja kun sivua scrollaa alaspäin, eri tasot liikkuvat eri vauhtia. Vaikea selittää, mutta tässäpä pari havainnollistavaa giffiä.

http://www.firewatchgame.com/

http://www.culturalsolutions.co.uk/

Ja hieman yksinkertaisempi parallax effectin käyttö, jossa taustalla kuva näyttää olevan paikallaan, ja sen päällä olevat tekstilaatikot liikkuvat. Tällaisen efektin saa tehtyä esimerkiksi wordpressiss’ä ihan ilman koodausosaamista. Eikä kyllä tarvita paljon koodausosaamistakaan, kunhan lävayttää CSS:ään, että taustakuva on fixed.

https://modernthemes.net

Heitin esimerkkisivujen linkit tuohon, niin voi siellä käydä tarkastelemassa lähemmin, tämä gif-laatu kun on hieman kökkö.

Cards

Cards-tyyli perustuu tietynlaiseen gridipohjaan, jossa sisältö on laatikoiden sisällä. Mukavan selkeä ja graafinen tyyli, jossa on helppo gategorisoida asioita. Esimerkiksi Pinterest käyttää tätä tyyliä.

pinterest

Monilla vaatekauppojen sivuilla on käytetty tätä tyyliä, kuten tässä H&M:n sivulla.

hm

Kivoja esimerkkejä löytyy jälleen kerran Pinterestistä hakusanalla Cards UI.

cards-ui

Näitä webbisuunnittelun trendejä vuosille 2016 ja 2017 löytyy roppakaupalla näiden esimerkkien lisäksi. Esimerkiksi erilaiset pienet ja suuret animaatiot ja responsiivisuus, illustraatiot, erilaisten ikonien ja infografiikan käyttö… Sitten löytyy näitä koulukuntaeroja, esimerkiksi että onko scrollattava sivu, jossa ei edes välttämättä ole eri välilehtiä, vaan kaikki on samassa pötkössä vai käytetäänkö lyhyitä sivuja, joita ei tarvitse scrollailla vaan kaikki on heti näkyvissä. Tai käytetäänkö hampurilaismenua vai onko kaikki linkit heti näkyvillä.

Mielenkiintoisia juttuja. Siinä onkin sitten pähkittävää, että minkälaisen sivun haluaisi esimerkiksi omasta portfoliostaan…

PacTec-pakkausalan messut plus muita oheistapahtumia

Käytiin koulun kanssa Helsingissä PakTec-messuilla, jossa olikin yllättävän paljon kaikkea mielenkiintoista. Eikä ainoastaan tuolla PacTec-puolella vaan myös oheistapahtumissa, kuten Markkinoinnin Viikko -messuilla ja Esimies&henkilöstö-messuilla, jonne pääsi myös samalla messukortilla ihan ilmaiseksi.

Melko yleinen ilmiö tuntui olevan, että näytteilleasettajia ei näyttänyt kamalasti kiinnostavan esitellä tuotteitaan tai toimintaansa nuorille naishenkilöille vaan kravatin suoristelu ja kahvin hörppiminen kollegoiden kanssa tuntui olevan mielenkiintoisempaa tekemistä. Johtuneekohan siitä, että yleisesti ottaen suomalaisille sellainen reipas jutustelu on vierasta vaiko siitä, että nuoren naishenkilön ei arvella olevan minkäänlaisessa päätösvaltaisessa asemassa yrityksessä, jossa pakkausalan tuotteita voitaisiin tarvita. Opiskelijoitahan me olemmekin, mutta meistäkin moni saattaa hyvinkin tulevaisuudessa olla sellaisessa asemassa, että olisi esittelijöidenkin kiinnostus hieman erilainen. Ja sitäpaitsi miksei nuori nainen voisi olla vaikka kuinka suuren firman päättäjä.

Onneksi poikkeuksiakin kuitenkin löytyi kuten Keili, Stora Enso, BrandId ja Antalis, joissa innokkaasti jututettiin ja esiteltiin myös meille opiskelijoille, pisteet heille hyvästä asiakaspalvelusta :).

Keili esitteli pakkauksiaan tällaisella anonyymillä tavalla, ja oli ihan hauska ikäänkuin arvailla minkälaiselle tuotteelle pakkaus oli tarkoitettu 🙂

20160922_104030.jpg

20160922_104101.jpg

Siinä äitiyspakkaukset ja oluet sulassa sovussa keskenään ;D.

 

20160922_105439.jpg

SignTec oli graafisen teollisuuden ja painoviestinnän osio, joka oli kyllä pienoinen pettymys, pieni kuin mikä! Erityisesti tämä osa-alue kun olisi kiinnostanut. Bo Wallteg Packnews.comista oli kertomassa pakkausalan trendeistä. Wallteg nosti esille erityisesti pakkauksella luotavan kokonaisvaltaisemman käyttökokemuksen ja mainitsi asian tärkeydestä esimerkiksi nykyään suositut unboxin-videot, joita löytyy Youtubesta tuotteesta kuin tuotteesta.

Elintarvikkeiden pakkaamisesta oli myös paljon puhetta ja kuulimme perustelun esimerkiksi sille, miksi banaanien tai kurkun pakkaaminen muovipakkaukseen on perusteltua. Tämähän tietysti liittyy elintarvikkeiden pidempään säilyvyyteen ja tätä kautta pienempään hävikkiin, mitkä puoltavat myös sitä kritisoitua banaanien pakkaamista.

20160922_110738.jpg

BrandId:ltä sai mukaansa pelikortit. Kivannäköinen osasto, mutta suurensuuri miinus ideakirjan joidenkin kuvien täysin kammottavasta laadusta. Ei viesti kovin laadukkaasta toiminnasta tai tuotteista jos omassa esittelykirjassa on kuvia aivan kammottavalla laadulla, kyseessä kun on kuitenkin painoalan firma. Kerroin palautteen toki firman edustajalle.

20160922_111333.jpg

Antaliksella kerrottiin erityisesti suurkuvatulosteiden suosion kasvusta.

20160922_112408.jpg

Stora Enson osastolla kuultiin mielenkiintoisesta uutuustuotteesta, ekologisesta, puukuidusta valmistetusta kalalaatikosta. Nykyään paljon käytetyt styroksilaatikot päätyvät harmittavan usein vesistöihin ja tämä Stora Enson laatikko on hyvin kierrätettävä ja ekologinen vaihtoehto styroksisille laatikoille. Laatikon sisäpinnalla on ohut muovikerros, joka pulpperoinnin yhteydessä poistetaan ja poltetaan energiaksi. Ekologisuutta tulee myös kuljetukseen liittyen, sillä laatikon aihio ennen kokoamista mahtuu styroksilaatikoita paljon pienempään tilaan.

20160922_114147.jpg

Stora Enso voitti myös pakkauksen painatuskilpailun tällä flexopainossa painetulla Crowmoor-pakkauksella.

20160922_114747.jpg

PaHu:lla oli yksi hauskimman näköisistä osastoista 🙂

20160922_120913.jpg

Sieltä löytyi myös kaikkea kivaa aaltopahvista tehtynä.

20160922_121258.jpg

PacTecin liäskis messukeskuksessa oli muitakin ohietapahtumia, kuten Markkinoinnin viikko, jossa Grano oli erittäis näkyvästi esillä. Tämän oman näyttävän osaston lisäksi messuhallin pylväät oli päällystetty Granon painomatskuilla. Osasto oli kyllä aikas hieno ja siellä kävi vilinä, johtuiko sitten heidän skumppatarjoilustaan vai mistä :D.

20160922_142125.jpg

Porukka näytti myös istuskelevan Granon latauspisteellä, hauska idea noi lataussitruunat.

20160922_142214.jpg

Sellaiset messut! Ihan mielenkiintoista, vaikkakin olisin toivonut enemmän ulkoasun toteuttajille ohjelmaa ja ständejä. Torstaina piti olla ohjelmassa Visuaalisen viestinnään trendit -esitys, mutta se oli peruttu ja tilalle tuli jotain muuta, harmi kyllä, esityksessä olisi varmasti ollut paljon mielenkiintoista sisältöä!

Lisäilen tänne vielä kun oli niin mielenkiintoinen uusi materiaali. Tämä jää kiinni hyvin monenlaiseen pintaan mutta tämä ei ole tarra. Tällaista materiaalia voi varmaankin käyttää vaikkapa lattiateippauksissa myymälöissä tai muutenkin monipuolisesti myymälämainonnassa ja on siinä mielessä kätevä, että sen saa todella helposti myös irti vaikka se tarttuukin pintaan jämäkästi. Kiinnostava materiaali! 

Tutkiskeltiin pintaa lähemmin myös mikroskooppiloopilla. Tässä on siis käytetty nanoteknologiaa ja pinnassa on pienenpieniä imukupin tapaisia ilmataskuja. Jännää!

Oh so trendy typography

Graafisen suunnittelun ajankohtaisia trendejä on kiinnostava seurailla. Tutustuin hieman graafisen suunnittelun, typografian ja web-suunnittelun nykyajan trendeihin ja muutamat nousi esille useista eri lähteistä. Tällaisia trendilistoja tutkiskelemalla saa kivasti inspiraatiota ja ajatuksia myös omiin töihin. Tutkiskelen tässä hieman ensin typografian trendejä jotka mielyttävät omaa silmääni.

Aika paljon näissä kaikissa typografiatyyleissä toistuu retro.

Typografia

Vesiväri-fontit

Tämä on ihastuttava typografia-trendi! Pidän muutenkin kovasti vesiväritöistä.

Tässä on vähän rosoa ja toiskeita, heiman raffimpi vesivärifontti.

4

Tämä taas hieman pehmeämpi ja lempeämmän näköinen vesivärifontti. Tästä tulee jotenkin merellinen fiilis.

preview-cover-f

Vesivärifontti voi olla myös musta. Se tuo sellaista kotikutoista hipster-fiilistä.

2

All caps

Versaalikirjaimia näkee paljon niin jykevämpinä kuin ohuempina versioina esimerkiksi web-suunnittelussa.

Tässä on kahdentyylisiä versaalikirjaimia: tussilla ja maalaten kirjoitetun näköinen WORK HARD -teksti sekä selkeälinjainen ja simppeli YOU DESERVE THIS -teksti. Fonttivalinnoilla luodaan mukavaa kontrastia saman lauseen sisälle. Myös logossa on käytetty versaalikirjaimia.

Hentoisemmat ja kevyet versaalit luovat hienostuneemman fiiliksen.

naivelinesans1-f

Tämä fontti on vähän rebel ja kantaaottava. Näyttää tussilla kirjoitetulta.

Retrohenkinen rosoinen grunge-tyyli

Tekstuuri tuo fonttiin rosoisuutta ja hieman sellaista rock-henkeä.

monthoers

Liitufontteja näkee nykyään myös paljon. Niissäkin on tietynlaista retroa rosoisuutta.

brandon

Käsinkirjoitus

Käsinkirjoitetulta näyttävillä fonteilla saa ilmeeseen tietynlaista rentoutta ja leikkisyyttä. Se pehmentää viestiä ja näyttää jotenkin lempeältä.

Scriptit

Scriptifontit käyvät muuhunkin tarkoitukseen kuin hääkutsuihin. Itse olen törmännyt useasti todella kökön näköisiin scriptifontteihin ja esimerkiksi kaikilta kotikoneilta valmiiksi löytyvät fontit ovat useimmiten aivan kammottavan näköisiä.

Tähän mainokseen on valittu hienostuneen näköinen script-fontti.

Tämä voisi olla esimerkkinä myös tuossa All caps -tyylissä. Tässä on mielestäni kauniisti pehmennetty yleisilmettä script-fontilla. Tulee sellainen käsintehty retromainen fiilis myös.

Tämän tyyppisiä fontteja näkee usein sellaisissa retrohenkisissä jutuissa, mutta tässä esimerkissä fontti näyttää ainakin omasta mielestäni tyttömäiseltä, kepeältä ja iloiselta.

Picture overlay

Jos kirjoittaa ”quote” tai ”mietelause” vaikkapa Pinterestin hakukenttään, tällaisia kuvan päällä olevia tekstejä lävähtää näyttö täyteen. Tällaisia tulee vastaa jatkuvasti Instagramissa ja Facebookissa.

Photo overlay-typografiatyyli on käyttökelpoinen myös monessa muussa kuin somen mietelauseissa. Web-suunnittelussa tätä näkee usein: suuren hero-kuvan päällä on tekstiä tai logo.

Tässä on aika raju esimerkki tekstin asettamisesta kuvan päälle. Useimmiten näkee tuollaisia ylläolevia ratkaisuja, joissa kuvassa on selvästi jätetty paikka tekstille. Harvemmin näkee tällaisia alla olevan tyylisiä, jossa teksti on ihan suvereenisti laitettu suoraan saaman päälle.

Tämän voi tehdä myös toisin päin, eli tekstistä tehdään ikäänkuin reikä, jonka läpi kuvaa näkyy. Hauskan näköinen tapa myös.

Lähteet: Elegant themes, Creative market, Design Shack, Awwards, Uxpin, Forbes, Behance, Design School, Behance, Howdesign, Creative blog, Design ModoPinterest, Pinterest,