Когда дизайн закончен, фронтэнд-разработчику передаются готовые макеты, ui-киты, гайдлайны. В них содержится информация о содержании элементов, их взаимодействии друг с другом, общие принципы построения системы и т.д.. Работа над фронтендом предполагает, что сайт разрабатывается программистами на основе предоставленной дизайнерами документации. На практике это означает, что от дизайнера не требуется нарисовать абсолютно все макеты — достаточно задать принципы их построения.
В первые часы работы над версткой не надо сразу набрасываться на макеты и начинать верстать. Для начала было бы неплохо организовать работу над фронтендом.
После того, как мы поняли, что сверстать и запрограммировать, приступаем к основной работе.
Дизайнеры для упрощения работы себе и верстальщику используют модульную сетку. Она помогает меньше задумываться о том, как располагать и комбинировать элементы на странице. Каркас сайта создаётся по такой же сетке. В Мэйке для этого мы используем bootstrap, он упрощает работу с позиционированием блоков относительно друг друга и помогает адаптировать неадаптируемое. Но чаще bootstrap помогает с позиционированием только крупных основных блоков. Для остального используется всем полюбившаяся блочная модель на флоатах или технология flexbox. В крайнем случае, возможно абсолютное позиционирование элементов. Комбинируя эти способы, мы верстаем адаптивные сайты любой сложности.
Когда каркас страницы готов, нужно привести все в приятный человеческому глазу вид. И тут на сцену выходит CSS. Да еще и вместе с помощником, поставляемым из коробки в Ruby on Rails — Sass. Sass превращает CSS в мощный язык программирования, в котором содержатся основные особенности крупных языков: от переменных до миксинов и функций. А сколько же волшебных штуковин можно сделать с помощью третьей версии css! С помощью него можно не только просто изменять стили, но и создать свои сложные графические конструкции, которые можно свободно модифицировать. Кроме того, таблицы стилей позволяют добавлять к элементам различные по сложности графические эффекты, вроде градиентов или фильтров. Для тех, на кого давят рамки обычной 2D-страницы, есть замечательная возможность создавать свои сайты с использованием "трёхмерных" объемных эффектов, используя свойство perspective. Также с помощью css можно добавлять на страницу сложные анимации.
На этом остановимся подробнее. Анимации — закономерное развитие веб-дизайна. Современные интерфейсы движутся в сторону минималистичных, плоских элементов. Для добавления интерактивности используются анимации. Они делают сайт живее, привлекают пользователя, помогают взаимодействовать с сайтом. Правильно анимированный сайт — живой организм, который привлечёт внимание к нужным вещам, подскажет как с ним общаться, ответит на действия пользователя.
Какие анимации будут на сайте, решает дизайнер. Кстати, наш арт-директор написал весьма прикольную статью по этому поводу. Я же расскажу, какими способами можно анимировать сайт:
Для координации взаимодействия элементов и того, чтобы вся красивая вёрстка не развалилась, как карточный домик, продумывается система javascript-классов. Базисом служат принципы ООП (объектно-ориентированное программирование) и паттерны проектирования.
Правильно спроектированный программный код гибкок и устойчив к изменениям. Данный подход упрощает совместную работу программистов над проектом, даже если они находятся в разных уголках планеты (и такое у нас приключалось). Подобная система хоть и сложна, но окупается в дальнейшем: сайты продолжают жить, развиваться, порой даже без нашего участия — силами разработчиков из других компаний. Нам потом меньше икается :)
Для упрощения работы программисты применяют различные библиотеки, подключают CMS-системы, пользуются фронтенд-фреймворками. Мы в Мэйк считаем, что это не всегда того стоит. Используя наработки других программистов, вы загоняете себя в узкие рамки того, что кто-то другой придумал за вас. Это мешает развиваться и выходить за рамки дозволенного.
Тем не менее, для ускорения разработки стандартных элементов и стандартного функционала, мы тоже используем сторонние библиотеки. Но каждая из применяемых нами библиотек действительно очень гибка и многократно проверена на десятках проектов:
Это основные библиотеки, которые мы используем в агентстве. Они удовлетворяют 90% потребности в стороннем функционале.
Иллюстрация: Miguel Batres