{"id":13586,"url":"\/distributions\/13586\/click?bit=1&hash=d51248b864fc2536881ecff329f016f361fa84fdd76d6e9aaa5b17f1b9fefbb0","title":"\u0417\u0432\u043e\u043d\u0438\u0442\u044c \u0438\u0437 \u041a\u0430\u043b\u0438\u043d\u0438\u043d\u0433\u0440\u0430\u0434\u0430 \u0432 \u042f\u043a\u0443\u0442\u0438\u044e \u043f\u043e \u0432\u0438\u0434\u0435\u043e \u0431\u0435\u0437 \u0437\u0430\u0434\u0435\u0440\u0436\u0435\u043a","buttonText":"\u0410\u043b\u043b\u043e!","imageUuid":"bc8e606b-9a50-5550-a16e-3fed09971ed5","isPaidAndBannersEnabled":false}
Дизайн
Yaroslav Morozov

Как я сайт «лепил» для ASUS

Этим летом с коллегами запустили проект ASUS.STUDIO. С помощью него мы хотели объединить контент-криэйторов и дать российской аудитории полезные видеоуроки по разным направлениям: фото, видео, дизайн, 3D-моделирование, моушн-дизайн, мультипликация и аудио.

Вот так выглядела первая версия нашего сайта.

Раздел «Уроки»

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

Не надо так делать.

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

Вот тут можно посмотреть первую версию сайта.

Декабрь 2020

В личном портфолио 7 сайтов. Все +- похожи, что-то явно пошло не так. Я решил всерьез научиться создавать «правильные» и красивые сайты, поэтому записался на курс «Профессия UX/UI-дизайнер с нуля до PRO» от скилбокса. Посмотрел первые 12 уроков и понял, в чем мои главные ошибки (осталось посмотреть ещё 443 урока🙃). Все мои сайты были без полезного функционала и имели много лишнего.

Сразу же я решил обновить сайт нашего проекта.

Анализ.

Я посмотрел статистику просмотров каждой страницы и какой путь совершает человек. Путь был в большинстве случаев такой:

Главная -> Раздел с уроками -> Нужная категория.

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

Обновленная версия сайта.

На новой главной решил применить Z-паттерн (или подобие его). Теперь посетитель сайта может сразу выбрать нужную ему категорию уроков и посмотреть все доступные. После идет блок, где можно узнать про ускорение приложений и выбрать ноутбук для эффективной работы в «тяжелых» приложениях.

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

В это меню собрал 5 основных страниц, которые есть у нас: главная, раздел с уроками, раздел с криэйторами, раздел с приложениями и страничка с ноутбуками, где про них можно узнать больше или купить. Тут руководствовался тем, что люди акцентируются на первых и последних элементах. Поэтому наиболее важные для нас пункты назначения стоят по бокам. (В мобильной версии оставили только кнопки: Главная, Уроки и Инструменты).

После главного экрана идет блок с новыми уроками (обновляю все вручную, занимает максимум минуту времени) и выбор ноутбуков. Большинство людей переходило в раздел «Уроки» только для того, чтобы посмотреть на свежие уроки, которые вышли у нас (публикуем почти каждый день. Только иногда есть паузы). Для таких людей собрали 5 самых новых уроков прямо на главной, чтобы не приходилось переходить дальше. Раздел с ноутбуками был у нас не очень популярен, поэтому вынесли его тоже на главную. В будущем посмотрим, будет ли больше переходов на сайт продукта. (Очень хотелось бы).

При наведении фотография становится цветной :)

Далее идут все профессионалы, которые записывают уроки в рамках этого проекта. Тут логика, примерно, как с ноутбуками. Мало людей переходило на страницы криэйторов внутри сайта, основные переходы были с других платформ (YouTube и Instagram).

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

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

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

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

Раздел «Уроки»

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

Фильтр для выбора уроков.

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

Старый раздел «Уроки». Можно выбрать только категорию.

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

Это так приятно😄

Старых разделов больше видеть не хотелось.

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

Вот такая длинная страница была, посмотрите:

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

Новая страница автора. Основная информация

Удалось уместить всю информацию из старой версии более компактно. Основная информация сразу видна при открытии страницы.

Новая страница автора. Уроки

Если пролистнуть чуть вниз, то можно посмотреть на уроки только от этого автора. И все. На этом страница автора закончилась. Длинный скролл в 5 экранов удалось уместить в 1.5 экран.

Итоги

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

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

Я впервые писал такую статью, поэтому не судите строго. Извиняюсь, если где-то допустил ошибки. В будущем буду делиться новыми своими работами, пока не стану профессиональным UX\UI дизайнером.

Всем спасибо за внимание. Жду ваших комментариев, будет очень интересно почитать.

0
64 комментария
Написать комментарий...
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Yaroslav Morozov
Автор

Ахахах, никто)) 

Ответить
Развернуть ветку
Anton Kulina

Пожалуйста, просмотри уроки / примеры сильных брендов как делать контактные формы.

Ответить
Развернуть ветку
Yaroslav Morozov
Автор

Посмотрю)) Будет классно, если напишешь на чьи уроки ориентироваться

Ответить
Развернуть ветку
Ilya Miller

1. Стили input, select и button условно одинаковые. 141414 0f0f0f и 000000  не каждый монитор настолько откалиброван что бы увидеть разницу.
2. Бордюры в 1 пиксель на мониторах с большой плотностью пикселей будет выдавать фактически 1.5 пикселя а с формами которые на сайте имеют размер 2 пикселя не особо будут отличаться.
3. Нашел третий цвет кнопок сверху 181818. чем собственно 141414 не угодил.
4. 5 стилей кнопок на одной странице. + 2 стиля инпутов. 

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

Ответить
Развернуть ветку
Yaroslav Morozov
Автор

Спасибо большое за развернутый ответ. Учту его при новом редизайне. Просто понимал, что самый первый вариант не очень и лучше его поменять. Курс по дизайну рассчитан на 12 месяцев, там очень много уроков, но если заниматься каждый день, учитывая рабочую нагрузку, то через месяца 3 реально его закончить. Новая версия, на мой взгляд, значительно лучше первой и хочется теперь по ней собрать статистику и после полного обучения сделать редизайн.

А какое количество стилей кнопок допустимо на одной странице?

Ответить
Развернуть ветку
Anton Kulina

Аккуратнее сделать совсем никак?

Ответить
Развернуть ветку
Yaroslav Morozov
Автор

В иконках проблема или в чем? 

Ответить
Развернуть ветку
3 комментария
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
7 комментариев
Yaroslav Morozov
Автор

Здравствуйте! Извините, не очень понял про предложение😅 От кого?

Ответить
Развернуть ветку
4 комментария
Anton Kulina

Какой страх если это официально..

Ответить
Развернуть ветку
Yaroslav Morozov
Автор

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

Ответить
Развернуть ветку
2 комментария
Екатерина Коклягина

Интересная и лаконичная статья! 

Ответить
Развернуть ветку
Yaroslav Morozov
Автор

Спасибо!

Ответить
Развернуть ветку
Алексей из LOADING.express

Старая версия/Новая версия:

Вес страницы:
746.42 KB / 10.58 MB - Гугл рекомендует до 500 кб.

Скорость загрузки до полной интерактивности страницы:
8,6 сек. / 32,9 сек.

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

[email protected], который Тильда использует у себя имеет 4 средних уязвимости, которые известны всем. Но это не так страшно, как куча PNG в сайте и 4 шрифта старого WOFF формата на 200+ килобайт.

В любом случае - успехов! Откажитесь от Тильды в следующем году!

Ответить
Развернуть ветку
Yaroslav Morozov
Автор

Спасибо большое! А какое решение лучше всего использовать в нашем случае? Мы хотим перейти с Tilda в следующем году, но пока ещё не придумали на что. Как вариант - сами хотим написать

Ответить
Развернуть ветку
4 комментария
Mister Clever

Классная статья, полезная и легко читается) Отличный пример того, как не стоит бояться отказываться от неработающих решений, пусть и созданных тобой)

Ответить
Развернуть ветку
Yaroslav Morozov
Автор

Спасибо большое! Насчет отказов от собственных решений: бывало такое, что все закончил, вроде идеально, но жизнь дает тебе новый инсайт и сразу все хочется переделать. До публикации этой статьи мне уже хотелось заново переделать сайт, т.к. узнал ещё пару моментов. Под вечер желание стало только больше

Ответить
Развернуть ветку
Anton Kulina

Отступы между блоками, они вообще есть? Все сплывается в одно.

Ответить
Развернуть ветку
Yaroslav Morozov
Автор

Спасибо! Сделаем отступы больше. 

Ответить
Развернуть ветку
Yuliana Yakimova

по-моему разница с первой версией сайта очевидна. Очень классное решение добавить фильтр по программам, лайк! думаю, для event-сайта получилось отлично ( говорю, с точки зрения моего user experience). Спасибо, что поделился:)

Ответить
Развернуть ветку
Yaroslav Morozov
Автор

Спасибо большое! Дальше - больше🚀

Ответить
Развернуть ветку
KKazarichuk

"Записался на курсы Skillbox" и после этой фразы можно закрывать статью =))

Ответить
Развернуть ветку
Yaroslav Morozov
Автор

Почему?😅

Ответить
Развернуть ветку
Антон Радин

Как убого то

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Yaroslav Morozov
Автор

Сделать больше акцент на "Узнать больше"? Тогда другую может сделать черной с зеленой обводкой? или это дикость? 

Ответить
Развернуть ветку
7 комментариев
Anton Kulina

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

Ответить
Развернуть ветку
Yaroslav Morozov
Автор

Старая версия была ещё хуже, хотелось сделать временный вариант

Ответить
Развернуть ветку
Свободный каякер

Привет! Хороший редизайн! Но раз спросили, то вот пару панчей:
- А чего не сделали главную в стилистике https://www.asus.com/ProArt/ ? Там крутейшая сеточка и ритм и подача контента
- Таб бар уж очень непривычно для десктопа. Кнопку с домиком точно наверх-налево в виде логотипа. И плюс блок неаккуратный какой то - разная толщина у бордеров и иконок, стилистика и значение иконок странные. Я б конечно избавился от него в пользу классического закрепленного сверху меню.
- Блок с моделями - слишком много мраморного градиента (и не экране и на фоне)
- На главной поиск где-то внизу. И воще кажется лишним.
- Разные разделы композиционно разные какие то, особенно "Приложения" - вообще словно из другого сайта подтянули.
- Не понял зачем пользоваться сокращателями ссылок, если это оффициальный брендовый ресурс
- Css анимашки местами кривоватые
Вощем берите хорошего визуальщика-интерфейсника в штат, например меня B-)

Ответить
Развернуть ветку
Yaroslav Morozov
Автор

Привет! Пока твой комментарий мне понравился больше всего)) Спасибо! 
1) Экспериментируем сами, хочется создавать большие проекты в локальном офисе внутри in-house команды. Этот сайт показывает наше развитие в данном направлении. 
2) Про неаккуратный - теперь согласен, раньше мне он казался классным. А про расположение - хотелось сделать что-то новое, а не классическое меню сверху.
3) Если внутри ноутбуков убрать, то станет лучше?)
4) Добавил исходя из такой логики: если человек, пролистав страницу до конца, не найдет нужную ему инфу, он её найдет там. Но согласен, что его можно убрать.
5) Приложения - это партнерский материал от NVIDIA, поэтому она сделана в их стилистике. 
6) Так легче отслеживать статистику некоторым менеджерам. Там свои заморочки🙃 (сервисы аналитики Яндекса и Гугла подключены)
7) Это что?))

В штат брать невыгодно, не так много сайтов у нас локальных. Мы сами делаем только event-сайты и они со своей задачей справляются на ура. Тут большой проект, которому теперь тесно внутри Тильды. Хотим переносить все на домен asus.com/ru и в финальном редизайне так сделаем скорее всего (статистику проще собирать, тоже свои заморочки есть). Но, как вариант, есть у меня идея сотрудничества с тобой. Можно уроки для нас делать.... Напиши мне в телегу, если интересно: @morozov_moscow  

Ответить
Развернуть ветку
Дмитрий Евсеев

Дизайн стремный и несовременный. Не выдержана одна стилистика. Например плоская стоковая иллюстрация с теткой вообще не в тему. 
А за уроками лучше пойти на ютюб. Найти по своей теме узкоспециализированного чувака который душу вкладывает в свой канал.
По АЕ Бен Мэрриот, например, збс.

Да и в целом рекламная сущность сайта отталкивает. Торчат уши унылого желания разбогатеть на партнерке бренда или какого-нибудь мвидео.

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

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

Ответить
Развернуть ветку
Yaroslav Morozov
Автор

Для уроков мы находим узкоспециализированных экспертов, и заказываем у них уроки. За 3 месяца продуктивной работы, мы выпустили 70 уроков (на данный момент). Наши уроки смотрит достаточно большое количество людей. Я согласен, что сайт неидеальный и требует доработок, но наша цель - показать этим сайтом, что даже без какого опыта можно учиться и каждый раз делать лучше.

Ответить
Развернуть ветку
Nikolai Erovenko

Я все понимаю - у Асуса с сайтам в принципе туго - но разве в соседних командах нет уже готовых скелетов для сайта? странно когда все свое от проекта к проекту

Ответить
Развернуть ветку
Yaroslav Morozov
Автор

Что вы имеете против наших сайтов?) В данном случае не было никаких подобных прототипов, поэтому делали сами, локальной командой, своими силами. Этот сайт мы делали для людей, которым нужен контент. И в этом плане он со своей задачей справляется

Ответить
Развернуть ветку
1 комментарий
Читать все 64 комментария
null