Myslenie dvoma mysľami

Dopyt na scéne webdizajnu sa za posledných pár rokov zmenil: návrhári s front-end zručnosťami a front-end vývojári s dizajnérskymi schopnosťami sú čoraz viac v dopyte . Áno, môžete namietať, že pracovné miesta sú úplne odlišné - a možno sa vám jedna z nich priamo nepáči - ale pravdu povediac, za mojich šesť rokov ako webový vývojár na voľnej nohe a dvanásť rokov ako dizajnér som sa dozvedel, že je oveľa ťažšie obísť sa iba ako webový dizajnér alebo ako front-endový vývojár ako ako frontový inžinier že pozná obe roly.

Nosenie oboch klobúkov má veľa výhod: iba z profesionálneho hľadiska môžete ľahšie nájsť prácu a účtovať vyššiu sadzbu, pretože ste prinesie viac na stôl .

ale pracuje ako hybridný front-end inžinier má tiež niekoľko nevýhod, o ktorých potrebujete vedieť - a ako ich obísť. Ako kreatívny dizajnér budete používať svoje „Pravý mozog“ , polovica zodpovedná za vizuálne, priestorové a vnímavé informácie - inými slovami, všetko pekné vo webovom dizajne. Ako technický front-endový vývojár využijete svoj „ľavý mozog“, logického a analytického partnera pre svojho šialeného umelca vpravo.

A keďže ste iba jedna osoba, znamená to, že pracujete súčasne na dvoch úplne odlišných pracovných miestach s rovnakým mozgom - a to môže byť pre váš mozog úplne mätúce. Ak to nezvládnete, nebudete produkovať kvalitnú prácu alebo nevyužijete svoj plný potenciál. A ak ste na voľnej nohe a snažíte sa splniť hybridný popis pracovnej pozície pre front-end inžinierstvo, pravdepodobne súťažíte s tímom dvoch ľudí (vývojár a dizajnér), takže budete musieť pracovať v rovnakom časovom rámci, zatiaľ čo zachovanie kvality. (Samozrejme, môžete dostať aj zaplatené, akoby ste boli tímom dvoch ľudí!)

Vedieť, ktorá časť vášho mozgu má byť použitá a kedy ju treba použiť, je kľúčom k zefektívneniu vašich procesov a dosiahnutiu najlepších výsledkov s nulovou frustráciou a dostatkom času, ktorý musíte venovať svojmu termínu. Bez ohľadu na to, kde vám chýbajú, vľavo alebo vpravo, tento príspevok vám pomôže pochopiť zručnosti, ktoré potrebujete, a spôsoby, ako ich získať.

Jedna noc s vašim projektom

Ok, pripravený? Skvelé! Povedzme, že ste boli požiadaní, aby ste navrhli web pre miniCloud, začínajúci startup ponúkajúci vlastné riešenia VPS. Kde zacnes

Predtým, ako začnem s „skutočnou“ prácou na projekte, s ním rád chodím do postele. To znamená robiť dôkladný prieskum o produktoch, službách, konkurencii atď. Vášho klienta. Stručne povedané, vykašlite sa na to. Potom premýšľajte o projekte celý deň: Ako to bude vyzerať, keď s ním skončíte? Vezmite si ju na večeru a zaspajte so svojím novým, sexi dizajnom. V tejto fáze majte vždy pripravenú ceruzku (alebo mobilný telefón) na zapisovanie nápadov, ktoré vám prídu. Tento druh práce s mysľou zvyčajne pomáha definovať kľúčové aspekty vášho procesu.

Osobný tip : Zistil som, že často mi „najhoršia rada“ dá „radu“, ktorú dostanem od ľudí, ktorí nesúvisia s klientom, projektom alebo webovým dizajnom. Takže keď počujem ich návrhy, viem presne, čo nemám robiť. Funguje to pre mňa!

Nechajte svoje kreatívne šťavy plynúť: proces návrhu

Teraz, keď už máte nejaké nápady, ktoré treba začať, je čas začať so skutočným procesom návrhu. Skladá sa z troch krokov: 1) skica, 2) drôtový model a 3) grafika. Toto je časť, kde necháte umeleckú polovicu mozgu, aby urobila svoje, a zbláznite sa do ceruzky, papiera a Photoshopu.

Počas tejto fázy návrhu je rozhodujúce, aby ste sa na svojej vývojárskej stránke nechali držať krok s kontrolou, aby ste sa nezbláznili pri niektorých aspektoch webu, ktoré bude takmer nemožné rýchlo znovu vytvoriť pomocou HTML, CSS a jQuery. Ak sa pokúsite prehliadač znova nájsť, váš front-endový vývojár vás za to bude nenávidieť. A váš front-endový vývojár je ty —Pomínať?

Takže sa riaďte najlepšími postupmi v vzhľad stránky (a nejaký zdravý rozum), pretože je vysoko nepravdepodobné, že prerazíte akúkoľvek novú pôdu prepracovaním webového sídla svadobných šiat svojho priateľa. To neznamená, že by ste sa nemali usilovať o vytvorenie fantastického a pôsobivého dizajnu. Ale radšej vymyslite niečo, o čom viete, že je to možné. Projekty, ktoré opätovne vymýšľajú web, sa zvyčajne realizujú vo voľnom čase bez toho, aby vám nejaký termín visel nad hlavou.

Osobný tip : Keď navrhujem, rád vyladím všetky vonkajšie prerušenia a svoju nerozdelenú pozornosť venujem práve danej úlohe. To znamená, že žiadny telefón, žiadny Facebook, žiadny Twitter, žiadne sendviče atď. Pracujte! Pomáha mi počúvať niečo, čo nepoznám, niečo, čo nepoznám (napríklad Vokálny trance ), inak sa moje ADHD naštartuje a o chvíľu spievam a tancujem. To nechceme.

1. Skica : Začínam so štvorcovým papierovým zošitom a pár ceruzkami. Štvorcový papier je obzvlášť skvelý, pretože ho môžete použiť na vzory založené na mriežke. Neskôr nebudete mať problém, keď svoj náčrt preložíte do drôtových modelov a na samom konci do mriežkovaného webu. Pre miniCloud môže naša skica vyzerať asi takto:

Upozorňujeme, že ďalšie podrobnosti náčrtu, ako napríklad sneh, vtáky a oblaky, sú výsledkom môjho odkladania a nie sú povinné v žiadnej časti vášho procesu návrhu, ale vyzerajú pekne.

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. Drôtený rám : Teraz, keď máme základnú predstavu o tom, ako bude vyzerať náš web, je čas vytvoriť drôtové modely ktoré môžeme klientovi ukázať. Tam sú veľa spôsobov aby to bolo hotové. V niektorých prípadoch môžete krok úplne preskočiť, ak máte pocit, že to nie je potrebné. Osobne používam Photoshop previesť svoj nápad do kostry, pretože je to nástroj, ktorý poznám najviac. Existuje veľa zadarmo drôtové súpravy v .EPS alebo .PSD, ktoré vám pomôžu začať v priebehu niekoľkých sekúnd, takže už nemusíte vytvárať a kresliť všetky svoje prvky úplne od začiatku. Existuje niekoľko online riešení, ak sa chcete vyhnúť Photoshopu, ale som skôr offline typ človeka. Každopádne rozširujeme našu skica , môžeme našu webovú stránku prepojiť napríklad takto:

1. Grafika : Toto je moja obľúbená časť: transformácia nášho drôtového modelu na krásny web. Ale nie každý som ja. Ak ste predovšetkým vývojár a máte štíhly talent na dizajn, farby, typografiu atď., Navrhujem pre inšpiráciu začať s inými webmi. Je ich veľa a sú pokryté skvelými nápadmi - ktovie, možno je vo vás dizajnér, ktorý len čaká na vydanie? Považujem za užitočné udržiavať priečinok so záložkami webov, ktoré mi pripadajú obzvlášť dobre vyzerajúce alebo dobre navrhnuté. Picasso ( ? ) povedal: „Dobrí umelci kopírujú, ale veľkí umelci kradnú“ - to neznamená, že si vezmete dizajn niekoho iného a nalepíte naň svoju nálepku. Namiesto toho sa nechajte inšpirovať prácou niekoho iného a pridajte k nej svoj vlastný spin a prístup.

Všetky svoje návrhy navrhujem vo Photoshope. V ideálnom prípade vám váš klient dodá suroviny, s ktorými môžete pracovať, napríklad fotografie a kopírovanie textu, ktoré môžete použiť namiesto zástupných znakov. Keď to pošlete do revízií, vyzerá to oveľa lepšie.

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

Osobný tip : Ak nemáte materiály pre klientov, použite fotky z fotobanky a nejaký text, ktorý nie je Lorem Ipsum , aby sa predišlo otázkam typu „Bude tam ten text v latinčine vždy?“ a „Prečo sú na našom webe šedé bloky?“ Ak zistíte, že používate Lorem ipsum, tento generátor môže prísť vhod.

Mimochodom: ak nakoniec použijete Photoshop , existuje veľa skvelých zdrojov, vďaka ktorým bude váš proces oveľa rýchlejší, napríklad doplnky a štýly. Sám by som o nich mohol napísať celý príspevok, tak len upozorním na pár, ktoré často používam.

1. CSS3Ps : Bezplatný cloudový doplnok Photoshop, ktorý prevádza vaše vrstvy na CSS3.
2. Božské živly : Tvorí WordPress témy priamo z vašich diskov PSD. Je to skvelé pre rýchle spustenie vášho projektu WordPress. Aj keď sa hovorí „Nie sú potrebné žiadne zručnosti HTML“, v skutočnosti ich budete potrebovať, ak chcete získať úžasné výsledky.
3. Jemné vzory : Zbierka voľných vzorov, ktoré môžete použiť vo svojich návrhoch, zvyčajne ako pozadie. Podrobnosti, ako sú tieto, sú rozdielne, keď sa snažíte svoje návrhy pretaviť z dobrého do úžasného.

Osobný tip : Pri navrhovaní vo Photoshope sa uistite, že áno zoskupiť a správne pomenovať svoje vrstvy , takže keď budete neskôr musieť vykonať zmeny, nemusíte prehľadávať desiatky vrstiev s názvom „Nová vrstva 1, kópia 01“. Verte mi, že keď budete mať stovky vrstiev, poďakujete sa. Ak máte záujem o úplné využitie svojich vrstiev, vyskúšajte ich tejto príručky .

„Slice It Up“: Proces front-end

Keď skončím s fázou návrhu a od spokojného klienta dostanem v poriadku, som pripravený zmeniť moje statické obrázky na živé webové stránky. Pamätajte, že v tomto okamihu je náš dizajn stále len tým: dizajnom. Máme pred sebou cestu, kým nebude pripravený na web.

V tejto fáze je čas použiť ľavú, analytickejšiu časť mozgu.

Vo svete webdizajnu tento proces označujeme ako „Krájanie“ . Aj keď termín bol presnejší už pred časom, predtým CSS sa stal hlavným vizuálnym stavebným kameňom webu a museli ste rozstrihnúť každý kúsok svojho súboru PSD alebo PNG a vložiť ho do strašných malých tabuliek, ktoré zostali okolo.

Ak ste webový dizajnér a ešte neviete, ako „front-end“ mať, máte šťastie - pretože programovanie sa dá naučiť (na rozdiel od prirodzeného talentu na dizajn). Odporučil by som vám investovať do niektorých online videonávodov, ako je Lynda.com a prečítajte si základné informácie o vývoji front-endu. (Definitívnejší zoznam zdrojov možno nájsť tu .) V priebehu niekoľkých hodín prejdete od nuly k čítaniu kódu. A za pár dní to napíšeš sám. A za pár mesiacov budete majstrom v HTML a CSS - potom vám nebude prekážať, pokiaľ ide o front-end inžinierske práce.

Osobný tip : Pri programovaní rád používam „Paradajková technika“ lepšie si spravovať čas a prideľovať úlohy. Na rozdiel od fázy návrhu sa nechávam prerušovať - ​​úmyselne. Pomodoro je skvelá technika, ktorá vám pomáha zvýšiť sústredenie a odporúčam vám pozrieť sa na ňu. Stojí to za to.

Ak ste teraz vytvorili vynikajúce drôtové rámce (v predchádzajúcej fáze) podľa mriežky, ktorá vám vyhovuje, budete presne vedieť, ako chcete kódovať svoje stránky. Najrýchlejším spôsobom by bolo použiť nejaký front-endový rámec Bootstrap .

Keď sa dostanete na mriežkový dizajn, začnete vidieť každú časť svojho webu ako hromadu riadkov a stĺpcov. Prvá vec, ktorú urobím, keď nastavujem svoju štruktúru HTML, je to skôr, ako pridám skutočný obsah alebo CSS, do riadkov, potom do stĺpcov, potom základné veci, ako je navigácia, a potom zástupné symboly textu a obrázkov. To vám umožní najskôr dostať základnú štruktúru a odtiaľ stavať. Pri pohľade na tento drôtový model môžeme vidieť šesť riadkov:

1. Logo / Navigácia
2. Posuvník obrázka
3. Úvodný text
4. Kategórie obrázkov
5. Posledné správy / ponuky
6. Päta

Keď ich zapadneme do štruktúry HTML Bootstrap, mali by sme niečo také:

Mnoho základných webových stránok používa rovnaký (alebo podobný) kód a pri práci na ďalších a ďalších projektoch uvidíte, že vývoj webových stránok je prevažne iteračný proces a nemá zmysel písať rovnaký kód pre každú iteráciu. . Preto sú rámce užitočné! Či už ste si vytvorili vlastný alebo ste sa rozhodli použiť Bootstrap alebo Nadácia - to nevadí. Dôležité je, že ho môžete neskôr udržiavať a v prípade potreby rozšíriť.

Osobný tip: Ak pracujem na projekte strednej triedy s krátkym termínom, moja voľba by bola Bootstrap. Je to jednoduché na použitie, rýchle a prispôsobiteľné. Výborne sa hrá aj s WordPress.

Takmer všetko, čo potrebujete pre projekt, bolo vyrobené predtým a potom bolo opakovane dvakrát vyrobené. Ak teda hľadáte akúkoľvek dôležitú úlohu, porozhliadnite sa a opýtajte sa ostatných, či majú návrhy, skôr ako pôjdete hlavou cez stenu. Väčšina veľkých rámcov má veľmi aktívne komunity, ktoré vytvárajú ďalší kód a doplnky, aby vám uľahčili prácu. Pracujte teda inteligentne, nie usilovne - a učte sa každý deň. A ak potrebujete niečo, čo ešte nikto nevybudoval, dobre, tak prerazíte novú cestu! Píšte o tom a zdieľajte s komunitou - pomôže vám to rásť ako dizajnér a vývojár.

Výber CMS

V prípade niektorých prvotriednych inžinierskych projektov budete hotoví, hneď ako sa váš návrh objaví na živej webovej stránke. Spravidla ide o menšie weby (napr. Pre malé podniky, právnikov, zubárov atď.). Často však vy alebo váš klient budete chcieť mať kontrolu nad obsahom webových stránok. V takom prípade potrebujete systém správy obsahu ( CMS ). Cieľom CMS je umožniť vám upravovať a publikovať obsah na webovú stránku bez toho, aby ste museli každý nový kód ručne alebo dokonca vôbec kódovať.

Zo všetkých veľkých CMS by som si hovoril Evanjelista WordPressu: Dávam si na ňom pozor nad ostatnými vývojármi, najmä začiatočníkmi, kvôli jeho univerzálnosti, ľahkému použitiu, komplexnej dokumentácii pre vývoj, veľkej komunite, veľkému množstvu bezplatných doplnkov, a tak ďalej a tak ďalej…

Ak vám niekto povie, že Joomla! je lepšia, najmä pre menšie projekty - potom nevedia, o čom hovoria. V každom prípade, neberte len moje slovo: stiahnite si WordPress a Joomla! začiatočné témy, pozrite sa na jednotlivé priečinky a potom si položte otázku - ktoré informácie by ste chceli preskúmať vo svojej novej front-end role?

Potreboval by som celý článok, ktorý by napísal o tejto téme, ale verte mi v tento, rovnako ako by ste verili vy Baz Luhrmann na kréme na opaľovanie .

Osobný tip : WordPress má túto skvelú schopnosť byť čímkoľvek chcete. Napríklad WordPress môže byť riešením nákupného košíka pre akýkoľvek malý až stredne veľký projekt elektronického obchodu pomocou doplnku s názvom woocommerce . Je bezpečný, ľahko použiteľný, ľahko sa vyvíja a ľahko sa integruje do akejkoľvek existujúcej témy WordPress.

Ak je váš projekt obzvlášť malý a potrebujete jednoduchý CMS, ktorý je možné implementovať bez akýchkoľvek kódovacích schopností, odporúčam vám použiť CouchCMS . Iba s niekoľkými značkami XHTML ho môžete uviesť do prevádzky v priebehu niekoľkých minút a dokonca aj vaša babička bude vedieť, ako ho používať.

Údržba vášho webu

Po dodaní vašich webových stránok a získaní ďalšieho spokojného zákazníka vám ostáva už iba ich údržba. Ak ste vytvorili jednoduchý web HTML, ktorý nebude obsahovať nový obsah, ste pravdepodobne hotoví.

Ak ste používali CMS, musíte sa ubezpečiť, že: technológia je vždy aktuálna aby ste sa akejkoľvek vyhli narušenia bezpečnosti . Patrí sem samotný CMS a všetky doplnky, ktoré ste použili. Ak ste využili moju radu a použili ste WordPress, budete informovaní e-mailom o všetkých dostupných aktualizáciách.

Toto je hlavný bod môjho procesu. Je pravda, že to nebude fungovať pre všetkých a určite to nebude platiť pre každý projekt. Ale dúfam, že vám to pomôže dizajnérom tam načerpať zručnosti, ktoré potrebujete, aby ste sa stali skvelými front-end inžiniermi, a naopak, aby sme mohli ďalej rozvíjať svoj talent ako front-end vývojárov.

Môžem ti ukázať iba dvere. To musíš prejsť ty. - Morpheus, Matrix

P.S .: PSD vyššie uvedenej šablóny a ďalšie chladné vzory nájdete na mojej driblovať portfólio .