company_banner

Увидеть интерфейс «глазами дизайнера»: о взаимодействии фронтендера с дизайнером

    Дизайнер интерфейсов и frontend-разработчик — хоть и разные специалисты, но их задачи тесно связаны. Настолько, что толковые дизайнеры понимают основы верстки, а программисты — знают принципы хорошего дизайна. Это помогает избежать недопонимания и получить ожидаемый результат. Детальнее рассказывает Владимир Синицын, руководитель направления «Дизайн и UX» в Нетологии.

    Привет! Вот две главные причины, зачем фронтенд-разработчикам знать основы дизайна.

    Причина первая. Фронтендер и дизайнер решают общую задачу


    Дизайнер делает макет, а фронтенд-разработчик превращает его в полноценный интерфейс сайта. Качественный продукт получается тогда, когда оба специалиста понимают суть работы друг друга.

    • Дизайнер должен понимать основы верстки и CMS (если делает макет для системы управления). Это позволяет лучше определять технические ограничения и то, насколько сложно будет фронтендеру реализовать идею.
    • Разработчик должен правильно понять логику и структуру макета, разобраться, что и как в нем устроено, как отображается анимация, как происходит взаимодействие между элементами на странице. Потому что идеи дизайнеров не всегда очевидны на первый взгляд.

    Дизайнеры часто мыслят необычно и находят нестандартные решения для веб-интерфейса сайта. Фронтенд-разработчику проще понимать логику дизайнера, понимая ход его мыслей. 
    Системы совместной работы с макетами не всегда упрощают работу. Сейчас системы для создания макетов настолько развиты, что дизайнер может передать фронтендеру всю нужную информацию без личных встреч и обсуждений — просто организуя совместную работу в программе. С одной стороны, это экономит время команды. С другой — разработчику нужно понимать задумку коллеги и разобраться, как устроен дизайн макета. Иначе долгих обсуждений и доработок не избежать.

    Как наладить взаимодействие дизайнера с разработчиком: базовые правила


    Дам несколько советов из личного опыта, как наладить сотрудничество и сделать командную работу комфортной.

    Если вы дизайнер и готовите макет, старайтесь упростить работу фронтенд-разработчику:

    • Работайте по сетке. Да, сейчас становится популярна асимметрия как прием, но и она должна быть вписана в сетку.
    • Максимально типизируйте объекты в макете. Типизация облегчает и ускоряет верстку.
    • Показывайте состояния объектов при взаимодействии.
    • Сортируйте слои и называйте их понятными именами. Например, слой с шапкой — header, слой с кнопками — buttons. Так разработчик быстрее разберется в вашем макете.
    • Соберите все изображения, иконки, шрифты и другие элементы в одном месте, чтобы потом не тратить время на экспортирование элементов из макета.  
    • Создайте UI-кит на отдельной странице и покажите все состояния и элементы.
    • Не поленитесь прокомментировать макет с прототипом перед передачей фронтендщику — так коллега быстрее разберется.

    Если вы фронтендер и превращаете макет в интерфейс сайта:

    • Не стесняйтесь задать вопрос дизайнеру, если что-то непонятно.
    • Если по опыту видите, что в макет нужно внести правки, сначала обсудите их с дизайнером. Любые изменения нужно согласовать.
    • Если проект командный, на первом этапе работы обсудите с коллегами, какие инструменты планируете использовать и как лучше передать макет вам на верстку.
    • Не бойтесь обсуждать дизайн и давать конструктивные комментарии. Если видите, что что-то нельзя реализовать, объясните, почему именно и чем можно заменить.

    Когда каждый член команды понимает, что конкретно делают его коллеги и как упростить им задачи — работа проходит гладко. В результате получается качественный интерфейс, сданный в срок.

    Причина вторая. Разработчику, который знает дизайн, проще найти работу


    Разработчик с хорошим знанием дизайна может стать универсальным специалистом и закрыть сразу две позиции. 

    Где востребованы фронтедеры-дизайнеры


    В крупных компаниях готовы платить двум отдельным специалистам — разработчику и дизайнеру. В остальных сегментах рынка ситуация другая — часто компании предпочитают нанимать универсальных специалистов, которые в одиночку могут закрыть большой пул задач.

    Сейчас популярны конструкторы сайтов и большинство систем CMS работают, как конструкторы. С их помощью сделать простой интерфейс может и программист, но для создания качественного макета все еще нужны навыки дизайнера. Конструкторы массово используют небольшие компании и частные заказчики. Им выгоднее нанять универсального специалиста, который сделает макет и превратит его в интерфейс с помощью конструктора или без него. Подобная ситуация и на фрилансе.

    Что изучить о дизайне в первую очередь, если вы фронтенд-разработчик


    Я сразу вспоминаю хорошую иллюстрацию о 20 базовых принципах дизайна. Советую начать погружение с нее.


    На следующем этапе разберитесь на практике с инструментами создания интерфейсов: Figma, Adobe XD или Sketch. Почитайте, посмотрите обзоры каждого и выберите, какой вам ближе. Главное, не ограничивайтесь только мануалами. Смотрите их и сразу отрабатывайте навыки на практике, прямо в инструменте.

    На перспективу рекомендую разобраться и в 3D: программы Cinema 4D и Adobe Dimension; и анимации интерфейсов: ProtoPie и Adobe After Effect.

    Где учиться


    В университете. Вузы я не буду рекомендовать, в них дают слишком много лишнего для быстрого старта, а само обучение растянуто. Если для вас это первое образование, то ради диплома можно пойти в университет. Тем, у кого уже есть образование, стоит посмотреть в сторону интенсивов (их проводят даже в некоторых университетах) или онлайн-курсов.

    Самостоятельно. Самообразование подойдет тем, кто умеет фильтровать и структурировать информацию, обладает усидчивостью и самодисциплиной. Сейчас в свободном доступе слишком много не всегда проверенной и полезной информации, в ней можно запутаться и отдалиться от нужных скиллов еще больше.

    На онлайн-курсах. Вариант для тех, кому важно получать структурированную информацию, наставления и обратную связь от преподавателей.

    Советы


    • Освойте основы дизайна, чтобы лучше понимать макеты и превращать их в интерфейсы без долгих обсуждений и доработок.
    • Изучайте дизайн углубленно, чтобы стать универсальным специалистом и претендовать на должности не только в крупных компаниях, но и в диджитала-агентствах, стартапах, искать заказчиков на фрилансе.
    • Осваивайте инструменты дизайнера не по мануалам, а вручную — открывайте программу и разбирайтесь в ней.
    • Если готовы фильтровать информацию и находить полезные обучающие материалы в интернете, учите дизайн самостоятельно. Если хотите ускорить процесс и учиться по структурированной актуальной программы, выбирайте курсы.

    Если вы готовы изучить основы веб-дизайна, приглашаем на новый курс Нетологии


    Мы запустили курс «Веб-дизайн с нуля до middle» и приглашаем на него фронтенд-разработчиков, которые хотят освоить интерфейс именно «с точки зрения дизайнера». 
    Четыре с половиной месяца обучения в формате видео, воркшопов и разборов домашних заданий. Теорию закрепляем практикой, а также осваиваем главные инструменты веб-дизайнера.
    Нетология
    78,77
    Университет интернет-профессий
    Поделиться публикацией

    Комментарии 0

    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

    Самое читаемое