Об эволюции идей унификаций в веб-дизайне и сервисе Octopus

Вспомним, как сайты выглядели ещё 10–15 лет назад, и определим, что их роднит с сайтами, доступными в интернете сегодня.

Уверен, что часть читателей даже не задумывалась об этом или попросту не застала интернет того времени.

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

Так, например, Amazon выглядел 4 октября 2004 года.

Довольно простая структура с идеями «адаптивности» тех дней — тянущаяся центральная колонка. Обратите внимание на объём белого пространства. Кажется, что в то время вопрос эффективности не стоял так остро, даже в набирающей обороты индустрии электронной торговли.

А так выглядел сайт The New York Times в том же месяце.

Ничего необычного — фиксированные колонки и традиционное подчёркивание ссылок. Посмотрите, как трогательно выглядит баннер для рекламодателей, расположенный чуть левее логотипа.

Тяжело представить эти ностальгические воспоминания без сайта Apple, компании, которая возвела значимость продуктового дизайна в абсолют.

Компактная и логичная навигация, яркий анонс и точная организация промоматериалов. Дизайнеры обратят внимание на имитацию блеска поверхности в главном меню навигации — яркий пример скевоморфизма.

Если заглянуть на уровень глубже, например, зайти на страницу Mac G5, можно увидеть, что организация и подача содержания в большей степени наследовали устройство классической статьи в онлайн-газете или журнале.

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

В 2005–2006 годах качество и скорость интернета уже позволяли смотреть видео в онлайне. 14 лет назад появился YouTube.

Уже тогда Blendtec и Том Диксон активно перемалывали iPod. В остальном — простой и логичный лэйаут, в котором пока ещё не чувствовался масштаб сервиса, а объём загруженных видео и их просмотров исчислялся тысячами.

Обратите внимание на примечательную деталь, которая объединяет упомянутые выше сайты, — меню навигации. Сайт Apple, Amazon и «молодой» YouTube используют один и тот же принцип организации ссылок — имитация закладок. Понятная механика, которая упрощала жизнь пользователям. Будет справедливым отметить, что это унификация и стандартизация пользовательского опыта.

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

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

Поэтому процесс унификации и в программировании, и в пользовательском опыте объединяют облик веба 15-летней давности и его версию, доступную нам сегодня.

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

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

Так в 2019 году и выглядит «усреднённая» страница в интернете. Каждый из таких слоёв выполняет информационную или функциональную роль.

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

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

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

Впоследствии появлялось всё больше инструментов, призванных структурировать, а где-то и упростить разработку. Мы логично пришли к тому, что начали разрабатывать свои собственные сервисы и приложения для разработки сайтов. Один из таких проектов, Octopus, лёгкий и простой инструмент для создания карт сайтов.

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

Зачастую мы используем mindmap-сервисы и инструменты для прототипирования. Рассмотрим Octopus. К плюсам можно отнести отсутствие необходимости регистрироваться, чтобы попробовать сервис.

Пользователь сразу же оказывается на странице понятного и интуитивного интерфейса. Замена и добавление блоков в структуру будущей страницы занимает 5–10 секунд.

Drag-and-drop позволит легко и быстро изменять порядок блоков, как внутри страниц, так и последовательность самих страниц в проекте. Структуру относительно небольшого проекта получится описать буквально за 15–20 минут.

В качестве примера возьмём структуру классического сайта электронной торговли. Представлять логические ветвления или шаги можно с помощью «пустых» страниц, как это сделано с шагами оформления покупки:

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

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

Польза визуализации очевидна — в таком формате представить структуру страницы и сайта целиком значительно проще.

Думаю, многие согласятся с тем, что такую карту можно считать универсальным языком, на котором говорит и разработчик, и менеджер проекта, и дизайнер. А внесение правок в структурные прототипы, созданные в Octopus, занимает значительно меньше времени по сравнению с редактированием шаблонов дизайна или уже готовых сайтов.

Настройки Share допускают совместную работу над картой. Достаточно дать ссылку коллеге или клиенту, отметив проект как возможный для редактирования, и содержанием сможет управлять целая команда.

Мы постоянно развиваем сервис, и буквально недавно добавили возможность сопровождать блоки детальными комментариями. Например, это можно использовать для работы с копирайтерами:

Оценка стоимости проекта — дополнительная функция сервиса. Вкладка Estimate раскрывает панель с калькулятором в табличном виде. И при известной часовой ставке специалистов можно оценить объём расходов на разработку.

Десятилетия развития веб-разработки, как индустрии, не прошли зря — пользователи считывают и понимают структуру сайтов и страниц быстрее. Причём речь идет не только о профессионалах.

Сегодня современные инструменты позволяют быстро и без дополнительных усилий формализовать проект уже на самых ранних этапах.

Так, некогда индустрия know-how трансформируется в открытую и доступную среду. И для нас, как для разработчиков и дизайнеров, важно и по-настоящему интересно инвестировать своё время и знания в потенциально полезные для индустрии сервисы.

#вебдизайн