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

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

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

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

Здесь сравниваются примеры электронных портфолио и фиксируются сильные и слабые стороны их оформления. Для анализа применяются критерии: ясность структуры, читаемость, последовательность стиля, удобство навигации и пригодность для разных экранов. Результаты сравнения помогут принять решения для собственного макета и объяснить, почему одни визуальные приёмы подходят лучше других.

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

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

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

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

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