Те самые детали, в которых дьявол: 40 способов оживить ваши макеты
У вас бывало такое, что вы сделали дизайн сайта, приложения или презентации, а он выглядит простовато, как будто чего-то не хватает? Ниже несколько десятков способов добавить изюминку вашим макетам. Каждый пример снабжен ссылкой на сайт.
Приемы простецкие, скорее незаметные, но создают ощущение продуманности, позволяют усилить фирменный стиль или добавить глубины.
Это перевод поста Anthony Hobday, продуктового дизайнера из Лондона. Написан для блога Learn UI Design Blog (Erik D. Kennedy). Рекомендую подписаться на обоих. Поскольку использую многое из списка, у меня была идея когда-нибудь сделать подобный пост, но вот он есть и я его перевел. Матерому дизайнеру ряд приемов покажется очевидным, а вот новичку пригодится весь список. В оригинале было 37 способов, накинул еще три для ровного числа.
Фон
Разелители и рамки
Тени
Текст
Прочее
Бонус от меня
1. Заливка под углом
Вместо привычного горизонтального перехода расположите фон другого цвета под углом. Получается чуть динамичнее.
2. Заливка по кривой
Если вы используете кривые в оформлении, попробуйте положить их и на фон.
3. Акцент под углом
Добавьте цветной блок по форме объекта и чуть поверните его. Простой способ сделать обычный скриншот более характерным. Обратите внимание, что для заливки используется градиент.
4. Фигура, чтобы подсветить объект
Если скриншот сливается с фоном, а рамочкой обводить не хочется, попробуйте поместить что-нибудь на фоне.
Геометрическую фигуру (выше) или что-то более художественное (ниже). Главное, чтобы это не противоречило бренду.
5. Фигура, чтобы подсветить иконку
Цветные фигуры под иконками — отличный способ использовать палитру бренда, привлечь внимание и разнообразить типичную сетку из иконок и текста.
6. Малозаметный узор как фон
Положите на фон узор различимый настолько, чтобы не перебивать текст. Идеально, если узор будет рифмоваться с фирменным стилем.
7. Малозаметные линии как фон
В примере ниже используются линии по диагонали, но подойдет любая геометрия, главное чтобы фон не перебивал содержание.
8. Большой текст без заливки как фон
Иногда вместо иконок или абстрактной графики можно использовать тематические слова. Большого размера, но без заливки или залитые едва, чтобы они оставались фоном. Чем больше размер, тем меньше контраст.
9. Пунктирная рамка
Выглядит легче, чем сплошная. Напоминает линии, по которым нужно вырезать из бумаги. В примере ниже пунктирные линии намекают на простоту и легкость использования сервиса.
10. Пунктирный разделитель
В отличие от сплошного, этот делит информацию на секции, но оставляет ее внутри одного блока.
11. Двойная рамка
В дополнение к серой белая рамка хорошо отделяет форму от неконтрастного фона. Напоминает Windows 7 с его скевоморфизмом.
12. Градиентная рамка
Обводка градиентом, особенно если цвета яркие, явно показывает — внутри что-то важное.
13. Рамка с фаской
Такая рамка, напротив, не привлекает внимание и как бы бликует.
14. Рамка нарисованная от руки
Несмотря на банальность, этот прием всегда придает дизайну характерность, ведь подавляющее большинство иллюстраций и иконок нарисованы с математической точностью.
15. Узорная рамка
Привлекает внимание к содержанию, делает макет нескучным. Узор в примере напоминает сигнальную ленту.
16. Толстая полупрозрачная рамка
Обратите внимание, что она еще и с размытием.
17. Исчезающая рамка
18. Парящая тень
Чаще всего объекты как бы лежат на “поверхности” сайта, здесь же “поверхность” лежит, а фотографии “парят” над ней.
19. Четкая тень
Необязательно размывать тень, попробуйте сделать ее четкой. Цветные тени помогают лучше отличать тарифы.
20. Тень без заливки
Можно обойтись и вовсе без цвета, как на кнопке “Try Kairn!”.
21. Узорчатая тень
Тень можно сделать из узора.
22. Многослойный текст
Изящный способ подружить текст и иллюстрацию – переплести их. Лучше всего работает с заголовками. Несмотря на то, что части букв перекрываются, из-за размера текст считывается без проблем.
23. Иллюстрации внутри текста
Иконки или иллюстрации в теле текста сделают его причудливым и уникальным. Больше примеров в свитере Elizabeth Goodspeed.
24. Необычные пункты списка
25. Жирное подчеркивание
Стандартное тонкое подчеркивание используется для ссылок. Жирное подчеркивание — хорошая возможность использовать цвета бренда и привлечь внимание к важным словам. Вот пример посочнее:
А вот полегче:
26. Другой шрифт как акцент
А также стилизация под надписи от руки и четкая тень.
27. Эксперименты с начертаниями
С полужирным и курсивом все понятно, а как насчет остальных начертаний?
28. Сетка из точек
Легкий и довольно-таки популярный способ добавить изюминку, фактуру и заполнить пустоту. По сравнению со сплошной заливкой цветом точки выглядят визуально легче, хотя и выполняют ту же функцию.
Сверху построже, снизу — похудожественнее:
29. Выход за рамки
Простой способ добавить глубины – вынести объект за рамку блока. Слева текст сверстан по сетке, а справа объекты разлетаются в разные стороны. Энергично и игриво.
30. Рукописные элементы
Еще один простой и популярный способ добавить сайту эмоций. В примере ниже прием совпадает с содержанием, ведь дебаггинг кода — это как правка текста.
31. Третье измерение
Исчезающий градиент создает иллюзию трехмерности. Голубой блок как будто летит прямо на вас. Ретро сай-фай лук.
32. Рамка со смещением
Прием из недалекого прошлого. Кажется, такие рамки были актуальны в презентациях 80–90-х годов. И поскольку никто сегодня уже так не делает, выглядит необычно.
33. Иллюстрации “в кармане”
Если вам нужно показать только часть изображения (или не хватает места), поместите изображение за следующим разделом сайта.
34. Повторяющийся блок
Скопируйте блок, уменьшите и поместите назад. Так несколько раз. Создается ощущение перспективы.
Сверху более реалистичный пример, снизу — абстрактный:
35. Неравномерные формы
Необязательно делать все четырехугольным.
36. Парящие элементы
Тень под белыми блоками падает прямо и создает ощущение, что они приподнялись над “поверхностью” сайта.
37. Видимая сетка
Как правило, сетка на сайтах невидимая. Попробуйте сделать наоборот.
Как вы могли заметить, многие приемы комбинируются. Рассматривайте этот пост как шпаргалку и отправную точку. Также важно, чтобы графический ход подчеркивал содержание или хотя бы не противоречил ему. От себя хочу добавить еще 3 приема, которые использую.
38. Концентрические фигуры и волны
Концентрические фигуры имеют общий центр, но разные размеры. Создают динамику и помогают организовать контент.
39. Графический шум
Простой способ сделать плоское изображение более текстурным.
40. Эффект дуотона
Окрашивание изображения в два цвета. Своего рода цветной монохром.
Но помните, эти приемы ни в коем случае не заменяют хорошую композицию, грамотную верстку, визуальную концепцию и стилистическое единство. Если их нет, никакой изюм вам не поможет.
Больше полезной и бесполезной информации о PowerPoint и презентациях читайте в том самом блоге “PowerPoint & Презентации”.
Композиция, грамотная вёрстка, единство концепции и строго выдержанных стилистических элементов - вот что такое дизайн.
А то что написано в этой статье - просто результат слабоумия.
А почему приемы, описанные в статье, не могут быть частью концепции и набора "выдержанных стилистических элементов"? Сильноумный вы наш...
Пришел душнила с позицией: я прав, а вы все г...
Мне нравится подборка, свежо и современно, сохранила себе ссылку. На самом деле бывает такое что чего-то не хватает очевидно а как разнообразить чтобы было ещё лучше не знаешь. Думаю ещё вернусь к этой статье, когда фантазия меня снова покинет
Класс, очень наглядно. Есть чем вдохновиться, уже взяла на заметку несколько фишек