От Голливуда до веба | Кейс о разработке творческого сайта про фильм
Давно хотел разнообразить своё портфолио креативным проектом. И наконец-то воплотил данную идею в жизнь! В этой статье я расскажу о своём творческом сайте — лонгриде на тему фильма «Дьявол носит Prada». Поговорим о том, что значит работать над некоммерческим проектом, какие этапы необходимо пройти при создании сайта и какие цели я ставил перед проектом. Начнём!
Цели сайта
При разработке сайта я хотел решить несколько важных задач. Эти цели стали основными постулатами моего проекта и определили его направление. Отталкиваясь от них, я уже выбирал тему для сайта и выстраивал этапы для его разработки. Давайте разберёмся, что именно я хотел достичь:
- Поэкспериментировать с дизайном. В работе с заказчиками часто бывает сложно согласовать смелые дизайнерские решения. Но этот проект дал мне возможность выйти за рамки привычного и создать что-то креативное.
- Разработать мультиязычный сайт. Я хотел, чтобы сайт был доступен не только для русскоговорящих пользователей, но и для англоговорящей аудитории. Также это повысило мои навыки в разработке сайтов.
- Разнообразить портфолио. Ещё одна цель — это разработка креативного проекта, который может заинтересовать потенциального клиента. Человек с большей вероятностью обратится к разработчику сайтов, у которого есть проекты в нужной для него стилистике.
- С пользой провести время. В июле появилось свободное время, поэтому решил не терять его и разработать творческий проект. Получил не только удовольствие от процесса, но и ценный опыт, который поможет в будущих проектах.
Выбор темы
Теперь давайте перейдём к самому главному — выбору темы. Здесь я, недолго думая, понял, что сайт посвящу фильму. Но какому? На этом этапе я вспомнил рекомендацию про фильм — «Дьявол носит Prada», поэтому сразу принялся к его просмотру.
Если вы планируете работать над творческим проектом, но не знаете, какую тему выбрать, советую посмотреть различные подборки сайтов. Например, Made On Tilda. В ней собрано много личных проектов от веб-дизайнеров. Также рекомендую выбирать близкую для себя тему, которая действительно заинтересует. Это не тот случай, когда нужно работать по определенной тематике заказчика.
Первый этап — изучение фильма
При создании сайта с лонгридом о фильме мне было важно досконально изучить сюжет, героев, переломные моменты фильма и прочее. Для этого я начал просмотр фильма. Параллельно с этим создавал табличку в Figma, где описал главных героев и фиксировал сюжет. Для наглядности прикрепил изображение из Figma.
Второй этап — создание структуры сайта
После изучения фильма я принялся к разработке структуры сайта. Главной задачей было понятно и доступно для людей рассказать о сюжетной линии фильма. А также донести мысль, что, погружаясь с головой в работу, мы неизбежно жертвуем личной жизнью. Структура сайта состояла из следующих блоков:
- Первый экран. На нём нужно было задать общую стилистику сайта и рассказать пользователю, о чём данный проект.
- О фильме. В этом блоке я расположил ознакомительную информацию о фильме: о его бюджете, продолжительности, главных героях и так далее.
- Сюжетная линия. После вводной информации о фильме важно было погрузить пользователя в сюжет. Для этого я разбил текст на мелкие фрагменты и добавил для каждого из них иллюстрации из фильма. Также сделал анимацию с диалогами.
- Контакты. Последний заключающий блок — это информация обо мне и моих контактах. Думаю, здесь всё и так понятно, поэтому предлагаю двигаться дальше.
Третий этап — написание текста
Для написания текста я активно использовал новую модель Chat GPT-4o. Она помогла структурировать всю информацию. Конечно, не обошлось без правок, но нейросеть заметно сэкономила моё время. Также я разбил весь сайт на блоки, которые постепенно наполнял текстом. Для наглядности прикрепляю изображение с контентом для сайта.
Четвёртый этап — создание мудборда
После написания текста я принялся за разработку мудборда. Необходимо было определиться со стилистикой сайта, а также эмоциями, которые должен проект передать. Для этого я собрал большое количество вырезок из фильма, постеров и референсов с других сайтов. Результат этой работы я прикрепил в галерее с изображениями.
Пятый этап — разработка дизайна сайта
На этом этапе я принялся к работе над дизайн-макетом сайта. Перебирал различные шрифты и остановился на Roboto Condensed. Он отлично вписывался в общую стилистику сайта, особенно хорошо смотрелся на английской версии. Также экспериментировал с цветовой палитрой, но остановился на классическом чёрном и белом. В роли акцентного цвета использовал красный. Его грех было не использовать, работая над фильмом с названием «Дьявол носит Prada». А если говорить про композицию, то здесь нет ничего экстраординарного, ведь информация о фильме должна подаваться в логичной и понятной форме. Также заранее я продумал анимацию и эффекты при наведении. Это помогло более системно работать на этапе вёрстки.
Дизайн-макет сайта был разработан для мобильной, десктопной и планшетной версии. А весь результат вы можете посмотреть ниже.
Шестой этап — вёрстка на Tilda
Данный этап оказался самым долгим. Разработал адаптивы сайта для пользователей, чтобы им было удобно пользоваться. А больше всего времени заняла анимация диалогов. Подобного решения ранее я нигде не видел, поэтому разрабатывал анимацию с нуля, но результат меня порадовал. Помимо этого, была разработана вторая страница сайта, но с текстом на русском языке. Изначально я верстал сайт с английским контеном. С ним проще работать.
Также при разработке сайта я не создавал страницу 404, не настраивал SEO-оптимизацию, систему для сбора заявок, домен и системы по аналитике. Причина здесь одна: творческий проект размещён на сайте моей студии, только на отдельной странице, поэтому вся настройка уже сделана. А систему сбора заявок и подавно не нужно подключать — некоммерческий проект.
Это все этапы разработки моего нового проекта. Все цели поставленные перед ним я благополучно достиг. Надеюсь, мой опыт будет полезен вам и вдохновит на создание собственных креативных проектов!
Нужно разработать сайт? Смело обращайтесь ко мне. Я предлагаю комплексный подход к решению ваших задач и гарантирую качественный результат. В этом вы можете убедиться, изучив отзывы моих клиентов по ссылке на моём сайте студии