Взгляд назад на 30+ Несколько лет дизайна интернет-сайтов

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

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

Такие интернет-сайты, как этот 1, не пропали ни с того ни с сего. Если вы хотите увидеть, как выглядел веб-сайт в любой момент времени с момента его запуска, введите название его домена в Wayback Machine и выберите день. В этой статье давайте просто посмотрим, как развивался стиль веб-сайта, от интерфейсов только с текстовым контентом до гладкого современного дизайна, который мы видим в наши дни.

Начало 1990-х: Античность

Начало 90-х знаменует собой начало временной шкалы макета нашего интернет-сайта. На тот момент не было такой вещи, как высокоскоростная веб-ссылка. Это были модемы с коммутируемым доступом или ничего. Следовательно, веб-сайты должны были быть разработаны для значительно меньшей скорости соединения. В основном они выглядели как разделы текста — того, что мы сейчас считаем само собой разумеющимся «форматом макета», не существовало.

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

Выводы для современных интернет-сайтов:

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

Конечно, сегодняшняя всемирная паутина может справиться с загруженными медиа веб-сайтами… но даже сейчас у нее есть некоторые ограничения. Большие медиафайлы, тяжелый графический стиль и ненормальная анимация могут способствовать увеличению показателя отказов, когда скорость загрузки обычно не так высока, как хотелось бы. Держите человека в голове, принимая во внимание замысловатый стиль и дизайн, и не забывайте ПОЦЕЛУЙ (продолжайте делать это очень просто, супергерой).

Середина 1990-х: Средневековье

Центральные века сетевой структуры страдали от создателей веб-сайтов на веб-сайтах и ​​спейсерных GIF-файлов. (Больше, чем настоящая чума, в идеале?) К середине 90-х годов стиль веб-сайта развил оба стиля с точки зрения композиции и внешнего вида. Дизайнеры начали использовать макеты на основе таблиц для управления материалом, что позволило повысить гибкость и творческое воображение. Тем не менее, веб-сайты были довольно значительными по текстовому содержанию, но теперь текст можно было разделить на столбцы, строки и другие навигационные функции для большей удобочитаемости.

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

Выводы для современных веб-сайтов:

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

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

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

Конец 1990-х: Ренессанс

Эпоха Возрождения. Возрождение. Всемирная паутина претерпела немало переосмыслений, но первое из них произошло с появлением Flash. Появившийся в 1996 году, Flash открыл целый мир новых стилей, недоступных при использовании простого HTML. Это был брак виртуальной графики и взаимодействия.

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

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

Выводы для современных интернет-сайтов:

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

Начало 2000-х: Просвещение

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

Основным спросом был CSS, язык кодирования, который позволял разработчикам сохранять видимые правила в информации отдельно от HTML, умело разделяя письменный контент и моду. Это дало большую свободу творчества как сетевым дизайнерам, так и разработчикам письменного контента — теперь контент можно было полностью разрабатывать из дизайна, и наоборот. Сайты, созданные с помощью CSS, легче поддерживать (меньше кода и сложности), они гораздо более гибкие (теги div не зависят друг от друга) и быстрее загружаются (файлы меньшего размера).

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

Выводы для современных интернет-сайтов:

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

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

Середина-конец 2000-х: промышленная революция

Промышленная революция сетевого дизайна и стиля начинается с появлением Net 2. Именно в это время дела действительно начали двигаться в сторону современной всемирной паутины. Прогресс мультимедийных приложений, появление интерактивного письменного контента и появление социальных сетей — вот пара определяющих характеристик этого интервала.

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

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

Выводы для современных интернет-сайтов:

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

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

С 2010 г. по настоящее время: модная эра

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

В условиях современной эстетики мы наблюдаем распространение минимализма: разреженные статьи, плоская графика (такая длинная, 3D-кнопки!), более простые цветовые палитры, большие и жирные визуальные эффекты. Кроме того, UX занял промежуточную стадию, предоставив возможность таким вариантам макета, как бесконечная прокрутка и дизайн и стиль одиночной веб-страницы.

Вы, наверное, уже заметили, что наш интернет-сайт объединил все эти характеристики в своем последнем макете:

Еще одним важным шагом в развитии веб-стиля и дизайна является мобильный интернет. Учитывая, что Iphone был запущен в 2007 году, был проведен повторный анализ структуры интернет-сайтов с учетом растущего числа мобильных пользователей всемирной паутины. Это включает в себя различные мобильные платформы, которые выбирают стратегию «сначала мобильные», и еще большую цель по оптимизации скорости сотовой связи, учитывая тот факт, что телефоны, как правило, не обладают скоростью обработки или мощностью взаимодействия вашего обычного рабочего стола.

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

Куда дальше пойдут интернет-сайты?

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

Хотя в настоящее время мы можем сделать гораздо больше с веб-дизайном, приятно снова вернуться к тому, из чего мы пришли. Глядя на то, как далеко продвинулся дизайн веб-сайтов, очень интересно представить, где он будет в следующие 20 лет.

Внимание редактора: эта публикация была первоначально опубликована в июле 2013 года и актуальна для полноты.