SmashingConf Barcelona 2016 - Dag 1

SmashingConf Barcelona 2016 - Dag 1

SmashingConf Barcelona 2016 - Dag 1

Van 24 tot 26 oktober trok het Front-End team van EntityOne naar Barcelona om Smashing Conference bij te wonen, een internationale bijeenkomst waarin het woord wordt gegeven aan grote namen in de wereld van het web met een focus op design & front-end. Enkele keren per jaar wordt deze conferentie wereldwijd georganiseerd door Smashing Magazine. Na een zeer positieve eerste ervaring in 2015 besloten we ook dit jaar terug te keren.

In deze blogpost schrijft bij wijze van ruwe samenvatting elk van de 3 front-enders per dag over de voor hem meest memorabele sessie van die dag! 

 

Dinsdag 25 Oktober, dag 1 van de conferentie

Val Head

“Designing meaningful animation” - Val Head @vlh

Val Head had het in haar presentatie over het gebruik van animaties in een website, applicatie, … Maar dan op een natuurlijke manier en niet gewoon wat random animaties overal opgooien.

Hiervoor maken we gebruik van “The Principles of Animation” dit zijn 12 regels bedacht door Walt Disney. Je kan ze terugvinden in dit boek: “Disney Animation: The illusion of life”.

Hieronder kort enkle van deze principes kort uitgelegd.

Timing & Spacing

Timing: De hoeveelheid tijd dat nodig is om een actie te laten gebeuren. De duur. (CSS: duration)

Spacing: De verandering in snelheid tijdens de duur van de actie. (CSS: easing)

Als je deze twee zaken toepast zorg je ervoor dat geanimeerde objecten zich aan de wetten van de fysica houden. Het creërt ook een gevoel, emotie en een reactie bij mensen.

Om een natuurlijk gevoel na te bootsen kan je in plaats van de aanwezige CSS-keywords voor easing gebruik maken van een cubic-bezier() functie.

Follow Through

Niet alles komt meteen tot een stop. Meestal gaat iets verder voorbij het stoppunt vooraleer terug te keren en te stoppen. Denk maar aan een tekenfilm waarbij een personage die aan hoge snelheid plots moet stoppen voor een stopbord.

Secondary Action

Aanvullende actie, versterkt en voegt een extra dimensie toe.

Choreography

Ontwerp al je UI-animations om logisch en gerelateerd aan te voelen.

Zorg dat dezelfde soort elementen overal dezelfde animatie hebben. Zo heb je een coherent gevoel.

Stephen Hay

“The Dog and Its Tail” - Stephen Hay @stephenhay

Stephen Hay heeft het in deze talk vooral over art direction. Voor hem is dit het vertellen van verhalen, een essentieel belangrijk onderdeel van de menselijke ervaring aangezien we doorheen de geschiedenis altijd bezig zijn geweest met verhalen te vertellen, neer te schrijven, lezen, … 

Hij mist echter dit gevoel van art direction in webdesign, aangezien heel wat websites nu lijden aan “sameness”, namelijk: alles lijkt een beetje op elkaar. Er worden weinig risico’s genomen en vooral veel standaard layouts gebruikt en hergebruikt. Dit is ondermeer de invloed van o.a. Bootstrap, responsive design, maar volgens Stephen vooral omdat veel webdesign onmiddellijk start bij het creëren van een visuele taal en een design, zonder eerst over enkele essentiële zaken na te denken:

  • Wat zijn de waarden, wat is het doel van dit ontwerp?
  • Hoe kunnen deze waarden en doelen gegoten worden in een sfeer of in metaforen?
  • Welke ideeën kunnen we hier rond genereren, welk concept?

Aangezien we deze zaken overslagen en zonder genoeg na te denken starten is dit, zoals het spreekwoord, de kar voor het paard te spannen. Of: “the tail wagging the dog”. Stephen wil echter niet enkel bekritiseren, maar ook heel wat mogelijkheden aanbieden om meer creativiteit aan te wakkeren bij het maken van een ontwerp voor de klant. Deze willen we je niet ontzeggen, dus bij deze;

  1. Stel een “Wat als…” vraag; Wat als je een miniem budget had? Wat als je enkel zwart & wit mocht gebruiken? Dit biedt een nieuw perspectief op je designproces.
  2. Overweeg gebruik te maken van Brian Eno’s “Oblique strategies”
  3. Stel de vraag: “Welk probleem los ik met dit design op?
  4. Stel de vraag: “Is dit ontwerp overeenkomstig met het verhaal dat we willen vertellen?
  5. Stel de vraag: “Hoe kunnen we het verhaal op een andere manier vertellen?
  6. Stel de vraag: “Waar faalt dit? Waar mislukt dit ontwerp?
  7. Start met schetsen - op papier! Belangrijk is om veel kleine zaken te schetsen in een periode van enkele minuten, om voorbij de “low hanging fruit” ideeën te komen. Pas wanneer het erg moeilijk begint te worden om nieuwe ideeën op papier te zetten zit je in een zone waar echte creativiteit kan ontstaan.
  8. Zoom in, zoom uit; het is belangrijk om een stap terug te nemen, na te denken, je idee te analyseren en dan terug te keren om een wijziging aan te brengen die je nodig acht. 
  9. Immerse, then incubate: neem veel ideeën op maar neem ook rust om je brein de tijd te geven associaties te maken. Dit gebeurt immers best wanneer je ontspannen en disconnected bent van het werk. Stephen haalt hier het boek “The Organised Mind” aan, van Daniel J. Levitin.
  10. Focus op het probleem. En laat je niet leiden door de oplossingen van anderen.
Sara Soueidan

“CSS & SVG in real life” - Sara Soueidan @SaraSoueidan

In een verschroeiend tempo leert Sara ons nieuwe CSS-technieken, zoals hoe we tekst kunnen onderlijnen door gebruik te maken van text-shadow. Het gebruik van viewport, calc, box-decoration-break, css-counters en responsive typografie.

Sara is gefascineerd door SVG, het gebruik ervan wordt met de dag groter. Het leuke aan SVG is dat we ze kunnen aanpassen, animeren en manipuleren met CSS. Afhankelijk van wat we er mee willen doen kunnen we ze als background-image voorzien of ze inline in de code plaatsen. Wel moeten we opletten dat we enkel SVG's gebruiken waar we het nodig hebben voor CSS-manipulaties of dat de SVG file kleiner is dan er een PNG-file van te maken en deze in de plaats te gebruiken.

SVG is zeker een meerwaarde voor je workflow en het is zeker de moeite waard om het te verkennen!

Bekijk hier haar slides: https://sarasoueidan.com/slides/Smashing-Case-Study.pdf

Blijf op de hoogte via onze nieuwsbrief