Wywiad: Tom Giannattasio Macaw mówi o Scarlet, workflow i projektowaniu na żywo
Ara jest jednym z nowych rodzajów narzędzi do projektowania stron internetowych. Jest to jedna z pierwszych aplikacji projektowych zdolnych do generowania czystego kodu i jest wspierana przez liczne dane branżowe.
Teraz, opierając się na sukcesie pierwszego produktu, zespół odpowiedzialny za Ara przygotowuje się do uruchomienia drugiego narzędzia o nazwie Szkarłat , z radykalnie nowym obiegiem pracy i mnóstwem nowych funkcji.
Scarlet obiecuje dostarczyć więcej niż Ara: według zespołu jest to "środowisko projektowania na żywo" i może być rewolucyjnym krokiem w historii zastosowań projektowych.
Dogoniliśmy Toma Giannattasio z Macaw, aby zapytać go, czego możemy się spodziewać po ostatnim projekcie ...
Webdesigner Depot: Kiedy po raz pierwszy zdecydowałeś się na budowę Ary, co Cię przekonało, że istniejące narzędzia nie są wystarczająco dobre?
Tom Giannattasio: Nie sądzę, aby nasze narzędzia naprawdę trafiły w sedno . Nauczyłem się projektowania stron internetowych w czasach w obszarze tekstowym Geocities. To była nędzna pętla sprzężenia zwrotnego, trochę kodu HTML, odświeżanie, czekanie na przeładowanie strony, uświadomienie sobie, że przegapiłeś nawias zamykający, spróbuj ponownie. Ostatecznie Photoshop powstał jako lepszy sposób projektowania dla sieci i przemysłu, podzielony na tych, którzy projektowali i tych, którzy tworzyli.
Responsywny design pomógł nam uświadomić sobie, że nie możemy traktować sieci tak, jakby była ona nieruchomą, dwuwymiarową płaszczyzną
Wierzę, że obecnie doświadczamy ponownego połączenia tych dwóch dyscyplin. Responsywny design pomógł nam uświadomić sobie, że nie możemy traktować sieci tak, jakby była ona nieruchomą, dwuwymiarową płaszczyzną, a projektanci szukają teraz nowych sposobów pracy. Wielu z nich powróciło do edytora tekstów, aby mogli pracować bezpośrednio z medium. To niesamowite, ale czuję, że znowu jesteśmy w czasach Geocities. Chcę popchnąć sprawy do przodu. Chcę narzędzia, które pozwala mi pracować bezpośrednio z siecią w sposób wizualny i intuicyjny. Właśnie dlatego zacząłem Ara.
WD: Dlaczego Scarlet, a nie Macaw 2.0?
TG: Szczerze mówiąc, nie sądziliśmy, że byłoby uczciwe, gdyby użytkownicy nazywali Scarlet wersją 2. Scarlet nie jest przepakowaną wersją 1 z kilkoma dodatkowymi cechami pokropionymi na wierzchu. Jest to zupełnie inna aplikacja z przeprojektowanym przepływem pracy. Został zbudowany od podstaw z nową architekturą i mnóstwem nowych funkcji. Widzimy przyszłość, w której obie aplikacje współpracują ze sobą, aby sprostać różnym potrzebom projektantów i programistów.
Musimy zaprojektować rzeczy tak agnostyczne, jak to możliwe, aby umożliwić ludziom przebłyski preferencji
WD: Workflow to jeden z najbardziej kontrowersyjnych problemów w projektowaniu stron internetowych, ponieważ ma tak ogromny wpływ na produkt końcowy; jak przybyłeś do workflow w Scarlet?
TG: Definiowanie przepływu pracy dla aplikacji, która ma być używana przez wiele godzin, jest trudnym zadaniem. Musisz zapewnić sobie wystarczającą afordancję, aby pomóc ludziom zwiększyć krzywą uczenia się, ale nie tak bardzo, że staje na drodze superużytkownika. Preferencja to kolejna przeszkoda. Musimy zaprojektować rzeczy możliwie jak najbardziej agnostyczne, aby umożliwić ludziom przebłysk preferencji bez rezygnacji z intencji aplikacji.
Te spośród milionów innych czynników prowadzą do pętli prób i błędów, która napędza proces projektowania w Ararze. Na szczęście sami jesteśmy projektantami i programistami, więc możemy sami prototypować i testować pomysły i wiedzieć, czy są skuteczne.
WD: Jak długo pracujesz nad Scarlet?
TG: Minęło już około roku i jestem naprawdę dumny z tego, co nasz mały zespół zdołał zrobić w tak krótkim czasie.
WD: Jak duży jest twój zespół? A czy Scarlet jest tworzony przez projektantów stron internetowych, dla projektantów stron internetowych?
TG: W zespole jest nas troje i wszyscy dorastaliśmy w projektowaniu sieci. Pracowaliśmy razem w różnych agencjach - pracując dla Apple, Oracle, MIT i innych dużych organizacji - zanim dołączyliśmy do Ary.
WD: Scarlet jest określany jako "środowisko Live Design", co to jest środowisko projektowania na żywo i jak różni się od innych narzędzi dostępnych na rynku?
Nazwę Live Design Environment nazwaliśmy wewnętrznie, aby pomóc nam w dyskusji nad tym nowym rodzajem narzędzia
TG: Wiele narzędzi pasuje do kategorii: SublimeText to edytor tekstu; Szkic jest narzędziem do rysowania; Photoshop to edytor obrazów. Niektóre z nowych narzędzi trafiających na rynek nie. Jedyną kategorią, która jest jeszcze bliska, jest WYSIWYG i nie mogę uwierzyć, że wciąż używamy tego terminu. Powinien zginąć wraz z FrontPage.
Nazwa wewnętrzna Live Design Environment (LDE) została stworzona wewnętrznie, aby pomóc nam w dyskusji na temat tego nowego rodzaju narzędzia, które nie jest wyłącznie wyłączne dla Ara. Pomyśleliśmy, że może to pomóc innym w różnicowaniu, więc zdecydowaliśmy się je udostępnić.
Dla nas środowisko Live Design zasadniczo zawiera dwa kluczowe aspekty:
- Żywa powierzchnia projektowa. To właśnie oddziela te narzędzia od czegoś podobnego do Photoshopa. Pozwalają na pracę z rzeczywistą rzutnią przeglądarki, ale umożliwiają projektowanie bez konieczności pisania kodu. Jest to podobne w duchu do tradycyjnego WYSIWYG, z wyjątkiem kluczowego aspektu numer dwa ...
- Inteligentny silnik kodu. Silne projektowanie stron internetowych wymaga czegoś więcej niż tylko wyboru kształtu, koloru i typu. Potrzebuje dobrze skonstruowanego, dobrze napisanego kodu, aby ten projekt działał. Uważamy, że te decyzje powinny być podejmowane przez projektantów, ale nie muszą być odręczne. Tradycyjne edytory WYSIWYG generują pozycjonowanie absolutne, losowe identyfikatory i zwykłe śmieci, ale ta nowa generacja narzędzi znalazła sposoby na ulepszenie przepływu pracy, aby dać ci silny, użyteczny kod. To wielka sprawa.
WD: Mówisz o kodach semantycznych zgodnych ze standardami? Łatwo to sobie wyobrazić na podstawowej stronie bloga - gdzie masz ustaloną strukturę i prostą hierarchię - ale czy Scarlet poradzi sobie z tym więcej, np. Broszurą firmową, a nawet witryną e-commerce?
TG: Obecnie Scarlet koncentruje się całkowicie na stronie klienta (HTML, CSS i JS). To nie jest gotowe rozwiązanie dla e-commerce i nie obsługuje niczego po stronie serwera. Scarlet nie jest również magicznym pudełkiem, który pozwala wyrzucać pomysły w jedną stronę, a drugi uzyskuje kod nadający się do użytku. Jest to precyzyjnie dostrojony instrument, który pomaga uzyskać dokładnie taki kod, który jest szybszy, bardziej spójny i intuicyjny niż kodowanie ręczne.
WD: Scarlet zapewnia pełny dostęp do kodu, który wyprowadza, a my nawet możemy edytować jego wydrukowane pliki w naszym preferowanym edytorze kodu. Czy to oznacza, że powinniśmy być ekspertami HTML / CSS / JavaScript, aby móc korzystać ze Scarlet?
TG: Przepływ pracy został dopracowany, aby pomóc profesjonalistom w szybszym i bardziej intuicyjnym wykonaniu ich pracy. Z pewnością możesz używać Scarlet bez znajomości HTML i CSS, ale nie będziesz w stanie w pełni czerpać korzyści. Twój wynik będzie równy twojemu wkładowi.
WD: Pełna obsługa CSS3 jest wbudowana w Scarlet, a co z CSS4? Czy aspekt wizualny projektu Scarlet dotrzyma kroku przyszłym zmianom w HTML i CSS?
TG: Nadążanie za szybkimi postępami jest z pewnością trudne. Kiedy zdecydowaliśmy się zbudować Scarlet, zabezpieczenie na przyszłość było jednym z głównych czynników. Rdzeń aplikacji jest zbudowany na tyle abstrakcyjnie, że wszystko, co naprawdę musimy zrobić, aby dodać nowe funkcje, to podłączyć do niego interfejs użytkownika. Tak długo, jak podstawowe zasady HTML i CSS pozostają nienaruszone, tak długo powinniśmy się rozwijać wraz z postępem.
WD: W jaki sposób Preprocesor firmy Scarlet obsługuje procesory takie jak Sass czy mniej? A co z postprocesorami?
TG: W tej chwili nie. Wiemy, że jest to bardzo poszukiwana funkcja. Architektura jest na miejscu, ale jesteśmy małym zespołem i nie zdążyliśmy jeszcze go zbudować!
WD: Czy Scarlet współpracuje z frameworkami takimi jak Bootstrap czy Foundation?
TG: Tak. Jednak dołożyliśmy wszelkich starań, aby pozostać agnostycznym, jeśli chodzi o podstawowy interfejs użytkownika. Nie znajdziecie żadnych specyficznych cech Bootstrapa ani Fundacji bezpośrednio od nietoperza, chociaż mamy pewne plany w tych obszarach.
WD: Scarlet to aplikacja na komputery stacjonarne, mimo że jest zbudowana z HTML, CSS i JavaScript. Dlaczego wybrałeś tę trasę przez opcję aplikacji internetowej?
Jest to lepszy przepływ pracy dla responsywnego projektowania i po prostu nie byłby możliwy bez podejścia hybrydowego
TG: Zaczynaliśmy jako aplikacja internetowa, ale szybko zdaliśmy sobie sprawę, że hybryda przynosi więcej korzyści. Najważniejszym powodem był UX. Kontrola nad warstwą środowiska pozwala nam naprawdę zoptymalizować doświadczenie. Przeglądarki konsumenckie są przeznaczone do użytku swobodnego. Scarlet to aplikacja, którą chcemy używać przez cały dzień i jest idealna, jeśli usuniemy wszystkie problemy, które pojawiają się w przeglądarce konsumenckiej.
Oprócz pełnej integracji z systemem plików, hybryda umożliwia nam także oferowanie funkcji takich jak równoległe przeglądarki, co pozwala na otwieranie wielu stron i wielu punktów przerwania jednocześnie, a Scarlet będzie propagować DOM i zmieniać style natychmiastowo do wszystkich widoków. Jest to lepszy przepływ pracy dla responsywnego projektowania i po prostu nie byłby możliwy bez podejścia hybrydowego.
WD: Scarlet ma zdalny podgląd, czy korzysta z aplikacji (takich jak Adobe Edge Inspect)?
TG: Nie. Nie jesteśmy wielkimi fanami niepotrzebnych aplikacji. Nadawane są rzeczywiste pliki w Twojej sieci, dzięki czemu możesz nawigować w dowolnej przeglądarce na dowolnym urządzeniu do zdalnego adresu URL podglądu i tam jest.
WD: Czy Scarlet jest skierowany do indywidualnych projektantów lub zespołów? Czy ma przepływ pracy, który ułatwia współpracę?
TG: Podeszliśmy do Scarlet jako platforma. Rdzeniem aplikacji jest zapewnienie solidnego obiegu pracy z projektem. Jednak architektura ma być rozszerzalna, więc zespoły mogą ją zginać, aby sprostać ich indywidualnym potrzebom. Mamy kilka ciekawych funkcji na mapie drogowej, które pozwalają na rozszerzenie.
WD: uruchamiasz najpierw na Macu, a potem na Windows. Czy to jest decyzja biznesowa, czy decyzja techniczna?
TG: To decyzja o starcie. Mamy ograniczone zasoby i wiemy, że największa część naszych odbiorców jest na Macu, więc to właśnie budujemy jako pierwsi.
Windows nie będzie jednak daleko w tyle. Ponieważ 95% aplikacji jest zbudowanych za pomocą JS, konwertowanie platform jest dość bezbolesne.
WD: Na koniec, jak długo musimy czekać, żeby samemu to wypróbować?
TG: Chcemy mieć go w rękach wszystkich do końca roku!
WD: Dziękuję za poświęcenie czasu, aby odpowiedzieć na nasze pytania Tom.