Портфолио

Главная/ Блог/ Рекламный сбор в Беларуси разъяснение 5

Какой должен быть дизайн сайта? На что обратить внимание в прототипе и в макете в цвете?

14:35 500

Как проходит разработка дизайна

Для того, чтобы в короткие сроки разработать дизайн сайта, который будет удовлетворять Ваши требования и затем будет успешно применен в качестве макета при верстке без претензий от программиста, разработка дизайна проходит в 2 этапа:

    • разработка прототипа (черно-белый макет, который показывает структуру страницы, наполнение блоков, шрифты и тд. Разрабатывается для того, чтобы можно было изменять какие-то принципиальные моменты в короткие сроки);
    • разработка дизайна в цвете (готовый к верстке макет в трех вариантах: для ПК, мобильных устройств и планшетов).

Ниже рассмотрим особенности на которые следует обратить внимание при приеме работ от дизайнера.

Особенности прототипа. На что обратить внимание

На основе полученной информации, дизайнер подготовит макет (или прототип) будущего сайта. Да, здесь не будет ярких форм и интересного оформления, скорее всего, Вам вообще мало понравится увиденное с эстетической точки зрения. На данном этапе важно оценить структуру и логику сайта, последовательность блоков и их наполнения. Не пренебрегайте согласованием прототипа! Да, хочется уже посмотреть как будет и оценить готовый вариант. Но как раз таки он напрямую зависит от продуманного и качественно выполненного макета.

Итак, на что обращаем внимание:

Текст

Легко ли он читается, не перегружена ли им страница, не делает ли обилие информации сайт похожим на газету.

сравнение хорошо и плохо оформленного текста на сайте

Содержание

Уточните, что будет, если Вы вдруг захотите добавить пару строк или убрать. Как это будет выглядеть? Все поедет? Не станет ли несоразмерным? Как правило, дизайнер должен это предусмотреть сам еще до Вашего вопроса.

сравнение хорошо и плохо сделаной верстки

Шрифт

Посмотрите на шрифты. Может дело не в тексте? Если вы насчитываете более 3х вариантов шрифтов в разных начертаниях (жирный, курсив), то это скорее всего в цвете, с добавлением картинок будет выглядеть еще более нелепо, чем на черно-белом прототипе.

сравнение хорошо и плохо оформленного шрифта на сайте

Меню

Все ли необходимые пункты меню на месте? Спросите возможно ли добавить еще пару пунктов и как это скажется на общем виде? Как открывается меню? Сколько строк максимально помещается в “выпадашке”? Уместно ли это выглядит?

сравнение хорошо и плохо составленное меню на сайте

Поиск

Обращайте внимание заметен ли он. Это полезный инструмент для Вашего клиента, позволяющий не шерстить меню, а сразу ввести ключевой запрос. И то, насколько интуитивно понятен и заметен поиск — оценивается его функциональность с точки зрения реализации дизайна. Другими словами, какой толк в “поиске”, если вы не можете его найти?

сравнение хороший и плохой поиск на сайте

Корзина

Как она меняется при наполнении товарами? Меняет цвет или иконку? Подумайте, как было бы удобно понимать примерный чек своего заказа и видеть выбранные покупки сразу. Высказывайте свои пожелания дизайнеру.

А что внутри? Оценивайте особенно тщательно какие поля для заполнения делать обязательными, а какие оставить на усмотрение клиента. Слишком сложные и многоступенчатые корзины отпугивают клиентов, заставляя отложить покупку на потом (когда будет время на вот это вот все) или вовсе купить там, где поменьше заморочек.

Не стесняйтесь всплывающих подсказок, то что может быть очевидно Вам, может быть сложно клиенту.

сравнение хорошей и плохой корзины на сайте

Форма регистрации

Сложно ли зарегистрироваться на Вашем сайте? Не усложняйте жизнь клиентам сразу. Они пока только знакомятся с Вашим сайтом. Сделайте авторизацию простой, понятной и максимально быстрой. Идеально, если для регистрации хватит номера телефона. Сместите все эти даты рождения, имя бабушки и другую информацию для маркетологов на второй план. Да, это нужно, но не первично. Важно, что клиент уже готов рассказать о себе, не спугните сложными формами!

сравнение хорошей и плохой формы регистрации на сайте

Контакты

Понятно ли клиенту, как с Вами связаться? Привычный способ взаимодействия Вас и Ваших клиентов должен быть максимально доступен. Ваши клиенты предпочитают звонить? Говорите об этом дизайнеру и не скрывайте номера телефонов. Ваши клиенты любят мессенджеры? Спрашивайте, почему они малозаметны и не на первом экране.

сравнение хороших и плохих контактов на сайте

Формы захвата

Хорошо, если вы ненавязчиво напомните клиенту, что Вы открыты к вопросам, даете бесплатно первую консультацию и вообще всячески приветствуется обращение к себе. Оцените все ли поля в формах действительно нужны? Вам правда требуется и почта и телефон сразу? Поставьте себя на место клиента и оставьте только самое важное. Посмотрите, что увидит клиент при отправке запроса. Просто “спасибо, мы с Вами свяжемся?” Вроде бы клиент услышан и мы достигли цели, получили лид, но клиент в то же время оказывается в ситуации, когда он вроде бы все сделал и Ваш сайт его больше не держит. Да, и пока вы звоните он отправится дальше, искать того, кто перезвонит сразу, пока “горячо”. Возможно, у вас пока нет ресурсов, чтобы перезванивать сразу. Но “Спасибо, наш менеджер свяжется с Вами в течении 10 минут” уже “заставит” клиента ждать Вас и не закрывать страницу сайта.

сравнение хорошей и плохой лид-формы на сайте

Внимание пользователя

Несмотря на то, что прототип выполнен в черно-белом цвете, дизайнер уже на этом шаге расставляет акценты. Максимально темные объекты — то, на что потенциальный клиент обращает внимание прежде всего. Чтобы в дальнейшем не было расхождений, отметьте что дизайнер учел все верно: самые заметные элементы те, что заставляют клиента обратиться к Вам (формы, кнопки), все что светлее — менее значимо и нацелено подчеркнуть ключевую информацию.
Если меню темнее кнопок на данном этапе — обсудите с дизайнером, почему так. Возможно его видение просто не совпало с Вашим.

сравнение хорошего и плохого прототипа сайта

Команда (О нас)

Если уж Вы решились разместить информацию о своем бизнесе или команде, постарайтесь сделать ее максимально живой и интересной. Если Вы рассказываете о сотрудниках — используйте качественные фотографии реальных людей, которые у Вас работают. Хорошо, если историю Вашей компании можно будет отобразить в инфографике, выделить ключевые этапы и достижения. В таком формате информация воспринимается легче и не даст заскучать читателю.

сравнение хорошей и плохой страницы о компании на сайте

Карточка товара

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

Другими словами, если Вы заходите в карточку товара и теряетесь в информации — блок нужно доработать. Не требуйте от дизайнера уместить “все и сразу” на первом же экране, подумайте и обсудите какие свойства действительно первостепенны для конкретно Вашего товара, а какие можно скрыть, в пользу увеличения конверсии.

сравнение хорошо и плохо оформленной карточки товаров на сайте интернет магазина

Часто Задаваемые вопросы (FAQ)

Размещайте в блоке все вопросы, которые слышат сотрудники Вашего колл-центра. Да, даже самые глупые. Безусловно, будущий сайт будет отвечать на многие из них, но продублировать их никогда не станет лишним, тем более что для этого есть специальный раздел.

Если вы чувствуете, что такие запросы приходят довольно часто — не задвигайте этот раздел куда подальше. Возможно Вы не видите его прямой эффективности, но для клиентов это возможность сориентироваться, основательно изучить вопрос и не чувствовать себя при этом глупо, мучая менеджера вопросами.

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

сравнение хорошо и плохо оформленного блока часто задаваемые вопросы на сайте

Галерея

Блок, реализацию которого даже не стоит обсуждать, если Вы не имеете контента для его наполнения. Эффективность блока галереи на 90% состоит из качественного контента (фотографий или картинок). Дизайнер, безусловно, покажет Вам как все будет выглядеть аккуратно и эффектно на примере шикарных фотографий из интернета, и вероятно, Вам понравится. Но при заполнении блока собственными фото ситуация может в корне поменяться.

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

сравнение хорошо и плохо оформленной галереи на сайте

Отзывы

Если вы беретесь за размещение этого блока у себя на сайте, старайтесь использовать фотографии, ссылки на соцсети или любые другие подтверждения того, что Вы размещаете отзывы реальных людей. Простые слова, без подтверждения не добавят очков в вашу пользу.

сравнение хорошо и плохо оформленных отзывов на сайте

Футер

Не стоит недооценивать этот, казалось бы, малозаметный блок. Футер, это второй шанс принять решение для вашего клиента. Он уже изучил меню, все что вы хотели рассказать о себе и товаре, проскроллил страницу вниз и глаз зацепился за другие Ваши услуги и предложения. Некоторые пользователи намеренно прокручивают страницу вниз, чтобы побыстрее найти контакты, ссылки на социальные сети и начать взаимодействие с Вами удобным для клиента образом. Также футер бывает и полезен для нецелевых клиентов, которые могут обратиться к Вам с запросом поиска работы, а не покупки товара. В любом случае, футер скорее поможет в организации логики сайта, чем нарушит ее.

сравнение хорошо и плохо оформленного футера на сайте

Адаптивность

Как выглядит мобильная и планшетная версии Вашего сайта? Оцените их по тем же критериям, что и основную версию сайта.
Общая структура и расположение блоков не должны сильно отличаться от десктопной версии, чтобы не вводить клиента в заблуждение. Согласитесь странно, если сайт выглядит по-разному в зависимости от устройства с которого вы на него заходите.

сравнение оптимизированной и не оптимизированной страницы для мобильных устройств

Оцениваем макет в цвете. Что важно

Вы согласовали прототип, все учли, и, наконец, прибываете в приятном ожидании готового дизайна будущего сайта. Конечно, реализация в цвете всегда очень индивидуальна и во многом будет зависеть от того, какие пожелания были озвучены “до”. Когда Вам презентуют готовый дизайн, постарайтесь выслушать дизайнера до конца, а затем честно расскажите о своем первом впечатлении. Его очень важно зафиксировать как и для Вас, так и для специалиста. В дальнейшем, вы изучите дизайн вдоль и поперек, захотите правок, и чем дольше будете корректировать, тем сложнее будет дать объективную оценку дизайну просто потому, что глаз замыливается и возникнет нехватка этого “первого свежего впечатления”.

Не самая лучшая стратегия, если Вам понравилось все сразу, молчать и искать недочеты. Ваше мнение решающее и оно должно быть услышано. Важно не только акцентировать внимание на том что “не нравится”, но и озвучивать то что выполнено хорошо. Так, дизайнер сможет понять в каком направлении двигаться дальше и лучше поймет Ваши требования.

Старайтесь не давать резких заключений, если Вам что то не нравится без конкретных примеров. Таким образом, с дизайнером конструктивного диалога не выйдет и эмоциональное напряжение не поможет понять что же действительно выполнено не так, как вы хотели.
Если Вы не ассоциируете себя с образом заказчика, над которым смеются в интернете, воздержитесь от высказываний: “Все плохо! Переделайте” и “Мне не нравится, я не знаю что! Вы же дизайнер, это Ваша работа!”.
Другими словами, говорите про каждую мелочь, которая вас зацепила и про то, что на ваш вкус выглядит неуместно и требует изменений. И главное, как Вы видите возможным это улучшить. Да, дизайнер мог бы нарисовать тысячу примеров и предоставить Вам выбор. Но сейчас Вы работаете над одним делом, выступаете как одна команда. И Вам и дизайнеру одинаково интересно сделать проект быстро и качественно с первого раза.

Самая главная мысль, которую нужно держать в голове при оценке готового дизайна: “Хороший дизайн виден сразу. Отличный дизайн незаметен”.
Конечно, это совсем не значит, что сайт должен быть блеклым, скучным или совсем простым. Сайт в конечном итоге может быть максимально ярким, эффектным, необычным. Главное, чтобы за всем этим дизайном,бьющим по глазам, можно было рассмотреть товар или услугу. Изображения и оформление не должны съедать все внимание клиента, должны способствовать и направлять клиента к достижению цели (оформления заказа или заявки), а не отвлекать.
Очень простой и хороший прием для оценки не “переборщил” ли дизайнер в своих стараниях: посмотрите на форму, которая вызывает сомнение и сравните с тем, как она выглядит в прототипе.
Если в прототипе она вам понятнее, удобнее и проще — дизайн надо менять.

Изображения в комплексе

Изображения — то, что привлекает основное внимание потенциального клиента. Сначала оцениваем их комплексно. Попросите дизайнера или сами выстроите все изображения сайта рядом друг с другом и посмотрите на них вне сайта. Если Вам хочется сыграть в “найди лишнего”, значит единый стиль оформления не выдержан.
Это уместно, если предполагается концепцией (о которой, кстати, дизайнер должен был сказать вначале). В противном случае, картинки стоит доработать.

сравнение хорошей и плохой гаммы изображений на сайте

Изображение по смыслу

Что это значит? Читаем текст, смотрим на картинку рядом. Они связаны? Картинка передает содержание текста или она просто красивая?
Изображение — такая же важная и информативная часть сайта, как и блок меню, футер или кнопки.
Помните, что ничего не должно быть на сайте “просто так”. Каждый элемент должен быть продуман и сделан с какой-либо целью. Иначе сайт рискует превратиться в свалку красивых, но бестолковых дизайнерских идей.

сравнение хорошо и плохо подобранных картинок для рекламы

Иконки

По хорошему, иконка способна полностью заменить текст, не должна нуждаться в пояснении, даже наоборот в общем то и создана для того, чтобы упростить восприятие текста.
Согласитесь, странно видеть крестик и рядом подпись “Закрыть”. Зачем, если это уже и так очевидно?
Или зачем иконка, смысл который становится понятен только после ее тщательного рассмотрения?

— Убираем текст там, где он дублирует смысл иконки
— Избегаем иконок с чрезмерным количеством элементов. Здесь работает правило: чем проще, тем лучше.

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

сравнение хорошо и плохо подобранных иконок для сайта

Ура первый этап — трудоемкий, но надеемся, приятный процесс из цикла работ по организации разработки сайта окончен! Можно выдохнуть, проверить свои текущие дела, сказать дизайнеру спасибо и готовиться к завершающему этапу создания сайта. Дальше — учимся принимать готовый проект и записываем, что нужно учесть в первую очередь.
Подробнее о приемке верстки читайте тут.

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

    Будем рады помочь
    close