В чем заключается работа дизайнера — правильный дизайн от Дэниэл Бурка
В чем заключается работа дизайнера — правильный дизайн от Дэниэл БуркаОдин раз в месяц мы присылаем статьи на почту
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности
В разговоре с ведущими подкаста High Resolution дизайн-партнер Google Ventures Дэниэл Бурка размышляет о том, как сейчас работают дизайнеры, об изменениях в профессии, почему прототипирование может быть научным методом для стартапов и на что сейчас стоит обращать внимание дизайнеру.
Tilda Publishing публикует главные мысли Дэниэла из опыта работы с дизайном продуктов в стартапах.
Дэниэл Бурка
Продуктовый дизайнер, вел мобильное направление в Google+,
дизайн-партнер в Google Ventures
Мало кто понимает, но дизайн сейчас делается не в фотошопе, скетче или даже в коде
В чем заключается работа дизайнера? Две трети работы дизайнер не сидит за компьютером — он должен идти к менеджеру продаж, к менеджеру службы поддержки и спрашивать, что заставляет их просыпаться среди ночи.
Я советую дизайнерам буквально идти и спрашивать — о продукте, о стрессе в работе с ним, о приоритетах компании на следующий квартал.
В продуктовой компании идеи витают в воздухе
Дизайнеры, инженеры, служба поддержки, бухгалтерия — у всех могут быть идеи для продукта. Но что происходит с идеями? Их рассказывают или делают заметку — и часто идея понятна только тому, кто ее придумал. Люди не могут четко объяснить, в чем их идея.
Одна из самых вдохновляющих возможностей дизайнера — он может помогать людям облекать идеи в форму. Дизайн способен создавать реальные вещи.
Так что, вот вам совет — берите идею из команды и создавайте прототип. Скорее всего, ваш прототип будет сильно отличаться от идеи коллеги, но вам уже будет, о чем говорить и что улучшить.
Секрет крутого дизайн решения
Как сделать хороший дизайн проект? Нужно не просто взять идею, например, руководителя и сделать прототип, но самому подумать, как эту идею можно улучшить, что добавить.
Ваш руководитель будет уверен, что это его идея, и поддержит вас, а вы добавите в нее ценность.
Важное качество хорошего дизайнера — думать о продукте в целом
Быть хорошим специалистом — это не просто делать свою работу и оставлять решения другим, но самому думать о том, что важно для продукта сейчас. Представьте себе, поставил бы продакт менеджер это решение в список приоритетных задач?
Нужно реализовывать не только свои, но и чужие идеи
Даже если вам кажется, что идея коллеги неудачная. Зачем? Если вы не попробуете, люди всегда будут думать, что их идея была лучше. А когда вы попробуете сделать прототип и вместе увидите, что что-то не срастается, вам будет легче двигаться дальше.
Прототип — простой и дешевый способ быстро понять, стоит ли развивать идею дальше или нет.
Опасность в профессии дизайнера — мы можем сделать так, чтобы средненькие идеи выглядели классно
Будьте бдительны и не спешите убеждать себя, что продукт стоящий только потому, что вы нарисовали красивый градиент.
Лучше начать с простого дизайна, но убедиться, что идея цепляет и работает. Концепция хорошего дизайна заключается не в красоте, а в эффективности. Тогда можно приниматься за look and feel.
Оформление, интерфейс
Дизайнер уверен, что в мире все должно быть красиво
Но если смотреть на мир как предприниматель, то вы увидите другую картину.
Возьмем Walmart , его брендированные цвета — коричневый, синий и желтый. Не так уж привлекательно, да? Но если вы выгляните из окна офиса и увидите вдалеке магазин Walmart, первой мыслью будет — там можно купить продукты дешево. И это нужный эффект такого дизайна.
Правильный дизайн для магазина Walmart. Источник изображения: http://www.buttcon.com/projects/walmart/
Как-то мы сделали очень красивый интерфейс проекту, который делает купоны
Мы разработали новый дизайн сайта, улучшили эстетическую составляющую. Что вы думаете? В тестировании этот вариант провалился, потому что он казался людям слишком красивым.
Это как с Craigslist — вам не нужна барахолка, которая красиво спроектирована, как не нужна ярмарка овощей, которая похожа на Диснейленд. Вы верите в барахолку, которая выглядит немного обшарпанно, потому что она должна быть такой.
Мораль: фокусируйтесь на эстетике, которая подходит цели и вашему продукту, а не на эстетике вообще.
Прототипирование — это научный метод для стартапа
Чтобы сделать правильный дизайн, нужно начать с прототипирования. У вас есть тезис — идея, которую вы хотите проверить. Дальше вы проводите эксперимент — создаете прототип. Третий шаг — полевой тест — вы тестируете на 5−10 пользователях, чтобы понять, есть ли в вашем решении ценность.
Как в любом опыте, вы начинаете с абстрактного и с каждым шагом получаете все более конкретное решение.
В Google Ventures процесс прототипирования делится на 4 стадии и занимает около недели
Сгенерировать идеи
Принять решения (и правильно выстроить процесс принятия решений — каким идеям отдать приоритет)
Быстро сделать прототип (буквально за день)
Протестировать прототип на 5 пользователях
Перед спринтом важно определить правильную проблему.
Если проблема неверная, то вы ни к чему не придете.
Для эффективной работы над дизайном применяйте разные методики и практики
Представьте, у вас встреча по айдентике, вам нужно определить ценности компании, все начинают предлагать свои варианты, перекрикивая друг друга. Это полный хаос, это неэффективно, это трата вашего времени.
Вместо этого попросите каждого участника записать на бумагу ценности компании, которые он выделяет для себя, затем выпишите все варианты на доску и проголосуйте за каждый — допустим, если ценность набирает 5 голосов, она остается. Это очень эффективная техника — потому что в итоге у вас получается релевантный набор ценностей с учетом мнения каждого участника в команде.
Как выбрать, какую проблему решать на спринте
Убедитесь, что вы решаете не юзабилити проблему, а бизнес задачу — например, с ценообразованием или воронкой продаж.
Это первоочередное.
Проблема, которую вы решаете, должна быть измеряемой и давать вам понятный результат.
Спринт должен быть измеримым. Концепции — это прекрасно, но не зацикливайтесь на концептах, в них можно погрязнуть.
Я думаю, фундаментальная роль дизайнера заключается в том, чтобы помогать бизнес-идеям быстро расти
Главное — задавать правильные вопросы и не думать, что вам все известно — а выйти из офиса и спросить, что думают люди.
Смотрите интервью полностью (на английском языке):
Источник: www.youtube.com/watch?v=TeE6Tx_nO94
Расшифровка и перевод: Варя Гурова
Иллюстрации, дизайн и верстка: Юлия Засс
Если материал вам понравился, расскажите о нем друзьям. Спасибо!
Читайте также:
Простые идеи развития творческих способностей
Как делать красивые статьи на Тильде
Что такое UX дизайн?
Путешествия и дизайн: 10 причин съездить в Будапешт
25 онлайн-курсов по веб и UX дизайну и программированию — подборка
Впечатление о сайте — что повышает доверие пользователя в веб-дизайне
Визуальная иерархия сайта: оформление и организация контента
Флэт (flat) дизайн: лучшие практики плоского дизайна
Навигация по сайту — примеры как сделать навигацию удобной
Обучение веб дизайну: 70+ лучших ресурсов о веб-дизайне
Необходимый минимум книг для дизайнеров
| Показать больше |
Веб-дизайн и веб-разработка: 4 главных отличия
Что приходит вам в голову при мыслях о веб-дизайне и веб-разработке? Сами названия этих этапов создания сайта говорят о существенных различиях.
Есть и более тонкие особенности, которые делают эти два понятия совершенно непохожими друг на друга.
В этой статье описываются четыре основных различия между дизайном и разработкой веб-сайтов. Некоторые из них наверняка сильно вас удивят. Вы научитесь лучше понимать наиболее значимые факторы, отличающие веб-дизайн от веб-разработки. Также статья поможет больше узнать о том, как эти важнейшие процессы влияют на маркетологов.
Что такое дизайн сайта?
Веб-дизайн влияет как на удобство использования, так и на эстетическую составляющую сайта. К примеру, макет и цветовая схема – это два аспекта внешнего вида страницы, над которыми работает веб-дизайнер. В чем заключается их главное предназначение? Создать визуально привлекательный и удобный для восприятия и эксплуатации сайт.
В конечном счете, хороший веб-дизайн позволяет добиться высокого удобства использования. Сайт с удачным дизайном предлагает эстетически приятные и интуитивно понятные функции, прост в навигации, является неотъемлемой частью бренда и удовлетворяет требованиям клиентской базы.
Поскольку веб-дизайн сфокусирован на визуальных аспектах пользовательского интерфейса и опыта, обычно веб-дизайнеры работают над раскадровками (сторибордами), логотипами, форматированием, UX/UI-дизайном и цветовыми схемами.
Что такое разработка сайта?
Процесс разработки включает механизмы, которые позволяют сайту правильно функционировать. Веб-разработчик отвечает за воплощение идей вашего веб-дизайнера в жизнь. Он обеспечивает корректную работу сайта с помощью написания кода. Следует помнить, что существует две категории веб-разработчиков: frontend и backend.
Frontend-разработчик занимается написанием кода, благодаря которому сайт отображает задумку веб-дизайнера. В то же время, backend-разработчик должен уметь грамотно управлять вашей базой данных и обеспечивать корректное отображение информации на frontend-страницах.
В чем разница между веб-дизайном и веб-разработкой?
Разумеется, у веб-дизайна и веб-разработки имеются некоторые пересечения, так что нередко можно встретить специалистов с опытом работы в обеих областях.
Тем не менее, эти два понятия нельзя отождествлять. Чтобы обеспечить безупречный пользовательский опыт, необходимо инвестировать в оба этапа. Они должны работать в тандеме, чтобы на выходе получился привлекательный, функциональный и удобный сайт. Вот некоторые из наиболее существенных различий между веб-разработкой и веб-дизайном.
Разработчики сайтов не отвечают за создание веб-ресурсов
Основное различие между веб-дизайнерами и веб-разработчиками заключается в том, что первые создают визуальные компоненты, которые добавляют сайту эстетическую ценность (и повышают удобство пользования), в то время как вторые отвечают за их внедрение. С помощью JavaScript, CSS и HTML разработчик переносит макеты, схемы и другие активы дизайнера в код. Таким образом, создание визуальных компонентов входит в обязанности веб-дизайнера, а использование кода для их отображения на сайте – это работа веб-разработчика.
Дизайнеры сайтов не отвечают за написание кода
Еще одно различие между веб-дизайном и веб-разработкой состоит в том, что дизайнеры обычно не пишут код.
Конечно, бывают и исключения, но обычно вся ответственность за написание кода лежит на разработчиках.
Рассмотрим основные обязанности веб-дизайнера. Они включают использование редактора – например, Photoshop или Figma – для создания изображений, эскизов и макетов. Как видите, написание кода не входит ни в одну из перечисленных задач, поэтому на помощь приходит веб-разработка.
В качестве альтернативы некоторые компании предпочитают работать с no-code конструкторами сайтов, которые позволяют дизайнерам оформить страницу и улучшить пользовательский опыт без навыков программирования.
Обычно веб-дизайн дешевле веб-разработки
Как правило, услуги веб-дизайна обходятся дешевле веб-разработки. Согласно данным ZipRecruiter, разработчикам сайтов обычно платят $36/час, в то время как дизайнеры зарабатывают в среднем $29/час. Бывают аномалии, но обычно за веб-дизайн платят меньше, чем за веб-разработку.
Почему? Потому что веб-разработка требует обучения. Например, программированию.
Спрос и предложение также отражаются на средней стоимости: скорее всего, дизайнеров больше, чем разработчиков. Тем не менее, если вы ищете опытного специалиста, то готовьтесь платить больше среднего по рынку.
Веб-разработка расширяет функционал, а веб-дизайн улучшает эстетическую составляющую
Помните следующее: разница между веб-дизайном и веб-разработкой сводится к роли, которую выполняет каждый из этих процессов. В то время как разработчик расширяет функционал с помощью программирования, дизайнер стремится улучшить пользовательский опыт и интерфейс, чтобы клиентам было приятней пользоваться сайтом. Таким образом, оба этих фактора одинаково важны.
Что общего у веб-дизайна и веб-разработки?
Поскольку дизайн и разработка направлены на создание жизнеспособной площадки для пользователей, они имеют некоторые общие черты. Подробно рассмотрев сходства этих двух процессов, вы начнете лучше понимать, почему они играют критически важные роли в создании успешного сайта.
Оба процесса направлены на создание привлекательного пользовательского опыта
Если вы хотите, чтобы клиенты постоянно возвращались на ваш сайт, сосредоточьтесь на пользовательском опыте. Почему? Потому что пользовательский опыт гарантирует, что у клиентов возникнут положительные ассоциации с сайтом и, следовательно, с продуктом. Если качество вашего UX оставляет желать лучшего, пользователи разочаруются и найдут более предпочтительный вариант.
Возможно, вам интересно, как веб-разработка и веб-дизайн способствуют созданию хорошего пользовательского опыта. Ответ прост. Дизайн отвечает за удобство навигации по страницам, а разработка обеспечивает их правильное функционирование. Если ваш сайт не работает должным образом, то он не будет представлять никакой ценности для потребителей, каким бы красивым он ни был.
Веб-разработка и веб-дизайн должны работать в унисон
Вы наверняка задаетесь вопросом, нужно ли вкладывать деньги в дизайн и разработку сайта. Ответ положительный, и вот почему.
Для создания целостного и функционального сайта оба этих фактора должны работать в унисон. Без дизайна страницы будут казаться блеклыми. Без разработки сайт будет работать неправильно. Исключительного пользовательского опыта можно добиться только благодаря слаженной работе веб-дизайнеров и веб-разработчиков.
Что маркетологи должны знать о веб-дизайне и веб-разработке?
Маркетологам следует помнить о нескольких вещах, касающихся дизайна и разработки сайтов. Во-первых, необходимо поддерживать контакт с разработчиком и дизайнером. Чем конкретнее вы изложите свои пожелания, тем лучше окажется результат. Создание списка требований с перечнем необходимых функций – отличный способ добиться желаемого.
Кроме того, маркетологи не должны забывать о важности пользователей смартфонов и планшетов. В 2021 году на долю мобильных устройств пришлось около половины мирового интернет-трафика. Наймите разработчика и дизайнера для создания сайта, оптимизированного для планшетов и смартфонов, тогда вы сможете охватить свою потенциальную аудиторию на всех устройствах.
Веб-дизайн и веб-разработка: 2 важнейших ингредиента успешного сайта
Теперь, зная об основных различиях между веб-дизайном и веб-разработкой, вы будете лучше разбираться в двух важнейших составляющих успеха вашего сайта. Если ваш дизайнер и разработчик всегда думают о клиентах, то вам не составит труда привлечь и удержать аудиторию.
Веб-дизайнер Образец должностной инструкции
Веб-дизайн включает в себя множество навыков, а иногда и отдельных профессий. В настоящее время веб-дизайнер должен носить много шляп и может иметь разный уровень квалификации и опыта в разных областях.
В идеале хороший веб-дизайнер должен иметь базовые знания о визуальном дизайне, брендинге и дизайне логотипов, дизайне взаимодействия с пользователем, дизайне пользовательского интерфейса, дизайне взаимодействия, информационной архитектуре и разработке интерфейса.
Это означает, что наем веб-дизайнеров может быть непростой задачей, поэтому очень важно четко указать навыки и требования в описании вакансии и в объявлении о вакансии.
Описание работы веб-дизайнера и шаблон объявления
Скопируйте этот шаблон и измените его как свой собственный:
Знакомство с компанией
{{Напишите короткий и запоминающийся абзац о своей компании. Обязательно предоставьте информацию о культуре компании, преимуществах и преимуществах. Укажите рабочие часы, возможности удаленной работы и все остальное, что делает вашу компанию интересной.}}
Должностная инструкция
Как наш новый веб-дизайнер, вы будете создавать внешний вид, макет, ощущение, функциональность и функции всех веб-сайтов, которые мы создаем. развивающийся. Вы будете работать над разработкой новых веб-сайтов и улучшением существующих веб-ресурсов.
Вы будете тесно сотрудничать с нашими креативными директорами, руководителями проектов, стратегами и другими членами команды дизайнеров, чтобы разработать спецификации и внести коррективы в отношении использования новых и появляющихся веб-технологий.
Обязанности
В ваши основные обязанности будут входить встречи с клиентами, использование инструментов каркасного моделирования, использование методов функционального пользовательского интерфейса в рабочем процессе веб-дизайна.
Вы также будете нести ответственность за написание чистого семантического внешнего кода — HTML5, CSS3, JAVA, PHP.
Подробнее об обязанностях:
- Работа с клиентами и руководителями проектов над созданием и усовершенствованием графического дизайна для веб-сайтов. Должен иметь сильные навыки в Photoshop, Sketch, InvsionApp, UX Pin или эквивалентных приложениях.
- Преобразование необработанных изображений и макетов из графического дизайнера в темы CSS/XHTML.
- Определить подходящую архитектуру и другие технические решения и дать соответствующие рекомендации клиентам.
- Разработка и поддержка надежных руководств по веб-стилю для всех наших продуктов, предназначенных для потребителей и бизнеса.
- Обеспечьте лидерство в области передового опыта веб-дизайна и цифровых тенденций следующего поколения.
- Создавайте высококачественные макеты для проверки и пользовательского тестирования, а также готовые файлы .psd для разработки.
- Помощь в разработке нового бренда и в том, как последовательно передать его через наши многочисленные веб-ресурсы.
- Создайте макет сайта/пользовательский интерфейс, используя стандартные методы HTML/CSS/PHP/JAVA
- {{Добавьте сюда другие важные обязанности}}
Требования
- Степень бакалавра в области компьютерных наук или в смежных областях или значительный аналогичный опыт.
- Опыт работы с HTML/XHTML и CSS не менее трех лет.
- Сильное визуальное и техническое портфолио.
- Высокий уровень владения продуктами Adobe (или эквивалентными инструментами).
- Знание совместимости браузеров на различных платформах и устройствах.
- Высокая способность проектировать с учетом доступности.
- Опыт работы в Agile/Scrum разработке.
- Знакомство с несколькими HTML-фреймворками, сильные навыки работы с JavaScript и jQuery (например, использование API)
- {{Укажите необходимый уровень образования или сертификации}}
См.
также: Растущий список важных вопросов для собеседования по веб-дизайну, составленный сообществом Toptal. Обязанности веб-дизайнера
Веб-дизайнеры объединяют форму и функциональность для создания привлекательных и эффективных веб-сайтов, микросайтов, инициатив в социальных сетях, мобильных приложений и многого другого. Работа в области веб-дизайна требует навыков концептуального мышления, твердого владения Adobe Creative Suite и владения HTML, CSS, JavaScript и другими распространенными языками программирования.
Должностная инструкция веб-дизайнера должна включать планирование дизайна сайта путем уточнения целей и разработки функциональных возможностей посредством навигации по сайту путем категоризации контента и направления трафика через контент. Веб-дизайнеры отвечают за координацию и сотрудничество с менеджерами по работе с клиентами, копирайтерами, графическими дизайнерами и другими художниками-графиками над изображениями, значками, баннерами, звуком и т. д. Веб-дизайнеры также несут ответственность за подготовку сайта путем установки и настройки серверного программного обеспечения; установка языка программирования с помощью инструментов авторинга и форматирования; обеспечение кроссплатформенной совместимости; установление ссылок и локализации путем регистрации в поисковых системах.
Должностная инструкция веб-дизайнера также должна включать информацию о текущих обязанностях, такую как поддержание и обеспечение постоянного дизайна веб-сайта, промо-акций и рекламных баннеров, сезонных обновлений контента, специальных рекламных материалов и т. д.
При найме или создании веб-дизайнера описание работы, имейте в виду следующее:
Веб-дизайнер Обязанности и необходимые навыки
- Веб-графический дизайн
- Графический интерфейс пользователя (GUI)
- Опыт веб-программирования
- Разработка интерфейса
- HTML/CSS
- Быстрое создание прототипа
- Дизайн веб-интерфейса пользователя
- Навыки веб-программирования
- Инструменты для иллюстрации
- Веб-аналитика
- Разработка мультимедийного контента
- Понимание возможностей браузера
- Связь с клиентом
- Работа в команде
- Организация, жонглирование несколькими проектами
- Самоуправляемый
Веб-дизайнер Рекомендуемое владение программным обеспечением
- Adobe Creative Suite: Photoshop
- Adobe Creative Suite: Illustrator
- Adobe Creative Suite: InDesign
- Инструменты для каркаса
- Бальзамик
- JQuery
- JavaScript
- Системы управления корпоративным контентом
- Visual Studio
- Вспышка
Нужно нанять веб-дизайнера?
Чтобы узнать больше о найме веб-дизайнера, позвольте Artisan Talent помочь вам: нажмите здесь.