Этапы работы над дизайном — Дизайн на vc.ru
5467 просмотров
Привет друг! Меня зовут Максим Акимкин, я UX/UI Дизайнер и если ты открыл эту статью, значит ты как минимум интересуешься дизайном и возможно ты найдешь ответы на свои вопросы в этой статье.
Что такое дизайн процесс да и дизайн в целом? Это не просто рисование картинок, шотов или презентаций для Behance и Dribbble, это длинный и интересный процесс с иногда очень большим количеством этапов, и сейчас мы рассмотрим каждый из них по отдельности.Процесс работы над дизайном может и скорее всего будет отличаться в зависимости от проекта. На какой стадии он зашел? За что готов платить заказчик? И тут можно долго продолжать… Но в целом нужно понимать что эта статья написана для тех
кто только начинает свой путь в дизайне и в ней не будут рассмотрены более продвинутые UX инструменты, потому как на каждый из них можно выделить по несколько статей и все равно не охватить все аспекты.
Первый этап — Аналитика и процесс сбора информации о продукте.
Аналитика- это своеобразное знакомство с вашим продуктом и процесс сбора информации о нем, погружение в доменную область для того чтобы понять продукт
глубже и выяснить какие фичи и технологии используются в подобных продуктах. Прежде чем вы соберетесь работать над чем-либо постарайтесь ответить себе на следующие вопросы:
1. Какие цели и задачи преследуют Ваш продукт и Ваш интерфейс? И подумайте над тем как их лучше достичь.
2. Кто Ваш пользователь? И обязательно задайтесь вопросом про аудиторию и контекст использования Вашего приложения, в каких обстоятельствах, с какой скоростью и в каком ритме жизни будет использоваться Ваше приложение. (Тут очень хорошо помогут интервью с существующими или потенциальными пользователями). Обратите внимание на конкурентную среду. Ведь, наверняка, кто-то сделал что-то уже подобное. Посмотрите отзывы в Google Play, App Store что пользователи говорят о подобных продуктах ( что им нравится/не нравится, чего хватает/не хватает) именно отсюда вы можете почерпнуть то, что будет нововведением в вашем продукте.
Когда вся информация собрана можно приступать к следующему этапу.
Второй этап — Проектирование навигации, логики и структуры.
Этот этап делится на несколько под этапов в зависимости от сложности того продукта над которым вы работаете. Создание карты функционала продукта в дизайне интерфейсов называется Mind map
Mindmap Картинка из интернета
Чтобы правильно составить Mind map вам нужно выписать весь ваш будущий функционал и составить взаимосвязи между функционалом.
Зачем еще нужен Mind map? Это вещь позволит вам взглянуть на ваш продукт как бы сверху и не упустить никакую мелочь. Тогда вы увидите всю картинку целиком и можете приступить к следующему этапу.
Скетчи и наброски. Я стараюсь никогда не пропускать этап набросков своих идей и задумок. Обязательно используйте бумагу и карандаши чтобы наметить общую логику и структуру приложения для дальнейшей более глубокой проработки.
Скетчи Картинка из интернета
Не пренебрегайте этим методом.
Почему он так хорош? Потому что Вы затрачиваете гораздо меньше времени на самые первичные итерации. Тот набросок который вы можете сделать на бумаге карандашом будет занимать примерно 3-4 минуты и даже может быть меньше и этот же набросок в каком-то же графическом редакторе займет у вас около получаса именно для этого и нужно делать эскиз на бумаге.
Это помогает экономить время и находить большее количество вариантов. Когда вы накидали всю свою навигацию целиком при помощи бумаги и карандаша то вы смело можете приступать к следующему этапу.
Третий этап — Ваерфреймы (Wireframes).
Что же такое Ваерфрейм? Это низко детализированный набросок дизайна который в основном основывается на навигационных паттернах. Вот здесь вы уже можете более подробно продумать каждый экран и как пользователь будет взаимодействовать с тем или иным элементом. На этом этапе вы еще можете не знать какая у вас будет композиция или сетка, но вы уже понимаете где находится та или иная кнопка или ссылка.
Wireframes Maxim Akimkin
Естественно впоследствии дизайн этих экранов будет выглядеть совершенно по-другому, но на этапе ваерфрейминга ни важна не композиция, ни типографика. Мы просто расставляем основные функциональные элементы и продумываем навигацию, по которой пользователь будет двигаться по Вашему приложению. Если вы работаете над мобильным приложением то здесь уже можно учитывать платформу iOS или Android по тому как навигация у них совершенно разная. Затем из ваших ваерфреймов нужно создать карту экранов, это дает представление о структуре приложения. Это нужно затем же, зачем вы рисовали Mind map
чтобы верхнеуровнево видеть все свои сценарии целиком. На своих картах сценария я также использую стрелки, чтобы показать взаимодействия пользователя с различными элементами и то куда он нажимает и как он это делает.
После того как вы составили карту основных экранов, вы можете приступить к следующему этапу.
Четвертый этап — Прототипирование.
Это построение интерактивной модели будущего приложения. Простыми словами это просто прототип который можно прокликать и он динамически будет менять контент на экране. Для чего это нужно? Это очень важный этап и возможность проверить Ваши гипотезы и идеи в интерактивной среде, и определить нет ли в Вашей идеи ошибки. Для чего я делаю такие прототипы? Для коридорного тестирования.
Как только вы сделали прототип основного сценария, вы идете в поле (то есть на улицу или просто по офису) и тестируете свой прототип, опрашиваете людей, делая на основе полученных данных какие-то выводы, что получилось хорошо, а что нужно улучшить или вовсе убрать.
Тестирование подскажет вам какие идеи работают, а какие нет. Чем хорошо тестирование на ваерфреймах? Тем что именно сейчас Вы уже можете отследить ошибки в интерфейсе и то что пользователю может быть что-то не понятно или не очевидно. Конечно тут нужно делать скидку на то что тут вы тестируете не дизайн, но какие-то главные критичные ошибки лучше отловить уже прямо сейчас.
После того как вы протестировали и учли все пожелания пользователей, отработали их и возможно протестировали все заново. Когда вы уже можете сказать что все готово. Тогда уже можно приступить к любимой многими дизайнерами части.
Пятый этап — Визуальный дизайн или по другому UI (User Interface).
Что же такое визуальный дизайн и дизайн концепции? Это по сути воплощение вашей задумки в графике. Есть определенные базовые вещи которые необходимо учитывать до того как приступаете. Во-первых, не забудьте собрать к референсы и сделать из них мудборд (moodboard), мудборд — это такая себе доска настроения, то есть стиль которому вы будете следовать. Это то что поможет вам накопить опыт и поможет сделать действительно красивый проект.
Я советую пользоваться такими ресурсами как:
https://www.behance.net/
https://dribbble.com/
https://www.pinterest.com/
На первых двух сайтах Вы можете почерпнуть вдохновение и идеи, а последний это просто очень удобный для создания мудбордов.
Еще при создание концепции важно помнить, что если вы делаете приложение для какого-то бренда, то необходимо учитывать цвета, шрифты этого бренда чтобы приложение было актуальным и пользователи действительного узнавали его.
Также на этапе визуального дизайна важно учитывать специфику платформы. Не забывайте что в ios могут не работать те паттерны которые работают в android и наоборот.
Тиражирование. Отработайте визуальную концепцию на уровне главного экрана и основного сценария, так как название говорит само за себя, что он главный и все события происходят именно на нем и именно с него пользователь как правило стартует. И лишь потом вы начинаете применять всю дизайн концепцию под дополнительные экраны и дополнительные сценарии.
После того как Ваша дизайн концепция готова, то по хорошему нужно сделать еще один прототип и перейти к тестированию на пользователях более масштабно и более развернуто.
Представим, что мы протестировали наш прототип и у нас все хорошо. Тогда мы приступаем к следующей части.
Шестой этап — Передача в разработку или Hand Off.
Это очень важный этап, так как именно от успешного взаимодействия разработчика и дизайнера и то насколько они классно друг друга понимают будет зависеть то, как будет выглядеть ваш продукт и как он будет работать.
Необходимо помнить о фундаментальных вещах при передаче материала в разработку.
В первую очередь это конечно UI Kit. что такое UI Kit? Это карта всех ваших элементов интерфейса собранная в одном месте. вы выносите все кнопки, все ссылки, всевозможные интерактивные элементы: картинки, иконки.
Разработчик должен знать где все это лежит.
Что здесь такого важного и для чего это делают? Когда дизайнер рисует какой-то визуальный ряд, то чаще всего он делает это в статике. Но нам, как дизайнерам интерфейсов нужно помнить и о динамике, и именно UI Kit позволяет нам продумать заранее как будет выглядеть та или иная кнопка, иконка или поле ввода в нажатом состоянии.
К примеру для кнопки вы должны учесть такие состояния как:
- Normal — В спокойном состоянии
- Disabled — Неактивное состояние
- Focus — Фокусное состояние — Когда кнопка выделена с помощью кнопки Tab, это важная часть Accessibility
Так же вам может понадобиться отразить и другие состояния элементов, в зависимости от задач интерфейса.
см. пример ниже.
Состояния кнопок Картинка из интернета
Анимация.
Если вы ее делали, то Вам обязательно нужно написать спецификации к ней для разработчиков. Что представляет собой спецификация? Это документ где записан основной сценарий анимации и посекундно расписано действия того или иного элемента и как он должен выглядит в тот или иной момент времени анимации. В чем передавать саму анимацию Вам нужно договориться с самим разработчиком непосредственно. Если я рисую анимацию, я делаю это в principle и уже после, передаю разработчику вместе со спецификацией. Хотя Figma также делает очень большие шаги в этом направлении.
Анимация кнопки Картинка из интернета
Седьмой этап — Контроль качества или Design Review
После того как дизайнер передал все материалы в разработку он не должен бросать продукт над которым работал. Через какое-то время когда разработчик реализовал в хотя бы один сценарий, дизайнер обязательно проверяет его и смотрит что там работает хорошо, а что не очень, то есть что пошло не так.
И обсуждает с разработчиком реализацию именно первичной идеи.
После того как вы провели Design Review, и решили что все что реализовано разработчиком работает хорошо. Только лишь тогда можно сказать, что ваш продукт готов к релизу. И вот здесь мы уже можем разговаривать о развитии продукта. И этот этап работы над дизайном будет циклически повторяться. Но в общем и целом мы рассмотрели основной дизайн процесс который необходимо пройти каждому дизайнеру и то как его прохожу я.
P.S. — Я решил начать этот 2022 год с чего-то полезного и это моя первая статья на vc.ru и я буду рад комментариям и поддержке: )
Онлайн-курсы по дизайну от Skillbox
Все направления Программирование Дизайн Маркетинг Управление Высшее образование Игры Кино и Музыка Психология Общее развитие Инженерия Английский язык Другое
Все программы Цифровой дизайн Дизайн Среды Мода и Фотография
Тип обучения на платформе
Профессия
Состоит из нескольких курсов, воркшопов и практикумов.
Вы сможете полностью освоить новую профессию с нуля, собрать портфолио, подготовить резюме и найти работу.
Курс
Состоит из нескольких модулей с видеоматериалами и практикой. Вы сможете изучить азы профессии, освоить конкретный навык или инструмент и добавить их в своё портфолио.
- Любой
- Профессия
- Курс
С трудоустройством
Профессии с помощью в трудоустройстве от Центра карьеры Skillbox. Вы научитесь правильно составлять резюме и презентовать свои умения работодателям. Подберём несколько вакансий и организуем собеседования.
Уровень сложности
- Любой
- Для новичков
- Для специалистов
Длительность
От 1 до 24 месяцев
Тематика
- 2D и 3D-графика
- 3D
- 3D-моделирование
- 3ds Max
- Adobe Illustrator
1С 2D и 3D-графика 3D 3D-анимация 3D-моделирование 3ds Max A/B тесты Ableton Ableton Live ADDIE Adobe Illustrator Adobe Premier After Effects Agile Android ArchiCAD AutoCAD Avid B2B B2C Backend-разработка Beauty C# C++ Cinema 4D Clo3D CRM CSS CustDev Data analytics Data Science Davinci DevOps Digital-агентства Django Docker E-commerce E-mail Ebitda EdTech Excel Fashion Fashion-баинг Fashion-дизайн Fashion-скетчинг Figma Frontend-разработка Git Golang Google Скрипты Google Таблицы HR HR-менеджер HRBP iOS IT-право Java JavaScript Jira Kotlin KPI Kubernetes Lightroom Linux LMS Machine Learning Miro Motion-дизайн MVP NPS OPEX и CAPEX ORM Pentest Performance-маркетинг Photoshop PHP Postman Power BI PR ProTools Python Revit RFM-анализ SAM Selenium WebDriver SEO Sketch SMM Soft Skills SQL Swift SWOT-анализ Symfony T&D/ L&D TikTok Unity Unreal Engine 4 UX/UI VR/AR Автоворонки Автоматизия Авторское право Адаптация Администрирование Актуальное 2023 Алгоритмы и структуры данных Анализ кадров Анализ рисков Аналитика Английский язык Анимация интерфейсов Астрономия Базы данных Беспилотие Бизнес Бизнес в индустрии красоты Бизнес-процессы Бренд Брокерство Бухгалтерия Быстро начать зарабатывать Бьюти Бюджетирование Веб-дизайн Веб-приложения Вебинар Вёрстка Взаимодействие с заказчиком Видео производство Визуализация данных ВКонтакте Внутренние коммуникации Геймдизайн Графика и анимация Графический дизайн Декорирование Десерты Дизайн интерфейсов Дизайн интерьера Дизайн среды Дизайн-документ Дизайн-концепция Дизайн-системы Забота о себе Зарабатывать на хобби Звукозапись Ивенты Игровые движки Инвестиции Инвестиционный портфель Информационная безопасность Искусственный интеллект Исследование аудитории История История кино Кадровое дело Киберспорт Кино Клиентский опыт Клиентский сервис Клипы Командная строка (Bash) Коммерция Коммуникация Коммьюнити Композиция и цвет Кондитер Конкурентный анализ Контекстная реклама Контент Контент-маркетинг Концепт-арт Корпоративная культура Корпоративное обучение Корпоративные финансы Коучинг Красиво рисовать и креативить Креатив Криптовалюта Кулинария Ландшафтный дизайн Лидогенерация Литература Личные финансы Макияж Макросы Макроэкономика Маркетинг Маркетинг игр Маркетплейсы Математика Медиапланирование Менеджер по продажам Менеджмент Методист Методогия BANT Методолог Метрики Мобильные приложения Модели проектирования Монетизация Монтаж Мотивация МСФО Налоги Начать своё дело Недвижимость Оборотный капитал Обработка фотографий Образовательные программы Обучение Общаться с людьми Онлайн-курсы Онлайн-платформы Оптимизация Организовывать людей Основы композиции Отдел продаж Отношения Отчеты Оформление презентаций Оценка Парикмахерская Патент Педагогика Писать крутые тексты Планирование Получить повышение Понятно объяснять Портфолио дизайнера Пошив Практические задания Предпринимательство Проверка гипотез Продажи Продукт Продюсер Продюсирование Продюсирование видео Продюсирование курсов Прототипирование Профориентация Процессный подход Работа с блогерами Работа с документами Работа с камерой Работа с таблицами Работать удалённо Развитие продукта Разобраться в науках, истории и философии Разобраться в себе и своих эмоциях Разработка игр Разработка концепции Рекрутмент Рендер движки Речевые практики Рисование и иллюстрация Робототехника Родительство РОП РСБУ Руководитель Русский язык Рынок ценных бумаг СJM Салон красоты Саморазвитие Саунд-дизайн Сведение и мастеринг Сделки Сервис Системная инженерия Скетчинг Собирать таблицы и документы Создание музыки Создание сайтов Создание сеттинга Спецэффекты Спорт Стартап Стать востребованным специалистом Сторителлинг Стратегия Студия Сценарий Считать и решать логические задачи Съемка на мобильный телефон Таргетированная реклама Творчество Текстурирование Теория музыки Тестирование Технический анализ Торговля на бирже Точка безубыточности Трафик Трейдинг Управление Управление изменениями Управление командами Управление командой Управление персоналом Управление продажами Управление проектами Управленческий учёт Фандрайзинг Философия Финансовая грамотность Финансовая модель Финансовая отчетность Финансовый анализ Финансовый менеджмент Финансы Флористика Фотография Фреймворки Фриланс Хобби Шрифты Эволюция Экономика Эффективность Ювелирный дизайн Юнит-экономика Язык R
Профессии (34)
Курсы (82)
Project Runway: спор Анны из-за скопированного дизайна
Дэниел Монтгомери dan_something
- Реалити шоу
Браво
«Проект Подиум» впервые в 20-м сезоне вызывает искренние споры. Пятая серия «Видение красного» была удачно названа, потому что закончилась напряженной, неудобной комнатой, полной дизайнеров, варящихся над результатами. Согласны ли вы с разгневанными участниками? Проголосуйте в нашем опросе внизу этого поста.
Испытание «Видение красного» было собственной идеей наставника Кристиана Сириано . В качестве проверки креативности дизайнеров их задачей было разработать любой образ, который они хотели — без ограничений — с единственным ограничением, что все они должны были использовать один и тот же рулон ткани. Никто не мог похвастаться перед судьями своими уникальными цветами, узорами или принтами. Это будет все о дизайне и конструкции каждого предмета одежды.
В споре участвовала Анна Чжоу . По ходу выполнения задания другие дизайнеры заметили, что она снова использует оборки, как и в соревновании с нетрадиционными материалами «Игра с модой».
Они думали, что она повторяется. В «Подиуме» нет ничего нового; участники все время бросают тень на выбор дизайна друг друга. Это стало проблемой, когда судьи признали образ Чжоу одним из лучших на конкурсе — даже Анна была в шоке, так как была уверена, что вылетит.
За кулисами разъярились конструкторы сейфов, особенно Корто Момолу , назвавшая решение судей «чушью» и заявившая, что с тем же успехом могла бы воссоздать свое победившее африканское платье из «Дня коронации», если бы им вдруг разрешили повторить дизайн. Но действительно ли Чжоу повторилась? Помимо общего элемента оборок, я подумал, что у этих двух образов есть существенные различия. Скульптурный эффект рюшей Чжоу «Видеть красный» был другим. Вырез был совсем другим. Длина была разная.
Я не дизайнер и не эксперт в области моды, но я видел, как в прошлом судьи хвалили образы, которые мне больше походили на повторы, чем этот. Было ли это действительно просто использование оборок? Проголосуйте ниже, если вы согласны со мной или хотите меня исправить.
Что вы думаете о внешности Чжоу?
Обязательно делайте свои прогнозы, чтобы участники могли увидеть, как они поживают в наших шансах на скачки. Вы можете менять свои прогнозы до каждого четверга, дня, когда она выходит в эфир. Вы будете соревноваться за место в нашей таблице лидеров и вечное право хвастаться. Ознакомьтесь с правилами нашего конкурса и пообщайтесь с другими фанатами на нашем форуме реалити-шоу. Читайте больше новостей о развлечениях Gold Derby.
Спойлеры 20-го сезона «Проекта Подиум»: кто был исключен, когда и почему?
Памяти Томаса Эйка (1964–2023)
Голландский дизайнер Томас Эйк скончался 4 июля 2023 года; этой новостью поделилась управляющий партнер его бренда Венди Гурен. «В окружении близких и оставивших нам прекрасные воспоминания жизнь Томаса подошла к концу. Нам будет его очень не хватать», — говорится в сообщении Гурена.
Эйк основал свой одноименный лейбл в 2007 году с коллекции Studio Job и сразу же стал фаворитом обоев*.
Благодаря своим хорошо продуманным дизайнерским изданиям он помог продвинуть карьеру некоторых звезд дизайна Нидерландов, от Альдо Баккера до Ирмы Бум, Стефана Шолтена и Кэрол Байджингс — в настоящее время бренд может похвастаться более чем 200 изделиями 20 дизайнеров, и его команда будет продолжить свое наследие под руководством Гурена.
Его философия дизайна основывалась на медленном подходе к дизайну: каждый год он выбирал нескольких дизайнеров, чья отличительная эстетика помогала органично и разнообразно развивать коллекцию бренда.
т.е. 092 Лейка. Альдо Баккер
(Изображение предоставлено Эриком и Петрой Хесмерг)
Его любовь к материалам возникла благодаря семилетнему опыту работы в Royal Tichelaar Makkum. О своем времени в компании он сказал: «Глина для керамики была вырыта всего в нескольких сотнях метров от фабрики. Это практически бесполезное сырье было обработано, смоделировано и окрашено, чтобы стать ценным продуктом. Я был очарован трансформацией: как с хорошим дизайном и правильными мастерами можно сделать что-то совершенно особенное из ничего.
С таким предметом я чувствую энергию и время, которые были вложены в его создание».
Левый, т.е. 018 ваза правая, т.е. 019 подсвечник, оба от Studio Job
(Изображение предоставлено Томасом Эйком)
Любопытный интерес Эйка к материалам нашел отражение в продуктах его бренда, которые были разработаны в результате нескольких бесед с дизайнерами и мастерами. Среди самых известных выпусков бренда — серия медных лейок от Aldo Bakker: изысканный объект, детали которого состоят из простой трубки, что способствует сильному графическому эффекту и выполняет все функции изделия, от удержания до наливания. «Я считаю, что союз дизайна и материала, а также тщательный процесс разработки продукта — от первой идеи до «последнего штриха» — очень важны», — сказал Эйк.
т.е. 174 ваза Хеллы Йонгериус
(Изображение предоставлено Томасом Эйком)
Постоянные сотрудники Эйка вспоминают его с любовью. Мы попросили некоторых из них поделиться воспоминаниями о времени, проведенном с ним, и их дружбе.
Хелла Йонгериус
«Мое лучшее воспоминание о Томасе связано с мероприятием, которое я провела в Токио, где я показала свои эмалированные тарелки ручной работы, сделанные Андо Шиппо», — говорит Хелла Йонгериус. «Внезапно передо мной оказался Фома со слезами на щеках; он сказал мне, что эстетика тарелки с птицей довела его до слез. Это тоже довело меня до слез, и мы обнялись, чтобы отпраздновать красоту».
Альдо Баккер
«Мы с Томасом познакомились, когда он еще работал на Тичалаара; они собирались открыть магазин и для этого купили у меня стеклянную посуду, самый большой заказ на сегодняшний день. Мы сразу нашли общий язык: мы узнали, что наши родители знали друг друга похожим образом», — вспоминает Баккер. «Мне будет не хватать бурного энтузиазма Томаса по поводу красивых вещей, то, как он выразился, было моментом облегчения и радости. Любовь Томаса к дизайну сопровождалась заразительной убежденностью в том, что он будет хорошо продаваться, что было для меня совершенно новым опытом».
0006
Филип Фиммано
«Мы с Ли Эделькорт опечалены известием о кончине Томаса Эйка — выдающегося провидца, который воплотил в жизнь дизайн-проекты, которые другие не осмелились воплотить», Филип Фиммано, — написал директор Trend Union/Studio Edelkoort в соцсетях студии.
Ник Винсон
Редактор Wallpaper* Ник Винсон с самого начала отстаивал бренд Eyck, демонстрируя его на страницах журнала на протяжении многих лет. «Впервые я столкнулся с Томасом, когда он оживлял Royal Tichelaar Makkum», — говорит Винсон. «После того, как он создал свой собственный бренд, мои поездки в Maison et Objet и Salone del Mobile всегда включали в себя медленное посещение Томаса: мне всегда нужно было знать, что он представляет и почему; его рассказы о разработках продуктов были опьяняющими. Я благодарен ему за то, что он познакомил меня с Альдо Баккером, одним из самых оригинальных и талантливых дизайнеров, работающих сегодня. Сегодня я позвонила Альдо и расплакалась».