Дизайн сделать: Дизайн квартиры онлайн: 8 бесплатных сервисов

Дизайн с нуля, как сделать дизайн сайта с нуля: пошаговая инструкция

Поставьте цель, проанализируйте ЦА и разработайте пользовательский сценарий

Для начала разберитесь, зачем вы делаете сайт.

Вот главные вопросы:

• о чем сайт;
• кто будет его целевой аудиторией;
• какие задачи он должен решать;
• какая структура должна быть у страниц по отдельности и сайта в целом;
• какой контент будет на веб-ресурсе;
• как веб-сайт будет продвигаться.

Эти же вопросы вы можете задавать заказчикам, когда будете делать сайты на заказ. 

Перед разработкой дизайна нужно продумать пользовательский сценарий. Он позволяет понять, как и зачем люди придут на сайт. Для разработки сценария нужно ответить на вопросы:

• Кто именно будет заходить на сайт — важно сегментировать аудиторию и проработать портрет клиента.
• Почему клиенты пользуются сайтом и какие цели они преследуют — например, просто узнать информацию или выбрать и купить товар.

Погружение в пользовательский опыт поможет сформулировать цель и разработать функциональный дизайн, а не просто красивое оформление контента. Например:

• Сайт-портфолио нужен потенциальным клиентам, чтобы знакомиться с работами исполнителя и оставлять заявки на сотрудничество. Самому исполнителю он нужен, чтобы рассказывать о себе и привлекать новые заказы. Сайт будет выполнять эти функции, если он демонстрирует, насколько хорошо специалист решает задачи клиентов, а значит, нужен акцент на успешные кейсы.
• Интернет-магазин нужен пользователям, чтобы выбирать и заказывать товары онлайн, а владельцу сайта — чтобы получать прибыль с этих покупок. Значит, нужно сделать такой дизайн страниц сайта, который будет комфортным для покупателей, чтобы им хотелось совершать покупки именно на этом сайте.
• Блог нужен пользователям, чтобы получать информацию на профессиональные, актуальные, развлекательные темы. Владелец блога хочет, чтобы на него шел постоянный трафик. Значит, требуется создание дизайна сайта, на котором удобно и размещать, и читать статьи, причем делать это регулярно.

Дизайн сайта, который опирается на хорошо прописанный сценарий, будет удобным для пользователя. Так, на сайте интернет-магазина покупатель выбирает товары, а затем оплачивает их. Ему хотелось бы сделать выгодные покупки, поэтому он решается на заказ не сразу. Сначала читает характеристики, рассматривает фото, видео, ищет отзывы, изучает комплектацию, подбирает для себя подходящий размер. Какие-то товары оставляет в избранном, чтобы потом вернуться и посмотреть еще раз. Какие-то товары хочет сравнить, чтобы точно быть уверенным, что выберет лучшее из всех предложенных вариантов. Все эти действия нужно учесть в создании дизайна для каталога сайта.

Все это нужно продумать самостоятельно или обсудить с заказчиком, если вы делаете дизайн для него. В конце подготовительного этапа у вас будет:

• короткое ТЗ;
• прототип с основным функционалом;
• план работы с четкими этапами, обязанностями и дедлайнами.

Выберите тип сайта

Лендинг

Одностраничный сайт, который быстро и эффективно продает продукт заказчика. Обычно лендинги бывают яркими, лаконичными. Для них важно продумать оформление и структуру, чтобы подвести пользователей к целевому действию: оставить контакты, заполнить заявку, зарегистрироваться, купить. Поэтому создаем дизайн сайта, который не перегрузит пользователя лишней информацией и в то же время поможет быстро принять нужное нам решение.

Первый экран лендинга тату-студии

Интернет-магазин

Цель такого ресурса — предоставить информацию о множестве товаров. Дизайнеру, программисту и копирайтеру нужно будет поработать над удобным каталогом и спроектировать простую и понятную страницу заказа. Нужно продумать витрину с корзиной, возможность оплаты, также важно поработать над UX-дизайном и юзабилити.

Дизайн сайта интернет-магазина Lamoda

Сайт-витрина

Витрина напоминает интернет-магазин, но без системы оплаты. На сайте присутствует только каталог изделий. Здесь важно продумать расположение товаров и выделить контакты консультанта, чтобы пользователям было удобно позвонить и сделать заказ. Такой тип сайта подходит, например, автосалонам:

Дизайн сайта-витрины Audi. Источник

Корпоративный сайт

Компаниям нужен корпоративный сайт, чтобы рассказать о себе клиентам и ответить на вопросы:

• кто мы;
• чем занимаемся;
• какова наша миссия;
• какие задачи мы решаем;
• как с нами связаться.

У сайта обязательно должна быть четкая структура, чтобы пользователи нашли ответы на все вопросы и не запутались. Поэтому особенно важно уделить внимание страницам о компании, портфолио, контактам, блогу. Причем, у заказчика уже может быть разработан фирменный стиль. Тогда дизайнеру нужно просто придерживаться брендбука или гайдлайна.

Дизайн корпоративного сайта брендингового агентства Funky

Портал

Это веб-ресурс, который объединяет функции блога и сервиса. Он имеет разветвленную структуру поэтому дизайнеру нужно продумать внешний вид всех разделов, например, форум, вакансии, новости, услуги. Чтобы получилось удобно, нужно уделить особое внимание UI и провести тестирование.

Портал Госуслуг

Проведите анализ конкурентов

Конкурентов нужно изучать как минимум потому, что пользователь принимает решение, также изучая сайты других компаний. Это поможет дизайнеру:

• Сделать выводы о ситуации на рынке. Кто и какие товары продает, кто лидирует, на какие сегменты целевой аудитории ориентируются конкуренты. Эта информация может быть у заказчика или придется самостоятельно анализировать рынок.
• Продумать функционал веб-сайта. Нужно понять, в чем сайт будет похож на ресурсы конкурентов, а в чем будет отличаться.
• Продумать визуал сайта. Не нужно делать что-то «не как у всех», чтобы бы выделиться. К некоторым вещам люди привыкли, и для них новое будет восприниматься как непонятное, а это отрицательно скажется на пользовательском опыте. Поэтому в создании визуала не нужно изобретать велосипед. Можно брать хорошие рабочие решения в дизайн-проект сайта.

На что обращать внимание в первую очередь при анализе чужих веб-ресурсов перед тем, как делать дизайн сайта:

• какой пользовательский сценарий реализован, как построена структура сайта;
• сам дизайн — цветовые решения, композиция, иллюстрации, анимация.

Иногда кажется, что конкурентов у компании нет. Например, когда речь идет о стартапе. В этом случае полезно изучать другие веб-ресурсы, например, сайты смежных ниш. Всю информацию обязательно группировать в майндмэп. Для этого лучше воспользоваться специальными сервисами и программами, такими как XMind (программное обеспечение для проведения мозговых штурмов и составления интеллект-карт), MindMeister (онлайн-программа для создания интеллект-карт, которая помогает визуально фиксировать и развивать информацию).

В приложении XMind можно составлять интеллект-карты, которые помогут при разработке дизайна сайта

При разработке интерфейса можно делать зарисовки, в том числе от руки, и обязательно проверять, насколько решения удобны обычным пользователям. Помните, что каждый элемент интерфейса призван решать определенную задачу.

Соберите референсы

Новичкам бывает сложно работать без примеров перед глазами. Но важно не повторить идеи, а обращать внимание на удачные решения и воплощать их по-своему. Опытным дизайнерам тоже нужны референсы, чтобы заранее обсудить желания заказчика и выбрать решения, которые соответствуют цели. Чем точнее получится подобрать примеры, тем меньше будет правок. Для вдохновения можно посмотреть ленту Pinterest, Behance или Awwwards.

Вдохновение для создания дизайна собственного сайта можно искать на Behance 

Подготовьте визуальную концепцию

Можно прописать концепцию текстом или дополнить ее мудбордом. Он выглядит как набор изображений, оттенков, фраз, снимков, других деталей. Все это создаст общее настроение и поможет составить представление о будущем дизайне сайта.

Мудборд можно собирать в Pinterest

Подберите цвета

Если у компании уже есть фирменный стиль, то за основу можно взять фирменные цвета. Но если нужно разрабатывать палитру, стоит воспользоваться рекомендациями профессионалов. Например, можно поискать идеи в книге Йоханнеса Иттена «Искусство цвета».

Вот несколько правил сочетания цветов:

• Особенности целевой аудитории — предпочтения, характер, желаемое эмоциональное воздействие.
• Количество цветов — страница сайта не должна быть слишком пестрой, иначе это запутает пользователя. Он забудет, зачем пришел, не сможет получить нужную информацию или не совершит целевое действие. Лучше выбрать базовый неконтрастный цвет, пару цветов для акцентов и черный или темный — для текста.
• Объем цветов. Чем более активный и контрастный цвет, тем его должно быть меньше. Поэтому для фона выбирают белый или другой светлый, нейтральный цвет, а яркими цветами выделяют важные заголовки или кнопку.

Подберите типографику сайта

• Выберите шрифтовую пару. Лучше, когда на веб-сайте использовано не больше двух шрифтов. Три, пять — это уже перебор. Идеально, когда шрифты — из одной гарнитуры. Еще гармонично смотрятся сочетания шрифтов с засечками и без.
• Сформируйте гайдлайны. Здесь нужно отталкиваться от контента. Будет ли это просто текст, или вы хотите сделать врезки, подписи и прочие элементы. Заголовки должны быть контрастными, это помогает читателю быстрее ориентироваться в контенте. Основной текст должен быть легко читаемым, не крупным, но и не слишком мелким.
• Придерживайтесь составленного плана. Новый стиль текста не нужно добавлять просто так. Только в том случае, если в этом есть серьезная необходимость или какой-то контент невозможно оформить теми стилями, что уже выбрали.

Подготовьте прототип 

Прежде чем создавать финальную версию сайта, нужно собрать прототип и протестировать его на целевой аудитории, затем доработать. И только после этого можно приступать непосредственно к верстке. Можно найти примеры прототипов в Figma Community и даже использовать их как шаблоны:

Прототип сайта Game Boy. Источник

На этапе прототипа стоит поработать над контентом. Важно, чтобы текстом занимался специалист, который понимает пользователей и имеет знания в области UX. Нужно создать контент, который упростит пользовательский путь и приведет к нужному результату.

Чем более детализированный прототип, тем лучше. Дальше можно тестировать на целевой аудитории, проводить анализ пользовательского интерфейса и по результатам дорабатывать.

Подготовьте иллюстрации и составьте ТЗ для верстальщика

Важно правильно подготовить материалы для верстальщика, чтобы готовый сайт был максимально похож на макет. Спросите, в каком формате нужны иллюстрации и логотипы, не забудьте прикрепить файлы со шрифтами и правильно переименовать файлы. В идеале все необходимое для верстки должно быть в одной папке. В ТЗ нужно прописать:

• как элементы сайта должны вести себя при масштабировании;
• какие есть сценарии анимаций;
• особые пожелания, уточнения, дополнения.

Создайте веб-сайт

Сайт можно создать на различных платформах. Сегодня есть способы даже для тех, кто не знаком с веб-версткой. Например, можно нанять разработчика и сделать сайт под ключ. Но придется самостоятельно оплачивать аренду хостинга. разбираться в проблемах сервера, и привлекать специалиста для обслуживания, если поломался код. А можно пользоваться конструкторами, например:

• Tilda — один из самых популярных конструкторов сайтов; поможет, если нужно создать достаточно функциональный и удобный для пользователей сайт без привлечения программиста и верстальщика.
• Readymag — недорогой и удобный онлайн-инструмент, с которым можно создавать простые сайты, лендинги прямо в браузере, то есть вы сразу же увидите, как будет выглядеть сайт в итоге.

Проверьте сайт с разных устройств, запустите трафик, проведите A/B-тестирование

Убедитесь в функциональности готового сайта. Когда дизайн готов, а сайт сверстан, нужно открыть его с разных устройств и посмотреть, насколько корректно все работает. Обычно требуется несколько итераций, чтобы исправить ошибки и мелкие недочеты. 

Красивый и функциональный дизайн сайта: советы

Эти советы по дизайну сайта помогут сделать финальный чекап и оценить, насколько получившийся сайт хорош.

• Учитывайте ожидания потенциальных клиентов. Если это сайт строительной компании, то люди ждут аккуратности и пунктуальности. От юристов ждут строгости и умения решить любой вопрос. 
• Применяйте модульную сетку в дизайне. Рисуют сетку горизонтальную и вертикальную, и по ее линиям компонуют элементы. Это самый простой ответ на вопрос, как сделать красивый дизайн сайта. 
• Учитывайте правило близости. Оно означает, что рядом стоящие элементы человек воспринимает как связанные. Рядом нужно располагать объекты, которые объединены между собой по смыслу: заголовок и основной текст, например. 
• Помните про воздух. Между элементами должно быть пространство. Исключением могут быть концептуальные сайты, где объекты намеренно расположены рядом. Но обычно желание уместить все и сразу — как попытка надеть все украшения на все пальцы. Это не просто безвкусно, но еще и сложно воспринимать. Пользователь просто закроет такой сайт и не сможет решить свои задачи.
• Будьте сдержанными. Не стоит перебарщивать в попытке сделать красивый визуал. Обилие шрифтов, оттенков, геометрических форм может усложнить пользовательский сценарий. Перед тем как добавить тот или иной элемент, спрашивайте себя: точно ли он решает какую-то задачу или просто захотелось заполнить пустоту? Сайт должен быть в первую очередь функциональным, в этом и заключается вся красота.
• Создавайте адаптивный дизайн. Сейчас сайты просматривают в первую очередь с телефонов, и адаптировать ресурсы нужно с учетом этого. В то же время важно, чтобы и с экранов компьютеров, ноутбуков, планшетов все элементы хорошо читались, кнопки нажимались, важные блоки не уезжали за края экрана.
• Выбирайте подходящие под концепцию изображения. Хорошо использовать реальные фотографии заказчика — это внушает больше доверия со стороны пользователей. В то же время можно воспользоваться фотостоками, так как сделать хороший дизайн для сайта можно и без снимков от заказчика. Важно, чтобы картинки были хорошего качества, подходили по смыслу и помогали пользователям совершать целевые действия на ресурсе.
• Делайте акцент на действии. На каждой веб-странице пользователь должен что-то сделать: оставить заявку, заполнить анкету, купить, посмотреть работу, прочитать статью. В идеале весь контент страницы должен логичным образом подводить к этому действию. Так как правильно — создавать дизайн сайта, который будет работать на цель, а не просто выполнять декоративную функцию.

Как сделать удобную дизайн-систему. Цвета. Часть 1 / Хабр

Дизайн-система позволяет быстро взаимодействовать с компонентами, легко вносить изменения во все макеты и в целом прививает дизайнеру навык организации больших объемов информации.

Зачастую, дизайнер начинает делать дизайн-систему аккуратно, придавая ей должное внимание. Но в по мере увеличения экранов становится, как мне кажется, морально труднее вносить новые компоненты и корректировки. Но помните одну вещь — чем больше времени уделить дизайн-системе, тем больше времени она сэкономит в будущем.

Основное правило дизайн-систем: чем меньше компонентов — тем лучше и вам, разработчику и конечному юзеру. Это касается количества цветов, шрифтов, иконок и так далее. Дизайн будет выглядеть более консистентным и единым.

Цвета

Цвета нужны не только для того, чтобы показать как выглядит ваш дизайн, но они также вызывают эмоции от использования продукта или сервиса, показывают персонализацию вашего бренда и буквально «разговаривают» с пользователем.

Определите цветовую палитру

Определение цветовой палитры очень важный этап в построении дизайн-системы, но часто этот процесс вызывает трудности. Настроение, эмоции, запоминаемость — все это цвета.

Базовая цветовая палитра должна содержать в себе следующие оттенки: нейтральный (Neutral) , главный (Primary) , акцентный (Secondary) и «обратная связь» (Feedback).

Вам не нужно делать по 50 оттенков каждого цвета. Это даст только путаницу, но никак не пользу. Вместо этого постарайтесь сделать около 6-12 и используйте один цвет в одном и том же месте на всех макетах.

Например, обводка инпута в дефолтном состоянии на первом экране «Neutral / 300». Тогда на следующих экранах она должна быть точно такая же.

Нейтральный (Neutral) в основном применяется в дефолтных или выключенных состояниях элементов. Обычно, это оттенки серого или синего.

Палитра «Neutral»

Базовый (Primary) используется для интерактивных элементов, где требуется максимальный фокус юзера. В основном используется для элементов активном состоянии. Вы можете иметь больше чем один базовый цвет, но лучше начинать с одного.

Палитра «Primary»

Акцентные (Secondary) используются для поддержки базового цвета. Могут использоваться для бейджей или лейблов.

Цвета обратной связи (Feedback) нужны для того, чтобы визуально сообщать пользователю о результатах его возможных действий. Ошибку или критическое действие (Error) показывают красным цветом. Например, удаление строки данных из таблицы. Предупреждение (Warning) — оранжевым. Успех (Success) — зелёным.

Палитра «Error»Палитра «Warning»Палитра «Success»

Определите цветовую палитру перед тем, как начнёте делать следующие экраны

Большое количество дизайнеров попадают в неудобную ситуацию, в процессе создания UI без стилей цветов. Когда экранов становится больше — возникнет «пипеточная» ситуация. Придётся прыгать от одного макета к другому, чтобы взять такой же цвет.

Чтобы этого не возникло представим, что вы сделали первый экран, на котором есть модальное окно календаря (взял в пример его так как там обширное количество цветов).

Затем вы последовательно начинаете создавать стили для каждого цвета помня об иерархии о которой рассказывалось выше и применяете на следующих макетах.

Нейминг: «Neutral / 300».

С «Neutral» все понятно, но кто такой этот «300»? Эти цифры созданы исключительно для ориентации и коннекта с между дизайнером и

. Обычно названия начинаются со 100 и заканчиваются на 900. Шаг зависит от того, сколько у вас цветов. 100 — самый светлый оттенок цвета. 900 — самый тёмный. В шрифтах такая же ситуация, только 100 — самое тонкое начертание, а 900 — толстое.

Figma позволяет удобно разделять стили по папкам с помощью слэша «/». Пользуйтесь этим, чтобы создать правильную иерархию.

Контраст

При выборе цветовой палитры нужно всегда держать в голове доступность для пользователей вашего интерфейса. Не каждый юзер имеет хорошее зрение или монитор 4К. Хороший UI должен быть хорошим для всех.

Одним из главных пунктов в доступности является контраст.

Хорошим способом проверять насколько ваш текст контрастен на том или ином фоне является сравнение с помощью рекомендаций Web Content Accessibility Guidelines (WCAG) 2. 1.

В Figma Community вы можете найти большое количество плагинов для анализа контраста. Я предпочитаю плагин, который изображен ниже.

Как понять какой контраст мне подходит?

Лучше всего когда ваш контраст соответствует уровню AA для большинства элементов в UI.

Итог

Выбор цветов влияет на восприятие продукта, его доступность и запоминаемость.

Главное, уделить должное внимание этим вещам, так как если этого не сделать, вы обретете себе проблем в будущем, когда количество экранов будет тяжело сосчитать.

***

Behance | Dribbble | Telegram

Дизайн для действия

Краткая идея

Проблема

Сложные новые конструкции продуктов (скажем, электромобиля) или систем (например, школьная система) обычно с трудом получают признание. Многие хорошие новаторские идеи терпят неудачу в стартовых воротах.

Почему это происходит

Новые продукты и системы часто требуют от людей изменения устоявшихся бизнес-моделей и моделей поведения. В результате они сталкиваются с жестким сопротивлением со стороны своих предполагаемых бенефициаров и людей, которые должны их доставлять или эксплуатировать.

Решение

Относитесь к внедрению нового продукта или системы — «спроектированного артефакта» — как к задаче проектирования. Когда Intercorp Group в Перу применила этот подход, она добилась принятия новой концепции школы с использованием технологий, в которой учитель способствует обучению, а не выступает в качестве единственного поставщика уроков.

На протяжении большей части истории проектирование представляло собой процесс, применяемый к физическим объектам. Раймонд Лоуи проектировал поезда. Фрэнк Ллойд Райт проектировал дома. Чарльз Имс проектировал мебель. Коко Шанель создавала одежду от кутюр. Пол Рэнд разработал логотипы. Дэвид Келли разработал продукты, в том числе (наиболее известную) мышь для компьютера Apple.

Но когда стало ясно, что умный и эффективный дизайн лежит в основе успеха многих коммерческих товаров, компании начали использовать его во все большем количестве контекстов.

Высокотехнологичные фирмы, которые нанимали дизайнеров для работы над аппаратным обеспечением (скажем, чтобы придумать форму и компоновку смартфона), начали просить их создать внешний вид программного обеспечения пользовательского интерфейса. Затем дизайнеров попросили помочь улучшить пользовательский опыт. Вскоре фирмы стали рассматривать разработку корпоративной стратегии как упражнение в дизайне. Сегодня дизайн даже применяется, чтобы помочь нескольким заинтересованным сторонам и организациям работать лучше как система.

Это классический путь интеллектуального прогресса. Каждый процесс проектирования является более сложным и изощренным, чем предыдущий. Каждый из них был включен в результате изучения предыдущего этапа. Дизайнеры могли легко обратить свое внимание на графические пользовательские интерфейсы для программного обеспечения, потому что у них был опыт проектирования оборудования, на котором будут работать приложения. Создав лучший опыт для пользователей компьютеров, дизайнеры могли легко использовать нецифровой опыт, например посещения больниц пациентами.

И как только они узнали, как изменить пользовательский опыт в одной организации, они были более подготовлены к целостному опыту в системе организаций. Объединенный школьный округ Сан-Франциско, например, недавно сотрудничал с IDEO, чтобы помочь изменить дизайн кафетерия во всех своих школах.

По мере того, как дизайн все дальше отходил от мира продуктов, его инструменты были адаптированы и расширены в отдельную новую дисциплину: дизайн-мышление. Возможно, лауреат Нобелевской премии Герберт Саймон начал работу с классической книгой 1969 года «Науки об искусственном», в которой дизайн характеризовался не столько как физический процесс, сколько как способ мышления. А Ричард Бьюкенен сделал новаторский шаг вперед в своей статье 1992 года «Острые проблемы в дизайн-мышлении», в которой он предложил использовать дизайн для решения чрезвычайно настойчивых и сложных задач.

Но по мере увеличения сложности процесса проектирования возникает новое препятствие: принятие заинтересованными сторонами того, что мы могли бы назвать «спроектированным артефактом» — будь то продукт, взаимодействие с пользователем, стратегия или сложная система. На следующих страницах мы объясним эту новую задачу и продемонстрируем, как дизайн-мышление может помочь стратегическим и системным новаторам воплотить в жизнь новые миры, которые они себе представляли. На самом деле, мы утверждаем, что в случае очень сложных артефактов дизайн их «вмешательства» — их внедрение и интеграция в существующее положение вещей — даже более важен для успеха, чем дизайн самих артефактов.

Новый вызов

Запуск нового продукта, похожего на другие предложения компании, например, гибридной версии существующей модели автомобиля, обычно рассматривается как положительный момент. Это приносит новый доход и мало ощутимых недостатков для организации. Новый автомобиль не вызывает каких-либо значимых изменений в организации или в том, как работают ее люди, поэтому его дизайн по своей сути не угрожает чьей-либо работе или нынешней структуре власти.

В своей книге «Наброски пользовательского опыта» пионер пользовательского интерфейса Билл Бакстон описывает Apple iPod как «мгновенный успех», на который ушло три года. Он документирует множество изменений в конструкции устройства, которые произошли после его запуска и были необходимы для его окончательного успеха.

Как показывает эта история, искушенный дизайнер понимает, что задача состоит в том, чтобы сначала добиться принятия новой платформы пользователями, а затем добавить новые функции. Когда Джефф Хокинс разработал PalmPilot, первого в мире успешного персонального цифрового помощника, он настаивал на том, чтобы он сосредоточился только на трех вещах — календаре, контактах и ​​заметках, — потому что он чувствовал, что пользователи изначально не могли справиться с большей сложностью. Со временем PalmPilot развился и стал включать в себя гораздо больше функций, но к тому времени основной рынок понял этот опыт. Первоначальная идея iPod была очень простой: «1000 песен у вас в кармане». Магазин iTunes, фотографии, игры и приложения появились позже, когда пользователи приняли платформу и приветствовали ее сложность.

По мере того, как стратегии и большие системы становятся центром дизайнерского мышления, представление о запуске как об одном из многих шагов по внедрению новой концепции становится еще более важным.

Перед запуском дизайнеры столкнутся с возрастающей сложностью диалогов как с предполагаемыми пользователями артефакта, так и с лицом, принимающим решения, ответственным за проектирование. Будет представлено решение с намеренно более низкой сложностью, но оно будет развиваться по мере отклика пользователей. Итерация и явная роль пользователей будут ключевой частью любого проекта вмешательства.

Новые информационные и вычислительные технологии значительно упростят создание и обмен ранними прототипами, даже если они представляют собой сложные системы, а также получение отзывов от более разнообразного населения пользователей. В этом новом мире запуск нового дизайна перестает быть в центре внимания. Скорее, это всего лишь один шаг где-то в середине тщательно разработанного вмешательства.

— Тим Браун

Конечно, вводить что-то новое всегда волнительно. Гибрид может потерпеть неудачу на рынке. Это было бы дорого и неудобно. Это может привести к поэтапному отказу от других автомобилей в портфолио, что вызовет тревогу у тех, кто поддерживает старые модели.

Тем не менее, дизайнер обычно мало внимания уделяет таким проблемам. Ее работа состоит в том, чтобы создать по-настоящему отличный новый автомобиль, а цепные эффекты возлагаются на других — людей из отдела маркетинга или отдела кадров.

Однако чем сложнее и менее осязаем спроектированный артефакт, тем меньше возможностей для дизайнера игнорировать его потенциальные волновые эффекты. Возможно, даже потребуется изменить саму бизнес-модель. Это означает, что введение нового артефакта также требует внимания к дизайну.

Рассмотрим следующий пример. Пару лет назад MassMutual пыталась найти новаторские способы убедить людей моложе 40 лет покупать страховку жизни — общеизвестно, что это трудно продать. Стандартным подходом было бы разработать специальный продукт страхования жизни и продавать его обычным способом. Но MassMutual пришла к выводу, что это вряд ли сработает. Вместо этого компания работала с IDEO над созданием совершенно нового типа клиентского опыта, более широко ориентированного на обучение людей долгосрочному финансовому планированию.

«Общество взрослых», запущенное в октябре 2014 года, было задумано как «магистерская программа для взрослых». Вместо того, чтобы предоставлять его исключительно в виде онлайн-курса, компания сделала его многоканальным, с современными цифровыми инструментами бюджетирования и финансового планирования, офисами с классными комнатами и библиотекой, которую клиенты могли посещать, и учебным планом, который включал все от инвестирования в 401 (k) до покупки хорошего вина. Такой подход сильно нарушал нормы и процессы организации, поскольку требовал не только нового бренда и новых цифровых инструментов, но и новых методов работы. Фактически, каждый аспект организации должен был быть переработан для новой услуги, которая должна развиваться по мере того, как участники предоставляют MassMutual новое понимание своих потребностей.

Когда речь идет об очень сложных артефактах — скажем, о целой бизнес-экосистеме — проблемы интеграции нового дизайна становятся еще более серьезными. Например, успешное внедрение беспилотных транспортных средств потребует от производителей автомобилей, поставщиков технологий, регулирующих органов, городских и национальных органов власти, сервисных фирм и конечных пользователей нового сотрудничества и нового поведения. Как страховщики будут работать с производителями и пользователями для анализа рисков? Как будут передаваться данные, собранные с беспилотных автомобилей, для управления транспортными потоками и защиты конфиденциальности?

Новые модели такого масштаба пугают. Неудивительно, что многие по-настоящему инновационные стратегии и системы оказываются где-нибудь на полке, так и не приняв никаких мер. Однако если вы подходите к крупномасштабным изменениям как к двум одновременным и параллельным задачам — разработке рассматриваемого артефакта и разработке вмешательства, которое воплотит его в жизнь, — вы можете увеличить шансы на то, что оно приживется.

Проектирование вмешательства

Проектирование вмешательства органично выросло из итеративного прототипирования, которое было введено в процесс проектирования как способ лучше понять и предсказать реакцию клиентов на новый артефакт. При традиционном подходе разработчики продукта начинали с изучения пользователя и создания описания продукта. Затем они усердно работали над созданием потрясающего дизайна, который фирма выпустила на рынок. В ориентированном на дизайн подходе, популяризированном IDEO, работа по пониманию пользователей была более глубокой и более этнографической, чем количественной и статистической.

Изначально это было существенное различие между старым и новым подходами. Но в IDEO поняли, что независимо от того, насколько глубоким было предварительное понимание, дизайнеры не смогут предсказать реакцию пользователей на конечный продукт. Таким образом, дизайнеры IDEO начали повторно взаимодействовать с пользователями раньше, отправляя им прототип с очень низким разрешением, чтобы получить раннюю обратную связь. Затем они продолжали повторять процесс короткими циклами, неуклонно улучшая продукт, пока пользователь не остался в восторге от него. Когда клиент IDEO фактически запустил продукт, его успех был почти гарантирован — явление, которое помогло быстрому прототипированию стать передовой практикой.

Дальнейшее чтение

Итеративное быстрое прототипирование не только улучшило артефакт. Это оказалось очень эффективным способом получить финансирование и организационные обязательства для вывода нового артефакта на рынок. Новый продукт, особенно относительно революционный, всегда предполагает последовательную ставку со стороны команды менеджеров, дающую ему зеленый свет.

Часто страх перед неизвестностью убивает новую идею. Однако при быстром прототипировании команда может быть более уверена в успехе на рынке. Этот эффект оказывается еще более важным для сложных неосязаемых конструкций.

При разработке корпоративной стратегии, например, традиционный подход заключается в том, что стратег — штатный или консультант — определяет проблему, разрабатывает решение и представляет его ответственному руководителю. Часто у этого руководителя возникает одна из следующих реакций: (1) Это не решает проблемы, которые я считаю критическими. (2) Это не те возможности, которые я бы рассматривал. (3) Это не те вещи, которые я бы изучал. (4) Это не убедительный ответ для меня. Как следствие, завоевание приверженности стратегии, как правило, является скорее исключением, чем правилом, особенно когда стратегия представляет собой значимое отклонение от статус-кво.

Ответ: итеративное взаимодействие с лицом, принимающим решения. Это означает, что нужно заранее обратиться к ответственному руководителю и сказать: «Мы думаем, что это проблема, которую нам нужно решить; насколько это соответствует вашей точке зрения?» Вскоре после этого разработчики стратегии снова возвращаются и говорят: «Вот возможности, которые мы хотим исследовать, учитывая постановку проблемы, с которой мы согласились; в какой степени они представляют собой возможности, которые вы себе представляете? Мы что-то пропустили, и есть ли какие-то, которые мы рассматриваем для вас, как нестартовые?» Позже дизайнеры возвращаются еще раз, чтобы сказать: «Мы планируем провести анализ возможностей, которые, как мы договорились, стоит изучить; в какой степени они являются анализами, которые вы хотели бы сделать, и мы что-то упустили?»

При таком подходе последний шаг внедрения новой стратегии становится почти формальностью. Исполнительный директор, ответственный за ее зеленое освещение, помог определить проблему, подтвердить возможности и подтвердить результаты анализа. Предлагаемое направление больше не является толчком от левого поля. Он постепенно завоевал приверженность на протяжении всего процесса своего создания.

Когда задача состоит в том, чтобы внести изменения в систему — например, путем создания нового вида бизнеса или нового типа школы — взаимодействие должно распространяться еще дальше, на все основные заинтересованные стороны. Теперь мы рассмотрим пример такого плана вмешательства, который включал крупный эксперимент в области социальной инженерии, проводимый в Перу.

Проектирование нового Перу

Intercorp Group — одна из крупнейших корпораций Перу, контролирующая почти 30 компаний в самых разных отраслях. Его генеральный директор Карлос Родригес-Пастор-младший унаследовал компанию от своего отца, бывшего политического изгнанника, который по возвращении в 1994 году возглавил консорциум, купивший у правительства один из крупнейших банков Перу, Banco Internacional del Peru. Родригес-Пастор получил контроль над банком после смерти своего отца в 1995 году.

Родригес-Пастор хотел быть больше, чем просто банкиром. Его целью было помочь преобразовать экономику Перу, создав средний класс. В недавно переименованном Interbank он увидел возможность как для создания рабочих мест для среднего класса, так и для удовлетворения потребностей среднего класса. Однако с самого начала он понял, что не сможет достичь этой цели с помощью подхода «великого человека» к стратегии, характерного для крупных конгломератов, контролируемых семьями, которые часто доминируют в странах с развивающейся экономикой. Для ее достижения потребуется тщательно спланированное участие многих заинтересованных сторон.

Посев культуры инноваций.

Первой задачей было сделать банк конкурентоспособным. За идеями Родригес-Пастор решил обратиться к ведущему финансовому рынку своего полушария, США. Он убедил аналитика из американской брокерской фирмы позволить ему присоединиться к туру инвесторов по американским банкам, хотя Interbank не был одним из клиентов брокера.

Если бы он хотел построить бизнес, который мог бы спровоцировать социальные изменения, одного усвоения некоторых идей и принесения их домой было бы недостаточно, понял Родригес-Пастор. Если бы он просто навязывал свои собственные идеи, их поддержка во многом зависела бы от его авторитета, а не от контекста, способствующего социальной трансформации. Он нуждался в том, чтобы его менеджеры тоже научились развивать идеи, чтобы они также могли замечать и использовать возможности для продвижения его более широких амбиций. Поэтому он уговорил аналитика разрешить четырем своим коллегам присоединиться к поездке.

Этот инцидент стал символом его активного подхода к разработке стратегии, который позволил Родригесу-Пастору создать сильную, инновационную управленческую команду, которая поставила банк на конкурентоспособную основу и диверсифицировала компанию за счет ряда предприятий, обслуживающих средний класс: супермаркеты, универмаги, аптеки и кинотеатры. К 2015 году Intercorp, группа, созданная вокруг Interbank, насчитывала около 55 000 человек и прогнозировала выручку в размере 5 миллиардов долларов.

За прошедшие годы Родригес-Пастор расширил свои инвестиции в обучение управленческой команды. Каждый год он отправлял менеджеров на программы в лучшие школы и компании (такие как Гарвардская школа бизнеса и IDEO) и работал с этими учреждениями над разработкой новых программ для Intercorp, отбрасывая идеи, которые не сработали, и дорабатывая те, которые сработали. Совсем недавно Intercorp совместно с IDEO запустила собственный дизайн-центр La Victoria Lab. Расположенный в перспективном районе Лимы, он служит ядром растущего городского инновационного центра.

Но Родригес-Пастор не остановился на создании инновационной бизнес-группы, ориентированной на потребителей среднего класса. Следующим шагом в его плане социальной трансформации был вывод Intercorp за пределы традиционной сферы бизнеса.

Из кошельков в сердца и умы.

Хорошее образование имеет решающее значение для процветания среднего класса, но Перу сильно отставала в этом отношении. Государственные школы страны были плачевными, а частный сектор не лучше готовил детей к будущему среднего класса. Если это не изменится, положительный цикл производительности и процветания вряд ли возникнет. Родригес-Пастор пришел к выводу, что Intercorp придется заняться образовательным бизнесом с ценным предложением, ориентированным на родителей из среднего класса.

Дальнейшее чтение

Завоевать общественное признание для этого предприятия было настоящим испытанием, которое осложнялось тем фактом, что образование — это всегда минное поле корыстных интересов. Таким образом, план вмешательства будет иметь решающее значение для успеха школ. Родригес-Пастор тесно сотрудничал с IDEO, чтобы составить план одного из них. Они начали с подготовки заинтересованных сторон, которые вполне могли не согласиться с идеей крупной бизнес-группы, управляющей школами для детей, — спорное предложение даже в такой благоприятной для бизнеса стране, как Соединенные Штаты.

Первым шагом Intercorp стало учреждение в 2007 году премии «Учитель, оставивший след», вручаемой лучшему учителю в каждом из 25 регионов страны. Он быстро стал известен, отчасти потому, что каждый учитель, получивший его, также выиграл автомобиль. Это подтвердило неподдельный интерес Intercorp к улучшению образования в Перу и помогло учителям, государственным служащим и родителям принять идею сети школ, принадлежащих компании.

Затем, в 2010 году, Intercorp приобрела небольшой школьный бизнес под названием San Felipe Neri, которым управляет предприниматель Хорхе Изуски Чессман. Имея одну действующую школу и еще две в разработке, у Чессмана были планы по развитию, но опыт Intercorp в построении крупномасштабного бизнеса в Перу мог вывести это предприятие далеко за пределы того, что он предполагал. Однако предприятию пришлось перестроить существующую модель, для чего требовались высококвалифицированные учителя, которых в Перу крайне не хватало. Родригес-Пастор объединил менеджеров из других своих предприятий — например, эксперта по маркетингу из своего банка, эксперта по инфраструктуре из своей сети супермаркетов — с IDEO для создания новой модели Innova Schools. Это могло бы предложить отличное образование по цене, доступной для семей среднего класса.

Команда запустила шестимесячный процесс проектирования, ориентированный на человека. В нем приняли участие сотни учащихся, учителей, родителей и других заинтересованных сторон, которые изучали их потребности и мотивы, вовлекали их в тестирование подходов и запрашивали их отзывы о планировке класса и взаимодействии. Результатом стала технологическая модель, включающая такие платформы, как первопроходец онлайн-образования в США Khan Academy. В нем учитель позиционировался как фасилитатор, а не как единственный поставщик урока.

Проблема планирования вмешательства заключалась в том, что родители могли возражать против того, чтобы их дети учились с помощью ноутбуков в классе, а учителя могли возражать против идеи поддержки обучения, а не руководства им. Поэтому после шести месяцев подготовки Innova запустила полномасштабный пилотный проект и привлекла родителей и учителей для его разработки и запуска.

Пилотный проект показал, что учащимся, родителям и учителям понравилась модель, но некоторые предположения были далеки от истины. Родители не возражали против педагогического подхода; на самом деле, они настаивали на том, чтобы ноутбуки не забирали в конце пилота. Кроме того, 85% учащихся использовали ноутбуки во внеурочное время. Модель была изменена на основе выводов пилотного проекта, и родители и учителя стали активными сторонниками модели Innova в близлежащих районах.

Молва распространилась, и вскоре школы были полностью зачислены еще до того, как они были построены. Поскольку Innova славилась инновациями, учителя хотели там работать, хотя платили меньше, чем в государственной системе. Имея 29 действующих школ, Innova в настоящее время находится на пути к достижению своей цели в 70 школ к 2020 году и планирует выйти на все рынки в Перу и даже на рынки за пределами страны.

Распространение богатства.

Если бы Intercorp следовала общепринятой деловой мудрости, она сосредоточилась бы на более богатых районах столицы страны, Лимы, где естественным образом формировался средний класс. Но Родригес-Пастор понимал, что провинциям также нужен средний класс. Воспитание одного из них, очевидно, связано с созданием рабочих мест. Одним из способов создания рабочих мест Intercorp было расширение сети супермаркетов, которую она приобрела у Royal Ahold в 2003 году и переименовала в Supermercados Peruanos.

В 2007 году сеть начала открывать магазины в регионах. Местные потребители, безусловно, восприняли эту идею. Когда в Уанкайо открылся один магазин, любопытные покупатели стояли в очереди час или больше, чтобы войти в него. Для многих это был первый опыт работы с современным ритейлом. К 2010 году сеть насчитывала 67 супермаркетов в девяти регионах. Сегодня это 102 магазина по всей стране.

На раннем этапе Intercorp осознала, что подобные розничные предприятия рискуют обнищать местные сообщества, а не обогатить их. Хотя супермаркет действительно обеспечивал хорошо оплачиваемую работу, он мог повредить бизнесу местных фермеров и производителей. Поскольку они были небольшими и обычно работали с низкими стандартами безопасности пищевых продуктов, было бы заманчиво получать почти все из Лимы. Но связанные с этим затраты на логистику снизят размер прибыли, а если сеть вытеснит местных производителей, она может сократить больше рабочих мест, чем создать.

Таким образом, компании Intercorp необходимо было стимулировать местное производство путем раннего взаимодействия с местными предприятиями. В 2010 году компания запустила программу Perú Pasión при поддержке Corporación Andina de Fomento (НПО) и регионального правительства Уанкайо. Perú Pasión помогает фермерам и мелким производителям модернизировать свои мощности настолько, чтобы поставлять их на местные рынки Supermercados Peruano. Со временем некоторые из этих поставщиков даже превратились в самостоятельных региональных или национальных поставщиков.

В настоящее время Supermercados Peruanos поставляет 218 продуктов, что составляет около 1,5 миллиона долларов годового объема продаж от предприятий Perú Pasión. Одним из них является Процесседора де Алиментос Веласкес. Первоначально пекарня по соседству обслуживала несколько небольших близлежащих продуктовых магазинов, но в 2010 году она начала снабжать магазин Supermercados, обеспечив годовой объем продаж всего на 6000 долларов. Сегодня, благодаря помощи Perú Pasión, компания снабжает три магазина почти на 40 000 долларов в год. Concepción Lacteos, производитель молочных продуктов, добилась еще одного успеха. В 2010 году он начал поставлять продукцию в местный магазин Supermercados на сумму около 2500 долларов в год. В 2014 году она обслуживала 28 магазинов, в том числе высококлассные торговые точки сети в Лиме, ​​и обеспечила продажи на 100 000 долларов.

Успех Intercorp в повышении среднего класса в Перу зависел от продуманного дизайна многих артефактов: передового банка, инновационной школьной системы и предприятий, адаптированных для приграничных городов по всему Перу. Но не менее важным был план введения этих новых артефактов в статус-кво. Родригес-Пастор тщательно наметил шаги, необходимые для вовлечения всех соответствующих сторон в их усыновление. Он углубил навыки руководителей своей руководящей команды, расширил дизайнерские ноу-хау своих людей, убедил учителей и родителей в идее, что конгломерат может обеспечить образование, и сотрудничал с местными производителями, чтобы нарастить их потенциал для снабжения супермаркетов. В сочетании с хорошо продуманными артефактами эти тщательно продуманные вмешательства сделали социальную трансформацию Перу реальной возможностью, а не идеалистическим стремлением.

Принципы этого подхода ясны и последовательны. Вмешательство — это многоэтапный процесс, состоящий из множества маленьких шагов, а не из нескольких больших. На протяжении всего пути взаимодействие с пользователями сложного артефакта имеет важное значение для отсеивания плохих проектов и укрепления уверенности в успехе хороших.

Дизайн-мышление зародилось как способ улучшить процесс проектирования реальных продуктов. Но это еще не все. История Intercorp и другие, подобные ей, показывают, что принципы дизайн-мышления могут быть еще более эффективными, когда они применяются для решения нематериальных проблем, связанных с вовлечением людей и принятием новых инновационных идей и опыта.

Версия этой статьи была опубликована в сентябрьском номере Harvard Business Review (стр. 56–64) за 2015 г. .

Лаборатория дизайна Xbox | Xbox

Нет. Мы начинаем сборку вашего контроллера вскоре после того, как вы разместите заказ. Поскольку он создан в соответствии с вашими спецификациями, никакие изменения дизайна не допускаются после отправки вашего заказа.

Однако, если вы получили дубликат заказа на специально разработанный контроллер, обратитесь за помощью в службу поддержки.

Поддержка Xbox

Поскольку контроллеры Xbox Design Lab изготавливаются специально для вас, их нельзя вернуть.

Проверьте статус своего заказа на странице https://xboxdesignlab.xbox.com/sales/order/history (используя тот же адрес электронной почты и пароль, которые вы использовали для размещения заказа). Когда ваш контроллер будет отправлен, вы получите электронное письмо с номером отслеживания. Мы стремимся получить контроллер в ваших руках в течение 3-4 недель с момента размещения заказа.

Перейдите на https://xboxdesignlab.xbox. com/sales/order/history и войдите в свою учетную запись Microsoft (используя тот же адрес электронной почты и пароль, которые вы использовали для размещения заказа). Нажмите на символ человека в правом верхнем углу страницы и выберите Мои заказы. Если вы не видите свой заказ контроллера, он не был выполнен. Вам нужно будет выбрать свой дизайн, а затем отправить заказ.

К сожалению, нет. В настоящее время нет способа использовать Microsoft Currency Stored Value (CSV), баланс подарочной карты Microsoft или Xbox для оплаты контроллера Xbox Design Lab.

Вы не можете изменить адрес доставки заказа после его отправки. Обратитесь за помощью в службу поддержки Xbox. Вам будет рекомендовано посетить сайт www.FedEx.com и создать учетную запись FedEx Delivery Manager для управления доставкой. Вы не сможете изменить адрес доставки, но вы можете оставить его в отделении FedEx, чтобы вы могли его забрать.

Плата за контроллер взимается в момент отправки заказа. Между этим временем и получением номера для отслеживания может пройти до 3 недель. Когда ваш контроллер будет отправлен, вы получите электронное письмо с номером отслеживания.

Если ваш контроллер не соответствует вашему заказу, обратитесь за помощью в службу поддержки Xbox.

Прежде чем пытаться заменить контроллер, выполните некоторые действия для устранения проблемы. Если это окажется безуспешным, начните онлайн-процесс замены по гарантии. Все обмены по гарантии должны быть обработаны онлайн и не могут быть обменены в магазине Microsoft.

Да, и их тоже можно настроить. Изучите все варианты в Elite Accessories Hub.

Лучший способ сделать это — попросить получателя подарка спроектировать контроллер, добавить его в корзину и поделиться снимком экрана с разделом «Показать подробности», который находится в вашей корзине. Как только они это сделают, вы сможете собрать контроллер в соответствии с их спецификациями и приобрести его для них.

Вы можете добавить Microsoft Complete только к контроллерам Elite Series 2. Запишитесь на прием к эксперту по продуктам в течение 45 дней с момента покупки, посетив страницу Microsoft Complete.