18/03/2017
Codemotion Roma 2017…e DEED, un Meetup dove Design incontra Development
La discussione su dove finisce il design e inizia il development quando si parla del web è tutt’oggi aperta… e a Roma torna la VII edizione di Codemotion noi vi invitiamo ad un nuovo fight c… meetup! :)
Torna a Roma Codemotion Rome 2017 – VII edizione, quattro giorni dedicati al codice, quattro giorni in cui l’evento porta a Roma il meglio del panorama tech internazionale.
Come tutti gli anni anche quest’anno siamo media partner ma quest’anno oltre a speaker di tutto rispetto, c’è una sorpresina in più.
Acquista il biglietto scontato!
La line-up della Conference affronterà topic come DevOps, Cloud/Bigdata, Microservices, GameDev/VR, Containers, Security, AI/Machine Learning, Javascript, Mobile e Reactive Programming e il Design/Front End, a cui vogliamo dedicare attenzione particolare in questo articolo. Non solo perché ci è caro il tema, ma anche perché vi vogliamo invitare a un nuovo meetup che si svolgerà all’interno dell’area Meetup di Codemotion Roma 2017, ovviamente a botte di birra e taralli come ogni meetup che si rispetti e di cui siamo co-fondatori insieme a Codemotion stessa, a Luca Ferretti di Immobiliare.it e Federico Pacilli di BaasBox.
DEED – Design&Development Meetup Roma
Il primo meetup in cui Designer e Developer si cercano, si parlano e si confrontano. Un ponte tra silos troppo spesso isolati, per far emergere il vero valore della collaborazione. Tematiche tecniche che incontrano concetti di progettazione visuale e ritorno.
Durante l’incontro una presentazione dei temi trattati nei futuri meetup con gli interventi di Emanuele Macri (nois3) e di Luca Ferretti (Immobiliare.it).
“Introduzione a CSS Grid“
Emanuele Macri
Designer&Front-End Developer @ nois3
“Creo esperienze multimediali, che siano esse un sito web, un’applicazione mobile o una Web App. Comincio dallo studio della UX, per poi passare a sporcarmi le mani con i wireframe e andando avanti a creare l’interfaccia grafica. Infine mi occupo di impacchettare il tutto dentro mockup statici, in HTML5, CSS3 e JavaScript.”
“Partecipanti entusiasti e dove trovarli”
… ovvero cosa ho imparato facendo guerrilla usability testing in una città dove caffè non è sinonimo di Starbucks.
Luca Ferretti
Lead Quality Assurance Engineer @ Immobiliare.it
“I break stuff, I build relationships” Quality Assurance Engineer with a diverse range of IT skills, involved in UX/Interaction, automated testing and open source.
Se non avete ancora capito di cosa si tratta… proviamo a spiegare.
Design/Front-end… Sembra chiaro, no?
Abbastanza, finché un professionista con delle determinate competenze no si mette a cercare un lavoro e, reciprocamente, un datore di lavoro – una figura professionale da assumere. E qui, tra numerosi CV e offerte di lavoro diventa evidente che non è affatto chiaro chi fa cosa quando si tratta di progettare l’esperienza utente (UX) e l’interfaccia utente(UI) di un prodotto web o mobile.
Eccone solo alcuni esempi:
- Senior UX Designer
- Front-End UX Developer
- Web Front-End Application Designer
- UI/UX Engineer
- Web UI Developer
- Front-End UX Ninja
- UX/JavaScript Developer
- Junior Web Designer
- Front-End UX Architect
- Web/UI Designer
- Senior Front-End Engineer
- Front-End Unicorn
- …
Riassumendo si può restringere a n combinazioni di seguenti componenti:
- Sr./Jr.
- Visual / Web / Front-End / JavaScript / CSS
- UI / UX / Interaction
- Designer / Developer / DevSigner / Engineer / Architect / Ninja / Unicorno /…
…Come se fosse Antani.
Ma chi deve fare cosa? Quante figure devono seguire un progetto? O ne basta uno che fa tutto, dal concept sketch all’implementazione del codice?
Non è che questa confusione sia alla base della pessima usabilità di molti siti web e applicazioni con cui siamo quotidianamente in contatto tramite UI?
La discussione su dove finisce il design e inizia lo sviluppo quando si parla del web è tutt’oggi aperta. Cerchiamo di capire e partiamo dalla definizione di ciò, dove il codice e design sono tutt’uno per garantire all’utente la comunicazione e interazione chiare e intuitive con le funzionalità, servizi e contenuti di un prodotto digitale: User Interface Design
Che cos’è User Interface Design?
Interface design, letteralmente progettazione delle interfacce, è comunemente intesa come l’attività di progettazione dell’interfaccia utente (in inglese UI o User Interface) di un qualsiasi sistema e software che dialoga con l’utente attraverso un mezzo. In particolare nell’ambito digitale il mezzo è uno schermo e la UI è comunemente confusa con la famigerata Grafica.
Lo User Interface (UI) Design si concentra sull’anticipazione di quello che un utente dovrebbe aver bisogno di fare per assicurare che l’interfaccia ha degli elementi che sono facili da accedere, capire e facilitare le singole azioni. UI si progetta tenendo in considerazione i concetti delle diverse discipline come interaction design, visual design e information architecture.
“UI design is the process of taking the way a machine works and translating it into the way a person thinks.”
— Strategist & Apprenticeship Program at Fresh Tilled Soil
Però da qualche parte nel limbo tra design – il magico mondo di personas, concept, e brand guidelines – e la tecnologia pura fatta di logica, algoritimi e linux (backend), si trova il front-end development. È responsabile per la creazione del codice HTML, CSS e JavaScript che fanno sì che l’interfaccia non solo sia visibile come previsto dal progetto di design, ma sia anche funzionale, veloce, interattiva e intuitiva.
“User Interface design is that part of a computer system with which a user interacts in order to undertake her tasks and achieve her goals.”
– Stone, Jarrett et. al., 2001
La prima conclusione che possiamo trarre è che per realizzare un’interfaccia usabile e intuitiva come minimo servono due macrocategorie di competenze:
- Design – Ideazione e Progettazione dell’UI
- Development – Sviluppo, o in altre parole, la costruzione fisica in mattoni di codice di UI.
Front-End
Front-End Design
Il front-end o UI o Visual design è comunemente deputato a tutto ciò che riguarda la parte visual e interattiva del web, in primis l’interfaccia grafica che si presenta all’utente e che fa parte dell’ impatto complessivo anche di comunicazione visiva.
Dal orientamento allo storytelling
Front-End Design è un processo di guidare visivamente l’utente tramite un sistema di segni tradotti in una logica di relazione dei singoli elementi tra di loro anche su diversi schermi e piattaforme.
UI Design si differenzia dal design grafico tradizionale proprio perché è Interattivo. Non basta vedere, serve interagire.
Il designer è anche focalizzato sullo storytelling, come parte integrante dell’esperienza utente e della brand experience. Qui subentra la necessità di avere anche le competenze di architettura dell’informazione per strutturare i contenuti rispettando l’ordine di importanza, frequenza di accesso, logica narrativa o di un funnel specifico di Customer Journey.
Hint: 10 Principles of User Interface Design —Bokardo
UI Look&Feel
UI design si occupa anche di tutti gli aspetti cruciali che determinano “Look&Feel”, la parte del coinvolgimento emotivo dell’utente con il prodotto digitale che servono ad uniformare e rendere coerente la comunicazione visiva senza compromettere l’usabilità: schemi colore, loghi, immagini, font, proporzioni – mettendolo in relazione con l’architettura dell’informazione. Tutte queste regole si trasformano nelle linee guida ben precise.
UI Design Tools
Si usano gli strumenti che vanno da carta e penna passando poi tra applicazioni come Sketch, Photoshop, Illustrator e affini fino ad arrivare ai software di prototipazione. I deliverable sono molteplici e limitati solo dalle tempistiche, budget e livello di competenza: da schematici schizzi di wireframe e card sorting con i post-it dei contenuti fino alla stesura di UI styleguide complessi e prototipi interattivi. Difficilmente però durante questo percorso progettuale si scrive del codice e si controlla come il sito si presta.
Front-End Development
In 140 caratteri o meno, come si può definire front-end development?
“A mix of programming and layout that powers the visuals and interactions of the web.”
– Nick Schaden, Web Designer/Developer Dall’intervista su General Assembly “What is Front-End Web Development?”
L’interfaccia di un sito web, tutto ciò che è visibile – dai font ai colori, dai dropdown menu agli slider è una combinazione di HTML, CSS, e JavaScript controllati dal browser.
How Design works
Il front-end developer, detto anche client-side developer, ha il compito di trasformare un prototipo grafico con le rispettive guide di stile in qualcosa di reale, con un codice e in relazione con il back-end, assicurando una fluida esperienza utente in tutti i passaggi, transizioni, scenari d’uso e, sopratutto nel caso del web – su diversi dispositivi e schermi di molteplici dimensioni e risoluzioni e su diversi sistemi operativi.
“Design is not just what it looks like and feels like. Design is how it works.”
— Steve Jobs
Per la maggior parte delle persone un developer è un htmler, web designer, programmer, coder… però front-end non è solo una bella facciata.
Un wireframe, mock-up o un prototipo senza il codice sotto non fa da tramite con il back-end e quindi è solo una rappresentazione indicativa dell’interfaccia, ma non uno strumento di comunicazione e interazione con il prodotto digitale.
Non basta il codice
Le aree di attenzione e l’elenco di “must-have” skill di un front-end developer è in continua evoluzione. Front-End Handbook 2017 scritto da Cody Lindley con il contributo di Frontend Masters è la seconda edizione di uno dei tentativi di raccogliere insieme in un percorso didattico tutto il materiale che un buon front-end dovrebbe sapere.
Accessibilità, usabilità e performance sono tra gli obiettivi principali che emergono. Le competenze vanno ben oltre il padronaggio dei codici: markup, style, cross-browser, cross-platform, cross-device functionality, templates e CMS, web framework, usabilità e user testing ne sono solo alcuni. Design non deve essere solo piacevole e d’impatto visivo, deve essere costante nel funzionamento cross-browser, cross-platform e cross-device. Perciò le sfide di un front-end developer sono spesso concorrenti con quelle del designer. Un design improvvisato direttamente in fase di sviluppo dal developer è una situazione che accade spesso. Anche dopo il concept e progettazione più elaborata possibile di UI capitano sempre degli attriti durante lo sviluppo. Nessun style guide o prototipo più dettagliato possa garantire un perfetto funzionamento in tutti i possibili casi studio una volta messo in codice.
“It’s a rare man who is taken for what he truly is.”
― Peter S. Beagle, The Last Unicorn
Più è grande il progetto, più è probabile che servirà intervenire sul design iniziale durante lo sviluppo.
Il developer dovrebbe essere anche designer? O dobbiamo riprendere l’antica discussione intorno alla domanda:
un designer dovrebbe conoscere i linguaggi di programmazione?
La risposta è sì. Idealmente, dovrebbe…
Ma la realtà è diversa. Trovare un devSigner che può agilmente spostare la concentrazione tra il codice e i bisogni utente e l’estetica è una rarità…
Development vs Design
L’evoluzione del processo e dei requisiti del front-end insegna che non esistono unicorni, ma un lavoro di squadra…
Nei team spesso però il development è nettamente separato dal design e un designer che non conosce HTML e CSS rischia sempre di produrre un design mediocre. Non avendo delle idee chiare sulle logiche e limiti del codice, non capisce come la tecnologia processa il design e quindi rischia di proporre, per esempio, dei layout troppo pesanti, lenti a caricarsi, difficili da implementare cross-device.
Sono tutti elementi che uno sviluppatore non può sistemare senza intervenire sul design e non sempre se la sente di farlo.
Non è raro che i developer non sono in grado di interpretare correttamente le intenzioni che stanno alla base del design oppure il design prevede delle tempistiche di sviluppo che non sono stati correttamente calcolati e concordati.
L’assenza di comprensione reciproca tra i due ruoli porta spesso a dei conflitti articolati all’interno del team tra i “creativi” e i “nerd” ed ha un costo: il tempo di lavoro perso.
L’ideale sarebbe abbinare il design e lo sviluppo in unico processo collaborativo.
Development is Design
Il front-end developement è l’arte di tradurre il design in qualcosa che funziona davvero.
Il mito più grande della cultura pop è che si tratta di due forme di lavoro opposte collocate in due emisferi opposti del cervello.
In realtà sia la percezione di una formula matematica e o di una linea del codice perfetta sia la percezione di armonia visiva risiedono nella stessa parte del cervello – quella destra.
“There are almost always multiple ways to solve a single problem, or achieve any specific functionality. On the outside I think programming can seem like a very prescriptive, direct, binary kind of job.
But there’s actually a lot of creativity and ingenuity involved. “
– Nick Schaden, Web Designer/Developer Dall’intervista su General Assembly “What is Front-End Web Development?”
È la continua collaborazione, dialogo e comprensione tra i designer e i developer in tutte le fasi del progetto che portano a realizzare dei prodotti eccellenti.
Per capirlo è nata la una nuova community: DEED – Design&Development Meetup Roma
Codemotion 2017: Tutte Le Design/Front-End Sessions
Acquista il biglietto scontato!
2017-03-24
11:30 / 12:10
Room N5
Web Components and Design Systems – Adam Onishi
Abstract: What do Web Components have in store for the many design systems being created today? In the Origami team, we’re working on the design system for a wide range of products at The Financial Times. Now, we’re looking at how Web Components will become part of that system. In this talk I’ll look at what the Web Components specs are and what specific areas will help with the problems we’re facing. I’ll also look at a few of the more well-known design systems to see how they could be using Web Components and at what challenges they might face too.
Progressive Web Apps: trick or real magic? – Maurizio Mangione
2017-03-24
14:10 / 14:50
Room N11
Abstract: Con il passare del tempo i siti e le applicazioni diventano sempre più pesanti e gli utenti consumano i loro contenuti prevalentemente attraverso dispositivi mobile. Due cose che non vanno certo d’accordo. Rendere le applicazioni performanti è un compito difficile soprattutto quando ci sono variabili che non possiamo controllare, come la connessione. I Service Worker e altre tecniche che stanno dietro le Progressive Web Apps possono essere una risposta concreta a questo problema.
Make your animations perform well. – Anna Migas
2017-03-24
15:10 / 15:50
Room N13
Abstract:CSS animations have been around the web for some time already and have been helping us in many ways: they give the users feedback on their actions, lead them through a page, cheer them. Badly implemented animations on the other hand can be deadly to the website’s performance and the user’s delight. Let’s learn together what are the best techniques to get our animations smooth.
Component-Based UI Architectures for the Web – Andrew Rota
2017-03-24
16:10 / 16:50
Room N5
Abstract: Today UI frameworks for the web are embracing the concept of “components”. But what does a component-focused architecture really mean? In this talk we’ll dive into the theory behind component-based UIs and what it means for the future of user interfaces on the web. At the conclusion of this talk, attendees will have an understanding of what makes component-based architectures distinct, and why such an approach might be the ideal solution for building web-based UIs.
OMG, it’s all about SVG! – Agnieszka Naplocha
2017-03-24
17:10 / 17:50
Room N1
Abstract:Have you ever thought that dabbling in SVG and animating it might be a cumbersome part of your work? Probably yes. To be honest, I had thought the same before I actually started playing with it. During my presentation I’ll tell you why SVG is so hyped and powerful right now, giving you a couple of creative and fun examples. I’ll also show you how to easily animate SVG using simple CSS animations, which advantages SVG has over other formats and finally I’ll shed a light on SVG’s accessibility.
Avoiding Checkmate: Strategies for Design Systems – Stephanie Rewis
2017-03-25
10:30 / 11:10
Room N10
Abstract: It sounded so simple. Architect and build a modern CSS framework for a “Living Design System” — at enterprise scale. What could go wrong? Before the game begins, strategy seems so simple. But after the first move, it quickly becomes a game of chess. From naming, and taxonomy, to adoption, versioning, and deprecation, every move influences the next. Because unlike chess, with a living Design System, the game never ends.
The building blocks of the next web, from Customer Journey to UI Components. – Antonio De Pasquale
2017-03-25
15:10 / 15:50
Room N14
Abstract:Designing for the web changed from an artisan template design to a more modern LEGO builder approach. Creating a personalized library of UI&UX bricks with intelligent behaviors helps an organization to build a real product. Reusable components can be combined in more complex structures, widgets and templates thus providing higher fidelity to design and decreasing the time to market. Through real project examples, this talk will introduce the design methodology and process to translate a UX model into a set of components, and the recommended development practices to implement.