Come Webflow ti rende un designer migliore

Cos'è Webflow e perchè ne stiamo parlando ?

Webflow è un CMS di sviluppo per siti che permette a tutti di sviluppare siti web personalizzati con molto controllo sui blocchi.

"Oh è un Website builder allora" potresti pensare. Beh... si e no. E' vero che puoi usare Webflow come tipico drag & drop builder, e quindi "si". Webflow ti permette però di realizzare siti web unici ed esperienze mozzafiato per i tuoi utenti, evitando completamente i template. Puoi anche utilizzarlo affiancandolo ad altre soluzioni no-code per creare strutture complesse. Gli use-case di webflow potrebbero essere un'argomento per un'intero articolo, quindi adesso non ci concentreremo su quello.

Molti designers con poca esperienza nella programmazione e nello scrivere codice potrebbero sentirsi intimiditi da Webflow, per via del suo aspetto troppo tecnico e difficile quando si è alle prime armi. Ho passato ore a parlare di Webflow con altri designers e solitamente la ragione di diffidenza era quella. E non solo questo, ma spesso i designer vedono questo tool come:

- un'investimento di tempo ingente,

- non vantaggioso per ampliare le loro skills.

Scrivo questo articolo per condividere con voi la mia esperienza e quella di altri professionisti di Webflow. Usare Webflow per diversi anni ha decisamente migliorato le mie skill e capacità di design e di lavoro. Voglio mostrare ad altri designers che non c'è niente di cui aver paura, anzi!

Quindi, bando alle chiacchiere e iniziamo!

Perk #1 — ti aiuta a realizzare design più realistici e anticipare problemi di sviluppo

‍

L'utilizzo di Webflow mi ha insegnato a pensare come uno sviluppatore durante la fase di progettazione. Prima di imparare Webflow, realizzavo soluzioni che gli sviluppatori ritenevano essere difficili da programmare. Ciò potrebbe essere vero anche oggi, ma ora posso individuare molti di questi problemi prima.

Dopo aver sviluppato personalmente alcuni siti Web, inizierai ad avere momenti "come lo svilupperei" durante la fase di progettazione.

Ciò ti consente come designer di pensare qualche passo avanti e costruire soluzioni più scalabili. Consegnerai anche più velocemente e migliorerai le tue relazioni con gli sviluppatori. Non male eh?

Mentre leggi, potresti trovarmi a parlare molto di Webflow come un modo per costruire un ponte tra il design e lo sviluppo in generale. Non possiamo costruire questo ponte senza capire il lavoro dell'altro. E come probabilmente hai intuito, imparare di Webflow aiuta moltissimo a capire gli sviluppatori!

Perk #2 — ti aiuta a capire meglio il responsive web-design

‍

Ovviamente questo potrebbe non essere applicabile a tutti i designer, ma ci sono buone probabilità che molti di loro abbiano già una straordinaria conoscenza del design responsive. Tuttavia, ho notato un notevole cambiamento nel mio approccio al web design responsive dopo aver appreso come strutturare un sito Web in Webflow per rendere i miei progetti scalabili.

Noi, come designer, tendiamo spesso a progettare il nostro "capolavoro" su un'artboard 1440 o 1680 px. Poi inseriamo quella griglia a 12 colonne e la osserviamo allinearsi perfettamente. Il nostro ego è felice. Finiamo poi con il progettare una versione mobile o anche alcune versioni aggiuntive su schermi diversi. Ciò alla fine lascia agli sviluppatori il compito di capire da soli le parti intermedie. Di conseguenza, a volte possiamo rendere la vita più difficile del necessario con le nostre griglie a 12 colonne.

L'argomento dell'overhype delle griglie o meno potrebbe essere di nuovo un topic per un'altro articolo.

La cosa principale che vogliamo sempre è assicurarci che i nostri design siano ben strutturati e continuino a scalare bene su tutti i dispositivi. Secondo la mia esperienza, per la maggior parte dei siti Web è molto più semplice impostare uno/due contenitori principali per i limiti della griglia e quindi adattarli. Potrebbe anche essere più facile prendere in considerazione la tecnica magica degli EM per risparmiare un sacco di tempo.

Indipendentemente dalle tecniche che potremmo utilizzare, lo sviluppo di siti Web responsive in ​​Webflow è stato un ottimo modo per uscire dalla "mentalità artboard".

Ora mi concentro maggiormente sull'allineamento e sulla scalabilità piuttosto che su complessi sistemi a griglia. Oltre a questo, Webflow mi ha reso consapevole di quale sia un modo naturale per disporre gli elementi su dispositivi più piccoli.

Oh .. e mi ha reso meno incline a discutere su ogni piccolo pixel se non danneggia il sito Web in modo evidente.

Perk #3 — ti insegna come scrivere codice in modo divertente

Sono sicuro che saremo più o meno tutti d'accordo sul fatto che è bene per un designer conoscere le basi dello sviluppo front-end. Vogliamo che i designer comunichino meglio con gli sviluppatori e producano progetti più realistici e scalabili lungo il percorso. Tuttavia, l'apprendimento di HTML, CSS e Javascript a volte può essere un viaggio lungo e teorico. I designer sono persone visive. Non è facile e pratico per loro imparare all'interno di un editor di codice senza l'anteprima usando pochi rettangoli invece del contenuto reale. Non fraintendetemi eh! Sono sicuro che ci sono molti tutorial di coding che mostrano effettivamente esempi nel contesto.

Quello a cui voglio arrivare è: con Webflow scrivi del codice, solo non ti preoccupi della sintassi.

‍
Potresti aver sentito che Webflow è un no-code builder. Il termine no-code potrebbe erroneamente suggerire che non vi sia alcun codice coinvolto nell'utilizzo del prodotto. Per me è meglio pensare a Webflow come a uno "strumento di codice in cui non devi scrivere parentesi e punti e virgola".

Webflow lo fa in modo molto intelligente incorporando il linguaggio HTML/CSS nell'interfaccia. Se vuoi che le tue cose siano centrate, usi le funzionalità del CSS: flexbox, margin: auto, ecc.

Per illustrare meglio la differenza, dai un'occhiata all'esempio seguente. Mostra l'allineamento di un'icona all'interno del suo wrapper verticalmente e orizzontalmente usando flexbox 👇

Abbastanza semplice vero? Ora per ottenere lo stesso effetto solo con un codice normale dovresti scriverlo (e scriverlo senza errori, il codice non perdona) 👇

.icon-wrapper {
display: flex;
justify-content: center;
align-items: center;
}

E ci siamo! Quindi vedi che in realtà usi lo stesso HTML/CSS/JS in Webflow?

Il senso è che ogni volta che impari Webflow, impari le basi dello sviluppo front-end.

Fai tutto in modo divertente e visivo! Puoi vedere istantaneamente i risultati del tuo lavoro su una tela, visualizzarne rapidamente l'anteprima su schermi di diverse dimensioni.

Vuoi controllare una versione live e non un'anteprima? Nessun problema, puoi pubblicarlo nel sottodominio Webflow con due clic.

Perk #4 — può migliorare la tua intesa con i developer

Ho già toccato questo punto in precedenza, ma penso che abbia senso dire una o due cose in più a riguardo.

Ho scoperto che gli sviluppatori generalmente vedono un designer che sa davvero come programmare un sito Web come una sorpresa positiva e inaspettata. Sebbene sia comune vedere HTML/CSS/JS come un'abilità aggiuntiva utile per un designer, molti designer non affinano queste skills e si concentrano su argomenti più relativi al design. Dopotutto è logico che i designer si concentrino principalmente sul miglioramento delle proprie capacità di progettazione.

‍
Imparare Webflow ti aiuta ad acquisire questa skills in un modo molto pratico. Dopodiché, le tue conversazioni con gli sviluppatori spesso passano a un livello completamente diverso.

Conoscendo il fatto tuo sul codice, puoi iniziare a utilizzare il linguaggio utilizzato dagli sviluppatori. Ti garantisco che la differenza tra un designer che conosce teoricamente le basi del front-end e uno che sa come costruire cose e comprenderne la logica è molto facile da individuare per qualsiasi sviluppatore front-end. Inoltre, semplificherebbe la vita ad entrambi, giusto?

Perk #5 — aggiunge valore al tuo skillset come designer

Anche se ho parlato della programmazione come una skill utile da avere come designer, pensiamo per un minuto al valore che aggiunge. Ogni volta che progettiamo siti web, dedichiamo una certa quantità di tempo a:

• definire i requisiti
• progettare il prodotto
• documentarlo
• ricevere feedback

e poi supervisionare la parte di sviluppo.

‍
Quando un sito web va in mano ad uno sviluppatore, spesso significa:

• Costi extra. Assumere due persone per fare lo stesso lavoro è solitamente più costoso che assumere una persona per fare lo stesso.
• Tempo extra. Non dovremmo supervisionare il lavoro di nessuno e perdere tempo a discutere delle cose se sviluppiamo un sito Web per conto nostro. Inoltre, di solito non è necessario scrivere un'ampia documentazione quando sviluppiamo la cosa da soli.

• Qualche livello di differenza tra il progetto originale e la sua versione pubblicata. Questa differenza può essere minima quando lavoriamo con sviluppatori bravi e attenti, ma qui faremmo affidamento solo sulle nostre capacità e sul nostro approccio. Se commettiamo un errore, non abbiamo nessun altro da correggere!
• Una diversa comprensione di un sito web e delle sue parti. Gli sviluppatori raramente partecipano a tutte le riunioni sui requisiti del cliente o alle sessioni strategiche in cui vengono discussi gli obiettivi di un sito Web. Di conseguenza avranno meno contesto generale che può portare a ipotesi sbagliate durante la fase di sviluppo.

Ora, se sai come costruire un sito Web e sei in grado di svilupparlo velocemente in modo identico al progetto, questo è di grande valore a molti livelli. Fondamentalmente elimina alcuni o tutti i punti sopra. Se sei un libero professionista, ti permette di aumentare le tue tariffe. Dopotutto ora fai un lavoro di progettazione e sviluppo, giusto? Ci sono buone possibilità che tu possa lavorare anche con un numero maggiore di clienti. Alcuni clienti cercheranno sempre un designer e uno sviluppatore in una sola persona per ridurre i tempi di consegna.

Naturalmente Webflow non è la risposta definitiva per la creazione di ogni tipo di sito Web su Internet. Ha diverse limitazioni importanti quando si tratta di siti Web che devono essere pesanti dal punto di vista dei contenuti. Tuttavia, questo ci lascia ancora un enorme mercato in cui possiamo utilizzare Webflow. Praticamente tutte le aziende hanno bisogno di una presenza online (psst.. un sito Web) al giorno d'oggi.

Due parole conclusive

In definitiva, apprendere Webflow significa apprendere le basi del front-end. Ovviamente è necessario imparare il codice oltre al solo Webflow e vale comunque la pena esplorarlo. Ma potrebbe essere davvero più facile e più incoraggiante per i designer impararlo prima tramite Webflow. Nel complesso, è più facile da comprendere, più visivo e più veloce essere in grado di mettere quella conoscenza in un uso pratico in progetti del mondo reale.
‍

L'apprendimento e l'utilizzo di Webflow è stato un viaggio continuo per me. Mi ha permesso di cambiare il mio approccio e la mia percezione della creazione di siti web. Mi ha reso consapevole di molte sfide di sviluppo che non mi aspettavo prima. Ha aumentato il mio valore come designer.
È una grande gioia costruire un prodotto funzionante invece di un prototipo, anche se a volte è solo un semplice sito web.
‍

E un'ultima cosa in chiusura per tutti i non programmatori là fuori: non c'è bisogno di temere Webflow o il codice in generale. Certo ci vuole tempo ed è decisamente più difficile da afferrare rispetto all'apprendimento del software di progettazione, ma non è una scienza missilistica che richiede anni ! Una volta imparata la logica, può essere davvero divertente!

‍
Spero che questo articolo ti sia stato utile e mi piacerebbe sapere cosa ne pensi! Probabilmente scriverò una guida passo passo per iniziare con Webflow, ma ci sono già alcune fantastiche risorse a riguardo.

‍
È stato lungo, lo so... Grazie infinite per averlo letto! Sentiti libero di contattarmi in qualsiasi momento su LinkedIn per fare una bella chiacchierata o visitare il blog se sei curioso di Webflow & Design 😎