Intervista: Tom Giannattasio di Macaw parla di ambienti Scarlet, Workflow e Live Design
ara è uno di una nuova generazione di strumenti di web design. È una delle prime applicazioni di progettazione in grado di generare codice pulito ed è supportata da numerose figure del settore.
Ora, basandosi sul successo del loro primo prodotto, il team di Macaw si sta preparando a lanciare un secondo strumento chiamato Scarlatto , con un nuovo flusso di lavoro radicale e una serie di nuove funzionalità.
Scarlet promette di offrire più di Macaw: secondo il team, è un "live design environment" e potrebbe essere un passo rivoluzionario nella storia delle applicazioni di design.
Abbiamo incontrato Tom Giannattasio di Macaw per chiedergli cosa possiamo aspettarci dal loro ultimo progetto ...
Webdesigner Depot: Quando hai deciso per la prima volta di costruire Macaw, cosa ti ha convinto che gli strumenti esistenti non erano abbastanza buoni?
Tom Giannattasio: Non penso che i nostri strumenti abbiano mai veramente colpito nel segno. Ho appreso il web design ai tempi dell'area di testo di Geocities. E 'stato un misero feedback loop-digitare un po' di codice HTML, premere refresh, attendere il caricamento della pagina, rendersi conto di aver perso una parentesi di chiusura, riprovare. Alla fine Photoshop è diventato un modo eccellente di progettare per il Web e l'industria si è divisa in coloro che hanno progettato e coloro che hanno fatto lo sviluppo.
La progettazione reattiva ci ha aiutato a capire che non possiamo trattare il web come se fosse un piano bidimensionale fisso
Credo che ora stiamo sperimentando una riconnessione di queste due discipline. La progettazione reattiva ci ha aiutato a capire che non possiamo trattare il web come se fosse un piano bidimensionale fisso ei designer ora stanno cercando nuovi modi di lavorare. Molti di loro sono tornati a un editor di testo in modo che possano lavorare direttamente con il mezzo. È fantastico, ma mi sembra di essere di nuovo nei giorni di Geocities. Voglio spingere le cose avanti. Voglio uno strumento che mi permetta di lavorare direttamente con il web in modo visivo e intuitivo. Ecco perché ho iniziato a Macaw.
WD: Perché Scarlet, e non Macaw 2.0?
TG: Onestamente, non pensavamo sarebbe giusto che gli utenti chiamassero Scarlet una versione 2. Scarlet non è una versione riconfezionata 1 con alcune funzionalità aggiuntive sparse sopra. È un'applicazione completamente diversa con un flusso di lavoro reimmaginato. È stato costruito da zero con una nuova architettura e un sacco di nuove funzionalità. Vediamo un futuro in cui le due applicazioni interagiscono per soddisfare le diverse esigenze di progettisti e sviluppatori.
Dobbiamo progettare le cose in modo più agnostico possibile per far trasparire le preferenze delle persone
WD: Il flusso di lavoro è uno dei problemi più controversi nel web design, perché ha un impatto così grande sul prodotto finale; come sei arrivato al flusso di lavoro in Scarlet?
TG: Definire un flusso di lavoro per un'app realizzata per essere utilizzata per ore e ore è un'impresa difficile. Devi fornire abbastanza spazio per aiutare le persone a migliorare la curva di apprendimento, ma non così tanto da intralciare un superutente. La preferenza è un altro ostacolo. Dobbiamo progettare le cose in modo più agnostico possibile per far trasparire le preferenze delle persone senza sacrificare le intenzioni dell'applicazione.
Queste tra un milione di altre considerazioni portano a un ciclo di tentativi ed errori che guida il processo di progettazione su Macaw. Fortunatamente, siamo noi stessi designer e sviluppatori, quindi possiamo prototipare e testare le idee da soli e sapere se sono efficaci.
WD: Da quanto tempo lavori a Scarlet?
TG: È passato circa un anno e sono davvero molto orgoglioso di quello che il nostro piccolo team è stato in grado di fare in così poco tempo.
WD: Quanto è grande la tua squadra? Ed è Scarlet costruito dai web designer, per i web designer?
TG: Siamo in tre e siamo cresciuti progettando per il web. Abbiamo lavorato insieme a diverse agenzie, lavorando per Apple, Oracle, MIT e altre importanti organizzazioni, prima di unirsi a Macaw.
WD: Scarlet si presenta come un "Live Design Environment", che cos'è un ambiente di progettazione live e in che cosa differisce dagli altri strumenti sul mercato?
Abbiamo coniato internamente il nome Live Design Environment per aiutarci a discutere di questo nuovo tipo di strumento
TG: Un sacco di strumenti si adattano bene a una categoria: SublimeText è un editor di testo; Sketch è uno strumento di disegno; Photoshop è un editor di immagini. Alcuni dei nuovi strumenti che colpiscono il mercato non lo fanno. L'unica categoria che è ancora vicina è WYSIWYG e non posso credere che sia ancora un termine che usiamo. Dovrebbe essere morto insieme a FrontPage.
Abbiamo coniato internamente il nome Live Design Environment (LDE) per aiutarci a discutere di questo nuovo tipo di strumento, che non è affatto esclusivo di Macaw. Abbiamo pensato che potesse aiutare gli altri a differenziare, quindi abbiamo deciso di condividerlo.
Per noi, un Live Design Environment comprende fondamentalmente due aspetti chiave:
- Una superficie dal vivo. Questo è ciò che separa veramente questi strumenti da qualcosa come Photoshop. Ti consentono di lavorare con una finestra del browser effettiva, ma ti consentono di progettare senza dover scrivere codice. Questo è simile nello spirito al tradizionale WYSIWYG tranne che per l'aspetto chiave numero due ...
- Un motore di codice intelligente. Il forte web design richiede più delle scelte di forma, colore e tipo. Ha bisogno di un codice ben costruito e ben scritto per far funzionare quel progetto. Crediamo che queste decisioni debbano essere prese dai designer, ma non devono essere scritte a mano. Gli editor WYSIWYG tradizionali forniscono il posizionamento assoluto, gli ID casuali e la semplice spazzatura, ma questa nuova generazione di strumenti ha trovato il modo di migliorare il flusso di lavoro per fornire un codice forte e utilizzabile. Questo è un grosso problema.
WD: Stai parlando di codice semantico conforme agli standard? È facile immaginare un sito di blog di base, dove si ha una struttura consolidata e una gerarchia semplice, ma Scarlet può gestire di più, una brochure aziendale o anche un sito di e-commerce, ad esempio?
TG: Al momento, Scarlet si concentra completamente sul lato client delle cose (HTML, CSS e JS). Non è una soluzione pronta per l'e-commerce e non gestisce nulla sul lato server. Anche Scarlet non è una scatola magica che ti permette di lanciare idee su un lato e ottenere codice utilizzabile dall'altro. È uno strumento finemente sintonizzato che ti aiuta a ottenere esattamente il codice che desideri in modo più veloce, coerente e intuitivo rispetto alla codifica manuale.
WD: Scarlet fornisce pieno accesso al codice che emette e possiamo anche modificare i suoi file in uscita nel nostro editor di codice preferito. Questo significa che dobbiamo essere esperti HTML / CSS / JavaScript per utilizzare Scarlet?
TG: il flusso di lavoro è ottimizzato per aiutare i professionisti a svolgere il loro lavoro più velocemente e in modo più intuitivo. Puoi certamente usare Scarlet senza una forte conoscenza di HTML e CSS, ma non sarai in grado di sfruttarne appieno i benefici. Il tuo risultato sarà uguale al tuo input.
WD: Il supporto completo per CSS3 è incorporato in Scarlet, che ne dici di CSS4? L'aspetto visivo di Scarlet manterrà il passo con gli sviluppi futuri in HTML e CSS?
TG: stare al passo con rapidi progressi è certamente difficile. Quando abbiamo deciso di costruire Scarlet, l'impermeabilità al futuro è stata una delle principali considerazioni. Il nucleo dell'app è costruito in modo astratto abbastanza che tutto ciò che dobbiamo veramente fare per aggiungere nuove funzionalità è collegarci un'interfaccia utente. Finché i principi di base di HTML e CSS rimarranno intatti, dovremmo andare avanti con i progressi.
WD: In che modo Scarlet gestisce i pre-processori come Sass o Less? Che ne dici di post-processori?
TG: Al momento no. Sappiamo che è una caratteristica molto ricercata. L'architettura è a posto, ma siamo una piccola squadra e non abbiamo ancora avuto il tempo di costruirla!
WD: Scarlet funziona con framework come Bootstrap o Foundation?
TG: Sì. Tuttavia, abbiamo fatto del nostro meglio per rimanere agnostici quando si tratta dell'interfaccia utente principale. Non troverai subito nessuna funzionalità specifica di Bootstrap o di Foundation, anche se abbiamo qualche piano in quelle aree.
WD: Scarlet è un'app desktop, nonostante sia costruita con HTML, CSS e JavaScript. Perché hai scelto quel percorso attraverso l'opzione web app?
Questo è un flusso di lavoro superiore per la progettazione reattiva e semplicemente non sarebbe possibile senza l'approccio ibrido
TG: Abbiamo iniziato come un'app Web, ma ci siamo resi subito conto che c'erano più vantaggi nell'andare in modalità ibrida. Il motivo più importante era UX. Avere il controllo del livello dell'ambiente ci consente di ottimizzare davvero l'esperienza. I browser consumer sono progettati per un uso casuale. Scarlet è un'app che vogliamo che le persone utilizzino tutto il giorno ed è l'ideale se rimuoviamo tutto il cruft che viene fornito con l'esperienza del browser del consumatore.
Oltre a darci piena integrazione con il file system, andando ibrido ci consente anche di offrire funzionalità come browser paralleli, che ti permette di aprire più pagine e più punti di interruzione contemporaneamente e Scarlet propagherà DOM e cambi di stile immediatamente a tutte le visualizzazioni. Questo è un flusso di lavoro superiore per la progettazione reattiva e semplicemente non sarebbe possibile senza l'approccio ibrido.
WD: Scarlet presenta un'anteprima remota, si basa su app (come Edge Inspect di Adobe)?
TG: No. Non siamo grandi fan delle app non necessarie. Trasmettiamo i tuoi file effettivi sulla tua rete in modo da poter navigare su qualsiasi browser su qualsiasi dispositivo fino all'URL di anteprima remoto ed eccolo lì.
WD: Scarlet è rivolto a singoli designer o team? Ha un flusso di lavoro che facilita la collaborazione?
TG: Ci siamo avvicinati a Scarlet come piattaforma. Il nucleo dell'applicazione consiste nel fornire un solido flusso di lavoro di progettazione. Tuttavia, l'architettura è progettata per essere estensibile, in modo che i team possano piegarla per soddisfare le loro esigenze individuali. Abbiamo alcune caratteristiche piuttosto interessanti sulla tabella di marcia che esercitano tale estensibilità.
WD: stai per prima cosa su Mac, seguito da Windows. È una decisione commerciale o una decisione tecnica?
TG: È una decisione di avvio. Abbiamo risorse limitate e sappiamo che la maggior parte del nostro pubblico è su Mac, quindi è quello che stiamo costruendo per primi.
Windows non sarà molto indietro, però. Poiché il 95% dell'applicazione è costruita con JS, la conversione delle piattaforme è abbastanza semplice.
WD: Infine, quanto dobbiamo aspettare per provarci da soli?
TG: Puntiamo ad averlo nelle mani di tutti entro la fine dell'anno!
WD: Grazie per aver trovato il tempo di rispondere alle nostre domande Tom.