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

Дизайн вещь субъективная, вкусы у всех разные, а стилей и трендов в мире много. В дизайне важно опираться не только на свое субъективное мнение, а и на то, какие задачи должен выполнять проект в целом и дизайн в частности. Для систематизации подходов к дизайну я выделила 5 основных шагов, которые следует пройти для создания «продающего» дизайна.

Шаг №1. Анализ конкурентов, изучение деятельности компании и ее целевая аудитория


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

  1. Географическое положение (Европа, США, постсоветские страны и т.д.). Этот пункт важен для структуры сайта, например во многих европейских странах и США телефоны в шапке сайта размещаются реже, чем в постсоветских странах. Это связанно с тем что, в США и Европе доверие к интернету намного выше. Другие все же предпочитают личный контакт, поэтому наличие телефона в быстром доступе актуально. Такого рода особенности продиктует географическое положение, их довольно много в дизайне.
  2. Ментальность (религия, семейные ценности, национально-культурные особенности и т.д.). Важно учитывать этот факт, чтобы не попасть в неловкую ситуацию. Ведь если в мусульманской стране рекламируя товар мы будем использовать фото эффектных девушек в откровенных нарядах, а в Индии, например, продавать говядину по выгодной цене, то можем попасть в немилость местным жителям.
  3. Сфера деятельности компании (экология, продукты, промышленность, бизнес, технологии и т.д.). Анализируя этот пункт, мы выясним, какие цвета, форму, шрифты лучше использовать. Каждый элемент должен соответствовать продукту и выгодно его подчеркивать.
  4. Целевая аудитория (ЦА). Это очень важный пункт. Изучив аудиторию, поняв её вкусы и предпочтения, узнав больше про её стиль жизни, нам станет понятно, какое впечатление нужно формировать у посетителя.
  5. Конкуренты. Нужно проанализировать сильные и слабые стороны конкурентов, выявить стратегические ошибки конкурентов. Это поможет эффективно подойти к разработке и дизайну сайта и впоследствии качественно отличит ваш проект от конкурентов.

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

Дизайн сайта, это не только красивая картинка, но и стратегическое решение, инструмент для достижения результата.

Шаг №2. Структура


На этом шаге становится понятно, какая структура нужна вашему проекту. Какую модульную сетку использовать, для эффективного решения поставленных задач. Где лучше расположить меню, сверху или слева. Спрятать его под иконку или сделать развернутым. Расположить одну большую фотографию в фоне или блочно расположить несколько. Разделить поле контента на две части, на три или на четыре….

Вот некоторые примеры структуры сайта:











Шаг №3. Соответствие дизайна запросу целевой аудитории сайта


Это очень важный шаг. Цвет, форма, текстуры, все должно подчеркивать тематику сайта.

Цель можно обозначить таким образом:

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

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

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

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

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







Для кафе и ресторана, очень важно передать атмосферу заведения. Тут на помощь придут текстуры, фотографии, тени.





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

Шаг №4. Основные приемы или тренды.


Приемы и тренды все время меняются и развиваются. Это связанно и с техническим, экономическим и историческим прогрессом. Все взаимосвязано. Ведь в 90-х годах мы и подумать не могли поставить видео в фон сайта, сейчас это стало возможным с развитием технологий.

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

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

4.1 Продукт на первой странице

С первой страницы сайта должно быть понятно, чем именно занимается компания. Каждый элемент должен подыгрывать общей идеи и подчеркивать её.



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









4.2 Атмосферная фотография или видео

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



clinkle.com



riad11.net



christchurch-harbour-hotel.co.uk



luneteyewear.com



dangblast.com

4.3 Фото конкретных лиц. «Личное знакомство»

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







4.4 Инфографика

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

Позволяет порой сложную для восприятия информацию подать максимально удобно и понятно.









4.5 Иллюстрация.

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

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











4.6 Типографика

Буквы и шрифты — это целый мир. Настолько богатый и разноликий. Удачная шрифтовая композиция может в раз решить эстетические и стратегические задачи сайта.











Шаг №5. Волшебная рука дизайнера

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

Анимация, видео, CSS-эффекты, JavaScript, параллакс и т.д. отлично вдохнут жизнь в ваш проект. Это очень эффективный инструмент разработки, который заслуживает отдельной статьи. В примерах он также активно используется.

Подведем итог:

При работе над дизайном «продающего» сайта важно всегда помнить о чем сайт, для кого, что компания хочет донести, для чего она это делает.

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

Автор:

Эмине Фитаева, Арт-директор, компания SECL Group
Поделиться с друзьями
-->

Комментарии (31)


  1. shurupkirov
    29.11.2016 13:53
    +4

    Не увидел в примерах дизайна сайта, который генерирует большие продажи.
    Чтобы были большие продажи через интернет надо, imho


    1. Деньги
    2. Много денег
    3. Очень много денег


    1. SECL
      29.11.2016 14:32

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


  1. Gorodnya
    29.11.2016 14:18

    Но всё это было в апрельской статье тут http://www.advertology.ru/article136460.htm


    1. SECL
      29.11.2016 14:31

      хм… Не видели, что нашу статью уже утащили. В индексе гугла нет, перед публикацией проверял. В любом случае, advertology.ru почти никто не читает уже, ресурс, к сожалению, умирает.


      1. Gorodnya
        29.11.2016 14:46

        Мне кажется, Вы лукавите.

        Эмине Фитаева, Art Director, Никита Семенов, CEO, ГК «SECL Group» Advertology.Ru 26.04.2016 — такая информация по указанной мной сссылке. Вряд ли кто-то «утащил» статью с копирайтом и сменил дату на полгода назад.

        К тому же, в тексте встречается «Как я говорила выше» — сдаётся мне, что именно тот текст был Вашим первоначально, а не этот.


        1. SECL
          29.11.2016 14:52

          А причем тут подпись) Мы действительно рассылали статью в несколько СМИ. Кто-то публикует, кто-то нет, это стандартный процесс… И автор статьи девочка, говорилА, именно так.


  1. LeGront
    29.11.2016 14:22

    Для продажи товаров на сайте, необходима хорошая цена и кнопка купить на видном месте. А в примерах представлены промо сайты, которые должны повышать спрос на данную продукцию, а не продавать.


    1. SECL
      29.11.2016 14:22

      А повышать спрос, это не тоже самое, что продавать?)


      1. shurupkirov
        29.11.2016 14:31

        Нет, конечно же. Повысить спрос, создать спрос!=повысить продажи, сгенерировать продажи.
        Вы может создать спрос, придумав какую-то уникальную штуку.
        Люди начнут обсуждать, делиться, искать вас, но


        1. вас не смогут найти, потому что ваши суперсовременные технологии и адаптивный дизайн сайта не смогли вас предоставить релевантно в результатах поиска
        2. а те, кто вас все-таки сможет найти, вдруг окажется в шоке от стоимости той штуки, которая уникальна, забавна, но не жизненно необходима. А все потому, что вы не просчитали экономику, но сделали вау-сайт


        1. SECL
          29.11.2016 14:35

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


          1. shurupkirov
            29.11.2016 14:46

            ну у вас желтый заголовок
            "Дизайн сайта, который генерирует большие продажи"
            Дизайн всегда вторичен, если есть хороший товар по хорошей цене
            Алиэкспресс — вот вам сайт, который на 100% генерирует большие продажи, но он такой страшный, что жуть


            1. SECL
              29.11.2016 14:55
              -1

              Тогда почему вы не откроете копию Алиэкспресс и не будете продавать те же товары с таким же успехом?


              1. shurupkirov
                29.11.2016 14:59

                Причина была указана в самом первом комментарии


                Чтобы были большие продажи через интернет надо, imho
                1. Деньги
                2. Много денег
                3. Очень много денег


                1. SECL
                  29.11.2016 15:01

                  Если будет клон Алиэкспресса и 100 млн. долларов вы сделаете успешного конкурента Алиэкспресс?


                  1. stokker
                    29.11.2016 15:28

                    Элементарно, Вы разве этого не знаете?


                  1. shurupkirov
                    30.11.2016 12:25

                    да даже несколько сделаю, это ведь торговая площадка с гарантиями, а не продавец


                    1. SECL
                      30.11.2016 15:48

                      Сделаете убыточный сайт, а бизнеса из этого не получится. Иначе все бы давно уже наделали клонов Алиэкспресса, который приносит миллиарды.


                      1. shurupkirov
                        30.11.2016 15:51

                        если вы так уверены, то вы можете проверить, дав мне 25 млн. $


  1. sashabeep
    29.11.2016 15:16
    +1

    Почти все сайты со скринов — с бессмысленным первым экраном, содержащим 0 информации. Это не продает вообще совсем никак


    1. SECL
      29.11.2016 15:59

      Все сайты тут для иллюстрации отдельных приемов. В целом ни один из них не является целиком продающим. Да и вообще, найти классный продающий сайт довольно сложно. Как-то читал английскую статью, в которой описывались сайты с самой высокой конверсией. Местами она доходила до 10-20%. Жаль не осталась она. Вот там сайты полностью продающие, вылизан каждый элемент.


  1. claygod
    29.11.2016 15:22

    Примеры сайтов, приведённые в статье не самые удачные. Часто глаза просто «разбегаются»… Возможно, я субъективен, но огромные картинки только мешают найти нужную ссылку. Если примеры рассматривать сугубо с точки зрения красоты, это одно дело, но с других сторон…


    1. SECL
      29.11.2016 15:43

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


  1. BernadetteWolowitz
    29.11.2016 15:50

    Когда же закончится этот тренд на сайты, где главное — это «вдохновляющая» картинка! А до полезной информации (если она вообще есть) нужно добираться через неприметную ссылку.
    Особенно сильно раздражает, когда я уже клиент, уже залогинена, а мне все равно при входе на сайт предлагают промотать несколько экранов «вдохновляющих картинок» и «наших преимуществ», чтобы добраться до выбора заказа.


    1. SECL
      29.11.2016 15:52

      Это называется некачественное проектирование и описанного вами быть не должно. Изначально сайт должен быть удобно спроектирован, это основа. А уже потом только работа над дизайном. Про то, как мы проектируем, мы писали пару недель назад: https://habrahabr.ru/company/SECL_GROUP/blog/314906/


      1. BernadetteWolowitz
        29.11.2016 16:10

        Глядя на большинство представленных выше сайтов, я не могу с первого взгляда определить чем они занимаются и что предлагают. Когда я через выдачу гугла захожу на сайт ресторана, все что я хочу видеть это меню с ценами, чтобы прикинуть подходит ли он мне по бюджету, режим работы и местоположение. И на мое решение посетить этот ресторан никак не повлияет наличие глянцевых фоток еды (скорее всего даже не этого ресторана) на первой странице.


        1. SECL
          29.11.2016 16:13

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


          1. BernadetteWolowitz
            29.11.2016 16:25
            +1

            На мое решение могут повлиять фото интерьеров ресторана из галереи на сайте. А на однотипные «креативные» фоновые картинки уже выработалось что-то типа банерной слепоты. И они не вызывают ничего кроме раздражения, что приходится через них продираться до нужной информации.


            1. SECL
              29.11.2016 17:23
              -1

              Психология утверждает обратное)


    1. Loki3000
      29.11.2016 16:07

      А еще круче — «вдохновляющее видео» фоном… Заползаешь с мобильного на тот же пейпал и тут же там всех удавить хочется!


      1. SECL
        29.11.2016 16:15

        Для этого нужно нормальный адаптив делать, чтобы такого не было)


        1. Loki3000
          29.11.2016 16:20

          Мобильным интернетом совсем необязательно с мобильника пользоваться. И вообще, если клиент зашел не с мобильного, значит можно отдать главную любого размера чтоль?