Mõeldes kahe mõistusega

Nõudlus veebidisaini valdkonnas on viimase paari aasta jooksul muutunud: disainerid esiotsa oskustega ja disainioskustega esiotsa arendajad on üha enam nõudlust . Jah, võite väita, et töökohad on täiesti erinevad - ja võib-olla üks neist ei meeldi teile sirgjooneliselt -, kuid tõsi öeldes olen ma oma kuue aasta jooksul vabakutselise veebiarendajana ja kaksteist aastat disainerina töötanud õppisin, et lihtsalt veebidisaineri või lihtsalt kasutajaliidese arendajana on palju raskem läbi saada kui a-ga esiotsa insener mis teab mõlemat rolli.

Mõlema mütsi kandmisel on palju eeliseid: ainuüksi professionaalsest vaatenurgast leiate töö hõlpsamalt ja saate kõrgemat tasu, kuna olete rohkem lauale toomine .

Aga töötab hübriidse esiotsa insenerina on ka mõned puudused, millest peate teadma - ja kuidas neid lahendada. Loovkujundajana kasutate oma 'Parem aju' , pool vastutab visuaalse, ruumilise ja tajutava teabe eest - teisisõnu, kõik asjad on veebikujunduses ilusad. Tehnilise esiotsa arendajana kasutate paremal oma hullu artisti jaoks oma vasakpoolset aju, loogilist ja analüütilist partnerit.

Ja kuna olete ainult üks inimene, tähendab see seda, et töötate samaaegselt kahel täiesti erineval töökohal sama ajuga - ja see võib teie aju lausa segadusse ajada. Kui te ei saa sellega hakkama, ei tooda te kvaliteetset tööd ega kasuta oma täielikku potentsiaali. Ja kui olete vabakutseline ja üritate täita hübriidse esiotsa inseneri ametijuhendit, võistlete tõenäoliselt kaheliikmelise meeskonna (arendaja ja disainer) vastu, nii et peate töötama sama aja jooksul kvaliteeti säilitades. (Muidugi võite maksta ka nii, nagu oleksite kaheliikmeline meeskond!)

Teadmine, millist oma ajuosa ja millal kasutada, on võti protsesside sujuvamaks muutmiseks ja parimate tulemuste saavutamiseks ilma pettumusteta ja tähtaega varuks piisavalt aega. Sõltumata sellest, kus teil puudu on, vasakul või paremal, aitab see postitus mõista vajalikke oskusi ja nende omandamise viise.

Üks öö oma projektiga

Okei, valmis? Suurepärane! Oletame, et teil on palutud kujundada sait miniCloudile, alustavale idufirmale, mis pakub kohandatud VPS-lahendusi. Kust sa alustad?

Enne kui hakkan projekti juures „päris” tööd alustama, meeldib mulle sellega voodisse minna. See tähendab, et peate põhjalikult uurima oma kliendi toodet, teenuseid, konkurentsi jms. Lühidalt öeldes - googeldage seda. Pärast seda mõelge kogu päeva projekti peale: kuidas see välja näeb, kui olete sellega valmis? Võtke see õhtusöögile ja uinuge, pidades silmas oma uut, seksikat kujundust. Selle etapi ajal pidage alati pliiatsit (või mobiiltelefoni) valmis ideede kirjutamiseks, kui need teile tulevad. Selline mõttetöö aitab tavaliselt määratleda teie protsessi põhiaspekte.

Isiklik näpunäide : Olen avastanud, et sageli pakuvad mulle kõige halvemat nõu „nõuanded”, mille saan inimestelt, kes pole kliendi, projekti või veebidisainiga seotud. Nii et kui ma kuulen nende ettepanekuid, tean täpselt, mida mitte teha. See töötab minu jaoks!

Laske oma loomemahladel voolata: disainiprotsess

Nüüd, kui teil on ideid, mida edasi arendada, on aeg alustada tõelist disainiprotsessi. See koosneb kolmest etapist: 1) visand, 2) traatvõrk ja 3) graafika. See on see osa, kus lasete aju kunstilisel poolel oma asja ajada ja pliiatsi, paberi ja Photoshopiga pähe tõmmata.

Selles kujundusetapis on ülioluline, et lasete oma arendajal poolel end vaos hoida, et te ei läheks hulluks mõne veebisaidi külje pärast, mida on võimatu HTML-i, CSS-i ja jQuery abil kiiresti uuesti luua. Kui proovite brauserit uuesti leiutada, vihkab teie esiotsa arendaja teid selle eest. Ja teie esiotsa arendaja on sina —Mäletate?

Niisiis, juhinduge veebidisain (ja mõni terve mõistus), sest on äärmiselt ebatõenäoline, et te oma sõbra pulmakleitide veebisaidi ümberkujundamise abil uut teed murrate. See ei tähenda, et te ei peaks püüdma luua fantastilist ja muljetavaldavat kujundust. Pigem mõtle välja midagi, mida sa tead, et see on teostatav. Projektid, mis veebi uuesti leiutavad, tehakse tavaliselt vabal ajal, tähtaega üle pea riputamata.

Isiklik näpunäide : Kujundades meeldib mulle häälestada kõik välised katkestused ja pühendada oma jagamatu tähelepanu antud ülesandele. See tähendab, et pole telefoni, Facebooki, Twitteri, võileibade valmistamist jne. Lihtsalt töötage! See aitab mul kuulata midagi, mis pole mulle tuttav, midagi laulusõnadega, mida ma ei tea (näiteks Vokaaltrance ), muidu algab mu ADHD ja ma laulan ja tantsin hetkega. Me ei taha seda.

1. Visand : Alustan ruudulise paberist märkmiku ja paari pliiatsiga. Ruutpaber on eriti suurepärane, kuna seda saab kasutada võrgupõhiste kujunduste jaoks. Hiljem pole teil probleeme, kui tõlgite oma visandi traatvõrkudesse ja kõige lõpuks võrgupõhisele veebisaidile. MiniCloudi jaoks võib meie visand välja näha umbes selline:

Pange tähele, et eskiisi üksikasjad, nagu lumi, linnud ja pilved, on minu venitamise tulemus ja pole teie disainiprotsessi üheski osas kohustuslik, kuid näevad kenad välja.

Personal tip : There are some great resources online where you can download and print sketch sheets. One of my favorites is sneakPeekit . They also have sheets for mobile and tablet design.

1. Traadiraam : Nüüd, kui meil on põhiidee selle kohta, kuidas meie sait välja näeb, on aeg luua traadiraamid mida saame kliendile näidata. On olemas palju võimalusi et see tehtud saaks. Mõnel juhul võite sammu täielikult vahele jätta, kui tunnete, et pole vajadust. Ise kasutan Photoshop oma ideed traadiga raamida, kuna see on tööriist, mida ma kõige paremini tunnen. Seal on palju tasuta traadiraamikomplektid .EPS või .PSD, mis aitavad teil alustada sekunditega, seega pole teil vaja kõiki elemente nullist luua ja joonistada. Kui soovite Photoshopi vältida, on olemas ka mõned veebilahendused, kuid ma olen pigem võrguühenduseta tüüp. Igatahes laieneb meie oma visand , võime oma veebisaidi traadiga raamida järgmiselt:

1. Graafika : See on minu lemmikosa: meie traatvõrgu kujundamine kauniks veebisaidiks. Kuid mitte kõik pole mina. Kui olete peamiselt arendaja ja teil on disaini, värvide, tüpograafia jms osas anne, siis soovitaksin disaini inspiratsiooni saamiseks alustada muudest veebisaitidest. Neid on palju ja need on kaetud suurepäraste ideedega - kes teab, võib-olla on teie sees mõni disainer, kes ootab lihtsalt välja tulekut? Minu arvates on kasulik hoida veebisaitide järjehoidjate kausta, mis on minu arvates eriti hea välimusega või hästi kujundatud. Picasso ( ? ) ütles: „Head kunstnikud kopeerivad, aga suured kunstnikud varastavad” - see ei tähenda, et võtaksite kellegi muu kujunduse ja paneksite sellele kleebise. Selle asemel saate inspiratsiooni kellegi teise tööst ja lisage oma spinn ja lähenemine sellele.

Kujundan kogu Photoshopis. Ideaalis varustab teie klient töötlemiseks toorainet, näiteks fotosid ja koopiateksti, mida saate kasutada kohahoidjate asemel. See näeb palju parem välja, kui saadate selle redaktsioonidele.

So, for step three, we take our wireframe and bring it to life:

Isiklik näpunäide : Kui teil pole klientide materjale, kasutage aktsiafotosid ja mõnda teksti, mida pole Lorem Ipsum , et vältida selliseid küsimusi nagu 'Kas see ladinakeelne tekst on alati olemas?' ja 'Miks on meie veebisaidil hallid plokid?' Kui leiate, et kasutate Lorem ipsumit, see generaator võib tulla kasuks.

Muide: kui te ikkagi kasutate Photoshop , seal on palju lahedaid ressursse, mis muudavad teie protsessi palju kiiremaks, näiteks pistikprogrammid ja stiilid. Võiksin kirjutada neist terve postituse üksi, nii et toon välja vaid mõned, mida sageli kasutan.

1. CSS3P-d : Tasuta pilvepõhine Photoshopi pistikprogramm, mis teisendab teie kihid CSS3-ks.
2. Jumalikud elemendid : Loob WordPress teemad otse oma PSD-delt. See on suurepärane WordPressi projekti kiireks käivitamiseks. Kuigi nad ütlevad: 'HTML-i oskusi pole vaja', vajate neid tegelikult, kui soovite saada suurepäraseid tulemusi.
3. Peened mustrid : Kollektsioon tasuta mustritest, mida saate kasutada kujundustes, tavaliselt taustana. Sellised üksikasjad muudavad kõike, kui proovite oma kujundust heast vinge viia.

Isiklik näpunäide : Photoshopis kujundades veenduge kindlasti grupeerige ja nimetage oma kihid õigesti , nii et kui peate hiljem muudatusi tegema, ei pea te otsima kümneid kihte nimega 'Uus 1. kihi koopia 01'. Uskuge mind, kui teil on sadu kihte, tänate ennast. Kui soovite kihte täielikult ära kasutada, vaadake seda see juhend .

„Viiluta üles“: esiosa protsess

Pärast seda, kui olen projekteerimisetapi lõpetanud ja õnnelikult kliendilt OK saanud, olen valmis muutma oma staatilised pildid veebisaitideks. Pidage meeles, et siinkohal on meie disain ikkagi just see: disain. Meil on võimalusi minna enne, kui see on veebis valmis.

Selles etapis on aeg kasutada oma aju vasakut, analüütilisemat poolt.

Veebikujundusmaailmas tähistame seda protsessi kui 'Viilutamine' . Kuigi mõiste oli mõni aeg tagasi täpsem, enne CSS sai veebi peamiseks visuaalseks ehituskiviks ja sa pidid oma PSD või PNG iga väikese tüki üles lõikama ja panema kohutavatesse väikestesse tabelitesse, see jäi ümber.

Kui olete veebidisainer ja te ei tea veel, kuidas „kasutajaliideseid“ teha, on teil vedanud - sest kodeerimist saab õppida (erinevalt disaini loomulikust osavusest). Ma soovitaksin teil investeerida mõnda veebivideo õpetusse, näiteks Lynda.com ja tutvuge esiotsa arendamise põhitõdedega. (Täpsema ressursside loendi leiate siin .) Mõne tunni pärast liigute nullist koodi lugemiseni. Mõne päeva jooksul kirjutate selle ise. Ja mõne kuu pärast olete HTML-i ja CSS-i valdaja - siis ei saa teid peatada, kui tegemist on esiotsa inseneritöödega.

Isiklik näpunäide : Kodeerimisel meeldib mulle kasutada 'Tomatitehnika' oma aja paremaks haldamiseks ja ülesannete jaotamiseks. Erinevalt projekteerimisetapist luban end katkestada - tahtlikult. Pomodoro on suurepärane tehnika, mis aitab teil keskenduda rohkem ja ma soovitan teil seda vaadata. See on seda väärt.

Kui olete nüüd loonud (eelmises etapis) suurepärased traadiraamid vastavalt mõnele võrgule, mis teile sobib, teate täpselt, kuidas soovite oma saiti kodeerida. Kiireim viis oleks kasutada mingit tüüpi esiotsa raamistikku, näiteks Bootstrap .

Kui olete võrgupõhise kujunduse kursis, näete oma veebisaidi kõiki osi ridade ja veergudena. Enne HTML-struktuuri seadistamist, enne reaalse sisu või CSS-i lisamist, kirjutan kõigepealt ridadesse, seejärel veergudesse, seejärel põhilistesse asjadesse nagu navigeerimine, millele järgnevad teksti ja pildi kohahoidjad. See võimaldab teil esmalt põhistruktuuri alla tõmmata ja sealt üles ehitada. Seda traatraami vaadates näeme kuut rida:

1. Logo / Navigeerimine
2. Pildi liugur
3. Sissejuhatav tekst
4. Kategooria pildid
5. Viimased uudised / pakkumised
6. Jalus

Pärast nende sobitamist Bootstrapi HTML-struktuuri on meil midagi sellist:

Paljud põhiveebisaidid kasutavad sama (või sarnast) koodi ning üha enamate projektide kallal töötades näete, et veebisaidi arendamine on suures osas korduv protsess ja igale iteratsioonile pole mõtet sama koodi kirjutada . Sellepärast on raamistikud kasulikud! Ükskõik, kas lõite ise või otsustasite kasutada Bootstrapi või Sihtasutus - see pole oluline. Tähtis on see, et saate seda hiljem hooldada ja vajadusel laiendada.

Isiklik näpunäide: Kui töötan keskmise tähtajaga ja lühikese tähtajaga projekti kallal, oleks minu valik Bootstrap. Seda on lihtne kasutada, see on tundlik ja kohandatav. Samuti mängib see hästi WordPressiga.

Peaaegu kõik, mida vajate projekti jaoks, on varem tehtud ja seejärel paar korda uuesti tehtud. Nii et enne peamist seina otsimist otsige ringi ja küsige teistelt, kas neil on ettepanekuid. Enamikul suurtest raamistikest on väga aktiivsed kogukonnad, mis loovad teie töö hõlbustamiseks täiendava koodi ja pistikprogramme. Nii et tehke tööd targalt, mitte raskelt - ja õppige iga päev. Ja kui teil on vaja midagi, mida keegi pole varem ehitanud, siis murrate uut teed! Kirjutage sellest ja jagage seda kogukonnaga - see aitab teil kujundaja ja arendajana kasvada.

CMS-i valimine

Mõne esiotsa inseneriprojekti puhul saate selle valmis niipea, kui teie disain on reaalajas veebis olemas. Need on tavaliselt väiksemad saidid (nt väikeettevõtetele, juristidele, hambaarstidele jne). Kuid sageli tahate teie või teie klient veebisaidi sisu üle kontrolli saada. Sel juhul vajate sisuhaldussüsteemi ( CMS ). CMS-i eesmärk on võimaldada teil veebisaidil sisu redigeerida ja avaldada, ilma et peaksite kõiki uusi detaile käsitsi kodeerima või isegi üldse kodeerima.

Kõigist suurtest CMS-idest nimetaksin ennast WordPressi evangelistiks: kiidan seda teistele arendajatele, eriti algajatele, selle mitmekülgsuse, kasutusmugavuse, arenduse põhjaliku dokumentatsiooni, suure kogukonna, suure hulga tasuta pistikprogrammide tõttu. ja nii edasi…

Kui keegi ütleb teile, et Joomla! on parem, eriti väiksemate projektide puhul - siis nad ei tea, millest nad räägivad. Igatahes, ärge võtke ainult minu sõna: laadige alla WordPress ja Joomla! starditeemad, heitke pilk igale kaustale ja küsige siis endalt - mida soovite oma uues esiotsa rollis uurida?

Mul oleks selle teema kirjutamiseks vaja tervet artiklit, kuid usaldage mind selles artiklis täpselt nii, nagu te usaldaksite Baz Luhrmann päikesekaitsekreemil .

Isiklik näpunäide : WordPressil on see suurepärane võime olla selline, nagu soovite. Näiteks võib WordPress olla ostukorvi lahendus kõigile väikestele ja keskmise suurusega e-kaubanduse projektidele, kasutades pistikprogrammi nimega woocommerce . See on turvaline, hõlpsasti kasutatav, hõlpsasti arendatav ja hõlpsasti integreeritav mis tahes olemasoleva WordPressi teemaga.

Kui teie projekt on eriti väike ja vajate lihtsalt lihtsat CMS-i, mida saab rakendada ilma kodeerimisoskusteta, soovitaksin teil kasutada CouchCMS . Vaid paari XHTML-märgendiga saate selle mõne minuti jooksul käima ja isegi teie vanaema teab, kuidas seda kasutada.

Veebisaidi hooldamine

Pärast seda, kui olete oma veebisaidi tarninud ja teil on veel üks rahulolev klient, jääb teile vaid saidi hooldamine. Kui olete loonud lihtsa HTML-saidi, millel pole uut sisu, olete tõenäoliselt valmis.

Kui olete CMS-i kasutanud, peate veenduma, et tehnoloogia on alati ajakohane nii et te väldiksite midagi turvarikkumised . See hõlmab CMS-i ennast ja kõiki teie kasutatavaid pistikprogramme. Kui võtsite minu nõu ja kasutasite WordPressi, teavitatakse teid iga saadaoleva värskenduse kohta e-posti teel.

See on minu protsessi ballpark. Tõsi, see ei tööta kõigile ja kindlasti ei kehti see kõigi projektide puhul. Kuid ma loodan, et see aitab teil sealsetel disaineritel omandada oskusi, mida vajate, et saada suurepärasteks esiinsenerideks, ja vastupidi, et saaksime jätkata oma talentide arendamist esiotsa arendajatena.

Ma saan teile näidata ainult ust. Teie olete see, kes selle läbi peab käima. - Morpheus, maatriks

P.S .: Minu lehelt leiate ülaltoodud malli PSD ja muud lahedad kujundused dribbble portfell .