Ara er en av en ny rase av webdesignverktøy. Det er en av de første designapplikasjonene som er i stand til å generere ren kode, og er godkjent av en rekke industristall.

Nå bygger teamet bak Macaw på suksessen til sitt første produkt å forberede seg på å lansere et annet verktøy som heter Scarlet , med en radikal ny arbeidsflyt og en rekke nye funksjoner.

Scarlet lover å levere mer enn Macaw: Ifølge teamet er det et "live design miljø", og det kan være et revolusjonerende skritt i designapplikasjonens historie.

Vi fanget opp med Macaws Tom Giannattasio, for å spørre ham hva vi kan forvente fra deres nyeste prosjekt ...

Webdesigner Depot: Når du først bestemte deg for å bygge Macaw, hva var det som overbeviste deg om at eksisterende verktøy ikke var gode nok?

Tom Giannattasio: Jeg tror ikke at verktøyene våre noen gang har truffet merket. Jeg lærte webdesign tilbake i dagene i Geocities-tekstområdet. Det var en elendig tilbakemelding loop-type noen HTML, hit oppdatering, vent på siden for å laste om igjen, skjønner at du savnet en lukkekonsoll, prøv igjen. Til slutt steg Photoshop som en overlegen måte å designe for Internett og bransjen delt inn i de som gjorde design og de som gjorde utvikling.

Responsiv design hjalp oss med å innse at vi ikke kan behandle nettet som om det var et fast, todimensjonalt plan

Jeg tror vi opplever nå en sammenkobling av disse to disipliner. Responsiv design hjalp oss med å innse at vi ikke kan behandle nettet som om det var et fast, todimensjonalt plan og designere nå ser etter nye måter å jobbe på. Mange av dem har gått tilbake til en tekstredigerer slik at de kan jobbe direkte med mediet. Det er kjempebra, men jeg føler at vi er tilbake i Geocities dager igjen. Jeg vil presse ting fremover. Jeg vil ha et verktøy som lar meg jobbe direkte med nettet på en måte som er visuell og intuitiv. Derfor begynte jeg Macaw.

WD: Hvorfor Scarlet, og ikke Macaw 2.0?

TG: Ærlig talt trodde vi ikke at det ville være rettferdig for brukerne å ringe Scarlet en versjon 2. Scarlet er ikke en ompakket versjon 1 med noen få ekstra funksjoner sprinklet på toppen. Det er en helt annen applikasjon med en reimagined arbeidsflyt. Den ble bygget fra grunnen av med en ny arkitektur og massevis av nye funksjoner. Vi ser en fremtid hvor de to programmene jobber sammen for å imøtekomme de varierende behovene til designere og utviklere.

Vi må designe ting som agnostiker som mulig for å tillate folks preferanser å skinne gjennom

WD: Workflow er et av de mest omstridte problemene i webdesign, fordi det har en så stor innvirkning på sluttproduktet; hvordan kom du til arbeidsflyten i Scarlet?

TG: Definere arbeidsflyt for en app som er laget for å bli brukt i flere timer, er en vanskelig oppgave. Du må gi nok råd til å hjelpe folk opp i læringskurven, men ikke så mye at det blir i veien for en superbruker. Preference er en annen hindring. Vi må designe ting som agnostiker som mulig for å tillate folks preferanser å skinne gjennom uten å ofre hensiktene med søknaden.

Disse blant en million andre hensyn fører til en prøve-og-feil-sløyfe som driver designprosessen på Macaw. Heldigvis er vi selv designere og utviklere, så vi kan prototype og teste ideer selv og vite om de er effektive.

scarlet-001

WD: Hvor lenge har du jobbet på Scarlet?

TG: Det har vært omtrent et år nå, og jeg er virkelig ganske stolt av hva vårt lille lag har klarte å gjøre på så kort tid.

WD: Hvor stor er laget ditt? Og er Scarlet bygget av webdesignere, for webdesignere?

TG: Det er tre av oss på laget, og vi vokste opp med å designe for nettet. Vi jobbet sammen på ulike byråer - jobbet for Apple, Oracle, MIT og andre store organisasjoner - før vi begynte på Macaw.

WD: Scarlet faktureres som et "Live Design Environment", hva er et live design miljø, og hvordan er det forskjellig fra andre verktøy på markedet?

Vi har laget navnet Live Design Environment internt for å hjelpe oss med å diskutere denne nye rasen av verktøy

TG: Mange verktøy passer pent inn i en kategori: SublimeText er en tekstredigerer; Skisse er et tegneverktøy; Photoshop er et bilderedigeringsprogram. Noen av de nye verktøyene som slår på markedet, gjør det ikke. Den eneste kategorien som er like tett er WYSIWYG, og jeg kan ikke tro at det fremdeles er et uttrykk vi bruker. Det burde ha dødd sammen med FrontPage.

Vi har laget navnet Live Design Environment (LDE) internt for å hjelpe oss med å diskutere denne nye redskapsverktøyet, som ikke er eksklusivt for Macaw. Vi trodde det kunne hjelpe andre i differensiering, så vi bestemte oss for å dele det.

For oss er et levende designmiljø i utgangspunktet legemliggjort to hovedaspekter:

  1. En levende designflate. Dette skiller egentlig disse verktøyene fra noe som Photoshop. De lar deg jobbe med et faktisk nettleservisport, men de lar deg designe uten å skrive kode. Dette er lik i ånd til den tradisjonelle WYSIWYG med unntak av nøkkelaspekt nummer to ...
  2. En intelligent kodemotor. Sterk webdesign krever mer enn valg av form, farge og type. Den trenger godt konstruert, godt skrevet kode for å gjøre det designarbeidet. Vi tror at beslutningene skal gjøres av designere, men de trenger ikke å være håndskrevne. Tradisjonelle WYSIWYG-redaktører leverer absolutt posisjonering, tilfeldige IDer og bare ren søppel, men denne nye rasen med verktøy har funnet måter å forbedre arbeidsflyten for å gi deg sterk, brukbar kode. Det er en stor avtale.

WD: Du snakker om standard-kompatibel, semantisk kode? Det er lett å forestille seg et grunnleggende bloggsted - hvor du har en etablert struktur og et enkelt hierarki - men kan Scarlet håndtere mer enn det, en bedriftsbrosjyre eller til og med et e-handelsområde, for eksempel?

TG: Scarlet er akkurat nå fokusert på klientsiden av ting (HTML, CSS og JS). Det er ikke en løs løsning for e-handel, og det håndterer ikke noe på serverens side. Scarlet er heller ikke en magisk boks som lar deg kaste ideer til den ene siden og få brukbar kode ut den andre. Det er et finjustert instrument som hjelper deg med å få akkurat den koden du vil ha på en måte som er raskere, mer konsistent og mer intuitiv enn håndkoding.

scarlet-002

WD: Scarlet gir full tilgang til koden den sender ut, og vi kan til og med redigere utgitte filer i vår foretrukne kodeditor. Betyr dette at vi må være HTML / CSS / JavaScript-eksperter for å gjøre bruk av Scarlet?

TG: Arbeidsflyten er tilpasset for at proffene skal gjøre arbeidet raskere og mer intuitivt. Du kan sikkert bruke Scarlet uten sterk kunnskap om HTML og CSS, men du vil ikke kunne høste fordelene fullt ut. Utgangen din vil være lik innspillet ditt.

WD: Full CSS3-støtte er innebygd i Scarlet, hva med CSS4? Vil det visuelle designaspektet av Scarlet holde tritt med fremtidige utviklinger i HTML og CSS?

TG: Det er sikkert vanskelig å holde fast på raske fremskritt. Når vi bestemte oss for å bygge Scarlet, var fremtidssikring en av hovedhensynene. Kjernen i appen er bygget abstrakt nok til at alt vi virkelig trenger å gjøre for å legge til nye funksjoner, er koble til et brukergrensesnitt til det. Så lenge de grunnleggende prinsippene for HTML og CSS forblir intakte, bør vi være i orden med fremdriften.

WD: Hvordan håndterer Scarlet pre-prosessorer som Sass eller Less? Hva med postprosessorer?

TG: Det gjør det ikke akkurat nå. Vi vet at det er en mye etterspurt funksjon. Arkitekturen er på plass, men vi er et lite lag og har ikke hatt tid til å bygge den ennå!

WD: Fungerer Scarlet med rammer som Bootstrap eller Foundation?

TG: Ja. Vi har imidlertid gjort vårt beste for å forbli agnostiker når det gjelder kjernebrukergrensesnittet. Du vil ikke finne noen Bootstrap eller Foundation spesifikke funksjoner rett utenfor flaggermus, selv om vi har noen planer på disse områdene.

WD: Scarlet er en desktop app, til tross for å være bygget med HTML, CSS og JavaScript. Hvorfor valgte du den ruten over webapp-alternativet?

Dette er en overlegen arbeidsflyt for responsiv design og vil ikke være mulig uten hybrid-tilnærmingen

TG: Vi startet som en webapp, men ble raskt klar over at det var flere fordeler med å gå hybrid. Den viktigste grunnen var UX. Å ha kontroll over miljølaget lar oss virkelig optimalisere opplevelsen. Forbrukerbrowsere er designet for uformell bruk. Scarlet er en app vi vil ha folk til å bruke hele dagen, og det er ideelt hvis vi fjerner alt cruft som følger med opplevelsen til nettleseren.

I tillegg til å gi oss full integrasjon med filsystemet, lar hybrid oss ​​også tilby funksjoner som parallelle nettlesere, som lar deg åpne flere sider og flere bruddpunkter samtidig, og Scarlet vil forplante DOM og stilen endres umiddelbart til alle visninger. Dette er en overlegen arbeidsflyt for responsiv design og vil ikke være mulig uten hybrid-tilnærmingen.

scarlet-003

WD: Scarlet har en forhåndsvisning av forhåndsvisning, stole den på apper (som Adobe's Edge Inspect)?

TG: Nei. Vi er ikke store fans av unødvendige apps. Vi sender dine faktiske filer på nettverket ditt, slik at du kan navigere i hvilken som helst nettleser på en hvilken som helst enhet til forhåndsvisningsadressen til fjernkontrollen og der den er.

WD: Er Scarlet rettet mot individuelle designere eller lag? Har det en arbeidsflyt som letter samarbeidet?

TG: Vi har nærmet seg Scarlet som en plattform. Kjernen i søknaden handler om å gi en solid design arbeidsflyt. Arkitekturen er imidlertid utformet for å være utvidbar, slik at lag kan bøye seg for å møte deres individuelle behov. Vi har noen ganske spennende funksjoner på veikartet som utøver den utvidbarheten.

WD: Du lanserer på Mac først, etterfulgt av Windows. Er det en forretningsbeslutning eller en teknisk beslutning?

TG: Det er en oppstartsbeslutning. Vi har begrensede ressurser, og vi vet at den største delen av publikum er på Mac, så det er det vi bygger først.

Windows vil ikke være langt bak, skjønt. Fordi 95% av applikasjonen er bygget med JS, er konverteringsplattformer ganske smertefri.

WD: Til slutt, hvor lenge må vi vente å prøve ut det selv?

TG: Vi tar sikte på å få det i alles hender innen årets slutt!

WD: Takk for at du tok deg tid til å svare på spørsmålene våre Tom.