Изучите основы UI дизайна на примере фильмов
Фильмы, как вид искусства, были широко распространены в нашем обществе задолго до того, как люди начали изучать визуальный дизайн или просто дизайн, как дисциплину. Первый фильм был выпущен в 1888 году под названием «Сцена в саду Раундхей». Это был короткий немой фильм (2 секунды), записанный французским изобретателем Луи Лепренсом.
С тех пор мир пережил множество революций, войн, изобретений и пандемий. Каждое из этих событий так или иначе оказало особое влияние на киноиндустрию, сделав ее такой, какой мы знаем ее сегодня.
С развитием визуальной коммуникации приходит и визуальный дизайн. Поскольку слово «дизайн» на самом деле относится к решению проблем, а не просто к созданию привлекательных артефактов, то каждая методика решения проблем имеет ряд фундаментальных законов / принципов / теорий / формул, на основе которых применяется этот метод. То же самое и с визуальным дизайном.
Фильмы, как вид искусства, были широко распространены в нашем обществе задолго до того, как люди начали изучать визуальный дизайн или просто дизайн, как дисциплину. Первый фильм был выпущен в 1888 году под названием «Сцена в саду Раундхей». Это был короткий немой фильм (2 секунды), записанный французским изобретателем Луи Лепренсом.
С тех пор мир пережил множество революций, войн, изобретений и пандемий. Каждое из этих событий так или иначе оказало особое влияние на киноиндустрию, сделав ее такой, какой мы знаем ее сегодня.
С развитием визуальной коммуникации приходит и визуальный дизайн. Поскольку слово «дизайн» на самом деле относится к решению проблем, а не просто к созданию привлекательных артефактов, то каждая методика решения проблем имеет ряд фундаментальных законов / принципов / теорий / формул, на основе которых применяется этот метод. То же самое и с визуальным дизайном.
В течение нескольких десятилетий развития кино как коммерческой индустрии, а также изучения искусства в колледжах, люди начали покупать билеты на шоу, через цифровые интерфейсы на своих девайсах. Эти девайсы было необходимо упростить в использовании и освоении, что само по себе являлось проблемой. Чтобы решить эту проблему, появилась новая дисциплина дизайна, а именно дизайн пользовательского интерфейса.
Хотя это не совсем та причина, которая привела к рождению совершенно новой области дизайна. Но это один из многих способов связи кино и UI дизайна. Давайте сразу перейдем к разбору основ UI дизайна на примере наших любимых фильмов.
Баланс
Это обыденная вещь, которую можно найти в любом стабильном дизайне, если только его умышленно не нарушили.
Баланс можно понимать, как распределение визуального веса объектов, цветов, текстур и пространства. Если на экране много контента, его следует сбалансировать, чтобы дизайн выглядел стабильным.
Симметрия – один из способов добиться баланса в визуальном дизайне. Природа любит симметрию, поэтому и наши глаза тоже. Симметрично сбалансированные элементы помогают снизить шум от изображения и сделать его знакомым.
Режиссёры фильмов давно используют симметрию, как мощный инструмент для создания визуально стабильных кадров. Но баланса можно добиться и в несимметричных изображениях с помощью цветов, объектов, пространства и текстуры.
Чтобы сделать интерфейс сбалансированным, необходимо разместить элементы на холсте соответственно их весу, чтобы визуально стабилизировать все объекты, присутствующие на экране.
Баланс в пользовательском интерфейсе
Акцент (выделение)
Акцент используется в большинстве областей дизайна, включая архитектуру, ландшафтный дизайн и дизайн одежды. Кроме того, он активно используется в кинематографе. Создатели фильмов используют всевозможные методы, чтобы выделить объект, на который должны смотреть зрители.
Акцент – это стратегия, направленная на привлечение внимания зрителя к определенному элементу дизайна. Это может быть область контента, изображение, ссылка, кнопка и т. д.
В кино для создания акцента на элементе используется фокус, контраст и т. д. Это делается для того, чтобы рассказать часть истории, относящейся к выделенному объекту.
В UI дизайне также есть повествование. Когда мы хотим поместить элемент в фокус, мы выделяем его, используя один из нескольких методов.
Выделение элемента в UI дизайне
Иерархия
Каждый человек по-своему понимает смысл фильма. Наши выводы о фильме, зависят от того, какие фильмы мы смотрели долгое время, и от того, как они повлияли на нашу точку зрения. Режиссер не контролирует это, но, понимая простые модели поведения, он может контролировать, куда мы будем переводить взгляд с одной точки на другую.
Иерархия – это контроль визуальной информации посредством ее расположения или презентации, чтобы выделить главное. Она влияет на порядок, в котором человеческий глаз воспринимает увиденное.
В каждом фильме создатели применяют ту или иную форму иерархической схемы, чтобы переместить взгляд аудитории с одной точки на другую. Обычно это делается для того, чтобы рассказать историю в необходимом порядке.
Когда пользователи взаимодействуют через экраны, важно направить их внимание в правильном порядке. В хорошем дизайне элемент, который идет первым, должен иметь связь с последующим элементом, а любой последующий элемент должен быть связан со своим предшественником.
Большинство приложений и сайтов применяют этот принцип для размещения элементов в правильном порядке. Родительский элемент обычно помещается либо поверх дочернего, либо слева от него.
Элементы расположены в соответствии с иерархией
Повторение
Когда дело доходит до поиска закономерностей в неизвестных объектах, люди склонны придерживаться ритмов. Ритмы в изображении, звуке, видео формируются с помощью повторений в расположении элементов на экране.
Хотя это не совсем та причина, которая привела к рождению совершенно новой области дизайна. Но это один из многих способов связи кино и UI дизайна. Давайте сразу перейдем к разбору основ UI дизайна на примере наших любимых фильмов.
Баланс
Это обыденная вещь, которую можно найти в любом стабильном дизайне, если только его умышленно не нарушили.
Баланс можно понимать, как распределение визуального веса объектов, цветов, текстур и пространства. Если на экране много контента, его следует сбалансировать, чтобы дизайн выглядел стабильным.
Симметрия – один из способов добиться баланса в визуальном дизайне. Природа любит симметрию, поэтому и наши глаза тоже. Симметрично сбалансированные элементы помогают снизить шум от изображения и сделать его знакомым.
Режиссёры фильмов давно используют симметрию, как мощный инструмент для создания визуально стабильных кадров. Но баланса можно добиться и в несимметричных изображениях с помощью цветов, объектов, пространства и текстуры.
Чтобы сделать интерфейс сбалансированным, необходимо разместить элементы на холсте соответственно их весу, чтобы визуально стабилизировать все объекты, присутствующие на экране.
Баланс в пользовательском интерфейсе
Акцент (выделение)
Акцент используется в большинстве областей дизайна, включая архитектуру, ландшафтный дизайн и дизайн одежды. Кроме того, он активно используется в кинематографе. Создатели фильмов используют всевозможные методы, чтобы выделить объект, на который должны смотреть зрители.
Акцент – это стратегия, направленная на привлечение внимания зрителя к определенному элементу дизайна. Это может быть область контента, изображение, ссылка, кнопка и т. д.
В кино для создания акцента на элементе используется фокус, контраст и т. д. Это делается для того, чтобы рассказать часть истории, относящейся к выделенному объекту.
В UI дизайне также есть повествование. Когда мы хотим поместить элемент в фокус, мы выделяем его, используя один из нескольких методов.
Выделение элемента в UI дизайне
Иерархия
Каждый человек по-своему понимает смысл фильма. Наши выводы о фильме, зависят от того, какие фильмы мы смотрели долгое время, и от того, как они повлияли на нашу точку зрения. Режиссер не контролирует это, но, понимая простые модели поведения, он может контролировать, куда мы будем переводить взгляд с одной точки на другую.
Иерархия – это контроль визуальной информации посредством ее расположения или презентации, чтобы выделить главное. Она влияет на порядок, в котором человеческий глаз воспринимает увиденное.
В каждом фильме создатели применяют ту или иную форму иерархической схемы, чтобы переместить взгляд аудитории с одной точки на другую. Обычно это делается для того, чтобы рассказать историю в необходимом порядке.
Когда пользователи взаимодействуют через экраны, важно направить их внимание в правильном порядке. В хорошем дизайне элемент, который идет первым, должен иметь связь с последующим элементом, а любой последующий элемент должен быть связан со своим предшественником.
Большинство приложений и сайтов применяют этот принцип для размещения элементов в правильном порядке. Родительский элемент обычно помещается либо поверх дочернего, либо слева от него.
Элементы расположены в соответствии с иерархией
Повторение
Когда дело доходит до поиска закономерностей в неизвестных объектах, люди склонны придерживаться ритмов. Ритмы в изображении, звуке, видео формируются с помощью повторений в расположении элементов на экране.
Принцип повторения просто означает повторное использование в дизайне одних и тех же или похожих элементов. Повторение определенных элементов дизайна принесет ощущение единства, последовательности и связности.
Этот принцип важен в кино, как и в любой другой области дизайна. Режиссеры фильма используют повторение элементов для формирования визуального ритма. Паттерн – это просто повторение нескольких элементов дизайна, работающих во взаимодействии друг с другом.
Человек, разбирающийся в дизайне, может легко заметить, насколько красиво Кристоферу Нолану удается связать повествование с визуальным ритмом. В то время, как Уэс Андерсон делает больший акцент на ритме, даже не осведомленная об этих принципах аудитория, также может легко их увидеть.
Точно так же повторение в интерфейсах создает визуальный ритм, который помогает пользователю находить закономерности, тем самым заставляя пользователя оставаться на платформе, т.е. более активно с ней взаимодействовать. Списки, меню, сообщения и т. д. – вот примеры разделов, в которых повторение очевидно.
Повторение в пользовательском интерфейсе
Близость
Когда мы смотрим историю, важно понимать, что она собой представляет, чтобы определить ее смысл. Близость в кинематографе играет жизненно важную роль, когда что-то нужно отделить от всего остального, чтобы в данный момент сделать это центральным предметом.
Принцип близости – это процесс обеспечения того, чтобы связанные элементы дизайна были размещены вместе. Непосредственная близость указывает на то, что элементы связаны друг с другом и становятся одной визуальной единицей, которая помогает организовать или структурировать макет.
В кино это можно сделать с помощью цветов, техники фокусировки и расположения объектов. Режиссерам доступно другое измерение, поскольку им помогает ось Z.
Однако, несмотря на развитие 3D в интерфейсах, большинство из них использует 2D-макеты, поэтому они могут легко работать на любом экране. Таким образом, пространство, стили и формы становятся важными при формировании близости внутри объектов в интерфейсе.
Близость в пользовательском интерфейсе
Пропорция
Обычно на холсте может быть много элементов, занимающих любую часть экрана. Но необходимо убедиться, что количество места на холсте, которое они занимают в данный момент, имеет большое значение с точки зрения истории, это хороший дизайн!
Пропорция – это соотношение двух или более элементов в композиции и то, как они соотносятся друг с другом по размеру, цвету, количеству, степени, настройке и т.д.
Если конкретный элемент занимает больше места, чем необходимо, он напрямую влияет на иерархию и не может передать необходимую информацию. Персонажу или объекту предоставляется место на холсте, необходимое в данный момент для истории, также, как и элементам пользовательского интерфейса.
Было бы ужасно, если бы окно чата поддержки занимало ту же ширину, что и панель навигации, или если бы логотип Amazon занимал, то же пространство, что и строка поиска. Пропорция имеет прямую связь с иерархией. Они играют свою роль в поддержке друг друга по сюжетной линии.
Пропорции в UI дизайне
Вот так мы разобрали принципы визуального дизайна на примере фильмов. Упомянутые в этой статье киноленты, одни из моих любимых, и я рекомендую вам их посмотреть, если вы еще не сделали это. Я стараюсь подмечать эти принципы в любом фильме, который смотрю. Я бы порекомендовал вам следующее. Когда вы будете смотреть фильм или сериал, и вам понравится визуальный ряд, поставьте видео на паузу, и проведите быстрый анализ, почему он выглядит так хорошо, и есть ли в нем вышеперечисленные принципы дизайна. Думаю, теперь стало немного яснее, как взаимосвязаны все дисциплины дизайна.
Интересный факт: все шесть принципов существуют в пользовательских интерфейсах и упомянутых фильмах, даже если они не говорят о них напрямую. Если вы не заметили их, попробуйте еще раз, это весело.
Источник
Этот принцип важен в кино, как и в любой другой области дизайна. Режиссеры фильма используют повторение элементов для формирования визуального ритма. Паттерн – это просто повторение нескольких элементов дизайна, работающих во взаимодействии друг с другом.
Человек, разбирающийся в дизайне, может легко заметить, насколько красиво Кристоферу Нолану удается связать повествование с визуальным ритмом. В то время, как Уэс Андерсон делает больший акцент на ритме, даже не осведомленная об этих принципах аудитория, также может легко их увидеть.
Точно так же повторение в интерфейсах создает визуальный ритм, который помогает пользователю находить закономерности, тем самым заставляя пользователя оставаться на платформе, т.е. более активно с ней взаимодействовать. Списки, меню, сообщения и т. д. – вот примеры разделов, в которых повторение очевидно.
Повторение в пользовательском интерфейсе
Близость
Когда мы смотрим историю, важно понимать, что она собой представляет, чтобы определить ее смысл. Близость в кинематографе играет жизненно важную роль, когда что-то нужно отделить от всего остального, чтобы в данный момент сделать это центральным предметом.
Принцип близости – это процесс обеспечения того, чтобы связанные элементы дизайна были размещены вместе. Непосредственная близость указывает на то, что элементы связаны друг с другом и становятся одной визуальной единицей, которая помогает организовать или структурировать макет.
В кино это можно сделать с помощью цветов, техники фокусировки и расположения объектов. Режиссерам доступно другое измерение, поскольку им помогает ось Z.
Однако, несмотря на развитие 3D в интерфейсах, большинство из них использует 2D-макеты, поэтому они могут легко работать на любом экране. Таким образом, пространство, стили и формы становятся важными при формировании близости внутри объектов в интерфейсе.
Близость в пользовательском интерфейсе
Пропорция
Обычно на холсте может быть много элементов, занимающих любую часть экрана. Но необходимо убедиться, что количество места на холсте, которое они занимают в данный момент, имеет большое значение с точки зрения истории, это хороший дизайн!
Пропорция – это соотношение двух или более элементов в композиции и то, как они соотносятся друг с другом по размеру, цвету, количеству, степени, настройке и т.д.
Если конкретный элемент занимает больше места, чем необходимо, он напрямую влияет на иерархию и не может передать необходимую информацию. Персонажу или объекту предоставляется место на холсте, необходимое в данный момент для истории, также, как и элементам пользовательского интерфейса.
Было бы ужасно, если бы окно чата поддержки занимало ту же ширину, что и панель навигации, или если бы логотип Amazon занимал, то же пространство, что и строка поиска. Пропорция имеет прямую связь с иерархией. Они играют свою роль в поддержке друг друга по сюжетной линии.
Пропорции в UI дизайне
Вот так мы разобрали принципы визуального дизайна на примере фильмов. Упомянутые в этой статье киноленты, одни из моих любимых, и я рекомендую вам их посмотреть, если вы еще не сделали это. Я стараюсь подмечать эти принципы в любом фильме, который смотрю. Я бы порекомендовал вам следующее. Когда вы будете смотреть фильм или сериал, и вам понравится визуальный ряд, поставьте видео на паузу, и проведите быстрый анализ, почему он выглядит так хорошо, и есть ли в нем вышеперечисленные принципы дизайна. Думаю, теперь стало немного яснее, как взаимосвязаны все дисциплины дизайна.
Интересный факт: все шесть принципов существуют в пользовательских интерфейсах и упомянутых фильмах, даже если они не говорят о них напрямую. Если вы не заметили их, попробуйте еще раз, это весело.
Источник
Как сделать максимально качественную работу в короткие сроки
Недавно мне нужно было сделать презентацию компании перед важной встречей. Времени было мало. Я подумал, каким образом построить работу над этой задачей, чтобы точно успеть к сроку и сделать ее максимально качественно.
Сложность в следующем. Если на старте сильно погрузиться в дизайн презентации и подачу информации, могут получиться несколько красивых слайдов, но на всю презентацию не хватит времени. Но и с визуально слабой презентацией не хочется проводить встречу.
В ходе размышлений я выработал следующий метод:
Первым этапом (после написания текста) я просто раскидываю информацию по слайдам. В итоге довольно быстро получится готовая презентация, но без особого дизайна.
Второй этап — доработка стиля и подачи. Здесь я еже буду знать, что фактически презентация готова и могу использовать все оставшееся время, чтобы придать ей приятный вид.
В этом случае я избегаю популярной ошибки — слишком погрузиться в детали на старте, что приведет к срыву сроков и потере общей картины проекта.
—
Этот метод можно использовать в разных сферах. Сначала сделать проект полностью, но в среднем виде, а все оставшееся до дедлайна время использовать на доработку деталей.
Подумайте, где его можете применить вы.
Источник
Недавно мне нужно было сделать презентацию компании перед важной встречей. Времени было мало. Я подумал, каким образом построить работу над этой задачей, чтобы точно успеть к сроку и сделать ее максимально качественно.
Сложность в следующем. Если на старте сильно погрузиться в дизайн презентации и подачу информации, могут получиться несколько красивых слайдов, но на всю презентацию не хватит времени. Но и с визуально слабой презентацией не хочется проводить встречу.
В ходе размышлений я выработал следующий метод:
Первым этапом (после написания текста) я просто раскидываю информацию по слайдам. В итоге довольно быстро получится готовая презентация, но без особого дизайна.
Второй этап — доработка стиля и подачи. Здесь я еже буду знать, что фактически презентация готова и могу использовать все оставшееся время, чтобы придать ей приятный вид.
В этом случае я избегаю популярной ошибки — слишком погрузиться в детали на старте, что приведет к срыву сроков и потере общей картины проекта.
—
Этот метод можно использовать в разных сферах. Сначала сделать проект полностью, но в среднем виде, а все оставшееся до дедлайна время использовать на доработку деталей.
Подумайте, где его можете применить вы.
Источник
Medium
Как сделать максимально качественную работу в короткие сроки
Недавно мне нужно было сделать презентацию компании перед важной встречей. Времени было мало. Я подумал, каким образом построить работу…
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.