Разработка дизайна сайта в Санкт-Петербурге и Москве

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

Для каких устройств нужен сайт?

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

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

  1. Дизайн сайта для смартфона в портретной (вертикальной) ориентации
  2. Дизайн сайта для смартфона в ландшафтной (горизонтальной) ориентации
  3. Дизайн сайта для планшета в портретной (вертикальной) ориентации
  4. Дизайн сайта для планшета в ландшафтной (горизонтальной) ориентации
  5. Дизайн сайта для компьютера

Поскольку современные компьютеры значительно отличаются между собой (размером матрицы, плотностью пикселей, диагональю экрана), в некоторых случаях разрабатывается шестая версия дизайна сайта для компьютера – в другой модульной сетке. Не вникая в технические тонкости, скажем упрощенно, что иногда желательно сделать вариант дизайна сайта для компьютеров с большими экранами :) Т.е. пятая версия дизайна предназначается для компьютеров со сравнительно небольшими экранами (например, шириной до 1600 пикселей), а шестая версия – для мониторов Full HD, ретина, 4К и т.д.

Есть ли у вас логотип?

Зачастую у заказчика еще нет логотипа, а он уже спешит заказывать разработку дизайна сайта. Это в корне неправильно: логотип должен быть разработан первым (а не после дизайна сайта или параллельно с ним). И вот почему.

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

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

Что еще стоит сказать о логотипах применительно к дизайну сайтов? Если у вас еще нет логотипа, и вы планируете разрабатывать сайт, обязательно сообщите дизайнеру, что логотип должен будет использоваться на сайте! Наш опыт работы говорит о том, что порой дизайнеры могут нагородить такого (в том числе, применительно к логотипам), что нормально потом разместить на сайте просто невозможно!

Каким должен быть дизайн логотипа для сайта?

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

Второй момент (касательно нежелательности мелких деталей в дизайне логотипа для сайта) обусловлен тем, что на экране компьютеров плотность пикселей составляет от 72 до 110 точек на дюйм (можем округлить в среднем до 100 точек на дюйм). В полиграфии же используется стандартно 300 точек на дюйм, т.е. в полиграфии плотность в три раза выше. Это значит, что при физически равных размерах (например, на фрагменте 2 х 5 см) один и тот же логотип может занимать на бумаге всю площадь, а на экране монитора ему потребуется в 3 раза больше места!

Почему это важно? Потому что иногда дизайнеры «забывают» о том, что логотип может использоваться в дизайне сайта, и делают его de facto пригодным только для использования в полиграфии.

Фирменный стиль

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

Во-первых, так сложилось, что не все шрифты, которые подходят для печати можно использовать в разработке – а, следовательно, и дизайне – сайтов. Ряд шрифтов, например, весьма симпатичный Myriad Pro, великолепно смотрятся на бумаге, но совершенно отвратно выглядят на сайтах (дело тут, скорее всего, в уже упомянутой выше разнице в плотности пикселей). Что делать в таком случае? Выяснить, какой шрифт товарищ дизайнер порекомендует использовать в качестве альтернативы (об альтернативных шрифтах еще несколько слов будет сказано в конце данного раздела).

Во-вторых, указанный в фирменном стиле шрифт может не иметь кириллического комплекта. То есть с написанием латиницей (скажем, в английском языке) проблем со шрифтом нет, а в русском – есть. Например, корпоративный шрифт уважаемой нами компании Uber – Clan Pro. Красивый шрифт – спору нет. Но вот кириллического комплекта (как минимум, на момент написания этого текста) у этого шрифта нет. Поэтому на корпоративном сайте Uber используются разные шрифты для его русской и английской версии.

В завершении разговора о фирменных шрифтах, стоит отметить, что в профессионально разработанных фирменных стилях обычно указывается несколько вариантов используемых шрифтов для разных случаев жизни. Например, в фирменном стиле Uber черным по белому сказано, что основной фирменный шрифт – Clan Pro; в случае невозможности его использования, альтернативный шрифт – Helvetica; так как Clan Pro – шрифт уникальный, а «гельветика» есть далеко не на всех компьютерах, вместо «гельветики» допускается использование типового шрифта Arial – который установлен на любом, даже самом древнем, компьютере. Таким образом, использование фирменного стиля предусмотрено для любых бизнес ситуаций. Что очень грамотно.

О структуре сайта

Вообще, вопрос структуры сайта обзорно рассмотрен в статье Нужен сайт. С чего начать? Если интересно, можете ее прочитать – может оказаться полезным…

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

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

На практике обычно происходит так. Заказчик примерно представляет, какие разделы должны быть на его сайте (скажем, он понимает, что нужен каталог товаров), но редко задумывается о нюансах. Например, о стандартизации разделов, уровнях вложенности и пр. Плохо ли это? Нет, не плохо. Это просто нормально. Не должен заказчик разбираться в нюансах разработки сайта – это удел разработчика. И задача нормального разработчика – помочь заказчику понять, какой именно сайт он хочет получить на выходе, в том числе, в том, что касается его структуры.

На самом деле, при должном опыте, разработка структуры сайта – это вопрос 20-30 минут общения с заказчиком.

Про бриф на разработку дизайна сайта

Особо «продвинутые» компании любят работать с брифами на разработку дизайна всего чего, в том числе, сайтов. Что такое бриф? Это некое формализованное ЦУ в виде небольшого вопросника, который предлагается заполнить заказчику. Скажем, мы в своей работе всегда используем бриф на разработку логотипа. Однако брифа на разработку дизайна сайта у нас нет, не было, и вряд ли когда-нибудь будет. Почему?

Потому что, по нашему мнению, если уж и пользоваться такими брифами, то их должно быть несколько. Например: бриф на разработку дизайна интернет-магазина, бриф на разработку корпоративного сайта, бриф на разработку блога и т.д. Согласитесь, будет несколько странно спрашивать потенциального заказчика блога, нужно ли на его сайте использовать эквайринг (приём к оплате платёжных карт), планируется ли прием денег через системы PayPal, Яндекс.деньги, WebMoney и т.д.

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

Цели сайта и его целевая аудитория

В нашей практике был случай, когда потенциальный заказчик, отвечая на различные вопросы о будущем сайте, написал нам примерно следующее: тексты и картинки для сайта есть, целевая аудитория сайта понятна, зачем сайт нужен – не знаю…

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

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

Вместо заключения

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