Dragi oblikovalci,

To pismo se pripravlja že leta. Deli so bili v daljšem časovnem obdobju dostavljeni v govoru in pisni obliki različnim oblikovalcem.

Vendar sem se vedno bal, da bi jo objavil iz strahu, da bi to vplivalo na trenutnega oblikovalca ali naročnika, s katerim sodelujem. Torej, preden nadaljujem, bi rad poudaril, da ne gre za posebno pritožbo, temveč za podroben seznam 18 let nesoglasij.

Sodelujemo že skoraj dve desetletji in vsaka datoteka PSD, ki ste mi jo poslali, ima (bolj ali manj) enake težave. Oprostite mi torej za nespodobnost, ko vas poskušam naučiti svojega dela.

Ne predvidevam, da vas bom učil o grafiki ali estetiki. Ne bom se poglabljal v tipografijo, čitljivost ali uporabo presledkov.

Namesto tega bi rad razložil, kako sadovi vašega dela obveščajo moje.

Rad bi vas opomnil, kaj je potrebno za reprodukcijo modelov kot pikslovnih spletnih strani. Rad bi vam povedal, kako bodo vaše oblikovalske datoteke uporabljene za dokumentacijo in kako slike, ki jih ustvarite, določajo uporabljene tehnologije - vse do osnovnih ravni razširljivosti in zmogljivosti.

Prav tako bi rad prikazal, kaj je mogoče storiti hitro in enostavno in kaj bo ustvarilo režijske stroške, ki bodo povlekli celotno proizvodnjo.

In predvsem, rad bi vas spomnil, da slika ki jih ustvarjate zdaj, bo iz živega bitja, ki komunicira in se odziva, ki komunicira s tisoči različnih posameznikov, ki jih mora učiti in se od njih učiti na čim bolj naporen način. Tako zanj kot zanje.

Oblikovanje za dokumentacijo

Najprej vas želim spomniti, da je Datoteke PSD ki jih izdelujete, niso samo vir slik, ki jih mora naročnik odobriti, ampak tudi tehnična dokumentacija in izvorni materiali za razvijalce. Zato prosimo, da obdržite svoje sloje in skupine urejeno, organizirano in poimenovano .

Dragi oblikovalci, že dve desetletji mi pošiljate PSD-je z enakimi številkami. Tweet

Označite svoj dizajn. Ustvarite ločeno datoteko s konvencijami, ki ste jih uporabili, ali pa jih zapišite v ločeno skrito plast.

Povejte mi, katere pisave ste za kaj uporabili. Sporočite mi, katere barve, razmike in kontekst uporabiti. Moram vedeti.

Vedeti moram tudi, kaj ekstrapolirati, če za določeno funkcijo ni bil zasnovan noben načrt.

Mislim, da hočem reči: Če je le mogoče ustvarite kratek vodnik po slogu za izdelek, ki ga načrtujete.

V oba razloga pri dodajanju standardnih besedilnih blokov - na primer naslovov - dodajte pravokotnik za njimi, da označite razmik okoli njih. Tako bi morali imeti možnost, da jih vsakič dosledno umestite. Če je to preveč dela, navedite vsaj, kateri primer v dokumentu je kanon.

Ne morem vam povedati, kako pogosto ugotovim, da so naslovi postavljeni na oko, tako da se vizualno prilegajo posameznemu primerku, v katerega so umeščeni, toda pri merjenju razkrijejo, da ima vsak svoj razmik.

Enako velja za vsebinske bloke. Če imate seznam različnih vsebinskih blokov, jih dosledno razmikajte.

Več vam bom povedal v Oblikovanje za vsebino vendar ne predvidevajte, da bodo vaši naslovi vedno v eni vrstici, in uporabite te podatke v datoteki.

Ves čas se srečujem s temi naslovi, ki imajo velikost pisave 22 px in višino vrstice 92 px (očitno kopirajte in prilepite iz naslova glavne strani). Izbrane nastavitve so pomembne, tudi če izvožene datoteke vizualno ne spremenijo.

Oblikovanje za tehnologijo

To imata dve plati: kaj je lahko narejeno in kaj je primerno za medij.

Medtem ko hitro dosegamo točko, ko bo za razvoj spletnih strani tehnično vse mogoče (če ne drugega, ga lahko še vedno narišem po slikovnih pikah s pomočjo platna), je veliko teh rešitev ne pripravljeno za proizvodnjo.

Dejstvo, da ste našli primer, ko je nekdo uspešno združil WebGL 3D z zameglitvijo CSS in filtrirnimi maskami za predstavitveno stran, še ne pomeni, da ga lahko uporabite kot celotno okno paralaksne plošče v eni strani.

Če se res želite sprehoditi po krvavem robu, se posvetujte s svojim razvijalcem prej predložitev modela v odobritev. V nasprotnem primeru bo težko doseči, da se bo stranka strinjala z manj.

Če pa res želite preizkusiti robove in če želite to preizkusiti iz zabave, me kontaktirajte zasebno. Tako rad ustvarjam takšne stvari kot ti. Samo ne vstavljajte teh stvari v predvideni proizvodni projekt.

Poleg teh stvari - poleg preizkušanja meja tega, kar je mogoče storiti, poskušajte biti občutljivi in ​​razumni kaj je treba storiti .

Niste grafični umetnik; Ste več kot to, ste oblikovalec.

Ne načrtujete ga samo tako, da bo izgledal na določen način, temveč ga morate tudi oblikovati teči na določen način, komunicirati in obnašati se na določen način.

Če želite iti k klišeju, ki ga oblikovalci poznajo povsod: Kaj dobrega je čudovito videti stol, če nihče ne more sedeti na njem ?

V svojo zasnovo morate vključiti hitrost nakladanja ter hitrost izvedbe in enostavnost uporabe oblikovanje namesto slike.

Poskusite doseči čim več s samo HTML in CSS.

Poskusite doseči čim več s samo HTML in CSS. Izogibajte se uporabi funkcij lepega videza, ki so na voljo v Photoshopu. Ne uporabljajte mešanja! Ne uporabljajte faux krepko in faux ležeče.

Če elementa ne želite biti slika, sploh ne uporabljajte filtrov - razen najpreprostejših senc.

Ne prisiljujte me, da izračunam ali izbiram barve, ker ste uporabili mešana barvna polnila. Prosimo, ne ponarejajte prosojnih slik z uporabo mešanice prekrivanja; Pravzaprav potrebujem pregledno sliko na mestu.

Če uporabljamo front-end ogrodje, kot je npr Bootstrap , veliko teh vprašanj bo že rešenih, zato se naučite, kako se to naredi in kako jih je mogoče spremeniti. Ne gre samo, če hočeš nočeš, oblikovati kaj nepovezanega.

Če vaš načrt ni v skladu s tem, kar naredi okvir, potem njegovo izvajanje ne pomeni izvedbe. Namesto tega na koncu selektivno preglasimo ogrodje, tako da se ne moti z našo zasnovo in jo nato izvajamo iz nič. Obremenitev se namesto prepolovitve podvoji.

In končno, na spletnem mestu ne uporabljajte več kot treh pisav - ali različic pisav. Če potrebujete šest različnih uteži, vsaka s svojimi običajnimi in ležečimi različicami, ne načrtujete več za splet.

Oblikovanje za interaktivnost

To je ogromno. In to pismo je bilo prvotno napisano izključno za to temo. Resnično morate poznati in razumeti vse načine interakcije med uporabniki in funkcionalnostmi.

Začnimo z najpreprostejšimi stvarmi: povezavami.

Povezave nimajo samo dveh stanj.

V navigaciji, ki jo prejmem, vedno navedete načrte za povezave in an aktivna povezava (trenutna stran).

V drugih primerih običajno navedete osnova in lebdite države.

Če želite biti uporabniku najmanj prijazni, bi morali imeti različne modele osnova, lebdenje in osredotočiti države ( obiskali in aktivno tudi za UX). In za navigacijo imata povezava in aktivna povezava vse zgoraj navedene države .

Oh, in ne upate si spremeniti postavitve povezave med državami (različna širina obrobe, oblazinjenje in podobno).

Podobno, če ni videti kot gumb, nima ozadja. Obdobje. Oblazinjenje vstavljenega besedilnega elementa je nered in nepodložena besedilna ozadja nikoli ne bodo storila.

Ker bomo to uporabljali v mobilnih napravah, poskrbite, da bo med ločenimi interaktivnimi elementi dovolj praznega prostora in da bo vsak hitbox dovolj velik. Menim, da je najmanj 42 slikovnih pik na vsaki osi norma.

Narišite nevidni pravokotnik ali skrito plast, ki prikazuje polja z zadetki; poskrbite, da se ne prekrivajo in da so interakcije uporabnikov nedvoumne.

Elementi obrazca so še slabši.

Najpogostejši primer, ki ga vidim, so izbirni gumbi in potrditvena polja. Standardni so grdi! Torej, vi oblikujete svoje in mi daste preverjeno in nepreverjeno stanje ter se počutite kot narejenega.

Vendar pa obstaja celo večdimenzionalna tabela stanj za potrditveno polje, ki mora biti uporabniku vizualno označena.

Imamo naslednja stanja:

• Označeno ali neoznačeno
• Hover ali ne
• Osredotoči se ali ne
• Omogočeno ali onemogočeno
• Napaka ali ne

Vsak od teh se lahko kombinira z ostalimi.

Onemogočeno preprečuje nekatere kombinacije (lebdenje in izostritev sta običajno nepomembni, če sta onemogočeni), vendar ne vseh (check-disabled-error je povsem veljavno in informativno stanje za potrditveno polje). Tako dobimo 16 omogočenih in štiri onemogočene države, kar daje skupaj vsaj 20 različnih držav. Na primer, države, ki mi jih običajno daste, so v tej nastavitvi označene kot ne-ne-omogočene-ne in nepreverjene-ne-ne-omogočene-ne.

Drugi elementi obrazca morda nimajo preverjenega in neizključenega stanja, vendar so lahko prazni ali neprazni (prikazuje besedilo nadomestnega znaka). Lahko imajo tudi bolj zapleteno informacijsko stanje, tako da je primer napake ali ne tako zapleten kot nevtralno opozorilo-uspeh.

Nato bi morali poleg tega imeti obvezne ali neobvezne kazalnike, skupaj z jasno določeno postavitvijo in zasnovo nalepk, pomočjo za vnos in besedilom o napaki.

In če res želite biti prijazni do uporabnika, potrebujete neokrnjeno nastavljena umazana stanja, kar pomeni, da uporabnik nikoli ni posredoval podatkov ali so podatki že shranjeni ali so bili spremenjeni, vendar še niso shranjeni.

Oblikovanje interaktivnosti je težko. In če želite spremeniti, kako izgledajo radijski gumbi, tega ne delajte hitro v dveh stanjih.

Pravim, da je oblikovanje interaktivnosti težko. In če želite spremeniti, kako izgledajo radijski gumbi, tega ne delajte hitro v dveh stanjih.

Samo še ena zadnja točka pri načrtovanju interaktivnosti: Odločite se, kako izgleda interakcija. Pomen, odločite se, katere konvencije boste uporabili za interaktivne elemente, in jih ne uporabljajte za nič drugega.

Ne, za označevanje povezav ne smete uporabljati svoje glavne barve blagovne znamke, še posebej, če boste za poudarjanje pomembne vsebine uporabili isto rešitev!

Oblikovanje za vsebino

Idealna postavitev vsakega elementa, napolnjenega z lipum vsebina je dovolj dobra, da stranki predstavite sliko, da dobi odobritev vizualnega sloga. Toda oblikovanje vsebine se tam niti ne začne niti ne konča.

Ko imate grobo predstavo o tem, kaj želite narediti z postavitvijo vsebine, ne pozabite, da delate z dinamično vsebino.

Ko imate grobo predstavo, kaj želite narediti z postavitvijo vsebine, ne pozabite, da delate z dinamično vsebino. Za vsak del vsebine morate preveriti dva primera:

• Kaj pa, če ga je preveč?
• Kaj pa, če ga je premalo (ali v celoti manjka)?

Preverite, kaj se zgodi, če je naslov smešno kratek ali nenavadno dolg. Kako naj bo vsebinski blok, če manjkajo ključni elementi? Kaj če ni slike?

Če za odsek strani ni vsebine, odstranimo celoten odsek - naslov, vsebnik in vse - ali obdržimo odsek in prikažemo nekaj v vrstici: »Še nobenega članka, ali preverite pozneje?« Še bolje: “Bi radi bili obveščeni, ko prispe ta vsebina? Naroči se na naše novice!'

Odločite se! Potem oblikujte te stvari!

Če načrtujete vir ali vsebino, naloženo iz zunanjega ali dinamičnega vira, ne pozabite vključiti vseh napak in obvestil. Pravzaprav oblikujte meta vsebino obvestila strani tako, da pokaže, kako je videti po vsem svetu, nato se držite teh oblikovalskih konvencij, da obvestite uporabnika, če gre kaj narobe.

Izogibajte se gumbom s fiksno širino in blokom besedila s fiksno višino. In če tega nisem že povedal, Če mislite, da bo vedno šlo za eno vrstico besedila, se motite! Zdaj pojdite na najboljši način, kako narediti večvrstično.

Prepričajte se, da ima ista vsebina enako strukturo.

Če je isti naslov viden na več mestih, ne pišite ene besede v enem primeru in drugega nekje drugje!

Pravzaprav se poskušajte izogniti oblikovalnim strukturam znotraj naslovov. Podobno besedila na enem mestu ne lomite ročno, na drugem pa drugače. Pravzaprav ne razbijte besedila ročno!

Te stvari bi lahko izboljšale vaš dizajn, vendar ne pozabite, da bo vsebina najverjetneje vnesena prek sistema za upravljanje vsebin, in oseba, ki jo vnese, morda ne bo videla, kako izgleda, dokler ni objavljena ali pa morda sploh nima orodij za ročno razbijanje ali oblikujte besedilo.

Oblikujte z enakimi omejitvami, ki jih bo imela končna vsebina - vsebniki besedila s fiksno širino in samodejni prelom besed. Če se tako zdi grdo, dizajn ni dober.

Oblikovanje za odzivnost

To je v zadnjem času zelo napredovalo. Vsaj v tistih primerih, ko je mobilnik dejansko zasnovan. Vedno bolj pustimo bootstrapu, da to ugotovi, in na razpoke nataknemo obliže.

Ne glede na to morate poznati nekaj preprostih načel.

Prvič, različici za mobilne naprave in namizne računalnike niso ločene strani. Vem, da to veste. So preprosto preoblikovanje iste strani.

Preprosto povedano, to je enako kot pri delu z besedilom, poravnanim levo. Stavek ne spremeni vrstnega reda besed ali črk samo zato, ker ste ga postavili v manjši vsebnik.

Skupine vsebine je treba deliti v vseh postavitvah. Ko dodajate stolpce, se prepričajte, da so prelomi stolpcev dosledni.

Tudi vaše konvencije bi morale slediti isti strukturi za različne različice strani. To pomeni, da če sta dva elementa enaka na namizju, bi morala biti enaka tudi na mobilnih napravah.

Oh, in če želite paralakso, priskrbite sliko, ki je dovolj velika za premikanje. Če ste primerni ali obrežete sliko, tako da je videti prav na datoteki, ki jo prikazujete stranki, se nimam kaj premikati.

Oblikovanje izjem

Seveda so izjeme vedno možne. Poleg tega so potrebni, da je izdelek videti privlačen in učinkovit. Vendar jih ne dodajajte ob prvem podajanju.

Če se vedno znova lotevate istega dizajnerskega problema, to ne bo delovalo, še posebej, če se v vsakem primeru odločite za drugačno rešitev.

Ko naredite vse zgoraj, bi morali dobiti učinkovit, stabilen in dosleden (če že nekoliko dolgočasen) dizajn. Zdaj je čas, da stvari popestrimo. Če pogledate stran kot celoto, se s stranko pogovorite, če želite prepoznati posnetke denarja - elemente, ki jim bodo dali največ zaslužka.

Bili smo delati skupaj že leta in naše stranke so bile vedno zadovoljne s končnim rezultatom.

Seveda bom priskočil, če boste zamudili nekaj teh točk, in če je uporaba zapletene zasnove upravičena, se bom lotil pisanja logike upodabljanja v JavaScript, če bo treba.

Vstopil bom in stranki upravičil dodatno delo, če bo potrebno. Hudiča, že leta sem oblikoval obrazce in interaktivnost poleg prejetih modelov, zato to ne bo problem.

Upam le, da boste ob branju tega nekaj namigov imeli v mislih naslednjič, ko bomo sodelovali. Upam, da vas bodo obvestili o vašem delu in vam dali napotke, ko ne veste, kaj storiti. Želel bi, da razumete, da mi je najin odnos pomemben in da tega nisem napisal zato, da bi te prizadel, ampak da bi bil najin odnos boljši.

Z ljubeznijo,

Vaš front-end razvijalec