Macaw er en af ​​en ny race af webdesign værktøjer. Det er et af de første designapplikationer, der er i stand til at generere ren kode, og er godkendt af talrige industrielle tal.

Nu bygger teamet bag Macaw på succes med deres første produkt at forberede sig på at lancere et andet værktøj, der hedder rød , med en radikal ny arbejdsgang og en lang række nye funktioner.

Scarlet lover at levere mere end Macaw: Ifølge teamet er det et "live design miljø", og det kan være et revolutionerende skridt i designapplikationens historie.

Vi fangede op med Macaws Tom Giannattasio, for at spørge ham, hvad vi kan forvente af deres nyeste projekt ...

Webdesigner Depot: Når du først besluttede at bygge Macaw, hvad var det der overbeviste dig om, at eksisterende værktøjer ikke var gode nok?

Tom Giannattasio: Jeg tror ikke, at vores værktøjer nogensinde har ramt mærket. Jeg lærte webdesign tilbage i dagene i Geocities-tekstområdet. Det var en elendig feedback-loop-type, nogle HTML, hit opdatering, vent på siden for at genindlæse, indse, at du savnede en lukkekonsol, prøv igen. Til sidst steg Photoshop som en overlegen måde at designe for internettet, og industrien splittede sig i dem, der gjorde design og dem, der gjorde udvikling.

Responsivt design hjalp os med at indse, at vi ikke kan behandle internettet som om det var et fast, todimensionelt plan

Jeg tror, ​​at vi nu oplever en genopkobling af disse to discipliner. Responsivt design hjalp os med at indse, at vi ikke kan behandle internettet som om det var et fast, todimensionelt plan, og designere søger nu nye måder at arbejde på. Mange af dem er vendt tilbage til en teksteditor, så de kan arbejde direkte med mediet. Det er fantastisk, men jeg har lyst til, at vi er tilbage i Geocities dage igen. Jeg vil skubbe tingene fremad. Jeg vil have et værktøj, der gør mig i stand til at arbejde direkte med internettet på en måde, der er visuel og intuitiv. Derfor begyndte jeg Macaw.

WD: Hvorfor Scarlet, og ikke Macaw 2.0?

TG: Ærligt, vi troede ikke, det ville være rimeligt for brugerne at kalde Scarlet en version 2. Scarlet er ikke en ompakket version 1 med et par ekstra funktioner sprinklet ovenpå. Det er en helt anden applikation med en reimagined workflow. Det blev bygget fra bunden med en ny arkitektur og masser af nye funktioner. Vi ser en fremtid, hvor de to applikationer arbejder sammen for at imødekomme de forskellige behov hos designere og udviklere.

Vi skal designe ting som agnostiker som muligt for at give folks præferencer mulighed for at skinne igennem

WD: Workflow er et af de mest omstridte spørgsmål i webdesign, fordi det har så stor indflydelse på slutproduktet; hvordan kom du til workflow i scarlet?

TG: Definere arbejdsgang for en app, der er lavet til brug i timevis, er en vanskelig indsats. Du skal give nok penge til at hjælpe folk op med læringskurven, men ikke så meget, at det kommer i vejen for en superbruger. Præference er en anden forhindring. Vi er nødt til at designe ting som agnostiker som muligt for at give folks præferencer mulighed for at skinne igennem uden at ofre hensigten med ansøgningen.

Disse blandt en million andre overvejelser fører til en trial-and-error loop, der driver designprocessen hos Macaw. Heldigvis er vi designere og udviklere selv, så vi kan prototype og teste ideer os selv og vide, om de er effektive.

scarlet-001

WD: Hvor længe har du arbejdet på Scarlet?

TG: Det har været omkring et år nu, og jeg er virkelig rigtig stolt af, hvad vores lille team har været i stand til at gøre i så kort tid.

WD: Hvor stor er dit hold? Og er Scarlet bygget af webdesignere til webdesignere?

TG: Der er tre af os på holdet, og vi alle voksede op med at designe til internettet. Vi arbejdede sammen på forskellige bureauer - laver arbejde for Apple, Oracle, MIT og andre større organisationer - inden vi tiltrådte Macaw.

WD: Scarlet faktureres som et "Live Design Environment", hvad er et live design miljø, og hvordan adskiller det sig fra andre værktøjer på markedet?

Vi har udarbejdet navnet Live Design Environment internt for at hjælpe os med at diskutere denne nye slags værktøj

TG: Mange værktøjer passer fint ind i en kategori: SublimeText er et tekstredigeringsprogram; Skitse er et tegneværktøj; Photoshop er et billedredaktør. Nogle af de nye værktøjer, der rammer markedet, gør det ikke. Den eneste kategori, der er lige tæt på, er WYSIWYG, og jeg kan ikke tro, at det stadig er et udtryk, vi bruger. Det skulle have døde sammen med FrontPage.

Vi har udarbejdet navnet Live Design Environment (LDE) internt for at hjælpe os med at diskutere denne nye slags værktøj, som slet ikke er eksklusiv til Macaw. Vi troede det kunne hjælpe andre med at differentiere, så vi besluttede at dele det.

For os er et Live Design Environment grundlæggende indbygget i to centrale aspekter:

  1. En levende designflade. Dette er, hvad der virkelig adskiller disse værktøjer fra noget som Photoshop. De giver dig mulighed for at arbejde med en faktisk browservisning, men de lader dig designe uden at skulle skrive kode. Dette svarer til den traditionelle WYSIWYG med undtagelse af nøgleaspekt nummer to ...
  2. En intelligent kode motor. Stærk webdesign kræver mere end valg af form, farve og type. Det har brug for godt konstrueret, velskrevet kode for at gøre det design arbejde. Vi mener, at disse beslutninger skal træffes af designere, men de behøver ikke at være håndskrevne. Traditionelle WYSIWYG-redaktører udsender absolut positionering, tilfældige id'er og bare almindelig skrald, men denne nye række værktøjer har fundet måder at forbedre arbejdsgangen til at give dig en stærk, brugbar kode. Det er en stor ting.

WD: Du taler om standard-kompatibel semantisk kode? Det er nemt at forestille sig et grundlæggende blogsted - hvor du har en etableret struktur og et simpelt hierarki - men kan Scarlet håndtere mere end det, en virksomhedsbrochure eller endda et e-handelswebsted, for eksempel?

TG: Scarlet er lige nu fokuseret helt på klientsiden af ​​ting (HTML, CSS og JS). Det er ikke en out-of-the-box-løsning til e-handel, og den håndterer ikke noget på serversiden. Scarlet er heller ikke en magisk boks, der giver dig mulighed for at kaste ideer til den ene side og få brugbar kode ud den anden. Det er et finjusteret instrument, der hjælper dig med at få præcis den kode, du ønsker på en måde, der er hurtigere, mere konsekvent og mere intuitiv end håndkodning.

scarlet-002

WD: Scarlet giver fuld adgang til den kode, den udsender, og vi kan endda redigere sine udgitte filer i vores foretrukne kode editor. Betyr det, at vi skal være HTML / CSS / JavaScript-eksperter for at gøre brug af Scarlet?

TG: Arbejdsstrømmen er honet for at hjælpe proffene gøre deres arbejde hurtigere og mere intuitivt. Du kan helt sikkert bruge Scarlet uden stærk viden om HTML og CSS, men du vil ikke være i stand til fuldt ud at høste fordelene. Din output svarer til din indtastning.

WD: Full CSS3-support er indbygget i Scarlet, hvad med CSS4? Vil det visuelle design aspekt af Scarlet holde trit med fremtidige udviklinger i HTML og CSS?

TG: Det er helt sikkert vanskeligt at holde fast i hurtige fremskridt. Da vi besluttede at bygge Scarlet, var fremtidssikring et af hovedårsagerne. Kernen i appen er bygget abstraktivt nok, at alt, hvad vi virkelig skal gøre for at tilføje nye funktioner, er tilslutte en brugerflade til den. Så længe de grundlæggende principper for HTML og CSS forbliver intakte, bør vi være i orden med at udvikle sig.

WD: Hvordan håndterer Scarlet pre-processorer som Sass eller Less? Hvad med postprocessorer?

TG: Det gør det ikke lige nu. Vi ved, at det er en meget efterspurgt funktion. Arkitekturen er på plads, men vi er et lille hold og har ikke haft tid til at bygge det endnu!

WD: Fungerer Scarlet med rammer som Bootstrap eller Foundation?

TG: Ja. Men vi har gjort vores bedste for at forblive agnostiske når det kommer til kernen brugergrænsefladen. Du vil ikke finde nogen Bootstrap eller Foundation specifikke funktioner lige uden for flagermus, selv om vi har nogle planer på disse områder.

WD: Scarlet er en desktop app, på trods af at den er bygget med HTML, CSS og JavaScript. Hvorfor valgte du den rute over webapp-indstillingen?

Dette er et overordnet arbejdsproces for responsivt design og ville simpelthen ikke være muligt uden hybrid-tilgangen

TG: Vi startede som en webapp, men blev hurtigt klar over, at der var flere fordele ved at gå hybrid. Den vigtigste årsag var UX. At have kontrol over miljølaget giver os mulighed for virkelig at optimere oplevelsen. Forbrugerbrowsere er designet til afslappet brug. Scarlet er en app, vi vil have folk til at bruge hele dagen lang, og det er ideelt, hvis vi fjerner alt det, der kommer sammen med forbrugerens browseroplevelse.

Ud over at give os fuld integration med filsystemet, giver hybrid også os mulighed for at tilbyde funktioner som parallelle browsere, som giver dig mulighed for at åbne flere sider og flere breakpoints på én gang, og Scarlet vil udbrede DOM og stil ændres øjeblikkeligt til alle visninger. Dette er et overordnet arbejdsproces for responsivt design og ville simpelthen ikke være muligt uden hybrid-tilgangen.

scarlet-003

WD: Scarlet indeholder en fjernbetjening, afhænger det af apps (som Adobe's Edge Inspect)?

TG: Nej. Vi er ikke store fans af unødvendige apps. Vi sender dine faktiske filer på dit netværk, så du kan navigere i enhver browser på en hvilken som helst enhed til den eksterne forhåndsvisningswebadresse og hvor den er.

WD: Er Scarlet rettet mod individuelle designere eller hold? Har det en arbejdsgang, der letter samarbejdet?

TG: Vi har nærmede os Scarlet som platform. Kernen i applikationen drejer sig om at levere en solid design-arbejdsgang. Arkitekturen er imidlertid designet til at være udvidelig, så hold kan bøje det for at imødekomme deres individuelle behov. Vi har nogle smukke spændende træk på køreplanen, der udøver denne udvidelighed.

WD: Du lancerer på Mac først, efterfulgt af Windows. Er det en forretningsbeslutning eller en teknisk beslutning?

TG: Det er en opstartsbeslutning. Vi har begrænsede ressourcer, og vi ved, at den største del af vores publikum er på Mac, så det er det, vi bygger først.

Windows vil dog ikke være langt bagud. Fordi 95% af applikationen er bygget med JS, er konverteringsplatforme ret smertefri.

WD: Endelig, hvor længe må vi vente med at prøve det selv?

TG: Vi tilstræber at have det i alles hænder inden årets udgang!

WD: Tak fordi du tog dig tid til at besvare vores spørgsmål Tom.