Чек лист для разработки сайта компьюти

Заполнить бриф

По дизайну

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

Авторизация
● Логотип (в векторе)
● Заглавие
● Идентификация аккаунта (Аватарка пользователя, 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, параграф, параграф, маркированный список, параграф, нумерованный список, блочная цитата, параграф, таблица, параграф. Верстальщику важно увидеть все вертикальные расстояния (для этого и нужно чередование параграфами и два параграфа подряд).

Контент и стиль

Добавить дополнительные страницы

Обязательное в коде

Производительность

● Минимизировать/сжать статику (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

Тест функциональности

Безопасность

Поисковая оптимизация и СЕО, аналитика

Плагины WordPress

Чек лист для разработки сайта

Важные мелочи