alekseyruzov
@alekseyruzov
UI

Под какие разрешения экрана готовить дизайн сайтов в 2021 году?

Несмотря на то, что в сфере веб-дизайна я тружусь давно, у меня до сих пор не сложилось четкого понимания под какие размеры экранов готовить макеты. Я стараюсь внедрять в свой рабочий процесс максимум автоматизации, чтобы любой новый проект можно было начать в "2 клика", образно говоря. Дизайн-системы — наше все, но вот самый начальный этап — определение артбордов и сеток — то, что тормозит мой процесс и не до конца мне ясно.
Я понимаю, что вопрос мой похож на сотни других, которые каждый год обсуждаются и здесь, и на других сервисах. Но хочется услышать мнения, актуальные для 2021 года.
Я буду признателен, если вы поделитесь своими соображениями не только по размеру экранов, под которые нужно готовить дизайн, но и по настройкам сеток для каждого такого размера. Было бы здорово услышать обоснованные мнения, почему выбран тот или иной размер/сетка.
  • Вопрос задан
  • 11104 просмотра
Пригласить эксперта
Ответы на вопрос 3
Kadzi
@Kadzi
Ом
1. Усложнять простое проще, чем упрощать сложное.
2. Сначала мобильные. P.S это не подразумевает обделить десктоп.
3. Перестать мыслить сетками и точными размерами: делать в первую очередь полезные блоки. Почему у дизайнеров проблема с адаптивами? Да потому что они обвешивают блоки немощными кусками "дизайнерских" говнорешений. Когда всей этой поганой мишуры нет, то и вопрос с сетками отпадает. Хороший сайт может быть хоть в 500px шириной на десктопе, при условии что есть полезное действие.

Я начинаю от 290px, но даже сверстав, смотрю что происходит если блок сжимать дальше. Всё больше прихожу к осознанию, что нужно научиться мыслить относительными единицами. На десктопе использую ширину от 700 до 1200px для контента, но плавно ухожу от точных единиц в сторону относительных.

Есть отдельная категория дизайнеров-даунов, которые выставляют в редакторе ширину холста 1920 и думают что типа теперь это дизайн под широкие экраны. (хотя контентная область осталась такой же). https://css-live.ru/ вот пример сайта с отзывчивым дизайном.

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

4. Больше отзывчивости, больше относительных единиц, больше grid css.
5. Украшайки — в последнюю очередь.
6. Дизайн сразу в браузере. Да, дизайнить сайт сразу в браузере, использовать условные элементы, которые потом можно отрисовать уже в граф. редакторе. Чтобы дизайнить в браузере, соответственно изучить вёрстку + технологии анимаций в вебе. +доступность +производительность.
7. Фильтровать тренды.

На мой взгляд, проблема сеток это вопрос дебильного дизайна и не понимания того, как это будет отображаться в браузере. Не вижу ни 1 плюса чтобы начинать с этого.
Ответ написан
Mike_Ro
@Mike_Ro
Python, JS, WordPress, SEO, Bots, Adversting
Под те же, что и в 2020 году (320/360 - 1920).
Ответ написан
Sanasol
@Sanasol
нельзя просто так взять и загуглить ошибку
не сложилось четкого понимания под какие размеры экранов готовить макеты.

И как вы делаете? Каждый раз генератором случайных чисел что ли?
До сих пор не взяли никакую сетку за основу для работы и не смогли придумать 3 разрешения мобильный/десктоп/планшет?

https://960.gs/
https://getbootstrap.com/docs/5.0/layout/breakpoints/
https://bulma.io/documentation/overview/responsive...
https://get.foundation/sites/docs/media-queries.ht...
https://materializecss.com/grid.html#grid-responsive

обоснованные мнения

обосновать можно только под конкретный проект собранной статистикой.
Для выбора "от балды" статистика по интернету общая https://gs.statcounter.com/screen-resolution-stats
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы