🖐Привет, это Денис из NIXELE™! И сегодня вы узнаете

🔥Почему «красиво» — не значит «удобно», а также почему это можно опровергнуть...

📱Насколько в создании веб-дизайна не важен макет и почему на самом деле инструкцию придумали дебилы (или нет)?

🌭Из-за чего бутылка кетчупа это самый главный феил в дизайне, почему красивая картинка решает, а удобство и визуал – вообще не первое о чем стоит думать в веб-дизайне и наконец таки узнаем ответ на вопрос:

💯Кто он, этот ваш идеальный дизайн сайта?

Я решил начать с прогулки: свежий воздух и окружающая атмосфера натолкнули на одну интересную мысль когда я проходил мимо нового жилищного комплекса…

Смотрите, это логотип «Пятерочки» в одном из современных жк в Москве. Вроде бы обычная картина, но посмотрите внимательнее, можете открыть панораму и оглянуться вокруг🧐

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

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

📌Что же получается, «Пятерочка» осознает важность визуальной эстетики?

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

А это визуализация различия вывески на разном фоне(фасаде).

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

Тогда я осознал, что проектирование не всегда самое важное и тратить на дизайн 16,5 дней точно не стоит. Визуальная составляющая зачастую имеет куда более важное значение перед планом. Получается все мои эти наброски не нужны были?

🔹Эстетика как никогда важна, она приоритетнее макета, НО ключевое — смог ли пользователь выполнить нужное ему действие. Разберемся подробнее.

🤷‍♂Создание макета сайта это действительно бесполезное занятие?

Я сразу побежал домой изучать взаимосвязь макета и эстетики в веб-дизайне и вот что нашел:

Японские эксперты Масааки Куросу и Каори Кашимура в дизайн-центре компании Hitachi попросили оценить 26 сайтов 292-ух студентов факультета дизайна и психологии. Pезультаты показали положительные результаты в сторону эстетики дизайна: визуально более стильные и красивые сайты выбирали чаще, даже когда навигация ставила в тупик.

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

Об Этом уже говорит работа Флориана Гейгля и Кристины Лерман под названием «Оценка влияния смещения кликов и вставки ссылок в Интернете на навигацию».

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

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

🔹Нужна успешная комбинация - эстетическое впечатление + легко совершенное плановое действие(визуал UI + макет UX). Вместе они подталкивают пользователя на следующий шаг и приводят к целевому действию, а также мотивируют к повторному посещению сайта.

👟Простыми словами - кроссовки должны быть стильными и соответствовать трендам, но самое главное — они должны быть удобными!

Кажется, что каким бы дискофмортым ни был макет(UX), всегда будет важна эстетика(UI) - тяга человека к идеальному невероятно велика!

🔑От сложного к простому - что такое UI/UX дизайн. Аналогия.

Представьте: вы собираете конструктор «Лего-техник», то есть механизм, из подвижных деталей(UX) и обычных блоков, создающих визуальную часть(UI).

Поворотные механизмы в виде шестеренок, троса и колес консруктора(UX) дополняет стильное сочетание желтого и черного(UI)

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

Происходит наращивание новых нейронных связей и мы пониманием, что важно правильно сочетать UI и UX составляющие дизайна.

🎏Визуал по-разному привлекает разные категории людей

Все не так однозначно, нельзя сделать «супер» и «мега» и для всех сразу «в одном флаконе».

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

Воу! Эргономичность, - сложное слово, кажется мы можем обойтись и без него! Само слово означает приспособление предметов труда для комфортной и эффективной работы 

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

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

🔹Ключевое на чем нужно сосредоточиться при разработке дизайна сайта – не UI и не UX составляющие, даже не их сочетание. Самое важное – понять что именно ожидает увидеть пользователь. Потому что от его потребностей и зависит правильное сочетание UI/UX.

«Если между ожиданиями клиентов от продуктов или услуг и их реальным дизайном существует большая разница, то мы вынуждены вступать в неравный бой, пытаясь заставить клиентов пересмотреть их устоявшиеся представления»
Из книги Джона Уэлена «Дизайн пользовательского опыта»

Тесты, тестирование, тестики🔥
— Знаете почему программирование и веб-дизайн одно и то же?
— Потому что это все IT? — спросите вы
— Да, скорее всего вы правы! — Но почему?

Potomu chto никогда не знаешь кто он, этот твой пользователь))

Поэтому необходимо знать погоду сайта, дизайн которого создаешь. А осадки на ней - это user flow. Смотите, так выглядит погодный циклон на сайте:

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

Именно такую карту наша команда использовала при запуске тестовой версии сайта хоккейной лиги чемпионата кхл 3на3. На тепловой карте мы с командой отчетливо видели какие элементы привлекают пользователя и работают так, как и было задумано, а какие остаются без внимания и требуют UI/UX доработки.

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

📌Как повлияло на разработку веб-дизайна

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

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

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

Ведь цель дизайна сайта, не только замотивировать потенциального покупателя купить авто именно здесь, но и привести к целевому действию юзера, «случайно» попавшего на ваш сайт.

📌Как вы думаете, что вам может рассказать одна бутылка кетчупа?

Вроде бы ничего особенного, только если это не бутылка Heinz. Знакомтесь — мем, посвященный именно ей:

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

Эталона идеального дизайна сайта не существует, но существует план, который может помочь.

⚡8 советов от NIXELE™ по созданию идельного дизайна сайта

• Чаще соприкасайтесь с прекрасным но не утопайте в нем - выделите на подбор примеров только час, разбейте их по группам и оттолкнитесь от чего-то одного

• Стройте здание, начиная с фундамента, но не израсходуйте весь материал — сравнивайте макет со схемой построения успешных сайтов, но не крутите один элемент сликом долго

• Проверенные решения на то и провренные, они работают — изучайте теорию и психологию, используйте нейросети и выбирайте с умом то, на чем будет посторен UI/UX дизайн

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

• Будьте открытее к общению — опрашивайте не только ца, но и своих друзей и знакомых. Порой люди, совсем далекие от темы, могут натолкнуть на интересные мысли

• Не бойтесь сносить здание под корень — не бойтесь начать все с начала, даже если работу полностью придется стереть

• Ставьте широкие видовые окна — делайте дизайн «прозрачным» в первую очередь понятным и доступным, и только потом красивым

• Любите себя — прощайте себе даже крупномасштабные косяки и умейте найти силы на то, чтобы вернуться к работе, даже когда много правок

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

🔹Визуал и практичность работают вместе, полагаясь на потребности пользователя. Знакомтесь: формула которую мы вывели

UI - визуал; UX - пользовательский опыт; TA - целевая аудитория; DS - дизайн

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

🙌Спасибо за прочтение данной статьи, ваша активность помогает скорейшему выходу нового материала
👉Всегда рад обратной связи — не забывайте про чек-поинты в виде опросов выше и по ссылке) Увидимся в следующей статье😉

Но для начала давайте познакомимся. С вами UXART, где мы ежедневно делаем интернет удобнее. С 2018 года реализовали более 250 проектов для крупных корпораций.

Входим в ТОП-20 дизайн студий по мнению Тэглайна. Создали альянс MCARTxUXART, в этой команде продумываем и отрисовываем интерфейсы для корпоративных порталов крупных корпораций. И за эти интерфейсы получаем награды: например, из недавнего — золото за корпоративный портал для РИВ ГОШ.

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

Подробнее о том, кто мы и как работаем над проектами, рассказали в этом ролике, так что обязательно посмотрите перед чтением статьи:

Это первая часть серии статей, в которых мы по пунктам разберем все, что так или иначе касается проектирования и аналитики корпоративных порталов. Без преувеличений, со всеми плюсами и минусами, с которыми вы можете столкнуться. Ну или же без минусов, если сходу обратитесь к профессионалам)

Аудитория корпоративного портала — кто это?

Перед началом работы обязательно нужно ответить на следующие вопросы:

• Что мы делаем?

• Зачем нужен корпоративный портал?

• Кому он нужен?

• Какие задачи мы решаем?

Здесь нужно понимать, что у корпоративного портала есть разные разделы. Проектируются они под каждый конкретный отдел в компании. Предположим, что HR отделу нужна информация по:

• Документации по заработной плате сотрудника — это расчетные листы, график выплаты, премии и прочее

• Документы о прекращении работы с сотрудником — заявление об увольнении

• Дисциплинарные процессуальные документы

И так далее. Каждый раздел в компании хочет видеть на корпоративном портале функционал, который в первую очередь будет удобен ему.

И каждый блок будет иметь свою аудиторию ответственных людей. У них будут свои цели и задачи.

На простом примере:

• Бухгалтерия просит, чтобы юзеры могли сами делать себе справки

• HR просит добавить блок опроса на главную

• Маркетинговому отделу важно освещать активности внутри и вне компании

• А менеджеры хотят добавить возможность трекинга задач

• При этом ТОПам нужна аналитика и отчетность, которую они могут отслеживать без лишних кликов

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

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

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

Юзеров можно поделить на три основные группы:

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

• Офисные сотрудники — у них есть доступ к компьютеру, но запросы сильно отличаются. Например, отслеживать свою загрузку, общаться с коллегами и так далее

• Удаленные сотрудники — торговые представители, у которых нет основной точки работы. Они заходят на портал через телефон или планшет. И у этой аудитории другие цели

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

Сделать это крайне сложно. И для решения этой задачи мы прибегаем к аналитике.

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

Подходы в дизайне и проектировании портала

Например, если мы берем классический сценарий с Битрикс24, стоит понимать, какой функционал имеет платформа без дополнительных интеграций стороннего софта.

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

Хороший совет: если можно оптимизировать затраты и использовать штатный функционал софта, изменяя лишь визуальную часть, то лучше не придумывать велосипед и сделать так.

Частая история — компания хочет использовать на своем портале фирменные цвета и визуалы. И если это удовлетворяет как целям «заказчика», так и пользователям, то лучше оставить все, как есть.

У каждой компании вырабатывается фирменный стиль, который можно отследить на всех каналах связи. Важно, чтобы корпоративный портал, в том числе, был выполнен в этом стиле.

Если зайти на облачный Битрикс24, вы увидите, что он выполнен с акцентом на голубой цвет. Естественно, это не подойдет тому же РИВ ГОШ, о котором мы рассказывали вам в начале статьи. Тут можно увидеть, как фирменный стиль компании отразился на интерфейсе корпоративного портала: https://workspace.ru/cases/korporativnyy-portal-i-mobilnoe-p...

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

Корпоративный портал — сложный ресурс, с огромным функционалом. И главная страница это лишь верхушка айсберга.

А теперь давайте представим: пользователь решил зайти в раздел «отпуск». Здесь для юзеров ключевой информацией станет:

• Количество неиспользованных дней отпуска

• Календарь

• Возможность подать заявку на отпуск

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

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

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

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

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

Вам нужно проживать пользовательский путь, понимать, что ему нужно в конкретный момент. Если человек хочет взять отпуск, он должен сделать это без лишних раздумий, разглядываний «котиков» и прочего.

Поэтому давайте закрепим: главное в разделе «отпуск» — количество неиспользуемых дней отпуска, календарь, на котором он может отследить, брался ли отпуск и в какие даты, и возможность взять отпуск в этом году/месяце.

Мы подробно поговорили об этом выше. Не забывайте задавать себе три главных вопроса:

• Зачем этот портал?

• Кому он нужен?

• Какие задачи мы решаем?

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

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

Пользователей вашего портала всегда можно разделить на несколько групп. Как мы и говорили выше, чаще всего встречается 3 аудитории:

• Производственные работники

• Офис

• Удаленные сотрудники

А еще не стоит забывать о HR, бухгалтерии, маркетинговом отделе, менеджерах и ТОПах. Каждая компании имеет своё количество активных сотрудников, которые преследует свои цели на корпоративном портале.

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

(На самом деле, механизм чуть сложнее, но сегодня речь не про супер сложные механики)

Тренды в дизайне корп. порталов

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

Вторая причина — корпоративный портал делается раз на Х лет. Вот сделал себе, условно, СБЕР корп. портал и вспомнит о нем лишь в 2029 году.

Если же мы возьмем e-com, то с ним работа проходит на ежедневной основе. Сайт должен выделяться на фоне конкурентов, должен зацепить потенциального покупателя и довести его до совершения целевого действия.

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

• У нас был пример, когда мы начали собирать CJM и EJM для корпоративных порталов, многие компании удивлялись такому подходу

• А вот с дизайном и визуальной составляющей нужно решать по факту. Так как многие не готовы к резким переменам и привыкли «жить» в привычном ритме

• Некоторые не готовы сходу приступать к дизайну или прототипам и просят специальную документацию. Все нужно согласовывать не только между вами и заказчиком, но и внутри — между менеджерами и ТОПами компании

И последнее — тема корпоративных порталов закрыта. Мало кто рассказывает о том, как их делать, как анализировать аудиторию, как общаться с заказчиком, какие паттерны у корп. порталов есть и так далее.

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

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

А сегодня пора заканчивать. Спасибо каждому за чтение этой статьи. Не забывайте подписываться на наш телеграм-канал, в котором мы постим инфу по студии и не только (мемы, кто не любит мемы?): https://t.me/konakov_blog

С вами был редактор UXART. До скорых встреч <3

Рассказываю как делался сайт для известного видеопродакшена и какие есть подводные камни при технической реализации сайта с огромным количеством видеоматериала.

В 2022 году ко мне обратилась команда Hoody FX для редизайна текущего сайта. На тот момент в их портфолио были работы с McDonald's, Champion, Sony, Doja Cat, Samsung, Aeroflot, Fanta, AUDI, Ariana Grande и так далее

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

Если углубляться, и смотреть шоурилы конкурентов (например, Technicolor Group), то пользователю нативно понятно из видео, что такое VFX и как это работает по пальцам. У нас же нет этого объяснения по пальцам, – вместо этого видео с конечным результатом
В целом, это вся старая версия сайта, больше там ничего не было. Ни контактов, ни команды, ни описания направлений студии и других вещей, которые бы базово проинформировали пользователя о компании.

Личный бренд у компании сложился задолго до создания сайта, их работы гремели и без него.
Поэтому основная задача состояла в том, чтобы освежить дизайн, сделать удобный и понятный интерфейс, а также создать возможность добавлять работы в портфолио самостоятельно без привлечения программистов и иных сторонних специалистов. Самое главное – это кейсы, они должны быть рассортированы, и с 1 секунды цеплять взгляд пользователя.

Начинаем работу.

Что было сделано по пунктам:

1. Изучили деятельность компании (саму нишу), исследовали ЦА (в нашем случае это другие видеопродакшены, студии смежных направлений, которые буду заинтересованы в подряде) и конкурентов.

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

3. Приступили к написанию текстов. С учетом специфики ниши придерживались информационного стиля текста – главное, на что будет смотреть потребитель это визуал. Поэтому огромные полотна текста точно не в этот раз. Должно быть кратко, емко и по делу.

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

5. Заранее для верстки подготовили все необходимые нарезки из видео и шоурилы. Основная цель этого пункта – отразить портфолио через небольшую демонстрацию видео. Мы отошли от идеи со скриншотами из видео.

6. Сделали адаптивную верстку на WordPress с гибкой панелью администратора. Теперь команда может добавлять видео на сайт самостоятельно в пару кликов, а также распределить видеоматериал в нужный каталог и поставить ему нужное динамичное превью с описанием.

Основные моменты при создании сайта:

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

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

Разместили ключевые элементы (меню навигации) в легкодоступных местах. И протестировали на штате компании, чтобы убедиться в том, что он действительно прост в использовании. А вот и главный экран сайта:

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

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

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

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

Сложности при создании сайта, с которыми мы столкнулись

Все было бы хорошо, если бы это не был наш первый заказ в нише видеопродакшена. На тот момент они правда были первыми, а после этого я очень часто работала с видеопродакшенами.
Самая большая и сложная сложность – это огромное количество видеоматериала, который афигеть сколько весит. Как размещать на одной странице по 30 видео с превью, если каждый видеоролик весит по несколько ГБ? Мы не хотели оставлять скриншоты принципиально – это не про VFX, это не про обладаение формы над пространством. Нет. Расчет был как раз на то, что эти превью и перехватят все внимание пользователя.

Большая ошибка. Мы просто посмотрели по таймкодам какие моменты из роликов можно поставить на превью: сделали в панели администратора ячейку, чтобы в два клика можно было выставлять нужный промежуток времени. Итого, что получилось – ничего не грузит. Видео прогружается до момента с установленным таймкодом по 10-20 секунд. Чем дальше тот самый сочный момент из превью – тем дольше это все прогружалось. Пипец, подумали мы.Как решили? Наняли обычного монтажера, чтобы он сделал нам превью. Техническое задание простое – дали разрешение для превью (оно не превышало показатели в 600p, точно не вспомню), длительность не больше 10 секунд, выбираешь самые яркие моменты. В целом, все. Итого каждый кусочек видео весил в среднем не больше 10 Мб.

Также старались не размещать на одной странице большое количество видеороликов: на главной странице это реализовано как карусель из видео, а в каталоге у нас получилось достаточно большое скопление роликов, но разбитое на страницы (добавили пагинацию).
Кстати, сами видео вытянуты из Vimeo: работы заказчика изначально хранились там. Заглядывая в мои будущие кейсы также советую Dropbox, если рассматриваете облачное хранилище для подобных сайтов.

Панель администратора делали на WordPress. Свои задачи в части обновления контента она выполняет по сей день хорошо. Достаточно просто знать как работает редактирование страницы Вконтакте, чтобы отредактировать страницу на сайте в нашей панели администратора. Вот как она выглядела изнутри (наши с разработчиком скриншоты во время работы):

Общие впечатления по сайту

Это не самая сильная работа, но хотелось начать цикл статей про разработанные мною сайты с каких-то интересных кейсов. Может с технической точки зрения они будут вам полезны.
Например, в видеопродакшенах ждите много работы с видео – причем иногда неожиданной).
Я буду дальше рассказывать про другие кейсы в нише видеопродакшена, там тоже будут свои нюансы:  выбор CMS или другой подводный камушек.

Сайт до сих пор служит компании, они самостоятельно добавляют туда материалы, по SEO он нормально продвигается, так что всё гуд и свою задачу мы выполнили :)

Посмотреть кейс также можно на Dprofile и на Behance.

Следить за мной в социальных сетях можно тут
Написать по личному или деловому вопросу тут

Но есть решение…

Eagle – твой незаменимый помощник

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

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

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

Расширенный список поддерживаемых форматов до svg, psd, gif, font и прочих

Папки и смарт-папки

Папки выполнены в минималистичном стиле, что позволяет выводить до 40 папок одновременно и не теряться среди них. Не остаётся без внимания возможность персонализировать папки при помощи цвета и иконок

Так же в Eagle есть возможность создавать смарт-папки с умной фильтрацией, но этому решению я не нашёл никакого практического применения

Поиск по цвету или названию

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

Автоматическое сохранение ссылок

При сохранении любой сущности на веб-странице сохраняется ссылка на источник. Благодаря этому не придётся вспоминать где вы нашли тот или иной референс

Качественный скриншотер

Удобные команды, похожие на нативные, а именно:
• option+2 для скриншота выбранной области
• option+3 для скриншота видимой области
• option+4 для скриншота всей страницы с прокруткой

Из крутых фич – Eagle позволяет сохранять элементы на странице с зажатой клавишей cmd. Это очень удобно и бонусом сокращает количество необходимых кликов до минимума

Все скриншоты сохраняются в превосходном качестве (гораздо лучше любых браузерных конкурентов, проверено временем)

Хранение шрифтов

Хранение шрифтов – моя больная тема. Сдал свой рабочий ноутбук, получил новый, вроде всё нужное перенёс, а шрифты забыл. Жизнь тлен → Любой браузер → Скачать SF Pro (и так далее). Eagle поддерживает шрифты, это не может не радовать

Какие файлы поддерживает Eagle?

В настоящее время Eagle поддерживает добавление всех типов форматов файлов. Следующие форматы файлов можно предварительно просмотреть или воспроизвести напрямую:

• Фото (bmp, gif, heic, heif, hif, icns, ico, jpeg, jpg, png, svg, tif, tiff, ttf, webp, avif, base64, jfif, insp, jxl, jpe)
• 3D (fbx, obj, 3ds, 3mf, dae, ifc, ply, stl, glb)
• Текстура (dds, exr, hdr, tga)
• Видео (m4v, mp4, webm, mov (H. 264 / H. 265 / HEVC / AV1 / VP9 / VP8)
• Аудио (aac, flac, m4a, mp3, ogg, wav)
• Шрифт (ttf, ttc, otf, woff)
• RAW (3fr, arw, cr2, cr3, crw, dng, erf, mrw, nef, nrw, orf, otf, pef, raf, raw, rw2, sr2, srw, x3f)
• Office (txt, key, numbers, pages, pdf, potx, ppt, pptx, xls, xlsx, doc, docx, eddx, emmx)
• Другие (html, mhtml, url)

Недостатки

• цена лицензии в $30 (Raindrop.io как бесплатный аналог)
• покупка через Paypal (недоступен для граждан РФ)
• отсутствует облачность, для сгрузки файлов – об этом в пункте ниже

Как сделать Eagle облачным

Для этого необходимо скачать приложение Google Drive и создать библиотеку Eagle на облачном диске. После этого все сохранённые файлы будут автоматически сгружаться в облако Google Drive. В среднем, файлы весят около 3 мб. Кажется что 15 гб, которые Google предоставляет бесплатно должно хватить надолго

Идеальных не бывает?

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

Рекомендую попробовать всем, кто любит порядок и ценит своё время

Понравилась статья?

Ищи больше в моём телеграм-канале. Там постоянно выходит что-то интересное

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

Спасибо за внимание и всего наилучшего, обнял <3