Исправляем ошибки при создании сайта личного архива
В этой статье мы продолжаем говорить о проектировании сайта личного архива. В предыдущей части мы разбирались с ошибками на примере сайта www.aldricharchive.co.uk. В этой – расскажем, как исправить погрешности, и продемонстрируем некоторые детали проектирования.
Наша задача в рамках статьи – переработать структуру сайта, сохранив визуальное сходство с оригиналом.
Перепроектируем структуру
В этом блоке мы изучим текущую структуру сайта и переработаем её. Чтобы понять устройство сайта, необходимо построить его модель – описать все материалы и взаимосвязи между ними.
Всего на сайте представлено 245 материалов различного качества, которые организованы в древовидную структуру (см. рисунок ниже)
- Зелёный – страница с данными и пояснениями к ним, откуда пользователь переходит на другие страницы
- Оранжевый (светлый) – внешний PDF-файл со сканом статьи
- Оранжевый (сплошной) –ссылка на внешний веб-сайт
- Фиолетовый – внутренняя статья без дальнейшего ветвления
Кроме обозначенных материалов, на сайте присутствуют вспомогательные – это страницы с фотографиями и списки статей (индексы).
Для каталогизации всех материалов удобно использовать электронные таблицы. На первом этапе выписываем все материалы и сопоставляем их с классами. Ссылки на сторонние сайты исключаем, так как на текущий момент там ничего полезного по теме нет, ссылки устарели.
Изучим все материалы и присвоим каждому категорию. Удобно прорабатывать материалы по классам, записывая входящие в них категории по разным столбцам.
В результате анализа мы обнаружили несколько важных моментов.
1. Не все страницы имеют смысл: некоторые просто пусты, иные содержат настолько мало данных, что сохранять их для нового сайта не имеет смысла, так как их основная функция – заполнить место на странице ветвления. Страницы первой категории мы обозначали словом «пусто», второй – «краткая справка».
2. Полноценные страницы могут быть категоризированы по теме. У нас по итогам анализа получилось пять тем: история (history), байки (anecdotes), популяризация (popularization), техническая сторона (tech) и бизнес-кейс (case study).
- Материалы категории «история» описывают историю развития и становления технологий, к развитию которых имел отношение М. Олдрич.
- Категория «байки» содержит рассказы, воспоминания о «старых-добрых» временах.
- К «популяризации», в основном, относятся статьи, написанные для широкого круга читателей; их цель – познакомить читателя с новыми технологиями.
- «Техническая сторона» включает статьи, в которых больше внимания уделено техническим деталям, схемам работы и т.п.
- «Бизнес-кейсы» – это та же популяризация, но обращённая на участников деловых кругов. Основной посыл этих материалов – успешное внедрение новых технологий помогает бизнесу.
3. Незначительная часть материалов не попала ни в одну категорию. Примерно половину из них можно охарактеризовать как «имеющие общее свойство». Эти материалы могут быть использованы на главной странице: сюда попадает биография М. Олдрича и описание категорий архива. Оставшиеся попали в категорию «прочее» (other).
4. Также, все материалы были связаны с изначальными категориями архива: «Innovative Information Systems», «Teleputers and Cable Systems», «Data Capture 1977-2000», «E-commerce and Online Shopping», «The Human Factor 1977-2000», «Eastern Europe 1977-2000. В дальнейшем эту систему категорий можно использовать для фильтрации материалов.
Итоги анализа
- Получено две системы категорий, при помощи которых можно описать материалы сайта.
- Выделен блок материалов общего свойства для заполнения главной страницы и второстепенных материалов (не относящихся к архиву), которые попадут в подвал сайта.
- Удалены лишние, бессодержательные материалы (после чистки общее количество сократилось до 187).
Сохраняем стилистику
В данном случае сохранение стилистики – задача довольно простая. Для ее решения необходимо: (1) примерно зафиксировать пропорции объектов, (2) определить шрифты и цвета и (3) подготовить логотип.
Что касается последнего, это стандартная задача на перерисовывание в Adobe Illustrator.
Результат
Колористика сайта довольно бедная – кроме чистого чёрного и белого присутствует только один цвет – оттенок желтого (#FFF5E5). Помимо этих трёх цветов мы также воспользуемся оттенком синего (#362BB6) для обозначения гиперссылок.
Итоговая палитра нового сайта
На сайте используются два шрифта – Open Sans (16) для основного содержимого и Osvald (24, 51, 75) трёх размеров для заголовков. Их оставляем без изменений, хотя трёх размеров многовато, поэтому по факту мы использовали Osvald-24 и Osvald-51.
Итоговые шрифты для нового сайта
Шрифты
Текст статей идёт в одну колонку. Ширина текстовой области по отношению к ширине страницы – 10:16. Текст выравниваем по левому краю текстовой области, которая в свою очередь центрирована. Ширина навигационной панели сохранена без изменений. Изображения в статьях выравниваются по центру.
Итог редизайна – было vs стало
Внешний вид статьи
Было. Огромные заголовки, отсутствие стандарта при организации текста и изображений.
Стало. Все страницы организованы в едином стиле. Внизу страницы находится подвал со вспомогательными материалами. Все ссылки на сайте выделены синим.
Навигация
Было. Древовидная структура с большим количеством уровней и неясной структурой.
Стало. Все статьи на одной странице. Материалы могут быть отфильтрованы по двум системам категорий. К каждой статье прилагается краткое пояснение, соответствующее её началу. Панель навигации упразднена за ненадобностью. Остается только одна кнопка для перемещения от главной к архиву и от статьи обратно к архиву. Высвободившееся место занимают фильтры категорий.
Внешние материалы
Было. Большинство материалов представляет собой сканы старых печатных источников, которые к тому же не всегда организованы в виде, удобном для чтения.
Стало. Все сканы распознаны и переведены в статьи в соответствии с принятым стандартом стилистики.
Окончательный итог – мы перешли от сайта со сложной структурой и непродуманной версткой к сайту, на котором основные материалы находятся на одной странице и могут быть отфильтрованы в соответствии с предметом и темой, а визуальная сторона имеет единый стандарт.
Сильные разработки создаются не в одиночку, а в коллективе. LIVREZON CLUB объединяет более 50-ти коллективов в разных отраслях научного знания. В ежедневном режиме они делятся опытом, собирают новые данные, пишут книги и статьи, тестируют технологии и получают друг от друга полезную обратную связь.
Хотите присоединиться к коллективу разработчиков? Пишите на info@livrezon.com
ЧТО ТАКОЕ БАЗА ЗНАНИЙ?
Концентрированная книга издательства LIVREZON складывается из сотен и тысяч проанализированных источников литературы и масс-медиа. Авторы скрупулёзно изучают книги, статьи, видео, интервью и делятся полезными материалами, формируя коллективную Базу знаний.
Пример – это фактурная единица информации: небанальное воспроизводимое преобразование, которое используется в исследовании. Увы, найти его непросто. С 2017 года наш Клуб авторов собрал более 80 тысяч примеров. Часть из них мы ежедневно публикуем здесь.
Каждый фрагмент Базы знаний относится к одной или нескольким категориям и обладает точной ссылкой на первоисточник. Продолжите читать материалы по теме или найдите книгу, чтобы изучить её самостоятельно.
📎 База знаний издательства LIVREZON – только полезные материалы.