Каждый начинает свой путь в дизайне как новичок, и ваш эстетический глаз нужно тренировать, как и все остальное. Рассмотрение дизайна Dribbble может быть чрезвычайно полезным, но иногда вы просто цените дизайн, но не понимаете почему.
Нет идей. Плохие активы для работы. Понятия не имею, что проектировать. Все эти причины могут замедлить и расстроить вас, поэтому сейчас я покажу вам 10 чрезвычайно простых дизайнерских уловок, которые не требуют каких-либо особых навыков, а также способы улучшить ваши уродливые проекты.
Помните, что это не правила, а уловки, которые работают большую часть времени.
10) Переходите к черно-белому.
Нет идей? Нет хороших изображений? просто идите черно-белым. С правильной композицией можно получить брутальный дизайн. Это поможет вам понять балансировку, пустое пространство и то, как использовать тексты и геометрию.
Давайте посмотрим на быстрый пример.
9) Создайте «схему баланса».
Я люблю тестировать свои проекты, используя «вещь», которую, вероятно, изобрел (??). Я называю это «схемой баланса», и это черно-белая версия концепции, в которой я использую простые геометрические фигуры для замены своего содержимого.
Цель состоит в том, чтобы добиться одинакового количества черного как слева, так и справа, сверху и снизу. Если вы примените этот принцип к простому портфолио, вы получите что-то вроде этого:
Очевидно, нужно смотреть на глаз, но давайте посмотрим некоторые расчеты.
Черные прямоугольники в левой области составляют около
(236 * 138) + (934 * 132) + (313 * 69) + (674 * 44) = 207109 пикселей
В то время как большой правый прямоугольник считается вокруг
446 x 446 = 198916 пикселей.
просто они отличаются небольшой разницей: 3,9558%!
Примечание: да, чернильное пятно меньше прямоугольника, но его резкость и детализация привлекают больше внимания.
Перед проектированием не рассчитывал. После многих лет практики это становится автоматическим, так как ваш глаз будет чувствовать неправильное равновесие.
8) Представьте дизайн с фоном.
Пример, который я привел ранее, представлен на сером фоне, но вы можете попробовать разные вещи. Это помогает придать вашему дизайну некоторую глубину и контекст.
Но будьте осторожны: на реальном веб-сайте у вас не будет лишнего места, так что это всего лишь презентационный трюк!
7) Используйте рекомендации по размерам.
Не тратьте время на эксперименты с размерами весь день. В конце концов, ваши абзацы будут иметь размер 14–18 пунктов, ваши субтитры - немного больше (24–36), а ваши заголовки - даже больше (лично я использую для них от 96 до 144 пунктов). Размеры Figma по умолчанию очень хороши для типографики.
Они будут выглядеть слишком маленькими, но это нормально: вы не работаете в полноэкранном режиме.
Будьте осторожны: некоторые шрифты намного меньше или больше других. Вам следует использовать стандартные шрифты, такие как Roboto: если шрифт большой, как Roboto размером 14–18 пунктов, он идеально подходит для абзацев.
6) Примите Z-Index.
Если у вас есть изображения с прозрачностью, вы можете использовать их для создания слоев. Если у вас их нет, вы можете использовать remove.bg
В качестве Z-индекса в CSS вы можете расположить изображение позади или впереди других элементов, создавая иллюзию трехмерности. Это очень эффективно.
Давайте посмотрим на один из моих простых дизайнов, в котором я использовал эту технику.
5) Начните использовать пастельные тона.
Яркие цвета прекрасны, но часто приводят к агрессивному дизайну и ужасным сочетаниям. Кроме того, пастельный дизайн в наши дни чрезвычайно моден, поэтому давайте начнем экспериментировать с новой областью нашей палитры цветов.
4) Сделайте так, чтобы дизайн сильно дышал.
На мой взгляд, слишком много пробелов лучше, чем слишком мало. Загроможденный дизайн просто отстой. Дыхание можно получить разными способами:
- Держите тонны фона на виду.
- Избегайте эффекта стены текста с интервалом.
- Используйте изображения, которые не привлекают слишком много внимания.
- Сокращайте текст до костей и сохраняйте запоминающиеся фразы.
3) Откройте для себя силу шума.
Часто, когда мы думаем о дизайне, мы думаем о таких понятиях, как чистый, гладкий, ясный. Но совершенство кроется в недостатках .
Шум - сильный друг в вашем дизайне, особенно если вы пытаетесь придать своему сайту элегантный или художественный вид.
Кроме того, применение легкого шума придает вашей композиции кинематографический вид, что очень хорошо работает с видео и динамическими веб-сайтами.
Вы можете получить текстуру шума, используя Photoshop и создавая гауссовский шум 2–4K на белом фоне, а затем применяя его поверх монтажной области.
2) Начните искать хорошие шрифты.
Очень много ужасных шрифтов, особенно тех, которые предустановлены на наших компьютерах. Чтобы найти хорошие, начните серфить в Интернете или посмотрите видео на YouTube, чтобы узнать о замечательных гарнитурах и шрифтах.
Но будьте осторожны: многие шрифты не бесплатны, и их использование без лицензии может привести к неприятностям. Не волнуйтесь: у большинства шрифтов есть бесплатная версия!
Существует множество различных семейств и стилей, но в целом я делю их на три основные категории:
- Элегантные шрифты
- Современные шрифты
- Гарнитуры для основного текста
Часто первые два также являются отображаемыми шрифтами: их создатель хотел, чтобы вы использовали их в качестве заголовков.
Вы можете искать элегантные шрифты, такие как Abril Fatface, Playfair Display, Volux, Chalga и многие другие.
Современные шрифты включают Metropolis, ITC Avant Garde, Redwing, Takota, Gotham….
1) Используйте геометрию.
Это, вероятно, самый сложный трюк в использовании, но при правильном применении он просто разбивается.
Использование геометрических фигур помогает закрепить концепции и порядок в макете, даже не требуя изображений. Найти правильную геометрическую форму сложно, и я все еще не могу ее освоить.
Один большой трюк - использовать буквы, числа и заголовки вашего копирайтинга в качестве геометрии: сделать их гигантскими, но тонкими или использовать какие-то буквы в качестве фигур (буква А отлично работает).