Кодиране за некодер: Дизайнерите могат да мислят като разработчиците

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

Всеки дизайнер трябва да научи как работи развитието в дигиталния пейзаж. И всеки разработчик трябва да разбере основните теории за дизайн. Тук ще помогнем на дизайнерите да разберат по-добре езика на разработчиците, което е основно умение на съвременния пазар. (Като допълнителен бонус, всички примери за дизайн са създадени с помощта на CSS рамки.)

Разгледайте елементи Envato

Потребителски интерфейси и дизайн

Гръбнакът зад всеки уебсайт е низ от 1s и 0s. Това не е много вълнуващо, що се отнася до дизайна. Но действителният интерфейс и свързването с потребител е.

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

Думи, които трябва да знаете:

• Ajax: Използването на асинхронен JavaScript и XML създава интерактивно преживяване, при което новата информация може да се попълва в потребителския край на уебсайт без обновяване. Често срещан пример е непрекъснатото зареждане на публикации, докато потребител превърта през страница в Twitter.
• API: Като предоставя спецификации за подпрограми, данни, класове на обекти и променливи и интерфейс за програмиране на приложенията позволява на различни уебсайтове или софтуер да „разговарят“ един с друг и да работят заедно. Мислете за това като за виртуален набор от градивни елементи.
• CSS: Каскадни таблици за стил са основата на езика, използван за стилизиране на уебсайтове и визуално показване на HTML елементи.
• Медийно запитване: CSS елемент, който създава специфични правила за определени устройства, когато става въпрос за това как ще се изобразяват визуализации. (Това е магията, която прави една и съща снимка да се изобразява с една пропорция и изрязване на сайт за десктоп и по друг начин на мобилно устройство.)
• Отзивчив уеб дизайн (RWD): Техника за уеб дизайн, използваща гъвкава мрежа и изображения, медии и текст, така че един уебсайт да се адаптира към множество размери на устройствата. (Това може би е един от най-важните фактори в уеб дизайна в момента.)
• UI: Потребителският интерфейс е всичко, с което потребителят вижда и взаимодейства с дизайн. Това може да бъде всичко - от това как използват уебсайта и устройството до всеки отделен елемент на екрана.
• UX: Потребителското преживяване е това, което всеки отделен потребител отнема от взаимодействия със сайта. Това има тенденция да се изразява като емоционална връзка и се свързва с възприеманата обща стойност.

Помислете във въпросите

„Всяко от тези взаимодействия трябва да се чувства като разговор между двама души, които се доверяват един на друг и заслужават доверието един на друг.“

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

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

„Хубаво казано“ от Никол Фентън и Кейт Кийфър Лий е наръчник за писане в интернет. Той също така предоставя рамка от въпроси, които работят за всяка част от опита в уеб дизайна.

Въпроси, които трябва да зададете по пътя (плюс още много неща от ръководството за ресурси на книгата):

• Как хората използват това съдържание или функция сега?
• Кой говори тук?
• Какви проблеми се опитваме да решим?
• Как това съдържание служи на нашите цели? Каква е целта му?
• Какви са характеристиките на уебсайта? Как се държи?
• Какъв е крайният формат?
• Има ли някакви технически ограничения или ограничения на знаците?

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

Някои от тези въпроси включват:

• Как можем да ви помогнем?
• Къде си сега?
• Готови ли сте да платите за това?

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

Помислете за простотата и посоката

Когато уебсайтовете се събират, всичко има тенденция да пада някъде на карта. Можете да начертаете курса от едно потребителско взаимодействие до следващо. (Което е чудесно за визуалните мислители.) Затова помислете за процеса на проектиране / разработка по отношение на A срещу B: Каква е следващата стъпка, A или B?

Всеки елемент трябва да има проста цел, която е лесна за дефиниране и описание. (Щракнете, за да играете; щракнете, за да превъртите.) Ако не можете да го направите разбираем в изречение, може да искате да преосмислите дизайнерската стратегия.

Научете код

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

Лично аз започнах с малко HTML с цел. Направих списък с неща, които исках да знам как да правя, и ги научих отвътре навън (т.е. как да променя цвета на елемент от сайта, използвайки HEX стойност в CSS, вместо да щракнете върху полето за избор на цвят.) има много инструменти, достъпни от онлайн класове и уроци до обучение в лицето във вашия район. Всичко, което трябва да направите, е да се регистрирате и да започнете.

Четири страхотни ресурси за разработване на код:

1. Tuts +
2. CodeAcademy
3. Код училище
4. Академия Хан

заключение

Ученето на уеб разработката не е просто научаване на рамки и код. Става въпрос за мисловния процес. Дизайнерите могат да мислят като разработчици по пътя към създаването на успешен уебсайт. Просто трябва да сте отворени към идеята.

Разбирането, че някои от мисловните процеси са сходни - визуалното мислене и претеглянето на решения и резултати - са част от всеки проект за проектиране или разработка. Всички сме дизайнери / разработчици на днешния пазар.

Източник на изображението: Marjan Krebelj