Ваша мышка проехала метров
До скидки 5% осталось м
Ваш промокод на скидку

Семь принципов реализации дизайна

08.05.2019

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

Структурированность

Смысл данного принципа заключается в том, что содержание документа (HTML) должен быть понятен без CSS. Это означает, что мы используем упорядоченные уровни заголовков и списки.

Вы не должны отказываться от использования таких вещей, как метки ARIA, атрибуты alt и любые другие вещи, которые могут понадобиться. Это может показаться не таким уж большим делом: используете ли вы тег привязки или кнопку (даже если они визуально идентичны). Однако они передают разные значения и обеспечивают разные взаимодействия. Семантическая разметка передает это значение поисковым системам и вспомогательным технологиям и облегчает переназначение работы на другие устройства. Это делает проекты более перспективными. Самый простой тест на структурированность - просмотр вашего HTML в браузере без стилей:

  • Это можно использовать без CSS?
  • У него все еще есть видимая иерархия?
  • HTML сам по себе передает смысл?
Одна из лучших вещей, которую вы можете сделать для обеспечения структурированного документа, - начать с HTML. Прежде чем думать о визуальных стилях, напишите простой HTML-код о том, как должен быть структурирован документ и что означает каждая часть.

Эффективность

Тщательно продумайте код, чтобы он был лаконичен и не содержал ненужной разметки и стилей. Очень часто чрезмерное использование HTML является результатом непонимания CSS или базовой структуры. Оценивая эффективность проекта, нужно задать два важных вопроса:
  • Могу ли я сделать то же самое с меньшим количеством кода?
  • Каков наилучший способ оптимизации при минимальных расходах?

Стандартизация

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

Чтобы проверить стандартизацию, просмотрите CSS и найдите любые жестко закодированные единицы: пиксели, цвета, ems и т.д. Большинство предварительно обработанных CSS должны использовать централизованные переменные, и вы не должны видеть числовых, пиксельных или шестнадцатеричных значений в отдельных компонентах. Иногда может быть целесообразно добавить несколько пикселей, чтобы отрегулировать положение отдельного компонента, но даже такие случаи должны быть редкими и заставлять вас дважды проверять свои стандарты.

Абстрактность

Данный принцип заключается в определении более крупных общих элементов, которые необходимо использовать на протяжении всего проекта. Начиная с ввода текста и полей формы, вплоть до различных вариантов навигации. Подумайте об этом так: если бы ваш CSS был открыт с открытым исходным кодом в качестве фреймворка, как бы вы сделали элементы дизайна? Ключевым моментом здесь является рассуждение о каждом элементе в более общих терминах, а не в конкретном контексте вашего проекта. Когда вы смотрите на определенный элемент, разбейте его на части и задайте для каждой из них общие стили независимо от конкретной реализации, с которой вы сейчас работаете. Наиболее распространенными элементами являются типографика (стили заголовка, высота строки, размеры и шрифты), элементы формы и кнопки. Но другие элементы также должны быть "интегрированы": теги, формат даты, времени, цены и т.д. При проверке вашего проекта на абстракцию спросите себя:
  1. Как создать данный элемент, чтобы использовать его повторном в другом проекте?
  2. Как разбить его на части, которые будут полезны во всем приложении?
Вы всегда должны абстрагировать работу от контекста, из которого она получена, чтобы быть уверенными, что создаете что-то гибкое.

Модульность

Данный принцип является важной частью создания конкретной системы проектирования, с которой легко работать и легко поддерживать. Модули должны быть уникальными для конкретного приложения, но также должна быть возможность использовать их многократно, чтобы не дублировать код каждый раз при использовании этого модуля. Например, если вы создаете список карточек товаров, вместо того чтобы делать HTML и CSS с именами классов, создайте более общий класс product-cards, который включает в себя все абстрактные классы, но также может быть повторно использован за пределами конкретного проекта.

Масштабируемость

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

Документированность

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

Вместо заключения

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