🔴Итоговая версия сайта -- может кому будет интересно посмотреть и почитать.
🟠ИИ Новости -- новостной тг канал, в котором я каждый день пересылаю самые актуальные новости из других каналов.
🔵Основной ТГ канал -- канал с персонализированным контентом.

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

В 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.

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

ТОП-5 курсов по типографике и дизайну шрифтов в 2024 году

1. «Типографика: о форме и содержании» от Bang Bang Education ― курс, где вы создадите несколько работ для портфолио

2. «Шрифт в дизайне» от Skillbox ― обучение от создателей популярных шрифтов (промокод ГДЕКУРС — скидка 45%)

3. «Типографика PRO» от Pentaschool ― курс для создания авторского шрифта в портфолио

4. «Дизайнер-полиграфист» от Логомашины ― обучение под руководством владелицы собственной типографии

5. «Онлайн-курсы типографики» от Международной школы профессий ― курс для уверенного старта в профессии

Онлайн-курсы по типографике и дизайну шрифтов

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

1. Типографика: о форме и содержании — Bang Bang Education

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

• Цена: 30 870 ₽ (44 100 ₽ без скидки) или в рассрочку от 5 145 ₽/мес. (7 350 ₽/мес. без скидки)

• Формат обучения: онлайн-вебинары + практические задания

• Продолжительность обучения: 1 месяц

• Документ об окончании: сертификат

• Пробное занятие: нет

Преимущества:

• Возможность получить скидку 5% для программы обучения.

• После покупки курса вам откроется доступ к «дизайн-библиотеке».

• Каждую практическую работу прокомментируют преподаватели.

Недостатки:

• Учащиеся жалуются на долгую обратную связь.

→ На сайт школы

Другие курсы Bang Bang Education: Типографика и верстка: внимание к тексту, Шрифт в логотипе.

2. Шрифт в дизайне — Skillbox

🎁 По промокоду ГДЕКУРС доступна скидка 45% на курсы.

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

• Цена: 5 043 ₽/мес. (7 205 ₽/мес. без скидки)

• Формат обучения: видеоуроки + практические задания

• Продолжительность обучения: 2 месяца

• Документ об окончании: сертификат о прохождении курса

• Пробное занятие: нет

Преимущества:

• При покупке программы обучения вы получите годовой доступ к курсу по английскому в подарок.

• Преподаватель курса ― создатель шрифтов PT Sans, PT Serif, Circe, Golos.

Недостатки:

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

→ На сайт школы

3. Типографика PRO — Pentaschool

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

• Цена: 17 400 ₽ (29 000 ₽ без скидки) или в рассрочку от 2 900 ₽/мес.

• Формат обучения: видеоуроки + тесты + практические занятия

• Продолжительность обучения: 2 месяца

• Документ об окончании: удостоверение о повышении квалификации

• Пробное занятие: нет

Преимущества:

• Возможность создать собственный шрифт.

• Бессрочный доступ к материалам курса.

• Возможность оплатить обучение по беспроцентной рассрочке.

Недостатки:

• В отзывах ученики говорят, что процесс возврата средств плохо организован.

→ На сайт школы

Другие курсы Pentaschool: Дизайн и верстка полиграфии.

4. Дизайнер-полиграфист — Логомашина

Обучение на курсе длится всего 5,5 часов. За это время вы успеете освоить некоторые техники создания привлекательных шрифтов. К концу курса вы сможете без проблем подбирать шрифты для отдельных тематик сайтов. В итоге вы выполните 2 проектные работы, которые можно использовать для портфолио.

• Цена: 2 917 ₽/мес. (4 167 ₽/мес. без скидки)

• Формат обучения: видеоуроки + онлайн-вебинары + практические задания

• Продолжительность обучения: 5,5 часов

• Документ об окончании: диплом о прохождении курса

• Пробное занятие: нет

Преимущества:

• Преподаватель курса ― владелец собственной типографии.

• Начало обучения сразу после оплаты.

• Бонусный курс по Photoshop.

Недостатки:

• Учащиеся говорят, что слишком часто меняют кураторов.

→ На сайт школы

5. Онлайн-курсы типографики — Международная школа профессий

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

• Цена: 9 900 ₽ (16 500 ₽ без скидки)

• Формат обучения: видеоуроки + практические занятия

• Продолжительность обучения: 3 недели

• Документ об окончании: диплом о повышении квалификации

• Пробное занятие: нет

Преимущества:

• Возможность пройти обучение за счет государства.

• Возможность обучаться за материнский капитал.

Недостатки:

• Некоторые ученики считают, что программа обучения недостаточно насыщена.

→ На сайт школы

6. Дизайн полиграфии — НИИДПО

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

• Цена: 36 100 ₽ (60 000 ₽ без скидки)

• Формат обучения: текстовые материалы + онлайн-вебинары + практические занятия

• Продолжительность обучения: 18 недель

• Документ об окончании: диплом о профессиональной переподготовке

• Пробное занятие: нет

Преимущества:

• Доступ к онлайн-библиотеке школы.

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

• Бесконечный доступ к курсу.

Недостатки:

• Некоторые жалуются на слишком большой срок доставки диплома.

→ На сайт школы

7. Типографика для веб-дизайнеров — Controforma

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

• Цена: 3 500 ₽ 

• Формат обучения: видеоуроки + реальный проект

• Продолжительность обучения: зависит от ученика

• Документ об окончании: не выдается

• Пробное занятие: нет

Преимущества:

• Обучение в своем темпе.

• Возможность в любой момент пересмотреть курс.

Недостатки:

• Не обнаружены.

→ На сайт школы

8. Типографика в Indesign — Praktika.school

Курс предназначен для углубленного изучения топографии сайтов. На курсе вы познакомитесь с программой Adobe Indesign. Вы в совершенстве освоите эту программу и сможете создавать уникальные дизайны. К концу курса вы будете уметь сочетать отдельные виды дизайнов со шрифтами и разрабатывать отдельные решения для каждого проекта.

• Цена: от 990 ₽/мес. за доступ к платформе

• Формат обучения: практические задания + домашние задания + видеоуроки

• Продолжительность обучения: 7 дней

• Документ об окончании: не выдается

• Пробное занятие: нет

Преимущества:

• Обучение проводится на реальных проектах.

• Возможность пройти курс всего за 7 дней.

• Моментальный возврат средств за подписку.

Недостатки:

• Не обнаружены.

→ На сайт школы

9. Типографика в графическом дизайне — Stepik

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

• Цена: 2 790 ₽

• Формат обучения: текстовые материалы + видеоуроки + тесты

• Продолжительность обучения: 10 часов

• Документ об окончании: не выдается

• Пробное занятие: нет

Преимущества:

• Возможность бесплатно посмотреть некоторые уроки.

Недостатки:

• Не обнаружены.

→ На сайт школы

10. Типографика и верстка — Бюро Горбунова

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

• Цена: от 34 300 ₽ (49 000 ₽ без скидки)

• Формат обучения: видеолекции + текстовые материалы + практические задания

• Продолжительность обучения: 3 недели

• Документ об окончании: сертификат о прохождении курса

• Пробное занятие: нет

Преимущества:

• Большая часть курса уделяется практическим занятиям.

• Для прохождения курса не требуется мощный компьютер.

Недостатки:

• Есть нарекания по поводу качества обучения.

→ На сайт школы

Бесплатные онлайн-курсы по типографике и дизайну шрифтов

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

• О шрифте от Bang Bang Education (3 видеоурока, без сертификата, доступ после регистрации)

• Типографика от Академии IT (10 уроков, видеоуроки, без сертификата, доступ после регистрации)

• Работа со шрифтом в дизайне с нуля до PRO от Stepik (5 уроков, видеоуроки + практические задания, без сертификата, доступ после регистрации)

• Типографика от Design Prosmotr (18 уроков, видеоуроки, без сертификата, свободный доступ)

• Первый курс типографики от Typodesign (31 урок, видеоуроки, без сертификата, доступ после регистрации)

Как мы подбирали школы и курсы для нашей статьи?

При написании статьи мы опирались на несколько следующих критериев:

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

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

3. Собственная образовательная платформа. Если школа обладает собственной онлайн-платформой, то это гарантия удобства для учеников. Им не придется устанавливать сторонние программы, а работать только в браузере.

4. Реальные отзывы учеников. Узнать о настоящем качестве обучения и наполнения курса можно только от настоящих учеников.

Что такое типографика и как на этом заработать

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

Вот несколько областей в которых пригодятся навыки типографики:

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

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

Обучение и консультирование. Делитесь своим опытом в области типографики через обучающие курсы, вебинары или консультации с теми, кто хочет улучшить свои навыки.

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

Фриланс. Предоставление услуг по дизайну и верстке текстов на удаленной основе для клиентов и компаний.

Итоги

В статье мы рассмотрели несколько курсов, которые помогут вам стать профессиональными печатником и дизайнером полиграфических материалов. Навык работы с печатными материалами полезен во многих специальностях. Например, профессия графического дизайнера, где вы будете получать от 100 000 ₽ в среднем.

Еще раз хотим напомнить вам о нескольких курсах из подборки:

1. Типографика: о форме и содержании от Bang Bang Education, если вы хотите получить практический опыт создания проектов;

2. Шрифт в дизайне от Skillbox, если вы хотите перенять опыт профессионалов;

3. Типографика PRO от Pentaschool, если вы хотите создать свой уникальный проект.

Расскажите, какие курсы по типографике вы проходили или хотели бы пройти?

Есть такой замечательный человек — Юлия Миоцен. Она при помощи CSS творит чудеса, выигрывает крутые награды и шарит за дизайн. Анимация сделана ей, на одной вёрстке (HTML; CSS). Юлия пришла в дизайн из программирования, а точнее сочетает в себе дизайн и программирование на высшем уровне. Очень вдохновляет, когда думаешь чем бы заняться и какого уровня можно достичь даже в вёрстке)))

Здесь можно посмотреть её работы и код