Head disainerid,
See on olnud loomisel juba aastaid. Osasid on pika aja jooksul erinevatele disaineritele peetud kõnedes ja osa kirjalikult.
Kuid ma olen alati kartnud selle avaldamist kartuses, et see mõjutab kas disainerit või klienti, kellega praegu töötan. Nii et enne minekut tahaksin rõhutada, et see pole konkreetne kaebus, vaid 18 aastat kestnud erimeelsuste üksikasjalik loetelu.
Oleme koos töötanud peaaegu kaks aastakümmet ja igal minu saadetud PSD-failil on olnud (enam-vähem) samad probleemid. Andke mulle andeks siis sündsusetus, kui üritasin teile õpetada, kuidas oma tööd teha.
Ma ei julge teile õpetada graafikat ega esteetikat. Ma ei hakka süvenema tüpograafiasse, loetavusse ega tühimiku kasutamisse.
Selle asemel tahaksin selgitada, kuidas teie töö viljad minu teada annavad.
Tahaksin teile meelde tuletada, mida on vaja pikslitega täiuslike kujunduste reprodutseerimiseks veebilehel. Tahaksin teile öelda, kuidas teie failipaigutust dokumenteerimiseks kasutatakse ja kuidas teie loodud pildid määravad kasutatava tehnoloogia - kuni skaalautuvuse ja jõudlustasemeni.
Samuti tahaksin demonstreerida, mida saab kiiresti ja lihtsalt teha ning mis tekitab üldkulusid, mis kannavad kogu tootmist.
Ja ennekõike tahaksin seda teile meelde tuletada kujundus sellest, mida praegu loote, saab elusolend, mis suhtleb ja reageerib, suhtleb tuhandete erinevate inimestega, mida peate õpetama ja neilt võimalikult lihtsal viisil õppima. Nii selle kui ka nende jaoks.
Dokumentatsiooni kujundamine
Kõigepealt tahaksin teile seda meelde tuletada PSD-failid mida teie toodate, pole mitte ainult piltide allikas, mida klient peab heaks kiitma, vaid ka Tehniline dokumentatsioon Y lähtematerjalid arendajatele. Nii et palun hoidke oma kihte ja rühmi tellitud, organiseeritud ja nimetatud .
Arendage oma disaini. Looge kasutatud failidega eraldi fail või märkige need peidetud kihti.
kuidas mäluleke välja näeb
Öelge mulle, milliseid fonte olete milleks kasutanud. Andke mulle teada, milliseid värve, kaugusi ja kontekste kasutasite. Ma pean seda teadma.
Samuti pean teadma, kas ekstrapolaat on konkreetse funktsiooni kujundanud või mitte.
Mida ma öelda tahan, on: kui see on üldse võimalik looge väike stiilijuht kujundatava toote jaoks.
Meie huvides lisage standardsete tekstiplokkide (nt pealkirjade) lisamisel nende taha ristkülik, mis tähistab nende ümber asuvat ruumi, mis peaks võimaldama teil neid iga kord järjekindlalt paigutada. Kui see on liiga palju tööd, märkige vähemalt, milline näide dokumendis on kaanon.
Ma ei saa teile öelda, kui tihti leian, et pealkirjad on silmale paigutatavad, nii et visuaalne nende paigutamine ei toimi, kuid mõõdetuna selgub, et mõlemal on oma ruum.
Sama lugu on sisuplokidega. Kui teil on erinevate siseplokkide loend, lisage see järjekindlalt.
Ma räägin teile rohkem jaotis kujundamine sisule_, kuid palun ärge eeldage, et teie pealkirjad jäävad alati ühele reale, ja kasutage seda teavet failis.
kuidas kasutada Google'i asukohateenuseid
Ma puutun pidevalt kokku nende pealkirjadega, mille fondisuurus on 22 pikslit ja reapikkus 92 pikslit (ilmselgelt on see kopeeritud ja kleebitud põhilehe pealkirjast). Valitud seade on asjakohane, kuigi see ei muuda eksporditavat faili visuaalselt.
Tehnoloogia kujundamine
Sellel on kaks külge: Mida saaks teha Y mis on sobilik keskele.
Kuigi oleme kiiresti jõudmas punkti, kus kõik on veebisaidi väljatöötamiseks tehniliselt võimalik (ma oskan siiski piksli kaupa joonistada kui lõuendi abil), on hunnik neid lahendusi ei nad on tootmiseks valmis.
Asjaolu, et leiate näite, kus keegi edukalt ühendas WebGL 3D filtrimaskiga CSS hägustab pluss demolehe jaoks ei tähenda see, et saaksite ühe lehe akent kasutada parallakspaneelina.
Ja kui soovite tõesti tipptasemel kõndida, pidage nõu oma arendajaga enne projekti kinnitamiseks esitamine. Vastasel juhul on kliendil keeruline arveldada.
Kui soovite tõesti servi proovida ja soovite seda oma lõbuks teha, võtke minuga privaatselt ühendust. Mulle meeldib sellist asja luua just nagu sina. Lihtsalt ärge pange seda kraami eelarvega tootmisprojekti.
Nendest asjadest kaugemale - tehke piire proovides - proovige olla tundlik ja mõistlik mida peaks tegema .
Sa ei ole graafik; sa oled rohkem kui see, sa oled disainer.
Te ei kujunda mitte ainult kindlat viisi, vaid peate selle kujundama ka nii jooksma , suhelda Y käituda teatud viisil .
Disaineritele tuttava klišee leidmiseks kõikjal: Kui hea on tool, kui keegi ei saa sinna istuda?
Selle kujundamiseks peate oma disaini lisama laadimiskiiruse, teostuskiiruse ja kasutusmugavuse kujundus pildi asemel.
Püüdke saada HTML-i ja CSS-iga nii palju kui võimalik.Püüdke saada HTML-i ja CSS-iga nii palju kui võimalik. Vältige Photoshopis saadaolevate kena funktsioonide kasutamist. Ärge kasutage segu! Ära kasuta Julge faux Y Kaldkirjas faux .
Kui teie elemendi eesmärk pole pilt, ärge kasutage filtreid vähimalgi määral - välja arvatud lihtsamad varjud.
Ärge laske mul värve arvutada ega valida, sest teil on segatud värvid. Palun ärge kasutage ülekattega segades võltsitud läbipaistvaid pilte, mul on kohapeal tõesti vaja läbipaistvat pilti.
Kui kasutame kasutajaliidest, näiteks raamistikku ( Bootstrap , on paljud neist küsimustest juba lahendatud, et teada saada, kuidas seda tehakse ja kuidas saab seda muuta. Ärge minge kujundage midagi, mis pole seotud.
Kui teie kujundus pole kooskõlas raamistiku toimingutega, ei rakenda rakendus kujundust. Selle asemel alistame raamistiku valikuliselt, nii et see ei takista meie kujundust ja rakendame seda siis nullist. Koormus kahekordistub, mitte poole võrra.
Ja lõpuks, ärge kasutage saidil rohkem kui kolme fonti - või fondivarianti. Kui vajate kuut erinevat kaalu, millel kõigil on oma liuguri ja kursiiviga variandid, ei kujunda te enam veebi jaoks.
Interaktiivsuse kujundamine
See on tohutu. Ja see kiri oli algselt kirjutatud ainult selle teema jaoks. Sa pead tõesti teadma ja mõistma kõiki viise, kuidas kasutajad ja funktsionaalsus saavad suhelda.
Alustame kõige lihtsamatest asjadest: linkidest.
Linkidel pole ainult kahte olekut.
Saanud navigeerimisel pakutakse alati kujundusi link Y aktiivse lingi jaoks (tegelik leht).
Muudel juhtudel pakute tavaliselt alus ja _ hõljuvad riigid.
Kui soovite olla kõige kasutajasõbralikum, peab teil _ olekute jaoks olema erinev paigutus alus, hõljutage kursorit Y fookuskaugus ( külastatud Y aktiivne neid on ka tore omada UX-i jaoks). Ja navigeerimiseks on mõlemal link ja aktiivne link kõik eelmised osariigid .
Oh, ja kas sa ei julge muuta olekute vahelist lingi paigutust (erineva piiri laius, polsterdus jms).
node js server raspberry pi
Samamoodi on see alusetu, kui see ei tundu nuppu. Punkt. Tekstisisese tekstielemendi täitmine on vaev ja raamimata tekstitaust ei tööta kunagi.
Kuna me hakkame seda kasutama mobiilseadmes, veenduge, et erinevate interaktiivsete elementide vahel oleks piisavalt ruumi ja igaüks neist hitbox ole piisavalt suur. Ma arvan, et vähemalt 42px mõlemal teljel on norm.
Joonistage nähtamatu ristkülik või peidetud kiht hitboxid ; Veenduge, et need ei kattuks ja et kasutajate interaktsioon oleks üheselt mõistetav.
Vormielemendid on veelgi hullemad.
Kõige tavalisem juhtum, mida ma näen, on raadionupud ja märkeruudud. Standardid on koledad! Niisiis, kujundage ise ja andke mulle märgitud ja märgistamata olek ning kaaluge oma valmis tööd.
Siiski on märkeruudul terve mitmemõõtmeline olekutabel ja kõik neist tuleb kasutajale visuaalselt näidata.
Meil on järgmised olekud:
- Muudetud või mitte
- Hõljutage kursorit nr
- Fookus või mitte
- Lubatud või mitte
- Viga või mitte
Kõiki neid saab kombineerida teistega.
Keelatud takistab mõningate kombinatsioonide kasutamist (hõljutus ja fookus on keelatud tavaliselt ebaolulised), kuid mitte kõiki (märgitud ja keelatud on täiesti kehtiv ja märkeruudu informatiivne olek). Seega jõuame lõpuks 16 sisse- ja nelja olekuni, mis annab kokku vähemalt 20 erinevat olekut. Näiteks olekud, mille mulle tavaliselt annate, on selles seades kinnitatud-ei-ei-pole-lubatud ja keelatud-ei-ei-ei-lubatud.
Muudel vormielementidel ei pruugi olla kontrollimata olekut Muudetud, kuid need võivad olla tühjad või tühjad (kuvatakse kohatäite tekst). Neil võib olla ka keerukam informatsiooniline olek, nii et viga või mitte võib olla sama keeruline kui neutraalse vea hoiatamise edu.
Nii et lisaks sellele peaks see olema kohustuslik või valikuline koos selgelt määratletud indikaatorite ja siltide paigutuse ja kujundusega, lisaks sisendabi ja veatekst.
Ja kui soovite tõesti olla kasutajasõbralik, vajate määrdunud puutumatute olekute komplekti, mis näitab, et kasutaja pole kunagi varem andmeid või andmeid juba esitanud või neid on veel muudetud, kuid neid pole veel salvestatud.
Interaktiivsuse kujundamine on keeruline. Ja kui soovite raadionuppude välimust muuta, siis ärge tehke seda kahe olekuga nii kergekäeliselt.Mida ma ütlen, on: interaktiivsuse kujundamine on keeruline. Ja kui soovite raadionuppude välimust muuta, ärge minge kahe olekuga kergelt.
mis on ilutööstus
Vaid viimane punkt interaktiivsuse kujundamise kohta: otsustage, milline suhtlus välja näeb. Ma mõtlen, et otsustate, milliseid instrumente interaktiivsete elementide jaoks kasutada, ja ärge kasutage neid milleski muus.
Ei! Te ei tohi linkide tähistamiseks kasutada oma peamist värvimärki, eriti kui kasutate olulise sisu rõhutamiseks sama lahendust!
Sisu kujundus
Iga ideaalse kujunduselementi sisu täis huulepulk see on piisavalt hea, et esitada kliendile pilt, et saada visuaalse stiili heakskiit. Kuid sisudisain sellega ei alga ega lõpe.
Kui teil on ülevaade sellest, mida soovite oma sisukujundusega teha, pidage meeles, et töötate dünaamilise sisuga.Kui teil on ülevaade sellest, mida soovite oma sisukujundusega teha, pidage meeles, et töötate dünaamilise sisuga. On kaks juhtumit. Peaksite kontrollima iga sisu sisu:
- Mis siis, kui seda on liiga palju?
- Mis siis, kui neid on liiga vähe (või puuduvad täielikult)?
Vaadake, mis juhtub, kui pealkiri on naeruväärselt lühike või ebatavaliselt pikk. Kuidas peaks sisuplokk välja nägema, kui kriitilised elemendid puuduvad? Mis siis, kui pilti pole?
Kui lehe jaotisel pole sisu, ei saa me tervet jaotist - pealkirja, sisu ja kõiki - kustutada või peaksime jaotise alles jätma ja nägema midagi sellist: 'Pole veel artikleid, proovige hiljem uuesti?' Veelgi parem: „Kas soovite, et teid teavitataks selle sisu saabumisest? Telli meie uudiskiri! '
Tehke otsused! Siis Kujundage need asjad!
Kui kavandate välisest või dünaamilisest allikast laaditud voogu või sisu, ärge unustage lisada kõiki vigu ja märguandeid. Tegelikult kujundate metasisu teavitamise lehe, et näidata, kuidas see kõigile välja näeb, ja järgite seejärel disainilahenduse konventsioone, et teavitada kasutajat, kui midagi valesti läheb.
Vältige tekstiplokkide fikseeritud laiuse ja kindla kõrgusega nuppe. Ja kui ma pole seda varem öelnud, siis kui arvate, et see saab alati olema üks tekstirida, siis eksite! Vaadake nüüd parimat viisi mitmerealine .
Veenduge, et sama sisu oleks sama struktuuriga.
Kui sama pealkiri on nähtav mitmes kohas, ärge joonistage ühel või teisel juhul paksut sõna alla!
Tegelikult püütakse vältida täissuuruses pealkirjade struktuure. Samuti ärge murda teksti käsitsi ühes kohas, vaid teises kohas teisiti. Ärge murda teksti käsitsi!
Need asjad võivad teie kujundust paremaks muuta, kuid pidage meeles, et sisu lahendatakse tõenäoliselt CMS-iga ja selle dokumenteerimise eest vastutav isik ei pruugi enne avaldamist näha, kuidas see välja näeb, või tal pole isegi tööriistu käsitsi käsitsi seda murda või anda tekstile vorming.
Kujundage see samade piirangutega, mis on lõplikul sisul - fikseeritud laiusega ja automaatsed tekstikonteinerid sõna mähkimine . Kui see näeb välja selline kole, pole disain hea.
Reageerimisvõime kujundamine
See on viimasel ajal kaugele jõudnud. Vähemalt juhtudel, kui see on tõesti mõeldud mobiliseerimiseks. Üha enam oleme lasknud Bootstrapil selle teada saada.
Siiski peaksite alati teadma mõnda lihtsat põhimõtet.
Esiteks pole mobiil- ja töölaua variandid eraldi lehed. Ma tean, et sa tead. Need on lihtsalt sama lehe peegeldused.
See on täpselt sama mis vasakule joondatud tekstiga töötamine. Lause ei muuda sõnade ega tähtede järjekorda lihtsalt sellepärast, et olete pannud väikese konteineri.
Samuti tuleb sisugruppe jagada kõigi paigutuste vahel. Veergude lisamisel veenduge, et veerupausid oleksid järjepidevad.
muusikatööstuse hetkeseis
Samuti peaksid teie kokkulepped lehe erinevate versioonide puhul järgima sama struktuuri.
Mis tähendab, et kui töölaual on kaks identset üksust, peavad need olema identsed ka mobiilis.
Oh, ja kui soovite parallaksi, esitage peenelt pilt, mis on liikumiseks piisavalt suur. Kui sobitate või kärpite pilti nii, et see oleks täpselt failis, mida klient näitab, siis pole mul midagi teisaldada.
Kujunduserandid
Muidugi on alati võimalikud ka erandid. Lisaks on need vajalikud, et toode oleks atraktiivne ja tõhus. Kuid ärge lisage neid esimesse lahtrisse lahtrisse.
Kui leiate, et lahendate sama disainiprobleemi ikka ja jälle ning see ei toimi, eriti kui otsite iga kord erinevat lahendust.
Kui olete kõik ülaltoodud teinud, peaksite saavutama tõhusa, stabiilse ja järjepideva (kui mõnevõrra igava) kujunduse. Nüüd on aeg asju veidi elavdada. Vaadates tervet lehte, rääkige kliendiga, et tuvastada rahavõtted - esemed, mis neid kõige rohkem paugutavad.
Oleme koos töötama aastaid ja meie kliendid on alati olnud lõpptulemusega rahul.
Muidugi hakkan hulluks minema, kui mõni neist punktidest ilma jääb ja kui keeruka paigutuse kasutamine on õigustatud, kirjutan vajadusel JavaScripti loogika renderdamise kohta.
Astun sisse ja põhjendan vajadusel kliendi jaoks lisatööd. Olen kujundanud kujundeid ja interaktiivsust saadud paigutuste peale juba ammu, nii et sellest pole probleemi.
Ma lihtsalt loodan, et pärast selle lugemist saate mõnda neist ettepanekutest järgmisel korral meeles pidada. Loodan, et need mõjutavad teie tööd ja annavad juhiseid, kui te ei tea, mida teha. Tahaksin, et saaksite aru, et meie suhe on minu jaoks oluline ja et ma pole seda kirjutanud selleks, et teile haiget teha, vaid et meie suhe oleks parem.
Armastusega,
Teie arendaja
