5 ФИШЕК КРУТОГО ДИЗАЙНА, от эксперта, реализовавшего 30+ проектов и заработавшего клиентам больше 30 млн. рублей

2021-01-18T11:24:59.451Z

Пролог

Привет! Меня зовут Илья, я эксперт в упаковке - грамотном смысловом и визуальном оформлении сайтов и презентаций. На сегодняшний день, а сегодня на секундочку 18 января 21 года, мой опыт в этой нише пробил полтора года.

Для того, чтобы стать тем, кем я сейчас являюсь, я прошел не один курс по маркетингу, сайтам и дизайну; слил не один десяток клиентов; сделал не 1 и не 2, и даже не 3 далеко не самых успешных кейса; прошел кучу страхов общения с клиентами и холодных звонков (к слову я жуткий интроверт, хотя по мне не скажешь); протестировал кучу гипотез в работе... и вот наконец пришел к тому бэкграунда, который имею сейчас.

К слову, я также имел опыт и в обучении. Меньше полугода тому назад я являлся спикером и наставником по сайтам на одном из курсов, куда меня и пригласил мой клиент после того, как увидел, какие по уровню проекты я делаю. Через меня прошло 2 потока молодых сайтологов и дизайнеров — суммарно почти 500 человек. Благодаря мне и моим советам, многие из них начали свой быстрый карьерный рост в этой прекрасной нише и заработали свои первые 20, 30, 50 тысяч рублей. Отзывы до сих пор храню.

Также периодически беру людей на консультации к себе после чего они делают кратный рост в доходе или берут 2-3 проекта, если пришли на нуле.

Что ж, про мой опыт я рассказал, теперь нужно и перейти к контенту. Для начала скажу, что моя самая развитая компетенция - дизайн. Это подтверждают постоянные восторженные отзывы клиентов: "Илья!!! Это превосходно! Я никогда раньше такого не видела!! Спасибо!" - это кстати цитата моего последнего клиента, которому я сделал конверсию вчера 50% (!). Мой личный рекорд.

Поэтому всё, о чем я буду писать ниже - проверено на опыте и подтверждено не только мной.

Читай до конца, так как в дополнение к и так мощному материалу, я дам 5 идей элементов, которыми можно заполнить твой дизайн.

1. Используй сетки

Да, как бы это не было очевидно, но многие либо вообще не знают, что это, либо используют их коряво.

Сетки позволяют тебе располагать все элементы в единой системе координат так, чтобы итоговый дизайн смотрелся органично.

Вот пример обычной 12 колоночной сетки от Tilda, которую я всегда применяю в своих проектах. Её параметры - 14000x800px, 12 колонок шириной по 60px и расстоянием между ними по 40px

А, да что там, я сразу дам ссылку на готовое - https://www.figma.com/file/RI2BwpFoPg1gQLZCvnkIYCwo/Tilda-Grid-Figma?node-id=0%3A1

Просто копируйте к себе и используйте в проектах.

2. Цвета

Это один из самых важных факторов в дизайне, к которому я подхожу всегда со смыслом. Цвета задают определенную политику и настроение.

Многое зависит от ЦА, продукта и ниши, но я вывел для себя универсальную формулу, которую я использую как основу, а потом уже корректирую.

Если вы работаете с дорогим сегментом рынка, используйте темный фон и приглушенные цвета. Идеальная схема - черный (но не чисто) фон + золотой градиент для акцентных элементов. Такие цвета создают впечатление богатства и воспринимаются клиентом, как что-то довольно дорогое.

В случае ЦА детей или школьников лучше в всего заходят светлые, выбеленные фоны и голубые/розовые/зеленые оттенки. Они создают атмосферу легкости, беззаботности и воздуха - что и присуще детям такого возраста.

Еще одна важная ниша, которая выстрелила и быстро набрала популярность - инфобизнес и курсы по заработку на чем-то. Здесь лучше всего использовать яркие, контрастные и броские цвета, по типу: красный + черный, белый+океанский синий, фиолетовый/розовый+белый и так далее. Другими словами, используется комплементарная или раздельно-комлементарная цветовая палитра. Просто достаточно увести ползунок цветовой палитры в правый верхний угол в фигме и подобрать нужный цвет.

Оставляю снизу цветовую палитру, которая позволит вам грамотно подбирать цвета в дизайне.

3. Обработка фото

Наверное, это самая распространенная ошибка/косяк у уж очень многих дизайнеров. Все эти неровные края и смазанные грани вызывают дикое отторжение, когда видишь это в сайтах или где-либо еще.

Расскажу то, как это делаю я.

1. Захожу в Photoshop и выбираю нужную фотографию:

2. Использую инструмент выделение объекта/обычно выделение областью и выделяю объект - мужчину

3. Выбираю в верхней панели инструментов выделение / выделение и маска

4. Инструментом сглаживание - ровняю края, растушевка/контрастность - регулирую интенсивность обрезки, сместить край - здесь я все думаю ясно. И нажимаю ОК.

5. Копирую выделенную область CMD/CTRL + C. И создаю новый слой (Shift + CMD/CTRL + N). Нажимаю CMD/CTRL + V, чтобы вставить выделенную область.

Казалось бы всё. Сохраняешь и готово. Но нет, теперь я дам вам то, что используют только опытные и прожаренные спецы.

6. Выбранному слою, создаю слой-маску (прямоугольник с кружком по центру)

7. Выбираю инструмент "Градиент" с режимом умножение и начинаю магию...

Нажимаю и не отпускаю на тот край изображения, который нужно увести в непрозрачность и тяну по нужному направлению. Отпускаю и...вуаля. Красивый увод в непрозрачность готов. Не нужно никаких костылей, вроде каких то элементов или размытых фигур сверху. Всё красиво и аккуратно.

И только теперь мы сохраняем и добавляем в проект.

4. Плагины

Да, плагины - это реальный инструмент, который позволяет "работать работу" гораздо быстрее и эффективнее.

Какие плагины использую я в проектах? Дам свой ТОП

ARC - плагин, позволяющий изобразить текст по дуге, или вообще превратить надпись из горизонтальной в круговую.
Artboard/mockuuups/clay mockups 3D/Vectary 3D - идеальные сервисы для формирования красивых мокапов с сотнями идей. 1-ый мой фаворит.
Blobs - плагин для генерации замкнутых кривых. По простому "Клякс".
Image editor - плагин, позволяющий более полно и аккуратно редактировать изображения, нежели это дает функционал самой фигмы.
Image tracer - плагин, генерирующий векторный слой из обычной, например, картинки. Я его использую в качестве обводом, а-ля как в комиксах.
Isometric - превращение обычного элемента в изометрическую проекцию.
Noise - добавление шума, тут все понятно.
Smooth Shadow - обалденные плагин для формирования очень красивых теней с кучей параметров. Часто его использую.
Text prettier - "причесывает" ваш текст. Например, лишние отступы, некрасивые переносы, спец. символы и так далее. Полезная вещь. Многие этим пренебрегают.
To path - плагин, который располагает выбранный элемент по направлению любой кривой. Применение? Очень просто. Вам нужно сделать венок гладиатора? Выбираете листок, создаете кривую, применяете плагин и вуаля ваша половина венка готова. А потом все просто - группируете
(CMD/CTRL + G), ALT+SHIFT перетаскиваете в сторону, CMD/CTRL + H - отражаете по горизонтали. Готово!

5. WINDOW CONTAINER в TILDA

Это уже чуть больше относится к верстке, но тем не менее, я не могу не сказать про это великолепный инструмент, который очень многими либо не используется вообще, либо используется очень коряво.

Для начала что это? Говоря по простому, это способ расположения элемента не в окне сетки, о которой я говорил в п.1, а в окне самого устройства.

ВАЖНО! Этот инструмент подходит в 99% случаев для доп. элементов. Например, для линий, летающих объектов, векторов и прочей визуализации. Новичкам я бы советовал его использовать только для этого и не пробовать пытаться сделать что-то с главной информацией на сайте, с помощью этого tool'а.

Как применять?

Кликаем на нужный элемент, затем в панели Setting выбираем container.

2. Выбираем в строке container раздел WINDOW, вместо GRID

3. Выбираем его положение на странице. В моем случае мне нужно LEFT, TOP - левый верх.

Сохраняем. Публикуем. И готово - теперь вне зависимости от устройства и его разрешения, наш элемент будет находиться в левом верхнем углу. Главное не забыть его пропорционально изменить по размеру, для каждого формата.

Фух. На этом я завершу свою статью.

Я постарался в ней собрать как сложные, так и достаточно простые инструменты, благодаря которым вы повысите качество своего дизайна.

Конечно, их гораздо-гораздо больше. Здесь нет даже и 0,1% всех моих знаний и опыта в дизайне и упаковке.

Но надеюсь я помог именно тебе, дорогой читатель, сделать свою работу проще, быстрее и понятнее.

А если так, то напиши мне в Директ свою обратную связь - было ли тебе полезно. Мне будет очень приятно.

БОНУС

Ну и конечно, в своей лучшей традиции, я предпочту дать больше взамен.

Я даю открытый доступ на один из концептов своих первых экранов, который вы можете скопировать к себе и на нем отточить все те знания, которые я дал вам в этой статье. Плюс познакомитесь с парой новых инструментов в фигме 😉

Вот ссылка - https://www.figma.com/file/95UEfjsmI09r5VRK6f5AkR/%D0%91%D0%9E%D0%9D%D0%A3%D0%A1?node-id=0%3A4

Само собой, копирование в коммерческих целях запрещено 🚫

Спасибо, что прочли до конца! Обнял🤗

Мой Инстаграм - https://www.instagram.com/ilya.pitenin/

Мой Телеграм-канал - https://t.me/joinchat/VfKf66bhDnzz4vja

Илья Питенин