Корпоративный сайт: или каким НЕ должен быть официальный корпоративный сайт компании

Совсем недавно на меня вышел серьезный заказчик с запросом о корпоративном сайте. Это был чудесный проект и «чудесность» его заключается в огромном количестве озарений, которые меня посетили.

Я разработчик и пишу эту статью для бизнеса, перед которым стоит задача создать корпоративный сайт.

Содержание статьи кратко и по делу

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

Клиент и его запрос

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

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

Далее мне предстояло увидеть все сайты конкурентов (далее буду прикреплять ссылки и скриншоты для наглядности).

Первая и сама сильная компания, которую мне презентовали:

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

Далее идет:

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

Так, мы пришли к тому, что нам необходимо сделать решение, которое будет золотой серединой между этими примерами.

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

Само собой не все сайты, которые мне отправил клиент были хороши…

Был и такой

Обратили внимание на кнопки "Contact" и "More"? Не следует допускать таких решений. Текст просто неразличим. 

Так же, я столкнулся с проблемой навигации на самом первом сайте (при всей его классной «собранности»)

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

Далее списком:

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

Что обязательно должно быть на вашем корпоративном сайте:

На что необходимо обратить внимание:

1. Навигация:

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

2. Адаптивная верстка

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

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

3. Понятная структура

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

4. Интерактивные объекты

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

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

5. Дизайн-решения

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

Все это сделает ваш корпоративный сайт сильным рабочим инструментом.

В качестве примера размещаю свою работу для компании Apogee FZC, которая стала импульсом к написанию этого текста.

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

По вопросам разработки:

0
11 комментариев
Написать комментарий...
ZIPA

Что такое "свежий, современный" стиль верстки? Кто придумывает моду?

Ответить
Развернуть ветку
Илья Столяров
Автор

На самом деле моду никто не придумывает. По сути все упирается в "красиво" или "не красиво". Понятие "свежий" и "современный" идут по большей части от личного ощущения каждого. Постараюсь проиллюстрировать на примерах из статьи:
возьмем сайт Synsol https://www.synsol.ch/about-us и сайт Covart Energy https://www.covart-energy.com

Вы можете заметить большой контраст в том как выглядит панель навигации одного и другого. Или же блок с контактами: у Synsol - это текст в рамке, в то время как у Covart - блок с разворачивающимися по нажатию свитками. Эти и многие другие детали как раз и создают ощущение "свежий" и "современный".

Надеюсь у меня получилось ответить на ваш вопрос.
Спасибо за комментарий!

Ответить
Развернуть ветку
Чайка О.

Я бы добавила: как связаны "стиль верстки" и дизайн?

Ответить
Развернуть ветку
Илья Столяров
Автор

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

Надеюсь я ответил на ваш вопрос.
Спасибо за комментарий!

Ответить
Развернуть ветку
Чайка О.

Нет, не ответили.
Стиль вёрстки никак не связан с тем, что нарисовал дизайнер.
Один и тот же макет можно можно сверстать несколькими способами (в разных стилях). При использовании CMS и конструкторов реализация ограничена ими.
И вёрсткой занимается не программист, а фронтендер (верстальщик).

Ответить
Развернуть ветку
Илья Столяров
Автор

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

Ответить
Развернуть ветку
Чайка О.
человек, который занимается фронтедном - это программист, поверьте на слово

Как человек, верставший сайты, не поверю. Точнее, он может им быть, а может и не быть. Сайт может быть вообще без бэка или полностью на JS. Это вопрос эффективности и задач. Речь не об этом, а о стиле вёрстки )
Вот для SEO способ ("стиль") вёрстки может иметь значение. Но просто глядя на сайт, вы не сможете определить способ реализации.

Ответить
Развернуть ветку
Андрей Аникин

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

Ответить
Развернуть ветку
Илья Столяров
Автор

Спасибо, добавлю иллюстрации к заключительной части статьи!

Ответить
Развернуть ветку
Илья Столяров
Автор

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

Ответить
Развернуть ветку
Илья Столяров
Автор

Открыт к любым вопросам, пишите))

Ответить
Развернуть ветку
8 комментариев
Раскрывать всегда