Дизайн Alexey Vasilevsky
1208

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

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

В закладки

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

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

Исторический контекст

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

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

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

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

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

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

Скевоморфизм (англ. skeuomorph (скюаморф); греч. σκεῦος — «сосуд», «орудие», μορφή — «форма») — физический орнамент или элемент дизайна, который скопирован с формы другого объекта, но изготовлен из других материалов или иными методами.

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

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

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

В декабре 2006 года главная страница будущего гиганта стриминговых видео выглядела вот так

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

Унификация и стандартизация

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

Сверху вниз: Amazon (4 октября, 2004), Apple (16 октября, 2004), YouTube (19 декабря, 2006)

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

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

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

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

Проектирование и прототипирование сегодня

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

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

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

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

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

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

С чего начать

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#вебдизайн

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Alexey Vasilevsky", "author_type": "self", "tags": ["\u0432\u0435\u0431\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 7, "likes": 22, "favorites": 25, "is_advertisement": false, "subsite_label": "design", "id": 78446, "is_wide": true, "is_ugc": true, "date": "Thu, 08 Aug 2019 10:26:10 +0300" }
{"average":25904,"one":95,"ten":75}
Сколько денег вы откладываете в месяц?
Ответьте и узнаете, сколько копят другие.
0 ₽
70 000+ ₽
0 ₽
{ "id": 78446, "author_id": 211230, "diff_limit": 1000, "urls": {"diff":"\/comments\/78446\/get","add":"\/comments\/78446\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/78446"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
7 комментариев

Популярные

По порядку

Написать комментарий...
1

Ребята! Кто может посоветовать аналогичные программы (не онлайн) по созданию схем бизнес процессов? Желательно под mac os.

Ответить
1

Miro (ex-Realtime Board) — у них есть клиент под Mac

Ответить
1

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

Ответить
1

Plectica.com

Ответить
1

Классная статья !
Я в последнее время понял что единственные рабочие системы для Е-Saleport это карусель приправленная Bigtuchами.

Ответить
0

Об

Или

О,

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Нейронная сеть научилась читать стихи
голосом Пастернака и смотреть в окно на осень
Подписаться на push-уведомления
{ "page_type": "default" }