Исправляем ошибки при создании сайта личного архива

0
Автор статьи: Алексей Литвин5/17/2024

В этой статье мы продолжаем говорить о проектировании сайта личного архива. В предыдущей части мы разбирались с ошибками на примере сайта 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 – только полезные материалы.

Следующая статья
Психология и психофизиология
Паника — не план. Чек-лист для женщин, которые боятся сделать ошибку
Новая работа, свежие задачи, НО старые страхи Недавно я познакомилась с Кариной, она работает аналитиком в IT-сфере. Недавно она сменила компанию и присоединилась к команде, которая занимается для неё совершенно новым проектом. Стремясь быстрее вникнуть в задачу, она обратилась за советом к более опытной сотруднице. Но та ответила холодно: «Разбирайся сама!» — и отвернулась. Оставшись без поддержки, Карина сделала, как поняла сама, и — допустила ошибку. Вместо конструктивной обратной связи руководитель обрушился на неё с эмоциями: «Ты всё сделала неправил...
Психология и психофизиология
Паника — не план. Чек-лист для женщин, которые боятся сделать ошибку
Гуманитарные науки
Как сёгун держал страну в порядке: тайны управления эпохи Токугава
Бизнес и экономика
Иллюзия работы, или почему не работает самодиагностика процессов на предприятии — Часть 2
Livrezon-технологии
Ганс Селье о том, как написать научную статью
IT
Почему ИИ не станет «человеком»: критика искусственного интеллекта в изложении Хьюберта Дрейфуса
Livrezon-технологии
Больше чем смех: зачем обществу нужен юмор по Ю. Тамбергу
Биографии
Хочешь оставить след в истории? Учись у Монтессори! 10 способов сохранить наследие
Бизнес и экономика
СамоНеОрганизация. Почему посиделки у кулера не помогут работать лучше
Бизнес и экономика
Почему люди не будут пользоваться знаниями, инструментами и практиками
Бизнес и экономика
10 типовых ошибок коммуникаций на промышленном предприятии
Педагогика и образование
«Мы строили, строили и наконец…» Три проекта с дошкольниками: от идеи до реализации
Педагогика и образование
6 типовых ошибок студента-медика
Педагогика и образование
Ребенок рисует странные вещи – а вдруг у него шизофрения?
Педагогика и образование
Как повысить авторитет в коллективе: учимся у Наполеона Бонапарта
Бизнес и экономика
«Кровь, тяжёлый труд, слёзы и пот» — как создавать сильные речи по Черчиллю
Психология и психофизиология
Выгорание на любимой работе: незаметные причины большого разочарования