Главная->Новости->Дизайнер и фронтендер

Дизайнер и фронтендер

02 Нояб в 11:11
Просмотров: 150



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

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

Фронтендер и дизайнер решают общую задачу



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

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

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

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

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

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



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

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

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

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



Оставить комментарий

Ваше имя::


Комментарий::




Ничего не найдено