Tervetuloa Ambientian Reissukuulumiset-osioon. Tässä ensimmäisessä osiossa seikkaillaan Saksassa ja tarkemmin ottaen Freiburgissa, konferenssissa, jota voi kuvailla vain sanalla “smashing”. Ambientian Interaction Designer Mikko Suominen osallistui syyskuussa 2017 järjestettyyn SmashingConfiin, joka osoittautui täydelliseksi kombinaatioksi käytännönläheistä oppia, inspiraatiota ja mielenkiintoisia keskusteluja alan vaikuttajien kanssa. Tärkeimmät aihealueet painottuivat front-end-kehitykseen ja -muotoiluun. Mikko kokosi meidän muiden iloksi työkalupakkiin tärkeimmät huomiot tapahtuman kiinnostavimmista osa-alueista.

 

CSS Gridillä sivun asettelu uudelle tasolle

Jos Flexbox on hyvä komponenttitason asetteluun, on CSS Grid koko sivun työkalu. Grid on hyvä silloin kun toteutetaan verkkosivujen ulkoasujen osia, jotka vaativat elementtien määrittelyn sekä pysty- että vaaka-akselilla. Gridin kanssa riittää, että antaa tarvittavat määritykset isäntäelementille jolloin lapsielementit asettuvat automaattisesti oikeisiin uomiinsa. Ja mikä parasta, gridin osalta tukea on saatavilla jo kaikilta suurimmilta selainvalmistajilta (tätä lukiessasi, ehkä jopa IE Edgessä). Mikäli Rachel Andrewn puheenvuoro CSS Gridistä kiinnostaa, tsekkaa esitys täältä.

Kuumaakin kuumempi Design System

“Design System” on asia, joka tuntuu olevan kaikkien muotoilijoiden ja front-end-yhteisöjen huulilla tällä hetkellä. Alla Kholmatova kiteytti mistä tässä koko hypessä on kyse:

Design System löytyy aina. Ainoa kysymys on kuinka hyvin se toimii.

Design Systeemit voivat olla kaikkea tarkasti määritellyn ja löyhän välillä. AirBnB on yksi kiinnostava esimerkki tarkasti määritellystä systeemistä: he ovat luoneet automaattisen synkronisoinnin sketch-tiedostojen ja front-end -elementtien välillä. Tällöin komponenttien suunnittelu on parin muotoilijan käsissä. Muut tiimin jäsenet eivät juuri itsenäisesti voi muuttaa malleja.

 

Viimeisenä muistutuksena: “Design systeemejä” on erilaisia, ja se mikä toimii AirBnB:llä ei välttämättä toimi sinun projektissasi.

Mediakyselyiden tuolla puolen

Oletko koskaan miettinyt miten luoda responsiivisia verkkosivuja fiksusti ilman mediakyselyitä (media-queries)? Tähän dilemmaan vastasi Michael Riethmuller omassa puheenvuorossaan. Yksi mielenkiintoisimmista esimerkeistä liittyi fluidiin typografiaan. Ennen oli tarpeen määritellä tarkka pikseliarvo laitekohtaisesti ruudun koon, leveyden tai laitteen orientaation mukaan. CSS-calc() avulla voidaan kuitenkin määritellä minimikoko tekstille tähän tapaan: calc(18px + 3vw). Kuinka käytännöllistä!

Toinen CSS-kikka, joka tapahtumasta jäi käteen oli flex:9999 -hack. Tämä toimii tilanteissa kun haluat elementtien skaalautuvan täyteen leveyteen vain jos ne ovat omalla rivillään. Ja kas, ei mediakyselyitä! Perehdy Miken ajatuksiin hänen verkkosivuillaan.

Luovuuden inspiraatiolähde

SmashingConf Freiburg tarjosi myös aimo annoksen inspiraatiota. Yiying Lu on parhaiten tunnettu Twitterin Fail Whalen suunnittelijana, joten häntä voidaan pitää logo- ja brändisuunnittelun todellisena asiantuntijana. Hänen meriiteikseen voidaan myös laskea konkurssin partaalla olevan australialaisen Go Sushin uudelleenbrändäyksen Wasabi Warriorksi sekä usean muun brändin uudistamisen. Hänen viestinsä oli, että myös brändimuotoilu kannattaa perustaa tutkimukseen. Hän itse on saanut inspiraatiota niin muinaisesta kiinalaisesta kalligrafiasta kuin pelien historiastakin.

Alma Hoffman taas jakoi näkemyksiään luovuudesta yleisesti. Luovuus on hänestä säännöllisen harjoittelun tulos. Itse hän aloitti tavan piirtää luonnoksia 15 minuuttia joka päivä – Creativity, you need to use it or loose it.

 


Lähde: The Atlantic (https://www.theatlantic.com/technology/archive/2015/01/the-story-behind-twitters-fail-whale/384313/)

Yhteenveto

Kaiken kaikkiaan SmashingConf oli rento ja selkeä kokonaisuus, missä pääpaino oli innostavassa uuden oppimisessa ennemmin kuin vakavan bisneksen tekemisessä. Pisteenä iin päällä mainittakoon vielä, että Freiburg kaupunkina on sympaattisen pieni ja värikäs. Suosittelen kyseistä konferenssia lämpimästi kaikille, jotka ovat kiinnostuneita front-end-kehityksestä ja -muotoilusta. Tulevia konferenssi- ja muita matkoja voit myös jatkossa seurata Ambientian Reissukuulumiset-osion kautta.

 

Katso kaikki kuvat Mikon matkalta >>

ambientia

Blogi