 |
Что мы создаем в данном курсе?
|
|
|
|
Лекция 1
Процесс создания дизайна
Процесс создания веб-сайта может быть довольно сложным, над его работой может работать несколько человек (UX-Дизайнер, визуальный дизайнер, копирайтер) и может требоваться огромное количество исследований, если вы работаете над крупным проектом с огромным бюджетом.
Мы сфокусируется на небольших проектах, в которых вы являетесь единственным дизайнером и несете ответственность за все аспекты дизайна.
Хорошей идеей будет использовать прогрессивный процесс разработки, в котором каждый шаг будет отделен различными вехами. Это позволит вам остановиться в любой момент, вы сможете дать оценку вашей работе или получить согласование от клиента.
Процесс разработки дизайна требует создания руководства по стилю прежде чем перейти к созданию дизайна интерфейса веб-сайта. Так вы будете точно знать, какие шрифты и цвета вам стоит использовать в вашем проекте и как быть более единообразным в создании файлов вашего дизайна.
Конечно, иногда вам надо будет возвращаться обратно на шаг и корректировать или обновлять что-то, но руководство по стилю поможет вам держать все в одном стиле.
Вот так должен выглядеть процесс создания дизайна:
1) Планирование
Описание проекта, требования и цели, которые помогут определиться с проектом, над которым вы работаете, прежде чем вы перейдете к креативной части создания дизайна. На этом шаге вам так же нужно принять несколько важных решений, о том, как работать над проектом, найти вашу целевую аудиторию, установить ключевые точки и создать карту сайта. Для креативных людей очень соблазнительно выглядит возможность пропуска этого скучного шага и переход сразу в часть про дизайн. Но как только у вас появится больше опыта, вы поймете, как важно потратить немного времени и выполнить домашнюю работу.
|
|
|
2) Мозговой штурм и наброски
Это момент, когда вы ищите вдохновение, проводите небольшие исследования, делаете различные наброски и делаете заметки всех новых идей, которые приходят вам в голову. Дизайнеры думают образами, так что зарисовка идей поможет вам сохранить ваши мысли именно в том виде, в котором вы их представили.
3) Типография
Типография является самым важным визуальным элементом каждого веб-сайта. Необходимо начинать создание дизайна с типографии. На данном шаге вы определитесь с базовым стилем типографии в руководстве, которое вы будете использовать в качестве шпаргалки до конца проекта. Руководство по стилям включает в себя основные шрифты, которые вы выбрали и примеры их использования для заголовков и стилей параграфов. Некоторые проекты могут требовать довольно сложных руководств, так что потратьте время и поработайте над типографией.
4) Цвета
Мы выберем основной цвет, вторичный цвет, цвет заднего фона и активные цвета для своего проекта и сохраним их в файле цветовой палитры. Тоже самое, что и с типографией, мы определим цветовую палитру, которая поможет нам поддерживать однородный дизайн во всех файлах.
5) Сетки и отступы
В хорошем дизайне белому пространству уделяется столько же внимания, сколько и контенту. Руководство по стилю должно продвигать эту философию и содержать информацию о сетках и отступах.
Важно создать систему сеток (grid system), которая бы подходила для всех сценариев использования. В разделе про сетки укажите такую информацию, как количество колонок и рядов, поля и примеры использования.
Когда все отступы и интервалы в продукте согласованы, создается ощущение баланса и равномерности.
|
|
|
Таблица с различными размерами полей пригодится и дизайнерам, и разработчикам. В частности, разработчики смогут задать отступы в переменных Sass.
6) Прототип и макет
В данном шаге вы планируете макеты всех основных веб-страниц и рисуете прототипы, которые помогут визуализировать интерфейс веб-сайта и принять важные решения по поводу макета.
7) Окончательный шаблон дизайна
Пришло время соединить все элементы дизайна вместе и воспользоваться руководством по типографическим стилям, цветовой палитрой, прототипами и создать ваш полноценный макет графического дизайна.
Планирование проекта
Каждый проект по созданию дизайна требует планирования. Это первый и самый важный шаг в нашем процессе, т.е. в этот момент мы принимаем самые важные решения касающиеся всего проекта
Вам нужно запомнить, что дизайн это гораздо больше, чем то, что вы видите. Тут есть над чем подумать и что планировать, прежде чем вы откроете Photoshop.
Подготовка хорошего описания проекта, установка основных целей и планирование процесса, с помощью которого эти цели будут достигнуты, поможет вам сохранить много времени и поможет вам избежать проблем в дальнейшем.
Допустим, вы работаете над своим собственным проектом, например, над дизайном темы. В данном случае описание вашего проекта будет идеей, которую вы будете держать в голове, запишите ее в простой текстовый документ или даже лучше создайте зарисовку в вашем блокноте. Вот так начинается каждый проект дизайна.
Мы создаем тему для веб-сайта и у нас нет клиента, который дает нам какие-то цели и у которого есть некоторые ожидания. Нам нужно самостоятельно спланировать их на наше усмотрение. Этот процесс довольно часто является более сложным, т.к. мы можем не знать, откуда начать или какие у нас цели.
С другой стороны, мы гораздо более гибкие, и обычно наше воображение — это единственный барьер. Это отличная ситуация для всех креативных людей, которые хотят превратить множество своих идей в жизнь.
Во время процесса планирования мы воспользуемся этими базовыми элементами:
• Описание проекта.
• Цели проекта.
• Целевая аудитория
• Ожидаемые результаты.
|
|
|
• Управление проектами.
• Карта сайта.
Описание проекта
Вы должны начать написание описания проекта с ответа на вопрос: «Что мы создаем?». Это поможет вам сфокусироваться на том, что конкретно из себя представляет ваш проект. Это интернет магазин? Кофейня? Шаблон блога? Ответьте на этот вопрос парой предложений. Это поможет вам очистить ваш ум и определить тип проекта.
Это действительно помогает, когда вы приглашаете в проект кого-то еще. Таким способом вы можете очень просто описать новый проект для других людей. Когда вы объясняете и описываете, какую-либо идею другому человеку, то вы смотрите на нее с другой перспективы. Это заставляет вас думать усерднее и перепроверять имеет ли идея смысл.
Чем менее технически подкован человек, тем лучше. Да, ваши идеи должны быть очень простыми, так что у вас не будет проблем в объяснении их кому бы то ни было.
Что мы создаем в данном курсе?
Наш проект, над которым мы будем работать в течение этого курса в рамках лекций, это шаблон для фрилансеров и консультантов. А в рамках лабораторных работ вам необходимо разработать шаблон для интернет-магазина, продающей страницы и страницы-письма согласно вашей выбранной теме (за каждым учащимся закреплена индивидуальная тема).
Из-за того, что он(шаблон) создается для индивидуалистов, мы должны быть уверены, что шаблон дизайна будет сфокусирован на личности. Веб-сайт должен помочь продвигать персональный бренд и продавать сервисы.
Чтобы помочь фрилансерам продавать различные сервисы, нам нужно найти простой способ, как перечислять их и сделать их простыми для доступа. Так же, мы хотим показать их портфолио и клиентов, с которыми они уже работали.
Основная стратегия фрилансеров по продвижению - это создать себе авторитет и репутацию в сообществе с помощью ведения блога. Нам нужно убедиться, что мы включим эту функциональность в наш шаблон.
Из-за того, что мы не создаем сайт для конкретного клиента, мы сами можем выбрать наш бренд, дизайн стилей, цвета и логотип. Все в наших руках и нам нужно представить что-то, что покроет большинство требований целевой аудитории.
|
|
|
Кроме того, очень важно, чтобы все оставалось настолько простым, насколько это возможно. Так же важно избегать каких-то специфичных или самописных элементов, которые будет тяжело использовать в различных ситуациях. Необходимо чтобы шаблон дизайна был универсальными и его можно было применить для огромного количества людей разными способами.
Цели проекта
Определение целей проекта - это фундаментальная часть процесса создания дизайна. Как и в любой поездке, мы должны знать пункт назначения. С другой стороны, мы могли бы ездить в разных направлениях, но так мы могли бы легко потеряться.
Устанавливая понятные цели для проекта, мы знаем, куда двигаться и когда проект будет готов. Гораздо проще будет оценить работу и понять сделали ли мы работу хорошо, задав один простой вопрос: «Выполнили мы все поставленные цели?»
Как мы сказали ранее в описании нашего проекта, мы создаем шаблон сайта для фрилансеров. Мы хотим создать тему, которая поможет нашим клиентам заключать больше сделок. Мы должны быть сфокусированы на этом. И если мы достигнем такого результата, то наши покупатели будут считать наш продукт очень ценным. Так наша тема будет более желанной.
Основываясь на описании проекта, мы можем определить наши основные цели:
1. Создать тему веб-сайта, которая поможет фрилансерам и консультантам заключать больше сделок.
2. Добавить функции дизайна, которые отобразят список сервисов, портфолио, покажут клиентам отзывы/рекомендации, создать блог (поднять авторитет) и оставаться на связи.
3. Создать простой, минималистичный и эстетичный дизайн.
Вот такие три простые цели покрывают основной процесс создания темы, определяют основную функциональность, которую нам нужно будет реализовать, и показывают нам то, как мы должны относиться к внешнему виду.
Целевая аудитория
Это не простая тема т.к. вы создаете продукт для двух разных групп пользователей. Первая группа клиентов - это люди, которые купят вашу тему. Вторая группа - это люди, которые будут посещать веб-сайт вашего клиента.
Так, кто ваши клиенты? Можете ли вы описать стандартного клиента, который покупает вашу тему? В большинстве своем это мужчины или женщины? Какой у них возрастной состав? Эти и многие другие вопросы могут быть использованы при создании профиля (человека) стандартного клиента/пользователя.
Давайте посмотрим на шаблон проекта для фрилансеров. Наша целевая аудитория — это все индивидуальные работники, такие как копирайтеры, разработчики, веб-дизайнеры, тренеры, маркетологи, которые покупают их услуги консалтинга. Это подходит и для мужчин, и для женщин, и возрастная группа может быть 16+. Один общий элемент, который есть у всех этих людей, это то, что они решили начать свой небольшой личный бизнес.
|
|
|
Посетителей сайта вашего клиента будет довольно сложно определить т.к. это может быть кто угодно. Эта задача может быть проще, если вы уменьшите группу ваших пользователей до одной группы фрилансеров, например, до веб-разработчиков. Отсюда вы узнаете, что большинство посетителей сайта вашего клиента скорей всего являются владельцами бизнеса или какого-то дизайнерского агентства, которое ищет разработчика.
Ожидаемые результаты
Каждый проект имеет какой-то конечный результат. Когда работаешь над шаблоном дизайна для сайта, мы можем либо послать дизайн нашего проекта веб-разработчику, который сделает из него готовую страницу, либо оставить наш дизайн в качестве финального продукта и продать его как есть.
С другой стороны, нам надо убедиться, что мы подчистили наши файлы и сделали так, чтобы с ними, стало просто работать. Предоставление хорошо оформленных файлов проекта показывает ваш профессионализм, точность или четкость, которая высоко ценится у дизайнеров.
Управление проектом
Работаете ли вы с большой командой или вы просто одиночка, знание основ управления проектами вам необходимо. Оно позволит вам отслеживать ваш процесс и понимать то, на каком этапе проекта вы находитесь в данный момент.
Начните с определения самых крупных вех вашего проекта и разделите их на маленькие части, до тех пор, пока у вас не будет полного списка задач. Чем более детальны и меньше задачи, тем проще с ними будет справиться.
Это так же отличная система мотивации, т.к. каждый раз, когда вы будите вычеркивать очередной элемент из вашего списка, вы будете ощущать ваш реальный прогресс!
Вот список вех и простых задач, которые есть в нашем проекте шаблона:
• Исследование проекта
• Руководство по стилю:
• Типография
• Цвета
• Прототип:
• Домашняя страница
• Страница блога
• Сообщение блога
• Страница о проекте
• Макеты дизайна:
• Домашняя страница
• Страница блога
• Сообщение блога
• Страница о проекте
• Предоставление финальных файлов PSD
Обратите внимание, что во время создания тем, ваши вехи и задачи будут почти одинаковыми для каждого проекта. Это поможет вам систематизировать весь процесс и сэкономить немного времени при планировании будущих проектов.
Полезно использовать различные инструменты управления проектами при работе сразу с несколькими проектами в одно и то же время, когда очень много людей вовлечены в процесс. Как дизайнер, вам возможно нужно приложение, которое поможет вам лучше планировать ваш проект, презентовать ваш макет и сотрудничать с другими людьми.
Вот некоторые приложения для управления проектами, которые рекомендуются для использования дизайнерами:
Basecamp.com
Basecamp - это самое популярное приложение для управления проектами. Вы можете хранить все ваши проекты, устанавливать вехи, создавать задания и использовать их при общении с остальными членами команды.
Trello.com
В противовес Basecamp, Trello не так продвинут. Он проще и это бесплатное приложение (премиум версия дает доступ к дополнительной функциональности), которое можно использовать для создания быстрых списков заданий. Имеет отличный интуитивно понятный графический интерфейс, с которым легко работать.
InVisionApp.com
InVision скорее представляет из себя инструмент для создания прототипов дизайна, но его так же можно использовать в качестве простого инструмента управления проектами для дизайнеров. Вы можете хранить свои проекты, показывать шаблоны интерактивного дизайна и сотрудничать с другими членами команды.
Viewflux.com
Viewflux - это новое приложение, которое является отличным инструментом для дизайнеров. Вы можете планировать ваш проект, получать отзывы по поводу дизайна, создавать прототип и даже контролировать различные версии файлов вашего дизайна.
Карта сайта
Карта сайта - это отличный инструмент, который позволит вам создать полную структуру веб-сайта. Она может помочь вам получить более детальное представление о том, что из себя представляет весь проект, прежде чем вы перейдете к созданию дизайна.
Карты сайта обычно основаны на небольшом описании проекта и его требованиях. Стандартная карта сайта выглядит как график, который показывает иерархию и связи между главными и второстепенными страницами. Она помогает дизайнерам и разработчикам лучше понимать структуру веб-сайта.
Так же, из-за того, что они отображаются графически, вам очень просто будет объяснить другим членам команды или клиентам общую структуру. Вам не нужны технически подкованные люди, чтобы читать карты сайтов.
Карты сайтов должны отражать навигацию веб-сайта, включая, кроме главных и второстепенных еще и скрытые страницы, лендинги или всплывающие окошки.
Карта сайта в нашем проекте дизайна шаблона в данном курсе довольно проста. Это шаблон, так что мы сфокусируемся только на главных страницах, которые есть у каждого веб-сайта.
Вот так выглядит карта сайта для нашего проекта шаблона в этом курсе:
Карты сайта могут помочь вам определить то, для каких страниц вы будете разрабатывать дизайн. Очевидно, мы можем разработать шаблон одной страницы, который будет очень похож на страницы “о проекте” и все страницы сервисов.
На самом деле очень просто создать карту сайта для проекта вашего веб-сайта. Вы можете воспользоваться любыми дизайнерскими приложениями и, после создания парочки карт сайтов, у вас будут шаблоны, которые вы можете использовать заново в других проектах.
Конечно же, существует целая куча инструментов и приложений, которые могут облегчить эту задачу. Это особенно полезно при работе над крупными проектами.
|
|
|
