Проект Webdoors
Контакты
//Статья

Дизайн сайта - не просто картинка!

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

Для начала предлагаю рассмотреть общий подход к выбору дизайнерского решения для создаваемого сайта. Индивидуальный дизайн тут очень важен! Хороший web-дизайнер может предложить Вам яркий имиджевый стиль, минимализм, гранж, до сих пор модный WEB 2.0 и даже ретро стиль. Чем же руководствоваться при выборе? Я бы начинал с постановки бизнес-задачи для сайта. В данном случае необходимо ответить на вопрос: “Сайт продает, рекламирует или информирует?” Далее следует продумать концепцию, которая объединит все Ваши конкурентные преимущества и представит их в виде логичного последовательного образа, легенды, “фишки”… Например, служба доставки пиццы “Пицца24”, которая доставит Ваш заказ в любую точку города за 24 минуты 24 часа в сутки. Дизайн сайта для этой вымышленной компании следует выполнить в динамичной манере, возможно с использованием часов как основного декоративного элемента. Логотип можно выполнить в форме “часов из пиццы”. Фирменная пицца компании может быть выполнена в форме часов. Текстовый контент на сайте должен всячески подчеркивать высокую скорость доставки, например: “Мы выезжаем еще до того, как Вы подумали о пицце!” и т.д.

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

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

Отдельное внимание следует уделить названию, логотипу и всему что сейчас принято называть: фирменный стиль и бренд. Безусловно, создание и раскрутка бренда дело не простое и не дешевое. Зачастую это могут позволить себе только крупные компании и корпорации. Но давайте задумаемся, наверняка многие из Вас знают хорошего строителя “Васю” или авто-мастера “Ивана из 127 бокса”. Они присутствуют в телефонных книгах многих, кто к ним обращался. И это тоже бренд! Правда, скорее бренд личный. Эти специалисты создали его, качественно выполняя свою работу. И теперь их имена и телефоны передаются из рук в руки по средствам “сарафанного радио”. Как видите, реклама работает и тут. В нашем случае, учитывая наличие широкого круга клиентов и более мощных рекламных носителей, проще ассоциировать компанию с лаконичным именем, связанным с общей концепцией, например та же “Пица24”. Логотип в данном случае дает визуальную ассоциацию, что, безусловно, упрощает запоминание. Далее для повышения узнаваемости Вашего бренда следует максимально часто использовать логотип и название на всех рекламных носителях, в том числе и на страницах сайта. Он должен присутствовать в шапке сайта, внизу в “футере”, в различных элементах дизайна и по возможности на фотографиях товара. Успехом можно считать уже то, что клиенты начали называть Вас по имени бренда, а не по наименованию “ЧП”.

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

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

Отдельно следует поговорить о весе финального макета и особенностях верстки. В кругу верстальщиков сайтов бытует мнение, что “не все, что можно нарисовать, поддается верстке”. И действительно, полет фантазии дизайнера может стать кошмаром для верстальщика и неизбежно привести к проблемам при верстке. И здесь не может быть аргументом тот факт, что это решение Вы видели на сайте Apple или сервисах Google. Пример безусловного лидера, конечно, авторитетен, но если говорить по-правде, то задумайтесь: если бы Ваш разработчик, программист, дизайнер или верстальщик мог сделать как у Google или лучше, наверное, он уже бы там работал!? Поэтому, задумывая очередное оригинальное решение, стоит поинтересоваться у исполнителя, а реально ли это воплотить?

Следующий момент, о котором не стоит забывать, это вес готового макета, который даже с учетом большой компрессии, может привести к значительному снижению скорости загрузки страниц для ярких и насыщенных графикой сайтов. Не последнюю роль в этом играют различные анимационные эффекты и динамические элементы. Как правило, анимация включает в себя последовательность кадров, которая по совокупности веса может превышать вес всего макета в целом. Положительным же моментом является привнесение динамики. Современный web-дизайн и разработка сайтов развивается именно в этом направлении. В процесс активно включилось видео и 3D. Теперь товар можно показать со всех сторон, в действии и даже совершить 3D-тур по реальному магазину, поэтому не стоит отставать от тренда и лишать сайт динамики только по причине скорости загрузки. Нужно найти золотую середину. Главное вовремя остановится.

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

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

Закажите разработку сайта прямо сейчас

Контакты