5 принципов проектирования для разработчиков

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

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

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

Относительность в 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

Заключение:

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