Муниципальное бюджетное общеобразовательное учреждение

средняя общеобразовательная школа №1

Индивидуальный проект

«Дизайн- макет сайта»

по Изобразительному искусству

                                                        ученика 9 «В» класса

Исмаилов Шумкар Рахманалиевич

Руководитель проекта:

Гаффарова Галина Станиславовна

           учитель изобразительного искусства

г. Сургут

2022г.

Оглавление

Аннотация

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

Цель: рассмотреть историю создания сайтов, создать дизайн-макет сайта, проанализировать дальнейшее использование практической части проекта.

Введение

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

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

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

1. Изучить теоретический материал по данной теме.
2. Рассмотреть виды сайтов
3. Создать дизайн-макет сайта 
4. Проанализировать подходит ли платформа для создания собственного сайта.
5. Выбрать тему сайта и его дизайн
6. Определить информационное наполнение сайта.

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

Гипотеза: персональный сайт – это отличная возможность заявить о себе, своем деле или своих талантах.

Объект исследования: проектная деятельность ученика по созданию сайта на бесплатном хостинге.

Предмет исследования: создание веб-сайта

Результатом работы является разработка сайта на платформе «Wix».

Новизна работы заключается в применении знаний для создания сайтов.

1. Теоретическая часть

1.1. История создания сайтов

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

Создателем первого сайта стал Тим Бернерс-Ли. Адрес первого сайта в Интернете — info.cern.ch. Год создания – 1991. Сайт выглядел довольно просто – это была белая страница, на которой разместили информацию о новой технологии WWW. Технология дала старт современному Интернету. В ней использовались новые протоколы, придуманные самим Тимом Бернерсом-Ли. Кроме всего прочего, на самом старом сайте в Сети были размещены указания относительно установки серверов и браузеров.

Согласно легенде, Бернерс-Ли писал WorldWideWeb в течение 2-х месяцев и закончил работу в первый день Рождества 1990 года (25 декабря). Тогда он работал младшим научным сотрудником в Европейской лаборатории физики элементарных частиц в Женеве (CERN). В это время CERN был одним из крупнейших узлов Сети, и у Бернерса-Ли были все возможности интегрировать интернет с технологией гипертекстовой разметки, работать над которой он начал еще в начале 80-х.

1.2. Способы создания сайтов

Конструктор сайтов

Конструктор сайтов – это система из набора инструментов, которая позволяет создавать сайты онлайн и администрировать их без каких-либо специализированных знаний. С её помощью Вы сможете выбрать тип будущего сайта (визитка, магазин и т. д.), готовый шаблон дизайна, цветовое оформление и модули, которые будут на нём отображаться. Вам не понадобится годами изучать языки программирования для публикации различных страниц – конструкторы сайтов сделают всю рутинную и сложную работу за Вас. Обзор конструкторов сайтов. A5 - отличный выбор для новичка. Wix - лучший конструктор сайтов. Nethouse - простой и удобный. Umi - специализация интернет-магазины. Setup - удобный для новичка. Fo.ru - неплохой вариант для сайта-визитки. Ucoz - известный, но противоречивый вариант. Redham - всего 30 дней бесплатно.

Перечислим основные преимущества конструктор сайтов:

• Они просты в использовании: всё делается пошагово и легко. Вам не придётся возиться со сложными кодами HTML и FTP.
• Разделение дизайнерской и текстовой частей: макет хранится отдельно от текста.
• Наличие готовых шаблонов макетов, для создания которых вне конструктора требуется знание языка программирования HTML.
• Лёгкость загрузки изображений. Картинки можно добавлять, не выходя из браузера и сразу размещать на страницах, создавать галереи либо делать их частью дизайна макета.
• Богатый набор дизайнерских шаблонов на любой вкус.
• Оперативная публикация страниц, изменения отображаются сразу же после их внесения.
• Надёжность – все файлы хранятся на сервере конструктора.

Поэтому Вам не стоит беспокоиться о создании резервных копий данных или о возможности взлома - обо всём этом заботится персонал по обслуживанию серверов выбранного конструктора сайтов. Кроме того, некоторые конструкторы (например, Wix, Nethouse) позволяют переносить готовый сайт на другой хостинг.

Ручной способ создания сайтов

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

1.3. Виды сайтов

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

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

Если интернет-ресурс посвящён одной теме, его называют узкотематическим, если же он охватывает широкий круг проблем — общим. В зависимости от ориентированности на получение прибыли различают коммерческие и некоммерческие сайты, а по количеству страниц – одностраничные и многостраничные.

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

По доступности интернет-площадки делятся на три категории:

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

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

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

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

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

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

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

сайта-визитки является представление сжатой информации о компании, ее краткая презентация, а более полую информацию клиент сможет узнать по телефону или в офисе.

Другими разновидностями корпоративного сайта являются сайты-галереи – это сайты с художественными произведениями.

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

Информационные сайты

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

Новостные сайты – задача новостного сайта состоит в информировании пользователей о последних новостях и тенденциях из разных сфер жизни.

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

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

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

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

Блоги бывают корпоративные и личные (персональные). 

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

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

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

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

Представляют собой сайт, на котором пользователь может приобрести определенные товары и услуги. Интернет-магазин может относиться как к магазину, действующему в офлайне, так и представлять собой исключительно платформу в интернете. Примеров можно привести множество, например, emex.ru, aliexpress.ru, lamoda.ru и т.д.

Веб-сервисы

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

• Поисковые сервисы – помогают пользователю найти определенную информацию в интернете (Google, Яндекс, Rambler).
• Почтовые сервисы — Mail.ru, Gmail.
• Доска объявлений — представляет собой ресурс, на котором есть возможность размещения публичного объявления о продаже или покупке товаров и услуг. Например, Avito, Drom.ru.
• Сайт-агрегатор – представляет собой ресурс, дающий возможность свести продавцов каких-либо услуг и покупателей этих услуг. Сферы могут быть абсолютно различными: от путешествий до оптовых закупок. Например, Booking, Aviasales и др.
• Видеохостинг- Youtube, Rutube
• Социальные сети – Вконтакте и др.

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

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

2 Практическая часть.

2.1. Этапы создания сайта

1. Анализ и проектирование сайта
2. Информационное наполнение сайта
3. Креатив, или визуальная составляющая сайта
4. Написание кода
5. Тестирование
6. Публикация
7. Раскрутка
8. Поддержка

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

Информационное наполнение сайта (контент). Привлекает потенциальных пользователей. Информация должна быть интересна для целевой аудитории и качественно оформлена.

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

Написание кода. Создание Web-страниц, программирование, написание функциональной части.

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

Публикация. Сайт размещается в Интернете.

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

Поддержка. Постоянное обновление сайта. (не реже 1 раза в 2 недели)

2.2 Дизайн сайта

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

В дизайн-проект входят:

• Параметры и размеры страницы.
• Фон и цветовое оформление.
• Количество и расположение блоков на сайте.
• Дизайн элементов на странице.
• Параметры шапки сайта, футера и сайдбара.
• Границы, отступы между блоками и элементами.

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

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

Как разработать дизайн-макет сайта?

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

Типы макетов: в чем отличия?

Перед началом работы требуется определиться с типом макета — разработчики классифицируют несколько вариантов:

• Резиновый — макет с отображением всех элементов сайта, где объекты на странице автоматически растягиваются и заполняют ширину экрана. 
• Центрированный (фиксированный) — элементы на странице статичны и занимают определенную ширину, чаще всего 960px. На экранах с большой диагональю растягивается только фон. 
• Адаптивный — макет подстраивается под диагональ окна браузера, меняя ширину и число блоков на странице, размер шрифта и т. д.

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

Этапы разработки дизайн-макета

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

• Разработка ТЗ и заполнение брифа — первый этап разработки заключается в определении концепции и визуального стиля макета. Также уточняется наличие у клиента брендбука — утвержденного набора графических элементов и стилей, формирующих визуальный образ компании.
• Подготовка мудборда — превью будущего дизайна-проекта. Подготовка мудборда позволяет подобрать референсы, а также презентовать и согласовать с заказчиком визуальные элементы проекта: фото и графику, стили и шрифты, схемы и т. д.
• Разработка структурных элементов — после проработки общей концепции разработчики приступают к созданию шапки и тела сайта, размещают подвал и продумывают навигацию.
• Создание интерактивного макета — на готовую структуру накладывается анимация и переходы, добавляются динамические элементы.
• Финальное утверждение и передача в верстку — готовый макет проходит полную UX/UI проверку и отправляется в HTML верстку.

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

Основные правила при создании макета

Макет разрабатывается в файлах формата .psd или .tiff, которые сжимаются без ущерба качеству изображения либо, все чаще, в программе Figma. Для статических макетов учитываются отступы слева и справа, прописывается разрешение окна в браузере, для резиновых — оставляется отступ в 20–50 px с правой стороны футера и шапки для их увеличения. Создание дизайн макета и проработка структуры страниц сайта также требует соблюдение следующих рекомендаций:

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

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

Отдельно стоит обговорить удобный для работы графический редактор. Чаще всего используется универсальная программа Adobe Photoshop или Figma, иногда встречаются макеты, собранные на профильных ПО: Adobe XD, Adobe InDesign или Sketch. Использование разных программ дизайнером и верстальщиком создает дополнительные сложности при работе с проектом. 

Ошибки при создании дизайн-макетов сайта

Создание сайтов требует постоянное согласование решений и идей. Любое непродуманное решение приводит к проблемам на финальном этапе проекта. К наиболее популярным ошибкам при разработке макета следует отнести:

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

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

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

2.3 Создание сайта с помощью конструктора Wix.com

1.Зайти на сайт ru.wix.com.
2. Пройти регистрацию на сайте.
3. Выбрать путь создания шаблона для сайта (пройти опрос или выбрать из множества предложенных шаблонов).
4. Выбрать подходящий шаблон и начать (если нужно) его редактирование т.к. некоторые особенности множества шаблонов могут не соответствовать вашим предпочтениям.
5. Сохранить шаблон и (или) выложить в свободный интернет доступ для того, чтобы люди могли протестировать его (запустить альфа и бета тестирования)
6. После исправления ошибок (если они были допущены) – выложить сайт в свободный доступ.

Результатом проделанной работы является сайт (Рис.1): https://nikonorovstepan200.wixsite.com/projecthelping

Заключение

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

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

СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ

1. Гаврилов, М.В. Информатика и информационные технологии: Учебник для бакалавров / М.В. Гаврилов, В.А. Климов; Рецензент Л.В. Кальянов, Н.М. Рыскин. — М.: Юрайт, 2013. — 378 c.
2. Информатика. Базовый курс / Под ред. С. В. Симоновича. — 2-е изд. — СПБ: Питер, 2011. — 639 с.
3. Румянцева, Е.Л. Информационные технологии: Учебное пособие / Е.Л. Румянцева, В.В. Слюсарь; Под ред. Л.Г. Гагарина. — М.: ИД ФОРУМ, НИЦ ИНФРА-М, 2013. — 256 c.

Информационные источники:

https://albakoff.ru/articles/chto-takoe-sayt/ 

• https://vk.com/john_mariarty 
• https://ru.wikipedia.org/wiki/Заглавная_страница 
• https://ru.wikipedia.org/wiki/Сайт 
• https://nikonorovstepan200.wixsite.com/projecthelping 

Приложение 1

Дизайн- макет сайта

Адаптивный — макет

 Приложение 2

Ссылка на видео