Daily Express | Редизайн новостного сайта

Проблемы:

- Нечитабельная и слишком мелкая типографика — текст сложно воспринимать, особенно на мобильных устройствах.

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

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

Постановка задачи:

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

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

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

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

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

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

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

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

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

Особое внимание я уделил поиску референсов, так как это был ключевой этап в создании визуального стиля проекта. Я провел масштабный поиск на таких платформах, как Behance, Awwwards, Dribbble, UIJar, Godly, Brutalist, Minimal Gallery, Httpster и Best Website Gallery. Этот процесс позволил мне найти актуальные, современные и функциональные решения, которые идеально подходили для реализации целей проекта. Собранные референсы послужили основой для дальнейшей разработки дизайна и позволили учесть лучшие практики в области визуального восприятия и пользовательского опыта. Этот этап также помог мне быть уверенным, что предложенные решения будут не только эстетичными, но и максимально эффективными для пользователей.

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

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

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

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

Затем я сформировал полный и удобный UI-Kit, который включал все элементы дизайна, такие как кнопки, шрифты, формы, иконки и прочие компоненты. Это обеспечило единообразие во всех версиях сайта и упростило дальнейшую работу при его реализации.

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

- Создан редизайн 3 страниц сайта с учётом всех состояний и адаптивных версий для различных устройств.

- Проведена масштабная работа над типографикой и визуалом сайта, несмотря на отсутствие конкурентного анализа и чёткого технического задания.

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