Улучшаем дизайн сайта без дизайнера

Привет. Меня зовут Анна Шмелёва, в Индиго Амиго я арт-директор направления веб-дизайн. Люблю классные сайты, а ещё — понимать, что и как в них устроено.

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

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

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

Главные причины, по которым этот сайт выглядит устаревшим и не вызывает доверия:

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

Беспорядок в цветах и стилях. Все кнопки выглядят по-разному, заголовки и надписи на баннере кричат и спорят.

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

Милипиздрические фотки. Иначе не скажешь :) Взгляду не за что зацепиться, а товар не оценить. Хотя фото и видео — лучший способ показать покупателю то, что вы делаете.

Исправим эти недостатки по очереди и посмотрим, что получится.

«Уши» прячем, а информацию из них пока что закидываем в центральную колонку.

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

Убираем лишние цвета, стили, рамочки, тени, жирности и так далее. Приводим кнопки к одинаковому виду.

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

Выделяем заголовки, увеличив их размер и добавив отступов перед блоками.

Увеличиваем основной текст. На большинстве современных мониторов удобнее читать буквы не мельче, чем 18−20 пунктов. Можно и крупнее, зависит от конкретного шрифта.

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

Увеличиваем фотки, которые уже есть на сайте. Не стесняемся показать свой товар :)

Где возможно — добавляем ещё. 

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

Давайте сравним до и после.

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

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

Просто навели порядок минимальными средствами, а разница налицо. Что-то из перечисленного — а возможно, всё — может помочь и вашему сайту.

Разумеется. Если подключить UX/UI-дизайнера, а лучше — обратиться в студию, провести полноценный анализ и переработать сайт с пониманием задач и целей конкретного бизнеса.

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