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

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 – только полезные материалы.

Следующая статья
Livrezon-технологии
Курсовая работа здорового человека vs «Курсач курильщика»
Зачем нужны курсовые? Все студенты обязаны их писать, а аргументы вузов сводятся к тому, что курсовая «учит проводить исследование». Да, курсовая — это исследовательская работа. Но почему тогда фразу «как написать курсовую» Яндекс ещё недавно продолжал автозаполнением «пример для дебилов», а сейчас самая популярное завершение — «с помощью нейросетей»? В этой статье разбираемся в подходах к написанию курсовой и в том, как находить качественные источники для исследования. Рассказывает Дмитрий Матвеев – научный редактор издательства «LIVREZON» и автор курса ...
Livrezon-технологии
Курсовая работа здорового человека vs «Курсач курильщика»
Livrezon-технологии
Сайт личного архива: ошибки при создании
Livrezon-технологии
ДНЕВНИК ПЕДАГОГА. Запись #71: Как «выучить» таблицу умножения
Livrezon-технологии
Интерфейс как форма выражения процедуры: как устроен калькулятор
Бизнес и экономика
Как социальная реклама сглаживает национально-религиозные противоречия?
Бизнес и экономика
PRотив насилия: как социальная реклама спасает детей?
Livrezon-технологии
ДНЕВНИК ПЕДАГОГА. Запись #73: Для чего мы читаем художественные книги?
Livrezon-технологии
ДНЕВНИК ПЕДАГОГА. Запись #72: Как дети читали книги и обнаружили, что взрослые бывают одинокими
Livrezon-технологии
Фактчекинг в тексте: что и как проверять? Приём «Конкретизация»
Livrezon-технологии
Как обстановка помогает в работе: писательские приёмы Чарльза Диккенса
Livrezon-технологии
Как глубоко можно интерпретировать текст: отрывок из книги Умберто Эко
Бизнес и экономика
«Производственная система Тойоты. Уходя от массового производства» – реферат: самое главное из книги Тайити Оно
Педагогика и образование
Психодиагностика по рисунку: не так страшен чёрный цвет, как его малюют
Livrezon-технологии
Интерфейс Photoshop: основная парадигма и базовые объекты
Livrezon-технологии
Умберто Эко о том, как собирает материал для своих романов