Как стать автором
Обновить

Комментарии 61

Отличный материал!
Как раз задумываюсь над перерисовкой корпоративного сайта и появилась хорошая инструкция, спасибо!
Как вы относитесь к мнению, что «слайдер тизеров в шапке не приносит большой пользы, при этом занимая здоровую площадь»?
Зачастую так и есть, но все зависит от конкретной фирмы и ее предложений.
Можно плз, расширенное дополнение? Для какой фирмы и каких предложений — КПД этого контрола наивысшее?
Слайдер подойдет для фирм, которые продают что-то очень красивое, что может заворожить, при посещении сайта, то есть продукция изначально должна быть эстетичной. Другой вариант, если у фирмы мало продукции и информации, сайт просто нечем заполнять, слайдер в этом случае хуже точно не сделает. Если мы не используем слайдер, значит должна быть какая-то более важная информация на его месте, а если такой нет, то и вреда от слайдера тоже нет. Не забывайте, что сам по себе качественный слайдер является важной частью дизайна. Как всегда, важен баланс, не переусердствовать. Например, интернет-магазин с обилием продукции, в большинстве случаев не нуждается в слайдерах, на пол монитора.
А почему Новости стоят выше Предложения?
Он скорее нужен для создания настроения симпатичными картинками, а также тематические фото позволяют пользователю ухватить суть деятельности компании всего за 3 секунды.
Осталось приложить .psd и отправить на Themeforest.
В дополнение к материалу хотелось бы добавить пару слов от себя, если позволите.
Дизайн должен решать задачу. Собственно, постановка задачи «создать дизайн страницы для компании» не совсем корректна. У страницы сама по себе должна быть цель и именно на её решение должен работать дизайн. Судя по макетам и примерно представляя, какие задачи у такой компании, могу предположить, что у главной страницы есть две основных цели:
1. Ознакомить посетителя с каталогом продукции -> вывести на звонок в офис/оставить заявку на callback.
2. Если у компании несколько продуктов, ориентированных на разные ЦА, то помочь клиенту самоидентифицироваться на сайте и отправить его на нужную целевую страницу, где повторяется цель №1 но уже в контексте нужного типа продукта.

На основании этих данных прикидываем список целевых действий:
Цель №1
1. Скачать каталог продукции
2. Найти на странице телефон и позвонить / заказать обратный звонок

Цель №2
1. Ознакомиться с каталогом продукции / блоком самоидентификации
2. Перейти на нужную целевую страницу
3. Совершить действия для достижения цели №1.

В данной реализации дизайн эти задачи решает лишь частично. Хорошо видна кнопка «скачать каталог», но сразу же мы зачем-то даем человеку выбор — doc или pdf. ЦА фирмы такая, что представитель либо выберет первый попавшийся вариант, либо будет долго выбирать и в итоге не нажмет вообще. Минус к конверсии.
Второй критичный момент — полное отсутствие телефона в шапке. За ним надо идти в подвал, где нам предлагают написать письмо прямо с сайта. Причем форма спроектирована так, что запрашивается email, а имя — нет. Еще один минус к конверсии.

Вторая цель не достигается вообще — на странице нет места, где пользователь поймет, чем занимается эта фирма, её ключевые преимущества и отличия. Вопросы пользователя «что мне делать дальше?» и «почему я должен на этом сайте остаться» не раскрываются совершенно. Четыре столбца под главным баннером не тянут на пояснение, скорее на разворачивание свойств какого-то продукта. При этом продукт не описан. А огромный блок с доставкой, к сожалению, съел всю информационную часть сайта и еще больше снизил эффективность взаимодействия.

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

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

Ну и вообще, если честно, непонятно, какую цель ставил перед собой автор статьи. Если это пособие по дизайну, то наличие ошибок юзабилити снижает полезность знаний, если же это пособие по техническим аспектам реализации — то их в статье вообще нет.
Соглашусь с комментатором почти по всем аспектам. Грамотно и по сути. От себя добавлю, что не понравилась реализация темной шапки — выглядит уж больно шаблонно (походит на покупной шаблон), не несет идентики и смотрится тяжеловесно. Одно соображение по поводу новостной ленты. Все-таки, сейчас, с отказом Яндекса от учета коммерческих ссылок, усилится роль публикуемых на сайте тематических материалов. Под эти нужды весьма кстати окажется раздел Новостей, притом именно на главной странице.
Ну это если учитывать SEO. Целевой трафик на этот сайт можно получать и без нахождения в органической выдаче. Директа, баннеров на околостроительных порталах и работы по теплой базе вполне может хватить.
Rdnk, вопрос только в том, а чего бы его и не учитывать? Минусом, в любом случае, не будет.) Вы согласны?
Минусом, возможно, и не будет :) Вопрос в том, будут ли стоить усилия по выталкиванию сайта наверх того трафика, который придет из органики. В этом я не уверен. Хотя, конечно, как знать.
Согласен. Вы посмотрели со стороны посетителя, а я вообще не увидел в этом макете контакта с заказчиком. Вариант, когда дизайнер «лучше знает что нужно» неприемлем. В конце концов, заказчик лучше знает свой бизнес и именно он дает деньги. Следует четко разграничить возможности дизайнера и мнение заказчика.
Вот, к примеру, новости. Их на корпоративном сайте может быть как 2 в год, так и 5 в день. Так же всегда мучительно подбирать картинку, да еще не ломающую стиль.
На самом деле, я посмотрел на проект глазами UI-разработчика и маркетолога. Заказчик далеко не всегда знает, что нужно, тут вы не совсем верно сказали. Заказчик должен поставить цели, а разработчики найти решение и достигнуть результата. А результат в данном случае может быть только один — количество входящих лидов с сайта в месяц. Поэтому вообще не важно, нравится ли дизайн лично заказчику. Приносит заявки — значит, хороший дизайн, хорошо поработали. Не приносит — значит плохой. Иные точки зрения, по-моему, от лукавого.
Корпоративный сайт не всегда «про продажу». Корпоративный сайт должен рассказывать о компании, отвечать на конкретные вопросы. И конечно должен быть лицом заказчика.
Любая коммерческая компания имеет своей глобальной целью повышение прибыли. Сайт компании должен либо способствовать повышению прибыли, либо не мешать её получению. Поэтому в каждом сайте можно внедрить факторы, способствующие повышению прибыли.
Какие факторы могут повысить прибыль на корпоративном сайте? Ну кроме общих слов.
Классификация «корпоративный сайт» не является исчерпывающей… У корпоративного сайта могут быть разные задачи. И, соответственно, разные факторы. Для примера можно рассмотреть два сайта: крупного завода и компании, оказывающей профессиональные услуги. В случае с заводом, целевые посетители такого сайта это, например, крупные партнеры, соискатели, дилеры. Для крупных партнеров ЦД — скачать презентации, прочитать историю, достижения, ознакомиться с информацией, в общем. Для соискателей ЦД — прочитать информацию и поучаствовать в проводимых заводом конкурсах (Завод заинтересован в улучшении качества кадров, поэтому важно выбрать только самых лучших), ознакомиться с вакансиями, возможность отправить своё резюме. Для дилеров — скачать дилерский пакет, оставить заявку на дилерство.

Для компании, оказывающей профессиональные услуги, основная ЦА — это конечные клиенты. Поэтому, если компания работает в B2C, целевым действием будет оставить заявку, телефон и пр. А для B2B — всё то же самое, только еще можно скачать презентацию, подписаться на рассылку, получить какой-то бесплатный полезный материал.
Присоединюсь к вам, от себя лишь добавлю комментарий по любимцу маркетологов и начинающих веб-дизайнеров — слайдеру.

Я, как человек, который привык работать с абстракциями, негодую всякий раз, когда вижу «необходимо добавить слайдер с услугами». Слайдер всего один из вариантов визуализации блока «услуги», наиболее популярный. Как ни крути, но всё состоит из списков, тот же слайдер — это список состоящий из картинки, заголовка, текстового описания, ссылки, который автоматически/вручную меняет своё состояние. Так вот, слайдеры, зачастую, используют там, где они не нужны, только по той причине, что это модная фишка, по-крайней мере так о ней отзываются дизайнеры и маркетологи.
Задача слайдера, на мой взгляд, одна: захватить внимание и тезисно рассказать о предложении в двух словах. Лучше всего еще и тизерами, чтобы было желание прочитать что дальше. Ведь мышление пользователя клиповое — он воспринимает слайд в целом, а не текст и картинку отдельно. Соответственно, клип должен нести нагрузку — вызывать желание остаться на сайте и прочитать.
Есть тысяча и одна альтернатива, посмотрите работы студии самизнаетекого, я насчитал 6 разных подходов, которые даже выдумывать не нужно, а если подумать — найдутся и ещё. А самое главное — что они работают не лучше и не хуже слайдеров, странно, не правда-ли?
Дак ведь я не говорю, что альтернатив нет. Альтернатив полно. Просто слайдеры с тизерами работают, вот и всё.
Есть альтернативы, которые занимают меньше места. Есть альтернативы, которые могут наиболее полно заинтересовать юзера и отправить в нужный раздел. Слайдеры работают только по той причине, что заказчик хочет видеть на этом месте слайдер, потому что его кругозор ограничен и он не в курсе как ещё можно реализовать этот блок, а при клиентском бизнесе проще сделать то, что хочет заказчик.
Давайте будем конкретными? Приведите примеры, пожалуйста.
Вы все верно говорите, только пост больше затрагивает именно дизайн, и направление его развития в данном макете. Разобраны ключевые изменения для гипотетической фирмы и гипотетической целевой аудитории. Уверяю вас, заказчик сам не оставит в покое дизайнера, пока тот ему заголовком H1 не сделает телефоны жирным красным шрифтом на ширину всей шапки. Главный слайдер частично знакомит клиента с каталогом, а выносить каталог полностью на главную страницу… вы как думаете это будет выглядеть?

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

Основная проблема в данном макете в том, что невозможно понять B2B это или BTL или BTC, в зависимости от направления содержание меняется весьма значительно.
Эмм, Ebay — корпоративный сайт?
Давайте не будем делить сайты на корпоративные, личные и пр. У сайта есть задачи и он должен их выполнять. Задача eBay — торговать и продавать. Задача сайта компании — приносить стабильный поток лидов.
Вот по этим задачам они и делятся на корпоративные, личные и пр.
Сайты делятся на интернет-магазины, лидгены, контентные сайты и сервисы. Копоративные сайты — это понятие, никак не отражающее цели. Например, компании, торгующей джинсами в розницу, нужен интернет-магазин. А компании, оказывающей услуги финансового консалтинга, нужен лидген. И то и то — корпоративные сайты. Но построение принципиально разное.
Простите, стабильный поток чего? Вот есть корпоративный сайт www.ebayinc.com/ задача его вполне конкретная — информация о компании.

Хорошо, давайте возьмём рыбинсккабель, продукт сектора b2b с каталогом на главной. Можно найти ещё много вариантов с полноценным каталогом, но все они будут англоязычные, потому что… Имеет смысл почитать статью Якоба Нильсена о юзабилити корпоративных сайтов.
А подскажите где почитать эту статью и именно про юзабилити корпоративных сайтов
Верно. Именно это я и имел в виду, когда говорил об отсутствии само- и идентификации фирмы.
Я глубоко убежден, что проектировать сайт нужно с прототипа, на основании которого пишется продающий текст, а уже потом на всё это накладывается дизайн. Поэтому, то, что мы увидели в статье, я повторюсь, — дизайн ради дизайна. И может быть с точки зрения дизайна, макет закончен. Но тогда единственное ему применение — в магазин шаблонов.
НЛО прилетело и опубликовало эту надпись здесь
Разделяю. Плюс учитывать брендирование компаний, главный позыв компании. А вот эти фразы: Добавим-ка мы второй цвет в логотип… Это ж не ужин, в который можно сегодня добавить больше острых специй, а завтра оставить пресноватым. Поэтому и не тянет наш дизайн на продуманный и функциональный, все от балды делается как-то, без логики, одними наводками.
Ну так учитывайте.
В негодовании малом: Теперь каждый кейс по любому клиенту с веб-студии можно выкидывать в Хабр что ли?!
Зачем это тут?
Читайте статью внимательнее.
А что тут собственно читать, как вы думаете, что ваше создание дизайна страницы достойно рассмотрения или может оно лучше, чем другие аналогичные? Может новаторство какое или оптимизация процесса какая? Или дизайн настолько крутецкий, что «Вайвайвай, глаз не оторвать»?
Аааа, наверно стоит поискать идею, которую несет уже визуальный портрет главной страницы… Хотя нет ее.
Тогда не пишите ерунду.
Вы максимально аргументированы.
в слове «ангажированы» допустить столько ошибок, ай-ай-ай :)
Пожалуйста опишите еще несколько дизайнов подобным образом, затрагивая решение разных проблем, возникающих у дизайнеров. Ваши статьи нужны как воздух и одной очень мало.
И ещё одно замечание к новостям. Если в пресс-релизе есть надпись «подробнее» — это значит, что копирайтеры не способны самостоятельно выделять ключевой смысл. Это смотрится дёшево и непрофессионально, а у нас тут корпоративный сайт.
Это такой артефакт из ранней эпохи Интернета. Пока все-все не выкинут, его «трупик» так или иначе будут таскать по разным сайтам. )
Если взглянуть со стороны верстальщика, то непонятно какие границы должны быть у блоков «Слайд» и «Краткое пояснение к слайду».

Как должны вести себя эти блоки при наличии более длинного текста? Есть какая-то максимальная ширина блока (например 30% ширины слайдера) и далее текст переносится на следующую строку или блок растягивается на весь слайдер?

Чтобы не увидеть потом слайдер накрытый слоем текста, стоит такие моменты предусматривать и показывать в макетах, как выглядят блоки с текстом в несколько строк.
Я недавно слышал такую фразу: «Дизайнер должен прокачивать свою интуицию». Т.к. не всегда обладает достаточной информацией о пользователях, их потребностях, задачах и т.п. И эта фраза очень нравится многим дизайнерам, потому что позволяет не отрывать задницу от удобного кресла, не вникать в истинные задачи клиента и не проводить исследований. А вместо этого тренироваться рисовать красивые тенюшки, вкусные кнопочки и хорошо подбирать шрифты. В итоге мы видим кучу красивых картинок на Бихэнсе и Дриббле, но такую же кучу проектов с низкой отдачей.

Имхо, статья очень полезна, но она не столько о проектировании, сколько об оформлении. Оформление — тоже отдельное мастерство, но прежде, чем разукрашивать картинки, нужно понять задачи, которые нужно решать на сайте и на конкретной странице. Со второй частью в статье все отлично, но она была бы еще полезнее, будь в ней первая часть.
Далее, придёт 3D-моделлер и покажет, как смоделить «грузовик карьерный грузоподъёмностью 200 тонн». И будет долго подбирать, какого цвета и размера сделать колёса. Только понятно, что колёса должны быть определённого размера (рассчитанного инженерами) и чёрного цвета (по экономическим соображениям).
Дизайн нормальный, сайт не в тему.
Пока не прочитал «качественный грунт» думал что продают машинки. Яркие фотографии делают весь дизайн в данном случае.
При разработке сайта в первую очередь нужно учитывать целевую аудиторию — кто и как будет обращаться с сайтом, а не «мнение заказчика». Естественно никто не будет слушать тебя если ты скажешь «Я дизайнер и мне нравиться что буквы как радуга», клиенту надо говорить «Я предлагаю этот вариант потому что он УЛУЧШИТ ВАШ БИЗНЕСС за счёт более точного обращения К ВАШЕЙ аудитории»

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

В начале 2000-х был похожий рейтинг, так же публиковавшийся в Financial Times. И сайт, разработкой которого я управлял, оказался в рейтинге. Всех деталей не помню, но тогда на позицию в рейтинге не в лучшую сторону повлияло отсутствие раздела «Вакансии». Как оказалось, для инвесторов это очень важно. Казалось мелочью, но так же обязательной была дата обновления материала.

Еще один мой проект есть и в текущем рейтинге. Он разрабатывался с опытом предыдущего и что интересно, бывшие заказчики фактически выступали исполнителями. К сожалению, возникли проблемы с дизайном — нам пытались навязать некачественную работу, но со вторым дизайнером, на мой взгляд, получилось отлично. И приятно, что за прошедшие 6 лет компания не стала кардинально менять сайт :)

Дизайн плохой. Не самый плохой на свете дизайн, но плохой.

Во-первых, каша с контентом.

Если сверху (в области шапки и промо) можно определить акценты.
То, чем мы ниже, тем дальше в лес. Доскрольте до инфографика + новости + промо 2 и там каша. Много шрифтов, много цветов, различные начертания, частая игра на контрасте. То ц нас шрифт белый на черном, то белый на красном.

Логики в цветах элементов нет: то красные кнопки, то красные активные пункты, то красные заголовки.
Выделения ссылок тоже нет, кажется что на все можно нажать. Куда ты при этом попадешь — вопрос.

Во-вторых, дизайнер не работал никогда с реальным поставщиком грунта или реальным клиентом, с реальным контентом.

У меня есть ежемесячный Шаттерсток, а у моих клиентов его нет. Откуда они найдут огромные промо-блоки, откуда они найдут новые фотографии для новостей, откуда они найдут такие иллюстрации к предложениям.

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

Можно и дальше это обсуждать, но не вижу смысла. Это плохой шаблон. В нем только футер ничего.
Акценты, кнопочки и прочее — это уже второстепенное. Тут проблема не в фоточках или выбранных цветах, тут проблема в том, что реашает сферическая задача в вакууме. Автор ни разу не ставит перед собой вопрос — «какие компоненты должны быть на сайте». Автор берёт слайдер, менюшку, футер, хедер, форму обратной связи, т.е. всё то, что обычно суют в абстрактные «платные шаблоны». Нужно ли это всё для сайта по продаже щебня? Что ещё нужно для сайта по продаже щебня? Таких вопросов автор себе не задал.
Лучше и не скажешь.
Пример моих друзей. Собирали для них сайт по продаже щебня http://purestone.ru/ Его наполнения вполне достаточно для хороших продаж.
Аргх, ребята вы серьезно? Желтые буквы на черном фоне, черные буквы на желтом, я думал что уже сетчатку выжег себе.
Прекрасный вариант того, как не надо делать.
Буду давать людям сюда ссылку, чтобы показать, что такое синтетический формалистский подход, генерирующий на выходе унылую вату.
Собрал на шаблонах в Тумблире http://exbaz.ru/
Народ пользует, многое не доделано, но основа есть. Моё мнение простота в исполнении, и наполнении победит вязкую многонаписанность и инфармационнозагруженность. Гораздо проще смотреть одностраничный сайт с ёмкой текстовкой, раскадровкой по делу, а не размазанную жижу на миллион страниц.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Публикации

Изменить настройки темы

Истории