Итак, вы находитесь на стадии разработки дизайна сайта.
На текущей стадии интерфейс вашего будущего сайта – это изображение, которое создает дизайнер. Правильнее будет сказать «проектирует, как конструктор». Но тут важно понимать, что результатом текущего этапа будет являться именно изображение.
На начало 2023 года, общепринятым инструментом для разработки дизайна сайтов и мобильных приложений является Фигма. Значительно реже используются аналоги: векторные редакторы для создания интерфейсов. Если вам на согласование прислали макет, созданный в Photoshop, либо созданный в ПО, непредназначенном для разработки интерфейсов (Coreldraw, Adobe Illustrator, Gimp, …), нужно серьезно насторожиться. Что-то, совершенно точно, идет не так ?
Ниже вы найдете несколько важных правил, которые нужно придерживаться при приёмке макетов. Правила составлены на опыте разработки нескольких десятков крупных сайтов.
100% масштаб макета
Сверстанный сайт будет выглядеть ровно так, как выглядят макеты в Фигме при масштабе 100%. Так же есть возможность просматривать макеты через функционал Present. Там макеты откроются в 100% масштабе.
К сожалению, очень часто заказчики принимают макеты «с высоты птичьего полёта», рассматривая страницы при маленьком масштабе. А потом удивляются: почему сайт получился такой «крупный».
Принимайте макеты в Фигме
Необходимо принимать работы по дизайну именно в Фигме. Не просите экспортировать макеты в pdf, jpg или любой другой формат.
Обоснование такое же, как в предыдущем пункте. Если вы будите утверждать макеты в другом формате, очень велика вероятность того, что вы неправильно воспримите масштаб будущего интерфейса. У вас сформируются неправильные ожидания к вёрстке по этим макетам.
Часто просят прислать макеты сайта в формате PDF, потому что у руководителя на телефоне не открывается Фигма. То есть предполагается, что руководитель будет принимать макеты дизайна сайта, сконструированные под монитор комьютера, со своего мобильного устройства ?
Объясните руководству, что ни к чему хорошему это не приведет.
Адаптивы под мобильные принимайте с реального мобильного устройства
Макеты под компьютер нужно принимать с компьютера, макеты под телефон нужно принимать с телефона.
Мы держим экран мобильного телефона значительно ближе к лицу, чем экран монитора, когда работаем за компьютером. Интерфейс сайта на телефоне должен быть значительно «плотнее», если хотите «мельче», чем на ПК. Если принимать макеты под мобильные устройства с компьютера, такие интерфейсы могут показаться неудобно мелкими.
На самом же деле это не так. Сравните «плотность информации на дюйм экрана» под мобильное устройство и под экран компьютера, на примере Яндекс Маркета:
Кстати, даже опытные дизайнеры, работая на крупных проектах с большими бюджетами, часто проектируют адаптивы под мобильные устройства, не проверяя результат с телефона. Так получаются размашистые, неудобные для пользователя интерфейсы.
На каком сайте, по-вашему, пользователю будет удобнее?
Разрешение макетов в Фигме НЕ соответствуют разрешению вашего дисплея
Существует такое понятие как «CSS Viewport Size (CSS-пиксели)».
Для наглядности предлагаю взять пример: телефон Google Pixel 6. Он имеет экран с разрешением 1080 x 2400, и Device Pixel Ratio равный 2.625.
По несложной формуле:
CSS-пиксели = Разрешение экрана / Device Pixel Ratio.
Получаем CSS-пиксели для экрана этого девайса: 412px в ширину.
То есть, на Google Pixel 6 применяются правила, которые соответствуют 412 пикселям в макете.
То же самое справедливо и для экранов ноутбуков, в том числе Макбуков.
Apple MacBook Air 2020 года выпуска. Правила отображения верстки макета для этого ноутбука будут применяться соответствующие 1280 пикселям в макете, несмотря на то, что экран этого устройства 2560 пикселей в ширину.
Применятся те правила, что обведены красной рамкой (1280 пикслей, с учетом что браузер будет развернут на весь экран, а не макеты 1920px):
Поэтому, принимая макеты, а в последствии и верстку, нужно смотреть не на разрешение вашего дисплея, а на «CSS-пиксели» этого девайса
Масштаб операционной системы
Ещё один неочевидный, но очень важный пункт.
Тут нужно немного подробнее рассказать о PPI.
В Windows размеры разных элементов и шрифтов рассчитаны по умолчанию на 96 PPI (96 пикселей на дюйм экрана монитора). Примерно такими и выпускались мониторы на заре Персональных Компьютеров. Но, в наши дни большое распространение получили мониторы с гораздо большей плотностью пикселей на дюйм экрана (а на мобильных девайсах PPI просто зашкаливает).
Windows (и другие операционные системы), для мониторов, у которых PPI больше, чем 96, выставляют масштаб операционной системы по умолчанию больший, чем 100%.
Так, при масштабе системы 125% и разрешении экрана 1920 пикселей, размер видимой области (viewport) при полном экране браузера составляет не 1920px, а всего 1519px.
То есть на вёрстке, будут работать правила, соответствующие макетам 1519 пикселей, а не 1920 пикселей, даже если таковые и нарисованы.
?
И что, все это нужно держать в голове Заказчику? ?
Практика показывает, что да. Иначе, неминуемо возникают разногласия с Исполнителем на этапе приёмки верстки по согласованным ранее макетам.
Таких вот «тонкостей» гораздо больше, в этой заметке описаны лишь крупные. Хороший Исполнитель постарается предусмотреть их все, ещё на стадии дизайна, но принимает работы и подписывает Акты выполненных работ всегда Заказчик.
Скорее всего, именно поэтому вы и получили эту ссылку с настоятельной просьбой ознакомиться с содержимым ?
Чек-лист перед приёмкой макета
В конце оставлю небольшую шпаргалку. На что нужно обратить внимание, когда вы принимаете макет дизайна сайта, перед отправкой его на верстку:
- Нужно удалить все неиспользуемое на макете. Макет должен быть однозначный, не допускать разночтений.
- Наполнение максимально реалистичное. Стараться не использовать «рыбу». Текст в реальной жизни, будет отличаться по количеству символов, от рыбы, и дизайн может «поехать».
- Максимально постараться сделать все изображения в векторе. Иконки и логотип только в векторе.
- Гугл-шрифты максимально возможно. При необходимости использовать нестандартные шрифты - указать замену из предустановленных в Windows. Должны быть максимально похожи нестандартный и предустановленный.
- Активные состояния всех элементов(меню, кнопки, поля форм,…): hover, focus/active.
- Стандартные элементы форматирования: параграф, абзац, заголовки с 1 по 4, маркированный список, нумерованный список, зачеркнутый, жирный, курсив, ссылка, цитата, таблица.
- Нужен пример таблицы. Caption, thead, tbody. Как будет вести себя в мобильном?
- Всплывающие окна, прелоадеры, всплывающие меню, информационные сообщения и др.
- 404 страница.
- Страница результатов поиска.
- Состояние: форма с ошибками валидации инпутов. Состояние: форма отправлена успешно. Состояние: другие состояния форм. (файл загружен, удали загруженный файл, …).
- Пагинация на каталоге
- Хлебные крошки на контентных страницах.
- Предполагается вход? Предусмотреть это окно. Вход, регистрация, забыли пароль? Вид шапки, когда пользователь авторизован.
- Предполагается оформление заказа? Страница “Ваш заказ успешно оформлен”.
- Есть корзина в шапке? Как она будет выглядить, если туда положить товар?
- Предполагается печать страницы? Печатная форма.
- Favicon, apple touch icon.
- Гайд лайн или референсы по анимациям на страницах сайта.
Удачи!