Есть прекрасный проект-архив на котором можно найти практически все дизайны нашего любимого, официального сайта по Звездным Войнам — www.StarWars.com. Этот проект называется Web Design Museum. Все виды сайтов там представлены в виде скриншотов, что очень удобно для сохранения. Кроме веба, там можно найти скриншоты старого софта (Да, привет мой первый Adobe Photoshop 3.0 из 1994 года!) или мобильных приложений.
В этом посте, я дополню эту историю ещё самым первым дизайном сайта от 1996 года (который я восстановил), а также дизайном от сентября 2011 года. Кроме того, расскажу о трендах в дизайне и основных нововведениях, которые появлялись на сайте www.StarWars.com.
1996 год — www.StarWars.com
Оригинальная домашняя страница StarWars.com, как она выглядела на момент запуска сайта, 26 ноября 1996 года. Это сплеш-страница, или заставка. Тогда, как я помню, многие сайты имели такие заставки — по клику на ней ты уже переходил на страницу home.htm или default.htm, где показывалась основная инфа.
StarWars.com официально запущен 26 ноября 1996 года. В то время сайт был довольно скудным и содержал информацию об оригинальной трилогии, интересные факты, описания планет и персонажей, а также раскраски для детей. Приветственное сообщение гласило: «Мы начинаем скромно, так же как Джордж Лукас 20 лет назад с относительно низкобюджетной космической фантастикой под названием «Звездные войны: Новая надежда». Так же, как «Звездные войны» росли, или, скорее, взрывались в общественном сознании, этот веб-сайт будет продолжать расти и меняться. И, как и фильмы, наша цель — информировать, развлекать, удивлять и веселить вас. Мы все будем весело проводить время, и мы обещаем предоставлять самую свежую информацию (и опровергать неточные слухи) о вселенной «Звездных войн». — из статьи StarWars.com: An Oral History.
Этот дизайн я нашел в вышеупомянутой статье и восстановил в большем размере. Лично я этот сайт не помню, и сам его видимо не посещал.
На WaybackMachine её нет, потому что там версия от 30 декабря 1996 года с одним черно-белым логотипом на бежевом фоне, со ссылкой на starwars.com/home уже от 13 января 1997 года.
1997 год
Этот дизайн уже упомянут на сайте Web Design Museum. Первый скриншот этого сайта датирован 18 апреля 1997 года. Дизайн рассчитан на монитор с разрешением 640х480 пикселей. Тут уже нас встречает только информация о пяти локациях и планетах. И всё. Зато есть аудиофайлы на 150Кб (килобайт, не мегабайт), которые можно скачать на модеме 14.400kbps за 2-3 минуты, что очень круто. Внутренние страницы имеют иной дизайн, с другим расположением навигации, но каждая оформлена в соответствии с локацией.
Покликать этот сайт можно на WaybackMachine. Надо отдельно отметить, что все эти сложные, многокартиночные дизайны, когда одна картинка разрезалась на прямоугольники, были основаны на табличной верстке: только этот html-элемент имел возможность растягиваться с width=100% (то есть на всю ширину браузера) и в котором в ячейки можно было поместить эти самые нарезанные прямоугольники картинок. А элемент ячейки td имел параметр background=»images/pattern.jpg», с помощью которого можно было делать растягивающиеся фоны. В индустрии веб-разработки табличный дизайн сохранялся где-то до 2007-2009 года (960 Grid System появился в 2008 году).
А вот этот сайт я уже помню, потому что заходил на него вместе с братом через диалап-модем US Robotics Sportster 14400 с домашнего компьютера.
Размер страницы: 450 Кб.
1999 год
Этот дизайн на Web Design Museum обозначен как дизайн 1999 года, но судя по WaybackMachine он появился еще в 1998 году, к выходу «Эпизод I: Скрытая угроза».
Сайт стал более обширным и насыщенным: появились разделы по всем фильмам, включая только что вышедший «Эпизод I: Скрытая угроза». Так же появились разделы «Персонажи», «Техника», «Дроиды», «Локации», «Пришельцы», «Создания», «Оружие» и «Технологии». Очень классно сделано, что раздел каждого фильма оформлен по-своему: раздел по Эпизоду 4 — как Татуин, по Эпизоду 5 — как Облачный город на Беспине, с висящим на антенне Люком, Эпизод 6 — как Эндор, а свежий Эпизод 1 — как Храм джедаев. На портале появился свой интернет-магазин по адресу shop.starwars.com.
2000 год
Это мой самый любимый дизайн — пустынный, Татуинский. В шапку сайта вынесена сцена гонок Boonta Eve Classic (Бунта Ив Классик) на карах по пустыне из «Скрытой угрозы». Рассчитан на монитор 800х600px.
На сайте, который был обновлен в феврале 2000 года, появилась дополнительная навигация в виде select-box, выпадающего списка — многие сайты так делали при наличии большого списка подразделов. Появился раздел с трейлерами к фильмам: тогда они были в разрешении 480х216px, размера 25Мб и в формате QuickTime, для просмотра которого надо было скачать плеер или установить с диска. Еще были знаменитые ролики Anatomy of a Dewback (дьюбэк впервые появился в фильме «Эпизод IV: Новая надежда» в виде аниматронного создания, а в специальном издании 1997 года была представлена новая версия, созданная с помощью компьютерной графики) и The Making of Episode I.
Внутренние страницы разделов были оформлены так же как в предыдущей версии сайта. Прекрасно помню эту версию сайта, когда каждую неделю заходил на него с рабочего компьютера.
Размер страницы: 550 Кб.
2001 год
В апреле 2001 года появился памятный всем «полукруглый» дизайн сайта, названный из-за того что графические элементы сайта и фотографии были обрамлены полукруглыми вырезами. Стильно, но громоздко.
Красный, светящийся логотип Star Wars и такие же светящиеся номера фильмов, сильно выделяли этот дизайн.
Ссылки, их цвет и фон страницы, по-прежнему как с 1996 года, задается с помощью HTML-параметров для body:
<body text="#000000" alink="#808080" link="#808080" vlink="#808080" bgcolor="#FFFFFF"...>2002 год
Новый дизайн, который появился в июне 2002 года, уже был рассчитан на мониторы 1024x768px. Дизайн был приурочен к выходу «Звёздные войны. Эпизод II: Атака клонов» 16 мая 2002 года, и поэтому на главной странице красуется граф Дуку со световым мечом с искривлённой рукояткой.
Внутренние страницы разделов были оформлены так же как в предыдущей версии сайта, с полукруглыми элементами. Каждый месяц большая иллюстрация на главной странице менялась, показывая то Джанго Фетта, то Йоду, то Майса Винду и Оби-Вана, то наемницу Зам Уэселл.
Размер страницы: 570 Кб.
2003 год
Следующий, знаменитый рубленный блочный дизайн появился в июне 2003 года (на Web Design Museum он ошибочно обозначен как дизайн 2006 года).
Дизайн с очень сложной, вложенной версткой table, основанный на повсеместном использовании графики: каждый кнопка, скошенный уголок, бордюр — всё это gif-картинки. Начали использовать отдельный CSS-файл для цвета ссылок и шрифтов на 18 строк (font-size, font-family, color и проч.).
Star Wars Hyperspace, официальный фан-клуб поклонников «Звездных Войн», оформлен как отдельный раздел. На Вукипедии, хоть и утверждается, что фан-клуб был открыт в 2004 году, но как видно в июне 2003 года отдельный раздел уже существовал (это указано и в статье).
На странице появились блоки с Macromedia Flash.
В ноябре 2004 года на сайте появилась стильная сплеш-страница с рекламой тизера к «Эпизоду III: Месть ситхов», который выходил 19 мая 2005 года. И еще раз, другая — в марте 2005 года.
2008 год
Дизайн с сентября 2008 года примерил на себя тренд «карамельного стиля», с глянцем в дизайне (вслед за появлением такого в продуктах Apple в 2007 году), и посему обзавелся стеклянным отблеском в логотипе и выпуклой панелью навигации. Общий фон при этом светлый — нейтрального, серого цвета.
Верстка — гибрид табличной table-верстки со вложенной div-версткой. Колоночной системы верстки нет, просто обычные CSS-классы для div-элементов.
Мультсериал Star Wars: The Clone Wars вышел 3 октября 2008 года на канале Cartoon Network, и поэтому главная страница была посвящена этому продукту.
На Web Design Museum его ошибочно причисляют к 2009 году. Размер страницы: 800 Кб + Macromedia Flash.
2010 год
Дизайн 2010 года (открыт 10 октября 2009 года) сохранил тренд «карамельного глянцевого» стиля, но фон стал черным, а многие элементы — темными. Появилось выпадающее вертикальное меню (до этого года у них его не было — название раздела в навигации являлось просто ссылкой на внутреннюю страницу).
Появился раздел «Игры» со множеством flash-игрушек, включая тот самый Star Wars Soundboard.
Дизайн доступен на WaybackMachine. Размер страницы: 900 Кб + Macromedia Flash.
2011 год
Новый дизайн от 23 сентября 2011 года был выпушен с большим слайдером и попыткой перейти на плоский дизайн (flat design). Навигация переехала вплотную к верхнему краю сайта, и было сделано выпадающее широкоформатное горизонтальное меню. Главная страница упростилась и стала с минимальным количеством блоков, видимо потому что картинки главного слайдера были большого размера.
Полностью перешли на div-верстку, включая header, section, footer-элементы. При этом отдельного мобильного вида пока еще нет.
Размер страницы: 1,3 Мб. Страница сделана уже без Macromedia Flash.
2013 год
Новый дизайн 2013 года получил размытые блеклые тени для блоков текста, которые снова заполнили главную страницу, а логотип вернулся к плоскому виду. Выпадающее горизонтальное меню сохранено. Фон так же вернулся к светлому, серому цвету.
Интересно сделана верхняя шапка, где горизонтальная линия является фоном всей страницы, а меняющиеся баннеры (Джабба Хатт, Принцесса Лейя) — в виде картинки PNG с прозрачным фоном.
Первая версия дизайна, адаптированного под мобильный вид. Верстка на div-элементах, включая header, section, footer-элементы, вместе с классами div.container, div.rov, div.gridCell, div.span6 и т.д.
Размер страницы: 1,1 Мб.
2014 год — начало широкоформатных сайтов
Дизайн от 18 июля 2014 года стал широкоформатным, плоским и тёмным — прародителем современного варианта сайта.
В целом же, с этого момента «сетка» сайта была выверена и мало менялась: горизонтальная навигация с плоским логотипом по центру, широкий слайдер, далее блоки текста и анонсов в 2-х или 4-х колонках. Так же был зафиксирован и общий стиль: плоский flat дизайн, темный или черный фон, каждый блок текста с картинкой, черный лаконичный «подвал» сайта.
Впервые появился раздел о сериалах «TV shows». Напомню, что компанией Disney купила Lucasfilm в октябре 2012 года.
Мобильный вид сайта отличный, профессиональный. А само мобильное меню — отдельный шедевр! Восторг вызывает, когда ты кликаешь на светящиеся полоски меню, а они, при открытии бокового меню, трансформируются в скрещенные световые мечи.
Размер страницы: 2,2 Мб.
2020 год
В этом новом дизайне разработчики сайта сделали слайдер отдельным блоком (до этого в течении нескольких лет он был как фон шапки) — большой, широкоформатный, заметный, с маленькими превью внизу. Стоит отметить, что на самом деле большой простой слайдер появился еще в мае 2019 года, видимо для тестирования UX.
Навигация стала простой, без иконок. К небольшим блокам текста в основной части страницы, добавились широкие 2-3 блока, посвященные основным сериалам. Всё это существенно увеличило размер главной страницы и время её загрузки — видимо поэтому они сделали прелоадер страницы (да, именно так: сначала сразу появлялась навигация и логотип вверху, потому в центре страницы несколько секунд крутились диски, и только потом появлялся весь контент страницы).
В подвале сайта красуется Дарт Вейдер (он там появился где-то с начала 2019 года).
Размер страницы: 25 Мб.
2023 год
Оставаясь в рамках того же стиля, сайт в 2023 году стал быстрее загружаться, объем изображений уменьшился, прелоадер страницы убрали. Слайдер сделали просто широким (не широкоформатным). Многие текстовые блоки поместили в горизонтальный скроллинг, спрятав часть из них.
Покликать страницу можно на WaybackMachine.
Размер страницы: 10 Мб.
2023 год
Нынешний дизайн сайта, обновлен с 1 ноября 2023 года. Убрали раздел «Interactive» и «Community», а выпадающее меню стало вертикальным.
Размер страницы: 10 Мб.
Как всегда, наш любимый официальный сайт можно посмотреть по адресу www.StarWars.com.