5 принципов проектирования для…

8 марта 2025 г. • От KWD

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

Ключевые моменты

Используйте rem и проценты в CSS вместо пикселей для текучих и масштабируемых стилей на всех устройствах.
Устанавливайте контрольные точки медиа-запросов на основе потребностей контента, а не ширины устройства, для лучшей производительности.
Сначала перечислите необходимые функции, прежде чем сосредоточиться на визуальных аспектах разработки.
Следуйте строгому порядку: эскизы каркаса, затем дизайн с цветом и типографикой, затем код.
Тестируйте адаптивность веб-сайта с помощью специализированных инструментов, таких как LT Browser, для совместимости с мобильными устройствами.

Дизайн — это видимый интеллект. - Алина Уилер, автор.
Первостепенная роль дизайнеров — разработка интерфейсных визуальных компонентов приложения/веб-сайта. Их работа влияет на удобство использования и пользовательский опыт приложения/веб-сайта.

Сначала решите проблему. Затем напишите код. - Джон Джонсон
Разработчики же, в свою очередь, сосредоточены на кодировании идей и концепций при разработке функциональности приложения/веб-сайта.

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

Относительность в CSS

Использование em, rem и процентов способствует гибкости ваших CSS-стилей на разных размерах экрана.

Вместо пикселей в качестве единиц используйте rem. Например, section.hero {width: 90%; font-size: 1.5rem;} вместо section.hero {width: 900px; font-size: 16px;}

Например, если вам нужно изменить точку останова, ваши ширины останутся консистентными. И вы можете изменить размер шрифта любого элемента, просто изменив размер шрифта элемента.

Медиа-запросы и контент

Контент определяет точки останова для любого устройства, а не ширину устройства.

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

Нам нужно найти разумное решение для этой проблемы, и контент предоставляет нам возможность решить эту проблему.

@zomigi первый медиа-запрос — это фактически отсутствие поддержки медиа-запросов. — Брайан Ригер (@bryanrieger) 1 декабря 2011 г.

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

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

Краткость — душа остроумия. - Полоний

Держите это кратко и просто.

Сначала перечислите функции

Как разработчики, мы начинаем с перечисления функций, которые необходимо разработать.

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

Вопросы, которые вы задаете себе, указывают на тип результата, который вы будете выдавать.

Допустим, вы спрашиваете себя: «Должно ли это быть выровнено влево или вправо?» вместо того, чтобы спросить «Какие способы я могу использовать, чтобы пользователь чувствовал себя комфортно при использовании приложения?»

Сначала перечислите функции, затем занимайтесь дизайном.

Каркасы, дизайн, кодирование: в этом порядке

Что бы вы ни делали, сначала сделайте грубый эскиз идеи на бумаге или грубый каркас.

Затем создавайте дизайн с цветовыми схемами, типографикой и визуальными элементами.

Последний этап — кодирование.

Время производства улучшится, если вы будете следовать этому порядку.

LT Browser — тестирование адаптивности

Знаете ли вы, что существует браузер для тестирования адаптивности приложения или веб-сайта? Это называется LT Browser (браузер Lambda Test).

Это браузер нового поколения для создания, тестирования и отладки мобильных веб-сайтов.

https://www.youtube.com/watch?v=RH95O9mOGoc

Заключение:

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

Часто задаваемые вопросы

Использование rem и процентов делает стили CSS текучими на разных размерах экрана. Если вам нужно изменить контрольные точки или размеры шрифтов, ваши ширины остаются последовательными без ручных корректировок по всему коду.

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

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

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

LT Browser (Lambda Test Browser) — это инструмент нового поколения, разработанный специально для создания, тестирования и отладки мобильных веб-сайтов и их адаптивности на различных устройствах.