1. Can’t Unsee
Если вы неравнодушны к деталям, Can’t Unsee станет вашим любимым способом убить время. Вам нужно выбирать между двумя интерфейсами, которые выглядят очень похожими, но с небольшими (а иногда и значительными) различиями. Сможете ли вы найти идеальный до пикселя дизайн?
Играйте в Can’t Unsee: https://cantunsee.space/
2. Color
Color сводится к тому, насколько точно ваши глаза распознают цвета. Вы будете играть с оттенками, насыщенностью, дополнительными цветами, аналоговыми, а также с триадными и тетрадными цветовыми схемами. Довольно расслабляющая игра!
Играйте в Color: https://color.method.ac/
3. Designercize
Designercize был моим лучшим другом в колледже. Это генератор случайных чисел для безумных дизайн челленджей, которые могут улучшить ваше творческое мышление. Вы можете выбрать уровень сложности между легким, средним и сложным, и сколько времени вы должны сосредоточиться на процессе. Я знаю, что некоторые компании используют Designercize во время собеседований, так что она может пригодиться, если вы ищете новую работу!
Играйте в Designercize: https://designercize.com/
4. Figma Ninja
Figma Ninja поможет вам познакомиться с самой Figma и ее сочетаниями клавиш с помощью увлекательной игры, основанной на скорости и точности. Если вы новичок в этой программе и хотите улучшить навыки работы с Figma эта игра для вас.
Играйте в Figma Ninja: https://www.figma.com/community/file/769694576496801916
5. Flexbox Froggy
Несколько друзей фронтенд-разработчиков предложили мне поиграть в Flexbox Froggy, когда я попросил что-нибудь быстрое и удобное, чтобы освежить знания по CSS. В этой игре есть 24 различных уровня, на которых вы можете проверить свои навыки CSS. Кроме того, она может напомнить вам игру Frogger (в которую я любил играть в детстве).
Play Flexbox Froggy: https://flexboxfroggy.com/
6. Hex Invaders
Ваши друзья думают, что это странно, что вы знаете шестнадцатеричные цветовые коды наизусть? Что ж, теперь вы можете показать им, почему вам просто играть в Hex Invaders! Ваша уникальная цель – уничтожить армию инопланетян, которые пришли завоевать нашу планету... ударив по ним цветными ракетами. Новый взгляд на классику видеоигр.
Играйте в Hex Invaders: http://www.hexinvaders.com/
7. It’s Centred That
Простая игра, которая сводится к тому, насколько ваши глаза натренированы. Вы должны замечать нецентрированные элементы. Вам нужно будет решить, центрирована ли точка в различных представленных формах. Иногда все зависит от пикселей, так что… будьте готовы проиграть!
Играйте в It’s Centred That: https://www.supremo.co.uk/designers-eye/?playagain
8. Kern Type
Kern Type – расслабляющая игра с медленным темпом. Перемещайте буквы, чтобы добиться идеального межбуквенного интервала и набрать больше очков. Никаких таймеров!
Играйте в Kern Type: https://type.method.ac/
9. Pixactly
Сколько раз вы рисовали прямоугольник нужного вам размера от руки и считали, что он получился идеально? Теперь вы можете проверить это своеобразное умение, играя в Pixactly. Вам нужно нарисовать прямоугольник, который соответствует указанным размерам, и получить оценку в зависимости от того, насколько вы близки к заданным требованиям. Чем ниже оценка, тем лучше вы справились. Звучит легко, но это определенно не так, особенно после некоторых первых уровней.
Играйте в Pixactly: https://www.pixact.ly/
10. Shape Type
Когда я был молодым и свободным графическим дизайнером, я испытывал сложности с рисованием фигур карандашом. Shape Type позволяет показать, как работают векторные фигуры забавным и доступным способом. Если вы новичок в этой сфере, я настоятельно рекомендую вам попробовать эту игру!
Играйте в Shape Type: https://shape.method.ac/
Если вы неравнодушны к деталям, Can’t Unsee станет вашим любимым способом убить время. Вам нужно выбирать между двумя интерфейсами, которые выглядят очень похожими, но с небольшими (а иногда и значительными) различиями. Сможете ли вы найти идеальный до пикселя дизайн?
Играйте в Can’t Unsee: https://cantunsee.space/
2. Color
Color сводится к тому, насколько точно ваши глаза распознают цвета. Вы будете играть с оттенками, насыщенностью, дополнительными цветами, аналоговыми, а также с триадными и тетрадными цветовыми схемами. Довольно расслабляющая игра!
Играйте в Color: https://color.method.ac/
3. Designercize
Designercize был моим лучшим другом в колледже. Это генератор случайных чисел для безумных дизайн челленджей, которые могут улучшить ваше творческое мышление. Вы можете выбрать уровень сложности между легким, средним и сложным, и сколько времени вы должны сосредоточиться на процессе. Я знаю, что некоторые компании используют Designercize во время собеседований, так что она может пригодиться, если вы ищете новую работу!
Играйте в Designercize: https://designercize.com/
4. Figma Ninja
Figma Ninja поможет вам познакомиться с самой Figma и ее сочетаниями клавиш с помощью увлекательной игры, основанной на скорости и точности. Если вы новичок в этой программе и хотите улучшить навыки работы с Figma эта игра для вас.
Играйте в Figma Ninja: https://www.figma.com/community/file/769694576496801916
5. Flexbox Froggy
Несколько друзей фронтенд-разработчиков предложили мне поиграть в Flexbox Froggy, когда я попросил что-нибудь быстрое и удобное, чтобы освежить знания по CSS. В этой игре есть 24 различных уровня, на которых вы можете проверить свои навыки CSS. Кроме того, она может напомнить вам игру Frogger (в которую я любил играть в детстве).
Play Flexbox Froggy: https://flexboxfroggy.com/
6. Hex Invaders
Ваши друзья думают, что это странно, что вы знаете шестнадцатеричные цветовые коды наизусть? Что ж, теперь вы можете показать им, почему вам просто играть в Hex Invaders! Ваша уникальная цель – уничтожить армию инопланетян, которые пришли завоевать нашу планету... ударив по ним цветными ракетами. Новый взгляд на классику видеоигр.
Играйте в Hex Invaders: http://www.hexinvaders.com/
7. It’s Centred That
Простая игра, которая сводится к тому, насколько ваши глаза натренированы. Вы должны замечать нецентрированные элементы. Вам нужно будет решить, центрирована ли точка в различных представленных формах. Иногда все зависит от пикселей, так что… будьте готовы проиграть!
Играйте в It’s Centred That: https://www.supremo.co.uk/designers-eye/?playagain
8. Kern Type
Kern Type – расслабляющая игра с медленным темпом. Перемещайте буквы, чтобы добиться идеального межбуквенного интервала и набрать больше очков. Никаких таймеров!
Играйте в Kern Type: https://type.method.ac/
9. Pixactly
Сколько раз вы рисовали прямоугольник нужного вам размера от руки и считали, что он получился идеально? Теперь вы можете проверить это своеобразное умение, играя в Pixactly. Вам нужно нарисовать прямоугольник, который соответствует указанным размерам, и получить оценку в зависимости от того, насколько вы близки к заданным требованиям. Чем ниже оценка, тем лучше вы справились. Звучит легко, но это определенно не так, особенно после некоторых первых уровней.
Играйте в Pixactly: https://www.pixact.ly/
10. Shape Type
Когда я был молодым и свободным графическим дизайнером, я испытывал сложности с рисованием фигур карандашом. Shape Type позволяет показать, как работают векторные фигуры забавным и доступным способом. Если вы новичок в этой сфере, я настоятельно рекомендую вам попробовать эту игру!
Играйте в Shape Type: https://shape.method.ac/
11. Shot the Serif
Вам нужно быть быстрым и стрелять в правильную цель – символы с засечками. Вы можете выбрать свой уровень сложности и решить играть с мобильного устройства или через браузер. Я бросил вызов друзьям-дизайнерам, и это было довольно забавно (хотя, к сожалению, я проиграл!).
Играйте в Shot the Serif: https://www.tothepoint.co.uk/us/fun/i-shot-the-serif/
12. The Bézier Game
Еще одна игра, которая поможет вам улучшить (или развить) навыки работы с пером. Вы можете пройти очень дружелюбное и расслабляющее руководство или пропустить его и сразу приступить к испытанию. Вам нужно будет завершить различные фигуры в заданное количество узлов... звучит легко, не так ли?
Играйте в The Bézier Game: https://bezier.method.ac/
13. The Font Game
Вы получите 30 карточек и переключателей на выбор, что означает, что иногда вы можете выбрать больше, если они соответствуют заданному шрифту. Простая, но увлекательная игра, основанная на знании различных шрифтов.
Играйте в The Font Game: https://ilovetypography.com/2020/05/31/the-font-game
14. The Boolean Game
На данный момент одна из моих любимых игр! Если вы любите использовать фигуры для создания интеллектуальной и красивой графики и иконок, она создана для вас. В логической игре вы можете выбирать между различными модальностями (Union, Subtract, Intersect и Difference) и играть, создавая различные типы фигур. На каждом этапе игра становится немного сложнее, но темп отличный, и вам не придется сильно потеть.
Играйте в The Boolean Game: https://boolean.method.ac/
15. Typewar
Быстрая игра для проверки запоминания шрифтов: вам нужно выбрать один из двух вариантов, набирая очки за каждый правильный ответ. Также есть прогрессия уровня и счетчик, позволяющий проверить, насколько вы точны в своих ответах. Сама игра может быть немного повторяющейся, особенно на первых нескольких уровнях, но это отличный способ познакомиться с рядом наиболее часто используемых шрифтов.
Играйте в Typewar: https://typewar.com/
16. User Inyerface
Вы правильно прочитали; здесь нет опечатки. Это может быть и лучшая, и худшая игра из всего списка одновременно. Это был самый разочаровывающий опыт, который я испытал как пользователь…. Не буду спойлерить, поэтому подробностей об интерфейсе больше не будет. Дисклеймер: никому из моей команды или друзей не удалось пройти эту сумасшедшую игру, поэтому, пожалуйста, поделитесь своими советами, если сможете!
Играйте в User Inyerface: https://userinyerface.com/
Источник
Вам нужно быть быстрым и стрелять в правильную цель – символы с засечками. Вы можете выбрать свой уровень сложности и решить играть с мобильного устройства или через браузер. Я бросил вызов друзьям-дизайнерам, и это было довольно забавно (хотя, к сожалению, я проиграл!).
Играйте в Shot the Serif: https://www.tothepoint.co.uk/us/fun/i-shot-the-serif/
12. The Bézier Game
Еще одна игра, которая поможет вам улучшить (или развить) навыки работы с пером. Вы можете пройти очень дружелюбное и расслабляющее руководство или пропустить его и сразу приступить к испытанию. Вам нужно будет завершить различные фигуры в заданное количество узлов... звучит легко, не так ли?
Играйте в The Bézier Game: https://bezier.method.ac/
13. The Font Game
Вы получите 30 карточек и переключателей на выбор, что означает, что иногда вы можете выбрать больше, если они соответствуют заданному шрифту. Простая, но увлекательная игра, основанная на знании различных шрифтов.
Играйте в The Font Game: https://ilovetypography.com/2020/05/31/the-font-game
14. The Boolean Game
На данный момент одна из моих любимых игр! Если вы любите использовать фигуры для создания интеллектуальной и красивой графики и иконок, она создана для вас. В логической игре вы можете выбирать между различными модальностями (Union, Subtract, Intersect и Difference) и играть, создавая различные типы фигур. На каждом этапе игра становится немного сложнее, но темп отличный, и вам не придется сильно потеть.
Играйте в The Boolean Game: https://boolean.method.ac/
15. Typewar
Быстрая игра для проверки запоминания шрифтов: вам нужно выбрать один из двух вариантов, набирая очки за каждый правильный ответ. Также есть прогрессия уровня и счетчик, позволяющий проверить, насколько вы точны в своих ответах. Сама игра может быть немного повторяющейся, особенно на первых нескольких уровнях, но это отличный способ познакомиться с рядом наиболее часто используемых шрифтов.
Играйте в Typewar: https://typewar.com/
16. User Inyerface
Вы правильно прочитали; здесь нет опечатки. Это может быть и лучшая, и худшая игра из всего списка одновременно. Это был самый разочаровывающий опыт, который я испытал как пользователь…. Не буду спойлерить, поэтому подробностей об интерфейсе больше не будет. Дисклеймер: никому из моей команды или друзей не удалось пройти эту сумасшедшую игру, поэтому, пожалуйста, поделитесь своими советами, если сможете!
Играйте в User Inyerface: https://userinyerface.com/
Источник
Почему «творческая свобода» — это миф?
Если вы работали фрилансером, значит, вы сталкивались с этим явлением. Обсуждая проект, клиент кажется открытым и расслабленным. «Мы доверяем тебе, у тебя полная свобода действий» – говорит он.
Вы с энтузиазмом погружаетесь в проект. Наконец-то, вам предоставили полную творческую свободу. Вы используете полученную возможность, и уверенно работаете, следуя собственноручно выбранному курсу.
Затем вы показываете результат клиенту и он просто в ужасе.
Что случилось?
Вы неверно выбрали направление?
Клиент передумал?
Вы ошиблись?
Хотя вы могли столкнуться с указанными выше проблемами, скорее всего истинная причина кроется в другом.
Не существует полной творческой свободы
Если вы четко не определили, что нужно сделать или чего хочет клиент, вы будете работать наобум и надеяться, что попадете в цель. Скорее всего вы ошибетесь, потому что у клиента не будет критериев для оценки, кроме своего текущего настроения и субъективного вкуса.
Всегда начинайте проект с исследования и брифинга. И, по возможности, напишите собственные брифы – даже если клиент предоставил свои. Это позволит вам определить условия своими словами и убедиться, что ваше понимание проекта совпадает с пониманием вашего клиента. Кроме того, это возможность задать тон и воодушевить клиента, показав, что он не ошибся, выбрав именно вас.
Клиент может сказать, что в этом проекте у вас полная свобода действий, но это не так. Скорее всего, он просто еще не знает, в чем заключаются ограничения. Таким образом, вы сможете помочь определить их, и не делайте это бесплатно. Включите этот этап в смету проекта, чтобы вам за него заплатили.
Только после того, как вы четко определите критерии успеха, вы сможете найти в них свободу творчества. Кроме того, вам будет на что ссылаться, когда представите полученный результат заказчику. Поскольку вы заранее установили цели и ограничения, вы сможете лучше обосновать принятые решения. Клиент может не согласиться с вашим решением, но он не может не согласиться с условиями, которые ранее согласовали.
Ограничения необходимы для творческой работы. Без них ничего не получится. Наш разум вращается в десятках направлений, и в конце концов мы впадаем в отчаяние. Полная «творческая свобода» невозможна, если вы не занимаетесь личным арт-проектом – и даже тогда ограничения полезны.
Задавайте вопросы как можно раньше и чаще
Если вам что-то неясно, даже если кажется, что это мелочь, спросите. Не смягчайте вопрос фразами вроде «просто на всякий случай», «мне интересно, не могли бы вы уточнить» или «просто, чтобы удостовериться». Не беспокойтесь, что можете показаться дилетантом. Просто задайте вопросы.
Когда вы сразу задаете простые вопросы, вы получаете ясные и полезные ответы. Каждый заданный вопрос, снижает вероятность недопонимания в будущем.
Если вы работали фрилансером, значит, вы сталкивались с этим явлением. Обсуждая проект, клиент кажется открытым и расслабленным. «Мы доверяем тебе, у тебя полная свобода действий» – говорит он.
Вы с энтузиазмом погружаетесь в проект. Наконец-то, вам предоставили полную творческую свободу. Вы используете полученную возможность, и уверенно работаете, следуя собственноручно выбранному курсу.
Затем вы показываете результат клиенту и он просто в ужасе.
Что случилось?
Вы неверно выбрали направление?
Клиент передумал?
Вы ошиблись?
Хотя вы могли столкнуться с указанными выше проблемами, скорее всего истинная причина кроется в другом.
Не существует полной творческой свободы
Если вы четко не определили, что нужно сделать или чего хочет клиент, вы будете работать наобум и надеяться, что попадете в цель. Скорее всего вы ошибетесь, потому что у клиента не будет критериев для оценки, кроме своего текущего настроения и субъективного вкуса.
Всегда начинайте проект с исследования и брифинга. И, по возможности, напишите собственные брифы – даже если клиент предоставил свои. Это позволит вам определить условия своими словами и убедиться, что ваше понимание проекта совпадает с пониманием вашего клиента. Кроме того, это возможность задать тон и воодушевить клиента, показав, что он не ошибся, выбрав именно вас.
Клиент может сказать, что в этом проекте у вас полная свобода действий, но это не так. Скорее всего, он просто еще не знает, в чем заключаются ограничения. Таким образом, вы сможете помочь определить их, и не делайте это бесплатно. Включите этот этап в смету проекта, чтобы вам за него заплатили.
Только после того, как вы четко определите критерии успеха, вы сможете найти в них свободу творчества. Кроме того, вам будет на что ссылаться, когда представите полученный результат заказчику. Поскольку вы заранее установили цели и ограничения, вы сможете лучше обосновать принятые решения. Клиент может не согласиться с вашим решением, но он не может не согласиться с условиями, которые ранее согласовали.
Ограничения необходимы для творческой работы. Без них ничего не получится. Наш разум вращается в десятках направлений, и в конце концов мы впадаем в отчаяние. Полная «творческая свобода» невозможна, если вы не занимаетесь личным арт-проектом – и даже тогда ограничения полезны.
Задавайте вопросы как можно раньше и чаще
Если вам что-то неясно, даже если кажется, что это мелочь, спросите. Не смягчайте вопрос фразами вроде «просто на всякий случай», «мне интересно, не могли бы вы уточнить» или «просто, чтобы удостовериться». Не беспокойтесь, что можете показаться дилетантом. Просто задайте вопросы.
Когда вы сразу задаете простые вопросы, вы получаете ясные и полезные ответы. Каждый заданный вопрос, снижает вероятность недопонимания в будущем.
Общайтесь на каждом этапе
Никогда не предполагайте, что вы и ваш клиент находитесь на одной волне. Делайте заметки, отправляйте электронные письма и повторяйте ключевые моменты в конце телефонного разговора. Это не для того, чтобы получить юридические аргументы. Это необходимо для того, чтобы вы были на одной волне и согласовали конечные результаты.
Каждый раз, когда вы делитесь текущим состоянием проекта и направлением его развития, ваш клиент будет чувствовать себя более вовлеченным и заинтересованным в конечном результате. Чем больше вовлечен ваш клиент, тем больше он будет чувствовать, что выполнил свою часть работы, и тем больше ему понравится конечный результат. Дайте ему почувствовать, что ваша работа принадлежит ему, и у вас будет больше шансов на успех.
Ваше общение должно быть ясным и кратким. Никто не хочет получать длинное письмо с дословным пересказом прошедшей встречи. Если вы завалите своего клиента письмами в стиле «скажите, что вы думаете по этому поводу», вы, скорее всего, не получите ответа. Большинство людей будут игнорировать эти письма и в конечном итоге потеряют терпение, когда вы будете докучать им или заморозите проект в ожидании ответа.
Задавайте вопросы кратко и облегчите клиенту ответ. Позвольте ему выбрать один из двух вариантов или сформируйте их так, чтобы можно было ответить просто «да» или «нет». Если у вас несколько вопросов, не отправляйте их все сразу. Если вы должны отправлять более одного вопроса или действия за раз, пронумеруйте список, чтобы клиент мог ответить упорядоченно.
Дизайнеры должны быть проджект-менеджерами, даже если они уже есть в вашей команде, особенно если вы работаете один. Если клиент говорит, «никаких ограничений», ваша задача – добавить ограничения. Сначала это может показаться привлекательным, но расплывчатый, плохо сформулированный проект не принесет вам никакой пользы. Чтобы чувствовать себя свободно в рамках дизайн-проекта, вам нужны границы.
Источник
Никогда не предполагайте, что вы и ваш клиент находитесь на одной волне. Делайте заметки, отправляйте электронные письма и повторяйте ключевые моменты в конце телефонного разговора. Это не для того, чтобы получить юридические аргументы. Это необходимо для того, чтобы вы были на одной волне и согласовали конечные результаты.
Каждый раз, когда вы делитесь текущим состоянием проекта и направлением его развития, ваш клиент будет чувствовать себя более вовлеченным и заинтересованным в конечном результате. Чем больше вовлечен ваш клиент, тем больше он будет чувствовать, что выполнил свою часть работы, и тем больше ему понравится конечный результат. Дайте ему почувствовать, что ваша работа принадлежит ему, и у вас будет больше шансов на успех.
Ваше общение должно быть ясным и кратким. Никто не хочет получать длинное письмо с дословным пересказом прошедшей встречи. Если вы завалите своего клиента письмами в стиле «скажите, что вы думаете по этому поводу», вы, скорее всего, не получите ответа. Большинство людей будут игнорировать эти письма и в конечном итоге потеряют терпение, когда вы будете докучать им или заморозите проект в ожидании ответа.
Задавайте вопросы кратко и облегчите клиенту ответ. Позвольте ему выбрать один из двух вариантов или сформируйте их так, чтобы можно было ответить просто «да» или «нет». Если у вас несколько вопросов, не отправляйте их все сразу. Если вы должны отправлять более одного вопроса или действия за раз, пронумеруйте список, чтобы клиент мог ответить упорядоченно.
Дизайнеры должны быть проджект-менеджерами, даже если они уже есть в вашей команде, особенно если вы работаете один. Если клиент говорит, «никаких ограничений», ваша задача – добавить ограничения. Сначала это может показаться привлекательным, но расплывчатый, плохо сформулированный проект не принесет вам никакой пользы. Чтобы чувствовать себя свободно в рамках дизайн-проекта, вам нужны границы.
Источник
UXPUB 🇺🇦 Дизайн-спільнота
Почему «творческая свобода» — это миф?
Полная «творческая свобода» невозможна, если вы не занимаетесь личным арт-проектом – и даже тогда ограничения полезны
Как сделать простые интерактивные кнопки в Figma
Оживите свой прототип
В YML есть мантра «прототипы важнее презентаций». Прототип делает ваши дизайн-решения реальными и сообщает клиентам или заинтересованным сторонам гораздо больше, чем статичный дизайн. Он также помогает во время проектирования не попасть в «ловушку Dribbble» (быть может, этот дизайн хорошо смотрится на небольшом скриншоте, но как он на самом деле работает?). Создание кнопок, которые ведут себя как кнопки – это маленький шаг к тому, чтобы ваши прототипы действительно ожили. Давайте рассмотрим этот момент подробнее.
Простые кнопки
Это кнопка по умолчанию (default button), кнопка в состоянии наведения курсора (hover state) и в состоянии нажатия (pressed state). Это поможет понять концепцию прототипирования кнопок в Figma.
Оживите свой прототип
В YML есть мантра «прототипы важнее презентаций». Прототип делает ваши дизайн-решения реальными и сообщает клиентам или заинтересованным сторонам гораздо больше, чем статичный дизайн. Он также помогает во время проектирования не попасть в «ловушку Dribbble» (быть может, этот дизайн хорошо смотрится на небольшом скриншоте, но как он на самом деле работает?). Создание кнопок, которые ведут себя как кнопки – это маленький шаг к тому, чтобы ваши прототипы действительно ожили. Давайте рассмотрим этот момент подробнее.
Простые кнопки
Это кнопка по умолчанию (default button), кнопка в состоянии наведения курсора (hover state) и в состоянии нажатия (pressed state). Это поможет понять концепцию прототипирования кнопок в Figma.
Основные правила, прототипирования кнопки:
Ваши кнопки должны быть уникальным экземпляром компонента или фреймом. Итак, если в вашем прототипе есть 4 кнопки, которые вы хотите сделать интерактивными, вам понадобится всего 12 кнопок, чтобы прототип работал (1 в состоянии по умолчанию, 1 в состоянии наведения курсора и 1 в нажатом состоянии для каждой кнопки). На данный момент я не знаю способа связать последовательность прототипов на главной странице компонентов и применить это ко всем экземплярам компонента. (Если я ошибаюсь, пожалуйста, напишите в комментариях!)
Состояния наведения и нажатия должны располагаться за пределами фрейма вашего прототипа, чтобы они работали как оверлей. Просто так «оверлеи» работают в Figma.
Сохраняйте согласованность в именах слоев для функции Smart Animate. Позже мы будем использовать в Figma функцию Smart Animate, поэтому следует последовательно называть слои. (Если вы похожи на меня, то ваши слои обычно называются «Frame 1104», «image 32» или «Vector 200». Следует упорядочить их).
Это простой двухэтапный процесс
Шаг 1 — Состояние наведения курсора
1. Состояние «Наведение курсора»
Ключом к этому прототипу является то, что вы фактически не меняете исходную кнопку «по умолчанию». Вместо этого вы открываете оверлей кнопки в «состоянии наведения курсора» непосредственно поверх кнопки в состоянии по умолчанию. Это делается путем создания прототипа взаимодействия «While Hovering», который запускает оверлей кнопки в состоянии наведения курсора.
Если в первом раскрывающемся списке в разделе «Overlay» вы выберете «Manual» (Вручную), Figma автоматически разместит новую кнопку в состоянии наведения курсора поверх кнопки в состоянии по умолчанию. Обязательно проверьте, чтобы оверлей располагался поверх вашей изначальной кнопки.
Шаг 2 — Нажатая кнопка
2. Кнопка в нажатом состоянии
Теперь, когда открыто состояние наведения курсора, мы создадим второй этап нашего взаимодействия. Для этого создайте прототип взаимодействия «While Pressing» на кнопке в состоянии наведения курсора, который запускает команду «Swap With» с кнопкой в нажатом состоянии. Думаю, технически вы можете открыть другой оверлей, но тогда мы не сможем использовать функцию Smart Animate.
Этап 3 — «По нажатию» (On Click)
3. Сделайте кнопку функциональной (необязательно)
Хорошо, это трехэтапный процесс, если вы хотите, чтобы ваша кнопка действительно что-то делала. Чтобы сделать кнопку функциональной, просто добавьте к нажатой кнопке прототип взаимодействия «On Click», чтобы она позволила перейти на новую страницу, открыла модальное окно и т.д. ?
Вот и все! Ниже, в качестве примера, приведен мой проект Figma, демонстрирующий изложенные выше правила:
Кнопки должны быть уникальным экземпляром компонента или фреймом.
Состояния наведения и нажатия должны располагаться вне фрейма прототипа, чтобы работать как оверлей.
Сохраняйте согласованность названий слоев для корректной работы функции Smart Animate.
Источник
Ваши кнопки должны быть уникальным экземпляром компонента или фреймом. Итак, если в вашем прототипе есть 4 кнопки, которые вы хотите сделать интерактивными, вам понадобится всего 12 кнопок, чтобы прототип работал (1 в состоянии по умолчанию, 1 в состоянии наведения курсора и 1 в нажатом состоянии для каждой кнопки). На данный момент я не знаю способа связать последовательность прототипов на главной странице компонентов и применить это ко всем экземплярам компонента. (Если я ошибаюсь, пожалуйста, напишите в комментариях!)
Состояния наведения и нажатия должны располагаться за пределами фрейма вашего прототипа, чтобы они работали как оверлей. Просто так «оверлеи» работают в Figma.
Сохраняйте согласованность в именах слоев для функции Smart Animate. Позже мы будем использовать в Figma функцию Smart Animate, поэтому следует последовательно называть слои. (Если вы похожи на меня, то ваши слои обычно называются «Frame 1104», «image 32» или «Vector 200». Следует упорядочить их).
Это простой двухэтапный процесс
Шаг 1 — Состояние наведения курсора
1. Состояние «Наведение курсора»
Ключом к этому прототипу является то, что вы фактически не меняете исходную кнопку «по умолчанию». Вместо этого вы открываете оверлей кнопки в «состоянии наведения курсора» непосредственно поверх кнопки в состоянии по умолчанию. Это делается путем создания прототипа взаимодействия «While Hovering», который запускает оверлей кнопки в состоянии наведения курсора.
Если в первом раскрывающемся списке в разделе «Overlay» вы выберете «Manual» (Вручную), Figma автоматически разместит новую кнопку в состоянии наведения курсора поверх кнопки в состоянии по умолчанию. Обязательно проверьте, чтобы оверлей располагался поверх вашей изначальной кнопки.
Шаг 2 — Нажатая кнопка
2. Кнопка в нажатом состоянии
Теперь, когда открыто состояние наведения курсора, мы создадим второй этап нашего взаимодействия. Для этого создайте прототип взаимодействия «While Pressing» на кнопке в состоянии наведения курсора, который запускает команду «Swap With» с кнопкой в нажатом состоянии. Думаю, технически вы можете открыть другой оверлей, но тогда мы не сможем использовать функцию Smart Animate.
Этап 3 — «По нажатию» (On Click)
3. Сделайте кнопку функциональной (необязательно)
Хорошо, это трехэтапный процесс, если вы хотите, чтобы ваша кнопка действительно что-то делала. Чтобы сделать кнопку функциональной, просто добавьте к нажатой кнопке прототип взаимодействия «On Click», чтобы она позволила перейти на новую страницу, открыла модальное окно и т.д. ?
Вот и все! Ниже, в качестве примера, приведен мой проект Figma, демонстрирующий изложенные выше правила:
Кнопки должны быть уникальным экземпляром компонента или фреймом.
Состояния наведения и нажатия должны располагаться вне фрейма прототипа, чтобы работать как оверлей.
Сохраняйте согласованность названий слоев для корректной работы функции Smart Animate.
Источник
UXPUB 🇺🇦 Дизайн-спільнота
Как сделать простые интерактивные кнопки в Figma за 2 шага
Создание кнопок, которые ведут себя как кнопки – это маленький шаг к тому, чтобы ваши прототипы действительно ожили
Как сделать дизайн сайта через призму UX? Без танцев с бубном, SMS и регистрации
С чего начинается работа по дизайну сайта? Почему Вася делает дизайн за 30 тысяч, Лена — за 150 тысяч, а известная студия — за 1 миллион? Почему конкурент сделал сайт за 200 тысяч, а мой будет стоить 500? И можно ли вообще сделать сайт раз и навсегда, без всяких этих этапов согласования и правок?
Представим себе некоего заказчика в вакууме, который пришел со своей идеей. В лучшем случае, у него есть небольшое ТЗ и несколько зарисовок ручкой (влитых в Figma, Miro или GDocs).
Ему нужен дизайн стартапа: веб-версия, 2 приложения и немного макулатуры для инвесторов. С чего же начать? Нет, не с фейспалма. Уверяю — такое встречается сплошь и рядом. Нацепив дежурную улыбку, я отправляю в бой менеджера проектов (с навыками UX) и иду пить кофе в ближайший Старбакс, на время забывая о заказчике.
Шаг 1. Разбираем проект.
Итак, PM, одаренный широким кругозором, усиленно пытается понять, с чем едят полученный проект. Иногда в разговоре с заказчиком приходится скатываться до очевидностей: «Почему треугольничек не вставляется в круглое отверстие, нипанимаааааюююю…»
Итогом этапа, в идеале, должно стать:
flow или короткое ТЗ на проект;
базовый прототип с основным функционалом;
краткое и емкое пояснение: для чего делается проект, какие есть конкуренты, как планируется монетизация, основные плюсы и минусы запуска проекта.
Что могу посоветовать:
не пренебрегайте созвоном или личной встречей с клиентом. Даже если ваша интроверсия приобретает критические масштабы. За время карантина (ох, простите, самоизоляции) я встретилась как минимум с 3 ситуациями, когда часовые переписки составляли исключительно неверное представление о проекте. И да, не столкнувшись с этим, я бы сама себе не поверила.
не стесняйтесь задавать глупые вопросы. Порой самый глупый вопрос может открыть невиданные ранее грани проекта.
составьте чеклист того, что вы хотите получить от клиента. И не продолжайте проект, пока не получите всё.
если на этом этапе даже вы понимаете что проект не взлетит, и промдизайн летающего ТС в виде топора очевиден только вам, попробуйте мягко убедиться в том что вы поняли все верно (селф-тест на дурака): наглядно представьте топор заказчику. Если ваш оппонент не видит ничего зазорного в происходящем — акститесь, лучше отказаться, чем получить минус в карму.
Шаг 2. Пилим сырые прототипы, изучаем конкурентов & составляем CJM
На этом этапе я обсуждаю с командой и заказчиком сырые прототипы. Все происходящее постепенно обрастает подробностями. И как раз тут нужен профессионализм всех участников. В этот момент понимаешь, почему менеджер проектов, которому ты платишь 1500 в час, отрабатывает их на 150% — и даже немножечко больше.
Затем сравниваем то, что получилось, с конкурентами. Иногда они есть — но чаще всего нет. И даже похожего ничего нет. Стартапы — штука веселая, да. В таком случае ищем аналогии, другие сервисы со схожей моделью работы (и из других тематик тоже). Сравниваем логику, упрощаем, составляем листы сравнений с конкурентами и псевдоконкурентами, дорабатываем прототип.
Наступает время создавать CJM. Приветствую UX инженера, аналитика... И хотела бы я сказать, что снова ухожу пить кофе — но нет. Втроем мы собираем группы клиентов, согласовываем с заказчиком, вживаемся в роли/приглашаем респондентов, раскладываем прототипы и начинаем штормить. В подробностях посмотреть, как создавать CJM, можно, например, тут https://vc.ru/marketing/96029-instrukciya-po-sostavleniyu-customer-journey-map-cjm. Созданию CJM я могу посвятить отдельный лонгрид и это обязательно когда-нибудь произойдет.
С чего начинается работа по дизайну сайта? Почему Вася делает дизайн за 30 тысяч, Лена — за 150 тысяч, а известная студия — за 1 миллион? Почему конкурент сделал сайт за 200 тысяч, а мой будет стоить 500? И можно ли вообще сделать сайт раз и навсегда, без всяких этих этапов согласования и правок?
Представим себе некоего заказчика в вакууме, который пришел со своей идеей. В лучшем случае, у него есть небольшое ТЗ и несколько зарисовок ручкой (влитых в Figma, Miro или GDocs).
Ему нужен дизайн стартапа: веб-версия, 2 приложения и немного макулатуры для инвесторов. С чего же начать? Нет, не с фейспалма. Уверяю — такое встречается сплошь и рядом. Нацепив дежурную улыбку, я отправляю в бой менеджера проектов (с навыками UX) и иду пить кофе в ближайший Старбакс, на время забывая о заказчике.
Шаг 1. Разбираем проект.
Итак, PM, одаренный широким кругозором, усиленно пытается понять, с чем едят полученный проект. Иногда в разговоре с заказчиком приходится скатываться до очевидностей: «Почему треугольничек не вставляется в круглое отверстие, нипанимаааааюююю…»
Итогом этапа, в идеале, должно стать:
flow или короткое ТЗ на проект;
базовый прототип с основным функционалом;
краткое и емкое пояснение: для чего делается проект, какие есть конкуренты, как планируется монетизация, основные плюсы и минусы запуска проекта.
Что могу посоветовать:
не пренебрегайте созвоном или личной встречей с клиентом. Даже если ваша интроверсия приобретает критические масштабы. За время карантина (ох, простите, самоизоляции) я встретилась как минимум с 3 ситуациями, когда часовые переписки составляли исключительно неверное представление о проекте. И да, не столкнувшись с этим, я бы сама себе не поверила.
не стесняйтесь задавать глупые вопросы. Порой самый глупый вопрос может открыть невиданные ранее грани проекта.
составьте чеклист того, что вы хотите получить от клиента. И не продолжайте проект, пока не получите всё.
если на этом этапе даже вы понимаете что проект не взлетит, и промдизайн летающего ТС в виде топора очевиден только вам, попробуйте мягко убедиться в том что вы поняли все верно (селф-тест на дурака): наглядно представьте топор заказчику. Если ваш оппонент не видит ничего зазорного в происходящем — акститесь, лучше отказаться, чем получить минус в карму.
Шаг 2. Пилим сырые прототипы, изучаем конкурентов & составляем CJM
На этом этапе я обсуждаю с командой и заказчиком сырые прототипы. Все происходящее постепенно обрастает подробностями. И как раз тут нужен профессионализм всех участников. В этот момент понимаешь, почему менеджер проектов, которому ты платишь 1500 в час, отрабатывает их на 150% — и даже немножечко больше.
Затем сравниваем то, что получилось, с конкурентами. Иногда они есть — но чаще всего нет. И даже похожего ничего нет. Стартапы — штука веселая, да. В таком случае ищем аналогии, другие сервисы со схожей моделью работы (и из других тематик тоже). Сравниваем логику, упрощаем, составляем листы сравнений с конкурентами и псевдоконкурентами, дорабатываем прототип.
Наступает время создавать CJM. Приветствую UX инженера, аналитика... И хотела бы я сказать, что снова ухожу пить кофе — но нет. Втроем мы собираем группы клиентов, согласовываем с заказчиком, вживаемся в роли/приглашаем респондентов, раскладываем прототипы и начинаем штормить. В подробностях посмотреть, как создавать CJM, можно, например, тут https://vc.ru/marketing/96029-instrukciya-po-sostavleniyu-customer-journey-map-cjm. Созданию CJM я могу посвятить отдельный лонгрид и это обязательно когда-нибудь произойдет.