Как создать лучший дизайн сайта: 7 обязательных элементов
Самое главное заблуждение о понятии лучшего веб-дизайна заключается в том, что он должен быть красивым. Многие компании и владельцы сайтов в первую очередь уделяют внимание именно «красивому» дизайну, забывая о принципах построения информации на сайте. В итоге получаются сайты, над которыми плачут все: они неудобны для пользователей, они не нравятся другим дизайнерам, они не работают на бизнес. Подробнее о боли дизайнеров рассказывали тут.
Одним из важных принципов создания лучшего дизайна является иерархия.
Иерархия в веб-дизайне – правила расположения элементов на сайте. При создании иерархии всегда учитывается визуальное восприятие пользователя.
Структура сайта должна быть простой и удобной. Чтобы создать понятный сайт, необходимо придерживаться определенных правил, которые помогут пользователю не запутаться в большом объеме информации.
Ниже мы разберем те самые правила, которые стоит учитывать при разработке дизайна и которые позволят получить тот самый «лучший» дизайн.
Иерархия для создания лучшего веб-дизайна: 7 обязательных элементов
1. Размер имеет значение
Размер – один из основных принципов построения правильной структуры сайта. Чтобы заставить обратить внимание на какой-либо элемент в первую очередь, сделайте его крупнее. Второстепенные объекты делайте меньше.
Пример этого принципа иерархии можно наблюдать в интернет-магазинах. На таких страницах первое, что бросается в глаза – это непосредственно сам товар. Другие элементы выглядят менее заметными.
Посмотрите, как это сделано на сайте Самсунга:
И на сайте Футворк:
Сайт Елены Крыгиной пользуется тем же приемом:
Все популярные веб-дизайны 2020 строятся по этому принципу.
2. Цвет для лучшего веб-дизайна
Цвет играет важную роль в восприятии информации человеком. Главное здесь – соблюдать баланс. Не перегружать видимую область контента несколькими цветами.
Есть риск, что пользователь просто «испугается» агрессивного сочетания цветов и не сможет выполнить целевое действие. Лучше использовать один акцентный цвет и два второстепенных. В таком случае всегда понятно, где расположена самая важная информация.
Заранее стоит уделить внимание фирменному стилю или хотя бы логотипу. Если у Вас имеется фирменный стиль, необходимо подбирать цветовую схему согласно ему. А если есть разработанный логотип, старайтесь использовать цвета для сайта, которые в нем присутствуют. Инструкцию по созданию логотипа смотрите тут.
В качестве примеров отличных дизайнов, умеющих использовать цвета, можно привести интернет-магазины. Чаще всего акцентный цвет используется в различных баннерах со скидками, новинками, эксклюзивными товарами и т.д.
Например, аутлет Asos:
Или сайт компании Adidas:
На каждом сайте, о котором можно сказать, что он имеет крутой дизайн, есть один яркий акцент, а не бесконечная игра с цветами. Следующий важный элемент идеального дизайна сайта в 2020 — типографика.
3. Типографика
Типографика формирует правильное восприятие текстовой информации на сайте. Для создания лучшего дизайна мало играться со шрифтами, нужно выстраивать иерархию с помощью текста, при этом вовсе необязательно использовать несколько разных шрифтов. Достаточно выбрать один, а менять только размер и начертание.
С помощью этого приема страница не будет перегружена, и текст будет легко восприниматься в последовательном порядке.
Подобные приемы визуальной иерархии можно заметить на сайтах, размещающих статьи. Здесь строго соблюдается текстовая иерархия. Иначе читатель, запутавшись в дебрях непонятно выстроенного текста, просто покинет страницу.
Посмотрите на сайт Medium:
Больше статей на схожую тематику:
4. Группировка
Группировка – неотъемлемая часть визуального восприятия контента на сайте в целом. Чтобы пользователь мог как-то разграничивать информацию, необходимо группировать элементы в отдельные блоки. Здесь можно применять правило внутреннего и внешнего: отступы между объектами внутри блока должны быть меньше, чем снаружи.
Это помогает разбивать информацию по смыслу. Человек, находясь на сайте, будет подсознательно группировать данные и, соответственно, легче их воспринимать.
Сайты с выраженной группировкой, как правило, имеют много текстовой и графической информации. К таким примерам можно отнести и обычные лендинги.
Например, мне поонравился лендинг от Skillbox:
Или сайт ветеринарного центра:
5. Свободное пространство
Во всех современных дизайнах должно всегда присутствовать свободное пространство. Частая ошибка при разработке дизайна – пренебрегать пустым пространством между объектами. На сайте должно быть достаточно воздуха, позвольте контенту «дышать» =).
Не нужно бояться, что лишнее негативное пространство оттолкнет пользователя и информация покажется скучной. Наоборот, такой подход в дизайне поможет визуально разграничить контент и облегчит восприятие.
Этот принцип иерархии в тренде у Apple:
6. Паттерны Z
Управляют вниманием пользователя. Информация считывается по определенной схеме, повторяющей написание букв «Z» и «F».
Z-образный паттерн ведет взгляд слева направо, начиная с логотипа. Затем вниз по диагонали, и далее к заголовку следующего блока – так же слева направо. Такой паттерн может повторяться несколько раз на сайте. Используется чаще всего для лендингов с небольшим количеством информации.
F-образный паттерн так же, как и Z, начинается слева направо. Далее опускается немного вниз и повторяет движение. Используется на сайтах с выравниванием контента по левой стороне с большим количеством заголовков и текста.
Посмотрите, сайт певца Монатика сделан по Z-паттерну:
А сайт Кремля по F:
Хотите на выходе получить классный дизайн, не отступайте от этих паттернов. Сейчас они в моде.
А еще есть математическая формула классного дизайна.
Нравится статья? Тогда смотрите наши курсы!
7. Золотое сечение
Золотое сечение помогает выстроить правильное соотношение элементов. Схема золотого сечения выявлена математическим путем. Она определяет выгодное расположение элементов для восприятия информации человеком. С помощью золотого сечения можно правильно выстроить пропорции объектов.
Давайте посмотрим на примере сайта Maybelline:
Или вот знакомый всем Youtube:
Посмотрите, какой классный кот, он точно вам понравится, потому что четко вписывается в модель Золотого сечения:
Общие рекомендации, как создать идеальный дизайн
Чтобы составить грамотную иерархию на сайте, необходимо помнить, что все элементы должны хорошо сочетаться между собой.
- Вся информация, которая будет размещена на сайте, должна быть подготовлена заранее. Прототип, текст, изображения – все это нужно иметь до начала работ.
- Весь контент должен обладать последовательной структурой. Разграничьте всю информацию на несколько уровней – от самого главного до наименее значимого.
- Старайтесь не перегружать сайт декоративными элементами. Если какая-то деталь добавлена для того, чтобы приукрасить сайт, лучше уберите её.
Примеры роста кликов, конверсий, заказов и прибыли:
Заключение
Чтобы создать дизайн, который понравится большинству пользователей, в первую очередь, конечно, нужно думать об удобстве. Все вышесказанные правила хорошо работают, если их соблюдать в целом с каждой стадией разработки сайта. Ведь у нашей конфетки, помимо красивой обертки (дизайна), должна быть и вкусная начинка (верстка, программирование, контент и т.д.).
Если вам удалось создать такой ресурс – поздравляем! Вы владелец идеального сайта =).
Ну а если вам нужна помощь, вы можете заказать разработку сайта у нас. Наши специалисты выполнят полный комплекс услуг и учтут все ваши пожелания.
По логотипу встречают, по услугам провожают!
Разработаем классный логотип, который запомнится потенциальным клиентам и сработает на имидж вашей компании.
Как улучшить дизайн сайта
Ученые Стэнфордского университета провели опрос, который показал, что 46% респондентов составляют мнение о сайте на основании его внешнего вида и интерфейса. Если дизайн не нравится пользователю, то и весь контент кажется ненадежным и не заслуживающим доверия. В этой статье хочу поговорить о том, какие есть способы для того, чтобы улучшить дизайн сайта.
Иллюстрации
Правильно подобранные иллюстрации делают сайт живым. Их главная задача — не просто заполнить пустое место, а вызвать эмоции и связать их с брендом. Авторские иллюстрации помогут сделать сайт узнаваемым. Их можно использовать в заголовках, иконках и при создании анимации.
Иллюстрации помогут сделать дружелюбным даже самый минималистичный дизайн.
При наполнении сайта иллюстрациями важно помнить о единообразии и не переусердствовать. Самые красивые иллюстрации вызовут отторжение, если их будет слишком много.
Типографика
Типографика играет большую роль в формировании идентичности бренда. От нее зависит, как пользователи будут воспринимать текст.
У каждого шрифта свой характер. Постарайтесь выбрать тот шрифт, который передаст настроение текста за счет графического образа.
Условно шрифты можно разделить на четыре категории:
Антиквенные шрифты (Serif) — это шрифты с засечками. Раньше они использовались для набора книг и периодики, но с появлением экранов с высоким разрешением, антиквенные шрифты пришли в веб-дизайн. Они легко читаются, поэтому подходит для набора большого объема текста.
Гротескные шрифты (Sans Serif) — шрифты без засечек. Хорошо подходят для текстов небольшого объёма, заголовков и узких колонок.
Декоративные шрифты — шрифты, которые имитируют исторический стиль или декоративную обработку. Подходят для набора небольшого объёма текста, который требует сложного художественного оформления.
Рукописные шрифты — шрифты, имитирующие почерк или каллиграфический стиль. Используются так же, как и декоративные.
Google Fonts — известная библиотека бесплатных шрифтов, где можно легко подобрать подходящий шрифт и импортировать его на сайт. Главное не забыть настроить кегль, начертание и междустрочный интервал.
Не бойтесь комбинировать шрифты с засечками и без. Главное, чтобы они легко считывались и сочетались между собой.
Фотографии
Большинству людей легче запомнить картинку, чем прочитанный или услышанный текст. Поэтому к выбору фотографий для сайта стоит подходить особенно тщательно.
Согласно исследованиям, одно изображение может заменить 84 слова.
Правильная фотография для сайта должна быть:
- информативной;
- качественной;
- оригинальной;
- эмоциональной.
Дизайнеры любят размещать на сайтах большие фоновые фотографии. Они красивые, но быстро забываются. Исключение составляют фотографии, которые вызывают эмоции: например, изображения людей или фото с необычных ракурсов.
Идеальный вариант — отказаться от стоковых фотографий, особенно с бесплатных фотостоков. Если пользователь увидит фотографию с сайта на другом ресурсе, это может подорвать доверие к вашему контенту и бренду в целом.
У Почты России есть два официальных представителя в социальных сетях — Дмитрий Маркин и Татьяна Кузнецова. Пользователи выяснили, что фотографии обоих были приобретены на фотостоках и усомнились в реальности сотрудников. История быстро разошлась по сети, ударив по репутации Почты и её «официальных лиц».
Анимация
Анимация на сайте — эффектный, но далеко не новый прием. Сначала анимацию создавали при помощи GIF, затем — Flash. Оба решения сильно замедляли работу сайта. Сейчас для создания анимации используют CSS-кодирование и JavaScript, которые не так заметно влияют на производительность.
Анимация может быть полноэкранной или интегрированной в навигацию. Её главная задача — помочь пользователю разобраться со сложными моментами и привлечь его внимание к важным деталям.
Видео
Как и в случае с анимацией, движущееся изображение на странице мгновенно захватывает внимание пользователей. Главные преимущества видео — динамика, развитие сюжета и больший эмоциональный отклик.
Видео на сайте подходит для следующих целей:
- показать то, о чем сложно рассказать (обучающие ролики);
- рассказать историю;
- продемонстрировать продукт.
Фоновых видео только для красоты лучше не использовать: они уменьшают производительность сайта и при этом не доносят никакой информации до пользователя. Если же удивить пользователей все равно хочется, советую присмотреться к альтернативам видео: анимации, параллаксу и синемаграфии.
Синемаграф — это фотография, один элемент которой совершает незначительное и бесконечно повторяющееся движение, а остальное изображение остается неподвижным.
При размещении на сайте видео, которое воспроизводится автоматически, хорошим тоном будет отключить автовоспроизведение звука. Пользователям нравиться самим решать, нужен ли звук — и лучше предоставить возможность сделать это легко. Внезапный громкий звук пугает не только пользователя, но и всех окружающих.
Цвета
С каждым новым поколением мониторы и дисплеи устройств становятся лучше. Поэтому концепция «безопасной веб-палитры» устарела. Выбирая цветовое оформление сайта, стоит помнить о:
- целевой аудитории;
- корпоративном стиле;
- контрастной типографике;
- цветовой гармонии.
Чтобы выбрать цветовое решение, определите целевую аудиторию и сообщение, которое хотите до нее донести.
Яркие цвета
Использование яркой цветовой палитры при оформлении веб-сайта — популярный тренд последних лет. Это универсальное решение для сайтов, рассчитанных на широкую аудиторию.
Одни дизайнеры подбирают цветовую схему на глаз, другие используют генераторы цветовой палитры. Одним из лучших на данный момент считается Adobe Color CC. С его помощью можно создавать свои цветовые схемы, а также вдохновляться работами других дизайнеров.
Правда, важно помнить, что генераторы помогают дизайнеру, но не заменяют чувство вкуса. Эффектная палитра, которую выдал генератор, может оказаться неудачными решением на этапе реализации.
Как должен выглядеть сайт в 2022? Главные тренды дизайна
Последние несколько лет веб-дизайн претерпел массу изменений — от нагроможденных информацией и «сверстанных на коленке» страниц до футуристичной 3D-графики и кислотной ностальгии по 80-м и 90-м.
Меня зовут Лагойский Алексей Дмитриевич, я владелец агентства Welstate, поэтому мы постоянно следим за трендами.
В этой подборке попробуем разобраться, какой дизайн сайтов будет выглядеть модно сейчас и позволит спокойно оставаться в тренде еще пару лет, не требуя сбора креативной команды и срочного редизайна. Что в будущем сэкономит и силы, и бюджет : )
Сложные градиенты позволяют оставить дизайнерам поле для творчества, а пользователям сайтов и интерфейсов – легче считывать информацию и буквально погружаться в контент страницы. Вы можете использовать фоновые видео с градиентами, комбинировать градиенты с плоскими или объемными элементами, или с крупной типографикой. Больше легкости, больше прозрачности!
Высшим пилотажем будет, если вы позволите градиенту взаимодействовать с посетителем сайта: по клику или движению мыши, во время прокрутки страницы.
Универсальное решение для тех, кто использует конструкторы сайтов или хочет самостоятельно создать эффектный сайт без навыков создания сложной графики. Однако, это не значит, что можно обойтись без правил композиции и чувства стиля ; )
В таком приеме важно соблюдать несколько правил: хорошо подобранные шрифты, воздух между элементами, игру контрастов (например, можно в качестве элементов дизайна использовать GIF-изображения в едином стиле, когда все остальное пространство – однородный фон и текстовое наполнение). Используйте крупные заголовки, один шрифт, контрастные цвета и минималистичную графику. Таким образом вы сможете сделать акцент на содержании. Но в таком проекте нельзя экономить на копирайтинге — текст выйдет на первый план.
К этому же тренды можно отнести прогрессивный минимализм или моноколорные решения.
Этот тренд перекликается с предыдущим пунктом, но здесь упор, все же, больше на иллюстрации: контрастные, с тонкими контурами. Дополняете такие изображения крупными заголовками и все, вы – прекрасны! Вообще, воздух и легкость, простота и лаконичность это то, что объединяет все тенденции, о которых мы сегодня рассказываем. Когда мы делаем лендинги, заказываем иллюстрации на фриланс-биржах, подбираем подходящие на стоках или рисуем сами (наши дизайнеры занимаются еще и иллюстрацией).
Для простых решений есть сервисы с бесплатными иллюстрациями, например, https://storyset. com/.
Еще одно веяние – простые, нарисованные от руки иллюстрации (иногда на грани с детским рисунком), но с умелым взглядом профессионала. Такой подход делает сайт на 100% уникальным. А еще открывает возможность проявить собственный креатив на максимум. Владельцы бизнеса, которые любят участвовать в разработке и имеют под рукой iPad, смогут легко воплотить в жизнь даже самые смелые идеи и отправить свои иллюстрации разработчикам. Главное – помнить о простых правилах таких иллюстраций: четкий и идентичный контур изображений, не более 3-5 цветов, легко считываемая идея.
Типографика и навигация с каждым годом становятся все крупнее и крупнее, чтобы выделить главные смыслы и подчеркнуть акценты. И вряд ли этот тренд когда-то устареет, настолько он функционален.
Огромные буквы используются для создания кричащих и коротких заголовков, удержания внимания пользователя и облегчения навигации между разделами.
Кому как, а новая реальность пришла к нам со всех сторон. С запуском метавселенной от бывшего Facebook (и еще с анонса animoji от Apple) появились и новые тенденции в дизайне. Например – использование аватаров вместо ваших фотографий на сайте, ключевые 3D-элементы в сочетании с кислотными цветами, техно-сетками и контрастными градиентами. Сюда же можно отнести прием, где роль графики выполняют только emoji.
Что должно быть в макете сайта: шпаргалка для дизайнера
Порой дизайнер предоставляет заказчику макет, в котором чего-то не хватает. Верстальщики, бэкендеры и любые другие технические специалисты, конечно, могут сделать недостающий элемент на своё усмотрение, но их не будет волновать внешний вид. Вместо тщательно подобранных оттенков, они добавят свои цвета, сделают стандартные шрифты, и все усилия дизайнера пойдут насмарку.
Макет также могут отправить обратно на доработку. Поэтому дизайнеру лучше иметь под рукой список необходимых элементов и заглядывать в него до того, как макет передадут в вёрстку. Это позволит сделать всё сразу, не возвращаться к проекту несколько раз и не переживать, что при сборке страницы что-то пойдёт не так. Хотя что-то, скорее всего, всё-таки пойдёт.
Осторожно, в статье много иллюстраций.
Общие рекомендации
Прежде чем говорить о конкретных элементах, стоит упомянуть основные моменты, о которых дизайнеру лучше не забывать.
Шрифты
Их нужно прикреплять к макету, иначе разработчик скачает какие-нибудь не те и испортит дизайн.
Векторные объекты
Удивительно, но векторная картинка должна быть в векторе и на макете. Если в макет вставить изображение другого формата, там оно будет выглядеть нормально, но при тестировании станет мыльным. Чтобы такого не происходило, надо всегда использовать вектор: скажем, прикреплять SVG-иконки.
Сетка
Лучше всего не удалять сетку с макета, так как по ней удобно ориентироваться. Когда есть сетка, проще разбивать макет на части, делать колонки нужной ширины. Тогда в адаптивной вёрстке меньше багов, и сайт в целом выглядит аккуратнее.
Сетка на макете сайта в Figma
Обязательные элементы для сайта
Есть вещи, которые должны быть в макете любого сайта. Но почему-то некоторые из них дизайнеры часто забывают. Если их вообще не сделать, то сайт будет выглядеть как минимум странно. А если отдать их на усмотрение верстальщика — опять же — высока вероятность, что эти элементы будут выбиваться из общей картины.
Страница 404
Она нужна для замены той страницы, которой по каким-то причинам нет: товар убрали из продажи, ссылка оказалось битой, в адрес вкралась опечатка, пользователь забыл залогиниться и прошёл по прямой ссылке из закладок и т.д.
404 — это код самой популярной ошибки. Кроме неё существует и множество других состояний, но для упрощения работы 404 стала универсальной страницей для обработки ошибок.
Если не забыть про 404, можно пофантазировать и сделать креативной даже эту, самую типовую, страницу. Например, можно добавить интерактивности.
Страница 404 сайта компании Dewis
Пустая страница
Если поисковик или фильтр не выдал никаких вариантов, то открывается страница с текстом из разряда «Записей за выбранный период нет». И о ней тоже надо подумать заранее.
Пустая страница при отсутствии вариантов на сайте «N+1»
Однако некоторые сайты даже в случае неудачного поиска специально показывают альтернативные варианты: пустой выдачи быть не может.
Страница с результатами поиска
Для поисковых запросов дизайнеры часто рисуют только иконку, а сам выпадающий поиск или его результаты забывают. Но если их не сделать, окончательный вариант имеет, по крайней мере, странный вид. Вот так выглядит страница, если выпадающий поиск отрисован:
Поиск товаров на сайте Zara Home
А так выглядит та же страница, если выпадающего списка нет:
Картинка для шаринга
Речь идёт о картинке, которая появляется в соцсетях или мессенджерах вместо текстовой строки, когда пользователь отправляет кому-либо ссылку. Кстати, разные соцсети отображают этот блок по-разному. Чтобы задать картинку и подпись к ней, нужна разметка Open Graph.
Ссылка на HTML Academy во Вконтакте
Страница с текстом
Это может быть целая страница в блоге или какая-либо отдельная статья. Неопытные дизайнеры часто рисуют одну страницу с текстом по примеру заказчика, но упускают то, что в текстах других страниц может быть другой контент. Поэтому нужно продумать все возможные элементы:
цитата и длинная цитата с подписью и фото;
видео (и подпись, если она нужна);
картинка (и подпись, если она нужна);
списки (нумерованный и маркированный), вложенные списки;
Необязательные элементы
Они помогают пользователю сориентироваться на сайте, добавляют наглядности. Такие элементы есть не в каждом проекте, но если они всё-таки предполагаются, надо отрисовать и их. Вот список элементов, которые дизайнеры могут забыть.
Стили для карты отдельным текстовым файлом
Если вместо обычной карты хочется сделать что-то нестандартное, можно воспользоваться сервисом Snazzy maps. Только нужно уточнить у клиента, будет ли он покупать лицензионный ключ к картам. Если да, передавать разработчикам стили надо в виде JSON-файла.
Разные стили карты Санкт-Петербурга на Snazzy maps
Выделение активного пункта в меню
Это тоже нерегулярный элемент, но для заботы о посетителях сайта его лучше предусмотреть. Это позволит пользователю не забыть, на какой именно странице он находится.
Поисковый запрос в Google
Хлебные крошки
Они особенно полезны на больших сайтах или на сайтах со сложной структурой разделов. Например, когда с какой-либо страницы хочется перейти сразу к определённой категории.
Блог HTML Academy
Личный кабинет
Сюда относятся страницы входа, страницы с настройками и введёнными данными, страницы с предпочтениями (любимые товары и т.д.).
Редактирование профиля на ivi.ru
Постраничная навигация
Для блока новостей при вёрстке достаточно и двух-трёх блоков, но на реальном сайте таких блоков могут быть тысячи. Поэтому не стоит забывать про отрисовку пагинации и кнопки «Показать ещё».
Статья на сайте National Geographic
Кнопка «Вверх»
Её обычно рисуют для длинных лендингов и каталогов с товарами, чтобы пользователю было удобно вернуться наверх страницы.
Кнопка «вверх» при поиске товаров на сайте Румиком
Фильтры
Если они есть, нужно внимательно проверить все возможные детали для каждого.
Чекбоксы, радиокнопки — надо учесть особенности всех типов фильтров.
Выбор товаров на Ozon
Кнопка «Сбросить/очистить всё» или сбросить отдельные пункты.
Поиск товаров на Ozon
Раскрытый список с пунктами.
Фильтр категории на Ozon
Ползунок для фильтра с ценой (от… до…).
Фильтрация цены товаров на Ozon
Блок с количеством товаров:
Выбор количества товаров на Ozon
Обработка ошибок или подсказки к полям:
Подсказка к полю на Ozon
Согласие на обработку персональных данных
При регистрации, заполнении формы на сайте по закону нужно место для галочки или подписи пользователя о согласии обработки данных и ссылка на политику конфиденциальности. Это самый обязательный из всех необязательных элементов.
Регистрация на сайте Zara.Home
Фавикон
Это маленькая картинка рядом с названием страницы на вкладке. Чтобы она корректно отображалась во всех браузерах и на всех устройствах, нужно подготовить картинку в разных размерах и форматах. А ещё можно для разных страниц одного сайта нарисовать свой фавикон.
Фавиконки YouTube и Google Документов
Заглушки для изображений
Если фотография человека или товара не загружена, должно быть какое-то изображение — заглушка.
Товары с сайта Ozon
Модальные окна
То, что происходит после отправки формы:
«Спасибо за заявку»
«Ваша заявка не отправлена, произошла ошибка»
Второе окно можно увидеть очень редко. Например, если при отправке что-то случилось с сервером и он не смог обработать заявку пользователя.
Оформление заказа на на сайте Румиком
Календарь
Если делать календарь, то стоит задизайнить несколько состояний::
интервал между выбранными датами;
Если что-то из этого не сделать, пользователь просто не сможет сориентироваться в календаре.
Выбор даты на Aviasales.ru
UI kit
Это готовый набор графических элементов. Если они понадобятся верстальщику снова, их не придётся искать по всему проекту, а можно будет сразу обратиться к Ul kit. Так будет проще разобраться и другому верстальщику, если по прошествии времени клиент захочет собрать новые страницы на основе существующих. Сделать UI kit — хороший тон для дизайнера. В UI Kit могут входить кнопки, хлебные крошки, формы, ссылки, отступы, фон, декоративные псевдоэлементы (например, полосочки),
Набор кнопок с сайта UI Garage
Дизайн сайта подразумевает много мелких деталей, и все их трудно учесть. Даже если кажется, что макет готов, позже может оказаться, что какую-нибудь мелочь всё же упустили: забыли отрисовать кнопку, добавили картинку не в том формате и т.д. Поэтому на протяжении всей работы дизайнеру лучше держать перед глазами список, по которому можно проверить, всё ли сделано. Так дизайнер ничего не забудет и подготовит макет полностью сразу. А верстальщику не придётся добавлять недостающие элементы самому и ломать дизайн.
Чтобы лучше понимать верстальщиков и сразу делать всё, как нужно, пройдите курсы по вёрстке Можно начать с бесплатных тренажёров по основам HTML и CSS или с курса «HTML и CSS. Профессиональная вёрстка сайтов». А с промокодом SKUCHNO цена на любой профессиональный курс станет ещё приятнее.
Любой из вариантов поможет говорить на одном языке с разработчиками и не тратить время на переделку каждого блока в макете. А там и до фронтенда недалеко.