Naša naloga kot razvijalcev je, da v bistvu s pomočjo kode pretvorimo modele v resničnost. Razumevanje in znanje oblikovanja je pomemben del tega. Žal je resnično razumevanje zasnove Front End lažje reči kot narediti. Kodiranje in estetsko oblikovanje zahtevata nekaj precej različnih spretnosti. Zaradi tega nekateri front-end razvijalci niso tako strokovno oblikovani, kot bi morali biti, zato njihovo delo trpi.

Moj cilj je, da vam dam nekaj lahkih pravil in konceptov, od a front-end razvijalec na drugega, ki vam bo pomagal priti od začetka do konca projekta, ne da bi zmotili, za kaj so se tako trudili vaši oblikovalci (ali vam morda celo omogočili, da oblikujete lastne projekte z dostojnimi rezultati).

Ta pravila vas v času, ki je potreben za branje članka, od slabega do odličnega ne bodo popeljala, a če boste uporabili njihovo delo, bo to zelo pomembno.

Zaključite stvari v grafičnem programu

Resnično redko zaključite projekt in nadaljujete od začetka do konca, hkrati pa ohranite vsako edinstveno estetsko mutacijo v datotekah oblikovanja. Na žalost oblikovalci niso vedno blizu hitrega popravljanja.

Torej vedno pri vsakem opravilu Front End pride do točke, ko boste na koncu morali narediti nekaj s tem povezanih kozmetičnih prilagoditev. Ali poskušate postaviti kljukico, ki se prikaže, ko je potrditveno polje označeno, ali pa postavite postavitev strani, ki jo je PSD zgrešil, Front-Enders pogosto na koncu opravijo s temi na videz sekundarnimi nalogami. Seveda v popolnem svetu ne bi bilo tako, vendar popolnega sveta še nisem našel, zato moramo biti prilagodljivi.

Dober front-end razvijalec mora uporabljati profesionalna grafična orodja. Ne sprejemajte nadomestkov. Tweet

V teh primerih morate vedno uporabiti grafični program za Makete . Vseeno mi je, katero orodje boste izbrali: Photoshop, Illustrator, Fireworks, GIMP , karkoli. Samo ne poskušajte oblikovati iz lastne kode. Preživite minuto z zagonom pravega grafičnega programa in ugotovite, kako bi moral biti videti, nato pa pojdite na kodo in jo uresničite. Morda niste strokovni oblikovalec vendar boste vseeno dosegli boljše rezultate.

Ujemajte se z dizajnom, ne poskušajte ga premagati

Vaša naloga ni, da navdušujete samo z vašo kljukico; vaša naloga je, da se ujemate s preostalim dizajnom.

Tiste, ki nimajo veliko oblikovalskih izkušenj, zlahka zamika, da bi se na projektu zaznamovali z na videz majhnimi podrobnostmi. Prosim, prepustite to oblikovalcem.

deklarativni jeziki se običajno uporabljajo za produkcijske aplikacije.

Razvijalci se morajo čim bolj ujemati z izvirnim dizajnom front-end. Tweet

Namesto da bi vprašali 'Ali je moja kljukica neverjetna?' Vprašati se morate: 'Koliko se moja kljukica ujema z zasnovo?'

Vedno se morate osredotočiti na delo z dizajnom in ne na njegovo premagovanje.

Tipografija naredi vse razlike

Presenečeni bi bili, koliko na končni videz dizajna vpliva tipografija. Bili bi tako presenečeni, ko bi vedeli, koliko časa zanj porabijo oblikovalci. To ni napor 'pick and go'; Potrebno je nekaj resnega časa in truda.

Če se znajdete v situaciji, ko morate resnično izbrati pisavo, bi za to morali preživeti spodoben čas. Pojdite na splet in dobro raziskujte seznanjanja pisav . Preizkusite te pisave nekaj ur in se prepričajte, da imajo na koncu najboljšo pisavo za projekt.

Ali je ta pisava primerna za vaš projekt? V dvomih se posvetujte z oblikovalcem. Tweet

Če delate z dizajnom, upoštevajte možnosti tipografije oblikovalca. To ne pomeni samo izbire pisave. Bodite pozorni na razmike med vrsticami, razmike med črkami itd. Ne pozabite, kako pomembno je, da se ujemate s tipografijo dizajna.

Poskrbite tudi za pravilno uporabo pisav na pravem mestu. Če oblikovalec uporablja Georgia samo za glave in Odpri brez za telo, potem ga ne smete uporabljati Georgia za telo in Odpri brez za glave. Tipografija lahko enostavno naredi ali zlomi estetiko. Preživite dovolj časa, da se prepričate, da se ujema s pisavo vašega oblikovalca. Čas bo dobro porabljen.

Front-end dizajn ne dopušča 'tunelske vizije'

Verjetno delate majhne dele celotne zasnove.

Vizija tunelov je pogosta past za front-end razvijalce. Ne osredotočajo se na eno samo podrobnost, ampak vedno gledajo na splošno sliko. Tweet

Primer, ki sem ga že počel, je označevanje zasnove, ki vključuje potrditvena polja po meri, ne da bi bila prikazana označena. Pomembno je vedeti, da so kosi, ki jih izdelujete, majhni deli celotne zasnove. Naj bodo vaši čeki tako pomembni kot kljukica na iskalni strani, ne več ne manj. Ne opazujte svojega majhnega dela predora in naredite nekaj, česar ne bi smelo biti.

Pravzaprav je dobra tehnika za to, da posnamete posnetek zaslona programa do zdaj ali oblikovalskih datotek in postavitve v njem v kontekstu, v katerem bo uporabljen. Tako boste resnično videli, kako vpliva na druge elemente oblikovanja na strani in ali pravilno ustreza svoji funkciji.

Odnosi in hierarhija

Bodite posebno pozorni na to, kako deluje postavitev hierarhija . Kako blizu so naslovi telesa besedila? Kako daleč so od besedila o njih? Kako se zdi, da oblikovalec navaja, kateri elementi / naslovi / telesa besedila so povezani in kateri ne? Običajno bodo to storili tako, da bodo sorodno vsebino nanizali, pri čemer bodo presledek označevali razmerja med spremenljivkami, podobne ali kontrastne barve pa bodo označevali sorodno / nepovezano vsebino itd.

Dober front-end razvijalec bo spoštoval oblikovne odnose in hierarhijo. Odličen razvijalec jih bo razumel. Tweet

Vaša naloga je, da prepoznate načine, na katere zasnova izpolnjuje odnose in hierarhijo, in tudi, da se ti koncepti odražajo v končnem izdelku (tudi za vsebino, ki ni bila posebej zasnovana in / ali dinamična vsebina). To je drugo področje (na primer tipografija), kjer si je vredno vzeti dodaten čas in se prepričati, da dobro opravljate svoje delo.

Bodite izbirčni glede presledka in poravnave

To je odlično za izboljšanje vaših modelov in / ali izboljšanje izvedbe drugih modelov: če se zdi, da dizajn uporablja razmik 20 enot, 40 enot itd., Potem poskrbite, da bo vsak razmik večkratnik 20 enot.

To je preprost način, da nekdo, ki nima očesa za estetiko, hitro bistveno izboljša. Poskrbite, da bodo vaši elementi poravnani s slikovno piko in da bo razmik okoli vsakega roba vsakega elementa čim bolj enakomeren. Kjer tega ne morete storiti (na primer na mestih, kjer potrebujete dodaten prostor za označevanje hierarhije), naj bodo natančni večkratniki razmikov, ki jih uporabljate drugje, na primer dvakrat privzeto za ustvarjanje ločitve, trikrat za ustvarjanje več, in tako.

Potrudite se, da boste razumeli, kako je oblikovalec uporabil presledek, in upoštevajte te koncepte v svoji Front-End gradnji. Tweet

Mnogi razvijalci to dosežejo za določeno vsebino v oblikovalskih datotekah, toda ko gre za dodajanje / urejanje vsebine ali izvajanje dinamične vsebine, lahko razmik poteka povsod, ker v resnici niso razumeli, kaj izvajajo.

Potrudite se, da boste razumeli, kako je oblikovalec uporabil prazen prostor, in upoštevajte te koncepte v njegovi strukturi. In ja, za to porabite veliko časa. Ko se vam zdi, da je vaše delo končano, se vrnite nazaj in izmerite razmike, da se prepričate, da ste čim bolj poravnali in razmikali, nato pa kodo preizkusite z veliko mešane vsebine in se prepričajte, da je prilagodljiva.

Če ne veste, kaj počnete, naredite manj

Nisem eden tistih, ki meni, da bi moral vsak projekt uporabljati minimalističen dizajn, če pa niste prepričani v svoj dizajn in morate nekaj dodati, potem je manj več.

Manj je več. Če je vaš oblikovalec za začetek dobro opravil svoje delo, se vzdržite vbrizgavanja lastnih idej za oblikovanje. Tweet

Oblikovalec je poskrbel za glavne stvari; skrbeti morate le za manjše zadeve. Če niste zelo dobri v oblikovanju, potem je najbolje, da naredite najmanjši znesek, da ta element deluje. Na ta način v delo oblikovalca vbrizgate manj lastnega dizajna in čim manj vplivate nanj.

Naj delo oblikovalca zavzame osrednje mesto, vaše delo pa naj zavzame zadnji del.

Čas se nam posmehuje

Povedal vam bom skrivnost o oblikovalcih: 90% (ali več) tistega, kar dejansko dajo na papir, ali platna Photoshop, ni tako veliko.

Zavržejo veliko več, kot so kdajkoli videli. Pogosto naredijo veliko revizij in se poigrajo z zasnovo, da pridejo do točke, ko so človeku v naslednji kabini dovolili, da vidi njihovo delo, ne glede na dejansko stranko. Od praznega platna na splošno v enem koraku ne preidete; vmes je veliko ponovitev. Ljudje redko opravljajo dobro delo, dokler tega ne razumejo in dovolijo v svojem procesu.

Če menite, da je oblikovanje mogoče izboljšati, se posvetujte s svojim oblikovalcem. Morda so že poskusili s podobnim pristopom in se odločili, da bodo temu nasprotovali. Tweet

Torej, kako to izvesti? Pomembna metoda je vzeti čas med različicami. Delajte, dokler ni videti kot nekaj, kar vam je všeč, in ga shranite. Dajte nekaj ur (še boljše ga pustite čez noč), nato ga znova odprite in si oglejte. Presenečeni boste, kako drugače izgleda s svežimi očmi. Hitro izberite področja za izboljšave. Tako jasni bodo, da se boste vprašali, zakaj jih sploh niste videli.

Pravzaprav eden najboljših oblikovalcev, ki sem jih kdajkoli srečal, to idejo ponese še dlje. Začel bi z izdelavo treh različnih modelov. Potem bi čakal vsaj 24 ur, jih še enkrat pogledal in vse zavrgel ter začel v sobi iz nič. Nato bi med vsako ponovitvijo dovolili dan, ko je postajalo vedno boljše. Šele ko ga je nekega jutra odprl in bil popolnoma vesel ali vsaj tako blizu, ko je oblikovalec povsem zadovoljen, bi ga poslal stranki. To je bil postopek, ki ga je uporabil za vsak dizajn, ki mu je zelo služil.

Ne pričakujem, da ga boste nosili tako od daleč, vendar poudarja, kako koristen je čas brez 'pogleda na oblikovanje'. Je sestavni del postopka oblikovanja in izboljšave lahko naredite v trenutku.

Piksli so pomembni

Naredite vse, kar je v vaši moči, da se ujema z izvirnim dizajnom v končanem programu do zadnje slikovne pike.

Front-end razvijalci naj poskušajo uskladiti prvotni dizajn do zadnjega piksela. Tweet

Na nekaterih področjih ne morete biti popolni. Na primer, vaš nadzor nad razmikom med črkami morda ni tako natančen kot oblikovalec in senca CSS se morda ne ujema z enim od Photoshop , vendar se vseeno poskušajte čim bolj približati. Za številne vidike oblikovanja lahko resnično dosežete popolno natančnost slikovnih pik. S tem lahko bistveno spremenite dno. Pixel od tu in tam se ne zdi veliko, vendar sešteje in vpliva na splošno estetiko veliko bolj, kot bi si mislili. Zato bodite pozorni na to.

Obstajajo številne orodja ki vam pomagajo primerjati izvirne zasnove s končnimi rezultati ali pa preprosto naredite posnetke zaslona in jih prilepite v datoteko zasnove, da čim bolj primerjate vsak element. Preprosto postavite posnetek zaslona nad zasnovo in jo naredite polprozorno, da boste videli razlike. Potem veste, koliko prilagoditve morate narediti, da bo videti super.

Pridobite povratne informacije

Težko je pridobiti 'oko za oblikovanje'. Še težje je to storiti sami. Morate iskati z vidika drugih da resnično vidite, kako lahko izboljšate.

Ne predlagam, da prosite soseda za nasvet, mislim, da bi se morali resnično posvetovati z oblikovalci in jim dovoliti, da kritizirajo vaše delo in dajo predloge.

Dovolite oblikovalcem, da kritizirajo vaše delo. Kritike dobro izkoristite in jih ne nasprotujte.

Dovolite oblikovalcem, da kritizirajo vaše delo. Kritike dobro izkoristite in jih ne nasprotujte. Tweet

Za to potrebujete nekaj poguma, vendar je na koncu to ena najmočnejših stvari, ki jih lahko naredite za kratkoročno izboljšanje projekta in dolgoročno izboljšanje ravni svojih spretnosti.

Tudi če je za natančno uglaševanje potrebna le preprosta kljukica, je veliko ljudi, ki so vam pripravljeni pomagati. Če gre za prijatelja oblikovalca ali spletni forum, poiščite usposobljene ljudi in pridobite njihove povratne informacije.

Zgradite dolgotrajen in produktiven odnos s svojimi oblikovalci. Bistvenega pomena je za povratne informacije, kakovost in koristne izvedbe. Tweet

Morda se sliši, da je zamudno in lahko povzroči trenje med vami in vašimi oblikovalci, vendar se splača. Dobri front-end razvijalci se zanašajo na dragocen prispevek oblikovalcev, tudi če tega ne želijo slišati.

Zato je ključnega pomena graditi in vzdrževati konstruktiven odnos s svojimi oblikovalci. Vsi ste v istem čolnu, zato pridite najboljši možni rezultati sodelovati in komunicirati morajo na vsakem koraku. Vlaganje v gradnjo vezi z vašimi oblikovalci se splača, saj bo vsem pomagalo, da bodo bolje opravili svoje delo in vse izvedli pravočasno.

sklep

Če povzamemo, tukaj je kratek seznam nasvetov za oblikovanje za front-end razvijalce:

• Oblikovanje v grafičnem programu. Ne oblikujte iz kode, niti malenkosti.
• Ujemajte se z zasnovo. Bodite pozorni na prvotno zasnovo in je ne poskušajte izboljšati, ampak se ujemajte z njo.
• Tipografija je ogromna. Čas, ki ga porabite za to, da je pravilen, mora odražati njegovo pomembnost.
• Izogibajte se predoru. Poskrbite, da bodo vaši dodatki izstopali tako, kot bi morali. Niso pomembnejši samo zato, ker ste jih oblikovali vi.
• Odnosi in hierarhija - razumejte, kako delujejo v vašem načrtu, da jih boste lahko pravilno izvedli.
• Pomemben je presledek in poravnava. Naj bodo natančne v slikovnih pikah in poenotene v vsem, kar dodate.
• Če niste prepričani v svoje sposobnosti, naj bodo dodatki čim manj zasnovani.
• Vzemite si čas med pregledi. Ponovno preverite pozneje, da vidite svoje oblikovalsko delo s svežimi očmi.
• Pixel-popolna izvedba je pomembna, kadar koli je to mogoče.
• Bodi pogumen. Poiščite izkušene oblikovalce, ki bodo kritizirali vaše delo.

Ne bo vsak Front End Developer fantastičen oblikovalec, vendar bi moral biti vsak Front End Developer vsaj konkurenčno v smislu oblikovanja.

Morate razumeti dovolj konceptov oblikovanja, da ugotovite, kaj se dogaja, in da pravilno uporabite dizajn na končnem izdelku. Včasih se lahko izognete slepim kopijam, če imate popolnega oblikovalca (in če je dovolj podroben za kopiranje v slikovnih pikah).

Da pa bi odlični projekti zasijali skozi številne različice vsebine, morate nekaj razumeti, kaj se oblikovalcu dogaja po glavi. Ne samo, da morate videti, kako izgleda zasnova, ampak morate vedeti, zakaj je videti tako in tako se lahko zavedate tehničnih in estetskih omejitev, ki bodo vplivale na vaše delo.

Torej, tudi kot prednji razvijalec, mora biti del vašega rednega samoizpopolnjevanja vedno tudi učenje več o oblikovanju.