Сайт для VFX продакшена в Лос Анджелесе. Студия Павла Худякова
Рассказываю как делался сайт для известного видеопродакшена и какие есть подводные камни при технической реализации сайта с огромным количеством видеоматериала.
В 2022 году ко мне обратилась команда Hoody FX для редизайна текущего сайта. На тот момент в их портфолио были работы с McDonald's, Champion, Sony, Doja Cat, Samsung, Aeroflot, Fanta, AUDI, Ariana Grande и так далее
Это был небольшой лендосик, где по большей части были одни скриншоты работ (напоминаю, компания занимается видеопродакшеном, а именно VFX). В целом, все. Также это была просто верстка, то есть невозможно было добавлять какие-то новые работы из панели администратора. Ее просто не было.
Как-то так выглядело портфолио – скриншоты из видео, при наведении появляется название. В целом, это имеет место быть, но... Точно ли на сайте продакшена? Чуть позже разберемся
Работа с ретушью – это одно из главных направлений компании. Снова скриншоты, которые просто листаешь сам. На сайт они выгружены не в лучшем своем качестве
Если углубляться, и смотреть шоурилы конкурентов (например, Technicolor Group), то пользователю нативно понятно из видео, что такое VFX и как это работает по пальцам. У нас же нет этого объяснения по пальцам, – вместо этого видео с конечным результатом
В целом, это вся старая версия сайта, больше там ничего не было. Ни контактов, ни команды, ни описания направлений студии и других вещей, которые бы базово проинформировали пользователя о компании.
Личный бренд у компании сложился задолго до создания сайта, их работы гремели и без него.
Поэтому основная задача состояла в том, чтобы освежить дизайн, сделать удобный и понятный интерфейс, а также создать возможность добавлять работы в портфолио самостоятельно без привлечения программистов и иных сторонних специалистов. Самое главное – это кейсы, они должны быть рассортированы, и с 1 секунды цеплять взгляд пользователя.
Начинаем работу.
Что было сделано по пунктам:
Изучили деятельность компании (саму нишу), исследовали ЦА (в нашем случае это другие видеопродакшены, студии смежных направлений, которые буду заинтересованы в подряде) и конкурентов.
Сформулировали креативную концепцию. Мы перелопатили кучу референсов — изучили международные рейтинги сайтов нашей и смежных ниш, изучили все известные подборки сайтов, но и про конкурентов не забыли. По итогу мы имели внушительную коллекцию того «как надо», а вместе с этим — конкретное видение структуры и стиля. Сформировали визуальный код — простота структуры, лаконичность графики, ясность языка.
Приступили к написанию текстов. С учетом специфики ниши придерживались информационного стиля текста – главное, на что будет смотреть потребитель это визуал. Поэтому огромные полотна текста точно не в этот раз. Должно быть кратко, емко и по делу.
Оформили смыслы в дизайн-концепцию. Дизайн-макет получился удобным, очень простым в навигации.
Заранее для верстки подготовили все необходимые нарезки из видео и шоурилы. Основная цель этого пункта – отразить портфолио через небольшую демонстрацию видео. Мы отошли от идеи со скриншотами из видео.
Сделали адаптивную верстку на WordPress с гибкой панелью администратора. Теперь команда может добавлять видео на сайт самостоятельно в пару кликов, а также распределить видеоматериал в нужный каталог и поставить ему нужное динамичное превью с описанием.
Основные моменты при создании сайта:
Визуальный код компании должен остаться таким же. То есть в брендинг мы не лезем. Элементы фирменного стиля это то, что остается неизменным, и то с чем мы должны работать (хотя это усложняет задачу, потому что часто он становится неактуальным спустя время, например, как вышло у нас, либо он изначально был сделан посредственно другими дизайнерами).
За основной стиль взяли минимализм. Пространство не должно перебить форму. Простота структуры, легкость в навигации, лаконичность графики и ясность языка.
Заказчик выделил следующие сайты как референсы: https://a24films.com, https://www.hypestudios.com, http://www.calabasasmedia.com
Бриф и наша подборка референсов открыли дорогу к дизайну всех страниц, а заказчики со своей стороны подготовили демонстративный шоурил. Теперь при первом касании с сайтом было понятно, что перед нами студия визуальных эффектов. Была проведена работа с типографикой, а также обработка фонового видео (ниже пример).
50 оттенков типографики или как мы выбирали гарнитуру (тут без интерлиньяжа и других внутренних настроек шрифта, примеряли разные варианты с клиентом)
Разместили ключевые элементы (меню навигации) в легкодоступных местах. И протестировали на штате компании, чтобы убедиться в том, что он действительно прост в использовании. А вот и главный экран сайта:
За основу был взят информационный стиль текста – легко понимается, поскольку предоставляет собой прямую информацию без использования сложного языка или метафор. Также он позволяет пользователям быстро найти нужную информацию, что экономит время посетителя сайта и увеличивает удовлетворенность от его использования ресурса.
Вместо обычной фотографии на весь экран сделали слайдшоу из детализированных скриншотов с работами по направлению Beauty Work. Фотогалерею клиент может пополнять самостоятельно.
Каталог с работами – простой и удобный.
Во-первых, по сравнению с прошлой версией у нас есть появилась удобное разделение кейсов на три направления: рекламные ролики, клипы и фильмы (раньше был единый каталог).
Во-вторых, без какого-либо наведения на работу и появления текста при ховере мы сразу видим, что это за компания/артист/песни и т.д. (ранее название и компанию, для которой делался ролик, можно было узнать лишь при выполнении лишнего действия).
В-третьих, демонстрация превью, а именно самых ярких моментов из видеороликов, пришла на замену статичным скриншотам.
Каталог с работами на примере рекламных роликов:
Скорость считывания информации у пользователей увеличится – им не придется выполнять лишние действия в виде наведения на карточку с видео, чтобы узнать название; а также лишний раз включать ролик, чтобы понять настроение, мотив и посыл работы, ведь у каждой теперь есть превью.
Также были сделаны такие блоки как контактная информация, информация о трудоустройстве в компанию, клиенты компании и ее новости (последние выпущенные работы; автоматически подгружаются самые последние работы из каталога).
Например, ниже скриншот блока с новостями. Автоматически подгружаются последние работы из общего каталога с кейсами
Сложности при создании сайта, с которыми мы столкнулись
Все было бы хорошо, если бы это не был наш первый заказ в нише видеопродакшена. На тот момент они правда были первыми, а после этого я очень часто работала с видеопродакшенами.
Самая большая и сложная сложность – это огромное количество видеоматериала, который афигеть сколько весит. Как размещать на одной странице по 30 видео с превью, если каждый видеоролик весит по несколько ГБ? Мы не хотели оставлять скриншоты принципиально – это не про VFX, это не про обладаение формы над пространством. Нет. Расчет был как раз на то, что эти превью и перехватят все внимание пользователя.
Большая ошибка. Мы просто посмотрели по таймкодам какие моменты из роликов можно поставить на превью: сделали в панели администратора ячейку, чтобы в два клика можно было выставлять нужный промежуток времени. Итого, что получилось – ничего не грузит. Видео прогружается до момента с установленным таймкодом по 10-20 секунд. Чем дальше тот самый сочный момент из превью – тем дольше это все прогружалось. Пипец, подумали мы.Как решили? Наняли обычного монтажера, чтобы он сделал нам превью. Техническое задание простое – дали разрешение для превью (оно не превышало показатели в 600p, точно не вспомню), длительность не больше 10 секунд, выбираешь самые яркие моменты. В целом, все. Итого каждый кусочек видео весил в среднем не больше 10 Мб.
Также старались не размещать на одной странице большое количество видеороликов: на главной странице это реализовано как карусель из видео, а в каталоге у нас получилось достаточно большое скопление роликов, но разбитое на страницы (добавили пагинацию).
Кстати, сами видео вытянуты из Vimeo: работы заказчика изначально хранились там. Заглядывая в мои будущие кейсы также советую Dropbox, если рассматриваете облачное хранилище для подобных сайтов.
Панель администратора делали на WordPress. Свои задачи в части обновления контента она выполняет по сей день хорошо. Достаточно просто знать как работает редактирование страницы Вконтакте, чтобы отредактировать страницу на сайте в нашей панели администратора. Вот как она выглядела изнутри (наши с разработчиком скриншоты во время работы):
Общие впечатления по сайту
Это не самая сильная работа, но хотелось начать цикл статей про разработанные мною сайты с каких-то интересных кейсов. Может с технической точки зрения они будут вам полезны.
Например, в видеопродакшенах ждите много работы с видео – причем иногда неожиданной).
Я буду дальше рассказывать про другие кейсы в нише видеопродакшена, там тоже будут свои нюансы: выбор CMS или другой подводный камушек.
Сайт до сих пор служит компании, они самостоятельно добавляют туда материалы, по SEO он нормально продвигается, так что всё гуд и свою задачу мы выполнили :)
ТОП-15 лучших курсов UX/UI-дизайнера: обучение UX/UI-дизайну онлайн с нуля для начинающих, бесплатные + платные
В этой статье сравниваем ТОП-15 лучших онлайн-курсов по обучению UX/UI-дизайну (курсы подходят для начинающих с нуля и продвинутых UX/UI-дизайнеров) и рассматриваем бесплатные курсы.
UX/UI дизайнер занимается разработкой визуально привлекательных и удобных пользовательских интерфейсов (UI) и улучшением пользовательского опыта (UX). Он исследует потребности пользователей, разрабатывает информационные архитектуры и визуальные элементы, обеспечивает удобную навигацию и простоту использования. Способность UX/UI дизайнера сочетать креативность с пониманием потребностей пользователей является ключевым фактором успеха приложений и веб-сайтов.
ТОП-5 лучших курсов UX/UI-дизайнера
Курсы UX/UI-дизайна
Информация о курсе: стоимость — от 6 367 ₽ / мес. в рассрочку на 22 месяца, длительность - 12-16 месяцев
Особенности: Персональная обратная связь, практика на реальных кейсах. 8 проектов в портфолио, помощь в поиске работы.
Приобретаемые навыки:
Анализ конкурентов и текущих трендов
Проведение исследований пользовательского поведения
Создание структуры и навигации продукта
Разработка дизайна сайтов и приложений
Подготовка макетов для разработчиков
Адаптация дизайна для мобильных устройств
Оценка удобства дизайна для пользователей
Работа с бизнес-метриками для улучшения продукта.
Программа курса:
Figma: от новичка до профессионала
Веб-дизайн: с основ до профессионального уровня
UX-дизайнер: полный курс от основ до продвинутого уровня
Подготовка к трудоустройству на позицию Junior
Сервисный дизайн
Продуктовый дизайнер
UX-аналитика для продуктового дизайнера
Photoshop: с нуля до уверенного пользователя
After Effects: от новичка до профессионала 2.0
Как найти работу дизайнеру: серия лекций от экспертов
Презентация итоговых проектов.
Информация о курсе: стоимость — 4 571 ₽ / мес. в рассрочку на 36 месяцев, длительность - 12 месяцев
Особенности: Получите диплом о проф. переподготовке и помощь с трудоустройством.
Вы освоите проектирование пользовательских интерфейсов, которые будут удобными для пользователей и выгодными для бизнеса. Откроете для себя новое креативное направление с перспективами карьерного роста и возможностью работать удаленно.
Программа курса:
Основы дизайна
Компьютерные технологии в дизайне
Adobe Photoshop для дизайнеров
История дизайна
Введение в специализации
Выбор специализации: графический, цифровой, предметный дизайн, дизайн интерьера
Основы мировой культуры и искусства.
3. Курс «UX/UI-дизайнер» [Нетология] — 215 отзывов
Информация о курсе: стоимость — 131 100 ₽ - 182 100 ₽ или рассрочка на 36 месяцев - от 3 832 ₽ / мес., длительность - 9-16 месяцев — в зависимости от траектории обучения
Особенности: Соберёте портфолио с реальными кейсами и сможете начать поиск работы уже через 4 месяца. Получите диплом о проф. переподготовке.
С нуля освоите востребованную профессию, чтобы работать в компании или на фрилансе. Научитесь разрабатывать удобные сайты и приложения под руководством экспертов из Сбера, Ozon, Газпромбанка и других ведущих компаний.
Две траектории обучения:
Базовая траектория
Освоите основные навыки и инструменты UX/UI-дизайнера, чтобы быстро начать карьеру на фрилансе или удалённо.Расширенная траектория
Приобретете дополнительные профессиональные знания, углубитесь в профессию, что позволит претендовать на более высокие должности и зарплаты.
4. Курс «UX-UI дизайнер» [Логомашина] — 140 отзывов
Информация о курсе: стоимость — 4 461₽ / мес. в рассрочку на 36 месяцев, длительность - 12 месяцев
Особенности: Курс «Нейросети» в подарок. Помощь с трудоустройством. Выдаётся диплом о проф. переподготовке.
Освойте создание интуитивно понятных интерфейсов и сайтов. Вы будете глубоко разбираться в дизайне, основывая свои решения на аналитике и пользовательском опыте.
Программа курса:
Введение в UX/UI-дизайн
Первые шаги в профессии
Основы дизайна: краткий курс
Изучение Figma
Типографика и колористика
Сетки и композиция: создание первого лонгрида
Разработка баннеров и креативов
Введение в анализ проектов
Анализ будущего проекта
Структура сайта
Адаптация для мобильных устройств
Создание UI Kit
Разработка сайта для интернет-магазина
Знакомство с Behance и Dribble
Экзаменационный учебный проект.
Углубленное изучение:
Введение в UX/UI
Исследование бизнеса и пользователей
UX-проектирование
UX-копирайтинг
Веб-аналитика и редизайн
Дизайн и редизайн на основе метрик
Введение в e-commerce проект
Интерфейс интернет-магазина
Дипломный проект.
Дополнительные модули:
Основы Photoshop
Основы Illustrator
Работа с Tilda
Дизайн мобильных приложений
Анимация интерфейсов
Нейросети для дизайнеров
Развитие личного бренда
Юридические аспекты
Английский для дизайнеров
Коммуникация и работа с заказчиками
Забота о себе.
Информация о курсе: стоимость — 5 767 ₽ / мес. в рассрочку на 36 месяцев, длительность - 14 месяцев
Особенности: 12 работ в портфолио: мобильные и веб-прототипы. Сопровождение и поддержка дизайнеров-наставников, помощь с трудоустройством, диплом о профессиональной переподготовке.
Освойте создание интуитивных и узнаваемых интерфейсов, которые улучшат жизнь тысяч пользователей.
Программа курса:
Основы интерфейсного дизайна
Углубленное изучение UX/UI
Разработка веб-сайтов
Дизайн мобильных приложений
Стажировка
Продвинутые UX-исследования
Создание дизайн-систем
3D-визуализация с помощью Blender
Развитие soft skills
Дипломная работа
Английский для дизайнеров
Использование нейросетей в дизайне.
Информация о курсе: стоимость — 129 600 ₽ - 266 643 ₽ или рассрочка на 24 месяца - от 6 000 ₽ / мес., длительность - 10 месяцев
Особенности: помощь в поиске работы.
Вы освоите:
Профессиональную разработку сайтов любой сложности на Tilda и создание интерфейсных элементов в Figma, а также работу с прототипами и анимациями.
Понятия «дизайн-систем» и «дизайн-мышление», что поможет вам создавать интерфейсы, которые будут выделяться среди конкурентов и привлекать внимание клиентов.
Глубокое исследование пользователей для создания максимально удобного интерфейса. Научитесь анализировать и изучать пользователей, а также управлять командой UX-исследователей.
Основы HTML, CSS и JavaScript, что позволит вам освоить базовые навыки frontend-разработки и самостоятельно верстать сайты с нуля.
Программа курса:
Работа с Figma
Бонус: работа с Tilda
Дизайн-система
UI-дизайн
Дизайн мобильных интерфейсов
Дизайн-мышление
Продвинутый UX
Исследования и аналитика
Основы вёрстки: HTML и CSS
Основы JavaScript
Инструменты верстки и UX
Дипломный проект.
Информация о курсе: стоимость — 48 300 ₽, длительность - 15 недель
Освоите навыки создания интуитивных и узнаваемых интерфейсов, которые сделают пользовательский опыт проще и удобнее.
Программа курса:
Основы UX/UI-дизайна: введение в профессию, работа в Figma, основы визуального дизайна, включая композицию, цвет, типографику и иконографику.
Проектирование пользовательского опыта: принципы юзабилити, методы UX-исследований, проведение и анализ глубинных интервью.
Дизайн веб-сайтов: использование Human-Centered Design (HCD), основные инструменты веб-проектирования.
Дизайн мобильных приложений: адаптация интерфейсов под мобильные устройства, использование дизайн-систем.
Продвинутые UX-исследования: анализ поведения пользователей, тестирование прототипов.
3D-визуализация в Blender: создание трехмерных элементов для интерфейсов.
Soft skills: развитие навыков коммуникации и работы в команде.
Нейросети для дизайнеров: использование искусственного интеллекта для улучшения дизайна.
Дипломная работа: создание и защита собственного проекта.
На этом курсе вы сможете получить практические знания и навыки, необходимые для успешной карьеры UX/UI-дизайнера, научитесь работать с современными инструментами и технологиями, такими как Figma и Blender, и освоите передовые методы UX-исследований и анализа данных.
8. Курс «UI/UX-дизайнер» [Pentaschool] — 87 отзывов
Информация о курсе: стоимость — 82 100 руб., длительность - 9 месяцев
Учебная программа:
Введение в профессию "Дизайнер интерфейсов"
Создание лендинга в Figma: основы UX-дизайна, композиция, создание прототипов.
UI-дизайн лендинга: разработка графической концепции.
Основы веб-дизайна: ключевые принципы создания сайтов.
Интернет-магазин - прототипирование главной страницы: создание и тестирование макетов.
Интернет-магазин - сценарий выбора товара: проектирование и оптимизация процесса выбора.
Интернет-магазин - сценарий покупки: проработка пользовательского пути при покупке.
UI-дизайн интернет-магазина: создание интерактивных прототипов.
Контент сайта - работа в Adobe Photoshop (часть 1): обработка графических элементов.
Контент сайта - работа в Adobe Photoshop (часть 2): завершение создания контента.
Интернет-магазин - завершение проекта: анимация и передача проекта разработчикам.
Дизайн сайтов на Tilda: изучение интерфейса и возможностей платформы.
Создание лендинга и многостраничного сайта на Tilda: практика создания различных типов сайтов.
Создание интернет-магазина и образовательного сайта на Tilda: специализация на коммерческих и учебных проектах.
Особенности работы с мобильными приложениями: адаптация дизайна под мобильные устройства.
Проектирование мобильного приложения: создание архитектуры приложения.
Создание прототипа и UI-дизайн для мобильных приложений: визуализация и прототипирование.
UX-исследования и аналитика: проведение исследований и анализ пользовательского опыта.
Мобильное приложение - продуктовый подход: создание прототипов с акцентом на продуктовую стратегию.
Мобильное приложение - визуальная концепция: разработка визуальной части приложения.
Личный бренд дизайнера: стратегии развития и продвижения личного бренда.
Практикум по разработке пользовательского сценария для мобильных приложений: создание и анализ пользовательских сценариев.
Эта программа позволит вам освоить все необходимые навыки для успешной карьеры в сфере дизайна интерфейсов, от базовых основ до продвинутых методик и инструментов.
Информация о курсе: стоимость — 136 000 ₽ - 199 000 ₽, длительность - 9 месяцев
Чему вы научитесь:
Анализировать конкурентов и целевую аудиторию: исследовать привычки пользователей и выявлять их потребности.
Формулировать и проверять гипотезы: применять различные методы исследований для проверки идей.
Прорабатывать пользовательские сценарии: разрабатывать интуитивно понятные интерфейсы.
Проектировать визуальные интерфейсы: создавать дизайн для различных устройств и операционных систем.
Создавать анимированные прототипы: тестировать свои решения с пользователями.
Презентовать и передавать проекты: эффективно представлять идеи заказчику и передавать проекты в разработку.
Программа курса:Аудитория и визуальная коммуникация
Композиция и сетки
Основы типографики и работа с текстом
Работа с цветом и изображениями
Исследование аудитории
Проектирование интерфейса
Анимация, иконки и UI-киты
Визуальный дизайн и адаптивность
Работа над продуктом
UX-копирайтинг
Визуализация данных
Продвинутые функции Figma / Бизнес-среда
Adobe After Effects
Создание MVP на Tilda
Бонусный модуль: Новые технологии и нейросети в дизайне.
10. Курс «UX-дизайн» [IRS.Academy] — 46 отзывов
Информация о курсе: стоимость — 51 400 руб., длительность - 12 уроков (24 часа)
Содержание курса:
Вступление в профессию
Рассмотрение основ профессии дизайнера, различные направления дизайна, обзор основных инструментов дизайнера и актуальных тенденций в этой сфере.Основы UX-дизайна
На втором уроке освещаем основы этой области: методика ведения дизайн-проектов, стадии их реализации, эффективное планирование и управление, выявление потребностей целевой аудитории, использование бизнес-анализа и аналитики в UX-дизайне.Методы дизайн-мышления
Осваиваем базовые принципы дизайн-процесса, его этапы и эффективное управление проектами. Изучаем методы выявления потребностей целевой аудитории, применение бизнес-анализа и проведение аналитики в UX-дизайне.Создание мобильных приложений
Изучение мобильного UX-дизайна, принципов разработки приложений, оформления пользовательского интерфейса, решение задач пользователей и привлечение внимания целевой аудитории.Дизайн сервисов
Погружение в теорию и практику сервисного дизайна, методы проектирования удобных для клиента услуг, организация командной работы, адаптация под потребности потребителя и использование опыта проектирования.Прототипирование, шаблоны и психология пользователей
Изучение процесса UX-проектирования, анализа поведения аудитории, психологии поведения, исследование интерфейсов, особенностей качественных и количественных исследований, а также основных инструментов аналитики.Тестирование юзабилити
Освоение методов юзабилити-тестирования, правил выборки, составление сценариев действий пользователей, особенностей мобильной аналитики, проведение A/B-тестов и выбор гипотез для тестирования.Дизайн на основе данных
Изучение приоритетов и метрик в работе с данными, основных правил Data Driven Design и применение Big Data, исследований, A/B-тестирования и проверки гипотез в проектировании продуктов.Пользовательский опыт
Научные подходы к проектированию пользовательского опыта, его восприятие, психофизиология, определение KPI и бизнес-целей, анализ сайтов с точки зрения психологии пользователей и основные принципы интерфейса.Творчество и дизайн
Разработка концепций в дизайне, творческий подход, методы генерации идей, удовлетворение потребностей с помощью продукта и его визуальное представление.Стратегия Lean UX
Применение методологии Lean UX, бережливого дизайна, ориентация на потребителя, восприятие бренда и создание творческих брифов.Визуальный дизайн
Роль визуального дизайна, методы его разработки, различные типы дизайнерских систем, оценка качества дизайна, разработка логотипов, брендинг, упаковки, инструкции по шрифтам, цветам и размерам, создание стилей, макетов и прототипов, выбор графических редакторов.
11. Курс «UX/UI дизайн» [Специалист]
Информация о курсе: стоимость — разная, длительность - разная
Вы овладеете:
основами веб-дизайна и UX/UI;
методами работы с растровой графикой в Adobe Photoshop;
проведением юзабилити-тестирования и написанием пользовательских сценариев;
проектированием удобных пользовательских интерфейсов;
созданием дизайна интерфейсов в Adobe XD и Sketch;
разработкой лендингов на платформе Tilda;
работой с Figma и другими инструментами для создания макетов;
использованием инструментов верстки HTML и CSS;
представлением работ заказчику таким образом, чтобы минимизировать необходимость внесения многочисленных изменений.
12. Курс «UI/UX-дизайнер» [НИИДПО] — 15 отзывов
Информация о курсе: стоимость — 82 100 ₽, длительность - 37 недель (8.5 мес.)
Что вы освоите:
Применение теоретических основ графического дизайна на практике: принципы композиции, типографии, и колористики.
Проведение исследований пользовательского поведения, формирование пользовательских сценариев, анализ целевой аудитории и конкурентов.
Работу с платформами Tilda, Figma и Adobe Photoshop.
Создание удобных и интуитивно понятных интерфейсов для лендингов, многостраничных веб-сайтов, интернет-магазинов и мобильных приложений.
Решение бизнес-задач через дизайн веб-сайтов и приложений.
Продвижение личного бренда и эффективное взаимодействие с коллегами и клиентами.
13. Курс «UX/UI дизайнер» [Loftschool] — 12 отзывов
Информация о курсе: стоимость — нет информации, длительность - 3 месяца
Что вы освоите:
Основные средства
Получите опыт работы с передовыми инструментами дизайнера.Создание иконок и иллюстраций
Научитесь работать с графикой: изучите методы поиска изображений, подбора материалов на фотостоках и определения нужности использования иконок в проекте.Текстовая работа
Освоите навыки работы с текстом: сбор, структурирование и редактирование информации, а также умение создавать текст с нуля при необходимости.UX-дизайн
Изучите создание информационной структуры для интернет-магазина, ознакомитесь с основными шаблонами взаимодействия с интерфейсом и типами игровых механик для улучшения пользовательского опыта.Аналитический подход
Познакомитесь с объектно-ориентированным дизайном, который поможет вам не только разработать визуальную концепцию проекта, но и понять его функциональность и работу.Тестирование юзабилити
Изучите методы исследования юзабилити, проведите коридорное тестирование и опираясь на результаты, улучшите интерфейс вашего продукта.Разработка дизайн-системы
Создайте дизайн-систему для вашего проекта, что упростит его разработку и передачу разработчикам, а также улучшит восприятие бренда и пользовательский опыт.Визуализация концепции
Превратите ваш прототип в готовый дизайн и освоите создание анимаций в Figma и Principle.
14. Курс «UX & UI: продуктовый дизайн» [БВШД] — 10 отзывов
Информация о курсе: стоимость — нет информации, длительность - 3 недели
Чему вы научитесь:
Освоите основные методы исследования пользователей в дизайне;
Генерация идей для цифровых сервисов;
Разработка концепций продукта и сценариев его использования;
Быстрое создание экспресс-прототипов идей;
Погружение в процесс разработки продукта;
Тестирование созданных прототипов;
Работа в условиях ограниченного времени;
Коллективная работа в команде.
Изучаемые темы:
Воркшопы, которые дополняют каждую лекцию, практические занятия в командах, дополнительные ресурсы, поддержка от менторов и кураторов курса;
Формирование команд;
Проведение исследований: сбор информации, формулирование гипотез, подбор участников, планирование исследования, руководство интервью;
Анализ конкурентов;
Анализ исследований и превращение полученных данных в конкретные идеи;
Построение пользовательских историй;
Работа в программе Figma, разработка дизайн-концепций;
Основы презентации разработанных решений;
Заключительная презентация проектов.
Бесплатные курсы и уроки UX/UI дизайна
Вы узнаете, какие стратегии психологии важны для каждого профессионала в области UX-дизайна, каковы шаги в выполнении основательного UX-исследования и ознакомитесь с карьерным путем ведущего UX-дизайнера в Amazon. Погрузитесь в основы UX-дизайна и разработайте концепцию эффективного сайта продаж.
Учебные материалы:
Этапы процесса создания дизайна
Основы сетки, отступов и выравнивания
Создание форм, кнопок и закруглений
Введение в типографику
Подбор цветов для веб-сайта
Обзор понятий UX/UI
Руководство по поиску и загрузке шрифтов
Ресурсы для поиска стоковых изображений, как платные, так и бесплатные
Подбор качественных бесплатных фотографий
Платформы для использования иконок
Инструменты для создания цветовой палитры
Сервисы для подбора сочетаний шрифтов
Сообщества для дизайнеров.
Видеоуроки:
Основные принципы для новичка в дизайне
Основы типографики
Понятие цвета в дизайне
Работа с изображениями
Применение модульных сеток
Повышение дохода фрилансера с использованием WordPress-тем
10 секретов Sketch, которые облегчат вашу работу
6 правил эффективной работы на фрилансе.
Что должен уметь начинающий UX UI дизайнер?
Начинающий UX/UI дизайнер должен обладать рядом навыков и знаний, которые помогут ему успешно начать карьеру в этой сфере. Вот основные из них:
Технические навыки
Инструменты для дизайна:
Figma: один из самых популярных инструментов для создания прототипов и макетов.
Sketch: используется в основном на Mac и популярен среди дизайнеров интерфейсов.
Adobe XD: инструмент от Adobe для создания дизайнов и прототипов.
Adobe Photoshop и Illustrator: для работы с графикой и иллюстрациями.
Основы HTML и CSS:
Понимание основ веб-разметки и стилей поможет лучше взаимодействовать с разработчиками и создавать реалистичные прототипы.
Прототипирование:
Умение создавать интерактивные прототипы, чтобы тестировать и демонстрировать идеи.
Концептуальные знания
Основы UX-дизайна:
Понимание принципов юзабилити и удобства использования.
Исследования пользователей: методы сбора данных о пользователях, создание персон (user personas), анализ пользовательских сценариев (user journeys).
Основы UI-дизайна:
Знание основ типографики, цветовых схем, иерархии и композиции.
Умение создавать понятные и привлекательные интерфейсы.
Практические навыки
Wireframing:
Создание набросков и схем интерфейсов для определения структуры и расположения элементов.
User Research:
Проведение интервью с пользователями, юзабилити-тестов, анкетирования и других методов исследования.
Интерактивное проектирование:
Создание анимаций и переходов для улучшения взаимодействия пользователя с интерфейсом.
Софт-скиллы
Коммуникация:
Умение ясно и четко объяснять свои идеи и решения как команде, так и заказчикам.
Креативное мышление:
Способность генерировать оригинальные и эффективные решения для различных проблем.
Внимание к деталям:
Тщательная проверка всех элементов дизайна и их соответствие поставленным задачам.
Дополнительные знания
Понимание процесса разработки ПО:
Знание основ Agile и Scrum для эффективного взаимодействия с командой разработчиков.
Знание трендов в дизайне:
Следить за последними тенденциями и новыми технологиями в сфере UX/UI.
Портфолио
Проекты:
Наличие портфолио с примерами работ, которые демонстрируют навыки и стиль дизайнера.
Кейсы:
Описание процессов и методов, которые использовались для решения конкретных задач в проектах.
Освоение этих навыков и знаний поможет начинающему дизайнеру успешно начать карьеру в UX/UI дизайне и продолжать развиваться в этой области.
Поиграем в бизнесменов?
Одна вакансия, два кандидата. Сможете выбрать лучшего? И так пять раз.
Когда вышел после майских и вспомнил что работаешь
Нейросети для помощи в создании сайтов
Dora AI генерирует лендинги, блоги, портфолио и другие веб-страницы с уникальным дизайном за минуту. Подробнее в этой статье
Dorik AI Website Builder - делает нормальный сайт, который легко поправить, например, добавить свои картинки или немного рихтануть текст. Легко настроить настроить ссылки на кнопки и т.д. Для первого сайта прям плюсую. Подробнее в этой статье
Coframe - это копирайтер, фронтенд-разработчик и UX-исследователь, ии-дизайнер. Вставляете адрес своего сайта, затем сервис предоставит развернутые советы с метриками. Подробнее в этой статье
Framer - конструктор сайтов с искусственным интеллектом, удобный редактор, встроенная CMS, готовые шаблоны, база картинок, готовые цветовые решения и т.п. Подробнее в этой статье
Galileo - генерирует UI дизайн по запросу и картинке. Хорошая находка для UI-дизайнеров. После генерации вы сможете редактировать макет прямо на сайте или экспортировать в Figma. Подробнее в этой статье
draw-a-ui - Генерация сайта из простого наброска без знания кода, преобразует макет в рабочую страницу. Подробнее в этой статье
Хотите узнавать первыми о полезных сервисах с искусственным интеллектом для работы, учебы и облегчения жизни? В своем телеграм канале НейроProfit я рассказываю, как можно использовать нейросети для бизнеса
Как обойтись без UX-редактора и сделать текст в интерфейсе понятным пользователю?
В процессе разработки продукта или фичи неизбежно возникает необходимость работы с текстом. Если в команде есть UX-редактор, то именно ему поручается этот этап. Он играет роль дополнительного "мозга" для создания удобного и бесшовного флоу. Кроме того, UX-редактор обладает высокой продуктовой насмотренностью - через его руки проходит множество макетов, что позволяет ему выявлять потенциальные риски, последствия и пересечения с другими продуктами в компании и на рынке
Зачем нужно проверять тексты и какие могут быть последствия, если этого не делать? Даже самые привлекательные интерфейсы могут оказаться бесполезными, если пользователь "споткнется" о неправильно подобранные слова, орфографические или пунктуационные ошибки, несоответствие контексту или даже оскорбительный смысл, воспринимаемый пользователями в невинных, на первый взгляд, фразах. Последствия могут быть разными - от незначительных до серьезных, вплоть до потери лояльности клиентов
Но бывает и такое, что в команде нет UX-редактора и работу с текстом приходится брать в свои руки. Для таких случаев я совместно с Софьей Львовой (Лид UXW в Билайне) разработали ряд рекомендаций, которые помогут дизайнерам самостоятельно проверять текст на качество
Оглавление:
Дефис/тире/длинное тире
Дефис используется для объединения частей слов и словосочетаний, для прикрепления частиц и префиксов, а также для обозначения сокращений и в сложных словах
Длинное тире используется в предложениях и отделяется пробелами. Оно ставится между подлежащим и сказуемым, для выделения прямой речи, на месте пропущенного члена предложения, для обозначения маршрутов и в других случаях
Короткое тире используется в числовых диапазонах (может отличаться от компании к компании в зависимости от редполитики)
Ёлочки/лапки
Ёлочки и лапки являются знаками препинания и помогают сделать текст более структурированным, удобным для чтения и понимания, а также подчеркнуть важные элементы или сообщения
Ёлочки (« ») — это кавычки первого уровня, а лапки (“ ”) — это кавычки второго уровня (может отличаться от компании к компании в зависимости от редполитики)
Рекомендуется использовать разные типы кавычек для внешнего и внутреннего текста внутри кавычек. Например: ЗАО «Издательский дом „Зерновые культуры“»
Неразрывные пробелы
Неразрывные пробелы в интерфейсе используются для обеспечения правильного отображения текста и предотвращения нежелательного переноса слов на новую строку. Вот несколько основных способов применения:
1) инициалы (А. П. Чехов)
2) сокращения с точками (и т. д.)
3) числа с последующим словом или единицей измерения (10 км, 1984 г.),
4) предлоги, союзы и иногда частицы (ни о чем)
5) сохранение целостности комбинации слов
Чтобы поставить неразрывный пробел, используйте комбинацию Shift+Opt+Space на MacOS и Shift+Alt+Space на Windows
Е/ё
Большинство людей, далёких от написания текстов, считают, что ничего страшно не будет, если вместо «ё» писать букву «е», считая их взаимозаменяемыми. На самом же деле, это две разных буквы. Например: все/всё, осел/осёл, совершенный/совершённый
В разных компаниях к букве ё относятся по-разному. Где-то её используют, а где-то нет. Если у вас нет редполитики — не ленитесь разделять эти буквы. Уважайте русский язык и любите букву ё
Точки на концах абзацев
Точки на концах абзацев в интерфейсе создают визуальную структуру, делая интерфейс более организованным и удобным для восприятия, но, в зависимости от редполитики, могут и не использоваться
В каких-то компаниях точки на концах абзацев ставят, а на каких-то нет. Если у вас нет редполитики — сами принимайте решение ставить точки или нет
Гендерная нейтральность
Гендерная нейтральность в тексте предполагает использование языковых конструкций и выражений, которые не отражают предположений или ограничений по половому признаку. В современном мире это становится все более важным, поскольку общество становится более инклюзивным в отношении гендерных различий
Не называйте кнопки: «согласен(-на)», «готов(-а)», «ознакомился(-ась)». Особенно часто этим грешат в лигалах
Эмоциональная нейтральность
Принцип эмоциональной нейтральности в интерфейсе подразумевает использование текста и элементов, которые не вызывают сильных эмоциональных реакций у пользователей, а остаются более универсальными и понятными для всех пользователей. Это помогает предотвратить возможные негативные ассоциации или недопонимания
Не пишите: «Вы не можете продолжить без авторизации. Пожалуйста зарегистрируйтесь». Это предложение может вызвать чувство ограничения или даже раздражение из-за использования слов "не можете" и "пожалуйста", которые подчеркивают ограничения и требования
Нейминг кнопок
Нейминг в кнопках должен быть таким, чтобы кнопки однозначно и прозрачно давали понять, куда ведут и при этом стыковались с заголовком. Если в заголовке спрашиваем «Подключить услугу?», то в кнопке должно быть «Подключить» и никак не «Активировать»
Если у вас в команде любят заигрывать с Conversational Design (когда на кнопках вместо «Подключить» пишут «Да, хочу!»), пристально следим, чтобы кнопка всегда была рядом с заголовком иначе с большой долей вероятности смысл будет потерян
Заголовки
У людей нет, ни времени, ни желания читать экраны. Поэтому в заголовке должна быть отображена понятная суть. Например: «Оплата прошла», «Отключите VPN»
Дубликаты текста
Текст не должен дублироваться без весомой причины. Например, в форме ввода не нужно писать «Введите ФИО», достаточно просто «ФИО». Сама форма ввода уже заменяет глагол «введите»
Адаптивность
Вся важная текстовая информация должна вмещаться в самые маленькие экраны. Важный для людей текст должен быть на самом видном месте вверху страницы, неважный спрятан в самом низу
Канцеляризмы
В тексте не должно быть сложных слов, канцеляризмов, сложноподчинённых оборотов, вводных слов, чтобы текст стал более доступным и интуитивно понятным для пользователей. Использование сложных формулировок может создать путаницу и затруднить восприятие информации
Вывод
Данные рекомендации помогут вам улучшить текст в интерфейсе, но не заменят работу опытного UX-редактора. Ведь UX-редактор – это специалист, который обладает глубокими знаниями в области UX-дизайна, лингвистики и психологии. Он умеет создавать тексты, которые не только понятны и удобны для пользователей, но и мотивируют их к целевому действию
Тем не менее, в отсутствии в команде такого специалиста, применение данных рекомендаций позволит вам сделать текст более понятным и читаемым самостоятельно
Понравилась статья?
Ищи больше в моём телеграм-канале. Там постоянно выходит что-то интересное
Сможете найти на картинке цифру среди букв?
Справились? Тогда попробуйте пройти нашу новую игру на внимательность. Приз — награда в профиль на Пикабу: https://pikabu.ru/link/-oD8sjtmAi
Куда складывать референсы? или Eagle, как панацея для дизайнера
В этой статье я хотел бы поделиться опытом пользования Eagle. Рассказать о его преимуществами и пару слов о недостатках
Повышение насмотренности
Повышение насмотренности является неотъемлемым процессом в жизни каждого дизайнера. Референсы – это твой фундамент, на который ты сможешь опереться, независимо от поставленной задачи в любой момент времени
Как это происходит сейчас
Дизайнеры активно собирают свои базы на таких именитых сервисах как: Dribble, Behance, Dprofile, Pinterest. Но есть нюанс. Это разные сервисы и не имеют общей системы навигации. Да и в целом там много всего надо перерабатывать, чтобы пользователям было удобно
Проблема рядового дизайнера состоит в том, что если ты сохраняешь референсы постоянно, их количество неумолимо растёт и работать без чёткой системы становится невозможно
Но есть решение…
Eagle – твой незаменимый помощник
Продукт, который позволит собирать, искать и упорядочивать дизайн-файлы логичным образом в одном месте
Лицензия Eagle включает в себя 2 копии, которые будут работать на двух девайсах одновременно. Так же, ты получаешь расширение в браузер, при помощи которого в связке с приложением и происходит вся магия
Программа является абсолютным киллером всех прочих аналогов, так как оптимизирует практически все рутинные действия, которые мы совершаем в процессе работы.
Расширенный список поддерживаемых форматов до svg, psd, gif, font и прочих
Папки и смарт-папки
Папки выполнены в минималистичном стиле, что позволяет выводить до 40 папок одновременно и не теряться среди них. Не остаётся без внимания возможность персонализировать папки при помощи цвета и иконок
Так же в Eagle есть возможность создавать смарт-папки с умной фильтрацией, но этому решению я не нашёл никакого практического применения
Поиск по цвету или названию
При сохранении каждого файла через плагин, приложение по автоматически создает цветовую палитру и его название, благодаря чему, ты можешь быстро искать необходимые изображения по различным параметрам
Автоматическое сохранение ссылок
При сохранении любой сущности на веб-странице сохраняется ссылка на источник. Благодаря этому не придётся вспоминать где вы нашли тот или иной референс
Качественный скриншотер
Удобные команды, похожие на нативные, а именно:
• option+2 для скриншота выбранной области
• option+3 для скриншота видимой области
• option+4 для скриншота всей страницы с прокруткой
Из крутых фич – Eagle позволяет сохранять элементы на странице с зажатой клавишей cmd. Это очень удобно и бонусом сокращает количество необходимых кликов до минимума
Все скриншоты сохраняются в превосходном качестве (гораздо лучше любых браузерных конкурентов, проверено временем)
Хранение шрифтов
Хранение шрифтов – моя больная тема. Сдал свой рабочий ноутбук, получил новый, вроде всё нужное перенёс, а шрифты забыл. Жизнь тлен → Любой браузер → Скачать SF Pro (и так далее). Eagle поддерживает шрифты, это не может не радовать
Какие файлы поддерживает Eagle?
В настоящее время Eagle поддерживает добавление всех типов форматов файлов. Следующие форматы файлов можно предварительно просмотреть или воспроизвести напрямую:
• Фото (bmp, gif, heic, heif, hif, icns, ico, jpeg, jpg, png, svg, tif, tiff, ttf, webp, avif, base64, jfif, insp, jxl, jpe)
• 3D (fbx, obj, 3ds, 3mf, dae, ifc, ply, stl, glb)
• Текстура (dds, exr, hdr, tga)
• Видео (m4v, mp4, webm, mov (H. 264 / H. 265 / HEVC / AV1 / VP9 / VP8)
• Аудио (aac, flac, m4a, mp3, ogg, wav)
• Шрифт (ttf, ttc, otf, woff)
• RAW (3fr, arw, cr2, cr3, crw, dng, erf, mrw, nef, nrw, orf, otf, pef, raf, raw, rw2, sr2, srw, x3f)
• Office (txt, key, numbers, pages, pdf, potx, ppt, pptx, xls, xlsx, doc, docx, eddx, emmx)
• Другие (html, mhtml, url)
Недостатки
• цена лицензии в $30 (Raindrop.io как бесплатный аналог)
• покупка через Paypal (недоступен для граждан РФ)
• отсутствует облачность, для сгрузки файлов – об этом в пункте ниже
Как сделать Eagle облачным
Для этого необходимо скачать приложение Google Drive и создать библиотеку Eagle на облачном диске. После этого все сохранённые файлы будут автоматически сгружаться в облако Google Drive. В среднем, файлы весят около 3 мб. Кажется что 15 гб, которые Google предоставляет бесплатно должно хватить надолго
Идеальных не бывает?
Готов поспорить. По моему мнению, это единственное безальтернативное решение на рынке для хранения референсов. У Eagle очень грамотный интерфейс, множество полезных функций, которые экономят твоё время и не уводят фокус от наслаждения «прекрасным»
Рекомендую попробовать всем, кто любит порядок и ценит своё время
Понравилась статья?
Ищи больше в моём телеграм-канале. Там постоянно выходит что-то интересное