Мислене с два съзнания

Търсенето в рамките на сцената на уеб дизайна се промени през последните няколко години: дизайнери с предни крайни умения и предни крайни разработчици с дизайнерски умения, са все по-търсени . Да, бихте могли да спорите, че работните места са напълно различни - и може би вие директно не харесвате едно от тях - но честно казано, в моите шест години като уеб разработчик на свободна практика и дванадесет години като дизайнер, научих, че е много по-трудно да се справя само като уеб дизайнер или просто разработчик от преден край, отколкото като преден край инженер който знае и двете роли.

Носенето на двете шапки има много предимства: само от професионална гледна точка можете да намерите работа по-лесно и да таксувате по-висока цена, защото сте привеждане на повече на масата .

Но работи като хибриден инженер отпред има и няколко недостатъка, за които трябва да знаете - и как да ги заобиколите. Като креативен дизайнер ще използвате вашия „Десен мозък“ , половината, отговорна за визуална, пространствена и перцептивна информация - с други думи, всички неща, красиви в уеб дизайна. Като технически фронт енд разработчик ще използвате „левия мозък“, логичния и аналитичен партньор на лудия ви художник отдясно.

И тъй като сте само един човек, това означава, че работите на две напълно различни работни места едновременно, с един и същ мозък - и това може да стане направо объркващо за мозъка ви. Ако не можете да се справите, няма да произведете качествена работа или да разгърнете пълния си потенциал. И ако сте на свободна практика, опитвайки се да се съобразите с хибридната длъжностна характеристика от предния край, вероятно се състезавате срещу екип от двама (разработчик и дизайнер), така че ще трябва да работите в един и същи период от време, докато запазване на качеството. (Разбира се, можете да получите и заплащане, сякаш сте екип от двама!)

Знанието коя част от мозъка ви да се използва и кога да се използва е ключът към рационализирането на вашите процеси и постигане на най-добри резултати с нулево неудовлетворение и достатъчно време, за да отделите крайния срок. Независимо къде ви липсва, отляво или отдясно, тази публикация ще ви помогне да разберете уменията, от които се нуждаете, и начините, по които можете да ги придобиете.

Стойка за една нощ с вашия проект

Добре, готови ли сте? Страхотен! Да приемем, че сте били помолени да проектирате сайта за miniCloud, начинаещ стартъп, предлагащ персонализирани VPS решения. Къде да започнете?

Преди да започна каквато и да е „истинска“ работа по даден проект, обичам да си лягам с него. Това означава да направите задълбочено проучване на продукта, услугите, конкуренцията и т.н. на вашия клиент. Накратко, Google по дяволите. След това цял ден мислете за проекта: Как ще изглежда, когато приключите с него? Занесете го на вечеря и заспивайте с новия си секси дизайн. По време на този етап винаги имайте молив (или мобилен телефон), готов да си запишете идеи, когато идват при вас. Този вид работа с ума обикновено помага да се определят ключовите аспекти на вашия процес.

бариери пред кръстосаната културна комуникация

Личен съвет : Открих, че често „съветите“, които получавам от хора, които не са свързани с клиента, проекта или уеб дизайна, ще ми дадат най-лошия съвет. Така че, когато чуя техните предложения, знам точно какво да не правя. При мен работи!

Нека вашите творчески сокове текат: Процесът на проектиране

Сега, когато имате някои идеи, които да надградите, е време да започнете истинския процес на проектиране. Това се състои от три стъпки: 1) скица, 2) каркасна рамка и 3) графика. Това е частта, в която оставяте на артистичната половина на мозъка да си свърши работата и да се побърка с молив, хартия и Photoshop.

По време на този етап на проектиране е от решаващо значение да оставите вашата страна за „разработчици“ да ви държи под контрол, за да не полудеете от някои аспекти на уебсайта, които ще бъдат почти невъзможни за бързо пресъздаване с помощта на HTML, CSS и jQuery. Ако се опитате да преоткриете браузъра, вашият преден разработчик ще ви мрази за това. А вашият преден разработчик е Вие -помня?

Така че, бъдете ръководени от най-добрите практики на уеб дизайн (и някакъв здрав разум), защото е малко вероятно да пробиете нещо ново, като препроектирате уебсайта на сватбената рокля на вашия приятел. Това не означава, че не трябва да се стремите да създадете фантастичен и впечатляващ дизайн. Но по-скоро измислете нещо, което знаете, че е осъществимо. Проектите, които преоткриват мрежата, обикновено се правят през свободното ви време, без да виси краен срок над главата ви.

Личен съвет : Когато проектирам, обичам да настройвам всички външни прекъсвания и да отделям неделимото си внимание на разглежданата задача. Това означава, че няма телефон, няма Facebook, няма Twitter, няма да се правят сандвичи и т.н. Просто работи! Помага ми да слушам нещо, с което не съм запознат, нещо с текстове, които не знам (като Вокален транс ), иначе ADHD ми започва и пея и танцувам за нула време. Ние не искаме това.

1. Скица : Започвам с тетрадка от хартия на квадрат и няколко молива. Хартията на квадрат е особено страхотна, защото можете да я използвате за проекти, базирани на мрежа. По-късно няма да имате проблем, когато преведете скицата си в телени рамки и в самия край на уебсайт, базиран на мрежа. За miniCloud нашата скица може да изглежда по следния начин:

Моля, обърнете внимание, че допълнителни подробности върху скицата, като сняг, птици и облаци, са плод на моето отлагане и не са задължителни в която и да е част от процеса на проектиране, но изглеждат добре.

настройка на производителността на sql server 2008

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. Телена рамка : Сега, когато имаме основна идея за това как ще изглежда нашият сайт, е време да създадем телени рамки което можем да покажем на клиента. Има a много начини за да се направи това. В някои случаи можете да пропуснете изцяло стъпката, ако смятате, че няма нужда. Лично аз използвам Photoshop да оформя идеята си, тъй като това е инструментът, с който съм най-запознат. Има много безплатни каркасни комплекти в .EPS или .PSD, които стартират за секунди, така че няма нужда да създавате и рисувате всичките си елементи от нулата. Има и няколко онлайн решения, ако искате да избегнете Photoshop, но аз съм по-скоро офлайн тип. Както и да е, разширяване на нашите скица , може да изградим нашия уебсайт така:

1. Графика : Това е любимата ми част: трансформирането на нашата каркасна мрежа в красив уебсайт. Но не всеки съм аз. Ако сте предимно разработчик и имате тънък до никакъв талант за дизайн, цветове, типография и т.н., бих препоръчал да започнете с други уебсайтове за вдъхновение в дизайна. Има много от тях и те са обхванати от страхотни идеи - кой знае, може би във вас има дизайнер, който просто чака да излезе? Намирам за полезно да запазя папка с отметки на уебсайтове, които намирам за особено добре изглеждащи или добре проектирани. Пикасо ( ? ) каза, „Добрите художници копират, но великите художници крадат“ - това не означава, че вземате някой друг дизайн и поставяте стикера си върху него. Вместо това се вдъхновете от работата на някой друг и добавете свой собствен завъртане и подход към него.

Изработвам всичките си проекти във Photoshop. В идеалния случай вашият клиент ще ви достави суровини, с които да работите, като снимки и копиране на текст, който можете да използвате вместо заместители. Изглежда много по-добре, когато го изпратите на ревизии.

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

Личен съвет : Ако нямате материали за клиенти, използвайте стокови снимки и някакъв текст, който не е Lorem Ipsum , за да се избегнат въпроси като „Този ​​текст на латиница винаги ли ще бъде налице?“ и „Защо на нашия уебсайт има сиви блокове?“ Ако все пак откриете, че използвате Lorem ipsum, този генератор може да дойде по-удобно.

Между другото: ако все пак използвате Photoshop , има много страхотни ресурси, които ще направят процеса ви много по-бърз, като добавки и стилове. Бих могъл да напиша цял пост за тях сам, така че просто ще посоча няколко, които често използвам.

1. CSS3P : Безплатна приставка за Photoshop в облак, която преобразува слоевете ви в CSS3.
2. Божествени елементи : Създава WordPress теми директно от вашите PSD. Чудесно е за бързо стартиране на вашия WordPress проект. Въпреки че казват „Не са необходими HTML умения“, всъщност ще ви трябват, ако искате да получите страхотни резултати.
3. Фини модели : Колекция от безплатни модели, които да използвате във вашите дизайни, обикновено като фон. Детайли като тези имат голямо значение, когато се опитвате да превърнете вашите дизайни от добри в страхотни.

Личен съвет : Когато проектирате в Photoshop, уверете се, че сте групирайте и наименувайте правилно слоевете си , така че когато трябва да направите промени по-късно, не е нужно да търсите в десетки слоеве, наречени „Нов слой 1 копие 01“. Повярвайте ми, когато имате стотици слоеве, ще благодарите на себе си. Ако се интересувате да използвате напълно слоевете си, разгледайте това ръководство .

“Slice It Up”: Процесът отпред

След като приключих с етапа на проектиране и получих ОК от щастливия клиент, съм готов да превърна статичните си изображения в уеб сайтове на живо. Не забравяйте, че на този етап нашият дизайн все още е точно това: дизайн. Имаме начини да преминем, преди да е готов за мрежата.

На този етап е време да използвате лявата, по-аналитична половина на мозъка си.

гъвкаво сравнение на софтуер за управление на проекти

В света на уеб дизайна ние наричаме този процес като „Нарязване“ . Въпреки че терминът беше по-точен преди време, преди CSS дойде да бъде основният визуален градивен елемент на мрежата и трябваше да изрежете всяко малко парче от вашия PSD или PNG и да го поставите в ужасяващи малки маси, той остана наоколо.

Ако сте уеб дизайнер и все още не знаете как да „предавате“, имате късмет - защото кодирането може да се научи (за разлика от естествената способност за дизайн). Бих препоръчал да инвестирате в някои онлайн видео уроци като Lynda.com и разгледайте основите на разработката отпред. (Може да се намери по-окончателен списък с ресурси тук .) След броени часове ще преминете от нула към четене на кода. И след броени дни ще го напишете сами. И след няколко месеца ще бъдете майстор на HTML и CSS - тогава няма да ви спре, когато става въпрос за инженерни работни места от предния край.

Личен съвет : Когато кодирам, обичам да използвам „Доматена техника“ за да управлявам по-добре времето си и да разпределям задачи. За разлика от етапа на проектиране, аз си позволявам да бъда прекъсван - нарочно. Pomodoro е чудесна техника, която ви помага да подобрите фокуса си и ви препоръчвам да погледнете. Заслужава си.

Сега, ако сте създали няколко страхотни рамки (в предишния етап) според някаква мрежа, която ви е удобна, ще знаете точно как искате да бъде кодиран вашият сайт. Най-бързият начин би бил да се използва някакъв фронт-фреймворк, като Bootstrap .

След като схванете дизайна, базиран на мрежа, ще започнете да виждате всяка част от уебсайта си като куп редове и колони. Първото нещо, което правя, когато настройвам HTML структурата си, преди да добавя каквото и да е истинско съдържание или CSS, е да пиша в редовете, след това в колоните, след това основни неща като навигация, последвано от заместители на текст и изображения. Това ви позволява първо да свалите основната структура и да изградите от там. Разглеждайки този каркас, можем да видим шест реда:

1. Лого / Навигация
2. Плъзгач на изображението
3. Въведение текст
4. Изображения на категории
5. Последни новини / оферти
6. Долен колонтитул

След като ги впишем в HTML структурата на Bootstrap, ще имаме нещо подобно:

за какво се използва c програмирането

Много основни уебсайтове използват един и същ (или подобен) код и докато работите по все повече проекти, ще видите, че разработването на уебсайтове е до голяма степен итеративен процес и няма смисъл да пишете един и същ код на всяка итерация . Ето защо рамките са полезни! Независимо дали сте създали свой собствен или сте решили да използвате Bootstrap или Фондация - няма значение. Важното е, че можете да го поддържате по-късно и да го разширявате, ако е необходимо.

Личен съвет: Ако работя по среден проект с ограничен срок, изборът ми ще бъде Bootstrap. Той е лесен за използване, отзивчив и персонализиран. Освен това играе добре с WordPress.

Почти всичко, от което се нуждаете за даден проект, е направено преди и след това е преработено няколко пъти. Така че за всяка основна задача потърсете наоколо и попитайте другите дали имат предложения, преди да преминете главно през стена. Повечето от големите рамки имат много активни общности, които създават допълнителен код и приставки, за да улеснят работата ви. Така че работете умно, а не усилено - и се учете всеки ден. И ако имате нужда от нещо, което никой не е изграждал досега, тогава вие пробивате нова почва! Пишете за това и споделяйте с общността - това ще ви помогне да израствате като дизайнер и разработчик.

Избор на CMS

За някои предни инженерни проекти ще приключите веднага щом дизайнът ви съществува на уеб страница на живо. Това обикновено са по-малки сайтове (напр. За малък бизнес, адвокати, зъболекари и т.н.). Но често вие или вашият клиент ще искате да имате контрол върху съдържанието на уебсайта. В този случай се нуждаете от система за управление на съдържанието ( CMS ). Целта на CMS е да ви позволи да редактирате и публикувате съдържание на уеб страница, без да се налага да кодирате всеки нов детайл на ръка или дори код изобщо.

От всички големи CMS-та бих се нарекъл WordPress Evangelist: радвам се на това за други разработчици, особено за начинаещи, поради неговата гъвкавост, лекота на използване, изчерпателна документация за разработка, голяма общност, голям брой безплатни приставки, и така нататък…

Ако някой ви каже, че Joomla! е по-добре, особено за по-малки проекти - тогава те не знаят за какво говорят. Както и да е, не просто ми вярвайте на думата: изтеглете WordPress и Joomla! начални теми, разгледайте всяка папка и след това се запитайте - кое искате да проучите в новата си роля отпред?

Ще ми трябва цяла статия, за да напиша по тази тема, но повярвайте ми по тази, точно както вие бихте се доверили Baz Luhrmann върху слънцезащитен крем .

истинската цена на калкулатора за служител

Личен съвет : WordPress има тази страхотна способност да бъде каквото и да искате. Например WordPress може да бъде решение за пазарска кошница за всеки проект за електронна търговия от малък до среден размер, използващ приставка, наречена woocommerce . Той е сигурен, лесен за използване, лесен за разработване и лесен за интегриране във всяка съществуваща тема на WordPress.

Ако вашият проект е особено малък и ви е необходима просто CMS, която може да бъде внедрена без никакви умения за кодиране, бих препоръчал да използвате CouchCMS . Само с няколко XHTML тагове можете да го стартирате за няколко минути и дори баба ви ще знае как да го използва.

Поддържане на вашия уебсайт

След като доставите уебсайта си и имате друг доволен клиент, остава само да поддържате сайта. Ако сте създали прост HTML сайт, който няма ново съдържание, вероятно сте готови.

Ако сте използвали CMS, ще трябва да се уверите, че технологията винаги е актуална така че да избягвате всякакви нарушения на сигурността . Това включва самата CMS и всички добавки, които сте използвали. Ако сте послушали моя съвет и сте използвали WordPress, ще бъдете уведомени по имейл за всяка налична актуализация.

Това е основата на моя процес. Разбира се, това няма да работи за всички и със сигурност няма да се отнася за всеки проект. Но се надявам, че това ще ви помогне там, дизайнерите, да придобиете уменията, които са ви необходими, за да станете страхотни инженери от предния край, и обратно, за да можем да продължим да развиваме талантите си като разработчици от предния край.

Мога само да ви покажа вратата. Вие сте този, който трябва да премине през него. - Морфей, Матрицата

P.S .: Можете да намерите PSD на горния шаблон и други страхотни дизайни на моя дрибъл портфолио .