Короткие UI-советы: как сделать дизайн сайта значительно лучше
19 подсказок по оформлению веб-страницы для недизайнеров
Чтобы сделать отличный проект, необязательно быть профессиональным дизайнером, главное — стратегия. Стив Шогер, дизайнер и автор проекта Refactoring UI, в своём Твиттере объясняет на примерах, как быстро исправить ошибки в визуальной части и привести в порядок неудачный сайт. Вот несколько способов улучшить дизайн минимальными усилиями.
Стив Шогер
01.
Чистый серый цвет всегда выглядит блекло на цветном фоне. Чтобы быстро это исправить, сделайте текст ярче, применив к нему оттенок фона.
Стив Шогер
02.
Большое количество линеек и обводок перегружают дизайн. Вот несколько идей, как сделать его более лёгким для восприятия.
В поле поиска замените обводку на фоновый цвет
Вместо линеек между строками — увеличенные отступы
Уберите верхнюю границу нижней части формы и используйте цветной фон
Вместо границ добавьте лёгкую тень по краям формы
Стив Шогер
03.
Когда используете иконки с большим весом, чем текст, сделайте их немного светлее в неактивном состоянии.
Иконки и текст одинакового цвета
Иконки немного светлее текста
Стив Шогер
04.
Стрелки, галочки и другие универсальные иконки вместо буллетов — это отличный способ сделать маркированный список визуально интереснее.
До
После
Стив Шогер
05.
Добавьте цветную полосу в шапку — эта небольшая деталь оживит ваш дизайн. Такой трюк также сработает с формами и другими модульными элементами.
До
После
Стив Шогер
06.
Размещение элементов на странице в несколько слоёв — хороший способ создать глубину и побудить пользователей прокрутить страницу дальше.
Стив Шогер
07.
Такой двухколоночный макет подойдёт, когда нужно организовать длинную форму и заполнить всю ширину экрана без громоздких растянутых полей.
Стив Шогер
08.
Размер шрифта — не лучший способ выделить или приглушить текст. Вместо этого попробуйте использовать цвет и насыщенность шрифта.
Имя выделено полужирным начертанием, а не размером.
Размер шрифта — 20 px, насыщенность — Bold
Размер шрифта — 20 px, насыщенность — Bold
Ник, локация и заголовки чисел светлее, но не меньше.
Размер шрифта — 14 px, прозрачность—50 %
Размер шрифта — 14 px, прозрачность—50 %
Числа жирнее, но не больше
Размер шрифта — 20 px, насыщенность — Medium
Размер шрифта — 20 px, насыщенность — Medium
Стив Шогер
09.
Не растягивайте маленькие иконки приложений для лендинга. Попробуйте разместить их поверх фигуры с цветным фоном.
Стив Шогер
10.
Межстрочные отступы одного размера на протяжении всего текста — не самая заметная, но распространённая ошибка. Интервал 1.5 может хорошо работать в основном тексте, но когда текст становится больше, делайте межстрочное расстояние плотнее.
Размер шрифта — 36 px
Межстрочное расстояние — 1.5
Межстрочное расстояние — 1.5
Размер шрифта — 24 px
Межстрочное расстояние — 1.5
Межстрочное расстояние — 1.5
Размер шрифта — 16 px
Межстрочное расстояние — 1.5
Межстрочное расстояние — 1.5
Размер шрифта — 36 px
Межстрочное расстояние — 1.125
Межстрочное расстояние — 1.125
Размер шрифта — 24 px
Межстрочное расстояние — 1.25
Межстрочное расстояние — 1.25
Размер шрифта — 16 px
Межстрочное расстояние — 1.5
Межстрочное расстояние — 1.5
Стив Шогер
11.
Сделать хороший дизайн таблицы непросто. Вот несколько идей, которые облегчат вам задачу.
Сделайте шапку таблицы менее броской
Выровняйте текст в колонках по левому краю
Сделайте линии светлее
Уберите вертикальные границы
Выровняйте цены вправо
Показывайте варианты действий при наведении и замените кнопки на текстовые ссылки
Добавьте цветной фон, появляющийся при наведении на строку
Увеличьте отступы в строках
Стив Шогер
12.
Добавляйте к модальным элементам лёгкие тени. Смещение по вертикали поможет сделать их более естественными.
Стив Шогер
13.
Иногда возникают сложности при оформлении текста. Перед вами несколько советов, как исправить частые ошибки.
Используйте качественные шрифты из сервисов вроде Typekit
Добавьте отступы между пунктами списка
Чтобы выделить заголовок, набирайте основной текст более светлым цветом
Выделите ключевые слова насыщенностью и цветом
Увеличьте межстрочный отступ для удобства чтения
Используйте иконки вместо буллетов, чтобы улучшить оформление списка
Стив Шогер
14.
Выпадающее меню — больше, чем просто скучный список ссылок. Вы можете оформлять его, как угодно! Например, такой шаблон отлично подойдёт, если вы хотите добавить в меню текстовые подсказки.
Дополнительное пространство позволит выделить новые возможности и разместить пояснительный текст
Иконки облегчат поиск нужного варианта при беглом просмотре
Стив Шогер
15.
Серый — не значит скучный. Добавьте в серый текст или фон немного оттенка голубого, коричневого для создания нужного ощущения.
Холодный
Нейтральный
Теплый
Стив Шогер
16.
Если хотите, чтобы текст разного размера казался одинаковым по насыщенности, набирайте большой текст тонким начертанием, а текст поменьше — полужирным.
Размер шрифта — 30 px
Насыщенность шрифта — 400
Насыщенность шрифта — 400
Размер шрифта — 20 px
Насыщенность шрифта — 400
Насыщенность шрифта — 400
Размер шрифта — 60 px
Насыщенность шрифта — 400
Насыщенность шрифта — 400
Размер шрифта — 60 px
Насыщенность шрифта — 300
Насыщенность шрифта — 300
Размер шрифта — 20 px
Насыщенность шрифта — 500
Насыщенность шрифта — 500
Размер шрифта — 30 px
Насыщенность шрифта — 400
Насыщенность шрифта — 400
Стив Шогер
17.
Изображения с частичным наложением — хороший способ добавить интерфейсу глубины и сделать его более «дизайнерским». Сделайте вокруг картинок рамки того же цвета, что и фон, чтобы разграничить и упорядочить их.
Рамка 4 px
Стив Шогер
18.
Несколько идей по оформлению тарифных карточек, которые придают им особый блеск.
1. Частично накладывайте карточки, чтобы добавить глубины и направить внимание
2. Используйте оригинальные иллюстрации, которые становятся подробнее с расширением тарифного плана
4. Сделайте ключевые слова заметнее, выделив их тёмным полужирным текстом
5. Увеличивайте межбуквенный отступ в тексте, набранном прописными, чтобы легче читалось
3. Ставьте универсальные цветные иконки вместо буллетов чтобы выделить возможности
6. Добавьте в серый текст и фон немного голубого оттенка, чтобы он воспринимался холодным
Стив Шогер
19.
Не бойтесь выходить за пределы базы данных: ваш интерфейс не должен состоять из заголовков и значений, записанных в столбик. Вот несколько советов, как представить эту информацию интереснее.
Думайте о пользе, когда показываете данные
Выделяйте самое важное
Сочетайте заголовки и значения так, чтобы фразы звучали человечнее
Если материал вам понравился, поставьте лайк — это помогает другим узнать о нем и других статьях Tilda Education и поддерживает наш проект. Спасибо!
Читайте также:
Курс, который научит вас продвигать свой сайт
Бесплатный онлайн курс, который научит создавать эффективные посадочные страницы
Теоретический курс Никиты Обухова по веб-дизайну
