Сайт для учителя: аудитория, структура, оформление

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

Задача кажется простой, но иногда учительские сайты получаются сложными для восприятия. Корреспондент «Фоксфорд.Новости» просмотрел сайты педагогов на ресурсе «Я учитель»  и  «Учительский портал», изучил лучшие интернет-страницы педагогов по версии сообщества «Методисты» и подготовил список рекомендаций, которые сделают сайт педагога понятнее для учеников, родителей и коллег.

Задачи и целевая аудитория сайта

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

Допустим, преподаватель по изобразительному искусству решил, что сделает сайт для своих учеников (целевая аудитория). После этого он определил его задачу: благодаря сайту, ученики 5 класса научатся рисовать маслом, акварелью и карандашами.

В таком случае, главные объекты сайта — иллюстрации, которые сопровождаются комментариями. Школьник должен увидеть, с какой последовательностью  и по каким правилам рисуется объект.

Фото — http://detionline.org.

Любой сложный рисунок начинается с простых геометрических линий — например, кругов и отрезков.

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

В отличие от своего коллеги учителя рисования, предметник по русскому языку может сделать сайт, как у Ильи Бирмана. Здесь нет картинок, и минималистичный дизайн не отвлекает пользователей от поиска правил орфографии и пунктуации.

Структура сайта

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

Задачи и аудитория сайта помогают выбрать его структуру. Например, для того чтобы познакомиться с педагогом, узнать его контакты, посмотреть портфолио или награды — ни к чему делать громоздкий портал, достаточно сайта-визитки. Учитель может использовать такой сайт в качестве резюме при устройстве на работу или презентовать его родителям, которые ищут репетитора для своего ребёнка.

Сайт-визитка — способ познакомиться с работами педагога и узнать его контакты.

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

Многостраничный сайт поможет взаимодействовать с разными аудиториями и подробно раскрыть любую тему.

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

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

Оформление сайта

После того, как педагог создал сайт и наполнил его контентом — текстами, иллюстрациями и видео, — необходимо позаботиться об оформлении.

Цвет текста и фона, размер шрифта и расположение всех элементов на странице сайта, не должны отвлекать пользователя от содержания.

Заголовок

Заголовок называет страницу или её блок, привлекает внимание и помогает решить пользователю, читать этот текст или пройти дальше.

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

Размер шрифта у заголовка всегда больше размера основного текста. Все заголовки на странице должны быть однотипными и соответствовать содержанию — так текст становится проще и соблюдается логика. Например, в разделе «оформление сайта» все заголовки — существительные, состоящие из одного слова. В каждом пункте рассказывается ровно то, что обозначено в заголовке.

Текст

Чтобы не превращать текст в нечитаемое полотно — нужно дробить его на абзацы. Один абзац — это одна мысль. Размер абзацев может быть разным.

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

Текст, выровненный посередине, сложно читать.

Не нужно выравнивать текст по ширине или центру — это создаёт неравномерные пробелы, делает строки разными по длине, а значит снижает скорость чтения и восприятие текста.

Иллюстрация

Элемент, который привлекает внимание пользователя, его видят раньше заголовков и текста. Иллюстрация не просто украшает страницы сайта, она несёт информацию: поясняет текст, передаёт эмоцию, рассказывает историю.

Если мысленно убрать весь текст с сайта — иллюстрации позволят понять, что хотел сказать автор.

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

Гиперссылка

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

Текст ссылки самодостаточен и показывает, что за ней скрывается. Проверить это просто: если убрать гиперссылку, текст остаётся осмысленным. Поэтому фразу, «задайте вопрос директору тут» нужно заменить на «задайте вопрос директору».

Гиперссылка — это единственный элемент на сайте, который можно подчёркивать.

На любой подчёркнутый текст хочется кликнуть мышкой.

Если учитель выделяет слово, чтобы акцентировать на нём внимание — пользователь может подумать, что это ссылка и кликнет по нему мышкой. Поэтому для выделения текста лучше использовать приёмы из справочника Мильчина.

Подпись

Подписи объясняют содержание иллюстраций, кнопок или гиперссылок и располагаются снизу или сбоку от своих объектов.

Хорошая подпись к иллюстрации привлекает внимание читателя и может мотивировать его прочесть текст, расположенный под ней.

Шрифт

Задача шрифта — сделать текст на сайте удобным для чтения. Для этого педагогу лучше использовать единое начертание, цвет и размер шрифта. Например, если педагог пишет статью для блога шрифтом Arial, то не стоит в середине текста менять его на Times New Roman.

Для шрифта лучше использовать черный цвет на белом фоне — переливающиеся буквы и яркий фон вызовет рябь в глазах и отвлечёт от сути текста.

Приведите размер (кегль) шрифта к единообразию: основной текст набирайте 12-м кеглем, заголовки — 18-м кеглем. Не выделяйте шрифт курсивом или полужирным, если это не требуется.

Информация воспринимается лучше при едином начертании, цвете и размере шрифта.

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

Создание сайта: пример

Мы представили себя в роли учителя ИЗО. За один вечер создали сайт на бесплатном конструкторе и описали краткую логику работы над ним. Ссылка на сайт в конце текста.

Допустим, учитель рисования захотел создать сайт для учеников 5 – 9 классов. По замыслу педагога, сайт станет наглядным справочником: с его помощью школьники смогут самостоятельно закрепить тему урока или узнают дополнительный материал.

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

Для этой задачи учитель выбрал сервис «Тильда» и создал простой сайт-визитку. Главная страница знакомит пользователя с педагогом, раздел «контакты» поможет с ним связаться, а «обучающие материалы» подскажут ученикам тонкости рисования.

Главная ценность сайта — раздел «обучающие материалы». Он состоит из трёх блоков с заголовками «Основы светотени», «Основы рисунка», «Абстрактная акварель». Каждый блок наглядно раскрывает тему с помощью больших иллюстраций или видеороликов и подписей к ним.

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

Ссылка на сайт: http://dvixarev.tilda.ws/start

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