12 ошибок дизайна, которые были настолько плохими, что стали хорошими
Хороший дизайн требует много навыков, времени и энергии – он никогда не получается случайно. И очень важно помнить, что дизайн – он про четкое сообщение. Писатель или оратор должен выбрать идеальные слова для передачи своего сообщения. Точно так же и дизайнеры должны выбрать правильные визуальные элементы, которые передают именно то, что они хотят сказать.
Но иногда случаются интерпретации, которые никто не задумывал. Так происходит из-за недостатка исследования. Иногда эти ошибки могут быть настолько серьезными, что сторонние наблюдатели задаются вопросом: как вообще кто-то допустил этот дизайн.
Однако плохой дизайн может стать уроком, как не надо делать. Здесь мы собрали 12 огромных косяков в упаковке, UI и дизайне логотипа, которые предлагают всем нам поучиться.
01. Логотип OGC
Управление государственной торговли Великобритании существовало с 2000 по 2011 год. В 2007 году руководство поручило FHD разработать новый логотип, который продемонстрирует смелую приверженность компании продвижению стандартов.
Проблема заключалась в том, что разработанный логотип был напечатан на ручках, ковриках для мыши и всевозможных других канцелярских товарах, которые можно развернуть – и увидеть лого с разных сторон. Повернутый на 90 градусов логотип выглядит неприлично.
Невероятно, но управление решило оставить лого. Представитель даже пошутил:
«Это вполне приемлемо для организации, которая стремится жестко контролировать расходы правительства».
02. Flickering Lights
Первое правило дизайна: дайте другим людям посмотреть на финальную версию. Из-за неудачного подобранного кернинга L и I в упаковке Flickering lights превратились в U. Пробел бы не помешал.
03. Lisa Jackson Deserves to Die
Наверняка это прекрасный роман (и часть цикла), но важно уточнить сразу: Лиза Джексон – автор, Deserves to Die – название. Вот только на обложке мы читаем слитно – дизайнеры подали нам текст именно так.
Существует много способов установить иерархию текста – с помощью шрифта, толщины, цвета, расположения текста. Иногда нужно использовать больше одного. Здесь авторы решили ограничиться только заглавными буквами для автора. Помните, что дизайнер несет ответственность не только за внешний вид вещей, но и за их контекст и за то, как они будут прочитаны.
04. Tesco buttermilk
Один из главнейших косяков в создании упаковки достался Tesco. Казалось бы, просто кувшин с простоквашей, из которого льется простокваша. Но льющаяся простокваша разделяет рисунок… очень правильно. Фотография упаковки быстро стала вирусной.
Чему учит нас этот дизайн? Всегда делайте макет!
05. Mama’s Baking
В логотипах часто сочетаются идеи, взятые из названия или функции бренда. Эта пекарня в Греции объединила образ той самой мамы и печи, чтобы показать выпечку. Но получилось совсем по-другому. Трудно представить, что дизайнеры не поняли, как это выглядит.
Правда, пекарня до сих пор использует этот логотип – он принес им известность, так что почему бы и нет.
06. Ценности Thomson Reuters
Кажется, идея заключалась в том, чтобы показать: концепции слева – основные ценности группы. Но вышло как диаграмма Венна: ценности компании слегка пересекаются – а значит, им плевать на концепции слева.
The Washington Post даже похвалила компанию за ее честность в ироничном заголовке: «Компания признает, что она не новаторская». Урок здесь: всегда посмотрите со стороны, как ваше послание может выглядеть для других.
07. Where Milan
Состоятельные путешественники были бы немного озадачены, увидев это издание Where Milan. Размещение вырезанного фото поверх заголовка создает впечатление, что издатели ставят под сомнение репутацию собственной модели.
Это итальянское издание, поэтому дизайнеров, возможно, простят за то, что они не заметили ошибку при работе на иностранном языке. Но если вы нацелены на иностранный рынок, проверьте, что это может значить.
Хороший дизайн требует много навыков, времени и энергии – он никогда не получается случайно. И очень важно помнить, что дизайн – он про четкое сообщение. Писатель или оратор должен выбрать идеальные слова для передачи своего сообщения. Точно так же и дизайнеры должны выбрать правильные визуальные элементы, которые передают именно то, что они хотят сказать.
Но иногда случаются интерпретации, которые никто не задумывал. Так происходит из-за недостатка исследования. Иногда эти ошибки могут быть настолько серьезными, что сторонние наблюдатели задаются вопросом: как вообще кто-то допустил этот дизайн.
Однако плохой дизайн может стать уроком, как не надо делать. Здесь мы собрали 12 огромных косяков в упаковке, UI и дизайне логотипа, которые предлагают всем нам поучиться.
01. Логотип OGC
Управление государственной торговли Великобритании существовало с 2000 по 2011 год. В 2007 году руководство поручило FHD разработать новый логотип, который продемонстрирует смелую приверженность компании продвижению стандартов.
Проблема заключалась в том, что разработанный логотип был напечатан на ручках, ковриках для мыши и всевозможных других канцелярских товарах, которые можно развернуть – и увидеть лого с разных сторон. Повернутый на 90 градусов логотип выглядит неприлично.
Невероятно, но управление решило оставить лого. Представитель даже пошутил:
«Это вполне приемлемо для организации, которая стремится жестко контролировать расходы правительства».
02. Flickering Lights
Первое правило дизайна: дайте другим людям посмотреть на финальную версию. Из-за неудачного подобранного кернинга L и I в упаковке Flickering lights превратились в U. Пробел бы не помешал.
03. Lisa Jackson Deserves to Die
Наверняка это прекрасный роман (и часть цикла), но важно уточнить сразу: Лиза Джексон – автор, Deserves to Die – название. Вот только на обложке мы читаем слитно – дизайнеры подали нам текст именно так.
Существует много способов установить иерархию текста – с помощью шрифта, толщины, цвета, расположения текста. Иногда нужно использовать больше одного. Здесь авторы решили ограничиться только заглавными буквами для автора. Помните, что дизайнер несет ответственность не только за внешний вид вещей, но и за их контекст и за то, как они будут прочитаны.
04. Tesco buttermilk
Один из главнейших косяков в создании упаковки достался Tesco. Казалось бы, просто кувшин с простоквашей, из которого льется простокваша. Но льющаяся простокваша разделяет рисунок… очень правильно. Фотография упаковки быстро стала вирусной.
Чему учит нас этот дизайн? Всегда делайте макет!
05. Mama’s Baking
В логотипах часто сочетаются идеи, взятые из названия или функции бренда. Эта пекарня в Греции объединила образ той самой мамы и печи, чтобы показать выпечку. Но получилось совсем по-другому. Трудно представить, что дизайнеры не поняли, как это выглядит.
Правда, пекарня до сих пор использует этот логотип – он принес им известность, так что почему бы и нет.
06. Ценности Thomson Reuters
Кажется, идея заключалась в том, чтобы показать: концепции слева – основные ценности группы. Но вышло как диаграмма Венна: ценности компании слегка пересекаются – а значит, им плевать на концепции слева.
The Washington Post даже похвалила компанию за ее честность в ироничном заголовке: «Компания признает, что она не новаторская». Урок здесь: всегда посмотрите со стороны, как ваше послание может выглядеть для других.
07. Where Milan
Состоятельные путешественники были бы немного озадачены, увидев это издание Where Milan. Размещение вырезанного фото поверх заголовка создает впечатление, что издатели ставят под сомнение репутацию собственной модели.
Это итальянское издание, поэтому дизайнеров, возможно, простят за то, что они не заметили ошибку при работе на иностранном языке. Но если вы нацелены на иностранный рынок, проверьте, что это может значить.
08. Жевательные волосы, кожа и ногти CVS
Еще один шедевр упаковки. Это пищевая добавка от CVS, похоже, продается для Ганнибала Лектера. Авторы предполагают, что покупатель должен знать, как выглядит вся серия – и тогда понимает дизайн упаковки. С другими добавками не возникает проблем – например, «жевательный витамин С» звучит вполне нормально.
Но для конкретно этой упаковки стоило уточнить, что это жевательные таблетки.
09. Фотография выпускников
Очевидно, это реклама услуги фотосъемки на выпускной. Но что означают все эти символы? Стала на карьерный путь? Свет как символ надежды? Каким бы ни было первоначальное намерение, нельзя отрицать тот факт, что эта выпускница не слишком обрадована своими перспективами на современном рынке труда. Кажется, она готова закончить все, прыгнув под идущий навстречу поезд.
Цветовые тона и даже выбор шрифта только подтверждают впечатление. Всегда учитывайте настроение, которое вы хотите передать, и убедитесь, что в сообщении присутствуют цвета, изображения и текст.
10. Волшебная палка для селфи
Графические дизайнеры, производящие рекламные материалы и изображения для технических инструкций, могут извлечь выгоду из четкого понимания того, как на самом деле работает продукт, который они изображают.
Как люди разберутся в продукте, если он даже в документах показан неправильно?
11. Дышащие шорты Outon
Эти велошорты позволят вам выпускать газы во время езды на велосипеде. Это отличная функция, правда? Иначе как объяснить облачко, выходящее из задней части.
Иногда дизайнерам стоит понять, что дизайн вообще не нужен. Передать сообщение можно просто с помощью сопроводительного текста.
12. Формат даты
Небольшая ошибка пользовательского интерфейса в конце этой подборки. Непонятно, почему в разных странах мира приняты разные визуальные передачи даты и это всегда проблема, но дизайнер точно должен был продумать все. Например, убрать лишние две строки.
Источник
Еще один шедевр упаковки. Это пищевая добавка от CVS, похоже, продается для Ганнибала Лектера. Авторы предполагают, что покупатель должен знать, как выглядит вся серия – и тогда понимает дизайн упаковки. С другими добавками не возникает проблем – например, «жевательный витамин С» звучит вполне нормально.
Но для конкретно этой упаковки стоило уточнить, что это жевательные таблетки.
09. Фотография выпускников
Очевидно, это реклама услуги фотосъемки на выпускной. Но что означают все эти символы? Стала на карьерный путь? Свет как символ надежды? Каким бы ни было первоначальное намерение, нельзя отрицать тот факт, что эта выпускница не слишком обрадована своими перспективами на современном рынке труда. Кажется, она готова закончить все, прыгнув под идущий навстречу поезд.
Цветовые тона и даже выбор шрифта только подтверждают впечатление. Всегда учитывайте настроение, которое вы хотите передать, и убедитесь, что в сообщении присутствуют цвета, изображения и текст.
10. Волшебная палка для селфи
Графические дизайнеры, производящие рекламные материалы и изображения для технических инструкций, могут извлечь выгоду из четкого понимания того, как на самом деле работает продукт, который они изображают.
Как люди разберутся в продукте, если он даже в документах показан неправильно?
11. Дышащие шорты Outon
Эти велошорты позволят вам выпускать газы во время езды на велосипеде. Это отличная функция, правда? Иначе как объяснить облачко, выходящее из задней части.
Иногда дизайнерам стоит понять, что дизайн вообще не нужен. Передать сообщение можно просто с помощью сопроводительного текста.
12. Формат даты
Небольшая ошибка пользовательского интерфейса в конце этой подборки. Непонятно, почему в разных странах мира приняты разные визуальные передачи даты и это всегда проблема, но дизайнер точно должен был продумать все. Например, убрать лишние две строки.
Источник
Дизайн, призванный защитить людей от самих себя
«А что вы делаете, чтобы «спасти пользователей от самих себя…» Основные идеи в виде статьи.
Этот список не является исчерпывающим: есть еще миллион примеров программ, спасающих людей от совершения ошибок, неуверенности и невежества.
Содержание статьи
Сохраняйте черновик контента
Предупреждение перед деструктивным действием
Отмена
Магическая отмена
Сканирование контента
Сканирование кода
Разумные настройки по умолчанию
Цели нажатия
Цифровая зависимость
Повторяющиеся точки входа
Предупреждения об уровне громкости
Возрастные ограничения, предупреждения о NSFW-контенте
Затемнение спойлера
Тряска ярости
Предотвращение распространения дезинформации
Поощрение вежливости, снижение токсичности
Для чтения по теме
Читать статью: https://ux.pub/dizayn-prizvannyy-zaschitit-lyudey-ot-samih-sebya/
«А что вы делаете, чтобы «спасти пользователей от самих себя…» Основные идеи в виде статьи.
Этот список не является исчерпывающим: есть еще миллион примеров программ, спасающих людей от совершения ошибок, неуверенности и невежества.
Содержание статьи
Сохраняйте черновик контента
Предупреждение перед деструктивным действием
Отмена
Магическая отмена
Сканирование контента
Сканирование кода
Разумные настройки по умолчанию
Цели нажатия
Цифровая зависимость
Повторяющиеся точки входа
Предупреждения об уровне громкости
Возрастные ограничения, предупреждения о NSFW-контенте
Затемнение спойлера
Тряска ярости
Предотвращение распространения дезинформации
Поощрение вежливости, снижение токсичности
Для чтения по теме
Читать статью: https://ux.pub/dizayn-prizvannyy-zaschitit-lyudey-ot-samih-sebya/
UXPUB 🇺🇦 Дизайн-спільнота
Дизайн, призванный защитить людей от самих себя
Что вы делаете, чтобы спасти пользователей от самих себя? Мы записали подкаст с ответами, и теперь публикуем основные идеи в виде статьи
Иллюзия свечения или почему белые объекты кажутся больше черных
Малоизвестная оптическая иллюзия, которую должен знать каждый дизайнер.
Если вы когда-либо проектировали логотип, вам, вероятно, приходилось тестировать его как на белом, так и на темном фоне. Это хорошая практика, поскольку вы хотите, чтобы логотип выглядел одинаково на любом фоне.
Большинство людей думают, что все, что вам нужно сделать –это инвертировать цвета. Но… это не так. Происходит что-то странное: логотип выглядит «толще» в белом цвете.
В приведенном выше примере обводка символа белого логотипа кажется толще. Это особенно заметно, если сравнить два штриха в форме листа в центре. Но, верите вы или нет – толщина штриха на обоих символах одинакова.
Инвертирование цветов привело к тому, что тот же логотип стал выглядеть так, будто он прибавил в весе! Странно, правда? Эта иллюзия называется иллюзией излучения.
Читать статью: https://ux.pub/illyuziya-svecheniya-ili-pochemu-belye-obekty-kazhutsya-bolshe-chernyh/
Малоизвестная оптическая иллюзия, которую должен знать каждый дизайнер.
Если вы когда-либо проектировали логотип, вам, вероятно, приходилось тестировать его как на белом, так и на темном фоне. Это хорошая практика, поскольку вы хотите, чтобы логотип выглядел одинаково на любом фоне.
Большинство людей думают, что все, что вам нужно сделать –это инвертировать цвета. Но… это не так. Происходит что-то странное: логотип выглядит «толще» в белом цвете.
В приведенном выше примере обводка символа белого логотипа кажется толще. Это особенно заметно, если сравнить два штриха в форме листа в центре. Но, верите вы или нет – толщина штриха на обоих символах одинакова.
Инвертирование цветов привело к тому, что тот же логотип стал выглядеть так, будто он прибавил в весе! Странно, правда? Эта иллюзия называется иллюзией излучения.
Читать статью: https://ux.pub/illyuziya-svecheniya-ili-pochemu-belye-obekty-kazhutsya-bolshe-chernyh/
10 лучших приемов в Figma или как вырасти до уровня Senior
Иногда требуется всего несколько небольших изменений в работе, чтобы быстро повысить свой профессиональный уровень. Эти советы помогут вам ускорить рабочий процесс и добиться высшего качества созданных вами проектов. Возможно, кому-то они покажутся очевидными. Но трюк в том, что мы чаще всего отмахиваемся именно от самых очевидных советов, хотя они и лежат в основе профессионального роста.
1. Используйте компоненты для создания наборов элементов
Когда нужно создать большое количество вариантов кнопок, полей ввода и так далее, вам может потребоваться куча драгоценного времени. Что если вы решите, что радиус скругления 8 пикселей выглядит лучше, чем 12, или захотите внести другие корректировки.
Используя родительские компоненты для создания различных вариантов и состояний, мы можем упростить эту задачу. Потребуется внести одну корректировку в родительский компонент, и она приведет к изменениям во всех дочерних компонентах.
Для этого создайте родительский компонент со всеми характеристиками, текстом и иконками, которые присутствуют во всех вариантах. После чего в дочерних компонентах вам нужно будет лишь скрыть ненужные элементы.
Сами родительские компоненты необязательно должны быть частью дизайна, их можно разместить рядом на той же странице или во фрейме. Используйте «.» или «_» в названии, чтобы предотвратить их размещение как часть библиотеки компонентов.
2. Сохраняйте файлы с обложками
При большом количестве проектов бывает трудно найти нужный файл в Figma.
Создание обложки – это простое и действенное решение, которое позволит сделать проекты узнаваемыми и упростит их поиск.
Все, что нужно для создания обложки:
Создайте страницу в документе и назовите ее «Обложка» (как вариант, но не обязательно)
Нарисуйте фрейм для изображения обложки (лучший размер для этого – 1920 x 960).
Наполните обложку такими элементами дизайна, как логотип или другими символическими изображениями, которые помогут вам и вашей команде узнать проект.
Щелкните на фрейм правой кнопкой мыши и выберите «Set as thumbnail» (Установить, как миниатюру).
3. Используйте стили буквально для всего
Воспринимайте стили как компоненты для цвета, текста, эффектов и обводки.
Когда мы создаем дизайн с использованием стилей, можно без потери времени поэкспериментировать с обводкой, текстом и цветом во всех элементах дизайна с примененным стилем. Одно быстрое изменение и дизайн автоматически обновится во всех экземплярах, на которые ссылается этот стиль.
Использовать пипетку и просто заливать цвета там, где они нам нужны – заманчиво, но я настоятельно рекомендую использовать эту передовую практику как можно чаще. Стили избавят нас от головной боли и позволят делать исправления моментально.
Кроме того, если вы хотите организовать свои компоненты в папки, например «Brand Colors», используйте слэш для разделения названия: Brand Colors / Primary.
4. Организовывайте наборы вариантов с помощью Auto Layout
Знаете ли вы, что можно организовать варианты элементов с использованием автоматического макета? Выделите нажатием фрейм с набором вариантов и нажмите Shift + A. С Auto Layout очень просто упорядочить компоненты.
Это плавно подводит нас к следующему пункту.
Иногда требуется всего несколько небольших изменений в работе, чтобы быстро повысить свой профессиональный уровень. Эти советы помогут вам ускорить рабочий процесс и добиться высшего качества созданных вами проектов. Возможно, кому-то они покажутся очевидными. Но трюк в том, что мы чаще всего отмахиваемся именно от самых очевидных советов, хотя они и лежат в основе профессионального роста.
1. Используйте компоненты для создания наборов элементов
Когда нужно создать большое количество вариантов кнопок, полей ввода и так далее, вам может потребоваться куча драгоценного времени. Что если вы решите, что радиус скругления 8 пикселей выглядит лучше, чем 12, или захотите внести другие корректировки.
Используя родительские компоненты для создания различных вариантов и состояний, мы можем упростить эту задачу. Потребуется внести одну корректировку в родительский компонент, и она приведет к изменениям во всех дочерних компонентах.
Для этого создайте родительский компонент со всеми характеристиками, текстом и иконками, которые присутствуют во всех вариантах. После чего в дочерних компонентах вам нужно будет лишь скрыть ненужные элементы.
Сами родительские компоненты необязательно должны быть частью дизайна, их можно разместить рядом на той же странице или во фрейме. Используйте «.» или «_» в названии, чтобы предотвратить их размещение как часть библиотеки компонентов.
2. Сохраняйте файлы с обложками
При большом количестве проектов бывает трудно найти нужный файл в Figma.
Создание обложки – это простое и действенное решение, которое позволит сделать проекты узнаваемыми и упростит их поиск.
Все, что нужно для создания обложки:
Создайте страницу в документе и назовите ее «Обложка» (как вариант, но не обязательно)
Нарисуйте фрейм для изображения обложки (лучший размер для этого – 1920 x 960).
Наполните обложку такими элементами дизайна, как логотип или другими символическими изображениями, которые помогут вам и вашей команде узнать проект.
Щелкните на фрейм правой кнопкой мыши и выберите «Set as thumbnail» (Установить, как миниатюру).
3. Используйте стили буквально для всего
Воспринимайте стили как компоненты для цвета, текста, эффектов и обводки.
Когда мы создаем дизайн с использованием стилей, можно без потери времени поэкспериментировать с обводкой, текстом и цветом во всех элементах дизайна с примененным стилем. Одно быстрое изменение и дизайн автоматически обновится во всех экземплярах, на которые ссылается этот стиль.
Использовать пипетку и просто заливать цвета там, где они нам нужны – заманчиво, но я настоятельно рекомендую использовать эту передовую практику как можно чаще. Стили избавят нас от головной боли и позволят делать исправления моментально.
Кроме того, если вы хотите организовать свои компоненты в папки, например «Brand Colors», используйте слэш для разделения названия: Brand Colors / Primary.
4. Организовывайте наборы вариантов с помощью Auto Layout
Знаете ли вы, что можно организовать варианты элементов с использованием автоматического макета? Выделите нажатием фрейм с набором вариантов и нажмите Shift + A. С Auto Layout очень просто упорядочить компоненты.
Это плавно подводит нас к следующему пункту.
5. Используйте Auto Layout для всего
Auto Layout – один из самых важных навыков, которым должен обладать любой современный UI-дизайнер.
Auto Layout полностью меняет правила игры в продуктовом дизайне. Он позволяет более точно подходить к разработке продукта, и поддерживаться согласованности и масштабируемости в проектном файле.
Разрабатывая дизайна с применением Auto Layout, мы можем значительно сэкономить время на удалении содержимого, добавлении содержимого, построении строк с похожим содержимым, создании адаптивных компонентов и многом другом.
Я разрабатываю каждую страницу, используя Auto Layout. Это дает возможность быстро регулировать интервалы или добавлять и удалять контент. Поэтому нет необходимости передвигать элементы попиксельно для их выравнивания и тратить на этот процесс лишнее время.
6. Создавайте блок-схемы для экранов
По мере того как проектные файлы растут, в них могут легко запутаться другие люди, которые не сидят над этим дизайном изо дня в день.
Чтобы облегчить процесс восприятия дизайна для клиента или коллеги, вы можете показать процесс работы программы, продемонстрировав блок-схемы.
Для этого я использую не очень известный прием – просто скопируйте и вставьте коннектор из FigJam в Figma. После этой манипуляции все функции коннектора сохранятся, и вы сможете видоизменять его на свое усмотрение. Это очень удобный способ создания блок-схем для демонстрации и визуализации работы приложения.
7. Используйте функцию Сonstraints (Ограничения)
Чтобы фрейм оставался организованным и адаптируемым, используйте Constraints. Эта функция отвечает за то, как будут реагировать объекты, когда мы изменим размер их фреймов в Figma. Constraints помогают контролировать внешний вид дизайна на экранах разных размеров и на разных устройствах. Это облегчит работу и избавит нас от необходимости вносить коррективы каждый раз, когда нужно изменить размер фрейма.
Если вы когда-нибудь захотите проигнорировать Constraints, устанавливающие ограничения для объектов в фрейме, все, что нужно сделать, это удерживать CMD или CTRL в процессе изменении размера фрейма.
8. Создавайте макеты для компонентов
Создание компонента для карточки — это здорово, но что делать, если нужен целый список карточек? Вот где пригодятся макеты. Они сэкономят массу времени и облегчат нам жизнь.
Идея макетов была популяризирована Брэдом Фростом в книге «Методология атомарного дизайна», и это довольно простая концепция.
Вот как это работает: допустим, у нас есть компонент и это сообщения в блоге. Этот компонент содержит изображение и текст. Что ж, мы могли бы клонировать компонент и разместить его в десяти экземплярах на каждом артборде, где должен быть список блогов.
Или мы можем создать макет блога, а затем поместить этот макет в файл проекта. Теперь, когда будет нужно добавить контент или внести изменения в пространство между компонентами, это можно настроить в родительском макете блога.
9. Организация компонентов
Нет ничего хуже, чем открыть чужой дизайн-файл и понять, что у вас нет возможности внести изменения в основные компоненты, не прибегая к щелканью правой кнопкой мыши и нажатию на «Go to the main component». Эта проблема возникает тогда, когда компоненты не организованны отдельно от дизайна.
Это отсутствие организации обязательно приведет к лишним действиям и трате времени. Поэтому я всегда рекомендую перемещать все родительские компоненты на предназначенную для них страницу или в отдельное место в проектном файле. Это упрощает изменение компонентов и обнаружение несоответствий. Еще лучше, когда дизайнеры организуют свои компоненты с помощью заголовков. Например, отдельная страница для кнопок, цветовых стилей, полей ввода и так далее.
Чем лучше будут выглядеть дизайн-файлы, тем лучше будут выглядеть сами дизайны.
Auto Layout – один из самых важных навыков, которым должен обладать любой современный UI-дизайнер.
Auto Layout полностью меняет правила игры в продуктовом дизайне. Он позволяет более точно подходить к разработке продукта, и поддерживаться согласованности и масштабируемости в проектном файле.
Разрабатывая дизайна с применением Auto Layout, мы можем значительно сэкономить время на удалении содержимого, добавлении содержимого, построении строк с похожим содержимым, создании адаптивных компонентов и многом другом.
Я разрабатываю каждую страницу, используя Auto Layout. Это дает возможность быстро регулировать интервалы или добавлять и удалять контент. Поэтому нет необходимости передвигать элементы попиксельно для их выравнивания и тратить на этот процесс лишнее время.
6. Создавайте блок-схемы для экранов
По мере того как проектные файлы растут, в них могут легко запутаться другие люди, которые не сидят над этим дизайном изо дня в день.
Чтобы облегчить процесс восприятия дизайна для клиента или коллеги, вы можете показать процесс работы программы, продемонстрировав блок-схемы.
Для этого я использую не очень известный прием – просто скопируйте и вставьте коннектор из FigJam в Figma. После этой манипуляции все функции коннектора сохранятся, и вы сможете видоизменять его на свое усмотрение. Это очень удобный способ создания блок-схем для демонстрации и визуализации работы приложения.
7. Используйте функцию Сonstraints (Ограничения)
Чтобы фрейм оставался организованным и адаптируемым, используйте Constraints. Эта функция отвечает за то, как будут реагировать объекты, когда мы изменим размер их фреймов в Figma. Constraints помогают контролировать внешний вид дизайна на экранах разных размеров и на разных устройствах. Это облегчит работу и избавит нас от необходимости вносить коррективы каждый раз, когда нужно изменить размер фрейма.
Если вы когда-нибудь захотите проигнорировать Constraints, устанавливающие ограничения для объектов в фрейме, все, что нужно сделать, это удерживать CMD или CTRL в процессе изменении размера фрейма.
8. Создавайте макеты для компонентов
Создание компонента для карточки — это здорово, но что делать, если нужен целый список карточек? Вот где пригодятся макеты. Они сэкономят массу времени и облегчат нам жизнь.
Идея макетов была популяризирована Брэдом Фростом в книге «Методология атомарного дизайна», и это довольно простая концепция.
Вот как это работает: допустим, у нас есть компонент и это сообщения в блоге. Этот компонент содержит изображение и текст. Что ж, мы могли бы клонировать компонент и разместить его в десяти экземплярах на каждом артборде, где должен быть список блогов.
Или мы можем создать макет блога, а затем поместить этот макет в файл проекта. Теперь, когда будет нужно добавить контент или внести изменения в пространство между компонентами, это можно настроить в родительском макете блога.
9. Организация компонентов
Нет ничего хуже, чем открыть чужой дизайн-файл и понять, что у вас нет возможности внести изменения в основные компоненты, не прибегая к щелканью правой кнопкой мыши и нажатию на «Go to the main component». Эта проблема возникает тогда, когда компоненты не организованны отдельно от дизайна.
Это отсутствие организации обязательно приведет к лишним действиям и трате времени. Поэтому я всегда рекомендую перемещать все родительские компоненты на предназначенную для них страницу или в отдельное место в проектном файле. Это упрощает изменение компонентов и обнаружение несоответствий. Еще лучше, когда дизайнеры организуют свои компоненты с помощью заголовков. Например, отдельная страница для кнопок, цветовых стилей, полей ввода и так далее.
Чем лучше будут выглядеть дизайн-файлы, тем лучше будут выглядеть сами дизайны.
10. Используйте Loom
Что такое Loom? Loom позволяет записывать экран и быстро отправлять видео. Он очень выручает, когда не совпадает время для обсуждения дизайна или вам приходиться набирать большое количество текста. Это незаменимый инструмент для удаленной работы. Loom сэкономит вам бесчисленное количество встреч и сохранит бесценное время, которые вы можете потратить на дизайн.
Если ваша команда находится в разных часовых поясах, у вас сумасшедшие графики, нет офиса или просто не можете поболтать – попробуйте использовать Loom.
Источник
Что такое Loom? Loom позволяет записывать экран и быстро отправлять видео. Он очень выручает, когда не совпадает время для обсуждения дизайна или вам приходиться набирать большое количество текста. Это незаменимый инструмент для удаленной работы. Loom сэкономит вам бесчисленное количество встреч и сохранит бесценное время, которые вы можете потратить на дизайн.
Если ваша команда находится в разных часовых поясах, у вас сумасшедшие графики, нет офиса или просто не можете поболтать – попробуйте использовать Loom.
Источник
Сей-Хай
10 лучших приемов в Figma или как вырасти до уровня Senior – Сей-Хай
Иногда требуется всего несколько небольших изменений в работе, чтобы быстро повысить свой профессиональный уровень. Эти советы помогут вам ускорить
Использование реальных данных в Figma
Сейчас создается целая уйма программного обеспечения и инструментов для преодоления разрыва между проектированием и разработкой. Важно продемонстрировать свою работу максимально близко к тому, как она будет выглядеть и функционировать в руках пользователей.
Когда я недавно присоединился к Echo, (онлайн-аптеке, отпускающей лекарства по рецептам Национальной службы здравоохранения Великобритании (NHS), я быстро понял, что создал собственную версию Lorem Ipsum. Это были названия лекарств и данные, по умолчанию используемые мной в работе. У пациентов могут быть тысячи различных типов и наименований лекарств, но я продолжал использовать парацетамол или ко-кодамол, когда пытался наполнить дизайны реальным контентом.
В рамках нашей проектной работы мы довольно часто ссылаемся на конкретное лекарство, форм-фактор и количество товара. Я хотел тестировать новые паттерны с реальной медицинской информацией, чтобы убедиться, что я проектирую не только для простого случая использования, но и для сложного контента.
Я решил попытаться найти способы использовать реальные данные в проектах Figma. Я быстро обнаружил, что, чтобы решить эту проблему, люди создали несколько полезных плагинов. Я хотел попробовать и протестировать легкое решение, которое бы идеально вписалось в наш процесс проектирования.
Я нашел плагин Figma, который называется Google sheets sync, и по названию понятно, что он делает. Он позволяет синхронизировать данные в таблице Google с определенными слоями в ваших проектах. Его создал Dave Williames, дизайнер и разработчик из Австралии. Вы можете узнать о подробностях работы плагина здесь.
Видео — Плагин для Figma Google Sheets Sync.
Я приступил к созданию Google-таблицы, заполненной данными о разных лекарствах. У дизайнера в нашей команде имелся обширный список лекарств, форм-факторов, количества и т. д. Он любезно помог мне заполнить мою таблицу, и в итоге мы получили довольно обширный список лекарств, доступных в Echo.
Перейдя в Figma, я взял карточку из юзерфлоу, над которым недавно работал, и начал переименовывать слои в соответствии со столбцами в Google-таблице. Добавление символа “#”, а затем имени столбца сигнализирует плагину, где данные должны быть синхронизированы в Figma, и с каким столбцом из Google Sheet.
По умолчанию он извлекал данные в последовательном порядке. Поэтому каждый раз, когда плагин запускался, один и тот же набор данных в том же порядке заполнял дизайн. К счастью, это учтено в плагине, и добавление родительского фрейма или группы с «.x» приводит к случайному индексу.
Плагин хорошо работал, и всякий раз при его запуске добавлялись различные данные лекарств, что позволяло нам быстро и легко проводить стресс-тесты наших дизайнов.
Мы также используем кастомный шрифт иконки, имеющий обширную иконографию лекарств. Поэтому, если вы напечатаете «syringe» (шприц), включив шрифт иконки, иконка шприца автоматически добавится в текстовое поле. Это значит, что мы можем выбрать правильную иконку в Google-таблице и просто синхронизировать ее. Наши иконки привязаны к конкретным лекарствам, поэтому отлично подходят для нашего рабочего процесса.
Это всего лишь небольшой шаг, но он определенно помог приблизить мои дизайны к среде, в которой с ними будут работать клиенты. Я начал использовать этот рабочий процесс в нескольких проектах, и он упростил запуск стресс-тестов дизайнов на разных платформах с использованием реальных медицинских данных. Это лишь первые шаги на пути решения этой проблемы с другим контентом на Echo.
Источник
Сейчас создается целая уйма программного обеспечения и инструментов для преодоления разрыва между проектированием и разработкой. Важно продемонстрировать свою работу максимально близко к тому, как она будет выглядеть и функционировать в руках пользователей.
Когда я недавно присоединился к Echo, (онлайн-аптеке, отпускающей лекарства по рецептам Национальной службы здравоохранения Великобритании (NHS), я быстро понял, что создал собственную версию Lorem Ipsum. Это были названия лекарств и данные, по умолчанию используемые мной в работе. У пациентов могут быть тысячи различных типов и наименований лекарств, но я продолжал использовать парацетамол или ко-кодамол, когда пытался наполнить дизайны реальным контентом.
В рамках нашей проектной работы мы довольно часто ссылаемся на конкретное лекарство, форм-фактор и количество товара. Я хотел тестировать новые паттерны с реальной медицинской информацией, чтобы убедиться, что я проектирую не только для простого случая использования, но и для сложного контента.
Я решил попытаться найти способы использовать реальные данные в проектах Figma. Я быстро обнаружил, что, чтобы решить эту проблему, люди создали несколько полезных плагинов. Я хотел попробовать и протестировать легкое решение, которое бы идеально вписалось в наш процесс проектирования.
Я нашел плагин Figma, который называется Google sheets sync, и по названию понятно, что он делает. Он позволяет синхронизировать данные в таблице Google с определенными слоями в ваших проектах. Его создал Dave Williames, дизайнер и разработчик из Австралии. Вы можете узнать о подробностях работы плагина здесь.
Видео — Плагин для Figma Google Sheets Sync.
Я приступил к созданию Google-таблицы, заполненной данными о разных лекарствах. У дизайнера в нашей команде имелся обширный список лекарств, форм-факторов, количества и т. д. Он любезно помог мне заполнить мою таблицу, и в итоге мы получили довольно обширный список лекарств, доступных в Echo.
Перейдя в Figma, я взял карточку из юзерфлоу, над которым недавно работал, и начал переименовывать слои в соответствии со столбцами в Google-таблице. Добавление символа “#”, а затем имени столбца сигнализирует плагину, где данные должны быть синхронизированы в Figma, и с каким столбцом из Google Sheet.
По умолчанию он извлекал данные в последовательном порядке. Поэтому каждый раз, когда плагин запускался, один и тот же набор данных в том же порядке заполнял дизайн. К счастью, это учтено в плагине, и добавление родительского фрейма или группы с «.x» приводит к случайному индексу.
Плагин хорошо работал, и всякий раз при его запуске добавлялись различные данные лекарств, что позволяло нам быстро и легко проводить стресс-тесты наших дизайнов.
Мы также используем кастомный шрифт иконки, имеющий обширную иконографию лекарств. Поэтому, если вы напечатаете «syringe» (шприц), включив шрифт иконки, иконка шприца автоматически добавится в текстовое поле. Это значит, что мы можем выбрать правильную иконку в Google-таблице и просто синхронизировать ее. Наши иконки привязаны к конкретным лекарствам, поэтому отлично подходят для нашего рабочего процесса.
Это всего лишь небольшой шаг, но он определенно помог приблизить мои дизайны к среде, в которой с ними будут работать клиенты. Я начал использовать этот рабочий процесс в нескольких проектах, и он упростил запуск стресс-тестов дизайнов на разных платформах с использованием реальных медицинских данных. Это лишь первые шаги на пути решения этой проблемы с другим контентом на Echo.
Источник
