Дизайн блока этапы работы

Часть 22. Этапы создания дизайн-проекта

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

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

Напомним, что мы делим процесс воплощения интерьера на проектную и послепроектную части.

1. Техническое задание: анкетирование, обмеры, функциональное зонирование, фотофиксация.
2. Планировочное решение.
3. Детальный дизайн: геометрия, материалы, работа со смежниками.
4. Визуализация и светодизайн.
5. Рабочая документация.
6. Комплектация: ведомости материалов, оборудования.

Этап 1 — Техническое задание

Техническое задание — первая часть проектирования, в которой клиент делится пожеланиями, а дизайнер знакомится с объектом.

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

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

1.1. Дизайнер знакомится с объектом

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

1.2. Диалог на объекте

Если первая встреча проходит на объекте, клиент рассказывает о своих пожеланиях. Это удобный формат знакомства и сбора первичных данных. Интервью в рабочем формате можно продолжить в кафе или офисе.

1.3. Работа с референсами

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

1.4. Обмеры, создание чертежа

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

1.5. Фотофиксация

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

1.6. Анализ инженерных сетей

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

1.7. Функциональное зонирование

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

1.8. Стиль и концепция

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

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

Этап 2 — эскизный проект

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

2.1. Планировочное решение

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

Планировка — это скелет проекта, половина дизайна. Ей стоит уделить максимум внимания. Результат работы не разочарует: продуманное планировочное решение станет основой для качественного проекта.

2.2. Геометрический дизайн

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

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

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

На этом этапе стоит учесть инженерию, влияющую на дизайн: вентиляцию и кондиционирование. Для этого стоит привлечь специалистов для консультации или для создания полного проекта.

2.3. Материалы, оборудование, детальный дизайн, задание на визуализацию

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

2.4. 3D-визуализация

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

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

Дизайнер визуализирует помещения с дизайном, включая санузлы и не визуализирует подсобные и технические помещения.

2.5. Светодизайн

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

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

Этап 3. Рабочий проект

Дизайнер разрабатывает рабочий проект на основе визуализации с учетом возможных корректировок. Рабочий проект состоит из чертежей, увязки инженерного оборудования, мебели и другого оборудования.

3.1. Увязка дизайна с инженерными решениями

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

Разработка инженерных проектов не входит в дизайн-проект. Дизайнер выдает техническое задание на разработку инженерных проектов специалистам. Готовые проекты дизайнер увязывает с рабочей документацией.

3.2. Финальный подбор отделочных материалов, мебели, оборудования

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

3.3. Рабочая документация

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

3.4. Альбом чертежей

1. План обмеров.
2. План демонтажа.
3. План возведения перегородок.
4. План расстановки мебели и сантехники.
5. План полов.
6. План потолков.
7. План размещения светильников, световых групп и выключателей.
8. План розеток, электрических слаботочных выводов с привязками по стенам.
9. Принципиальный план вентиляции и кондиционирования.
10. Принципиальная разводка водоснабжения.
11. Развертки по стенам в местах, необходимых для строительства.
12. Схема раскладки согласованной плитки.
13. Экспликация помещений.
14. Узлы сложных и дизайнерских конструктивных решений.
15. Эскизы и габаритные размеры декоративно-архитектурных элементов.
16. Эскизное решение встроенной мебели.
17. Ведомость отделочных материалов с площадями и наименованиями.
18. Ведомость заполнения дверных проемов.
19. Ведомость заполнения оконных проемов.
20. Ведомость предметов мебели.
21. Ведомость источников света.
22. Спецификации и рекомендации по художественному оформлению пола, стен, потолков, другого декора.
23. Подбор декора оконных проемов.
24. Альбом с рекомендуемыми материалами отделки.
25. Альбом с рекомендуемой мебелью.

3.5. Задания на разработку индивидуальных изделий

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

Финал дизайн-проекта

В итоге дизайн-проекта клиент получает три альбома, необходимые для реализации дизайна:

1. Альбом 3D-визуализаций.
2. Подбор материалов и оборудования.
3. Рабочие чертежи.

При необходимости разрабатывают проекты:

1. Инженерных сетей и изменения в конструктиве.
2. Расширенный светодизайн.
3. Проект мебели и индивидуальных изделий

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

Клиент
— А можно не делать проект, а строить по живому?

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

Источник

Этапы разработки дизайна сайта с нуля до готового макета

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

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

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

Этапы разработки дизайна сайта

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

Этап 1 — Бриф

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

Обычно в бриф включены вопросы по типу:

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

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

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

Помимо брифа есть еще такое понятие как ТЗ (Техническое Задание). Оно составляется на основе брифа, то есть там прописывается вся структура будущего сайта и все требования к дизайну. Кто-то разделяет эти два этапа, но можно их объединить и на этапе брифа сразу проговорить все необходимые моменты.

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

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

Бриф актуален тогда, когда вы фрилансер и работаете сами на себя. Если вы работаете в компании, то брифовать клиента будут другие люди (скорей всего менеджер проекта).

Этап 2 — Анализ ниши и конкурентов

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

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

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

Где брать конкурентов? Во-первых, ваш заказчик может указать их в брифе. Во-вторых, можно зайти на Яндекс и вбить в поиск нишу клиента (например, аренда строительной техники в Москве). В выдаче у вас появятся сайты конкурентов их и анализируйте.

Все данные записывайте на какой-нибудь носитель (бумага или Word/Excell), чтобы ничего не забыть. Если в ходе анализа у вас будут возникать вопросы, то спрашивайте их у заказчика. Заказчик 100% знает свой бизнес лучше, чем вы, поэтому диалог только приветствуется.

Зачем вообще нужен этот анализ? Затем, чтобы не изобретать велосипед, потому что до вас 100% кто-то уже разрабатывал подобные проекты. Ваша задача, как дизайнера, сделать продукт своего клиента лучше, а не наоборот. Поэтому нужно опираться на чужой опыт и улучшать его.

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

Этап 3 — Проектирование

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

Выглядеть это может примерно так:

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

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

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

По итогу третьего этапа у вас должна быть спроектирована вся структура будущего сайта.

Этап требует согласования с заказчиком.

Этап 4 — Сбор референсов

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

Сбор референсов можно разделить на 2 этапа:

• Референсы по вашей теме
• Референсы по любой другой теме

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

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

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

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

Этап 5 — Прототип

С готовыми реферансами можно начинать разработку прототипа будущего сайта. Прототип — это промежуточный вариант между финальным дизайном и спроектированной структурой. Он уже имеет вид готового сайта, но без детальной проработки.

Во время создания прототипы вы уже работаете непосредственно с композицией и компоновкой, подбираете шрифты.

Выглядеть прототип может примерно следующим образом:

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

В прототипе вы можете:

• Вместо картинок рисовать обычные прямоугольники или круги
• Вместо иконок делать условные обозначения в виде обычных квадратов
• Не придерживаться строгих отступов

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

Этап требует согласования с заказчиком.

Этап 6 — Финальный дизайн

Вот мы и подошли непосредственно к самому дизайну в его привычном понимании. Как видите, работа дизайнера — это 80% анализа и проектирования и лишь 20% самого дизайна.

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

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

Результат преображения от прототипа к финальному дизайну может выглядеть примерно вот так:

Этап требует согласования с заказчиком.

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

После согласования вам осталось подготовить ваш дизайн для передачи его в разработку.

Этап 7 — Подготовка дизайна для разработки

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

Что нужно сделать?

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

Вообще стайл-гайд (UI-kit) следует формировать еще на этапе прототипа, чтобы потом вам было проще работать. В зависимости от проекта, стайл-гайды могут быть простенькими (как на фото выше), так и более объемными (при разработке сложных интерфейсов).

Во-вторых, подготовьте все картинки и фотографии, которые вы использовали на сайте. Заранее позаботьтесь о том, чтобы уменьшит их вес, потому что чем «легче» картинки, тем быстрее грузится сайт.

Во-третьих, подготовьте для скачивания все иконки, которые вы использовали в дизайне. Иконки должны быть в формате svg.

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

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

Естественно, это будет как отдельная услуга и оплачиваться будет отдельно. Здесь уже решайте сами.

Если хотите научиться профессионально проектировать дизайн сайтов, то со своей стороны рекомендую вам записаться на курс «Дизайнер интерфейсов». Там вас буквально за ручку проведут с нуля до результата и научат всем важным аспектам веб дизайна.

Заключение

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

Надеюсь, статья была для вас полезной. Если остались вопросы — пишите в комментариях.

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

Источник