Рисунок 2.34. Сетка Bootstrap
Сетка Google Material Design - сетка из 12 колонок создает визуальную
согласованность между элементами (рис. 2.35).
Рисунок 2.35. Сетка Google Material Design
Сетка Flexbox - старая система верстки блоков HTML, используется крайне
редко (рис. 2.36).
Рисунок 2.36. Сетка Flexbox
Custom modular grid based HTML - система из 6 и 12 блоков, дизайнеры ее
изменяют (рис. 2.37).
Рисунок 2.37. Сетка Custom modular grid based HTML
Для данного проекта была использована сетка Bootstrap (рис. 2.38).
Рисунок 2.38. Сетка для сайта
2.8. Нормативные документы для проектирования веб-сайта
Стандарты для веб-разработки.
ISO 13407 — прописан процесс разработки веб-сайтов,
ориентированных на пользователей. В стандарте описаны рекомендации по
организации процесса разработки интерфейсов и органичному созданию этого
процесса в общий процесс производства программного обеспечения. Описаны
методы юзабилити, необходимые для: определения контекста использования
продукта, выявления требований пользователей и заказчиков к системе,
прототипирования и тестирования продукта.
ISO 18529 — эргономика человеко-компьютерного взаимодействия —
описание процесса разработки веб-сайтов, направленных на пользователей.
2.9. Охрана веб-сайта
Многим владельцам сайтов важно сохранять индивидуальность концепции
сайта и секретности ее информации, а это возможно при использовании различных
видов прав интеллектуальной собственности:
Системы электронной торговли, механизмы поиска и другие
технические инструменты интернета могут охраняться за счет патентов;
Программное обеспечение, включая основанный на тексте код HTML,
используемый на веб-сайтах, может охраняться авторским правом и/или патентами
в зависимости от национального законодательства;
Графическая составляющая веб-сайта надлежит охранять авторским
правом;
Творческое содержание веб-сайта, как письменный материал,
фотографии, музыка и видео может охраняться авторским правом;
Базы данных могут охраняться авторским правом и или специальным
законодательством о базах данных;
Деловые названия, логотипы, названия продукции, названия доменов и
другие обозначения, расположенные на веб-сайте, могут охраняться в качестве
товарных знаков;
Выполненные с помощью компьютера графические символы, экранные
дисплеи, графические интерфейсы и веб-страницы могут охраняться с помощью
законодательства о промышленных образцах;
Скрытые аспекты веб-сайта (конфиденциальная графика, код
источника, код объекта, алгоритмы, программы и другие технические описания,
диаграммы данных, логические диаграммы, инструкции пользователя, структуры
данных и содержание базы данных) могут охраняться с помощью законодательства
о промышленных секретах до тех пор, пока они не раскрыты публики и владелец
сайта принимает разумные меры для сохранения их секретности.
Выводы по второй главе
Графическая концепция стиля жизни «eco-friendly» представляет из себя
иллюстративную визуализацию, контент связанный со стилем жизни и выполнено
все в органическом стиле. Значимость темы диплома «графическая концепция веб-
сайта для стиля жизни «eco-friendly» для дизайнерской практики заключается в том,
чтобы научиться передавать основную концепцию сайта в виде иллюстративного
материала и текста. Это тренирует навыки работы с графикой и версткой,
креативности, создания эргономичной визуализации. С приростом экологических
проблем, появляются неравнодушные к ним люди. Их волнует здоровье их детей и
близких. В связи с этим они с ответственностью подходят к поиску места для
проживания, где их семья сможет комфортно передвигаться по местности, где дети
смогут безопасно посещать учебное заведение и жить, не заботясь о том, чем дышат
и что едят.
В ходе дипломного проекта были использованы методы: синтеза и
обобщений; классификации, сравнений, системный, типологический;
стилистического анализа; дедукции.
Одна фраза моментально определяет тему и концепцию сайта, которую еще
лучше можно понять с помощью используемого цветового и шрифтового решения
и иллюстрации выполненной в органичном стиле, где цвета соответствуют цветам
природы – небо, зелень.
Была разработана иллюстрация для титульной страницы, на которой показан
мегаполис и большие парки. На некоторых иллюстрациях расположен главный
элемент с титульной иллюстрации – девушка на велике. Она присутствует на
иллюстрациях, дабы показать взаимодействие человека с заданными темами,
показать, как человек живет с этом. Велик означает – движение по жизни, с
легкостью и без вреда для окружающего мира, также с физическими нагрузками для
тела, чего не добьешься при простой прогулке пешком или управляя машиной.
На некоторых иллюстрациях расположен главный элемент с титульной
иллюстрации – девушка на велике. Она присутствует на иллюстрациях, дабы
показать взаимодействие человека с заданными темами, показать, как человек
живет с этом. Велик означает – движение по жизни, с легкостью и без вреда для
окружающего мира, также с физическими нагрузками для тела, чего не добьешься
при простой прогулке пешком или управляя машиной.
Основным шрифтом для концепции сайта был выбран «Century Gothic».
Шрифт имеет схожесть с классическим шрифтом Arial, но буквы «Century Gothic»
более округлой формы с мелкими отличиями в написании.
Основные аналоги данного проекта – это сайты, основанные на продаже
различной продукции для эко-стиля жизни, и различная информация, как это стиль
жизни сделать своим смыслом жизни. Исходя из проведенного анализа аналогов,
сделан вывод, что большинство экологических сайтов, не относящихся к каким-то
организациям не проработаны в оформлении и подаче информации.
Экология перестает быть "посторонним делом" и экологические практики
распространяются в различную работу людей: от высококлассной до электробытовой.
Исследуемые профессии – это профессии будущего, в нашей стране они мало кому
известны, ведь тема экологии открылась для нас не так давно.
При разработке фирменного блока было выбрано название «Веко», что
расшифровывается, как "В экологии". Было решено добавить разделение между
предлогом и сокращением слова «экология», так же добавлен фирменный элемент,
соединенный формой листка и буквой «О», что в итоге выглядит, как глаз его веко,
что полностью соответствует концепции фирменного блока.
Для проекта был выбран «органический» стиль. Выбранный цвет для фона
соответствует цвету неба на титульной иллюстрации, отсутствуют текстуры, для
удобночитаемости, но присутствуют иллюстрации подразумевающие
органический стиль.
Процесс разработки веб-сайта состоит из следующих этапов:
1. Маркетинговое планирование.
2. Дизайн сайта.
3. Верстка.
4. Система управления сайтом (CMS).
6. Тестирование и выкладывание.
Стандарты для веб-разработки.
ISO 13407
ISO 18529
Многим владельцам сайтов важно сохранять индивидуальность концепции
сайта и секретности ее информации, а это возможно при использовании различных
видов прав интеллектуальной собственности: патент, авторское право.
3 ГЛАВА. ЭКОНОМИЧЕСКАЯ
3.1. Стоимость работы за разработку сайта
Была поставлена задача разработать веб-сайт, состоящий из 13 типовых
страниц. У сайта должна быть удобная административная-панель для управления
контентом, он должен быть сделан с соблюдением всех базовых правил поисковой
оптимизации. Созданием веб-сайта занималась начинающая студия дизайна. Для
команды новичков, выполняющей проект была рассчитана среднерыночная
заработная плата:
• Менеджер по продажам – 30 тысяч рублей.
• Руководитель проекта – 40 тысяч рублей.
• Графический дизайнер – 35 тысяч рублей.
• Верстальщик – 20 тысяч рублей.
• Программист – 40 тысяч рублей.
• SEO-специалист – 30 тысяч рублей.
• Контент-менеджер – 15 тысяч рублей.
Было рассчитано примерное время, которое должен потратить каждый
специалист на создание проекта.
• Менеджер по продажам – 3 дня.
• Руководитель проекта – 5 дней.
• Графический дизайнер – 5 дней.
• Верстальщик – 5 дней.
• Программист – 4 дня.
• SEO-специалист – 1 день.
• Контент-менеджер – 3 дня.
Т.к. в месяце 21 рабочий день была рассчитана заработная плата, которую
собственник студии должен заплатить специалистам за выполненную работу.
• Менеджер по продажам – 4 тысячи рублей.
• Руководитель проекта – 9,5 тысяч рублей.
• Графический дизайнер – 8 тысяч рублей.
• Верстальщик – 5 тысяч рублей.
• Программист – 8 тысяч рублей.
• SEO-специалист – 1,5 тысячи рублей.
• Контент-менеджер – 1 тысяча рублей.
Зарплата составляет 37 тысяч рублей, добавляем 30,2%, которые должен
отчислять в фонды индивидуальный предприниматель, получается
себестоимость – 48 174 рублей. Также у специалистов должна быть хорошая
аппаратура, интернет, качественное освещение. Взята среднерыночная
стоимость оплаты за содержание небольшого офиса и амортизацию
оборудования составляющая - 60 000 рублей. Учитывая, что одно звено
специалистов может выполнить четыре проекта в месяц, то к стоимости проекта
прибавится еще 15 000 рублей. Себестоимость с учетом офисных оплат – 63 174
рублей.
Студия привлекает клиентов за счет рекламы, среднерыночная цена
привлечения клиента, что закажет создание сайта – 2500 рублей, но срабатывает
обычно 4 заявка, добавляется 10 000 рублей. Себестоимость с учетом рекламы –
рублей. От дохода сайта студия получает 25%. Итоговая округленная стоимость
сайта – 89 000 рублей, из данной суммы вычитывается налог 13% и получается
– 77 500 рублей.
3.2. Продвижение сайта
По подсчитанным данным заказчик должен заплатить за создание сайта – 89
тысяч рублей.
Был проведен анализ целевой аудитории социальных сетей и сделан вывод,
что лучшей рекламной площадкой для заработка и привлечения новой аудитории
будет «инстаграм». Целевая аудитория социальной сети – люди 18 до 29 лет. По
статистике, около 60% пользователей заходят в социальную сеть минимум раз в
день. Самым распространенным вариантом заработка в «инстаграме» является
размещение рекламных постов в профиле, где будет публиковаться реклама
различного контента близкого по теме к экологическому стилю жизни, а также
интересные факты и новости, которые также можно будет получить благодаря
рассылке по любой удобной сети, что будут предложены: почта, «ВКонтакте»,
«Инстаграм», «Фейсбук». Такие сети предложены на основе исследования целевой
аудитории. Прежде всего активную аудиторию в сети «инстаграм» нужно набрать
за счет таргетированной
1
рекламы в ней же.
Настройки целевой аудитории:
• Пол – мужской, женский;
• Возраст - от 16 до 60 лет;
• Место проживания – Россия, Украина;
• Демография (образование, семейное положение и т.д.) – не важно;
• Интересы (спорт, финансы, бизнес, мода, украшение и т.д.) – спорт,
бизнес, мода, здоровье, благоустройство, творчество.
Реклама страницы в «инстаграм» на сайте будет осуществляться за счет
всплывающего окна.
Прежде чем настроить целевую аудиторию рекламируемого поста, нужно
выбрать настройку биддинга.
Авто биддинг – этот вариант можно использовать, когда неизвестно сколько
может стоить результат в 1000 кликов, показов.
Ручной биддинг – эта опция позволяет установить ставку, на сколько
рекламодатель рассчитывает желаемый результат.
1
Таргетированная реклама - это реклама, где можно выбрать целевую
аудиторию.