Веб дизайн. В чем разница между веб-дизайном и разработкой? А как насчет UI и UX? Что означают эти разделения? Почему существует так много сокращений? Разве технические специалисты не хотят, чтобы все было удобным для пользователя!?
Если вы новичок в разработке веб—сайта, знакомство с терминологией технологической индустрии может быть очень похоже на изучение иностранного языка — за исключением того, что в большинстве иностранных языков есть рифма и смысл. Но работа с веб-профессионалом — это то, что каждый бизнес должен делать в какой-то момент; если вы хотите создать успешный веб-сайт, вам может понадобиться переводчик.
Вот для чего предназначена эта статья. Если вы разрабатываете свой первый веб-сайт или просто хотите лучше понять отрасль, здесь мы объясняем и анализируем четыре наиболее часто используемых и наиболее проблемных термина в современных технологиях: пользовательский интерфейс, UX, веб-дизайн и веб-разработка. Прочитав это, вы не только узнаете, чем занимается каждая область, но и на какой из них вашему бизнесу следует сосредоточиться больше всего.
Азбука IT
Давайте начнем с некоторых основных определений, чтобы облегчить ваше первоначальное замешательство и дать вам некоторый контекст, прежде чем мы погрузимся глубже:
Веб—дизайн — широкая обобщающая категория для всего, что связано с разработкой визуальных эффектов и удобством использования веб-сайта. Как пользовательский интерфейс, так и UX-дизайн, наряду со многими другими областями, включены в раздел веб-дизайн.
Веб—разработка — техническая часть создания веб-сайта с упором на код. Веб-разработка далее делится на “front-end” и “back-end”, как описано ниже.
Пользовательский интерфейс (UI) — специализация веб-дизайна, которая имеет дело с элементами управления, которые люди используют для взаимодействия с веб-сайтом или приложением, включая отображение кнопок и управление жестами.
Пользовательский опыт (UX) — еще одна специализация веб-дизайна, на этот раз связанная с поведением пользователя и его ощущениями при использовании сайта или приложения. UX-дизайн инкапсулирует многие другие области, но рассматривает их с точки зрения пользователя.
Как вы уже можете видеть, ни одна из этих областей не является эксклюзивной, и существует множество совпадений. Веб-дизайн и разработка — это всего лишь две стороны одной медали, дизайн пользовательского интерфейса влияет на дизайн UX, веб-разработка поддерживает их все … дело не в том, какие поля выполняют какие задачи, а в том, как каждое поле рассматривает одну и ту же задачу с другой точки зрения.
Например, давайте посмотрим на время загрузки — общую проблему для каждого веб-сайта. Как каждое поле определяет время загрузки:
Веб-дизайн: Если загрузка страницы занимает слишком много времени, значит, на ней либо слишком много контента, либо он слишком сложный. Файлы изображений могут быть сжаты, ресурсы могут быть скорректированы и реэкспортированы, а страницы могут быть очищены от лишнего содержимого.
Веб-разработка: Чтобы ускорить загрузку контента, мы можем попробовать улучшить сжатие файлов, чтобы уменьшить размеры файлов контента, CSS-спрайты для экономии полосы пропускания или сеть доставки контента, чтобы увеличить время загрузки в определенных географических регионах.
UI Пользовательский интерфейс: Элементы управления должны быть максимально отзывчивыми, поэтому интерфейс должен быть достаточно простым, чтобы интерактивность была мгновенной.
UX: Вероятность того, что пользователь “отскочит” (покинет ваш сайт всего через несколько мгновений), увеличивается с каждой секундой загрузки, поэтому мы должны уделять приоритетное внимание сокращению времени загрузки домашней и целевой страниц, прежде чем решать проблему в масштабах всего сайта.
В идеальном мире вы бы наняли специалиста или команду специалистов для каждой из этих областей, чтобы у вас был эксперт, рассматривающий ваш сайт со всех сторон. Однако бюджетные ограничения часто означают предпочтение одной области перед другой или наем фрилансеров на индивидуальной основе.
Иногда вы найдете кого-то, кто утверждает, что делает все это:
Дизайнеры, которые умеют кодировать, иногда называют себя «универсальным пакетом», но на самом деле они более ограничены, чем два отдельных специалиста (хотя иногда это может быть разумным решением, если у вас простой сайт).
У дизайнеров пользовательского интерфейса много пересекающихся навыков с веб-дизайнерами, поэтому некоторые люди будут использовать эти названия как взаимозаменяемые.
UX и пользовательский интерфейс часто объединяются, учитывая, что они обе являются подспециализациями.
UX часто рассматривается как навык в других профессиях, даже за пределами дизайна, таких как управление продуктом.
Такие люди могут быть полезны в крайнем случае, но просто помните, что мастер на все руки не является мастером ни в одной — они могут знать основы нескольких областей, но, скорее всего, будут экспертом только в одной, если таковые имеются.
Вы также хотите проводить различия между веб-сайтами и приложениями, настольными компьютерами и мобильными устройствами. У каждого работника есть свои индивидуальные особенности — у некоторых разработчиков больше опыта в создании мобильных сайтов; некоторые дизайнеры придерживаются исключительно приложений и никогда не создают веб-сайты. Опять же, есть много совпадений, но если вы нанимаете для конкретного проекта, убедитесь, что ваши кандидаты могут справиться со спецификой.
Итак, кто из этих специалистов может помочь вам в достижении ваших конкретных бизнес-целей? И на что вам следует обратить внимание при их найме? Давайте теперь подробнее рассмотрим каждый из них.
Веб дизайн
“Веб-дизайн” — это немного архаичный термин, восходящий к тем временам, когда один человек занимался всеми аспектами дизайна веб-сайта. По современным стандартам термин “веб-дизайнер” может быть немного расплывчатым; сегодня, благодаря технологиям и нашему более глубокому пониманию ремесла, у нас есть множество подразделений.
Подкатегории веб-дизайна включают как пользовательский интерфейс, так и UX, но также и другие забавные сокращения, такие как IA (информационная архитектура, связанная с отображением сайта и навигацией) и CRO (оптимизация коэффициента конверсии, тонкая настройка дизайна сайта для увеличения продаж, регистраций или других конкретных действий). Существуют десятки таких подкатегорий, и каждый день создаются новые, поскольку дизайнеры пытаются получить лучшую работу на конкурентном рынке.
Вообще говоря, веб-дизайн относится к визуальным эффектам и функциональности веб-сайта. Эта область неразрывно связана с графическим дизайном на всех уровнях и имеет дело с теми же принципами дизайна визуальной коммуникации.
Но веб-дизайн — это больше, чем просто графический дизайн. Независимо от того, работаете ли вы с веб-сайтами или приложениями, дизайнеры должны знать функциональность, технические ограничения, цифровые тенденции и ожидания пользователей, которые часто меняются.
В веб-дизайне также есть определенные бизнес-ноу-хау: дизайнеры должны понимать тактику цифровых продаж, например, как разместить кнопку “призыв к действию” (CTA) для привлечения продаж и регистрации по электронной почте. Макет сайта сильно влияет на поведение пользователей, но из-за того, что в нем так много нюансов, некоторые дизайнеры справляются с этим лучше других.
Веб-дизайнер занимается традиционными проблемами графического дизайна, такими как цвет и типография, наряду с цифровыми проблемами, такими как выбор наилучшей эстетики для различных размеров экрана. Они также требуют понимания бизнес-концепций, таких как начало и завершение, для создания макетов, которые делают призыв к действию более привлекательным. В конце концов, в обязанности дизайнера иногда входит создание иконок, графики или кнопок интерфейса с нуля, что требует опыта всех трех специалистов.
Что касается конкретных должностных обязанностей, то процесс проектирования в основном зависит от дизайнера, если он работает в рамках существующих руководящих принципов бренда. Обычно процесс включает в себя создание дизайнером прототипов дизайна, а затем тестирование этих прототипов либо с реальными пользователями, либо с заинтересованными сторонами, а затем включение обратной связи в будущие проекты.
Дизайнеры также могут создавать каркасы, простые макеты дизайна для подготовки прототипа или макета, идеального по пикселям изображения того, как будет выглядеть экран, за исключением отсутствия интерактивности.
Как только прототип утвержден, он отправляется разработчику для кодирования.
На что обратить внимание при найме веб-дизайнера…
Больше всего на свете вам нужно знать, чего вы хотите, прежде чем вы сможете найти лучшего веб-дизайнера для вас. Из-за стольких специализаций дело не в том, хорош дизайнер или плох, а в том, подходит ли он вам.
Обратите внимание на их портфолио. Уделяя особое внимание графическому дизайну, каждый веб-дизайнер имеет свой собственный уникальный художественный стиль.
Стремитесь овладеть теми аспектами, которые вы цените. Если у вас сайт с большим количеством текста, посмотрите, как они справляются с типографией, удобочитаемостью и макетом страницы.
Если вы разрабатываете дизайн веб-сайта электронной коммерции, посмотрите, знают ли они, из чего состоит хорошая страница продукта.
Ознакомьтесь с лучшими дизайнерами сайтов электронной коммерции здесь.
Совместимо ли их предпочитаемое программное обеспечение с тем, что использует остальная часть вашей команды? Существует множество различных программ для дизайна — Adobe Photoshop, Illustrator, InDesign и Sketch, а также программное обеспечение для создания прототипов, такое как UXPin или Balsamiq.
Проконсультируйтесь с другими вашими сотрудниками, чтобы узнать, какие у вас есть варианты.
Спросите своего дизайнера об их процессе проектирования и его временных рамках. У всех дизайнеров есть свои собственные методы и циклы проектирования, поэтому дважды проверьте, что вы нанимаете кого-то, кто соответствует культуре вашей компании, а также ее графику.
Веб-разработка
Веб-дизайн и разработка отличаются использованием кода. Разработка — это когда все становится техническим, но хорошая новость в том, что вам не обязательно знать, о чем говорят ваши разработчики, пока они это делают (хотя, безусловно, полезно изучить основы).
Веб-разработка делится на две основные категории:
Интерфейс (он же клиентская часть): код для отображения веб-сайта (или приложения) на экране. Интерфейсный разработчик отвечает за воплощение видения веб-дизайнера в жизнь, обычно используя компьютерные языки, такие как HTML, CSS и JavaScript. Естественно, не все, что планировал дизайнер, реально выполнимо, поэтому интерфейсный разработчик часто работает взад-вперед с дизайнером.
Серверная часть (также известная как серверная часть): “интерфейс” извлекается из цифровой системы ресурсов, размещенных на сервере. Серверный разработчик управляет этими закулисными ресурсами, кодируя данные в базе данных и оптимизируя способ доставки этих данных. Они используют такие языки, как PHP, Ruby, Python, Java или .Net.
Аналогично, разработчик с полным стеком — это тот, кто может заниматься как фронтальной, так и серверной разработкой. Иногда это разумный вариант для стартапов, которые не могут позволить себе нанять более одного сотрудника, но в идеале у вас должна быть целая команда разработчиков с различными специализациями.
На что обратить внимание при найме веб-разработчика…
Обязательно проверьте, свободно ли они владеют нужными вам языками. Если вы не видите разницы, скажите им, что вы хотели бы сделать со своим сайтом, и прислушайтесь к их рекомендациям.
Хотя в этом нет необходимости, разработчику полезно участвовать в процессе проектирования. Например, разработчик может заранее сообщить дизайнеру, возможен ли их выбор, экономя время на доработку в долгосрочной перспективе. Возможно, вы захотите посмотреть, насколько хорошо ваш разработчик работает с командой, поскольку некоторые предпочитают работать в автономном режиме.
Просмотрите их предыдущие веб-сайты через призму функциональности. Все ли работает так, как должно? Появляются ли какие-нибудь флаги? Возможно, вы недостаточно разбираетесь в разработке, чтобы понять, как это работает, но вы, вероятно, знаете, каково это — быть обычным человеком, пользующимся веб-сайтом.
Пользовательский интерфейс (UI)
Обсудите более специализированные области, начиная с дизайна пользовательского интерфейса. Пользовательские интерфейсы — это то, чем все пользуются, не задумываясь — вам не нужно знать историю значка гамбургера, чтобы понять, что кнопка с тремя строками — это ваше меню.
И это неизменный принцип в большинстве областей веб-дизайна: если их работа выполнена хорошо, вы даже не должны их замечать. Это наиболее распространено в дизайне пользовательского интерфейса: с действительно интуитивно понятным интерфейсом пользователю не нужно думать об этом, чтобы использовать его.
Если вам приходится активно думать о том, как использовать элементы управления, это считается плохим дизайном пользовательского интерфейса. Поиск нужной вам кнопки или трата нескольких секунд на выяснение того, что делает кнопка, отвлекают вас от общего впечатления от использования сайта. Цель дизайна пользовательского интерфейса — не только предоставить все элементы управления, которые могут понадобиться пользователю, но и создать понятные элементы управления, которые пользователи понимают с первого взгляда.
Еще одна проблема — это управление пространством. Дизайнеры пользовательского интерфейса должны найти золотую середину между предоставлением пользователям множества опций и экономией места на экране. Вот как появились такие методы, как элементы управления наведением курсора мыши и выдвижные меню. Дизайнер пользовательского интерфейса обязан решить, какие элементы управления должны присутствовать постоянно, а какие достаточно незначительны, чтобы их можно было скрыть или полностью игнорировать.
Дизайн пользовательского интерфейса часто совпадает с другой областью, называемой дизайном взаимодействия с аббревиатурой “IxD”. Дизайн взаимодействия специализируется на всех способах взаимодействия пользователя с системой, включая интерфейс, а также такие области, как всплывающие окна, чат и окна ошибок. Поскольку дизайн взаимодействия так сильно подчеркивает поведение пользователя, это как бы промежуточная точка между дизайном пользовательского интерфейса и UX.
На что обратить внимание при найме дизайнера пользовательского интерфейса…
Портфолио дизайнера пользовательского интерфейса должно рассказать вам все, что вам нужно знать. Протестируйте предыдущие сайты вашего кандидата и посмотрите, насколько это просто. Можете ли вы найти все, что вам нужно? Было ли использование сайта / приложения разочаровывающим или легким?
В большей степени, чем в других категориях, ищите прошлую работу в конкретном типе проекта, для которого вас нанимают. Лучший в мире дизайнер пользовательского интерфейса веб-сайта может быть ужасен в создании интерфейса для игрового приложения. Наймите кого-нибудь, у кого есть необходимый опыт.
Пользовательский опыт (UX)
Во многих отношениях UX похож на область веб-дизайна с точки зрения пользователя. Как макет веб-страницы влияет на пользователя? Как пользовательский интерфейс влияет на пользователя? Когда вы переходите к продвинутым этапам, UX становится гораздо более стратегическим, например: “как нам создать страницу, чтобы пользователь захотел зарегистрироваться?”
Как вы можете себе представить, UX-дизайн также включает в себя множество других областей веб-дизайна.
Многие люди говорят о “UI vs UX”, но правда в том, что они работают вместе, а не конкурируют. На самом деле, здесь так много совпадений, что все виды веб-дизайнеров могут извлечь выгоду из небольшого знания UX.
Именно так UX стал отдельной дисциплиной — наем отдельного специалиста по UX снимает кучу других обязанностей с остальной команды.
Хотя на первый взгляд это может показаться излишним, на самом деле существует прямая корреляция между дизайном UX и бизнес-целями, такими как продажи или конверсии. Учитывая, что большая часть человеческих решений основывается на эмоциях и инстинктах, имеет смысл, что оптимизация дизайна веб-сайта может стимулировать определенное поведение и создавать атмосферу, более благоприятствующую этому поведению.
По этой причине дизайнеры UX также во многом опираются на принципы графического дизайна: привлекают внимание размером, вызывают нужные эмоции цветами, создают предсказуемый визуальный поток по экрану и размещают CTA в нужных местах. Однако, в отличие от традиционного графического дизайна, специалисты по UX должны также учитывать дополнительные аспекты, такие как интерактивность и выбор времени, что делает его дисциплиной, полностью отдельной от всех остальных, но одновременно взаимосвязанной со всеми ними.
На что обратить внимание при найме UX-дизайнера
Как и в случае с дизайном пользовательского интерфейса, вы хотите “протестировать” предыдущие сайты или приложения вашего кандидата. Просты ли они в использовании? Нравится ли вам пользоваться их сайтом?
Если у вас нет бюджета, чтобы нанять отдельного дизайнера UX, спросите кандидатов в других областях об их опыте в области UX. Иногда эти обязанности могут выполняться разными командами совместно; менеджер по продукту или маркетолог могут объяснить, каким они хотят видеть UX, а затем команда дизайнеров займется визуальным дизайном и внедрением.
А как насчет сайтов-шаблонов?
Что делать, если вы используете шаблонный сайт, такой как WordPress, Squarespace или Wix? Вам все еще нужна полноценная команда? Вам нужен кто-нибудь дополнительный?
Шаблонные сайты следуют большинству тех же правил, за некоторыми существенными исключениями:
Если вы используете шаблонный сайт, вам не нужно так сильно беспокоиться о разработке серверной части.
Сайты-шаблоны обычно имеют ограниченные и фиксированные параметры пользовательского интерфейса.
Убедитесь, что кандидаты имеют опыт работы на любом сайте, на котором вы размещаете свой. Быть хорошим в WordPress не обязательно означает быть хорошим в Squarespace.
За исключением этих исключений, использование сайта-шаблона аналогично использованию любого другого сайта. Выбирайте своих дизайнеров в соответствии с тем, что вам больше всего нужно.
Какой из них вам нужен больше всего?
К настоящему времени вы должны быть в состоянии отличить веб-дизайн от разработки, и вы знаете, что “пользовательский интерфейс против UX” не так точен, как “пользовательский интерфейс + UX”. Вопрос в том, какой из них вам следует уделять больше внимания, если вы не можете нанять специалистов для них всех?
На этот вопрос нет универсального ответа. Поскольку каждое из этих полей относится к разным областям, все зависит от уникальных потребностей вашей компании. Учитывая ваши собственные цели и недостатки, вам может понадобиться один специалист больше, чем другие.
Чтобы помочь вам понять, какая из них вам больше всего нужна, вот краткий список проблем, на решении которых специализируется каждая область. Найдите свои самые большие препятствия ниже и загляните в соответствующее поле для решения. Если у вас уже есть существующий сайт, заранее проведите несколько пользовательских тестов, чтобы узнать, какие жалобы есть у реальных пользователей.
Веб-дизайн
сайт не реагирует (это означает, что сайт плохо выглядит на мобильных устройствах)
сайт выглядит устаревшим
графика низкого качества
клиенты переходят не на те страницы, на которые вы хотите, чтобы они
заходили, время на странице слишком короткое
Веб-разработка
ошибки (функции сайта не работают должным образом)
веб-безопасность и предотвращение взломов
слишком много ошибок 404
слишком много неудачных поисков DNS
сайт переходит в автономный режим
определенный контент не загружается
Пользовательский интерфейс UI
плохая навигация
отсутствие опций настройки
отсутствие возможностей обмена в социальных сетях
жалобы на ”как мне это сделать“ или ”где я могу это найти»
Пользовательский опыт UX
низкие показатели конверсии (много трафика, но мало конверсий)
высокий показатель отказов (посетители уходят через несколько секунд)
пользователи не заканчивают контент (видео или блоги)
фрагментированные посещения, т.е. пользователь уходит после одной страницы и вместо того, чтобы оставаться и изучать
Конечно, некоторые проблемы могут быть устранены различными методами, как мы объяснили на примере медленного времени загрузки выше. Вот почему важно знать, какие аспекты вы хотите расставить по приоритетам, чтобы любое выбранное вами решение в наибольшей степени соответствовало вашим приоритетам.
