У вас бывало такое, что вы сделали дизайн сайта, приложения или презентации, а он выглядит простовато, как будто чего-то не хватает? Ниже несколько десятков способов добавить изюминку вашим макетам. Каждый пример снабжен ссылкой на сайт.
Приемы простецкие, скорее незаметные, но создают ощущение продуманности, позволяют усилить фирменный стиль или добавить глубины.
Это перевод поста 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. Эффект дуотона
Окрашивание изображения в два цвета. Своего рода цветной монохром.
Но помните, эти приемы ни в коем случае не заменяют хорошую композицию, грамотную верстку, визуальную концепцию и стилистическое единство. Если их нет, никакой изюм вам не поможет.
Композиция, грамотная вёрстка, единство концепции и строго выдержанных стилистических элементов - вот что такое дизайн.
А то что написано в этой статье - просто результат слабоумия.
А почему приемы, описанные в статье, не могут быть частью концепции и набора "выдержанных стилистических элементов"? Сильноумный вы наш...
Могут. Но автор в первом абзаце ставит проблему следущий образом: если ваш сайт выглядит недостаточно хорошо, то проблема в том что у него недостаточно эффектиков.
Хотя на самом деле в большинстве случаев работа дизайнера выглядит неудачной, тупо из-за того что нет концепции и четких правил по использованию фир стиля.
Либо если дизайнер не думает о функции конечного продукта.
Ну или если ему не хватает навыков качественно исполнить свои работу.
А в этой статье говорят - ой добавь тень под кнопку и все будет замечательно.
Это вводит в заблуждение начинающих дизайнеров и как итог плохо сказывается на дизайн среде.
К сожалению, вы неправильно интерпретировали написанное.
Честно говоря, я тоже так подумал, как комментатор выше. Есть фундаментальные труды по дизайну, а тут выписаны приемы быстрорастворимого креатива. Вопрос в том, что же действительно повысит профессиональный уровень?
Упд: вижу ниже вы договорились
Хех, ну прикрепили бы весь кейс.
https://www.behance.net/gallery/116704595/jaschik-dlja-pismennyh-prinadlezhnostej
Может когда я делал этот макет 3 летней давности, мне не хватало качества исполнения.
Но если бы вы почитали описание проекта, то поняли что все визуальные элементы продиктованы концепцией. А не ради того чтобы «оживить макеты» и «добавить изюминку».
Если бы вы немножко подумали, прежде чем хамить с порога, вы бы увидели, что одно с другим не связано. Приемы из статьи не про композицию, верстку и концепцию. Это все подразумевается по умолчанию.
Признаю за собой хамство. И прошу у вас прощения. Но я подушню ещё немного.
Если бы статья называлась «40 визуальных приемов» а не «40 способов оживить сайт», то я бы не оставил комментария.
Вообщем, действительно произошло недопонимание. Не держите зла.
🤜🤛
Добавлю по тексту, что эти штуки не заменят верстку, композицию и концепцию.
Вау, очень круто! Спасибо, что не смотря на мое хамство мы нашли общий язык. 🤜🤛
Пришел душнила с позицией: я прав, а вы все г...
На счёт «душнилы» - вы правы. На счёт остального - нет.
Комментарий удален модератором
Мне нравится подборка, свежо и современно, сохранила себе ссылку. На самом деле бывает такое что чего-то не хватает очевидно а как разнообразить чтобы было ещё лучше не знаешь. Думаю ещё вернусь к этой статье, когда фантазия меня снова покинет
Класс, очень наглядно. Есть чем вдохновиться, уже взяла на заметку несколько фишек
какая креативная статья, спасибо за классные примеры
Комментарий недоступен
некоторые приемы безбожно устарели (или никогда актуальными и не были), но парочку удачных можно выцепить.
а вообще, любой прием нужно применять с умом, даже самые горящие тренды могут выглядеть убого, если не вписывать их в концепцию бренда.
40 способов сделать больно верстальщику
Владимир, спасибо за статью, забрал себе. Небольшая опечатка в тексте — рифмофаться
Немножко не хватает знаний о правильных типографских названиях значений и элементов, а так норм. ))
Напишите, что не так, пожалуйста, поправлю.
Да ну, зачем. Если в работе не задействованно, то и смысл мозг загромождать.
Надо будет, само придет.
спасибо, годные примеры, чтобы разбавить серые лендосы и креативы. забрал!
Графический шум, именуемому у тех, кто в теме - шурешками - это намного больше чем одна строка в тексте. По шурешкам можно книгу листов на 700 написать и не все охватить.
Спасибо за подборку! Очень много приёмов в одном месте собрано.
Как раз в тему, так же расписываю всякие визуальны приемы) Пополнение моей коллекции, спасибо за фишечки)
Выглядит здорово, спасибо
Статья полезна не тем, что открывает какую-то новизну, а тем, что включает емкую подборку приемов, пара из которых оказались очень кстати для меня, знавшего их и ранее и без нее, но иногда настигает творческий кризис, и такие публикации оказываются очень кстати. Спасибо, автор! Вы меня выручили ))
добавлю 41ый - градиентная засветка
Мне как разработчику было интересно посмотреть на работу с другой стороны)
Спасибо, приметила пару полезностей)