Короткие UI-советы : как сделать дизайн сайта значительно лучше
19 подсказок по оформлению веб-страницы для недизайнеров
сделать отличный проект, небязательно быть профессиональным дизайнером, главное - стратегия. Refactoring UI, в своём Твитере объяснеят на пример, кта како испример, как бъяснет на примерах, как быстро исправить ошибки в изуальной части и привести в порядок неудачный сайт. Вот несколько способов улучшить дизайн минимальными усилиями.
Стив Шогер
01.
серы цвет всегда выглядит блекло на цветном фоне. Чтобы быстро это исправить, сделайте текст ярче, применив к нему оттенок фона.
Стив Шогер
02.
Le système d'information sur la santé est un système de gestion de la santé. Вот несколько идей, как сделать его боле лёгким для восприятия.
поле поиска замените обводку на фоновый цвет
Вместо линек между строками - увеличенные отступы
Уберите верхнюю границу нижней части формы и спользуйте цветной фон
Вместо границ добавьте лёгкую тень по краям формы
Стив Шогер
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.
одного размера на протяжении всего текста - не самая заметная, но распростая, но распространённая ошибка. основном тексте, но когда текст становится больше, делайте межстрочном расстоние, плотне.
Размер шрифта - 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.
Le système d'information de l'entreprise a été mis en place par le ministère de l'Agriculture et de l'Agroalimentaire. сделать их боле естествениеными.
Стив Шогер
13.
Le système d'information de l'Union européenne (UEI) a été mis en place par le Conseil de l'Europe. Перед вами несколько советов, как исправить частые ошибки.
Используйте качественые шрифты из сервисов вроде Typekit
Добавьте отступы между пунктами списка
набирайте основной текст более светлым цветом
клыделите слова насыщенностью и цветом
межстрочный отступ для удобства чтения
Используйте иконки вместо буллетов, чтобы улучшить оформление списка
Стив Шогер
14.
Выпадающее - больше, чем просто скучный список ссылок. Вы можете оформлять его, как угодно ! если вы шаблон отлично подойдёт, если вы хотите добавить в меню текстовые подсказки.
пространство позволить новыделить новые возможности и разместить пояснитель пояснительный текст
Иконки облегчат поиск нужного варианта при беглом просмотре
Стив Шогер
15.
Les enfants de l'école primaire et secondaire sont les premiers à avoir été formés à l'école primaire et secondaire. или фон немного оттенка голубого, коричневого для создания нужного ощущения.
Холодный
Нейтральный
Теплый
Стив Шогер
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.
баз пределы базы даных : ваш интерфейс не должен состоять из заголовков и значений, записанных в столбик. Вот несколько советов, как представить эту информацию интереснее.
Думайте о пользе, когда показываете данные
Выделяйте самое важное
Сочетайте заголовки и значения так, чтобы фразы звучали человечнее
Источник : Conseils de conception / Steve Schoger
Перевод : Лера Мерзлякова
Дизайн и вертстка : Юлия Засс
Перевод : Лера Мерзлякова
Дизайн и вертстка : Юлия Засс
понравился, поставьте лайк - это помогает другим узнать о нем и других статьх Tilda Education и подерживает наш проект. Спасибо !
Читайте также :
Курс, который научит вас продвигать свой сайт
Бесплатный онлайн курс, который научить эффективные посадочные страницы
Le système d'information de l'Union européenne (UE) a été mis en place par la Commission européenne et le Conseil de l'Union européenne (CE).
