Приемы прогрессивных дизайнеров

Время на прочтение: 3 минуты
24 апреля 2024

Прогрессивный дизайн: приемы, методы

Хороший отзывчивый дизайн по своей природе остается незамеченным для потребителя контента. Он не отвлекает на себя внимания. Когда кто-то заказывает разработку нового веб-сайта, он совершенно ничего не знает о таких основах, как концепт и прототип, хотя, казалось бы, пользуется интернетом ежедневно. Все это потому что качественный отзывчивый дизайн незаметен, если не присматриваться к нему. Он сделан так, чтобы вы видели только контент. По этим, и многим другим причинам именно отзывчивый дизайн является стандартом в web-индустрии.

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

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

На протяжение процесса разработки мы придерживаемся того, что схема/прототип сайта основывается на том, под какой контент делается сайт, а стили и цветовые схемы - на фирменном стиле компании заказчика.

Систематизация спецификаций, прототипы

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

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

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

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

Аудит

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

Этот этап имеет три основных преимущества:

  • Он поможет вам обнаружить несоответствия в схемах и прототипах. Продумайте, как их устранить. Возможно, что-то стоит убрать совсем. Нельзя приступать к разработке дизайна, пока ни вы, ни клиент не будете находиться в полном согласии с прототипами.
  • Это поможет структурировать и исключить лишний frond-end код настолько, насколько это возможно. Планирование того, как будет структурирован CSS очень полезно для любых проектов, а особенно - больших. Ведь вы хотите, чтобы сайт работал максимально быстро, а чистый css - первый и главный шаг на пути к этому.
  • К разработке крупного сайта привлекается много людей. Как на начальной стадии, так и для дальнейшего развития. Важно держать код в чистоте, чтобы последующим участникам разработки было проще и удобнее разобраться в проекте.

Планирование frond-end части поможет в будущем избавить себя от сложностей как на стадии разработки, так и на этапах развития проекта.

Библиотеки паттернов

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

Важность наименований

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

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

Часто у опытных front-end разработчиков есть свои наработанные временем системы названий для создания структуры файлов.