ПРАВИЛА КРУТОГО WEB - ДИЗАЙНА

Чтобы сайт получился действительно крутым, мало нарисовать крутой дизайн. После отрисовки с макетом будет работать front-end и back-end разработка, и в 99% случаев возникают вопросы.

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

Практически всегда при создании макета веб-дизайнеры используют самые популярные разрешения экранов устройств: 1920, 1680, 1024. Проблема в том, что реальная ширина окна в разных браузерах отличается в меньшую сторону примерно на 17-24px — это скроллбар и бордюры. Казалось, бы немного, но иногда встречаются настолько «плотные» макеты, что это критично.

Сегодня сайт должен быть не просто адаптивный, а «резиновый», чтобы прекрасно смотреться на любых устройствах. В этом случае макет на 1-2 разрешения не подойдет. Front-end разработчику важно четко понимать, как и что должно выглядеть на разных устройствах, а не гадать за дизайнера.

Исходник — маленькое изображение, которое будет хорошо смотреться только на старых устройствах. А остальным как быть? Смотреть на растянутые изображения?

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

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

По факту — текст зачастую оказывается в разы длиннее и просто не вмещается. Или наоборот, сильно короче и беднее по содержимому, в результате возникают неэстетичные пустоты.

Есть всем известный список «безопасных шрифтов». К сожалению, его иногда игнорируют. Как итог — скачущий интерлиньяж и разные межсимвольные расстояния в зависимости от кегля и используемого браузера. Чтобы выровнять текстовые элементы, приходится использовать css-хаки!

Не нужно объединять слои с различными эффектами! Многое из того, что намертво прикручивается в макете можно сделать на css, а это оптимизация. Так обычные прямоугольные .png с нарисованными тенями и прозрачностью «съедают» лишний трафик и создают сложности при выравнивании сетки. Css тени же выходят за пределы контейнера не ломая сетку.

То же самое касается любых иконок. Используете фигму? Сделайте отдельный слой под иконкой с тенью. Текстовые блоки — не исключение. Дизайнер кладет в один блок текст с разными стилями (жирность, цвет и т.д.). В результате приходится делать на глаз.

При работе в Figma, не забывайте объединять изображения, которые наложены друг на друга, для создания композиции. Это работа дизайнера, а не front-end разработчика.

Photoshop, режимы наложения слоёв? Дайте возможность забрать нужную графику, вытащить требуемое в требуемом виде должно быть просто.

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

Делаете макеты в Invision? Не забывайте расшаривать ресурсы. Частая проблема: макет открывается, а ничего забрать нельзя. Если дизайнер работает на аутсорсе, да ещё в далёком часовом поясе, это превращается в огромную проблему.