Share
Le applicazioni basate su browser stanno diventando sempre più diffuse e la loro vitalità per l'utilizzo nel web design è in costante aumento. Certo, potrebbero non avere il grugnito completo delle applicazioni basate su desktop, ma possono comunque essere molto potenti a prescindere, e sono dotati di vantaggi che in genere non si trovano nel software normale.
Innanzitutto, le applicazioni basate su browser sono compatibili su più piattaforme. Non importa se il tuo SO desktop preferito è Linux, MacOS, Windows o persino ChromeOS, a patto che abbia un browser a cui sei pronto. A seconda delle app, potresti scoprire che puoi persino usarle per ottenere lavoro extra su un tablet iOS o Android.
In secondo luogo, hai la possibilità di accedere alle applicazioni ovunque, senza installazione o gestione. Fai girare il tuo software preferito su un computer che normalmente non usi. E non dovrai mai preoccuparti di gestire nuovamente gli aggiornamenti.
In questo articolo controlleremo lo stato delle applicazioni basate su browser nel 2018. Esamineremo quattro aree chiave che interessano i web designer:
Andiamo!
Anche il miglior software di progettazione vettoriale e dell'interfaccia utente sul desktop può richiedere molte risorse. In quanto tale, è abbastanza degno di nota quanto siano forti le app del browser in questa categoria in questo momento. Una cosa è creare app che paragonino a compiti leggeri, ma rendere il software di progettazione grafica di livello professionale nel browser è tutt'altra cosa. Eppure, molti sviluppatori sembrano aver raggiunto questa impresa.
I seguenti quattro sono i miei migliori preferiti per le app di progettazione vettoriale e UI nel browser:
Figma è un'applicazione che ricade perfettamente nella casa delle ruote del web designer. Sebbene sia in grado di eseguire qualsiasi tipo di lavoro vettoriale ed è una potente applicazione di progettazione grafica in generale, è particolarmente adatta alla progettazione di interfacce per siti Web e app basate sul Web.
Una delle caratteristiche principali che offre ai web designer è la possibilità di creare più "frame" individuali, che possono essere utilizzati in modo simile alle tavole da disegno. Ad esempio, potresti creare una cornice per rappresentare ogni pagina in un design del sito.
Dove diventa interessante è che qualsiasi elemento all'interno di un frame, ad esempio un pulsante "contatto", ad esempio, può essere collegato a un altro frame, ad esempio uno che rappresenta una pagina di contatto. Questo viene fatto trascinando una linea di collegamento dal pulsante al frame di destinazione, che converte detto pulsante in un "hotspot". In modalità presentazione, se l'hotspot viene cliccato caricherà il frame a cui è connesso, rendendo questa funzionalità ideale per simulare il flusso di movimento da una parte dell'interfaccia utente Web a un'altra.
Una volta completata la fase di progettazione, Figma semplifica l'acquisizione delle informazioni richieste per la codifica, quali dimensioni, posizioni, impostazioni dei caratteri, codici esadecimali e così via. Può anche generare copia e incolla di CSS pronti da collegare direttamente al tuo codice. E quando sono necessarie risorse immagine, possono essere esportate alla rinfusa tutte in una volta o individualmente secondo necessità.
Se la tua attività principale in un'applicazione vettoriale basata su browser sta per progettare interfacce utente per il web, Figma è un'opzione piuttosto difficile da superare.
Gravit Designer è un contendente serio nello spazio vettoriale come un'applicazione di progettazione grafica multiuso e multifunzione. È interamente utilizzabile a livello professionale, qualcosa che è reso più notevole dal fatto che Gravit è completamente, al cento per cento, gratuito. Non ci sono costi di acquisto, costi di abbonamento o pubblicità. Basta aprire l'app e progettare via.
Il software include robusti strumenti vettoriali come una penna stile classico, lo strumento Bezigon super pratico e strumenti di Freehand e Shading eccellenti. Offre la possibilità di avere una tela infinita e ha una lunga lista di preset di dimensioni in modo da poter passare dalla dimensione "Sito Web - Enorme" alla dimensione "iPhone X" con il clic di un pulsante.
Il sistema "Pagine" ti offre un tipo di tavolo da disegno per organizzare i documenti, e i sistemi di ancore e simboli combinati ti consentono di creare risorse riutilizzabili che si comportano in modo semi-reattivo quando vengono posizionate su pagine di dimensioni diverse.
Una delle mie caratteristiche Gravit preferite è il suo sistema incredibilmente flessibile di riempimenti, bordi ed effetti multipli. Un singolo elemento può avere qualsiasi numero di riempimenti, bordi ed effetti, ognuno con le proprie modalità di fusione e le impostazioni di opacità, consentendo di creare stili di design molto interessanti.
Gravit viene rapidamente migliorato, con il team di sviluppo che aggiunge funzionalità molto utili a intervalli frequenti. L'ultimo aggiornamento importante ha aggiunto simboli e ancoraggi avanzati. Quella precedente all'archiviazione cloud aggiunta, supporta importazioni e plug-in di Sketch. Gravit si muove velocemente e migliora spesso.
Se stai cercando un'applicazione a tutto tondo in cui puoi fare praticamente tutto ciò che ti serve con i vettori, Gravit è molto probabile che grattasse quel prurito.
Vectr è un'applicazione più leggera di Gravit o Figma. Descriverei questa app come una da usare quando vuoi entrare e uscire rapidamente e senza una curva di apprendimento ripida. Gli strumenti e l'interfaccia di Vectr sono minimalisti e intuitivi e l'eccellente serie di tutorial interattivi con cui ti accolli al primo avvio rendono il software molto più veloce da riprendere.
Una delle caratteristiche più interessanti di Vectr è che, tramite un plugin, può essere utilizzato come editor grafico completo all'interno di un'area di amministrazione di WordPress, qualcosa che potrebbe essere davvero molto utile.
Se non vuoi un sacco di storie, ma vuoi un set diretto di strumenti robusti, Vectr potrebbe essere l'applicazione che fa per te.
BoxySVG, come suggerisce il nome, riguarda interamente SVG. Se stai specificatamente progettando grafica vettoriale per il web, questa applicazione è specializzata proprio per questo scopo. BoxySVG non sta cercando di preoccuparsi della grafica di stampa, della progettazione di interfacce o di qualsiasi altra cosa che potrebbe distrarre da un ottimo programma di progettazione SVG.
Include funzionalità specifiche SVG come la possibilità di controllare le impostazioni della finestra di visualizzazione, l'allineamento degli oggetti rispetto alla casella di visualizzazione e il preserveAspectRatio impostazione: non è necessario approfondire il codice dei file SVG dopo l'esportazione. E, naturalmente, poiché stai progettando nel browser, vedrai i tuoi SVG esattamente come appariranno quando verranno distribuiti sul Web.
Se SVG è il tuo gioco, in particolare per il web, sicuramente scopri cosa BoxySVG ha da offrire.
Wireframing è una categoria in cui l'attuale selezione basata su browser potrebbe effettivamente essere più efficace delle offerte desktop. Può essere utile che il wireframing non richieda risorse e la richiesta di wireframe accessibili online sia forte a causa della frequente necessità di collaborazione durante la fase di pianificazione del progetto.
Scopri quattro delle principali app wireframing basate su browser disponibili in questo momento, in nessun ordine particolare.
È probabile che MockFlow sia particolarmente piacevole per molti web designer, grazie al fatto che ha trascinato componenti pronti per Bootstrap, Material Design, Foundation, KendoUI e una serie di altri framework popolari. Come visto nell'immagine sopra, tutti i componenti della struttura familiare sono pronti per l'uso, qualcosa che potrebbe essere incredibilmente utile per la prototipazione rapida se il tuo framework preferito è nella lista delle inclusioni di MockFlow.
Quando si utilizza MockFlow per creare un wireframe per un progetto basato su framework, il risultato finale sarà molto simile a quello del prodotto finito, mentre il wireframe manterrà la capacità di modifiche e iterazioni rapide. Per impostazione predefinita, il tema dei componenti è vaniglia, ma ogni componente può avere il proprio colore, dimensione, caratteri e così via personalizzato in base alle esigenze.
Per il wireframing focalizzato sul web design, specialmente se si utilizza un framework, MockFlow ha molto da offrire.
Balsamiq è un'applicazione di wireframing basata su cloud che è semplice e abbastanza intuitiva da usare. Nella parte superiore dello schermo c'è una visualizzazione visiva di componenti che rappresentano cose come dispositivi, immagini, intestazioni, paragrafi, elementi del modulo e così via. Trascina e rilasciali sullo schermo per formare il tuo wireframe. Puoi anche approfondire ulteriormente le sottocategorie per aiutarti a trovare i componenti che stai cercando.
Lo stile dei componenti è abbastanza statico, con la maggior parte degli oggetti disegnati a mano. La homepage di Balsamiq dice: "Sembrano volutamente degli schizzi! Incoraggia il brainstorming ". Questo focus sul brainstorming si lega ai sistemi di collaborazione che consentono la condivisione tra i membri del team, rendendo Balsamiq più a suo agio abbastanza presto nel processo di pianificazione di un progetto.
Se hai una squadra considerevole e hai bisogno di scambiare idee tra diverse persone prima di affondare i denti in un disegno, Balsamiq potrebbe essere l'app per te.
Mockingbird è in qualche modo simile a Balsamiq in quanto ti viene presentata una selezione di componenti standardizzati pronti per essere trascinati nel tuo wireframe, come pulsanti, immagini, banner pubblicitari, intestazioni e così via. È possibile creare più pagine e i collegamenti di lavoro in tempo reale consentono di navigare da modello a prototipo mentre si verifica l'interfaccia utente o si mostra al team o ai clienti in giro.
La collaborazione può essere fatta in tempo reale; basta condividere un link con il tuo collega o cliente e saranno in grado di comunicare cambiamenti e suggerimenti sul posto.
Se il tuo primo bisogno è una comunicazione efficace con le persone che sono fuori sede, dai un'occhiata a Mockingbird.
Wireframe.cc è qualcosa di uno spartano e minimalista strumento di wireframe che non ha le campane e i fischi delle altre nostre tre applicazioni. Tuttavia è anche l'unico completamente gratuito.
I componenti che hai a disposizione sono fondamentalmente solo rettangoli con angoli rotondi o quadrati, ellissi e segnaposto per immagini e testo. Puoi scegliere tra i colori arancione, nero, bianco e alcune sfumature di grigio. Oltre a queste funzionalità sono disponibili anche alcuni strumenti di raggruppamento e allineamento e la possibilità di aggiungere annotazioni.
Wireframe.cc è volutamente scarso e, a volte, quando hai bisogno di far cadere alcune idee velocemente, è esattamente ciò di cui hai bisogno. Non c'è alcuna paralisi da analisi qui, solo andando dritto al lavoro.
Gli odierni redattori WYSIWYG in qualche modo riempiono il ruolo dei programmi di visual design come Dreamweaver e Frontpage, ma in molti altri modi hanno progredito ben oltre i loro predecessori. Possono ancora aiutare i nuovi web designer a imparare le corde, ma possono anche essere enormi risparmiatori di tempo in progetti avanzati se usati da mani esperte.
Diamo uno sguardo più da vicino a due delle più popolari applicazioni di progettazione web basate su browser WYSIWYG.
Webflow è un ottimo lavoro per essere utile sia ai veterinari del web design sia ai principianti. Ciò è dovuto al fatto che mentre tutto può essere fatto visivamente, si sta ancora lavorando con tutte le stesse cose a cui sei abituato quando si scrive a mano.
Aggiungerai div e elementi semantici, creerai le classi CSS, avrai bisogno di sapere come funziona il posizionamento assoluto e relativo e sarai responsabile della creazione di reattività dei tuoi siti. Non c'è un cieco volante qui, prima o poi dovrai imparare cosa succede dietro le quinte. Tutto ciò che fa Webflow è un'interfaccia visiva sulle tecniche di progettazione web che altrimenti dovresti fare manualmente.
Per i principianti del web design, questo può fare molto per aiutare con il processo di apprendimento. Vedere le tue modifiche entrare in vigore in tempo reale può fare molto. Per i veterani, Webflow è un ottimo strumento di prototipazione. Potresti comunque preferire scrivere il tuo codice, ma Webflow ti consente di muoverti molto più velocemente quando esegui l'hashing del tuo progetto. L'ho usato personalmente in combinazione con la codifica manuale per rispettare scadenze ravvicinate in più di un'occasione.
Quindi, se sei un principiante web designer che cerca di appianare la curva di apprendimento, o una vecchia mano che cerca di risparmiare tempo, vale la pena esaminare Webflow.
Laddove Webflow è un'interfaccia visiva rispetto alle normali tecniche di progettazione Web, Froont è decisamente finalizzato a cercare di occuparsi di quanti più punti del processo di progettazione possibile per creare un processo di progettazione intuitivo e rapido per i principianti.
Piuttosto che aggiungere div, o testo o immagini, dovrai aggiungere intere sezioni di un sito alla volta. Potresti inserire una barra di navigazione, un'unità di eroi, una sezione di contenuti, alcuni pannelli di prezzi, un piè di pagina e questo è un involucro. Froont ha anche una vasta selezione di modelli, denominati "Progetti", che puoi clonare per iniziare il tuo progetto di design se dovessi scegliere.
Detto questo, quasi tutto è modificabile una volta che è sulla pagina - basta attivare Modalità esperto per regolare cose come margini e allineamento.
Se sei appena iniziato nel web design o hai bisogno di un processo che miri ad essere il più vivavoce possibile, Froont potrebbe essere proprio il tuo vicolo.
Trovare un editor di codice basato su web completo è ancora un po 'complicato. Ci sono parecchi editori basati sul web, ma se stai cercando qualcosa con il tipo di funzioni a cui sei abituato dal tuo editor di codice desktop preferito, non tutte le opzioni saranno adatte.
Detto questo, ecco due editor che si distinguono dal pacchetto e potrebbero essere molto utili per la codifica on the go.
Caret è uno dei pochi editor di codice basati su Web con cui è possibile aprire un file locale. Questo è probabilmente dovuto al fatto che si installa, tramite il web store di Chrome, come un'applicazione normale e funziona offline. Otterrai un'icona di collegamento sul desktop e verrà eseguita senza cromo del browser.
L'elenco delle caratteristiche è piuttosto impressionante, in particolare nel mezzo di un panorama di modifica del codice basato su browser un po 'sterile. Caret ha evidenziazione della sintassi, temi, cursori multipli, una palette di comandi, gestione del progetto, supporto per i plug-in e un file di impostazioni "user.json" completo e liberamente configurabile.
Non solo è privo di Caret, ma è anche open source con licenza GPLv2. Installalo dal Chrome Web Store oppure, se preferisci, puoi clonare il repository e gestire manualmente l'installazione.
Se hai bisogno di un editor di codice che possa andare ovunque, e in particolare se sei un dev in movimento con un dispositivo ChromeOS, Caret potrebbe essere proprio quello di cui hai bisogno.
CodeAnywhere non consente di aprire file locali, ma ciò che fa è collegarsi rapidamente e facilmente con un provider di archiviazione di terze parti come GitHub, BitBucket, Dropbox o un server FTP, sul quale si trovano i file. Quindi, se stai già spingendo il tuo codice allo storage esterno alla fine della giornata, questo può rendere quel processo un po 'più agevole.
CodeAnywhere ha l'evidenziazione della sintassi per settantacinque lingue, ha quattro temi e otto combinazioni di colori tra cui scegliere, offre completamento del codice, linting e cursori multipli. Ha anche un terminale integrato, strumenti di collaborazione e cronologia delle revisioni salvate.
Una caratteristica particolarmente interessante è il servizio "Containers", che è un ambiente basato su cloud con CentOS o Ubuntu e preconfigurato per WordPress, NodeJS, Ruby e altri.
Se stai cercando un modo semplice per lavorare sui tuoi progetti ospitati esternamente, o se l'idea di "Contenitori" suona come se potesse rendere i tuoi progetti più fluidi, dai un'occhiata a CodeAnywhere.
L'intervallo per i photo editor basati su browser è un po 'più scarso rispetto alle altre categorie, il che non sorprende al momento dato che il fotoritocco è probabilmente il più ricco di risorse e difficile da ottenere senza la potenza del desktop.
Abbiamo tre editor capaci tra cui scegliere, tuttavia due di essi (Pixlr e SumoPaint) richiedono Flash, quindi se è passato un po 'di tempo dall'ultima volta che Flash è stato attivato sulla tua macchina, dovrai ridurlo di nuovo in polvere per poterlo utilizzare. questi due.
In questa nota, se si desidera abilitare Flash, ma solo per app specifiche, in Chrome vai a chrome: // settings / content / Flash, quindi aggiungi l'URL dell'app all'elenco dei siti consentiti.
Polarr lo fa non ha bisogno di Flash ed è un'applicazione di fotoritocco che ti consente di ottenere rapidamente immagini dall'aspetto spugnoso e pronte per l'uso nel contenuto dei tuoi siti. Rende l'aggiunta di filtri dall'aspetto professionale a un semplice clic, ci sono illuminazione e controlli del colore in profondità e puoi ritagliare, capovolgere, ruotare e ridimensionare a piacere.
Ha persino una funzione "Auto enhance" che analizzerà l'immagine e la farà salire senza alzare un dito.
Polarr è gratuito, ma hai la possibilità di acquistare degli extra "Pro" se lo desideri, come uno strumento di testo, un dispositivo di rimozione dei rumori, un set di filtri di ritratto, un set di filtri di paesaggio, tra gli altri. L'intera collezione di strumenti "Pro" costa $ 19,99
Se il tuo obiettivo principale è quello di ottenere foto che sembrano grandi per la pubblicazione online, Polarr è uno strumento fantastico per fare quel lavoro.
Pixlr è in circolazione da parecchio tempo. Nel corso della giornata, se non avessi accesso a Photoshop questo è quello che userei, ed è quello che ho consigliato alle persone che volevano fare il ritocco delle immagini ma non potevano giustificare un acquisto di software.
Pixlr ha gli strumenti che ti aspetteresti di trovare in un'applicazione raster desktop, come matita, pennello, gomma, secchio, gradiente, timbro clone, disegno di forme base, testo, sfocatura, nitidezza, sfumatura, schivata, bruciatura e così via. Ha un semplice sistema di stile di livello che include ombra esterna, ombra interna, smusso, bagliore esterno e bagliore interno. E ha un elenco completo di filtri e regolazioni, basti ricordare che queste funzioni sono non non distruttivo.
Puoi utilizzare Pixlr per il design, l'arte a mano libera e il ritocco e la modifica delle foto. Se hai bisogno di un software basato sul web con più strumenti desktop di Polarr, Pixlr potrebbe semplicemente colmare questa lacuna per te.
SumoPaint è molto simile a Pixlr e si riferisce alla stessa epoca. Ha anche il tipo di strumenti che ti aspetteresti di trovare in un editor raster desktop, oltre a una forte selezione di filtri e regolazioni.
Tuttavia, SumoPaint ha strumenti di creazione di forme più avanzate, come stelle, torte e così via. Inoltre, ha uno strumento di disegno di simmetria e un utile strumento di trasformazione gratuito. Ha anche alcuni stili di livello extra: sovrapposizione di colore, tratto, smusso gradiente e bagliore gradiente.
Nel complesso, Pixlr e SumoPaint sono molto simili e ricoprono essenzialmente lo stesso ruolo, quindi se stai cercando un'applicazione basata su browser di questa natura, la cosa migliore che puoi fare è dare una prova e vedere quale ti piace di più.
Con questo concludiamo il nostro 2018 lo stato attuale del software basato su browser per i web designer.
In sintesi:
Come nota per il futuro delle applicazioni basate su browser, tenete d'occhio l'ascesa di WebAssembly, una tecnologia emergente che consentirà anche a software intensivi come i video editor di funzionare con prestazioni quasi native. Questo potrebbe davvero scuotere le cose!
Nel frattempo, i tuoi viaggi e i tuoi dispositivi ultra portatili possono essere più produttivi grazie ad alcune delle applicazioni di questo elenco!
Accentsconagua