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

Объявление

Наш баннер

Сайт Обучонок содержит исследовательские работы и проекты учащихся, темы творческих проектов по предметам и правила их оформления, обучающие программы для детей.
Будем благодарны, если установите наш баннер!
Баннер сайта Обучонок
Код баннера:
<a href="https://obuchonok.ru/" target="_blank"> <img src="https://obuchonok.ru/banners/banob2.gif" width="88" height="31" alt="Обучонок. Исследовательские работы и проекты учащихся"></a>
Все баннеры...
Тематика: 
Информатика
Автор работы: 
Рачков Степан Сергеевич
Руководитель проекта: 
Мохов Дмитрий Васильевич
Учреждение: 
ГБОУ Лицей №150 Калининского района города Санкт-Петербург
Класс: 
11

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

Подробнее о работе:


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

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

Оглавление

Введение
1. Подготовка к созданию сайта.
2. Общая теория по созданию веб-дизайна.
3. Работа с программой Figma.
Вывод
Приложения.
Литература

Введение


Название проекта: «Создание макета интернет-магазина.»

Тип проекта: информационный

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

Задачи проекта:

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

Актуальность проекта: Мы живём в 21 веке, веке технологий. Почти все покупки совершаются через интернет-магазины, поэтому способность самому создать макет сайта (или приблизительный макет) является довольно полезной и актуальной.

Методы исследования: Изучение литературы и интернет-сайтов по данной теме, анализ, классификация.

Этапы работы над проектом:

Этапы работы над
проектом
Содержание работы Деятельность обучающегося Временные рамки
Подготовительный Определение темы. Анализ
проблемы. Формулировка цели, задач и гипотезы
Определяю тему своего проекта со своим куратором и формулирую цели,задачи и гипотезу проекта. Октябрь-Ноябрь
2018 года
Организационный А) Определение источников
необходимой информации.
Б) Определение способов сбора и анализа информации.
В) Определение типа проекта, способа представления результатов, продукта проектной деятельности
Определившись с темой проекта , предполагаю, каким будет продукт проекта. Начинаю фильтровать нужную информацию от ее общего количества. Декабрь
2018 года
Практический Сбор и уточнение информации
(интервью, опросы, наблюдения,
и т.д.). Выявление и обсуждение
альтернатив, возникших в ходе
выполнения проекта.
Выбор оптимального варианта хода проекта.
Поэтапно выполняют задачи проекта.
Постепенно выполняю задачи проекта и делаю исследовательскую часть Январь-Февраль
2019 года
Аналитический Сдача, имеющеюся исследовательской части проекта Сдаю исследовательскую часть в ГБОУ лицее №150 Конец Февраля 2019 года
Анализ выполнения проекта, достигнутых результатов. Самостоятельно провожу анализ результата проекта и вношу некоторые изменения Февраль- Май
2019 года
Презентационный Поиск подходящих конференций и публичный показ своего проекта Защита проекта на конференции не ниже района. Получение сертификата об участии/победе в конференции Сентябрь- октябрь 2019 года
Аналитический Анализ публичной защиты проекта. Вносятся необходимые поправки Анализирую собственное выступление, делаю выводы и вношу необходимые поправки в проект Октябрь- март 2019/2020 года
Презентационный Публичная презентация продуктов
проектной деятельности.
Представляю проект и продукт проектной
деятельности на защите в ГБОУ лицее №150
Апрель-май
2020 года

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

Перед началом создания сайта следует задаться следующими вопросами.

1) Что же такое макет сайта?


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

2) Какую роль играет макет относительно общего понятия создания сайта?

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

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

3) С чего начать создание макета (дизайн) интернет-магазина?

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

4) Кому вообще нужны эти знания?

Знания в этом деле нужны как заказчику, так и начинающему исполнителю.

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

Начинающий же исполнитель может найти что-то интересное в моей работе, то, что возможно поможет ему в будущем.

Подготовка к созданию сайта

Три начальных условия:

  1. У нас есть идея.
  2. У нас есть идея и заготовки.
  3. У нас есть идея, заготовки и конкретные детали.

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

*Контент - содержимое сайта

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

Общая теория по созданию дизайна веб-сайта

Какую программу использовать?

Если вы серьезно настроились освоить дизайн, идите в Sketch, Figma или Adobe XD. Если вы пользователь Windows — на данный момент лучшим решением будет Figma или Adobe XD. У всех трех инструментов похожие интерфейсы, что позволяет быстро переключаться между ними.

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

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

Мне больше по душе Figma, поэтому всю работу я буду проводить в ней.

Работа с программой Figma


Figma довольно удобная и простая в понимании программа. Но для того, чтобы рассказать про ее функции, понадобится больше времени, чем у меня есть. Поэтому я буду пытаться рассказать весьма доступным языком во время процесса самой работы создание дизайна. Среди интернет ресурсов я нашел наиболее информативный источник про функции программы «фигма».

Функции: Как и любой графический редактор Figma имеет схожий набор функций.

Для того, что начать создавать шедевры нам понадобятся знания в таких вещах, как:

  1. Frame
  2. Text
  3. Figures
  4. Columns
  5. Shadows
  6. Prototyping

Первые три функции мы видим в основной панели Figma:

Frame - определенная область в графической структуре,которая имеет собственные параметры. (div в мире графики)

интернет-магазин 1

Открыть конструктор фрейма можно на клавишу F

Frame свой background (фон)

За это отвечает параметр Fill. Ему можно задать цвет или картинку:

интернет-магазин 2

Clip content не дает содержимому вылезать за границы фрейма.

Figure / block позволяет создать стрелочки,блоки,квадраты,звезды,треугольники и т.д

Имеет такие же свойства,как и Frame , за исключением того, что является фигурой,а не областью.

интернет-магазин 3

Text позволяет создавать и редактировать текстовый блок.

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

интернет-магазин 4

Создается эффект того, что мы нажали на треугольник.

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

Сolumns помогает наиболее правильно располагать блоки на странице, чтобы это смотрелось красиво.

Можно установить их цвет, количество, отступы.

интернет-магазин 5

Пожалуй, главнейший плюс Figma, относительно других редакторов - интегрированное Прототипирование.

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

Существует 3 варианта анимации для элементов на сайте:


Navigate — при взаимодействии с элементом пользователь переходит на другой экран. Например, вы нажали на Каталог — открылась страница каталога.

Swap — заменяет один элемент другим. Например, вы кликаете на иконку помощи внизу экрана — выпадает контекстное меню. В нем вы выбираете Чат, и контекстное меню заменяется на окно чата, которое будет находиться на том же месте, что и контекстное меню.

Overlay — выводит новый элемент поверх всех остальных элементов интерфейса. Например, вы кликаете на кнопку, и появляется диалоговое окно с выбором действий.

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

Более подробно можно ознакомиться с прототипированием на замечательной площадке skillbox по данной ссылке:

Сетка прототипов моего продукта:

интернет-магазин 6

Как видите, прототипирование предает многофункциональность вашему макету.

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

Ход нашей работы:

  1. Определение тематики
  2. Приблизительный вид макета на листе
  3. Определение масштаба
  4. Определение шрифта
  5. Определение цвета
  6. Создание шапки
  7. Заполнение элемента “body”
  8. Создание дополнительных блоков
  9. Создание подвала
  10. Создание карточки товара
  11. Создание дополнительных отделов

Тема сайта: интернет-магазин уличной обуви.

Название магазина: Urban Culture.

Макет главной страницы:

интернет-магазин 7

Но потом я решил перенести блок прендов под фотографию и сделать его под фотографией.

Для написания данной работы были использованы ресурсы Сети Интернет.


Если страница Вам понравилась, поделитесь в социальных сетях:

Объявление

Статистика