Короткие UI-советы: как сделать дизайн сайта значительно лучше • Ostapich - разработка сайтов
Scroll to top
© 2019, Ostapich - веб-дизайнер Пользовательское соглашение

Короткие UI-советы: как сделать дизайн сайта значительно лучше

26 подсказок по оформлению веб-страницы для недизайнеров

  1. Для того, чтобы ваш проект был качественным, вовсе необязательно обучаться дизайнерской науке. Главное в этом деле – стратегия, которой вы будете придерживаться. Опытный дизайнер и автор проекта Refactoring UI делится с нами своим опытом превращения неудачного сайта в качественный авторский проект, работая лишь с его визуальным оформлением.
  2. Не стоит использовать серый цвет текста на цветном фоне. Лучше поработать с яркостью, используя другой оттенок, который будет перекликаться с фоном.
  3. Не самой лучшей идеей будет использование в дизайне большого количества линеек и обводок. Если это поле поиска, то замените обводку фоновым цветом – и глазу приятно, и дизайн уже смотрится выгоднее! Аналогичную работу проделайте и с верхней границей нижней части. А вот с помощью увеличения отступа между строками вы сможете избавиться от большого количества линеек. Ну и закрепляем результат легкой тенью по краям формы вместо четких границ. Ну как вам результат?
  4. Если сделать иконки светлее в неактивном состоянии, то на фоне текста они будут смотреться «легче».
  5. Используйте разнообразные стрелки, галочки, символы для маркированного списка – и он сразу же станет живее.
  6. Теперь о шапке. Добавив цветную полосу – и ваш сайт сразу же станет привлекательнее! Кстати, этот же прием можно использовать для форм и разнообразных модульных элементов.
  7. Если вам не хочется, чтобы посетитель вашей страницы через 30 секунд закрыл ее, разместите элементы в несколько слоев, сделав ее таким образом глубокой. Людям нравится «щупать» все глазами!
  8. Если у вас длинная форма на всю ширину экрана, то сделайте в ней две колонки. Так посетитель не запутается в огромном количестве полей.
  9. Играя с размером шрифта у вас не очень получится выделить или приглушить текст. Вместо этого поработайте с цветом и насыщенностью.
    Например, выделите имя полужирным начертанием. Не уменьшайте ник, локации, числа, а просто сделайте их светлее. Да и числа  можно сделать просто жирнее. Зато согласитесь, насколько приятнее картинка!
  10. Создавая лендинг, разместите иконки приложений поверх фигуры с цветным фоном. так визуальный эффект намного приятней.
  11. Поработайте с междустрочным интервалом. Например, интервал 1,5 подойдет для основного текста.  А для более плотного текста лучше уменьшить интервал.
  12. Правильно оформленная таблица – задача не из простых. Но есть некоторые хитрости. Для начала, пусть строка меняет цвет фона при наведении на нее. Да и расстояние между строками увеличьте.  Вертикальные границы тоже стоит убрать (вспомните наш второй совет). Цены лучше выровнять по правому краю, а текст в колонках – по левому. Не стоит делать шапку слишком броской (нас ведь интересует наполнение таблицы), а заодно и линии пусть будут светлее. И не делайте в таблице кнопок – лучше пусть они появляются в виде текстовых ссылок при наведении.
  13. Модульные элементы с легкими тенями будут смотреться более естественно, чем с контурами. 
  14. Любой текст должен быть написан так, чтобы его было приятно читать. Прежде всего, используйте качественные шрифты из проверенных сервисов (Typekit справится с этой задачей вполне). Для удобства чтения увеличьте междустрочный отступ, а не размер шрифта. И не забывайте, что лучше экспериментировать с цветом и насыщенностью в случае ключевых слов. Чтобы заголовок был виден, сделайте основной текст более светлым. Скучные списки оживу, если вы будете использовать иконки, стрелки и т.д.
  15. Экспериментируйте с выпадающим меню. С помощью дополнительного пространства вы сможете разместить дополнительный текст, а иконки облегчат поиск по меню.
  16. Любой цвет может быть теплым или холодным для ваших глаз. Если добавить в серый фон или текст немного оттенка коричневого или синего, вы сможете моментально изменить ощущения у читателя.
  17. При компоновке текста разного размера, наберите большой текст тонким начертанием, а маленький – полужирным. И вот текст уже кажется одинакового размера!
  18. Не бойтесь накладывать изображения друг на друга. Ведь «глубокие» страницы интереснее, их хочется прям пощупать. Только разделяйте картинки рамками в тон с фоном, чтобы они не слились.
  19. От оформления тарифных карточек будет зависеть желание у покупателя приобрести ваш товар. 
  20. Для привлечения внимания и создания ощущения глубины, частично накладывайте карточки.
  21. Оживите иллюстрации при детальном открытии тарифного плана – и они оживят желание купить товар.
  22. Выделите ключевые слова темным полужирным шрифтом – и они привлекут к себе внимание!
  23. Увеличивайте межбуквенный отступ в тексте, набранном прописными, чтобы легче читалось
  24. Для выделения возможностей используйте цветные иконки.
  25. Не оставляйте текст серым. Ведь добавив оттенок, например, коричневого, вы сразу оживите текст.
  26. Не загоняйте себя в рамки! Ваш интерфейс не должен отображать сухие заголовки и значения, которые стоят в столбик! Говорите покупателю о пользе, выделяйте самое важное и сочетайте заголовки и значения так, чтобы ваш покупатель смог их понять и прочесть!

Похожие записи