АННОТАЦИЯ Документ является пояснительной запиской к курсовому проекту на тему «Разработка дизайна сайта «Колобок»». Пояснительная записка по курсовому проекту содержит 9 разделов, 15 подразделов. В первом разделе идёт краткое описание компании и условия, при которых разрабатывается данное приложение, была проведена работа по изучению предметной области проекта. В первом подразделе были выявлены предпочтения и требования к проекту от заказчика посредством проведения брифа. Во втором подразделе формулировались требования в соответствии со стандартными указаниями. В третьем подразделе был проведён анализ потенциальных конкурентов, их дизайн, взаимодействие с пользователями и функциональные части. Во втором разделе идёт генерация идей и описания концепции. В первом подразделе проводится генерация идей, то есть моделирование в виде древовидной модели ассоциации, которые возникают при прочтении названия приложения. Во втором подразделе рисуются схематичные эскизы логотипа, элементов фирменного стиля на бумаге. В третьем подразделе идёт подбор цветового решения, то есть какие цвета лучше всего подходят к приложению в соответствии со смысловой нагрузкой цветов, взаимодействующей с деревом ассоциаций приложения. В третьем разделе проводится предварительное прототипирование приложения. В первом подразделе проводится подготовка набросков и отрисовка прототипов экрана приложения на бумаге. Во втором подразделе идёт моделирование путей взаимодействия пользователя с приложением в виде блоксхем. КРИТ.09.02.07 0569 КР Изм. Лист № докум. Разраб. Мерзляков Д.В. Провер.. Бородаева М.Р. Реценз. Н. контр. Утв. Подп. Дата Лит. Разработка дизайна веб-сайта «Колобок» Лист Листов 2 32 РВП-1.21 2 В третьем подразделе идёт отрисовка схематичных блоков расположения на страницах приложения, для предварительного определения дизайна размещения в программе разработки интерфейса и прототипирования Figma. В четвёртом разделе идёт разработка дизайна бренда приложения и компании. В первом подразделе идёт разработка логотипа и элементов фирменного стиля бренда, атрибутика, которая используется в бренде. Во втором подразделе идёт подбор и подготовка медиа файлов, фотографий, видео, иконок и др. В третьем подразделе идёт подготовка баннера рекламы, визитки компании и представлении приложения на некоторых товарах. В четвёртом подразделе идёт разработка макета приложения с использованием разработанного бренда и прототипами в программе разработки интерфейса и прототипирования Figma. В пятом разделе была проведена предварительная оценка качества разработанного макета с опросом привлечённых людей и впоследствии исправление ошибок в соответствии с отзывами и комментариями пользователей. В шестом разделе выполнена презентация продукта, его описание с использованием стилистики бренда. Пояснительная записка имеет 24 страницы, 32 рисунка и 1 таблицу. КРИТ.09.02.07 0569 КР Изм. Лист № докум. Разраб. Мерзляков Д.В. Провер.. Бородаева М.Р. Реценз. Н. контр. Утв. Подп. Дата Лит. Разработка дизайна веб-сайта «Колобок» Лист Листов 3 32 РВП-1.21 3 СОДЕРЖАНИЕ Введение 5 1 Описание и анализ предметной области 5 1.1 Бриф 6 1.2 Постановка задачи и формирование требований 8 1.3 Анализ существующих решений и конкурентов 8 2 Описание концепции 12 2.1 Генерация идеи 12 2.2 Эскизы 12 2.3 Подбор цветового решения 13 3 Прототипирование 13 3.1 Подготовка набросков, отрисовка прототипов 13 3.2 User-Flow 15 3.3 Wireframe 16 4 Дизайн 17 4.1 Разработка логотипа и элементов фирменного стиля 17 4.2 П043Eдбор/подготовка медиа 17 4.3 Mockup 18 4.4 Разработка макета приложения 20 5 Оценка качества 21 6. Презентация проекта 22 Заключение 23 Список использованных источников 24 Лист КРИТ.09.02.07 0569 КП Изм. Лист Изм. № докум. Подпись Дата 4 ВВЕДЕНИЕ В наше время все чаще электронные базы и сайты стали заменять печатные книги с рецептами кулинарных блюд, потому что в них гораздо проще искать нужный рецепт, и они не занимают место в доме. Пользоваться такими источниками гораздо удобнее, особенно сейчас, когда информационные технологии окружают человека повсюду. Информационная система рецептов кулинарных блюд «Колобок», рассматриваемая в данной курсовой работе, поможет пользователю быстро найти нужный рецепт кулинарного блюда, а также даст возможность добавить новый. Лист КРИТ.09.02.07 0569 КП Изм. Лист Изм. № докум. Подпись Дата 5 1 Описание и анализ предметной области Кулинария в жизни человека занимает совсем не последнее место, ведь мы, по сути, представляем собой то, что мы едим. Именно из пищи мы получаем весь строительный материал для нашего тела, для его развития и обновления. Колобок – это не просто сайт с кулинарными рецептами, на котором можно не только поделиться опытом приготовления вкусной пищи, советами и красотой блюд, а также подчеркнуть новое и полезное для кухни и семьи. На данном сайте можно легко и быстро найти то блюдо, которое необходимо для вашего стола. 1.1 Бриф Опрос для заказчика в целях определения требований и предпочтений к приложению. Таблица 1 – БРИФ О компании Колобок Как называется ваш проект? Пожалуйста, напишите название именно так, как оно будет отображено в логотипе (с учётом регистра и пробелов): Чем вы занимаетесь?: Что означает ваше название?: Где территориально действует ваш проект?: У вас есть сайт?: Каких ценностей придерживается ваша компания?: Делимся кулинарными рецептами с пользователями Колобок - хлебобулочное изделие, продукт питания, своеобразный рецепт блюда из сказки. По всей России Да Предоставление удобства пользованием сайтом; честность; открытость Ситуация бренда Лист КРИТ.09.02.07 0569 КП Изм. Лист Изм. № докум. Подпись Дата 6 Окончание таблицы 1 Кто ваши конкуренты? Есть ли среди них тот, на которого вы хотите быть похожи? Может есть те, от которых нужно отстроиться?: Русская еда; Едим дома; Повар.ру. Отстроиться можно от сайта «Русская еда», так как они предлагают фотографии с пошаговой готовкой блюда. Доступное и простое управление Сайт полностью бесплатный В чем ваше главное преимущество?: Какая у вас ценовая категория относительно конкурентов?: Как бы вы описали своего рядового Домохозяйка, которая хочет вкусно потребителя? (Возраст, род накормить семью. деятельности, характер, привычки): Коммуникация с целевой аудиторией Какие эмоции должны возникать у Обучение чему-то новому, восторг, клиента при контакте с вашим ностальгия в связи со сказкой. брендом?: Как вы можете описать характер Дружеские отношения с взаимодействия бренда с целевой аудиторией, находится на одном аудиторией?: уровне с ней Если бы вы могли рассказать своим Простой сайт для просмотра и потребителям о компании одним приготовления различных блюд. предложением, как бы оно звучало?: Представьте, что ваш бренд – это Любит вкусно покушать, добрый, доверчивый. человек. Какой у него был бы характер?: Пожелания и техническая информация Какие предметы относятся к вашей Смартфон и компьютер. деятельности и могут быть использованы нами? : Какие предметы и образы не стоит Которые не подходят к кулинарии использовать?: Есть ли пожелания или ограничения по Темно-красный, оранжевый. Не цветам? должно быть слишком много цветов. Приведите примеры фирменных Ближе всего подходит сайт «Все стилей, которые подошли бы вашему рецепты» чем то похожая проекту. Объясните почему вы структура. считаете их подходящими? Лист КРИТ.09.02.07 0569 КП Изм. Лист Изм. № докум. Подпись Дата 7 1.2 Постановка задачи и формирование требований В рамках работы с сайтом «Колобок» требуется разработать фирменный стиль информационной системы, который будет отображать работу сайта, а именно указывать на его преимущества среди конкурентов и отражать главную суть его деятельности. Основной цветовой гаммой приложения должны быть теплые тона. Интерфейс должен быть простым и доступным, чтобы любой пользователь, даже не знакомый с сервисом, понял, как он работает. 1.3 Анализ существующих решений и конкурентов Прежде чем приступить к работе, был проведен мониторинг сайтов на похожую тему, таким примером стали три кандидата: Все рецепты. Русская еда, Едим дома. «Все рецепты» — Сайт создан специально для Российской аудитории. На сайте много интересных и доступных рецептов как для начинающих, так и для опытных кулинаров. Большая коллекция кулинарных рецептов: мясных блюд, вторых блюд, супов, салатов, десертов, выпечки, напитков. Возможность поиска рецептов по различным параметрам (по ингредиентам, по типу блюда), праздничные блюда, кухни мира. Рецепты на любой вкус. Удобный поиск, интересные рецепты с фото, предложенные кулинарами со всего света. Отзывы и комментарии участников. Лист КРИТ.09.02.07 0569 КП Изм. Лист Изм. № докум. Подпись Дата 8 Рисунок 1 – Сайт «Все рецепты». «Русская еда» — На этом кулинарном сайте публикуются рецепты на русском, украинском и белорусском языках. На сайте огромная кулинарная книга рецептов, в которой свыше 114 тысяч кулинарных рецептов блюд, около 100 национальных кухонь. В этом банке рецептов вкусной еды много кулинарных рецептов с фото, рецептов с пошаговыми фотографиями хода приготовления. Удобная система поиска позволит быстро найти нужный вкусный рецепт – домашний и от шеф-поваров, дорогой и дешевый, простой и не очень. В коллекции есть рецепты приготовления завтраков, обедов и ужинов, рецепты на каждый день и рецепты праздничных блюд с фотографиями, секреты домашней кухни, советы что приготовить и как приготовить вкусно и быстро. Лист КРИТ.09.02.07 0569 КП Изм. Лист Изм. № докум. Подпись Дата 9 Рисунок 2 – сайт «Русская еда» «Едим дома» — кулинарный сайт Юлии Высоцкой, где собраны рецепты блюд со всего мира, которые под силу приготовить не только профессионалам, но и каждой хозяйке на своей домашней кухне, все они содержат подробные пошаговые инструкции, а также фото или видео. «Едим Дома» — это социальная сеть, где кипит живое общение: кулинары делятся своими профессиональными секретами. На сайте можно посмотреть энциклопедию рецептов и подборку выпусков передачи «Едим Дома». Возможность публиковать свои рецепты и фотографии блюд, оценивать чужие, сравнивать по ингредиентам, рейтингу; создавать собственную кулинарную книгу и др. Лист КРИТ.09.02.07 0569 КП Изм. Лист Изм. № докум. Подпись Дата 10 Рисунок 3 – Сайт «Едим дома». Лист КРИТ.09.02.07 0569 КП Изм. Лист Изм. № докум. Подпись Дата 11 2 Описание концепции 2.1 Генерация идеи Ассоциации, связанные с названием сайта. Начало было положено от известной детской сказки «Колобок». Колобок у меня ассоциируется как: выпечка, вкусно, простота, взаимодействие с людьми, обучение, бюджетно. 4 – Сканированное изображение древа ассоциаций 2.2 Эскизы Во время прорисовки логотипа, у меня было 4 разных варианта как самого рисунка. Так и шрифта. В итоге я остановился на первом варианте. Рисунок 5 – Сканированное изображение эскизов логотипа и элементов фирменного стиля Лист КРИТ.09.02.07 0569 КП Изм. Лист Изм. № докум. Подпись Дата 12 2.3 Подбор цветового решения. Была поставлена задача, использовать теплые тона. В качестве основного цвета, я взял темно-красный (#C3251C) и светло-оранжевый (#FBCF4A). Текст имеет шрифт черного цвета (#000000) и моментами можно встретить белый (#FFFFFF) Рисунок 6 – Цветовое решение 3 Прототипирование Прототипирование – это процесс, в рамках которого дизайнеры создают, экспериментируют и воплощают в жизнь концепцию, начиная от заметок на бумаге и заканчивая цифровым проектированием. По сути, прототип – это предварительный макет дизайна, который позволяет пользователям отчетливо представить его или взаимодействовать с ним до тех пор, пока не будетразработан конечный продукт. 3.1 Подготовка набросков, отрисовка прототипов Были разработаны несколько прототипов сайта «Колобок», которые показаны на рисунках 7 и 8. Лист КРИТ.09.02.07 0569 КП Изм. Лист Изм. № докум. Подпись Дата 13 Рисунок 7 – главный экран сайта 1 Рисунок 8 – главный экран сайта 2 Лист КРИТ.09.02.07 0569 КП Изм. Лист Изм. № докум. Подпись Дата 14 3.2 User-Flow Это последовательность шагов, которые пользователь предпринимает для достижения важной цели. Рисунок 9 – скриншот User-Flow сайта Лист КРИТ.09.02.07 0569 КП Изм. Лист Изм. № докум. Подпись Дата 15 3.3 Wireframe Wireframe можно перевести с английского как «каркас», что точно отражает его суть. Именно этот «каркас» лежит в основе готового интерфейса мобильного или веб-приложения. Создание вайрфреймов – часть процесса разработки. Рисунки 9, 10 и 11 – Wireframe Лист КРИТ.09.02.07 0569 КП Изм. Лист Изм. № докум. Подпись Дата 16 4 Дизайн 4.1 Разработка логотипа и элементов фирменного стиля Логотип состоит из нескольких частей: сам колобок в поварском колпаке и держит в руках приборы, рамка и слово «Колобок». Рисунок 12 – Логотип бренда 4.2 Подбор/подготовка медиа Все подбираемые медиа выбирались по критериям отношения к некоторым субъектам: людям, устройствам и т.д. Все изображения были выбраны на сайтах с общедоступным контентом без авторских прав, редактирование в основном было использовано только для удаления с изображений лишних элементов и подгонку под размеры для дальнейшего использования. Лист КРИТ.09.02.07 0569 КП Изм. Лист Изм. № докум. Подпись Дата 17 Рисунки 13-24 – Подбор и подготовка медиа 4.3 Mockup Mockup (от англ. mock-up – макет) – это изображение, которое используют, чтобы показать заказчику дизайн фирменного стиля на объектах реального мира. Он нужен, чтобы визуализировать дизайн на открытках, листовках, баннерах, книгах, журналах, гаджетах, одежде и т.д. Мокапы помогают проверить, как будет выглядеть дизайн в целом, оценить размер и то, насколько понятен шрифт. Были разработаны некоторые образцы мокапов для наглядной демонстрации бренда на некоторых товаров: визитка компании, изображение на фирменном блокноте, рекламном баннере, реклама в социальной сети ВКонтакте. Лист КРИТ.09.02.07 0569 КП Изм. Лист Изм. № докум. Подпись Дата 18 Рисунок 25 – реклама в соцсети ВКонтакте. Рисунок 26 – блокнот с логотипом сайта Рисунок 27 – Рекламный баннер бренда Лист КРИТ.09.02.07 0569 КП Изм. Лист Изм. № докум. Подпись Дата 19 Рисунок 28 – Визитная карточка сайта 4.4 Разработка макета сайта. Макет – это объект, который определяет визуальную структуру пользовательского интерфейса. То, как будет выглядеть утилита на дисплее задействованного устройства. Были разработаны несколько макетов сайта «Колобок», которые показаны на рисунках 29, 30, 31. Рисунки 29-31 – макет сайта Лист КРИТ.09.02.07 0569 КП Изм. Лист Изм. № докум. Подпись Дата 20 5 Оценка качества 5.1 Тестирование интерфейса Тестирование интерфейса даёт возможность посмотреть на интерфейс глазами пользователя и проверить удобство продукта. Тесты помогутопределить: впечатление о продукте – что пользователь чувствует при первом использовании; прозрачность навигации – легко ли найти нужный раздел; доступность формулировок и качество контента – все ли понятно сформулировано и достаточно ли информации. Для того чтобы проверить удобство сайта «Колобок» были опрошены несколько человек. Отзыв 1 Сайт интересен тем, что не очень много скучного текста. Отзыв 2 В целом не плохо, хотелось бы изменить цвет текста дней недели на более читаемый. Отзыв 3 Отличная работа, 5 из 5!!! Отзыв 4 Хотелось бы поменять цвет шрифта на красном фоне, на более читаемый Отзыв 5 Мне нравится, что цвета сайта и логотипа схожи. 5.2 Редактирование макет после фидбека Макет был полностью переработан после описанных отзывов и изображён в разделе разработке макета приложения: рисунки 29-31. Лист КРИТ.09.02.07 0569 КП Изм. Лист Изм. № докум. Подпись Дата 21 6. Презентация проекта Данная презентация была разработана, потому что она гораздо быстрее и дешевле в производстве, чем, например, видеоролик. Она знакомит потенциальных пользователей с сайтом «Колобок». В презентации проекта указан баннер, цветовое решение, шрифты, главный экран и mockup. Рисунок 32 – Презентация проекта Лист КРИТ.09.02.07 0569 КП Изм. Лист Изм. № докум. Подпись Дата 22 ЗАКЛЮЧЕНИЕ Кулинарные сайты – это специализированные серверы, на которых выкладываются различные блюда, начиная от закусок и заканчивая необычными десертами и вкусной сдобой. Одним словом, это современная альтернатива классическим поварским книгам, которыми пользовались раньше, только на сайтах размещено гораздо больше вариантов различных блюд и их рецептов. Сайт «Колобок» имеет множество функций, например, каждая прекрасная дама имеет возможность легко зарегистрировать на кулинарном сайте, удобно сохраняя все понравившиеся блюда, а также выкладывая собственные кулинарные изыски, чтобы их смогли приготовить другие хозяйки. Отметим то, что мне удалось добиться всех первоначально поставленных целей, дизайн получился именно таким. Каким и хотел видеть его заказчик. В ходе выполнения работы вносились определнные правки, которые позволили получить ещё более качественный результат. Лист КРИТ.09.02.07 0569 КП Изм. Лист Изм. № докум. Подпись Дата 23 СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ 1. Сайт для создания мокапов. Режим доступа:https://mockupbro.com/ 2. Веб сайт со свободным доступом к фотографиям. Режим доступа: https://ru.freepik.com/ 3. Портал по высоким технологиям. Режим доступа:https://trashbox.ru/. 4. Сайт с бесплатными иконками. Режим доступа:https://www.flaticon.com/ Лист КРИТ.09.02.07 0569 КП Изм. Лист Изм. № докум. Подпись Дата 24
