Дипломная работа: Графическая концепция web-сайта
Внимание! Если размещение файла нарушает Ваши авторские права, то обязательно сообщите нам
47
Рис. 2.2. Стартовая страница курса «Грамотный визуал»
При нажатии в шапке меню на ссылку «для кого» (см. рис. 2.3.)
пользователь переходит на страницу с описанием модулей курса, сроков
исполнения и его преимуществ. На странице расположены: иллюстрация в виде
планшетки с описанием курса, мотивационный текст и окно «задать вопрос,
нажимая на которое можно перейти в чат (см. рис. 2.4.).
Рис. 2.3. Переход на страницу раздела «для кого»
Рис. 2.4. Диалоговое окно
При нажатии в шапке меню на ссылку «Что вы получите» (см. рис. 2.5.)
пользователь переходит на страницу с описанием профессий и навыков,
которым будут обучать на курсе. На странице расположены: шесть
иллюстраций и текстовое описание к каждому модулю.
48
Рис. 2.5. Переход на страницу раздела «что ты получишь»
При нажатии в шапке меню на ссылку «тарифы» (см. рис. 2.6.)
пользователь переходит на страницу с тремя тарифами курса, к каждому из них
нарисована векторная иллюстрация и представлено текстовое описание с
модулями курса, а также в конце страницы под каждым тарифом есть кнопа
регистрации.
Рис. 2.6. Переход на страницу раздела «тарифы»
При нажатии в шапке меню на ссылку «программа» (см. рис. 2.7.)
пользователь переходит на страницу с описанием каждого модуля курса. На
ней расположены несложные графические элементы в виде блоков и кружками,
обладающие функцией раскрывать каждый модуль и прочитать полное его
описание (см. рис. 2.8.).
49
Рис. 2.7. Переход на страницу раздела «программа»
Рис. 2.8. Раскрытие программы курса
И последняя страница представляет частые вопросы, которые задают
ученики и потенциальные клиенты, и ответы операторов курса. Содержит
графические элементы в виде всплывающих окон и текстом в них (см. рис. 2.9).
50
Рис. 2.9. Переход на страницу «часто задаваемые вопросы»
2.3 Выбор и обоснование шрифтового оформления
Выбор шрифта - важный момент при создании собственного сайта. Для
сайта оптимально выбрать два шрифта – один для заголовков, другой для
текста. Это практично для пользователей, им будет сразу интуитивно понятно,
где находится заголовок, а где основной текст. И дизайн самого сайта будет
выглядеть более целостно.
Для начала необходимо определиться с видом шрифта, а конкретно:
гротеск или антиква. Обычно шрифты, именуемые антиквой, используются в
печати, а для веб-дизайна чаще используются шрифты без засечек, потому что
на экране засечки превращаются в помехи, которые только усложняют
восприятие текста, в отличие от бумаги, на ней такие шрифты воспринимаются
хорошо, при чтении глаза устают меньше. При этом необходимо оставлять
оптимальный межстрочный интервал, чтобы глаз посетителя мог без труда
отделять одну строчку от другой.
Сайт должен быть читабельным. Если выбирать между
оригинальностью идеи и удобством для посетителя - любой веб-дизайнер не
51
раздумывая выберет второе. Необходимо было выбрать шрифты, которые
отвечали бы параметрам заказчика, были удобно читаемыми и не перегружали
сайт. С заказчиком было решено, что шрифты должны быть без засечек,
плавными и не привлекающими много внимания, так как в виде основного
акцента присутствуют авторские иллюстрации.
Были утверждены два шрифта:
Заголовки – Gilroy (см. рис. 2.10.), начертание bold, 36 пт, #333333.
Основной текст – Noah (см. рис. 2.11.), начертание bold и regular, 20 пт,
#333333.
Параметры шрифтов:
Название – Gilroy
Автор – Радомир Тинков
Поддержка кириллицы – Да
Поддержка латиницы – Да
Категория – Sans Serif
Начертания – Thin, Thin Italic, Ultra-Light, Ultra-Light Italic, Light, Light
Italic, Regular, Italic, Medium, Medium Italic, Semibold, Semibold Italic, Bold,
Bold Italic, Extra Bold, Extra Bold Italic, Black, Black Italic, Heavy, Heavy Italic
Лицензия – бесплатно
Рис. 2.10. Пример шрифта Gilroy
Название – Noah
Источник: https://baza.diplomsite.ru/previewfile/756