Logicloud 
Тендеры и лиды
Информация
Отвечу коротко — не обязательно, но будет преимуществом. Я часто сталкивался с мнением, что дизайнер должен знать «особенности и ограничения html и css», чтобы проектировать хорошие макеты, а у верстальщика не было головной боли. Дизайнер может понимать, как ведет себя страница в вебе в отрыве от знаний синтаксиса html-разметки и каскадных стилей css. Для этого есть принципы построения UI. Но, если все же погрузиться в эту тему, то можно открыть для себя немало преимуществ. В этой статье я хотел бы показать, как знание css и html могут помочь дизайнеру в повседневной работе.
Дизайнер должен заниматься дизайном. Строить понятный и удобный интерфейс будь то интернет-магазин с оформлением покупки или мобильное приложение по бронированию отелей. Поддерживать порядок в макетах и подготавливать их для передачи frontend-разработчику по общим стандартам или принятым в компании. Вот область компетенций хорошего дизайнера. Если дизайнер будет понимать принципы потока документа html, какие-то базовые возможности css и поверхностно знать про фреймворки, которые использует разработчик, то это будет плюсом, хотя и может сыграть в минус. Плюс заключается в том, что при обсуждении проекта вы можете разговаривать с разработчиком на одном языке и понимать, что от вас требуют, или объяснить свою идею на примере наглядного кода. С другой стороны поверхностные знания верстки постоянно мешаются в голове при проектировании дизайна и ты ограничиваешь себя в решениях, потому что думаешь о том, как это будет потом реализовано в коде. Подобные знания могут вытеснять хорошие решения, потому что дизайнер может ошибочно полагать, что реализация будет сложной. Но ему просто не хватает знаний в этой области, а опытный фронтендер решит эту задачку на раз. Иногда поверхностные знания могут путать и стать обременительными, вместо того, чтобы помогать в работе. Нужно быть осторожным.
Писать код с нуля чаще всего дорого и не каждому под силу, поэтому разработчики используют различные фреймворки и библиотеки. Например, если вы знаете что разработчик анимирует элементы с помощью «GSAP», то вы можете изучив возможности библиотеки добавить интерактивности в проект, зная что это и как будет работать. Знания возможностей подобных инструментов иногда подкидывают отличные идеи для проектирования интерфейса. Поинтересуйтесь, какие библиотеки и фреймворки используют ваши разработчики, это может повысить комфорт в работе и вывести ваши способности дизайнера на новый уровень.
В анимации элементов может помочь «Lottie». Для этого есть специальный редактор прямо на сайте, или можно использовать «Adobe After Effects», а также большая библиотека уже готовых анимаций в вашем распоряжении. Все это можно передать разработчику в формате JSON. Начальных знаний хватит, чтобы сверстать страницу и добавить на нее Lottie-файлы и показать всем, как это будет выглядеть вживую.
Знания потока HTML-документа поможет избежать ошибок. Особенно это касается иерархии заголовков в макетах. Понимание поведения родительских и дочерних элементов и их взаимодействие друг с другом помогут в адаптации макетов для различных устройств. Опять же, это не обязательные знания, но их наличие безусловно плюс. А еще, это просто интересно. Стремление не ограничиваться своей областью компетенций сделает из вас хорошего специалиста с широким кругозором.
Наша система сама подберет вам исполнителей на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR.
Заполнить заявку
13303 тендера
проведено за восемь лет работы нашего сайта.
Еще одним несомненным плюсом является возможность использовать DevTools в своей повседневной работе. Знание синтаксиса поможет быстро прикинуть, как будет выглядеть дизайн решение прямо в браузере, менять заголовки, накидывать стили, добавлять элементы и искать ошибки. Смотреть как реализовано то или иное решение у других. По сути, это урезанная IDE прямо в браузере.
Полезный источник UI-решений для дизайнера и библиотека способная существенно упростить жизнь разработчику это «CodePen». Ресурс постоянно пополняющийся новыми фишками в интерфейсах. Можно бесконечно смотреть на то как течет вода, горит огонь и на работы в «CodePen». Не стесняйтесь брать оттуда идеи для своих проектов, все они бесплатны. Чтобы модифицировать и применять «пэны» нужны знания css, html и частенько javascript.
Язык стилизации непрерывно развивается, в нем появляются все новые и новые функции, поддержка которых внедряется в современные браузеры с каждым обновлением. Сегодня возможности css дают широкий инструментарий для решения практически любой задачи. Возможности css правил и встроенных функций куда шире набора статичных инструментов в графическом редакторе, во многом из-за своих вычислительных способностей. «Figma» лишь пытается воспроизвести те свойства, которые доступны в css, не больше.
