Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Главное Свежее   Проекты
Рекомендуем
Продвинуть свой проект
1 144 18 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Как и зачем я скопировал дизайн у Ютуба

Перед нами стоит задача разработать дизайн для своего проекта. На ум пришел дизайн сайта youtube.

batopon.ru

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

b_57fae0d085a61.jpg

Давайте обо всем по порядку.

Хэдер

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

Логотип. С ним все ясно. Расположил в привычном месте слева в углу.

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

"Что такое Батопон?" Считаю, что на текущем этапе развития проекта, это кнопка будет очень актуальна.

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

Блок слева

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

Список обновляется в реальном времени. Полезность ясна.

Тот странный баннер с Навальным и Познером

Очень важная штука в этом проекте. Есть 2 варианта применения.

1) Реклама. Бррр...

2) Размещение там баттла или информации о запланированном баттле.

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

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

Сетка баттлов

Вот мы и пришли к самому главному. Надеюсь, вы дочитали до этого момента;)

Тут вас ждет самое главное сходство в дизайне с самым большим хранителем видео.

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

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

Можно также раскошелиться на пару слов об этих квадратиках с баттлами.

Роль у них точно такая же, как и у превьюшек на ютубе.

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

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

Подвал сайта

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

В общем и целом

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

P.S. Пока мы еще не утвердили слово "баттл", я его буду писать курсивом.

+3
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Подбираем рекоммендации...
Комментарии
Первые Новые Популярные
GreenRed brand studio
разработка логотипа за 99$
Панченко Андрей
Все правильно сделал!
Ответить
Mikhail Kh.
Спасибо!
Ответить
Igor Iovenko
Для начала самое оно! Уже когда проект вырастит, тогда можно будет уже что-то думать оригинальное в плане дизайна, а поначалу да, нужно чтобы было удобно в первую очередь!
Ответить
Mikhail Kh.
Спасибо большое за поддержку!)
Ответить
Evgeniy Filonenko
в чем смысл этой статьи???
такое впечатление что я на экскурсии в Мухосранке:
"Посмотрите на лево - там меню, посмотрите на право там баннер" статья не о чем!
Ответить
Mikhail Kh.
Жители Мухосранска бы обиделись;)
А так, спасибо за отзыв!
На счёт бесполезности - полностью согласен.
Хорошо, что она хоть не очень длинная, правда ?)
Ответить
Илья Сахаров
Много времени ушло на создание сайта?
Ответить
Mikhail Kh.
на сам сайт или на механику баттлов ?
Ответить
Илья Сахаров
На дизайн сайта
Ответить
Mikhail Kh.
где-то около 5 часов. работал ночью.
Ответить
Александр Горячев
5 лет назад делал такой проект) но так и не запустил. Удачи в развитии. Надеюсь у вас будут еще рейтинги и награды встроены и функция "бросить вызов", "платный просмотр" и "+10 к рейтингу за бабки"
Ответить
Александр
Это вообще про что было? Про русофобов и пропиндосов Навального и Познера? )) Так выборы прошли, чо ...
Ответить
Mikhail Kh.
Ахаха)
Спасибо за комментарий!
На счёт баннера, это просто пример того, как можно размещать инфо о предстоящих баттлах))
Ничего больше
Ответить
noname
"Можно также <b>раскошелиться на пару слов</b> об этих квадратиках с баттлами": бедный главред плачет кровавыми слезами (( Раскошельтесь лучше на дезигнера )))
Ответить
Mikhail Kh.
Больше всего люблю колкие комменты.
Спасибо, что вы их генерите
Сначала даже не знаешь за что прилетит))
Спасибо за Ваш комментарий!
Сожалею, что это бездарное чтиво заставило вас понервничать.
А на дезигнера коплю все еще с денег на обед.
Главреду готов купить кофейку (из Макдака только), если он вообще читал это)
Ответить
noname
Я не хотел вас обидеть или задеть. Но о фразу так споткнулся, что решил вам об этом сообщить.

Скажите, а название сайта имеет какой-то смысл, или это просто набор букв?
Ответить
Mikhail Kh.
Спасибо!
Вы нисколько не задели меня))

Название сайта имеет смысл. Это сокращенное название от словосочетания на английском языке. А от какого конкретно пока секрет)

Хотя, если очень захотеть, можно догадаться
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать