Чек лист (последнее обновление 23.10.23) - набор правил и советов, шпаргалка, инструкция для наших программистов, дизайнеров и верстальщиков. Чек лист постоянно пополняется и редактируется. Непрерывный процесс подразумевает непрерывное совершенствование.
Бриф — краткая письменная форма согласительного порядка между планирующими сотрудничать сторонами, в которой прописываются основные параметры будущей сделки.
Скачать бриф
Создание дизайна для сайта требует соблюдения некоторых правил, потому что проекты являются не только графическими. Данные правила упростят и во много раз ускорят разработку сайтов. Данный чек лист нужен прежде всего дизайнерам интерфейсов.
Авторизация
● Логотип (в векторе)
● Заглавие
● Идентификация аккаунта (Аватарка пользователя, id), возможность авторизоваться разным способом (телефон, почта, логин, соцсети)
● Пароль (Включить индикатор надежности пароля. Включить требования к паролю (длина, специальные символы).
Создать возможность сделать пароль видимым.)
● Ссылка для сброса пароля(Пользователь может забыть свой уникальный код - пусть он его поменяет!
Поместите эту ссылку рядом с полем ввода пароля)
● Ссылка для регистрации(Пользователь может не иметь учетной записи и все равно попал на эту страницу.)
● Социальные сети для входа (Возможность подключения через vk, fb, yandex, google).
Страница 404
● Логотип
● Заглавие
● Объяснение (Опишите, почему пользователь попал на эту страницу)
● Ссылки на страницы (возможные варианты, ссылка на главную, ссылку в контакты, поиск)
Страница контактов
● Четкие способы связи (адрес, телефон, почта, контактная форма)
● Аккаунты в социальных сетях
● Сделайте страницу доступной со всех страниц (шапка, подвал)
Страница корзины
● Данные товара(название, цена, скидка, размер, цвет, вес и т.д.)
● Возможность выбрать количество товара
● Возможность убрать товар из корзины
● Варианты доставки товара
● Видимое поля для ввода купона, скидки (над кнопкой оформления заказа)
● Отобразить все возможные способы оплаты товара
● Отобразить все возможные способы доставки товара
● Отобразить товары, которые могут заинтересовать покупателя (сопутствующие товары)
Типовая запись
● Заголовок
● Подзаголовок
● Миниатюра
● Автор
● Мета (дата публикации, метки, теги, категории)
● Содержание статьи
● Инструменты социального обмена (соц.иконки)
● Статьи по теме
● Форма подписки на обновления статей
● Возможность комментирования публикации
Требования для кнопок
● Правильный текст для кнопки (Пользователь всегда должен знать, что произойдет, если он нажмет на кнопку)
● Цвет (Используйте фирменные цвета, чтобы определить основные и второстепенные действия)
● Цвета могут указывать настроение кнопки, например, красная кнопка для удаления, что плохо,
зеленая кнопка для подтверждения, что это хорошо
● Состояния (По умолчанию, при наведении, при нажатии, выбранная(выделенная), не может быть нажата, была ранее нажата)
Требования для макетов
● Используйте сетку. Идеал модульной сетки — 12 колонок. Ибо 12 делится на 2, 3, 4 и 6.
Пример
● Макет нужно делать в sRGB. Обязательно и критично.
● Макет должен соответствовать масштабу. То есть для размера 1200px должна быть ширина макета 1200px
● Размеры веб-шрифта не должны превышать 300 Кб (со всеми вариантами).
Если используете шрифты не google fonts, то приложите к проекту (WOFF2 и WOFF)
● Размеры шрифтов и интерлиньяж указывайте целыми числами в пикселях.
● Иконки, логотипы скинуть отдельным файлом в формате .svg (в крайнем случае использовать шрифтовые типа FontAwesome). Часто иконки берутся с icomoon.io,
flaticon.com и подобных — если Вы скачиваете их оттуда в виде архива с SVG-файлами, приложите используемые к макету.
Используйте векторную графику. Везде, где это возможно. При соблюдении некоторых условий, векторная графика технологичнее растровой,
меньше размер файлов, поддерживает «эффекты внутри картинки», не требует ретинизации или ускоряет её.
● Всё распределено по логическим группам, соответствующим областям страницы (хедер, футер,
информационная часть, «плашка» товара и т.д. ), все, даже самые мелкие детали лежат каждый в своей папке,
и вы не перепутаете текст описания товара и текст на кнопке под ним, например.
● Не меняйте цвет текста и слоев путем изменения прозрачности или путем добавления эффекта Color overlay.
● Если в вашем дизайне много ховеров (возникающих или меняющихся при наведении мышки элементов), создайте отдельный макет,
в котором будет показан вариант дизайна со всеми активными ховерами.
В таком случае и заказчик, и верстальщик смогут сразу увидеть цельную картину
● Нужно осознанно выбирать пропорции и размеры, и очень желательно делать их кратными, аккуратными — не 997,
а 1000 пикселей, например. Иначе при верстке с этим часто возникают проблемы.
● При трансформировании и наложении фильтров на какую-либо растровую графику всегда конвертируйте её сначала в смарт-объект,
а только потом всё остальное.
● Считается хорошим тоном создать руководство по использованию макета — так называемый design guide. Обычно это руководство
содержит общую информацию о всех макетах: (Используемые шрифты, используемые цвета и их CSS-представления (hex или rgba)
Отступы, кегль, интерлиньяж и пр. )
● Оставляйте эффекты слоёв. Эффекты, преобразованные в слои, ощутимо дольше верстать.
● Скрытые слои не будут свёрстаны, если в техническом задании не указано иное. Хотите показать, что в макете есть необходимые блоки, скрытые по умолчанию — приложите скриншоты, на которых эти слои видны.
Обязательно складывайте нужные скрытые слои в отдельные папки и скрывайте такие папки.
● Если у вас есть какие-то особые задумки, которые не так просто показать в макете (анимация, параллакс), опишите их текстом. Постарайтесь
сделать это максимально развернуто и понятно.
● В вебе нет кроссбраузерных переносов слов. Лучше не использовать переносы слов вообще.
● Для типографики нужно показать, как минимум, следующее: заголовок 1, параграф, заголовок 2, параграф,
заголовок 3, параграф, заголовок 4, параграф, параграф, маркированный список, параграф, нумерованный
список, блочная цитата, параграф, таблица, параграф. Верстальщику важно увидеть все вертикальные расстояния
(для этого и нужно чередование параграфами и два параграфа подряд).
● Корректные символы. Проставить корректные символы тире (Это тире —, а это дефис -), кавычек « » и апострофов, в
зависимости от языка сайта. Можно использовать он-лайн типограф
● Вычитать тексты и проверить правописание. Проверить орфографические ошибки можно при помощи
Яндекс.Спеллер.
● Проверить не осталось ли на сайте тестового контента
● Текст должен оставаться в рамках родительского блока при переполнении.
● Контент больше ширины родителя не должен выходить за его пределы, ломать сетку или смещать другие блоки.
● Текст не должен смещать другие блоки.
● Слова длиннее минимальной ширины должны переноситься.
● Текст не должен переноситься с помощью двойного
● Проверить скрытые текст (e.g. alt/title атрибуты HTML тегов, тексты в JavaScript функциях)
● Текст должен быть уникальным (не менее, чем на 70 % в зависимости от тематики). Проверить уникальность текста можно тут:
Content Watch,
Text.ru,
Advego Plagiatus (для Windows)
● Контактные данные организации точны.
● Страница 404. Это можно сделать в файле .htaccess. Подробнее см. справку Яндекса
● Страница 500, 403 в файле .htaccess:
ErrorDocument 500 /page500.html
ErrorDocument 403 /page403.html
● Thank you page
● Добавить пользовательское соглашение генератор
● Добавить политику конфиденциальности генератор
● Добавить иконку favicon/ проверка
● Обязательно Doctype:<!doctype html>
● Указать кодировку <meta charset="utf-8">
● <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
● Noopener: Если вы используете внешние ссылки с target = "_ blank", ваша ссылка должна иметь атрибут rel = "noopener", чтобы запретить табуляцию вкладок. Если вам нужно поддерживать более старые версии Firefox, используйте rel = "noopener noreferrer"
● Чистка кода с помощью инструментов:
Грязная разметка
● Минимизировать/сжать статику (JavaScript/HTML/CSS):
Вам нужно:
1. Выделить из своего большого файла CSS все правила, которые влияют на отображение первой
1000px страницы. Сервис - https://jonassebastianohlsson.com/criticalpathcssgenerator/
2. Разместить этот CSS в HTML-файле, разделе head, между тегами style.
3. Полный CSS-файл загружать с помощью JS размещенного в конце страницы:
<скрипт>
var ms=document.createElement("link");ms.rel="stylesheet";ms.href="style.css";document.getElementsByTagName("head")[0].appendChild(ms);
<скрипт>
● Минимизировать код, воспользовавшись сервисом minifycode.com
● Ленивая загрузка для интерактивных карт
● Удалить ненужные комментарии в коде.
● Удалить ненужные атрибуты: low Атрибутов типов, такие как type="text/javascript" или type="text/css", больше не нужны, и их следует удалить.
● Всегда размещайте теги подключения CSS до тегов, загружающих JavaScript. Это позволяет повысить параллельную загрузку, которая ускоряет время отрисовки страницы браузером.
● Использовать только WOFF2 и WOFF при подключении web fonts.
● Размеры веб-шрифта не должны превышать 300 Кб (со всеми вариантами)
● Вынести кнопки соц. шаринга в пост-загрузку или загружать их при прокрутке содержимого к ним
● Проверить и реализовать кэширование, где это необходимо
● Установите атрибуты width и height на элемент img, если окончательное отрисованное изображение известно.
● Провести оптимизацию изображений/графики: PNG and JPEG
● Провести нагрузочное тестирование: Pingdom, PageSpeed Insights
● Проверить все e-mail шаблоны (Проверка на корректность введенного и доставки данных)
● Наличие галочек на согласие обработки персональных данных у всех форм(Без галочки форму не отправлять.)
● поставить на них каптчу на формы
● Проверить вид сайта на разных разрешениях экрана
● Проверить работу сайта в разных браузерах
● Проверить работу поиска
● HTML и CSS валидация
● Логотип компании ведёт на стартовую страницу(кроме главной страницы).
● Выключить логи ошибок/дебаги
● Если надо сделать поддержку слабовидящим
● Настроить бекапы по расписанию, и проверить восстановление из них.
● Проверить нет ли у посетителей доступа к служебным/секретным/закрытым страницам.
● Используйте этот сервис кодирования email’ов.
● Если WordPress то:
1. Удалить license.txt, readme.html в основной директории сайта.
2. Установить плагин "wordfence" для комплексной защиты.
Перейдите по ссылкам ниже и следуйте инструкциям, чтобы добавить ваш сайт в Яндекс и Google.
● Contact Form 7 - создание форм
● Flamingo - сохранять письма с Contact Form 7
● Cyr-To-Lat (WP Translitera)- перевод файлов и урл к латинице
● Easy FancyBox - открытие изображений в модальном окне
● Popup Maker - модальные окошки для контактных форм и тд.
● Ajax Search Lite - мощный поиск
● Wordfence - защита
● Converter for Media - конвертация изображений
● Rename wp-login.php - Изменяет адрес входа в административную панель.
● WP Rocket - оптимизация кода
● Custom Permalinks - жесткие урлы
● Relevanssi - улучшенный поиск
● AH Display Widgets- выбор какие виджеты на какой странице показывать
● Resize Image After Upload или Imagify Image Optimizer - сжимает загруженные фото
● All In One SEO Pack - для СЕО
● russian-date - переводит и склоняет нормально даты
● Theme Authenticity Checker (TAC) - Проверяет сайт на левые ссылки
WOOCOMMERCE
● Bonus for Woo - лучшая система лояльности
● Premmerce WooCommerce Product Filter - Фильтр отличный по атрибутам
● WP Image Zoooom — Увеличительное стекло зум для изображений
● Woocart Popup Lite for WooCommerce - выпадает окно при покупке товара и можно отправиться в корзину или оформить или продолжить смотреть товары.
Если у Вас есть вопросы или предложения по данному чек-листу, просьба написать нам, нажав кнопку ниже.
Написать нам