Слайд 1Дипломный проект
Разработка web–дизайна сайта
кафе «Шафран»
Выполнила: Минеева А.О.
Слайд 2Описание проекта
Тематика сайта: сайт – визитка для вегетарианского кафе «Шафран»
Структура сайта:
Слайд 4
Требования к дизайну
Тип сайта: сайт – визитка;
Количество страниц: 8 страниц;
Ширина макета:
1366 px, контентная область составляет 1180 px;
Мобильная версия: 750 px.
Слайд 5
Процесс проектирования интерфейса
Структура страниц
Одним из основных элементов страниц являются яркие фоновые
фотографии здоровой еды, подстроенные под разрешение сайта.
Главная страница:
Header – меню-бургер, логотип, часы работы, телефон д/связи;
Content – список страниц, для дальнейшего перехода по сайту, кнопка для скроллинга вверх;
Footer – адреса кафе, иконки соц.сетей, телефон и email д/связи.
Вн. Страница «Меню»:
Header – меню-бургер, логотип, часы работы, телефон д/связи;
Content – блок меню (ассортимент), внизу блока меню список подкатегорий меню, кнопка для скроллинга вверх;
Footer – адреса кафе, иконки соц.сетей, телефон и email д/связи.
Слайд 6
Процесс проектирования интерфейса
Структура страниц
Одним из основных элементов страниц являются яркие фоновые
фотографии здоровой еды, подстроенные под разрешение сайта.
Вн. Страница «Новости»:
Header – меню-бургер, логотип, часы работы, телефон д/связи;
Content – 4 блока, каждый из которых, отображает новость или акцию, кнопки слева и права для просмотра след. блоков, кнопка для скроллинга вверх;
Footer – адреса кафе, иконки соц.сетей, телефон и email д/связи.
Вн. Страница «Отзывы»:
Header – меню-бургер, логотип, часы работы, телефон д/связи;
Content – блок с отзывом клиента, кнопки слева и права для просмотра след. отзыва, под тексом отзыва иконки like и dislike, кнопка для скроллинга вверх;
Footer – адреса кафе, иконки соц.сетей, телефон и email д/связи.
Слайд 7
Процесс проектирования интерфейса
Структура страниц
Одним из основных элементов страниц являются яркие фоновые
фотографии здоровой еды, подстроенные под разрешение сайта.
Вн. Страница «Концепция»:
Идея
Header – меню-бургер, логотип, часы работы, телефон д/связи;
Content – заголовок, текстовой блок, в котором описывается концепция кафе, кнопки слева и права для просмотра след. Блока, кнопка для скроллинга вверх;
Footer – адреса кафе, иконки соц.сетей, телефон и email д/связи.
Идея – видео рассказ
Header – меню-бургер, логотип, часы работы, телефон д/связи;
Content – заголовок, видео блок, в котором описывается концепция кафе, кнопки слева и права для просмотра след. Блока, кнопка для скроллинга вверх;
Footer – адреса кафе, иконки соц.сетей, телефон и email д/связи.
Как добраться
Header – меню-бургер, логотип, часы работы, телефон д/связи;
Content – заголовок, 2 адреса кафе, карта, контакты кафе, кнопки слева и права для просмотра след. Блока, кнопка для скроллинга вверх;
Footer – адреса кафе, иконки соц.сетей, телефон и email д/связи.
Слайд 8
Процесс проектирования интерфейса
Структура страниц
Одним из основных элементов страниц являются яркие фоновые
фотографии здоровой еды, подстроенные под разрешение сайта.
Всплывающая страница «Резерв стола»:
Header – меню-бургер, логотип, часы работы, телефон д/связи;
Content – 6 полей для заполнения (имя, дата, время, кол-во гостей, телефон, email; кнопка «заказать», иконки календарь и время на полях по соответствию;
Footer – адреса кафе, иконки соц.сетей, телефон и email д/связи.
Всплывающая страница Меню бургер:
Header – меню-бургер, логотип, часы работы, телефон д/связи;
Content – окно всплывает при нажатии на кнопку «меню бургер в левом углу страницы, содержит все пункты и подпункты основных страниц сайта;
Footer – адреса кафе, иконки соц.сетей, телефон и email д/связи.
Слайд 9Процесс проектирования интерфейса
Главная страница
Слайд 10Процесс проектирования интерфейса
Меню
Слайд 11Процесс проектирования интерфейса
Концепция
Слайд 12Процесс проектирования интерфейса
Отзывы
Слайд 13Процесс проектирования интерфейса
Новости
Слайд 14Используемые элементы сайта
Иконки
Социальные сети
(instagram, twitter, facebook, like, dislike)
Меню
(адрес, вверх, прокрутка, закрыть,
разверуть)
Навигация
(адрес, вверх, прокрутка)
Время и дата
Слайд 15Используемые элементы сайта
Цветовая гамма
Слайд 16Используемые элементы сайта
Типографика
Основной шрифт макета – «Open Sans»
Шрифт логотипа – «EpsilonCTT»
Н1:
Заголовок 1(80 рх)
Н2: Заголовок 2 (60 рх)
Н3: Заголовок 3 (36 рх)
Н4: Заголовок 4 (26 рх)
Н5: Заголовок 5 (24 рх)