Top.Mail.Ru
25-й кадр / За кадром / Тюнинг сайта
Автор: Игорь ТалалаевДата: 15.01.2017 03:47
Разместил: Игорь Талалаев
Комментарии: (0)
Поговорим о том, что видит каждый наш читатель – постоянный или случайный – вне зависимости от того какую статью он читает. О том, что бьет по глазам в первую очередь. О дизайне нашего сайта, который (в очередной раз) претерпел довольно существенные изменения. 50 апдейтов – это не шутка, знаете ли.

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

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

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

Кстати, расширение позволило нам увеличить размер текста – и это уже во-вторых. Крупнее надписи - меньше болят глаза. Тут мы также не открываем Америку, увеличение шрифтов – явный современный тренд. Приятно быть в тренде, знаете ли. Конечно, знаете.

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

В-четвертых, наши «корпоративные» цвета изменились: на место красно-рыжего пришел красно-лазурный. Исследования вообще показывают, что оранжевый воспринимается людьми как довольно «дешёвый» цвет, указывающий на скидки. А «25-й кадр» - не дешевка, никаких скидок тут нет, а есть всегда качественный и разнообразный контент. Кричаще-оранжевый фон сменил нейтральный серый, ну а за яркость (ведь мы позиционируем себя как веселый и яркий журнал, даже с картинками!) отвечает красный. Лазурный же (может, это синий или голубой, или еще какой - спросите у дизайнеров-вейперов) нам просто нравится, а еще он здорово контрастирует с красным. Посмотрите на полицейские мигалки, если не верите.

В-пятых, мы существенно переработали шапку. Здоровый баннер с огромным логотипом журнала и случайными персонажами просто исчез. Логотип переехал на плашку меню и уменьшился в размерах – нам хочется верить, что читатели и так не забудут куда зашли. Зато теперь вам придется меньше скроллить, ведь шапку было видно с абсолютно любой страницы сайта. И куда бы вы ни зашли, начинать читать текст было проблематично – почти все пространство занимала эта безобразно большая шапка. Теперь открывать любую страницу и начинать читать стало проще. Мы, правда, чуть-чуть увеличили и формат вступительной иллюстрации (с 700х300 до 700х400, ибо так проще размещать заголовок), но юзабилити все равно выросло.

В-шестых, на смену рандомно сменяющимся при каждом обновлении страницы персонажам на шапке пришла функция «Выбор редактора». Пока она выглядит не так симпатично, как персонажи, но мы над этим еще поработаем. Зато материалы в «Выборе редактора» тоже меняются рандомно. И их не 100 штук, как персонажей (что существенно замедляло загрузку сайта), а всего 5-6 – и подбираются они так, чтобы всегда быть «в тему». В декабре-январе здесь в основном новогодние материалы, а, например, в марте будет что-то связанное с женщинами и романтикой. «25-й кадр» накопил много статей, так что вполне логично подсказывать читателю наиболее актуальные в данный момент времени.

В-седьмых, главная страница стала аккуратнее. Мы переработали множество мелких элементов, а от некоторых и вовсе отказались. Например, выкинули к чертям значки с количеством комментариев напротив каждого материала в ленте статей. Зачем они вообще нужны? Это совершенно избыточная информация. И даже не потому, что комментариев там все равно мало, а потому что статьи самоценны сами по себе и никто не лезет читать их, исходя из количества комментариев. Внутри статьи количество комментариев видно, но зачем оно снаружи? Ещё более заметный момент со списком рецензий. Раньше мы писали излишне энциклопедично - русскоязычное название, в скобках оригинальное название (если есть), а затем еще и год выхода фильма. Полезная информация - русскоязычное название - при этом просто распылялась, да и смотрелись все эти скобки, запятые и цифры некрасиво. Будто какой-то справочник или список литературы. Понятно же, что если вы видите в списке рецензий заголовок «Пассажиры», то понимает, что это те самые «Пассажиры», что идут в кино или шли в кино совсем недавно; вовсе не нужно писать «Пассажиры (Passengers), 2016». Вступления к статьям, кстати, тоже стали несколько лаконичнее, а вот вступительные картинки наоборот прибавили в размере. Проще надо быть, и люди потянутся.

При всём при том мы не стремимся упростить всё и вся. Мы по-прежнему любим большие основательные тексты, подробнейшие и совершенно эпичные статьи, которые кроме нас лень писать почти всем. Ведь хоть где-то в рунете должен быть островок олдскула для тех, кто умеет и любит читать, а не просто способен считывать клиповый месседж с микроскопических текстовых блоков, после чего перегревается от избытка полученной информации. Но эргономика главной страницы всё же в приоритете. Иными словами, вам должно быть легко и удобно найти нужную статью на «25-м кадре». Чтобы затем залипнуть на ней на полчаса. Шучу. Иногда и на час.

БЫЛО:


СТАЛО:


В целом список изменений такой:

+ Замена иконки сайта на вкладке в браузере на новую
+ Замена логотипа журнала на шапке сайта на более четкий
+ Увеличены шрифты заголовков
+ Увеличены основные шрифты
+ Заменены все шрифты на сайте
+ Упрощены до более лаконичных списки рецензий и видео (минус оригинальное название и год мировой премьеры)
+ Изменен цвет заголовков (с бордового на темно-красный)
+ Изменен цвет списков рецензий и видео (с черного на темно-серый)
+ Замена кнопок «Архив дайджестов» и «Архив номеров»
+ Замена баннера «ВКонтакте»
+ Добавлен баннер «Критиканство»
+ Убраны кнопки «Все материалы», «Добавить в избранное»
+ Замена иконки RSS
+ Убрано подчеркивание пунктов меню на шапке при наведении мышки
+ Надпись «Поиск на сайте» переехала внутрь строки поиска
+ Поле ввода поиска на сайте стало короче
+ Желтые стрелки в списках рецензий и видео на главной странице заменены на красные квадраты
+ Замена красно-желтых линий на плашках заголовков на красные
+ Рокировка местами списка видео и картинки
+ Выровнено положение заголовков разделов на главной странице
+ Убрано слово «Авторизация» с главной страницы
+ Увеличен размер картинок в ленте «Не пропустите»
+ Сокращены описания в ленте «Не пропустите" и на слайдерах
+ Убран градиент с логотипа на шапке
+ Заменены кнопки архивов (дайджесты, номера)
+ Изменен размер картинок в главной ленте новостей
+ Изменен размер аватаров блогов (и несколько видоизменен стиль)
+ Заменена картинка в разделе «Видео»
+ Установлен плагин для переадресации на ту же страницу, с которой пользователь авторизовывается, а не на главную, как раньше
+ Сокращено время переадресации при авторизации пользователя
+ Убраны категории «Новые страницы на сайте» (дублировалась главная лента статей и RSS) и «Новые сообщения на форуме» (для всех, кроме членов редакции - на форуме новых записей все равно мало или нет вовсе)
+ Добавлен виджет ВКонтакте в левую колонку сайта (одной кнопкой можно подписаться на нашу группу + можно пролистать ленту новостей в группе, посмотреть трейлеры, картинки и т.д.)
+ Доработан логотип на шапке (сделали менее сплюснутый, сдвинули некоторые буквы)
+ Прикручена функция подписок на темы форума (можно получать на почту или в ЛС на сайте сообщения о новых записях на форуме - функция на замену блока с главной страницы «Новое на форуме»)
+ Вступительные картинки в статьях увеличены с формата 700х300 до 700х400
+ Увеличена ширина сайта на 200 пикселей
+ Текстовые блоки не занимают всю ширину сайта (строчки короче – удобнее чтение)
+ Изменена шапка сайта
+ Изменены основные цвета оформления (вместо красно-оранжевого – красно-голубой)
+ Заменены плашки «Это интересно», «Рецензии» и др.
+ Установлена подсветка ссылок синим цветом при наведении курсора
+ Заменен баннер «КиноТопы»
+ Надписи меню окрашиваются в черный цвет при наведении курсора, а свитки в меню подсвечиваются красным
+ Персонажи случайных статей заменены на «Выбор редактора»
+ Фон блока «Авторизация» выделен серым
+ Убраны пиктограммы комментариев на главной странице
+ Перерисована стрелка «Наверх» в нижней части сайта
+ Переработан внешний вид нижней части сайта
+ Раздел меню «Журнал" переименован в «О нас»
+ Раздел меню «Манифест" переехал в «О нас»

Спасибо за вниманием. Выдержать этот рассказ наверняка было непросто, но не поделиться подобными изменениями я просто не мог. И, конечно же, мы еще не закончили. Кое-что подправим, сделаем «покрасивше», донт ворри. И обойдемся без столь длинных занудствований в блоге, как в этот раз)
Нравится
Дайджесты
Номера
Вы не вошли на сайт!
Имя:

Пароль:

Запомнить меня?


Присоединяйтесь:
Онлайн: 1 пользователь(ей), 356 гость(ей) : Денис Востродымов
Внимание! Мы не можем запретить копировать материалы без установки активной гиперссылки на www.25-k.com и указания авторства. Но это останется на вашей совести!

«25-й кадр» © 2009-2024. Почти все права защищены
Наверх

Работает на Seditio