✧ Цветовая схема - это группа цветов, которые гармонично сочетаются между собой и используются для создания приятного визуального восприятия. Её применяют в дизайне, будь то веб и графический дизайн, дизайн интерьера и мода, чтобы создавать эстетически приятные и сбалансированные композиции.
✧ Схемы могут быть разные, но я приведу основные и самые распространённые из них:
1. Монохроматическая (Monochromatic). Используется один основной цвет с разными оттенками и насыщенностями.
2. Аналоговые (Analogous), аналогичные цвета. Включает цвета, расположенные рядом друг с другом на цветовом круге.
3. Комплементарная (Complementary), контрастные цвета. Использует пары цветов, расположенных напротив друг друга на цветовом круге, чтобы усилить контраст.
4. Триада (Triadic). В триадной схеме используются три одинаково удаленных цвета на цветовом круге. Схема сохраняет гармонию и высокий контраст.
5. Сплит-комплементарная (Split-Complementary). Эта схема использует один цвет и два цвета, расположенные по обе стороны от его комплементарного цвета, чтобы смягчить контраст.
6. Тетрада (Tetradic), две пары контрастных цветов. Использует два набора комплементарных цветов.
7. Квадрат (Square), вариант тетрадной схемы, в которой четыре цвета равномерно распределены на цветовом круге.
✧ Цветовые схемы должны соответствовать целям дизайна и уникальности бренда. Понимание цветовой температуры (теплые, холодные, или нейтральные) помогает дизайнерам передать нужное настроение, используя подходящие цвета.
Чужая неизвестная планета в дальнем космосе, красивое голубое небо в облаках, инопланетянки собирают урожай винограда с высоких деревьев.
Вы, конечно, спросите, "а где виноград-то"?
Весь виноград инопланетянки сожрали во время сбора урожая.
Прожорливые твари, прям, как саранча.
А теперь, минутку внимания. Нужен "сурьез".
Писатель - фантаст Константин Оборотов попросил сделать для него дизайн сайта. Ну, вот, здесь я сделал какие-то пилотные наброски. Прошу вас оценить, как вам это все нравится. Попробуйте встать на место писателя и скажите, только честно, вы приняли бы такую работу? Ну, хотя бы в виде пилотной версии.
Предлагаю вашему вниманию всякие макеты, заготовки и прочие.
Полный вариант в чистом виде, без портрета писателя.
Полная версия с портретом писателя.
Версия с большим объемом информации, верхняя часть страницы.
Версия с большим объемом информации, нижняя часть страницы.
✧ Приоритет простоты, ясности и эффективности с минимальным использованием цвета, типографики и композиции.
✧ Стиль минимализма зародился в западном искусстве и архитектуре в начале 1960-х годов, как реакция на вычурные и декоративные стили, преобладавшие в предыдущие десятилетия.
✧ Эта философия дизайна ставит во главу простоту и минимализм, отбрасывая все, кроме самого необходимого, фокусируясь на ясности, эффективности и эстетическом воздействии, за счёт упрощения таких элементов, как цвет, типографика и композиция.
✧ Минималистские дизайны намеренно легки для глаз, часто характеризуются нейтральной или пастельной цветовой палитрой, большим количеством негативного пространства, тонкими линиями и чёткой визуальной иерархией.
✧ Концепция минималистского графического дизайна заключается в том, чтобы создать нечто, где каждый элемент служит определенной цели, в результате чего дизайн становится простым, чистым, красивым и очень удобным для использования.
Рассказываю как делался сайт для известного видеопродакшена и какие есть подводные камни при технической реализации сайта с огромным количеством видеоматериала.
В 2022 году ко мне обратилась команда Hoody FX для редизайна текущего сайта. На тот момент в их портфолио были работы с McDonald's, Champion, Sony, Doja Cat, Samsung, Aeroflot, Fanta, AUDI, Ariana Grande и так далее
Это был небольшой лендосик, где по большей части были одни скриншоты работ (напоминаю, компания занимается видеопродакшеном, а именно VFX). В целом, все. Также это была просто верстка, то есть невозможно было добавлять какие-то новые работы из панели администратора. Ее просто не было.
Как-то так выглядело портфолио – скриншоты из видео, при наведении появляется название. В целом, это имеет место быть, но... Точно ли на сайте продакшена? Чуть позже разберемся
Работа с ретушью – это одно из главных направлений компании. Снова скриншоты, которые просто листаешь сам. На сайт они выгружены не в лучшем своем качестве
Если углубляться, и смотреть шоурилы конкурентов (например, Technicolor Group), то пользователю нативно понятно из видео, что такое VFX и как это работает по пальцам. У нас же нет этого объяснения по пальцам, – вместо этого видео с конечным результатом В целом, это вся старая версия сайта, больше там ничего не было. Ни контактов, ни команды, ни описания направлений студии и других вещей, которые бы базово проинформировали пользователя о компании.
Личный бренд у компании сложился задолго до создания сайта, их работы гремели и без него. Поэтому основная задача состояла в том, чтобы освежить дизайн, сделать удобный и понятный интерфейс, а также создать возможность добавлять работы в портфолио самостоятельно без привлечения программистов и иных сторонних специалистов. Самое главное – это кейсы, они должны быть рассортированы, и с 1 секунды цеплять взгляд пользователя.
Начинаем работу.
Что было сделано по пунктам:
Изучили деятельность компании (саму нишу), исследовали ЦА (в нашем случае это другие видеопродакшены, студии смежных направлений, которые буду заинтересованы в подряде) и конкурентов.
Сформулировали креативную концепцию. Мы перелопатили кучу референсов — изучили международные рейтинги сайтов нашей и смежных ниш, изучили все известные подборки сайтов, но и про конкурентов не забыли. По итогу мы имели внушительную коллекцию того «как надо», а вместе с этим — конкретное видение структуры и стиля. Сформировали визуальный код — простота структуры, лаконичность графики, ясность языка.
Приступили к написанию текстов. С учетом специфики ниши придерживались информационного стиля текста – главное, на что будет смотреть потребитель это визуал. Поэтому огромные полотна текста точно не в этот раз. Должно быть кратко, емко и по делу.
Оформили смыслы в дизайн-концепцию. Дизайн-макет получился удобным, очень простым в навигации.
Заранее для верстки подготовили все необходимые нарезки из видео и шоурилы. Основная цель этого пункта – отразить портфолио через небольшую демонстрацию видео. Мы отошли от идеи со скриншотами из видео.
Сделали адаптивную верстку на WordPress с гибкой панелью администратора. Теперь команда может добавлять видео на сайт самостоятельно в пару кликов, а также распределить видеоматериал в нужный каталог и поставить ему нужное динамичное превью с описанием.
Основные моменты при создании сайта:
Визуальный код компании должен остаться таким же. То есть в брендинг мы не лезем. Элементы фирменного стиля это то, что остается неизменным, и то с чем мы должны работать (хотя это усложняет задачу, потому что часто он становится неактуальным спустя время, например, как вышло у нас, либо он изначально был сделан посредственно другими дизайнерами). За основной стиль взяли минимализм. Пространство не должно перебить форму. Простота структуры, легкость в навигации, лаконичность графики и ясность языка.
Бриф и наша подборка референсов открыли дорогу к дизайну всех страниц, а заказчики со своей стороны подготовили демонстративный шоурил. Теперь при первом касании с сайтом было понятно, что перед нами студия визуальных эффектов. Была проведена работа с типографикой, а также обработка фонового видео (ниже пример).
50 оттенков типографики или как мы выбирали гарнитуру (тут без интерлиньяжа и других внутренних настроек шрифта, примеряли разные варианты с клиентом)
Разместили ключевые элементы (меню навигации) в легкодоступных местах. И протестировали на штате компании, чтобы убедиться в том, что он действительно прост в использовании. А вот и главный экран сайта:
За основу был взят информационный стиль текста – легко понимается, поскольку предоставляет собой прямую информацию без использования сложного языка или метафор. Также он позволяет пользователям быстро найти нужную информацию, что экономит время посетителя сайта и увеличивает удовлетворенность от его использования ресурса.
Пример интеграции текста на сайт. Перечисление основных направлений и видов услуг студии
Вместо обычной фотографии на весь экран сделали слайдшоу из детализированных скриншотов с работами по направлению Beauty Work. Фотогалерею клиент может пополнять самостоятельно.
Каталог с работами – простой и удобный. Во-первых, по сравнению с прошлой версией у нас есть появилась удобное разделение кейсов на три направления: рекламные ролики, клипы и фильмы (раньше был единый каталог). Во-вторых, без какого-либо наведения на работу и появления текста при ховере мы сразу видим, что это за компания/артист/песни и т.д. (ранее название и компанию, для которой делался ролик, можно было узнать лишь при выполнении лишнего действия). В-третьих, демонстрация превью, а именно самых ярких моментов из видеороликов, пришла на замену статичным скриншотам. Каталог с работами на примере рекламных роликов:
Скорость считывания информации у пользователей увеличится – им не придется выполнять лишние действия в виде наведения на карточку с видео, чтобы узнать название; а также лишний раз включать ролик, чтобы понять настроение, мотив и посыл работы, ведь у каждой теперь есть превью. Также были сделаны такие блоки как контактная информация, информация о трудоустройстве в компанию, клиенты компании и ее новости (последние выпущенные работы; автоматически подгружаются самые последние работы из каталога). Например, ниже скриншот блока с новостями. Автоматически подгружаются последние работы из общего каталога с кейсами
Сложности при создании сайта, с которыми мы столкнулись
Все было бы хорошо, если бы это не был наш первый заказ в нише видеопродакшена. На тот момент они правда были первыми, а после этого я очень часто работала с видеопродакшенами. Самая большая и сложная сложность – это огромное количество видеоматериала, который афигеть сколько весит. Как размещать на одной странице по 30 видео с превью, если каждый видеоролик весит по несколько ГБ? Мы не хотели оставлять скриншоты принципиально – это не про VFX, это не про обладаение формы над пространством. Нет. Расчет был как раз на то, что эти превью и перехватят все внимание пользователя.
Большая ошибка. Мы просто посмотрели по таймкодам какие моменты из роликов можно поставить на превью: сделали в панели администратора ячейку, чтобы в два клика можно было выставлять нужный промежуток времени. Итого, что получилось – ничего не грузит. Видео прогружается до момента с установленным таймкодом по 10-20 секунд. Чем дальше тот самый сочный момент из превью – тем дольше это все прогружалось. Пипец, подумали мы.Как решили? Наняли обычного монтажера, чтобы он сделал нам превью. Техническое задание простое – дали разрешение для превью (оно не превышало показатели в 600p, точно не вспомню), длительность не больше 10 секунд, выбираешь самые яркие моменты. В целом, все. Итого каждый кусочек видео весил в среднем не больше 10 Мб.
Также старались не размещать на одной странице большое количество видеороликов: на главной странице это реализовано как карусель из видео, а в каталоге у нас получилось достаточно большое скопление роликов, но разбитое на страницы (добавили пагинацию). Кстати, сами видео вытянуты из Vimeo: работы заказчика изначально хранились там. Заглядывая в мои будущие кейсы также советую Dropbox, если рассматриваете облачное хранилище для подобных сайтов.
Панель администратора делали на WordPress. Свои задачи в части обновления контента она выполняет по сей день хорошо. Достаточно просто знать как работает редактирование страницы Вконтакте, чтобы отредактировать страницу на сайте в нашей панели администратора. Вот как она выглядела изнутри (наши с разработчиком скриншоты во время работы):
Общие впечатления по сайту
Это не самая сильная работа, но хотелось начать цикл статей про разработанные мною сайты с каких-то интересных кейсов. Может с технической точки зрения они будут вам полезны. Например, в видеопродакшенах ждите много работы с видео – причем иногда неожиданной). Я буду дальше рассказывать про другие кейсы в нише видеопродакшена, там тоже будут свои нюансы: выбор CMS или другой подводный камушек.
Сайт до сих пор служит компании, они самостоятельно добавляют туда материалы, по SEO он нормально продвигается, так что всё гуд и свою задачу мы выполнили :)
✧ Типографика - важный элемент веб и графическом дизайне. Это по сути искусство, которое воплощает в себе не только способы оформления слов на странице, но и передачу определенных эмоций через шрифт и его расположение. Множество мелких деталей влияют на то, как мы воспринимаем текст: стиль, размер, даже угол наклона.
✧ Я отдельно уделяю время на изучение этого искусства, чтобы улучшить свои навыки, и обязательно буду делиться этим опытом в будущем. Но сейчас, хочу поделиться с вами интересными фактами о типографике, которые узнаю в процессе изучения.
✧ Вот некоторые из них:
1. Слово «типографика» (typography) имеет греческие корни: «typos» означает тип, а «graphia» означает «письмо».
3. Самой старой печатной книгой в мире является "Алмазная сутра" - буддийский текст, напечатанный в Китае в 868 году нашей эры с помощью ксилографии.
4. Первый печатный станок с подвижным шрифтом был изобретен Иоганном Гутенбергом в 1440 году, что произвело революцию в производстве книг и других письменных материалов.
5. Первый шрифт был создан Франческо Гриффо в 1495 году для использования в книге, напечатанной Альдусом Мануцием. Шрифт назывался Bembo и используется до сих пор.
6. Самым распространенным шрифтом в мире является Helvetica, созданная Максом Мидингером в 1957 году.
7. В типографике есть термины "вдова" и "сирота". Вдова - это одно слово, которое появляется само по себе в строке в конце абзаца. Сирота - это одно слово или короткая фраза, которая появляется сама по себе в начале новой колонки или страницы.
Эти термины используются для описания нежелательного визуального эффекта, когда одно слово или короткая фраза отделены от остального текста, что может нарушить поток чтения и создать несбалансированную компоновку.
Для своих нужд искал расширение для поиска и подсвечивания ключевых слов разными цветами и чтобы цвета не повторялись минимум 15-20 раз. Из того, что удалось найти было одно расширение, которое полностью соответствует этой цели, и так же я случайно наткнулся на это расширение, которое так же соответствует цели, но помимо этого предоставляет и другие очень мощные функции. Спустя некоторое время пользования им я бы сказал, что поиск и выделение слов - это лишь 5% от реального потенциала расширения. Поскольку подробных мануалов для тонкой настройки поисковых функций автор не приводит в ознакомительном видео и на сайте, то настроить расширение и все его функции полностью под себя не получилось, но из ознакомительной информации видно, что они офигенные. Хоть приложение переведено на английский, это все равно не помогает разобраться во всем, т.к. для некоторых из функций нужно знание javaScript, css, html. Кое в чем, конечно, удалось разобраться, но еще много остается загадкой.
Этот пост пишу в качетве благодарности автору расширения, пусть это будет рекламой хоть он и не узнает об этом. Не часто встречаются такие классные приложения, которые были бы бесплатными. Аналогичные расширения, которые я встречал платные все до единого. Можете задонатить автору или написать отзыв о приложении.
Возможно, кто-то уже пользуется им, дайте знать пожалуйста. Может быть кто-то знает где искать людей, которые бы взялись за перевод расширения на русский (на энтузиазме) или любую другую информацию, которая бы была полезна для перевода (я в курсе о переводчиках), дайте знать.
Пишу по просьбе подруги, она пополняет свое портфолио после курсов, да и реальная практика нужна, если кому-то кто торгует на ВБ или ОЗОН требуется инфографика карточек товаров она готова сделать за обратную связь и опыт работы.