Как часто в своей работе я вижу просто жутчайшие ошибки начинающих веб-дизайнеров и как безумно мне хочется их не видеть. Скорей всего хейтеры мне сейчас напишут "Не хочешь не смотри" или что-то вроде того, но лучше я покажу как правильно и надеюсь это принесет больше пользы и не только моему эго.
Итак, поехали!
Ошибка №1. Выравнивание элементов не по сетке.
12-ти колоночная сетка была придумана уже сто лет назад, а многие до сих пор не в курсе как ее использовать.
Как делать не надо:
Глядя на данный макет мне хочется плакать, а вам? Если учесть, что любой материал мы читаем слева на право-по диагонали - и снова слева на право, то есть как бы рисуем взглядом букву Z, то удобочитаемость данного макета почти на нуле.
Как сделать правильно:
Все элементы (заголовок, подзаголовок, кнопка) выравниваем либо по правому краю, либо по левому краю, в том случае, если фото у нас слева, а текст справа. Выравниваем от начала колонки элементы.
Ошибка № 2. Слишком маленькие отступы между текстовыми элементами и кнопками.
Как делать не надо:
Визуально текстовые блоки и кнопки сливаются и превращаются в один блок. лично мне сложно читать такой текст, а вглядываться лень и поверьте я не одна такая.
Как сделать правильно:
Я люблю минимализм, он делает любой дизайн простым, красивым и аккуратным. Добавьте воздуха между элементами.
Ошибка №3. Слишком маленький шрифт заголовка или подзаголовка.
Как делать не надо:
Есть ли на свете люди, которые любят квесты под названием "Приглядись и узнаешь о чем мы тебе толкуем?". Я точно не из таких и большая половина пользователей тоже не желает вглядываться, признаться честно они даже читать крупный текст ленятся.
Как сделать правильно:
Не экономьте место- это не решит проблему "впихнуть то, что не возможно впихнуть". Если очень надо лучше раскидать текст по странице и рядом фото.
Ошибка №4. Маленькие отступы между смысловыми блоками сайта.
Как делать не надо:
Эффект от прочтения примерно такой же как и в Ошибке № 2. Крайне тяжело читается текст и воспринимается контент по смысловой нагрузке. Я понимаю, что движет дизайнером, хочется побольше информации вместить ближе к главному блоку сайта, и сразу привлечь внимание, но такое расположение скорее отталкивает. Все таки сайт должен быть удобным и, кстати говоря, не для нас дизайнеров.
Как сделать правильно:
Увеличьте расстояние между смысловыми блоками и будет вам счастье и заказчику тоже.
Ошибка №5. Выравнивание элементов по центру.
Как делать не надо:
Как сделать правильно:
Если вы используете центрирование в одном элементе, то сохраняйте его во всех элементах. Так же и в левом выравнивании и в правом. Любое выравнивание на мой взгляд создает стиль всего макета.
Что делать если работа продвигается крайне тяжело?
Конечно не стоит впадать в прокрастинацию или затяжную депрессию. Но если это случилось, прочтите статью как прокрастинировать правильно. А если еще остался заряд энтузиазма, заходим на Пинтерест, Беханс и смотрим чужие работы, анализируем. Можно и не анализировать, просто смотрим и вдохновляемся. Скорее всего почерпнете много нового и интересного.
Что еще почитать о дизайне:
Почему заказать сайт у фрилансера выгодней, чем у веб-студии?
Рай для интроверта или как я пришла к выводу, что удаленка лучшее, что случалось со мной?
Как цветовой контраст помогает создавать качественный дизайн?
Бриф. Какие вопросы задать заказчику?
Почему так много дизайнеров на Тильда и за что ее люблю я?