Interview: Tom Giannattasio van Macaw spreekt over Scarlet, Workflow en Live Design-omgevingen
Ara is een van een nieuw soort webontwerpprogramma's. Het is een van de eerste ontwerptoepassingen die in staat is om schone code te genereren, en wordt onderschreven door talloze industriefiguren.
Nu, voortbouwend op het succes van hun eerste product, bereidt het team achter Macaw zich voor op de lancering van een tweede tool genaamd Scharlaken , met een radicaal nieuwe workflow en een hele reeks nieuwe functies.
Scarlet belooft meer te leveren dan Macaw: volgens het team is het een "live ontwerpomgeving" en kan het een revolutionaire stap zijn in de geschiedenis van ontwerptoepassingen.
We hebben Tom Giannattasio van Macaw ingehaald om hem te vragen wat we kunnen verwachten van hun nieuwste project ...
Webdesigner Depot: wanneer u voor het eerst besloot om Macaw te bouwen, wist u dan dat de bestaande tools niet goed genoeg waren?
Tom Giannattasio: Ik denk niet dat onze tools ooit echt het doelwit zijn geworden. Ik leerde webdesign in de tijd van het tekstgebied Geocities. Het was een ellendige feedback-loop, typ wat HTML, druk op Vernieuwen, wacht tot de pagina opnieuw is geladen, realiseer je dat je een sluitingshaak hebt gemist, probeer het opnieuw. Uiteindelijk groeide Photoshop uit tot een superieure manier om te ontwerpen voor het web en splitste de industrie zich in bij degenen die wel en degenen die ontwikkeling deden ontwerpen.
Responsief ontwerp heeft ons geholpen ons te realiseren dat we het web niet kunnen behandelen alsof het een vast tweedimensionaal vlak is
Ik geloof dat we nu een herverbinding van die twee disciplines ervaren. Responsief ontwerp heeft ons geholpen ons te realiseren dat we het web niet als een vast tweedimensionaal vlak kunnen beschouwen en ontwerpers nu op zoek zijn naar nieuwe manieren om te werken. Velen van hen zijn teruggekeerd naar een teksteditor zodat ze rechtstreeks met het medium kunnen werken. Dat is geweldig, maar ik heb het gevoel dat we weer terug zijn in de Geocities-dagen. Ik wil dingen vooruit duwen. Ik wil een tool waarmee ik rechtstreeks met internet kan werken op een visuele en intuïtieve manier. Dat is waarom ik Macaw ben begonnen.
WD: Waarom Scarlet en niet Macaw 2.0?
TG: Eerlijk gezegd hebben we het niet eerlijk geacht dat gebruikers Scarlet een versie 2 noemen. Scarlet is geen opnieuw verpakte versie 1 met een paar extra functies bovenop. Het is een compleet andere toepassing met een opnieuw ontworpen werkstroom. Het werd vanaf de grond opgebouwd met een nieuwe architectuur en een hele reeks nieuwe functies. We zien een toekomst waarin de twee applicaties samenwerken om tegemoet te komen aan de uiteenlopende behoeften van ontwerpers en ontwikkelaars.
We moeten dingen zo agnostisch mogelijk ontwerpen om de voorkeuren van mensen te laten schijnen
WD: Workflow is een van de meest controversiële kwesties in webdesign, omdat het zo'n enorme impact heeft op het eindproduct; hoe ben je bij de workflow in Scarlet aangekomen?
TG: Het definiëren van een workflow voor een app die uren achtereen is gemaakt, is een lastige onderneming. Je moet voldoende mogelijkheden bieden om mensen de leercurve te helpen, maar niet zozeer dat het een supergebruiker in de weg zit. De voorkeur is een andere hindernis. We moeten dingen zo agnostisch mogelijk ontwerpen om de voorkeuren van mensen te laten schijnen zonder de intenties van de toepassing op te offeren.
Deze miljoenen andere overwegingen leiden tot een trial-and-error-lus die het ontwerpproces bij Macaw stuurt. Gelukkig zijn we zelf ontwerpers en ontwikkelaars, zodat we zelf ideeën kunnen prototypen en testen en weten of ze effectief zijn.
WD: Hoe lang werk je al aan Scarlet?
TG: Het is nu ongeveer een jaar geleden en ik ben echt best trots op wat ons kleine team in die korte tijd heeft kunnen doen.
WD: Hoe groot is je team? En is Scarlet gebouwd door webontwerpers voor webontwerpers?
TG: Er zijn drie van ons in het team en we zijn allemaal opgegroeid met ontwerpen voor het web. We werkten samen bij verschillende instanties, werkten voor Apple, Oracle, MIT en andere grote organisaties, voordat we naar Macaw gingen.
WD: Scarlet wordt gefactureerd als een 'Live Design Environment', wat is een live ontwerpomgeving en hoe verschilt deze van andere tools op de markt?
We hebben intern de naam Live Design Environment bedacht om ons te helpen dit nieuwe type gereedschap te bespreken
TG: Veel tools passen mooi in een categorie: SublimeText is een teksteditor; Sketch is een tekengereedschap; Photoshop is een afbeeldingseditor. Sommige van de nieuwe tools die de markt raken doen dat niet. De enige categorie die zelfs dichtbij is, is WYSIWYG en ik kan niet geloven dat dit nog steeds een term is die we gebruiken. Het zou samen met FrontPage moeten zijn gestorven.
We hebben intern de naam Live Design Environment (LDE) bedacht om ons te helpen dit nieuwe soort gereedschap te bespreken, dat helemaal niet exclusief is voor Macaw. We dachten dat het anderen zou kunnen helpen om te differentiëren, dus besloten we het te delen.
Voor ons belichaamt een Live Design Environment in feite twee belangrijke aspecten:
- Een levend ontwerpoppervlak. Dit scheidt deze tools echt van iets als Photoshop. Hiermee kunt u met een echt kijkvenster werken, maar ze laten u ontwerpen zonder code te hoeven schrijven. Dit is vergelijkbaar met de traditionele WYSIWYG behalve voor het belangrijkste aspect nummer twee ...
- Een intelligente code-engine. Sterk webontwerp vereist meer dan keuzes in vorm, kleur en type. Het heeft goed geconstrueerde, goed geschreven code nodig om dat ontwerp te laten werken. We zijn van mening dat die beslissingen door ontwerpers moeten worden genomen, maar dat ze niet met de hand hoeven te worden geschreven. Traditionele WYSIWYG-editors produceren absolute positionering, willekeurige ID's en gewoon rommel, maar deze nieuwe reeks gereedschappen heeft manieren gevonden om de workflow te verbeteren om u krachtige, bruikbare code te geven. Dat is een groot probleem.
WD: Je hebt het over normen-compliant, semantische code? Dat is gemakkelijk voorstelbaar voor een eenvoudige blogsite - waar u een gevestigde structuur en een eenvoudige hiërarchie hebt - maar kan Scarlet meer verwerken dan dat, een bedrijfsbrochure of zelfs een e-commercesite, bijvoorbeeld?
TG: Op dit moment richt Scarlet zich volledig op de client-side van dingen (HTML, CSS en JS). Het is geen out-of-the-box-oplossing voor e-commerce en het behandelt niets aan de serverkant. Scarlet is ook geen magische doos waarmee je ideeën naar één kant kunt gooien en bruikbare code uit de andere kunt halen. Het is een fijn afgestemd instrument dat u helpt precies die code te krijgen die u zoekt, op een manier die sneller, consistenter en intuïtiever is dan handcodering.
WD: Scarlet biedt volledige toegang tot de code die het uitvoert, en we kunnen zelfs de uitgevoerde bestanden bewerken in onze voorkeurscode-editor. Betekent dit dat we HTML / CSS / JavaScript-experts nodig hebben om gebruik te maken van Scarlet?
TG: De workflow is verbeterd om professionals te helpen hun werk sneller en intuïtiever te doen. Je kunt Scarlet zeker gebruiken zonder sterke kennis van HTML en CSS, maar je zult niet ten volle kunnen profiteren van de voordelen ervan. Uw uitvoer is gelijk aan uw invoer.
WD: Volledige CSS3-ondersteuning is ingebouwd in Scarlet, hoe zit het met CSS4? Zal het visuele ontwerpaspect van Scarlet gelijke tred houden met toekomstige ontwikkelingen in HTML en CSS?
TG: het bijhouden van snelle vorderingen is zeker lastig. Toen we besloten om Scarlet te bouwen, was toekomstbestendigheid een van de belangrijkste overwegingen. De kern van de app is abstract genoeg gebouwd, zodat we alleen maar een nieuwe gebruikersinterface moeten toevoegen om echt nieuwe functies toe te voegen. Zolang de basisprincipes van HTML en CSS intact blijven, zouden we goed moeten opschieten met de vooruitgang.
WD: Hoe verwerkt Scarlet preprocessors zoals Sass of Less? Hoe zit het met post-processors?
TG: Op dit moment doet het dat niet. We weten dat het een veel gezochte functie is. De architectuur is aanwezig, maar we zijn een klein team en hebben nog geen tijd gehad om het te bouwen!
WD: Werkt Scarlet met frameworks zoals Bootstrap of Foundation?
TG: Ja. We hebben echter ons best gedaan om agnostisch te blijven als het gaat om de kerngebruikersinterface. Je zult geen specifieke Bootstrap- of Foundation-specifieke functies vinden, hoewel we op dat gebied wel wat plannen hebben.
WD: Scarlet is een desktop-app, ondanks dat deze is gebouwd met HTML, CSS en JavaScript. Waarom heb je die route gekozen via de webapp-optie?
Dit is een superieure workflow voor responsief ontwerp en zou eenvoudigweg niet mogelijk zijn zonder de hybride aanpak
TG: We zijn begonnen als een web-app, maar beseften al snel dat er meer voordelen waren om hybride te worden. De belangrijkste reden was UX. Door controle te hebben over de omgevingslaag kunnen we de ervaring echt optimaliseren. Consumentenbrowsers zijn ontworpen voor incidenteel gebruik. Scarlet is een app die we willen dat mensen de hele dag door gebruiken en het is ideaal als we alle crutes verwijderen die horen bij de consumentenbrowser-ervaring.
Naast een volledige integratie met het bestandssysteem, biedt hybride ons ook mogelijkheden zoals parallelle browsers, waarmee je meerdere pagina's en meerdere breekpunten tegelijk kunt openen en Scarlet de wijzigingen in DOM en stijl direct naar alle weergaven zal verspreiden. Dit is een superieure workflow voor responsief ontwerp en zou eenvoudigweg niet mogelijk zijn zonder de hybride aanpak.
WD: Scarlet heeft een preview op afstand, vertrouwt het op apps (zoals Adobe's Edge Inspect)?
TG: Nee. We zijn geen grote fans van onnodige apps. We verzenden uw daadwerkelijke bestanden naar uw netwerk zodat u in elke browser op elk apparaat naar de externe voorbeeld-URL kunt navigeren en daar is het dan.
WD: richt Scarlet zich op individuele ontwerpers of teams? Heeft het een workflow die samenwerking mogelijk maakt?
TG: We hebben Scarlet benaderd als een platform. De kern van de applicatie gaat over het bieden van een solide ontwerpworkflow. De architectuur is echter ontworpen om uitbreidbaar te zijn, zodat teams het kunnen buigen om aan hun individuele behoeften te voldoen. We hebben enkele behoorlijk opwindende functies op de routekaart die die uitbreidbaarheid uitoefenen.
WD: je start eerst op Mac, gevolgd door Windows. Is dat een zakelijke beslissing of een technische beslissing?
TG: het is een startbeslissing. We hebben beperkte middelen en we weten dat het grootste deel van ons publiek op Mac staat, dus dat is wat we eerst bouwen.
Windows zal echter niet ver achterblijven. Omdat 95% van de applicatie is gebouwd met JS, is het converteren van platforms redelijk pijnloos.
WD: Tot slot, hoe lang moeten we wachten om het zelf uit te proberen?
TG: We willen het aan het einde van het jaar in handen hebben!
WD: Bedankt dat je de tijd hebt genomen om onze vragen te beantwoorden Tom.