0:00 Знаешь, сколько времени нужно арт-директору или рекрутеру, чтобы понять твой уровень?
0:06 Они не будут вчитываться в твои юикс-исследования, решения, логику.
0:10 Если у тебя на первом экране пляшут отступы, проблемы с композицией и дизайн 2000-х.
0:17 Ты можешь быть гением аналитики, но если твой визуал слаб, то к сожалению, тебя не купят, не пригласят на работу, не будут проходить дальше с тобой собеседование.
0:27 И сегодня я хочу разобрать, как из новичка прокачаться до уровня сеньора, без какой-то там особой магии или сложных систем, без таланта, без всего прочего.
0:38 Есть конкретные шаги, конкретные действия.
0:50 Хелло, гайс это новый выпуск подкаста между пикселями: подкасты для фрилансеров, диджил-специалистов, предпринимателей и все, кто строит карьеру в цифровом мире.
0:58 Мы говорим о работе, деньгах, росте, навыках и смысле - честно, поделаю без воды.
1:02 Меня зовут Екатерина Купецкая, я основатель диджитал-студии университета диза
1:19 Сейчас рынок перенасен, и, к сожалению, недостаточно делать просто аккуратно.
1:24 Нужно уметь выделяться с помощью своего визуала.
1:27 Вот если есть какие-то ошибки в ЮАИ, то их вообще не должно быть.
1:31 Это вот знаете, как гигиена определенно, это как чистить зубы с утра.
1:35 Ровно так же у вас такие должны быть отношения с ЮА.
1:38 Если у вас плохой юай, то его соответственно нужно качать.
1:41 Иначе вы по всем параметрам будете проигрывать конкуренцию.
1:45 Даже если вы УИ-дизайнер, все равно без юа части, вы не попадете дальше на работу, потому что у всех возникнет вопрос: а почему ты дизайнер не знаешь базовую историю?
1:55 И мне многие писали комментарии на тему того, что, Катя, ты очень много говоришь про ЙС, про продуктовое мышление, про логику, но абсолютно ничего нет, про Юай - чего вообще с ним делать?
2:06 Понимаете, наверное, у меня это как раз-таки и связано с тем, что это такая базовая история, которую нужно знать, без которой просто невозможно существовать сейчас в дизайне.
2:16 Многие из вас чувствуют, что Юай как бы западает, но не понимают, почему.
2:23 То есть, вроде и картинки, может быть, на дрибли смотрите и следите за самыми сильными игроками на рынке, но все еще как-то что-то не стыкуется.
2:31 Особенно, когда начинаете сравнивать себя с более сильными дизайнерами в этом направлении и немножко расстраиваться.
2:37 Я могу рассказать: на своем опыте порадовать вас, что вам сейчас очень сильно повезло, что у вас есть на кого ориентироваться, на кого смотреть, и гораздо проще прокачать ваш УАЙ.
2:47 В моем, так скажем, прошлом становлении дизайнера, когда я еще только-только начинала, конкуренции было очень мало, хороших дизайнеров было очень мало.
2:56 Там было достаточно сделать просто аккуратно, просто логично, и чтобы это работало и желательно побыстрее.
3:05 Вообще непково было обиться, понять свой уровень, понять, как это прокачивать.
3:11 Важно было просто сделать как-то по наитию, методом тыка, просто чтобы создавать нечто более-менее приемлемое.
3:18 Если я сейчас посмотрю свои работы в ЮАе, это просто стыд и срам.
3:23 Начало своего пути это было просто отвратительно ужасно.
3:26 И даже на самом деле с протяжения времени мне понадобилось очень много времени для того, чтобы это нарастить.
3:32 Потому что изначально в университетах нет такой базовой истории, что вот сайты нужно проектировать вот так, что здесь есть определенная сетка, что здесь есть там композиция, что здесь есть там баланс и все прочее.
3:45 Вот как это перенести на диджитал-продукты, тогда этого не объяснялось.
3:49 И не было, к сожалению, никаких курсов, никаких обучений, никаких блогеров, которые что-то как-то рассказывали.
3:56 В общем, я еще тот динозавр, который столкнулся с тем, что учился в большинстве своем самостоятельно.
4:02 И опять же, если вернуться на текущую ситуацию, многие сейчас дизайнеры делают просто хорошо, просто аккуратно, просто красиво.
4:10 Сюда, конечно, хочется приплести, если у вас все-таки хороший УАЙ и вы считаете свой юа достаточно хорошего уровня.
4:18 Если вы относитесь себя к категории людей, которые хорошие ЮА, но все еще вам не знаю, там отказывают по проектам или у вас недостаточная заработная плата, то рекомендую вам посмотреть видео по 0 и подумать в этом направлении, скорее всего, у вас здесь что-то западает.
4:32 Ну или вы не можете себя продать.
4:34 Но это другая история.
4:36 Кстати, напишите комментарий, если хотите видео о том, как продавать себя.
4:42 И на самом деле вы можете быть вполне себе медло, медлом плюс, но при этом есть вещи, которые выдают вас джуна.
4:51 То есть то, на что человек, вот рекрутерка я вначале сказала, посмотрит и скажет: Ну, все понятно.
4:56 Если у вас будет какая-то прям базовая ошибка в вашем портфолио, то вам неминуемо придет отказ.
5:02 Или даже не просто не будут вас рассматривать.
5:05 Вот ошибки в ЮА не прощаются на данный момент.
5:08 И давайте пройдемся по этим ошибкам.
5:12 Это хаос, конечно же, в отступах.
5:14 И я на нее наступала в начале своего пути, когда нет никакой системы, нет четких правил.
5:20 Здесь поставили отступ от одного экрана 14, у кнопки там, допустим, 18 и так далее, и так далее.
5:27 То есть, вообще, вот просто поставил на глаз.
5:29 И у дизайнера, у хорошего дизайнера, должна быть система, желательно кратная 4 или 8.
5:34 Так вы будете себя приучать к дизайну интерфейсов и дизайну мобильных приложений, если вы когда-то захотите туда пойти.
5:41 Сильный юай, по факту, это математика, то есть достаточно сесть и изначально продумать эту систему, прописать эти правила и соблюдать, а не так, что вы даже если вы рисуете лендинг, открываете один экран, вы сделали так, второй экран вы сделали так.
5:55 Понятно, что есть всегда исключение из правил, когда вы можете выйти за рамки, когда мы проектируем что-то своеобразное, даже в этом всем хаосе, все равно есть система с отступами.
6:06 Потому что это делает ваш макет сильно серьезнее, аккуратнее.
6:10 Ну, то есть он не выглядит как будто вы что-то набросали на столе.
6:14 Это не выглядит как пачка несложных каких-то вещей.
6:17 Даже в хаосе все равно есть система.
6:20 Следующая ошибка - типографическая кашля.
6:22 Когда мы используем 355 начертаний, пытаемся удивить и дизайнеров, и себя самого.
6:28 Я сейчас все шрифты туда захерачу, все их начертания.
6:32 И, короче, вот будет вообще прям просто супер.
6:34 Да, это возможно классно выглядит.
6:37 Может быть, в каких-то постах в Инстаграме для того, чтобы зацепить внимание.
6:40 Но если мы говорим про дизайн, в определенных решениях это какая-то каша со шрифтовыми парами - окей, но в большинстве случаев, конечно, это полный кринж - делать так не стоит.
6:51 У вас должна быть естественная иерархия - то есть, когда смотришь на макет, вот здесь, в этой ошибке, очень часто важно все и не важно ничего.
6:59 Вы должны понимать, что выделить, что подсветить, что должно быть больше, что меньше.
7:03 И опять же, возвращаемся к системе.
7:07 идентично Вы не можете на одном экране сделать заголовок одного уровня, на другом экране заголовок другого уровня.
7:12 То есть, вот эта иерархия, когда у нас хорошая иерархия, когда у нас подсвечены подзаголовки, заголовки, второстепенные тексты и плохая иерархия, когда у нас это все в каше, и ты смотришь на весь этот макет и не понимаешь глазом, за что зацепиться.
7:26 Это тоже очень сильно выдает, что вы не умеете работать с информацией.
7:30 Ну, помимо информации, так я сказала, количество начертаний, количество шрифтов на вашем проекте - оно тоже очень важно.
7:38 Следующая ошибка - это декор вместо функциональности: когда мы используем тени ради теней, куча градиентов, какие-то там летающие визуальные составляющие, которые максимально отвлекают от текста, не дают нормально читать, не дают нормально воспринимать информацию.
7:55 То есть, в попытках в погоне за тем, чтобы удивить пользователя или других дизайнеров, создать такой креативный дизайн, мы вообще забываем про его функциональность.
8:04 Если мы пойдем с вами глубже, пойдем в продукт, в какие-то более серьезные проекты, где дизайнеры зарабатывают больше денег, вы столкнетесь с реальностью, что каждый пиксель должен работать.
8:13 То есть нельзя просто так взять какую-то визуальную составляющую и впихнуть.
8:18 Вы 10 раз подумайте о том, ставит ли тень, ставить ли градиент, использовать ли какую-то особенную визуалу кнопки?
8:26 Потому что функциональность здесь будет сильно превалировать.
8:30 Следующая ошибка - это отсутствие состояний: состояний у кнопок, элементов и экранов.
8:36 Когда мы забываем про то, что может отключиться интернет, может выдаться ошибка, если, допустим, пользователь перешел на какую-то страницу, которую не существует.
8:45 Мы забываем про то, что у кнопки есть режимы наведения, нажатия, фокуса, ошибки, состояния неактивности.
8:53 Мы просто проектируем визуальную картинку, но забываем, что есть система, которой мы должны соответствовать.
8:59 И эта система нужна для того, чтобы ваш дизайн отправлялся дальше в разработку и существовал без каких-либо ошибок.
9:07 Следующая ошибка - это игнорирование оптических компенсаций.
9:11 Да, возможно, по цифрам все будет стоять прекрасно, замечательно.
9:16 То есть, у кнопки вообще нет никаких проблем, допустим, у иконки нет ника проблем.
9:21 Но вы забываете, что, допустим, вес иконки может отличаться.
9:25 Он не всегда, допустим, центрированный, и вам нужно иногда подправлять и компенсировать вот эту оптическую иллюзию для того, чтобы когда человек смотрел на картинку, иконку, кнопку, какие-то элементы, у него не возникало ощущение дисбаланса.
9:42 Потому что именно вот эта оптическая иллюзия его создает.
9:45 И вы тоже должны это учитывать.
9:46 Это не суперчастая история, которая происходит в проектах, но она существует.
9:51 И не учитывать ее тоже очень важно.
9:53 Как это развивать, можно качать, просто свою насмотренность.
9:57 Для того чтобы понимать, здесь есть вообще оптическая компенсация или нет.
10:02 Следующая ошибка - самая частая ошибка, которую я встречаю, у джинов, и даже иногда у медлов это отсутствие консистентности.
10:10 Консистентность - это когда все находится, так скажем, в единой визуальной системе.
10:15 И нельзя просто взять, на одной странице сделать один тип кнопок со скруглениями, на другой странице сделать более
10:22 квадратными, прямоугольными эти кнопки.
10:25 В одном месте у вас будут, допустим, присутствовать тени, в другом отсутствуют.
10:30 То есть, у вас должна быть в системе вот эта консистентность, что у вас есть единое правило для кнопок, для тех же теней, для форм, для типов отображения информации, для той же типографики, где и как, что вы применяете.
10:44 То есть, должно быть вот это единство.
10:47 Когда человек попадает в проект, он понимает, что он не вываливается из этого проекта и каждая страница продолжения предыдущей, особенно это заметно, когда большие проекты, когда у нас очень много экранов, ну даже вот эта ошибка возникает и на лендингах.
11:01 То, что мы в начале на экране поставили одно, а где-то там к концу лендинга мы поставили уже совсем другое.
11:08 Следующая ошибка - это грязная работа с цветами.
11:11 Я думаю, что вы слышали такую фразу, как-то чего-то грязновато.
11:14 Вот эти примеси серого цвета, какие-то тяжелые, опять же, зависят, конечно, от технической задачи - изначально что вы рисуете, да, но тем не менее, когда у вас слишком какие-то темные тени, грязь, кажется, как будто вот такой эффект, какой-то, не знаю, старины, что ли, у дизайна.
11:32 И здесь тоже очень много ошибок происходит.
11:37 Восьмая ошибка - наплевательское отношение к доступности.
11:40 Когда мы забываем про минимальную область нажатия, когда мы забываем про то, что плохо видно определенный текст на определенном фоне.
11:49 Все это сразу вас выдает непрофессионала, потому что вы не думаете о нагрузке пользователя и не думаете о том, что ему сложно что-либо будет найти во всем этом визуальном хаосе.
12:01 А если уж ему сложно нажать, даже мышкой не знаю, то это, конечно, тоже становится большой проблемой.
12:10 На самом деле, ошибок, конечно, может быть больше.
12:13 Нужно разбирать дизайн, но самый главный вопрос: а как же стать сильным юащиком?
12:19 Понятное дело, не наступать на эти джуновские ошибки базовые, но при этом еще хорошо разбираться в понимании сетки, умении их строить, умение использовать и не просто рисовать на глаз в ритме, что это такое, в композиции - потому что с композицией тоже большие западания.
12:37 Сильные дизайнеры как раз-таки строят систему отступов, цветов, форм, и то есть они не отступают от этой системы.
12:43 А еще они умеют разбираться в различных гадлайнах и чужих дизайнах системы для того, чтобы их мочь применить.
12:50 Если у вас нет базового вообще понимания в какой-то момент, вы чувствуете, что вы запали в композиции, балансе, работе с цветом.
12:58 Вы не знаете - вот основу кирпичек на котором стоит вообще весь дизайн - срочно читать книги, проходить курсы - срочно это подтягивать - потому что без этого вообще никуда.
13:08 Но хорошая новость в том, что это все вполне себе фиксится.
13:12 И не думайте, что ой, у вас не получается - значит, не будет получаться.
13:15 Это вопрос опыта и вопрос наработки.
13:17 Вам нужно создать тренировочный зал.
13:19 Ну, представим, да, что вы такой дизайнер, и он ходит тренировать свой юа в этот зал регулярно, постоянно.
13:26 Потому что это вопрос набивки руки, вопрос насмотренности.
13:29 И я вам сейчас дам 5 инструментов, с которыми вы сможете работать.
13:32 Прямо сейчас и уже через месяц увидеть сильно большой результат.
13:38 Первый метод - самый мощный метод пиксельного клонирования.
13:42 Когда мы берем какое-либо решение, берем, допустим, если мы говорим про интерфейсы, мобильные дизайны, берем какое-то мобильный дизайн, классное приложение, наскриниваем экраны.
13:52 Если мы говорим про сайты и другие интерфейсы, большие, дисктопные версии, тоже, соответственно, находим то, что максимально сильно и хорошо работает.
14:02 Прям выбираем хороших таких сильных игроков.
14:04 Или то, что вам кажется, действительно, прям такого сильного уровня.
14:08 И начинаем копировать.
14:10 Пиксельно копировать.
14:11 Ставим в свою фигмочку вот этот скрин и начинаем рисовать точь-вь.
14:16 Соблюдаем полностью оступы, цвета, шифты.
14:19 Прям вот стараемся сделать идентично.
14:22 Это очень сильно поднимает вашу руку, потому что с течением времени ваш мозг уже не задумывается, почему так или иначе.
14:29 То есть он уже на автомате начинает это воспроизводить на ваших дизайн решениях.
14:34 Второй способ - это искусственные ограничения.
14:36 Попробуйте, допустим, создать какой-то экран или страницу сайта, намеренно себя ограничивать.
14:43 Допустим, можно использовать один или два шрифта, можно использовать два цвета, или можно использовать только определенные формы.
14:49 Здесь, когда вы себя ограничиваете, все проблемы с композициями, с какими-то западаниями, они начинают вылазить.
14:56 И когда вы учитесь преодолевать эти ограничения, вы тоже поднимаете свой скилл.
15:01 Третий метод - это обратный разбор.
15:03 Он чем-то схож с методом копирования, но здесь мы стараемся понять логику.
15:08 Допустим, мы берем какой-нибудь классный экранчик с мобина и пытаемся с вами его логически разложить.
15:14 Какая здесь была сетка, какие здесь были расстояния?
15:18 То есть пытаемся проанализировать через систему.
15:21 Не повторить то же самое, а именно проанализировать и сделать такие вот определенные заметки.
15:26 Это поможет вам начать видеть систему в различных интерфейсах, в различных дизайнах.
15:32 Четвертый способ - это насмотренность, так скажем, 2-0.
15:35 Потому что мы привыкли все говорить: ну, заходите там и смотрите, просто картинки, насматривайте.
15:40 Кстати, это тоже лайфхак 15 минут в день.
15:43 Просто перелистывание не рилсов, а перелистывание того же, не знаю, просто пинтереста, биханцев, будет помогать вам качать ту самую насмотренность.
15:52 Но это насмотренность 1, а насмотренность 2.0, когда мы с вами анализируем, они просто созерцаем, что имеется в виду, вы постоянно чем-то пользуетесь каждый день, будь то на компьютере у вас какие-то сервисы или на телефоне, тот же Телеграм или Ютуб.
16:07 Наблюдайте, что происходит.
16:08 Задавайте себя вопрос: почему здесь жирная кнопка, почему здесь выделены заголовок, почему эта иконка выглядит вот так.
16:14 Когда вы задаете все эти вопросы, почему, ваш мозг тоже начинает сохранять, то есть он начинает проводить вот эту вот аналогию внутреннюю.
16:23 И уже в реальных решениях, когда вы приходите, вы начинаете даже не замечать того, что вы применяете, того, к чему вы привыкли.
16:30 Это как знаете, ходить в музей, смотреть картины или ка-което современное искусство, не понимать, как вы можете это применить, а потом через месяц херак, и у вас это все происходит и обнаруживается в дизайне.
16:42 И пятый способ - это делать редизайны: уродливых, приложений, неудобных приложений, сервисов, или дизайнов - пытаться сделать более лучшее видение, так вы анализируете ошибки, которые допустили другие дизайнеры, и стараетесь это соответственно улучшить.
16:57 Это тоже очень сильно качает вашу юа-составляющую.
17:00 Но если вы хотите под присмотром прокачивать свой УАЙ, получать фидбэк, улучшать его, получить фидбэк по тем работам, которые у вас есть, то жду вас на курсе по продуктовому дизайну в мобильных приложениях, потому что я уделяю сильное внимание ЮА составляющей, потому что это базовая точка входа в профессию.
17:18 Если АИ западает, если вы не умеете работать с системой, то, к сожалению, дальше вы не сможете пройти, и тут уже речь еще не будет идти о каких-то классных проектах и хороше заработке.
17:28 То есть вы всегда будете находиться где-то на уровне посредственных дизайнеров, к сожалению.
17:34 Ну и, конечно, хочется сделать все равно отсылку к того, что ЮАЙ без Викса не будет работать.
17:40 Мало научиться просто делать, не совершать ошибки, работать с визуальной частью.
17:46 Важно еще все-таки понимать, что юай решает задачу.
17:50 А для того, чтобы это понимать, нужно понимать логику, как попасть в глубину.
17:54 Если вы пропустили подкаст на тему ВИК, обязательно его посмотрите, чтобы у вас смейчились эти две вещи.
18:00 Потому что одно без другого не существует.
18:03 Будь туда же вы юа-дизайнером, все равно вы должны понимать Уикс.
18:06 Будь вы Уикс-дизайнером, вы должны быть хорошим Аищиком.
18:10 Ну и если свести это к небольшому такому планчику, с чего начать и как это прокачивать, в первую очередь начните с понимания базы, композиции, типографики, цветовых решений.
18:21 Далее перейдите уже к сеткам, к системе того, как это все организовывать.
18:26 Если западают автолаяуты, работы с компонентами, это тоже нужно пофиксить.
18:30 Далее начните после того, как пофиксили все эти вещи, копировать существующие продукты.
18:35 Перейдите к редизайну плохих решений.
18:38 И дальше уже после того, как вы это все делаете, обязательно получайте фидбэк от более сильных дизайнеров, просите критики, спрашивайте, что улучшить, как это прокачать, потому что это тоже очень важная составляющая.
18:50 Когда мы просто сами себя сравним, мы не всегда объективны, всегда нужен фидбэк от какого-то более сильного дизайнера.
18:56 Но если ты не знаешь, как прокачать этот юай, нужно ли тебе его прокачивать, не понимаешь, на ком ты уровне находишься.
19:03 Я оставлю ссылку в описании на бесплатную диагностику вашего уровня и карту того, как развиваться в дизайне.
19:11 Приходите, смотрите, строите свой план и становитесь более сильными дизайнерами.
19:18 И в финале этого выпуска хочу сказать, что ЮА это никогда не про талант.
19:23 Дизайнеры - это не про талант, это про регулярность, наработку.
19:27 Также как ходите в спортзал.
19:29 Хотите похудеть, хотите набрать вес, вы должны прикладывать к этому усилия.
19:32 И здесь такая же история.
19:34 ЮА - это мышца, которую вы качаете.
19:36 И здесь нет истории, что вы должны уметь как-то там рисовать или вы должны что-то.
19:41 Да, вам поможет какая-то базовая насмотренность или ваш опыт и бэкграунд, но все это прокачиваемо.
19:48 И это, наверное, самое простое, что вы можете сделать.
19:51 Если вы хотите уже сейчас поднять себя на уровень, но понимаете, что это у вас западает, это первое, с чего стоит начинать.
19:57 Но если вам понравился этот подкаст, не забывайте ставить звездочки в айтюз, писать комментарии, это помогает развиваться каналу.
20:04 И услышимся уже совсем скоро.
Комментарии
Войдите, чтобы оставить комментарий.