Zašto sam povukao Sketch za Webflow

Želio bih jasno naglasiti da radim na Webflowu, što znači da imate razloga za misljenje da sam pristrana. Istina je da sam odlučio promijeniti svoj tijek rada jer volim koristiti Webflow i mislim da je to sjajan alat. Također ovo pišem na svom kauču kod kuće za novac.

Tijekom posljednjih nekoliko godina u zajednici web dizajna sve se više brblja o ostavljanju tradicionalnih alata za dizajn i dizajniranju izravno u pregledniku, kodiranju HTML-a, CSS-a i JavaScript-a rukom.

Kad bih kodeksirao ručno, često bih i dizajnirao ravno u pregledniku. Proći ću kroz proces pisanja svih HTML, CSS-a i JavaScript-a (uz pomoć Stack Overflow-a i prijatelja) i preskočim cijeli postupak izrade statičkih make-upa.

Lijepo je - napravite pravu stvar i vidite kako to zapravo izgleda u pregledniku, zajedno s načinom razmjera i protoka. Ne samo da morate dizajnirati pravu stvar, već morate dizajnirati i sustave i organizaciju koja stoji iza svega toga.

Pisanje koda može biti jako zabavno. Ne baš mnoge stvari mogu me buditi do 4 ujutro koliko god dosljedno pokušavati shvatiti kako popraviti pogrešku. Nekako mi nedostaje to.

Ali kao dizajner, izuzetno sam ograničen svojim znanjem koda. Na moji su nacrti utjecali i bili ograničeni onim što sam znao raditi, što je isključilo mnoge sjajne tehnologije koje su bile izvan mojih mogućnosti. Jedino što sam mogao dosljedno kodirati bila su statična web mjesta. Nikada nisam mislio da bih mogao napraviti to što sada radim koristeći Webflow.

Suprotno tome, moj prijašnji posao bio je u velikoj agenciji za digitalne oglase, gdje su dizajn i razvoj strogo odvojene uloge. Dizajneri ne smiju dirati kôd, samo Sketch i Photoshop.

Provodio sam oko 2 i pol godine na ovom poslu baveći se zamornošću dizajniranja make-upa i ažuriranjem radne površine, tableta i mobilne verzije sa svakim krugom povratnih informacija klijenata. (moj rekord bio je 43 runde )

To je najgore.

Sati i sati i sati prošli su u izradi ovih statičnih slika koje sam tada morao predati programeru kako bi ga mogli obnoviti. Gotovo svaki projekt je u ovom trenutku već zaostajao, pa je tim vragova često bio prisiljen smanjiti neke uglove, a kamoli imati vremena za odgovor na povratne informacije iz dizajna. To je velika neuredna zbrka.

A objavljeni dizajni više nisu više bili poput mojih. Imao sam sreću da imam nevjerojatnu priliku za dizajniranje stranica koje su primile milijune posjeta dnevno, ali kao rezultat ovog slomljenog postupka, često nisam bio ponosan na posao. To je poput knjige koja je pretočena u film - još uvijek je dobra, ali nije onakva kakva bi trebala biti.

Danas, u posljednjih nekoliko mjeseci, ti se tradicionalni alati za dizajn toliko složeno povećavaju (na primjer: ograničenja, komponente, dinamički podaci, fleksbox) da su toliko složeni kao i izrada konačnog proizvoda u Webflowu.

Novi postupak

Prije polaska na Webflow, nisam imao pojma što je to zapravo. Pretpostavio sam da je to samo još jedan graditelj web stranica koji piše "kod špageta" koji nije za pravi profesionalni rad.

Webflow se osjeća kao dizajnerski alat za stvaranje i manipuliranje kôdom, bez pisanja bilo čega.

Webflow je najbolji kako u dizajnu tako i u razvoju. Poput kodiranja, ja mogu kontrolirati i izgraditi pravi dizajn, sa semantičkim kodom, reaktivno, s klasama, dinamičkim CMS podacima, varijablama boja, postocima, px /% / vh / vw / em i animacijom, osim što nemam pisati sav kôd ručno ili se stalno referirati na Stack Overflow.

Poput tradicionalnih alata za dizajn, uživo dobijam sjajno sučelje, simbole, prečace na tipkovnici, slojnu ploču i uživo mogu vidjeti što napravim na platnu.

Nedostaci

No, uz sve ove prednosti dolazi i nekoliko nedostataka. Velika je razlika između ovih tradicionalnih alata za dizajn i Webflowa. Najveći je diferencijator to što ne možete jednostavno odabrati element i prevući ga okolo.

Nešto što ne radimo kao tvrtka, žrtva je kvaliteta koda. Da sam, kao korisnik, uspio zgrabiti element i povući ga bilo gdje na stranici, kôd koji bi bio napisan kako bi se to omogućilo bio bi apsolutni nered, i još uvijek ne bi reagirao.

Trenutno postoje alati za web dizajn koji vam omogućuju povlačenje elemenata bilo gdje na stranici i stvaranje lomljenih web stranica (neke od spomenutih tvrtki umjesto toga koriste Webflow za svoj rad, nema šale). A ove web stranice nisu samo pokvarene, već ignoriraju: DOM, reaktivnost, protok sadržaja, SEO, pristupačnost. Prilično sve što čini web mjesto funkcionalnim.

Iskreno, ovdje želim biti što objektivniji, ali ne mogu se sjetiti nijedne druge stvarne mane. Umm ...

Nije vas ograničeno samo onim što Webflow može postići bilo na sučelju. Postoji najmanje 5 načina za dodavanje prilagođenog koda, pa ako trebate dodati svoj omiljeni eksperimentalni CSS entitet ili dodati JavaScript ili bilo što drugo, možete.

Ako želite, možete čak i samo eksportirati generirani kôd (koji je bolji od koda koji sam koristio za pisanje) i raditi s njim sve što želite. Mnogi su počeli graditi cijeli prednji kraj aplikacija s Webflowom, a zatim ih izvoze na mrežu. Slatko je!

Ne propuštam pisanje koda i sada mogu brže dizajnirati način na koji će se načiniti više vrsta web stranica nego što sam ikad mogao. Ipak, izgleda stvarno cool biti u kafiću s gomilom prozora za uređivanje teksta. Ne shvaćate to sa Webflowom.

"Ali Ryan, nema načina da je Webflow vaš jedini alat za dizajn!"

U pravu si! Koristim nekoliko alata za dizajn za druge stvari, ali ne Sketch, i definitivno ne radim make-up web stranica ni u jednoj od njih.

Bilježnica

Sjećate se papira? Radim svoje okvire žičara i vrlo osnovna istraživanja izgleda na papiru prije nego što uskočim u Webflow. Često crtam ikone i ilustracije u svoju bilježnicu prije nego što uđem i u Adobe Illustrator.

Ilustrator

Ništa nema moć stvaranja vektorske grafike poput Illustratora (osim programa poput AutoCAD-a, ali mislim, to je malo puno). Otkako se Ai srušio na mene oko 50 puta tokom godina, imali smo malo odnosa ljubavi / mržnje, ali još uvijek imamo puno ljubavi.

Ilustrator koristim za ilustracije, ikone i logotipe. Nisam pronašao ništa bolje, ali javite mi ako nešto čujete.

Figma

Prvo, njihova je multiplayer značajka budućnost. Zbog toga se spremanje i slanje datoteka osjećaju kao da šaljete disketu.

Figmu koristim za razne stvari. Na primjer, prošlog tjedna stvorio sam datoteku predloška za naše oglase. Definirao sam sve boje i fontove ispred, a grafički elementi su građeni kao komponente. Marketinški tim uspio je uskočiti i napraviti gomilu iteracija, a dok su eksperimentirali s kopiranjem i vizualima, uspio sam zaostajati za njima, istodobno polirati razmake i margine. Lud.

Photoshop

Vraćamo se natrag natrag. Kad kažem „natrag“, mislim da sam imao Photoshop 6 (objavljen 2000.) na prijenosnom bljeskalici koju sam nosio oko sebe kad sam imao 12 godina.

Koristim Photoshop za, pogodite za što ... uređivanje fotografija !! Jedini put kada ga danas koristim jest samo sjeckanje stvari ili poliranje snimaka zaslona i ilustracija.

Pokušao sam s puno alata i puno procesa u proteklih 10 godina. Ništa me nije uzbuđivalo kao Webflow i ništa mi nije omogućilo bolji posao.

Ako još niste isprobali Webflow, a zvuči zanimljivo, možete trenutno napraviti račun i besplatno sastaviti stvari. Ako vam ne zvuči zanimljivo, i to je u redu. ¯ \ _ (ツ) _ / ¯

Ako imate pitanja za mene, volio bih razgovarati. Možete me pogoditi na Twitteru ili ostaviti odgovor u nastavku.