МУ им. С.Ю. Витте, web-дизайн (рейтинговая работа)
| Скачать (13.15 Mb) | 22.04.2026, 07:51 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Решение задач рейтинговой работы рассчитано на обретение навыков разработки дизайна сайта в рамках предложенной предметной области. В ходе выполнения рейтинговой работы обучающийся научится: проводить анализ предметной области и анализ целевой аудитории; разрабатывать дерево функций приложения; разрабатывать скетчи, прототипы и макеты страниц сайта; создавать руководство по типографическому стилю; подбирать цветовую палитру. Задание для рейтинговой работы разработано в 15 вариантах. ЗАДАНИЕ ДЛЯ ВЫПОЛНЕНИЯ РЕЙТИНГОВОЙ РАБОТЫ Варианты Задания выполняются по вариантам в соответствии с первой буквой фамилии.
Задание Задание выполняется с помощью бесплатного графического редактора Photopea: https://photopea.ru 1. Провести анализ предметной области. Провести анализ целевой аудитории. 2. Разработать карту сайта (5-10 страниц). 3. Сделать зарисовку идей страниц сайта. Для каждой страницы сайта должно быть не менее 4 скетчей. На скетчах должно быть показано куда ведут те или иные кнопки. Представлены скетчи, отображающие реакции элементов интерфейса на действия пользователя (например, нажатие кнопки). Представлены стили кнопок. 4. Разработать руководство по типографическому стилю. Выбрать не менее 5 шрифтов без засечек и не менее 5 шрифтов с засечками. Выбрать наилучшую комбинацию шрифтов. Дать описание типографики. Представить руководство по типографической иерархии. 5. Подобрать цветовую схему. Выбрать главный цвет, вторичный цвет, активный (подчеркивающий) цвет, цвет заднего фона. Представить полную цветовую палитру (с различными оттенками выбранных цветов). 6.Создать прототипы всех страниц сайта. 7. Создать макеты всех страниц сайта. Пошаговое описание процесса разработки интерфейса описано: - в учебном пособии «Разработка и проектирование дизайна web-интерфейсов UI/UX», авторы - И.А. Королькова, М.В. Преображенский, С.А. Зайцев; - в разделе «Пример оформления рейтинговой работы» ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ РЕЙТИНГОВОЙ РАБОТЫ Рейтинговая работа выполняется обучающимся самостоятельно в электронной форме и размещается обучающимся в личном кабинете в виде архивного файла *.zip. Состав архивного файла: - файл отчета по работе с именем файла ФИО.docx (пример: «Иванов АС.docx») - файлы исходников изображений в формате .psd. ВАЖНО! 1. В отчете должно быть указано ваше задание с исходными данными. 2. В отчете должна быть подробно описана последовательность выполнения каждой задачи, так как это продемонстрировано в «Примере оформления рейтинговой работы». 4. В отчете должны быть скриншоты из Photopia и изображения макетов/прототипов/руководств и т.п. с подробными комментариями к каждой задаче. Скриншоты и изображения требуются на случай, если ваши исходные psd файлы загрузятся в ЭУ с ошибкой. Для подготовки к выполнению рейтинговой работы требуется самостоятельное изучение учебного пособия И.А. Корольковой, М.В. Преображенского, С.А. Зайцева «Разработка и проектирование дизайна web-интерфейсов UI/UX». Пример оформления рейтинговой работы Титульный лист Содержание 1. Анализ предметной области и целевой аудитории 2. Карта сайта 3. Зарисовка идей 4. Разработка руководства по типографическому стилю 5. Выбор цветовой схемы 6. Разработка прототипов 7. Разработка макетов Список используемой литературы 1. Анализ предметной области и целевой аудитории Здесь необходимо подробно проанализировать заданную предметную область: - какие функции выполняет организация? - какие конкуренты есть на рынке? - какие функции предлагают сайты конкурентов? - какие функции требуется добавить на ваш сайта? А также здесь проводится анализ целевой аудитории: данные о возрасте, поле, интересах людей, которые заинтересованы в использовании мобильного приложения 2. Карта сайта Карта сайта должна отражать весь функционал (все страницы), который вы планируете реализовать. 3. Зарисовка идей Шаг 1. Придумайте собственный дизайн и сделайте набросок планировки расположения контента веб-сайта. Продумайте какие подстраницы будут у вас на сайте и где они будут расположены. Не забывайте – пользователям должно быть удобно пользоваться сайтом. Нарисуйте несколько вариантов домашней страницы. На рисунке ниже синим цветом отмечены основные кнопки, по нажатию на которые пользователь перейдет на другие подстраницы. Шаг 2. Отобразите на рисунке куда ведут те или иные кнопки. Не забывайте про карту сайта, на которой у вас была изображена подчиненность страниц. Шаг 3. Сделайте индивидуальный набросок для каждого окна. У вас должно получиться минимум 4 концепта из которых в дальнейшем вы сможете выбирать. Шаг 4. Продумайте как должны реагировать элементы, если пользователь нажмет на кнопку? Шаг 5. На последнем шаге зарисовки идей продумайте стиль кнопок. Вы можете экспериментировать с различными формами кнопок. 4. Разработка руководства по типографическому стилю Руководство по типографическому стилю веб-сайта - это документ, в котором назначаются и описываются типографические стили, используемые в проекте веб-сайта. Шаг 1. Выберите 5 шрифтов без засечек и 5 шрифтов с засечками на Google Fonts, которые вам больше всего понравятся. Шаг 2. Создайте несколько комбинаций в Photopea, используя 10 выбранных шрифтов, чтобы подобрать оптимальное сочетание. У вас получится 25 различных комбинаций шрифтов. Из них выберите вариант, которые вам больше всего понравятся. В данном пособии будут использоваться шрифты Merriweather (заголовок) и Open Sans (текст тела сайта) для дальнейшей работы. Жирный шрифт Merriweather будет создавать отличный контраст шрифту Open Sans. Шаг 3. Теперь необходимо добавить описание новой типографики. Сначала мы перейдем в семейство шрифтов, которое мы выбрали и удалим шрифты «special», т.к. они не будут использоваться в данном проекте. Далее добавим информацию о том, какие шрифты были выбраны, укажем их названия и стили, которые будут использоваться в проекте. Здесь важно помнить - чем больше стилей используется, тем больше времени требуется на загрузку интерфейса. Задача – максимально ускорить работу интерфейса. Шаг 4. Теперь соединяем типографическую иерархию с заголовка 1 уровня, до заголовка 6-го уровня, включая параграфы, цитаты и небольшой пример текста. Если вам требуется больше стилей, вы можете добавить их. Воспользуемся традиционной типографической шкалой чтобы выбрать верный размер шрифта: 48 пикселей (заголовок 1 уровня), 36 пикселей (заголовок 2 уровня), 24 пикселя (заголовок 3 уровня), 22 пикселя (заголовок 4 уровня), 18 пикселей (параграф), 16 пикселей (небольшой параграф), 14 пикселей (заголовок 6 уровня). Заголовки от 1 до 4 имеют одинаковый стиль, но они имеют пропорционально изменённый размер. Необходимо только найти правильные высоты строк. Находим их, умножая на 1.33 для крупных шрифтов и умножая на 1.5 для маленьких шрифтов. Округляем конечные значения и выбираем то значение, которое лучше нам подходит. В заголовках 5 и 6 уровня нам нужно полностью изменить стилистику. Используйте для них только заглавные буквы и добавьте дополнительный интервал между буквами для лучшей читаемости. В данном случае будет использоваться шрифт без засечек Open Sans для заголовков 5 уровня, с жирным выделением для создания более сильного визуального приоритет, чем у заголовков 6 уровня, которые будут выглядеть гораздо тоньше. Для параграфов нужно будем использовать простые стили. В нашем случае это шрифт Open Sans размером в 18 пикселей. Это стандартный размер шрифта для текста параграфа на сайте. Чтобы найти высоту строк для параграфа, нужно умножить размер шрифта на 1.66. Получаем значение около 30 пикселей. Можно было умножить размер шрифта на 1.5. В этом случае текст тоже будет хорошо выглядеть. Но нам нужен немного больший пробел между строками для лучшей читаемости. Кроме того, давайте добавим отдельный стиль для цитат. Они должны выделяться среди обычных параграфов и выглядеть декоративно. Воспользуемся шрифтом Merriweather – он тонкий и одновременно более крупный. На данном этапе мы еще не используем никакие цвета. Всю типографику мы сейчас тестируем в черном цвете. Это позволяет нам сфокусироваться на правильных размерах шрифта, отступах и иерархии в целом. Цвет шрифтам будет добавляться после выбора цветовой палитры в следующей главе. По итогам выполнения заданий, у вас должно было получиться руководство, как на рисунке ниже. 5. Выбор цветовой схемы Ваша цветовая палитра должна включать в себя все образцы базовых цветов с указанием на то, является ли он основным, вторичным, акцентирующим или цветом заднего фона. Так же очень полезно добавлять hex коды цветов и значения RGB. Если планируется использовать те же цвета для печати, то при необходимости добавьте CMYK и коды Pantone. Шаг 1. Первым шагом является выбор верного главного цвета. Допустим, к этому моменту мы уже знаем, что основным цветом должен быть зеленый. Теперь необходимо выбрать один оттенок из миллиона доступных для зеленого цвета. Чтобы выбрать можно воспользоваться инструментом «Выбор цвета» в Photopea. Открываем PSD файл шаблона палитры и создаем в нем папку, в которой будем размещать слои с заливкой. В дальнейшем это поможет нам подобрать правильный тон. Затем открываем инструмент «Выбор цвета». В нем можно увидеть все доступные тона на шкале справа и насыщенность со светосилой в большом квадрате слева. Это позволяет подобрать верный тон и затем скорректировать его светосилу и насыщенность для получения нужного цвета. Зеленый цвет занимает значительную часть полоски тонов. Чем ближе я приближаюсь к голубому, мой зеленый цвет становится более холодным и чем ближе передвигаюсь к желтому, тем он становится более теплым. Так что, это первое решение, которое мне необходимо сделать. Нужно ли мне чтобы зеленый был теплее или холоднее? Выбираем более холодный тон, чтобы иметь возможность использовать теплый цвет в качестве акцентирующего, он создаст хороший контраст. Слегка изменим светосилу и насыщенность. При необходимости, позже мы сможем ее скорректировать. Теперь необходимо проверить, как эти цвета будут выглядеть с текстом на белом заднем фоне. Шаг 2. Теперь выберем вторичный цвет. Он будет использоваться для текста тела сайта, так что он должен быть темный и достаточно насыщенный, чтобы создавался хороший контраст со светлым задним фоном. Мы можем просто выбрать темно серый цвет для текста, но из-за этого цветовая схема будет выглядеть холодной в сочетании с основным цветом, который мы выбрали. Так что, вместо этого сделаем вторичный цвет слегка более теплым. Выбор остановим на темно-коричневом. Изменим тон на оранжевый и выберем что-то со слабой насыщенностью и светосилой. Сохраняем его и смотрим как зеленый и коричневый смотрятся вместе. Эти два цвета являются природными (трава и почва), так что они отлично подходят друг другу. Шаг 3. Следующий шаг заключается в выборе активного (или подчеркивающего) цвета. Этот цвет будет использоваться для различных призывов к действию, выделения ссылок и прочих областей на которые надо обратить внимание. В этом нам поможет Adobe Color. Установим наш основной цвет в качестве базового и выберем правило гармонии «Треугольная»: На рисунке выше показано, что и светло-коричневый и фиолетовый хорошо сочетаются с зеленым. Выбираем светло-коричневый, потому что он сочетается с темно-коричневым. Скопируем hex-код, который был сгенерирован Adobe Color и вставим его в Photopea «Выбор цвета». Он показывает верный тон, но нам нужен более сильный акцентирующий цвет. Поэтому изменим светосилу/насыщенность и выберем тон из правого верхнего угла. Сохраним этот цвет. Теперь сравним все 3 выбранных нами цвета. Шаг 4. В последнем шаге мы найдем цвет заднего фона. Можно сделать его белым или светло-серым. Эти цвета отлично будут сочетаться с остальными цветами. Попробуем немного «согреть» цветовую схему и выберем желто-коричневый цвет. Он хорошо смотрится с вторичным цветом и выглядит очень гармонично в цветовой схеме. Как и в предыдущем шаге, открываем «Выбор цвета» и выбираем оранжевый тон. Затем переходим в левый верхний угол, в котором светосила очень велика, а насыщенность слаба. Сохраняем цвет заднего фона и просматриваем цветовую схему целиком. 6. Разработка прототипов В этом задании вам необходимо разработать прототип для каждой страницы сайта. Для создания прототипов воспользуемся Photopea. Помните, что прототипы не должны быть пиксель в пиксель и вам не нужно беспокоиться о цветах, типографике и остальных визуальных элементах. Сфокусируйтесь на разработке дизайна макета и структуре страницы. Далее будет приведен пример разработки прототипов для сайта университета. Шаг 1. Начнем с разработки дизайна домашней страницы. Скопируем стартовый шаблон в новую папку и назовем этот файл «Прототип домашней страницы.psd». Открываем файл и включаем отображение направляющих (Просмотр/Добавить направляющие). Сделаем сетку из 12 колонок. Шаг 2. В этом PSD-файле можно начать рисовать первые элементы прототипа. Начнем с вводной секции. В соответствии с набросками, сделанными ранее, на сайте должно быть большое введение с одним сообщением посередине. С помощью инструмента Прямоугольник (U) нарисуем задний фон секции «Введение». Так же с помощью Прямоугольника (U) добавляем элементы такие как: изображения, заголовки, кнопки и навигацию. Изменим прозрачность некоторых слоев для варьирования их важности. Например, заголовок может быть 75%, а подзаголовок всего 30%. Это создает хорошее визуальное отличие. Шаг 3. Теперь приступим к разделу «Сервисы». На основе решетки из 12 колонок, разделим макет на три большие колонки (3 х 4) и разметим области, в которых в дальнейшем будут располагаться иконки сервисов, заголовки, описание и кнопки. Далее идет раздел «Об университете». Снова воспользуемся сеткой для разбиения его на 3 большие колонки. Добавляем изображение и пример текста в левую колонку. Вставляем краткий текст «Об университете» в среднюю и правую колонки. Аналогично работаем с разделом «Галерея», но покажем по 4 проекта в каждой строке. Поэтому разделим макет на 4 колонки: 4 х 3. Раздел CTA (призыв к действию) и футер состоят из одной колонки. Чтобы завершить прототип домашней страницы, добавим на него небольшие заметки - пояснения, в которых будут даны описания разделам. В Photoshop wireframe kit существует специальный элемент для заметок. В Photopea он отсутствует, поэтому просто создадим отдельный слой, на котором будем делать записи. Для таких слоев сделаем новую папку «*Заметки», чтобы можно было спрятать все заметки с макета при первой необходимости. Полноценный шаблон домашней страницы представлен ниже. Шаг 4. Теперь создадим прототип для страницы блога. Копируем домашнюю страницу, чтобы не создавать заново одинаковые элементы. Удалим секцию контента, но оставим заголовок, призыв к действию и футер. На странице блога заголовок не должен быть таким большим, поэтому нам нужно поменять его размер. В области контента сделаем сайдбар справа и список статей блога. Используя решетки, разделим макет на две колонки (8 + 1 + 3). Оставим небольшое пространство между блогом и сайдбаром, чтобы статьи не наезжали на виджеты. В макете статьи блога так же используем сетки для разделения информации о статье от самой статьи. Из-за этого контент статьи находится практически по центру экрана и есть отступ с левой стороны благодаря информации о статье. Добавим заметки и окончательный прототип выглядит так: Шаг 5. Повторим шаги с остальными двумя страницами: «Об университете» и страница статей блога. Ниже представлен готовый прототип страницы «Об университете»: Перерисовываем почти все со страницы блога на страницу статей блога. Страница статьи блога будет похожа на домашнюю страницу. На ней будут так же присутствовать заголовок статьи блога и изображение на заднем фоне. Можно сделать несколько различных версий некоторых страниц, если вы до сих пор не уверены как они должны выглядеть. 7. Разработка макетов Создание макетов начинается с разработки домашней страницы (главного окна). Она является самой важной страницей, ее первой видят пользователи. У вас есть несколько секунд, чтобы произвести хорошее впечатление на пользователя, привлечь его внимание и заставить задержаться в приложении. Далее будет приведен пример разработки макетов для сайта университета Шаг 1. Начинаем с копирования стартового шаблона в Photopea в новую папку, в которой мы будем хранить все свои PSD-файлы. Назовем этот файл «Домашняя страница.psd». И откроем прототип домашней страницы, чтобы иметь возможность сверяться с ним. Можно распечатать прототип на принтере, чтобы иметь перед глазами копию прототипа и не «прыгать» между окнами. Нам нужно открыть также файлы руководство по типографическим стилям и по цветовой схеме. Они должны быть все время открытыми, чтобы мы имели возможность выбирать нужные цвета и шрифты или обновлять руководства. После внимательно анализа цветовой схемы, мы решили отказаться от зеленого цвета и остановится на желто-оранжево-коричневой схеме. Конечно, это повлекло за собой изменение руководство по цвету. Обратите внимание, что для новичков, желательно придерживаться изначальной схемы, чтобы не возникло путаницы при создании дизайна. Чтобы начать, выбираем цвет заднего фона из цветовой схемы и заполняем слой заднего фона в файле домашней страницы. Это будет начальной точкой для наших дальнейших действий. Шаг 2. Начнем с введения и заголовка, которые являются первым разделом домашней страницы. Нам требуется сделать введение очень большим – так мы заложили дизайн в прототипе. Воспользуемся прямоугольным выделением (М) для того чтобы выбрать необходимую область. В данном случае это будет 700 пикселей (обратите внимание, что должно быть 700pt или 1400 пикселей, если вы разрабатываете для ретины при двойном размере и 144dpi. Далее заполним это место вторичным цветом используя прямоугольное выделение (М). На место темного прямоугольника поместим фотографию, которая станет нашим задним фоном. Вставляем фото в PSD-файл и воспользуемся Маской отсечения, чтобы обрезать изображение в соответствии с формой прямоугольника. Для этого поместим фотографию поверх слоя с формой, кликнем правой кнопкой по слою с фото и выберем «Маска отсечения». Рядом со слоем появится стрелка, указывающая вниз. Подобрать фон для своего дизайна можно на сайте Unsplash.com, там размещено огромное количество бесплатных фотографий в высоком разрешении. Все фото на сайте Unsplash опубликованы под лицензией Creative Commons Zero. Это значит, что вы можете копировать, изменять, распространять и использовать фотографии даже для коммерческих целей без необходимости указания правообладателя. Сделаем фото прозрачным, установив непрозрачность на 40%, таким образом оно смешается с задним фоном. Это улучшит читаемость белого текста и позволит сделать красивый задний фон. Логотип и навигация, которые являются частью заголовка, будут находиться на самом верху заднего фона введения. Нужно разметить это место. Выбираем 100 пикселей для заголовка и добавляем две направляющие: одну на расстоянии 100 пикселей и одну посередине на расстоянии 50 пикселей (воспользуемся вертикальным выравниванием для логотипа и навигации). Во-первых, добавим простое типографическое имя логотипа. Выберем один из заголовков в качестве стартовой точки, отмасштабируем его до 35pt и изменим цвет на белый. Не нужно создавать стиль параграфа для логотипа т.к. этот элемент является уникальным и больше нигде не будет использоваться. Во-вторых, добавим элементы навигации: Home, About, Services, Blog, и Contacts. Навигация так же является уникальным элементом, но мы выберем «Shojumaru» в качестве отправной точки и уменьшим его размер до 23pt, сделаем его белым. Теперь проработаем текст введения. Начнем с добавления направляющей в середине секции введения (ровно 350 пикселей сверху). Это то место, в которое необходимо поместить заголовок. Воспользуемся стилем «Roboto Slab» для заголовка, изменим цвет на белый и центрируем текст. Последним этапов мы делаем кнопки. Их будет две: - второстепенная кнопка, которая ведет пользователя на следующий раздел. Она будет прозрачной внутри с белой рамкой вокруг (эта идея взята из ранее сделанных набросков); - основная кнопка для перехода на форму обратной связи (будет заполнена акцентирующим цветом, чтобы привлекать больше внимания). Шаг 3. Разработка раздела «Сервисы». Для начала добавим заголовок и подзаголовок. Установим отступ в 100 пикселей сверху для данного раздела. Мы использовали 50 пикселей в качестве базового отступа в разделе «Введение». Поэтому постараемся придерживаться этого значения и умножим его, если нужно будет добавить пробелы. Воспользуемся стилем «Roboto Slab» для заголовка и подзаголовков. Поменяем цвет заголовков на темно-коричневый цвет. Он же будет использоваться для остальных заголовков. Обратите внимание, что мы используем горизонтальные направляющие каждый раз, когда отмечаем новый отступ. Кроме того, сделаем эту секцию немного более выделяющейся и для этого изменим цвет заднего фона на белый (рисунок 5.49). Далее добавим три избранных сервиса. Согласно прототипу, нам нужно поместить их в 3 колонки и для этого воспользуемся макетом с разлинованной сеткой. Вставим 3 иконки и добавим имена сервисов под каждым из этих элементов. Воспользуемся стилем «Roboto Slab» с второстепенным цветом для заголовков сервисов. Обозначения сервисов можно оставить простыми: только иконки и названия сервисов. Но лучше добавить краткое описание и кнопку. Не каждый пользователь поймет, что можно кликнуть по иконке или имени сервиса. Добавление кнопок с ясным призывом к действию «Узнать больше (Learn More)», «Найти больше (Find Out More)», «Читать далее (Read More)», или «Начать (Get Started)» поможет пользователям работать с сайтом не задумываясь. Используем стиль «Roboto Slab» и в качестве цвета выберем второстепенный цвет, сделав его на 50% ярче основного. Здесь заканчивается белый задний фон. Раздел «Сервисы» полностью готов. Шаг 4. Разработка раздела «Об университете» Это очень простой раздел, в котором будет информация об организации. Точно так же, как и в разделе с введением добавим фотографию на задний фон с прозрачностью 30 %. После чего приступим к заголовку. Согласно прототипу, нужно распределить контент на 3 колонки. Центральная и правая колонки включают немного информации об университете, они написаны стилем «Roboto Slab» белым цветом. В левой колонке добавим фотографию со студенческим советом, с помощью маски отсечения, и прямо под ней оставим подпись к фото с помощью стиля «Rosarivo». Так же добавим строку с контактами студенческого совета («Rosarivo»). Шаг 5. Разработка раздела «Галерея». Добавим заголовок, белый цвет заднего фона и распланируем пробелы. В разделе «Галерея» будет показано 8 фотографий, отображающих активную деятельность университета и студентов, так что мы планируем использовать две строки по 4 фотографии. Чтобы начать, воспользуемся прямоугольниками с границе в 1 пиксель и светлым цветом для заднего фона (в hex: #fff8c3). Каждый прямоугольник шириной в три колонки. Пробелы между фото по горизонтали составляют 12 пикселей и по вертикали 50 пикселей. Добавим кнопку «See More» («Roboto Slab» кегель 24 пикселей): Далее добавляем фотографии, выбираем слой с подложкой для фотографии и с помощью прямоугольного выделения обозначаем нужный размер фотографии. После этого выбираем на панели инструментов Quick mask mode, с помощью нее мы накладываем маску. Далее с помощью инструмента Перемещение, перетаскиваем фото в нужную нам подложку. На слое настраиваем Маску отсечения и так проделываем с каждой фотографией. Шаг 6. Разработка раздела «Отзывы». Начнем с планирования пробелов и добавления заголовка и цвета заднего фона. Затем добавим пример отзыва. Воспользуемся более светлой версией вторичного цвета за счет изменения прозрачности текста на 60%. Текст достаточно крупный и нам не нужно чтобы он выделялся сильнее, чем профиль пользователя, который находится ниже. Шаг 7. Разработка раздела «Призыв к действию» и нижнего колонтитула. Также начинаем с заголовка в разделе CTA. Воспользуемся стандартным пробелом в 50 пикселей и сделаем заголовок со стилем как в предыдущих разделах. Добавляем кнопку, оставляем сведения об организации. Домашняя страница готова. Теперь создадим макет страницы «Об университете». Этот дизайн так же будет использоваться в качестве шаблона для других страниц. Так что, это больше будет похоже на образец того, как должны выглядеть другие страницы веб-сайта. Шаг 1. Приступаем к созданию страницы «Об университете». Начнем так же с заголовка. Вставляем задний фон. На данной странице заголовок будет коротким. Берем и копируем с домашней страницы логотип и навигацию. Заголовок меняем на «About University» кегель 63 пикселя, шрифт «Roboto Slab». Шаг 2. Чтобы разработать область контента на странице обязательно пользуемся сеткой. Это позволяет распределить контент по всей ширине страницы и при этом поддерживать оригинальную структуру. Также копируем все объекты из раздела «Об университете» домашней страницы и редактируем. Добавляем две кнопки прямо под изображением профиля и увеличиваем количество информации в виде текста. Шаг 3. В последнем шаге, вставляем всю область контента с баннером призыва действия и футером с домашней страницы. Эти части уже разработаны, нам нужно просто передвинуть эти элементы. Разработка страницы блога Каждому блогу нужен макет как минимум двух страниц: страницы с архивом и страницы статьи. Начнем со страницы архивов, на которой размещается список статей блога, включая их заголовки, отрывки и ссылки «Прочитать подробнее» Дизайн страницы будет базироваться на прототипе, который мы уже создали. Шаг 1. Сделаем копию PSD-файла шаблона страницы блога. Так же откроем параллельно и страницу «Об университете», которую мы только что создали. Присвоим заголовок «University Blog» странице и изменим выбранный пункт в навигации на «Blog». Шаблон новой страницы готов к наполнению. Шаг 2. Разработаем образец сообщения блога в разделе с основным контентом. Нам необходимо использовать 8 колонок от левого края, так чтобы осталось еще 4 колонки для сайдбара и пробела с правой стороны. Нарисуем прямоугольник для того, чтобы отметить статью блога и добавим пробел в 50 пикселей под ним. Здесь прямоугольник используется в качестве заглушки для фотографии сообщения с помощью Маски отсечения. Далее добавим заголовок сообщения, образец отрывка параграфа и кнопку «Continue Reading». Установим пробел в 50 пикселей до и после параграфа и 100 пикселей сразу после кнопки, чтобы добавить направляющую в том месте, где должно начаться сообщение. На рисунке выше видно, что мы оставили первые четыре колонки пустыми. В этом месте будет добавлена информация о статье. Укажем автора статьи и дату публикации. Сделаем эту информацию очень простой для восприятия и воспользуемся только типографией. Немного сократим текст, так как сообщения должны быть чуть короче. И добавим еще одно сообщение чтобы показать, как должны выглядеть несколько статей на странице. Последний элемент, который мне нужно добавить - это номера страниц. Они позволят нам переходить на различные страницы блога. Это простой текстовый элемент с одной активной страницей в качестве примера. Добавим еще один пробел в 100 пикселей сразу после номеров страниц, чтобы обозначить место, где кончается область контента страницы и начинается раздел призыва к действию. Шаг 3. Перейдем к последнему элементу страницы блога, к сайдбару. У нас было зарезервировано 4 колонки с правой стороны для сайдбара. На прототипе мы отделяли виджеты от статьи с помощью пробела. Поступим также – одну колонку оставим пустой и на трех оставшихся нарисуем виджет. Виджет “Subscribe to Newsletter” будем самым выделяющимся в сайдбаре, поэтому помещаем его на самый верх и будем использовать белый цвет в качестве заднего фона. Создадим форму подписки с помощью прямоугольника (U) белого цвета, делаем отступы сверху 50 пикселей и 50 пикселей снизу и добавляем заголовок «Subscribe To Newsletter». Делаем отступ в 15 пикселей и добавляем форму для введения электронной почты. Добавляем еще один отступ в 15 пикселей и информацию о подписке, после чего размещаем кнопку «SIGN UP» для оформления подписки и получаем такую форму: Можно преобразить ее добавив с помощью инструмента «Элипс» шапочку и вставив картинку письма с помощью маски отсечения. В дополнение разработаем простой тестовый виджет, который представляет из себя только заголовок (шрифт «Roboto Slab») и текст (шрифт «Didact Gothic»): Раздел призыва к действию сделаем быстро, скопировав объекты с раздела CTA с проекта по странице проекта. Оформляем нижний колонтитул страницы и страница блога готова. Шаг 4. На последнем шаге делаем дизайн макета статьи блога. Начинаем с дублирования PSD-файла и называем его «Блог_статья.psd». Статья блога будет похожей на страницу блога, за исключением большего заголовку вверху. Изменим текст заголовка на название статьи блога и удалим неиспользуемые слои Далее скопируем со страницы проекта и переносем такие объекты как: дата, форма подписки, виджеты, полностью раздел призыв к действию. Добавляем текст и комментарий к ним, делаем все с помощью прямоугольника (U) и получаем такую страницу: И добавляем форму для отправки комментариев Копируем CTA и нижний колонтитул, добавляем теги под датой КРИТЕРИИ ОЦЕНКИ РЕЙТИНГОВОЙ РАБОТЫ Для оценки рейтинговой работы применяются следующие критерии: Балльная шкала для оценки рейтинговой работы
В случаях, если: - задание выполнено не по своему варианту - выявлено несамостоятельное выполнение работы - отсутствуют исходные файлы в формате .psd рейтинговая работа не может быть проверена и будет оценена в «1» балл. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||