…чем повесть о Ромео и Джульетте :)

Думаю, вы поняли, о каком сайте идет спич.

Вот если бы у Вас спросили: «У какого из всемирно известных сайтов самый ужасный дизайн?», Вы бы что ответили?

Не спорю. Есть сайты и похуже, например, вот этот глазосшибательный уголок интернета.

Однако из самых посещаемых это сайт, на котором…, как нигде больше, содержание преобладает над формой.

Оно не просто преобладает, оно раздавило форму. :)

И это — наша любимая Википедия (да, та самая, на которую часто натыкаешься первым пунктом в поисковой выдаче, и которой Павел Дуров не так давно пожертвовал миллион долларов).

Как вы знаете, Википедия сейчас — это всемирный аккумулятор знаний, всемирная энциклопедия, некоммерческий проект, в который каждый может внести свою лепту. И этой идеей (спасибо Джимми Уэйлсу), действительно, остается только восхищаться.

А вот ребята из Литвы не стали останавливаться только на восхищении и решили «переопределить» Википедию, предложив миру проект Wikipedia Redefined (англ. redefine — переопределять, пересматривать, изменять).

Они провели два весенних месяца в поисках того, как сделать Википедию лучше, красивее, удобнее, дружелюбнее к читателям и редакторам, понятнее и эстетически привлекательнее.

Теперь держите глаз востро — перед вами пример профессионального редизайна сайта с подробным описанием.

Бренд.

Итак, начали они, конечно же, с логотипа «мир — это пазл знаний» (the world is a puzzle of knowledge).

Логотип Википедии "Мир - это пазл знаний" (The world is a puzzle of knowledge)

…и решили убрать в нем только… все, кроме…

W

…буквы W, которая так знаменита в этих краях :) Они посчитали, что W достаточно для того, чтобы распознать Википедию.

Новая Википедия

Составное слово wiki-pedia по шрифтовой гамме разделить на курсив (italic) и нормальный (regular).

Новый логотип Википедии: курсив и нормал

И таким образом получить целое семейство значков для различных вики-проектов: викисловарь, викицитатник, викитека и так далее. Значков с буквой W.

Логотипы проектов Викимедиа

И все названия вики-элементов также половиной в курсиве, половиной в регуляре. Зато главное слово каждого проекта выделяется на фоне остального.

Логотипы подпроектов Викимедиа

И даже можно без приставки wiki-

Логотипы проектов Викимедиа без приставки wiki-

Вместе вики-элементы создают динамическую систему:

Система проектов Викимедиа

А может быть зонтик?

А может быть зонтик?

Нет, все-таки Созвездие Викимедиа (WikiMedia). Или кластер (cluster).

Созвездие ВикиМедиа (WikiMedia)

Кластер, в котором элементы, один из них — Википедия, имеют множество связей между собой.

ВикиМедиа (Wikimedia)

Сайт Википедии.

Сейчас главная страница сайта Википедии — это поле с высокой ссылочной урожайностью :) особенно разных языков. И где-то там, в глубине этого поля, кроется мммааааленький, мааааленький поиск.

Дизайн сайта Википедии на данный момент

Получается, что языки превалируют над поиском.

Языковые ссылки в "дизайне" Википедии ужали поиск

Команда проекта Wikipedia Redefined предложила противоположные пропорции. Вот он — профессиональный подход к дизайну сайтов.

Редизайн сайта Википедии

И в самом сердце страницы они поставили сиять огромный новый логотип Википедии.

А внизу страницы — логотипы смежных проектов: викиновости, викицитатник и т.д.

Новый дизайн сайта Википедии

Тонкий разноцветный заголовок сайта в виде полоски отображает в реальном времени количество статей на том или ином языке.

Количество статей на том или ином языке - статистика в реальном времени прямо в хэдере сайта

Например, полоска красного цвета говорит нам о том, что в данную секунду в Википедии 1 907 000 статей на немецком языке. Естественно, что длина цветной полоски пропорционально зависит от длины всей линии, т.е. от размера всей Википедии.

Например, 1 907 000 статей на немецком в момент наведения мыши на красный цвет в заголовке

Если навести на правый верхний угол сайта, то развернется широкий выбор языков.

Выбор языков, если навести на правый верхний угол сайта

Если вам, например, захочется быстро перейти на другой вики-проект, то достаточно всего лишь нажать на него в футере…

Перейти на другой проект в Википедии в новом дизайне - нет ничего проще

…и страница перезагрузится в том же дизайне, только с другим логотипом и контентом.

Переход на соседний вики-проект в новом дизайне Википедии

В основном у человека, оказавшегося в Википедии, есть две цели: он либо читает, либо пишет/редактирует статьи.

Функцию чтения команда Wikipedia Redefined назвала Research (англ. — исследование, изучение, изыскание), а функцию редактирования — Edit (англ. — редактировать).

Чтение и редактирование в новой Википедии

При чтении страницы Новой Википедии, в верхней ее части есть несколько опций.

Функции Википедии в новом дизайне

На вкладке «История» отображаются статьи, которые вы когда-либо смотрели в Википедии. Для того чтобы видеть эту вкладку необходимо «залогиниться» .

Вкладка История в обновленной Википедии

Если щелкнуть на «Истории», можно использовать еще и дополнительное меню: добавить статью в избранное, порыться в том, что уже когда-то читал, и даже экспортировать и сохранить себе на компьютер.

Если нажать на кнопку «Просмотреть» (Review), покажутся «почтенные» статьи в хронологическом порядке.

Функционал на вкладке История в обновленной Википедии

Вкладка «Выделить» (Quote) служит фломастером при чтении (вот это вообще было бы очень полезной штукой).

Вкладка "Выделить" в обновленной Википедии

Очень удобный инструмент для выделения самого главного в статье. Прямо как с бумажными носителями.

Фломастер в Википедии

И сохранить это все на потом, как мы любим :)

Сохранить на потом

Вкладка «Связи» (Connect) показывает другой УГОЛ зрения в прямом смысле :)

Вкладка Связи

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

Облако слов

Разработчики решили оставить вкладки «Поделиться» (Share) и «Распечатать» (Print) не меняя.

Поделиться и распечатать

В сегодняшней Википедии сам редактор статьи — это нечто, весьма «отдаленно», напоминающее хаос :) Требующее не дюжее терпение и… преданности. :)

Редактор сегодняшней Википедии

В «передуманной» Википедии разработчики все расставили по местам настолько, что, думаю, каждому захотелось бы теперь править и писать статьи, только ради того, чтобы попробовать новый интерфейс редактора «на вкус».

Новый дизайн редактора в Википедии

Кроме того, статью можно править в режиме «Live», т.е. в живую, в реальном времени.

Живой режим

И тут же видеть результат работы.

Результат "на лицо"))

Правка фото и графики.

Правка фото и графики в новой Википедии

Также легко править, как и саму статью.

Правка фото и графики в новой Википедии

Правка статьи в режиме «Код» остается такой же, как и была…

Правка в режиме "Код"

…только в более понятном виде. :)

Правка в режиме "Код"

Песочница (Sandbox) и История (History) остаются без изменений.

Вкладки Песочница и История

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

Дизайн Заглавной страницы Википедии

Футер сильно выделен по сравнению с остальной частью, чтобы помочь посетителю легко «навигировать» на соседние вики-проекты.

Новый дизайн Заглавной страницы Википедии

На вкладке «Дисциплины» предметы распределены в палитре радуги, как когда-то языки….

Дисциплины в палитре радуги

Количество статей в каждой дисциплине

На вкладке «Мир» можно увидеть…, как это ни странно, мир. :) В виде карты, которая объединит, все кусочки карт, приведенных в статьях по всей Википедии.

Карта Новой Википедии

Классное получилось совмещение функций Google-карт и энциклопедии. Можно «приближаться» и «удаляться» и, вообще, ездить мышью по всей карте. :)

Карта Новой Википедии

Понравилась статья? Оставляйте свои мысли в комментариях внизу и не забудьте поделиться с друзьями, нажав на одну из кнопок ниже.