Дизайн без дизайнера: как не испортить сайт, если делаешь сам
Советы от практика, который видел всё: от «радужных кнопок» до нечитаемых шрифтов
Создать сайт без дизайнера — как собрать мебель без инструкции. Можно, но есть риск получить шаткую конструкцию вместо стильного интерьера. Если вы решились на DIY-дизайн, запомните: ваш главный враг — желание «сделать красиво». Ваша цель — сделать понятно, удобно и быстро. Вот как избежать типичных ошибок.
1. Правило трёх цветов: меньше — лучше
Ошибка новичка: Использовать все цвета радуги, потому что «так веселее».
Что будет: Сайт превратится в цирковой плакат, а пользователи сбегут через 5 секунд.
Решение:
- Выберите базовую палитру из 3 цветов:
- Основной (например, синий для доверия).
- Акцентный (оранжевый для кнопок CTA).
- Нейтральный (серый или белый для фона).
- Используйте инструменты для подбора гармоничных сочетаний:
- Coolors.co — генератор палитр за 1 клик.
- Adobe Color — ищите трендовые схемы.
Пример: Сайт финансового сервиса в сине-белых тонах с оранжевыми кнопками «Подключиться» выглядит профессионально и призывает к действию.
2. Шрифты: читаемость важнее креатива
Ошибка новичка: Скачать 10 «крутых» шрифтов, чтобы «выделиться».
Что будет: Текст станет нечитаемым, а пользователи устанут щуриться.
Решение:
- Используйте не более 2 шрифтов:
- Без засечек (Roboto, Arial) — для основного текста.
- Акцидентный (Playfair Display) — для заголовков.
- Проверяйте контрастность через WebAIM Contrast Checker.
Лайфхак: Если сомневаетесь — выбирайте системные шрифты (Arial, Georgia). Они грузятся быстрее и работают на всех устройствах.
3. Навигация: путь к покупке за 3 клика
Ошибка новичка: Сделать меню с 10 пунктами и скрыть контакты в подвале.
Что будет: Посетители заблудятся и уйдут к конкурентам.
Решение:
- Структура меню:
- Главная → Услуги → Цены → Контакты.
- Максимум 5 пунктов.
- Кнопки CTA должны быть:
- Один цвет (акцентный).
- Одна форма (скруглённые углы).
- Один стиль («Заказать», «Скачать», «Подписаться»).
Проверка: Покажите сайт другу и попросите найти ваш телефон. Если он потратит больше 10 секунд — переделывайте.
4. Контент: картинки решают всё
Ошибка новичка: Поставить размытое фото с телефона и стену текста.
Что будет: Посетители заскучают и закроют вкладку.
Решение:
- Фото:
- Используйте стоки с бесплатными изображениями (Unsplash, Pexels).
- Редактируйте в Canva (обрезайте, добавляйте фильтры).
- Текст:
- Делите на абзацы по 3–4 строки.
- Добавляйте подзаголовки и списки.
Пример: Вместо «Наши услуги: разработка сайтов, SEO, контекстная реклама» напишите:
- Создаём сайты — от лендингов до интернет-магазинов.
- Продвигаем в Google — топ-3 позиции за 3 месяца.
- Настраиваем рекламу — платите только за клики.
5. Адаптивность: как не потерять 60% трафика
Ошибка новичка: Сделать сайт «под десктоп», забыв про смартфоны.
Что будет: На мобильных кнопки будут наезжать друг на друга, а текст станет микроскопическим.
Решение:
- Выбирайте конструкторы с адаптивными шаблонами (Tilda, Wix).
- Проверяйте вёрстку через Google Mobile-Friendly Test.
- Упрощайте:
- Скрывайте второстепенные блоки на мобильных.
- Увеличивайте кнопки до 48×48 пикселей.
6. Тестирование: как найти слабые места без бюджета
Ошибка новичка: Запустить сайт и ждать, «как пойдёт».
Что будет: Ошибки накопятся, а клиенты не вернутся.
Решение:
- Проверьте всё:
- Ссылки — не ведут ли в 404?
- Формы — приходит ли заявка на почту?
- Скорость загрузки — не дольше 3 сек (тест через GTmetrix).
- Попросите 5 знакомых пройти по сайту и устно описать впечатления.
7. Ответ на возражение: «Но я хочу уникальный дизайн!»
Уникальность ≠ сложность. Даже минималистичный сайт может выделяться:
- Пример: Сервис доставки еды использует только белый фон, крупные фото блюд и кнопку «Заказать за 5 минут». Это работает лучше, чем анимация и градиенты.
Правило: Лучше шаблонный, но рабочий дизайн, чем «уникальный», но бесполезный.
Заключение: Дизайн для людей, а не для портфолио
- Не усложняйте — пользователи ценят ясность.
- Копируйте лучших — посмотрите, как сделаны сайты конкурентов из топ-5 Google.
- Тестируйте — даже маленькие правки (цвет кнопки, размер шрифта) могут поднять конверсию на 20%.
Запомните: Хороший дизайн не виден. Он просто работает.