Как изменился дизайн популярных сайтов за 10 лет (скриншоты и описание)
Изначально думал опубликовать этот пост в другом блоге в разделе с тематическими подборками дизайнов сайтов но позже решил, что он больше подходит для Tod’s Blog. Тем более, что ранее здесь уже была похожая заметка про историю развития Google сервисов со скриншотами их первых версий. Сегодня будет что-то похожее, но в отличии от той статьи рассмотрим как изменился дизайн сайтов и сервисов со всего интернета — как они выглядят сейчас и 10 лет назад (в рамках популярного 10 Year Challenge).
По каждому веб-проекту будет небольшое описание, которое совместно со превьюшками подсмотрено в данной статье. Для увеличения изображений — кликайте по ним. Сначала идет картинка «до», а потом «после». Возможно чуть позже напишу еще один пост с подборкой наших топовых веб-ресурсов, но а пока ознакомимся с «трансформациями» основных гигантов интернета.
Начинается список, конечно, с Гугла. Самым значимым изменением дизайна сайта является новый логотип, который появился в 2015 году. 10 лет назад на главной все еще было старое лого, придуманное в 1999. Общий стиль страницы теперь менее загроможденный и в каком-то смысле более минималистичный.
Amazon
Не смотря на то, что Amazon за последнее десятилетие увеличил собственную капитализацию на 800млрд. долларов, добавил множество новых товаров и услуг, его вебсайт стал проще — все доп.опции скрыты за выпадающим меню.
Разработчики соц.сети известны тем, что проводят комплексный анализ данных перед принятием определенных решений и стараются не меняют то, что и так хорошо работает. Визуальный облик главной — тому подтверждение (кроме лого 2015года здесь мало что поменялось).
YouTube
В 2009 видеохостинг находится в собственности Google лишь 2 года после покупки. За прошедшие с тех пор годы, как и у многих, общий дизайн Youtube изменился в сторону простоты, избавления от лишних деталей и более плоского интерфейса.
Этот проект практически смог пережить десятилетку без радикальных изменений, с некоторыми косметическими правками. Но в средине 2017 был анонсирован редизайн сайта и к середине 2018 он начал появляться у популярных групп с большим числом пользователей.
Wikipedia
Концепция главной у Вики мало изменилась — тот же круговой выбор языков, разве что сами варианты сейчас другие. Шрифты и цвет немного отличаются + имеется список разных инструментов/функций (по старому скриншоту непонятно был ли он ранее).
Yahoo
Разработчики и дизайнеры выбрали новый оттенок фиолетового цвета + заменили логотип, но сам формат и расположение блоков остались плюс-минус похожими. Хоть Yahoo и выглядит посовременнее, чувствуется, что прошлый дух проекта все еще где-то здесь.
В далеком 2009 площадка конкурировала с Myspace, Фейсбуком и другими социальными сетями на волне популярности данной ниши. Забавно, что на главной тогда было детальное описание зачем именно и как использовать сервис. Сейчас даже обычные домохозяйки в курсе, что такое твиттер, — следовательно из оформления эту информацию убрали, сделав все максимально простым.
Кстати, небольшое дополнение про Twitter. Во-первых, он буквально недавно впервые отчитался о прибыльности сервиса. Во-вторых, не забывайте, что мы говорим как изменился дизайн, а ведь по функциональности тут куда более серьезные модификации — уже даже нет ограничения в 140 символов!
eBay
За 10 лет проект сменил цветовое оформление, визуально картинка стала более современной, основное меню теперь только сверху. eBay позиционирует себя как e-commerce веб-ресурс и место, где вы можете заработать.
Imgur
Вот так история успеха — все начиналось как обычный хостинг изображений, созданный студентом, а в наши дни это один из 20-ти самых посещаемых в США веб-сайтов (по Alexa). Визуально и функционально, как видите, Imgur изменился до неузнаваемости.
The New York Times
Новая версия похожа на обычную газету — расположение элементов и оформление классическое для подобной полиграфической продукции. Используется 4х колоночная верстка, простые линии, черный текст. Появилось больше пространства, меньше лишних деталей — информация воспринимается лучше.
Craigslist
Данный портал объявлений практически не менялся с даты своего основания в 1995 году, поэтому вероятность его модификации в последнее десятилетие была минимальной. Однако разработчики все же внести некоторые коррективы — образовалось дополнительное свободное место за счет отступов, улучшили юзабилити.
IMDB
В отличии от первых версий сейчас веб-проект сконцентирован на видеоконтенте, знаменитостях, наградах и т.п. После изменения дизайна сайта он стал содержать побольше графики и меньше лишних деталей. Как и многие другие, IMDB избавились от левого вертикального меню.
CNN
Аналогично New York Times данный новостной ресурс также сделал ставку на упрощение разметки с более четким разделением контента и слегка увеличенными текстом. Воспринимать и находить нужную инфу, разумеется, гораздо проще.
Microsoft
Если так подумать, то 10 лет назад Microsoft была совсем другой компанией, и за это время там многое поменялось. Достаточно глянуть на пункты меню и основные элементы в хедере дабы понять, насколько сильно сместился акцент с программного обеспечения и сопутствующих технических деталей на инструменты для удобства и комфортной жизни пользователей.
Apple
В 2009 магазину приложений iPhone App исполнилось только 6 месяцев, и тогда они праздновали 500млн. загрузок. Сейчас это число увеличилось до 130 миллиардов, что практически в 260раз больше. Сама корпорация также времени зря не теряла и увеличила свои капиталы/достижения многократно. Что касается веб-сайта, то в новом используются крупная типографика, полноразмерные картинки и немного иной формат.
Walmart
Как вы уже поняли, упрощение дизайна — определенно в тренде. Walmart пошел по такому же пути — никаких громоздких меню, меньше деталей/контента, больше свободного места, яркой графики и полезных инструментов.
Github
Десяток лет назад проект был всего 1год отроду и только-только набирал своих первых активных пользователей. Теперь это место номер один для хранения своих репозиториев с открытыми исходниками. Визуально, как и в случае с Твиттером, теперь Github не нужно тратить много времени на свое представление новичкам, большинство уже слышали о нем — поэтому в хедере форма регистрации и краткий текст.
Zillow
Похоже, что разработчики решили сконцентрировать внимание аудитории на самых главных и популярных функциях, переместив остальные детали чушь ниже под шапку. Да, и в целом внешний вид получился более современный — тут вам и фото-иллюстрация на фоне, и шрифты лучше/больше.
Yelp
Еще один хороший пример как авторы ресурса решили сфокусироваться на самой основной задаче своего детища. В шапке сайта найдете форму поиска ресторанов поблизости с подсказками и выбором локации. Под ней уже располагаются все второстепенные возможности. Также, думаю, немалый акцент сделан на развитие мобильного приложения, хотя здесь мы просматриваем только веб-версии.
Stack Overflow
На главной странице по прежнему сохранился список актуальных/топовых вопросов по веб-разработке, однако при этом значительную ее часть выделили под привлечение новых пользователей. В лучших традициях создания корпоративного сайта для бизнеса в самом верху располагается яркий блок CTA (призыва к действию) с регистрацией и кратким описанием площадки.
Etsy
Это один из примеров, когда за десяток лет проект стал крупнее и развил начальную концепцию. Теперь они являются крупным e-commerce порталом, продают множество разных направлений, в том числе и старинные, антикварные или просто уникальные вещи. Логично, что для этого решения используется более эффективный продающий дизайн интернет-магазина.
Итого. Если выделять какие-то общие тенденции как изменился дизайн сайтов, то первое, что бросается в глаза — уменьшение количества информации на странице, попытка сконцентрироваться на наиболее важных моментах и не распыляться. Даже типичные ресурсы со большими объемами информации, такие как онлайн СМИ и каталоги, пытаются следовать этому тренду и спрятать все лишнее в меню либо пониже на странице.
Визуально картинка стала ярче, сочнее, разработчики чаще используют графический контент (что, в принципе, логично). Возможно, через пару дней сделаю аналогичную подборку для рунета, т.к. было бы весьма интересно понаблюдать за изменениями наших «веб-грандов» и порталов.