Дизайнер интерфейсов и frontend-разработчик — хоть и разные специалисты, но их задачи тесно связаны. Настолько, что толковые дизайнеры понимают основы верстки, а программисты — знают принципы хорошего дизайна. Это помогает избежать недопонимания и получить ожидаемый результат. Детальнее рассказывает Владимир Синицын, руководитель направления «Дизайн и UX» в Нетологии.
Привет! Вот две главные причины, зачем фронтенд-разработчикам знать основы дизайна.
Дизайнер делает макет, а фронтенд-разработчик превращает его в полноценный интерфейс сайта. Качественный продукт получается тогда, когда оба специалиста понимают суть работы друг друга.
Дизайнеры часто мыслят необычно и находят нестандартные решения для веб-интерфейса сайта. Фронтенд-разработчику проще понимать логику дизайнера, понимая ход его мыслей.
Системы совместной работы с макетами не всегда упрощают работу. Сейчас системы для создания макетов настолько развиты, что дизайнер может передать фронтендеру всю нужную информацию без личных встреч и обсуждений — просто организуя совместную работу в программе. С одной стороны, это экономит время команды. С другой — разработчику нужно понимать задумку коллеги и разобраться, как устроен дизайн макета. Иначе долгих обсуждений и доработок не избежать.
Дам несколько советов из личного опыта, как наладить сотрудничество и сделать командную работу комфортной.
Если вы дизайнер и готовите макет, старайтесь упростить работу фронтенд-разработчику:
Если вы фронтендер и превращаете макет в интерфейс сайта:
Когда каждый член команды понимает, что конкретно делают его коллеги и как упростить им задачи — работа проходит гладко. В результате получается качественный интерфейс, сданный в срок.
Разработчик с хорошим знанием дизайна может стать универсальным специалистом и закрыть сразу две позиции.
В крупных компаниях готовы платить двум отдельным специалистам — разработчику и дизайнеру. В остальных сегментах рынка ситуация другая — часто компании предпочитают нанимать универсальных специалистов, которые в одиночку могут закрыть большой пул задач.
Сейчас популярны конструкторы сайтов и большинство систем CMS работают, как конструкторы. С их помощью сделать простой интерфейс может и программист, но для создания качественного макета все еще нужны навыки дизайнера. Конструкторы массово используют небольшие компании и частные заказчики. Им выгоднее нанять универсального специалиста, который сделает макет и превратит его в интерфейс с помощью конструктора или без него. Подобная ситуация и на фрилансе.
Я сразу вспоминаю хорошую иллюстрацию о 20 базовых принципах дизайна. Советую начать погружение с нее.
На следующем этапе разберитесь на практике с инструментами создания интерфейсов: Figma, Adobe XD или Sketch. Почитайте, посмотрите обзоры каждого и выберите, какой вам ближе. Главное, не ограничивайтесь только мануалами. Смотрите их и сразу отрабатывайте навыки на практике, прямо в инструменте.
На перспективу рекомендую разобраться и в 3D: программы Cinema 4D и Adobe Dimension; и анимации интерфейсов: ProtoPie и Adobe After Effect.
В университете. Вузы я не буду рекомендовать, в них дают слишком много лишнего для быстрого старта, а само обучение растянуто. Если для вас это первое образование, то ради диплома можно пойти в университет. Тем, у кого уже есть образование, стоит посмотреть в сторону интенсивов (их проводят даже в некоторых университетах) или онлайн-курсов.
Самостоятельно. Самообразование подойдет тем, кто умеет фильтровать и структурировать информацию, обладает усидчивостью и самодисциплиной. Сейчас в свободном доступе слишком много не всегда проверенной и полезной информации, в ней можно запутаться и отдалиться от нужных скиллов еще больше.
На онлайн-курсах. Вариант для тех, кому важно получать структурированную информацию, наставления и обратную связь от преподавателей.
Мы запустили курс «Веб-дизайн с нуля до middle» и приглашаем на него фронтенд-разработчиков, которые хотят освоить интерфейс именно «с точки зрения дизайнера».
Четыре с половиной месяца обучения в формате видео, воркшопов и разборов домашних заданий. Теорию закрепляем практикой, а также осваиваем главные инструменты веб-дизайнера.
Привет! Вот две главные причины, зачем фронтенд-разработчикам знать основы дизайна.
Причина первая. Фронтендер и дизайнер решают общую задачу
Дизайнер делает макет, а фронтенд-разработчик превращает его в полноценный интерфейс сайта. Качественный продукт получается тогда, когда оба специалиста понимают суть работы друг друга.
- Дизайнер должен понимать основы верстки и CMS (если делает макет для системы управления). Это позволяет лучше определять технические ограничения и то, насколько сложно будет фронтендеру реализовать идею.
- Разработчик должен правильно понять логику и структуру макета, разобраться, что и как в нем устроено, как отображается анимация, как происходит взаимодействие между элементами на странице. Потому что идеи дизайнеров не всегда очевидны на первый взгляд.
Дизайнеры часто мыслят необычно и находят нестандартные решения для веб-интерфейса сайта. Фронтенд-разработчику проще понимать логику дизайнера, понимая ход его мыслей.
Системы совместной работы с макетами не всегда упрощают работу. Сейчас системы для создания макетов настолько развиты, что дизайнер может передать фронтендеру всю нужную информацию без личных встреч и обсуждений — просто организуя совместную работу в программе. С одной стороны, это экономит время команды. С другой — разработчику нужно понимать задумку коллеги и разобраться, как устроен дизайн макета. Иначе долгих обсуждений и доработок не избежать.
Как наладить взаимодействие дизайнера с разработчиком: базовые правила
Дам несколько советов из личного опыта, как наладить сотрудничество и сделать командную работу комфортной.
Если вы дизайнер и готовите макет, старайтесь упростить работу фронтенд-разработчику:
- Работайте по сетке. Да, сейчас становится популярна асимметрия как прием, но и она должна быть вписана в сетку.
- Максимально типизируйте объекты в макете. Типизация облегчает и ускоряет верстку.
- Показывайте состояния объектов при взаимодействии.
- Сортируйте слои и называйте их понятными именами. Например, слой с шапкой — header, слой с кнопками — buttons. Так разработчик быстрее разберется в вашем макете.
- Соберите все изображения, иконки, шрифты и другие элементы в одном месте, чтобы потом не тратить время на экспортирование элементов из макета.
- Создайте UI-кит на отдельной странице и покажите все состояния и элементы.
- Не поленитесь прокомментировать макет с прототипом перед передачей фронтендщику — так коллега быстрее разберется.
Если вы фронтендер и превращаете макет в интерфейс сайта:
- Не стесняйтесь задать вопрос дизайнеру, если что-то непонятно.
- Если по опыту видите, что в макет нужно внести правки, сначала обсудите их с дизайнером. Любые изменения нужно согласовать.
- Если проект командный, на первом этапе работы обсудите с коллегами, какие инструменты планируете использовать и как лучше передать макет вам на верстку.
- Не бойтесь обсуждать дизайн и давать конструктивные комментарии. Если видите, что что-то нельзя реализовать, объясните, почему именно и чем можно заменить.
Когда каждый член команды понимает, что конкретно делают его коллеги и как упростить им задачи — работа проходит гладко. В результате получается качественный интерфейс, сданный в срок.
Причина вторая. Разработчику, который знает дизайн, проще найти работу
Разработчик с хорошим знанием дизайна может стать универсальным специалистом и закрыть сразу две позиции.
Где востребованы фронтедеры-дизайнеры
В крупных компаниях готовы платить двум отдельным специалистам — разработчику и дизайнеру. В остальных сегментах рынка ситуация другая — часто компании предпочитают нанимать универсальных специалистов, которые в одиночку могут закрыть большой пул задач.
Сейчас популярны конструкторы сайтов и большинство систем CMS работают, как конструкторы. С их помощью сделать простой интерфейс может и программист, но для создания качественного макета все еще нужны навыки дизайнера. Конструкторы массово используют небольшие компании и частные заказчики. Им выгоднее нанять универсального специалиста, который сделает макет и превратит его в интерфейс с помощью конструктора или без него. Подобная ситуация и на фрилансе.
Что изучить о дизайне в первую очередь, если вы фронтенд-разработчик
Я сразу вспоминаю хорошую иллюстрацию о 20 базовых принципах дизайна. Советую начать погружение с нее.
На следующем этапе разберитесь на практике с инструментами создания интерфейсов: Figma, Adobe XD или Sketch. Почитайте, посмотрите обзоры каждого и выберите, какой вам ближе. Главное, не ограничивайтесь только мануалами. Смотрите их и сразу отрабатывайте навыки на практике, прямо в инструменте.
На перспективу рекомендую разобраться и в 3D: программы Cinema 4D и Adobe Dimension; и анимации интерфейсов: ProtoPie и Adobe After Effect.
Где учиться
В университете. Вузы я не буду рекомендовать, в них дают слишком много лишнего для быстрого старта, а само обучение растянуто. Если для вас это первое образование, то ради диплома можно пойти в университет. Тем, у кого уже есть образование, стоит посмотреть в сторону интенсивов (их проводят даже в некоторых университетах) или онлайн-курсов.
Самостоятельно. Самообразование подойдет тем, кто умеет фильтровать и структурировать информацию, обладает усидчивостью и самодисциплиной. Сейчас в свободном доступе слишком много не всегда проверенной и полезной информации, в ней можно запутаться и отдалиться от нужных скиллов еще больше.
На онлайн-курсах. Вариант для тех, кому важно получать структурированную информацию, наставления и обратную связь от преподавателей.
Советы
- Освойте основы дизайна, чтобы лучше понимать макеты и превращать их в интерфейсы без долгих обсуждений и доработок.
- Изучайте дизайн углубленно, чтобы стать универсальным специалистом и претендовать на должности не только в крупных компаниях, но и в диджитала-агентствах, стартапах, искать заказчиков на фрилансе.
- Осваивайте инструменты дизайнера не по мануалам, а вручную — открывайте программу и разбирайтесь в ней.
- Если готовы фильтровать информацию и находить полезные обучающие материалы в интернете, учите дизайн самостоятельно. Если хотите ускорить процесс и учиться по структурированной актуальной программы, выбирайте курсы.
Если вы готовы изучить основы веб-дизайна, приглашаем на новый курс Нетологии
Мы запустили курс «Веб-дизайн с нуля до middle» и приглашаем на него фронтенд-разработчиков, которые хотят освоить интерфейс именно «с точки зрения дизайнера».
Четыре с половиной месяца обучения в формате видео, воркшопов и разборов домашних заданий. Теорию закрепляем практикой, а также осваиваем главные инструменты веб-дизайнера.
