{"id":10776,"title":"\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0443 \u0432 \u043e\u043a\u0435\u0430\u043d \u043f\u043e\u043f\u0430\u0434\u0451\u0442 \u043c\u0435\u043d\u044c\u0448\u0435 \u043f\u043b\u0430\u0441\u0442\u0438\u043a\u0430","url":"\/redirect?component=advertising&id=10776&url=https:\/\/vc.ru\/acer_russia\/347915-acer-vypustila-pervyy-noutbuk-iz-pererabotannogo-plastika&placeBit=1&hash=368c351f012741e124bb4bc6c0b9b05d5e0f9033fab83ea5e301424877f73936","isPaidAndBannersEnabled":false}
Дизайн
Alexey Vasilevsky

Об эволюции идей унификаций в веб-дизайне и сервисе 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 трансформируется в открытую и доступную среду. И для нас, как для разработчиков и дизайнеров, важно и по-настоящему интересно инвестировать своё время и знания в потенциально полезные для индустрии сервисы.

0
7 комментариев
Популярные
По порядку
Написать комментарий...
Михаил Матюшко

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

Ответить
1
Развернуть ветку
Павел Скиннер

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

Ответить
1
Развернуть ветку
Evgeny Shpilevoy

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

Ответить
1
Развернуть ветку
Станислав Курочкин

XMind

Ответить
1
Развернуть ветку
V R

Plectica.com

Ответить
1
Развернуть ветку
Paul Koval

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

Ответить
1
Развернуть ветку
Руслан Шекуров

Об

Или

О,

Ответить
0
Развернуть ветку
Читать все 7 комментариев
Брокер нарастил число подписчиков в ТикТок в 8 раза за два месяца. Секрет успеха оказался прост

TikTok – не самый очевидный канал для инвестиционных компаний, но и среди них есть авантюристы, которые решили проверить эффективность этой платформы для продвижения своих услуг.

Как попасть в ЧС телефонных спамеров?

Реальная рабочая схема попадания в черный список телефонных спамеров. Сработала против спама от Совкомбанка, Альфа-банка, Дом.ру, Билайна, ремонта оконных рам, расчетных счетов для бизнеса и не только.

Прими участие 1 февраля в бесплатном вебинаре «10 принципов успешной презентации»

1 февраля в 17:00 Бизнес-инкубатор ВШЭ проведет бесплатный онлайн-вебинар «10 принципов успешной презентации».

Приглашаем автоматизаторов тестирования в команду SberDevices

Салют, на связи команда SberDevices! Объявляем первый в году One Day Offer. На этот раз мы приглашаем автоматизаторов тестирования уровня Middle/Senior, которые специализируются на UI-тестах для девайсов на Android. Также ищем QA-инженеров по тестированию backend’а виртуальных ассистентов Салют. Работа ответственная и масштабная — вас ждут…

Ёлки, столы и другие опыты: как ищет точки роста цех, который строил стенды для выставок, а потом — столы для удалёнки Статьи редакции

Монолог предпринимателя о выходах из ситуации, когда спрос на твои основные продукты резко падает уже во второй раз за два года, а материалы не дешевеют.

Производство Stayhomedesk
Как мы увеличили выручку в пять раз при помощи ИТ-решений

«Ойл Ресурс Групп» была маленькой компанией с ручным трудом и низкой эффективностью.

Мобильное приложение «Топливо» и маркетплейс ОРГ-Маркет

Как выделиться на рынке онлайн-трансляций: дизайн для Stream Park

Команда Логомашины разработала айдентику для крупнейшего в России организатора прямых эфиров.

Как изменить визуализацию, не изменяя при этом себе. PyDeck

PyDeck - библиотека Python с открытым кодом. Она позволяет с лёгкостью создавать гибко настраиваемые графики, гистограммы и другие средства визуализации данных. Всего за несколько минут и пару строк кода можно создать стильный график.

Как защитить свою позицию перед заказчиком

Чтобы на вас не ездили бесконечно с правками.

Как работает реферальная программа в Playgendary

30-40% принятых офферов — это рекомендации, которых мы получаем по 200-300 ежемесячно. Рассказываем, как пришли к такому результату.

С инфоцыганами все ок, и их клиенты не идиоты. И вот почему

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

null