Hvorfor jeg skurede Sketch til webflow

Jeg vil gerne gøre det meget klart, at jeg arbejder på Webflow, hvilket betyder, at du har al grund til at tro, at jeg er partisk. Sandheden er, at jeg valgte at ændre min arbejdsgang, fordi jeg elsker at bruge Webflow, og jeg synes, det er et godt værktøj. Også jeg skriver dette på min sofa derhjemme til funsies.

I løbet af de sidste par år i webdesignsamfundet har der været mere og mere snak om at forlade traditionelle designværktøjer og designe lige i browseren, kode HTML, CSS og JavaScript for hånd.

Når jeg plejede at kode i hånden, ville jeg ofte designe lige i browseren. Jeg ville gennemgå processen med at skrive al HTML, CSS og JavaScript for hånd (med hjælp fra Stack Overflow og venner selvfølgelig) og springe over hele processen med at lave statiske mockups.

Det er rart - du får til at skabe den rigtige ting og se, hvordan den virkelig ser ud i browseren sammen med, hvordan den skalerer og flyder. Ikke kun kommer du til at designe den rigtige ting, men du får designe systemerne og organisationen bag det hele.

Det kan være rigtig sjovt at skrive kode. Ikke så mange ting kan holde mig vågen, indtil klokken 04.00 så konsekvent som at prøve at finde ud af, hvordan man løser en fejl. Jeg savner det ret.

Men som designer er jeg ekstremt begrænset af min viden om kode. Mine designs blev påvirket og begrænset af, hvad jeg vidste, hvordan jeg skulle gøre, hvilket udelukkede mange gode teknologier, der var uden for mine evner. Det eneste, jeg kunne kode konsekvent godt, var statiske websteder. Jeg troede aldrig, at jeg kunne bygge det, jeg gør nu ved hjælp af Webflow.

I modsætning hertil var mit tidligere job hos et stort digitalt annoncebureau, hvor design og udvikling er strengt adskilte roller. Designere har ikke tilladelse til at røre kode, kun Sketch og Photoshop.

Jeg tilbragte omkring 2 og et halvt år på dette job ved at køre igennem trættet med at designe mockups og opdatere desktop, tablet og mobilversioner med hver runde af feedback fra klienter. (min rekord var 43 runder )

Det er det værste.

Timer og timer og timer gik til at lave disse statiske billeder, som jeg derefter måtte overlevere til en udvikler, så de kan genopbygge det. Næsten hvert projekt kørte allerede bagefter på dette tidspunkt, så dev-teamet blev ofte tvunget til at skære nogle hjørner, så meget mindre havde tid til at svare på feedback fra design. Det er et stort klodset rod.

Og de offentliggjorte designs føltes ikke rigtig mere som mine. Jeg har været heldig nok til at få den fantastiske mulighed for at designe sider, der modtog millioner af besøg om dagen, men som et resultat af denne ødelagte proces var jeg ofte ikke stolt over arbejdet. Det er som en bog, der er blevet til en film - den er stadig god, men ikke hvad den skulle være.

I dag, især i de sidste par måneder, øges disse traditionelle designværktøjer i kompleksitet så meget (f.eks .: begrænsninger, komponenter, dynamiske data, flexbox), at de er omtrent lige så komplekse som at opbygge det endelige produkt i Webflow.

Den nye proces

Før jeg startede med Webflow, vidste jeg ikke, hvad det virkelig var. Jeg antog, at det bare var en anden webstedsbygger, der skriver ”spaghettikode”, der ikke er til rigtigt professionelt arbejde.

Webflow føles som et designværktøj til at oprette og manipulere kode, uden at skrive noget af det.

Webflow er det bedste af både design og udvikling. Som kodning får jeg kontrol og opbygning af det rigtige design med semantisk kode, responsivt med klasser, dynamiske CMS-data, farvevariabler, procentdele, px /% / vh / vw / em og animation, medmindre jeg ikke har at skrive al koden for hånd eller konstant henvise til Stack Overflow.

Ligesom traditionelle designværktøjer får jeg en fantastisk grænseflade, symboler, tastaturgenveje, et lagpanel, og jeg får se, hvad jeg laver på lærredet, live.

Ulemperne

Med alle disse fordele kommer dog et par ulemper. En stor en er forskelligheden mellem disse traditionelle designværktøjer og Webflow. Den største differentiator er, at du ikke bare kan vælge et element og trække det rundt.

Noget, vi ikke gør som virksomhed, er offerkodekvalitet. Hvis jeg som bruger var i stand til at gribe et element og trække det rundt overalt på siden, ville den kode, der ville blive skrevet for at lade dette ske, være et absolut rod, OG den var stadig ikke lydhør.

Der er i øjeblikket webdesignværktøjer, der giver dig mulighed for at trække elementer rundt overalt på siden og oprette ødelagte websteder (nogle af de nævnte virksomheder har brugt Webflow til deres eget arbejde i stedet, ingen vittighed). Og disse sider er ikke bare ødelagte, det ignorerer: DOM, lydhørhed, indholdsstrøm, SEO, tilgængelighed. Stort set alt, hvad der gør et websted til et funktionelt websted.

Helt ærligt, jeg vil være så objektiv som muligt her, men jeg kan ikke tænke på andre reelle ulemper. Umm ...

Du er heller ikke begrænset til, hvad Webflow kan udføre i grænsefladen. Der er mindst 5 måder at tilføje brugerdefineret kode, så hvis du har brug for at tilføje din foretrukne eksperimentelle CSS-egenskab, eller tilføje JavaScript eller hvad der ellers, kan du det.

Hvis du vil, kan du endda bare eksportere den genererede kode (som er bedre end den kode, jeg plejede at skrive), og gøre hvad du vil med den. Mange mennesker er begyndt at bygge hele frontenden af ​​apps med Webflow og derefter koble det op til deres backend ved eksport. Det er sødt!

Jeg savner ikke at skrive kode, og jeg kan nu designe måde flere typer websteder, end jeg nogensinde kunne før, hurtigere. Det ser dog godt ud at være i en kaffebar med en masse tekstredigeringsvinduer op, dog. Det får du ikke med Webflow.

"Men Ryan, der er ingen måde, at Webflow er dit eneste designværktøj!"

Du har ret! Jeg bruger et par designværktøjer til andre ting, men ikke Sketch, og jeg laver bestemt ikke webstedsmockups i nogen af ​​dem.

En notesbog

Kan du huske papir? Jeg laver mine wireframing og meget grundlæggende layoutundersøgelser på papir, før jeg springer ind på Webflow. Jeg tegner ofte ikoner og illustrationer i min notesbog, før jeg også går ind i Adobe Illustrator.

Illustrator

Intet har magten til at oprette vektorgrafik som Illustrator (undtagen programmer som AutoCAD, men jeg mener, det er lidt meget). Da Ai er styrtet på mig omkring 50 gange i årenes løb, har vi lidt af et kærlighed / had-forhold, men der er stadig en masse kærlighed.

Jeg bruger illustrator til illustrationer, ikoner og logoer. Jeg har ikke fundet noget bedre, men lad mig vide, hvis du hører om noget.

Figma

For det første er deres multiplayer-funktion fremtiden. Det gør det nemmere at gemme og sende filer som at sende en diskett.

Jeg bruger Figma til diverse ting. I sidste uge oprettede jeg for eksempel en skabelonfil til vores annoncer. Jeg definerede alle farver og skrifttyper foran og havde de grafiske elementer bygget som komponenter. Marketing teamet var i stand til at hoppe ind og lave en masse iterationer, og mens de eksperimenterede med kopi og visuals, var jeg i stand til at spore bag dem og polere afstand og marginer på samme tid. Helt vildt.

Photoshop

Vi går vejen tilbage. Når jeg siger “wayyyyyy back”, mener jeg, at jeg havde Photoshop 6 (frigivet i 2000) på et bærbart flashdrev, som jeg bar rundt, da jeg var 12 år gammel.

Jeg bruger Photoshop til, gæt hvad… redigering af fotos !! Den eneste anden gang jeg bruger det i disse dage er bare at hacking ting sammen eller polere skærmbilleder og illustrationer.

Jeg har prøvet en masse værktøjer og en masse processer i løbet af de sidste 10 år. Intet har givet mig så begejstring som Webflow, og intet har tilladt mig at gøre bedre arbejde.

Hvis du ikke har prøvet Webflow endnu, og det lyder interessant, kan du oprette en konto og oprette ting lige nu gratis. Hvis det ikke lyder interessant, er det også cool. ¯ \ _ (ツ) _ / ¯

Hvis du har spørgsmål til mig, ville jeg elske at tale. Du kan slå mig op på Twitter eller give et svar nedenfor.