Всем вновь доброго времени суток. За последний месяц не было возможности написать что-либо, но сейчас появилось время, поэтому смог уделить время на создание новой статьи. Сегодня опишу наш первый успешный кейс по созданию сайта на заказ для компании по ремонтным работам и загородному строительству “СК Питер” (ссылка вот - https://skpiter-spb.ru/), а также поделюсь нашим новым логотипом и процессом его создания. Итак, вновь без лишних предисловий, к сути.
Не смог удержаться, пришлось продемонстрировать прямо сейчас
В прошлый раз мы остановились на том, что нам удалось достигнуть определенных договоренностей по оплате и объеме необходимых работ. Кстати ознакомиться с ней можете здесь (ссылка на прошлый пост). Скажем так, в плане оплаты мы остались довольны и не обделены, тем более уж для первого кейса.
Официальный договор об оказании услуг вновь разрабатывать не стали, аргументируя теми же причинами достаточно туманного результата, который может получиться. И, спойлер, это опять сыграло не в нашу пользу, но об этом дальше.
Но, несмотря на опасения, в этот раз лично у меня было больше уверенности в своих силах. Я уже несколько месяцев изучал различные источники по Тильде и знал достаточно информации о том, на что способен этот конструктор. Тем более, в плане функционала сайт должен был быть несложным, что вселяло дополнительное спокойствие, потому что вся работа сводилась к тому, чтобы просто сделать все визуально красиво.
Вот так выглядит первая страница нашего техзадания
На этот момент мы уже заполнили техзадание и думали только о том, чтобы сделать все приятным глазу. Ни о какой нормальной SEO-оптимизации, анализа конкурентов, сбора каких-то данных еще не велось и речи, да и сами заказчики не акцентировали внимание на том, чтобы их сайт хорошо искался в поисковиках. Просто чтобы был выполнен в деловом, но стильном оформлении с использованием основных цветов и визуального контента компании. А за продвижение они сами разберутся.
Вообще этот проект имел какие-то странные перспективы, потому что сам Вася (да-да, тот самый из прошлой статьи) сказал нам, что этот сайт будет небольшой заменой до тех пор, пока не появится большой корпоративный сайт, который сейчас разрабатывается где-то на стороне. В чем смысл его создания в таком случае осталось для нас загадкой, но мы не стали ничего возражать. Удивились, хмыкнули, да и пошли дальше, тем более раз люди нацелены потратить на нашу работу деньги.
Именно поэтому сами заказчики, то есть “СК Питер”, тоже оказались слегка странноватыми, но это объяснилось молодостью организации, которая открылась, на тот момент, лишь месяц назад. Поэтому в работе чувствовалась небольшая сумбурность, которая сыграла нам в плюс, потому что мы получили практически полную творческую свободу и вседозволенность.
На выполнение дали две недели, которых на подобную работу оказалось более чем достаточно, поэтому, оперативно составив план, мы приступили к работе.
Распределили задачи и постепенно выполняли все задуманное
Двигались мы не спеша и спокойно вырабатывали все, о чем договорились при составлении техзадания. Помимо самой Тильды в работе участвовали разные сервисы по конвертации изображений, поиску SVG иконок и плагин Нолим, который я неожиданно для себя нашел в Интернете. Также немного поработал в Figma для создания нескольких макетов, некоторые из которых так и не оказались в финальной версии проекта.
Весь сайт, как и писалось выше, должен был выполняться в основных цветах компании - желтом и черном. Вместо чисто черного я решил взять темно-серый, чтобы не было сильной нагруженности и для более спокойного восприятия информации. Также для десктопной версии добавил несколько анимаций для большей интерактивности.
Самой большой проблемой стал блок с разными видами ремонта.
На тот момент не смог найти решение по идеальному исполнению этих блоков
Сложная триггерная анимация на тот момент была для меня не самым очевидным элементом Тильды. Вернее я смотрел про нее, читал как ей пользоваться, но применять самому еще не приходилось. Поэтому, когда я попытался сделать этот блок по первоначальной задумке, где содержимое в виде названия, описания и ценника должны были меняться по нажатию на четыре кнопки, показывая информацию по определенному виду ремонта, то столкнулся с определенными проблемами.
Самая главная из них - это то, что во время сложной анимации за 100% прозрачности элемента берется его прозрачность на момент начала этой анимации. Т.е., если на момент начала анимации, например, по клику текст был с нулевой прозрачностью, то если во время анимации его сделать на 100% он не появится, потому что его 100% считаются как 0%, с которыми он начинал свое участие в триггерной анимации.
Этот факт хорошо потрепал мне нервы. До такого состояния, что я плюнул на все и сделал данную часть с помощью функции Нолима с исчезновением и появлением определенного блока по нажатию на кнопку.
По итогу просто сделал четыре разных блока на отдельные варианты ремонта, которые открываются и закрываются по нажатию
Только потом я узнал как это можно поменять. Как и всегда, все оказалось намного проще, чем можно было подумать. Нужно было просто на первом шаге анимации выставить ноль секунд и там поставить нулевую прозрачность. Таким образом, еще до начала самой анимации, когда страница только прогружается, элемент не видно, но теперь, при нажатии на триггер, ему можно ввести 100% прозрачность, потому что для анимации теперь 100% прозрачности - это та прозрачность, с которой начался первый шаг анимации (хоть он и нулевой), то есть полная прозрачность элемента, которую мы хотим видеть. Есть еще вариант с уведением нужного элемента далеко за пределы экрана, например на 10000px, и последующее перетаскивание этого элемента на нужное место на первом шаге, но это более муторно, чем представленное выше (да и вообще является костылем).
Надеюсь, смог объяснить достаточно понятно. Если все-таки мои способности учителя для вас такие себе, а узнать решение хотите, то можете ознакомиться с видео - https://www.youtube.com/watch?v=5Yq8C96K96M. Здесь наглядно представлен и объяснен этот процесс, как и в принципе основы триггерной анимации в Тильде.
Но вернемся обратно. На тот момент я попытался с этим разобраться, но так и не смог найти решение. Данная фича была лишь моей прихотью, поэтому ни у заказчика, ни у кого бы то ни было вопросов по этой части проекта не возникло, так что мы двинулись дальше.
Внутренний контент для сайта я сформировал достаточно бездарно, как я уже сейчас сам прекрасно понимаю, чуть-чуть изучив тему SEO. Но, в целом, двигался в правильном направлении, ознакомившись с несколькими сайтами-конкурентами из топа поиска и популярными запросами по теме из яндексовского Вордстата. После этого, слепил парочку текстов и внедрил их в сайт. Главный текст из второго блока нам прислал сам заказчик, поэтому его я просто поставил по их запросу.
Текст здесь был прислан заказчиком, который захотел видеть его здесь
Далее мы внедрили графический материал, присланный заказчиком, расставили все ссылки, внесли необходимые сведения, настроили первичное SEO и перешли к этапу выкладывания сайта непосредственно в сеть.
И да, еще сделали нудную адаптивность под каждый вид устройств, но здесь не было ничего сильно сложного и выделяющегося. Единственное, что в начале долго не мог подобрать нужный размер шрифта на мобильные устройства, но потом смог найти оптимальное решение. После настройки адаптивности под каждый вид устройств (мобильные и десктопные) мы отправляли проект на проверку Васе и самой компании, которые не вносили практически никаких изменений.
И тут дело подошло к выбору домена. Естественно, свободного домена связанного только с СК Питер уже не было, поэтому в качестве бесплатного домена от Тильды за покупку года подписки, которую оплатил заказчик мы выбрали stroim-piter. Название достаточно интересное и звучное, поэтому предложили именно его.
Но “СК Питер” настояли на участие названия компании в домене. Желание объяснимое, поэтому мы начали подбирать варианты и остановились на skpiter-spb, который удовлетворил клиента.
В итоге, в профиле тильды у компании теперь два домена
Далее мы отправили сайт на индексацию, где гугл долго жаловался на запрет индексации в robots.txt, с чего я тоже сильно напрягся в один момент, но потом все же смог проиндексировать сайт без проблем. Мы подключили Google Search Console, Google Analytics, Яндекс Метрики и Яндекс Вебмастер и провели там небольшие настройки.
После всего этого мы с гордостью представили результаты заказчику, который принял работы. Тут мы стали предлагать подписать акт приема-передачи, как сказал Андрюха, для собственной безопасности в будущем при возможных претензиях. Но клиент стал всячески увиливать от этого, из-за чего мы решили оставить это дело, тем более раз с самого начала не было и самого договора.
Неприятной историей также стало то, что нам задержали вторую часть оплаты после сдачи проекта. Мы уже даже начали думать о том, что можно сделать чтобы повлиять на компанию, предполагая, что нас хотят кинуть и снова проклиная себя за то, что не стали настаивать на подписании договора. Но деньги все же выплатили, поэтому никаких мер предпринимать не пришлось.
Вот, собственно, так и прошел наш первый официальный проект. На самом деле, в целом, воспоминания остались положительные. Все-таки первый проект и первые деньги за него - это всегда приятно. Саму работу оценивать пока не хочу, не прошло достаточно времени, чтобы я смог посмотреть на сделанное с какой-то более профессиональной стороны. Конечно есть осознание того, что наверняка для людей, которые уже давно в теме - это не более чем неуклюжая поделка новичка, но на данном этапе можно даже сказать, что есть гордость за этот проект, хотя бы за то, что мы смогли довести его до конца. Начало чего-то это всегда хорошо и вдохновляюще.
Но отойдем от этих фамильярностей. После сдачи проекта мы стали искать новые и подумывать о том, как бы превращать все это в серьезное дело, а не просто в “темку”. На карандаше по знакомствам у нас оказалось много проектов, но пока ни один из них так и не пришел к чему-то серьезному. Сейчас самое близкое состояние к проекту имеет кейс вновь с “СК Питер”, а именно с одним из их самых популярных направлений - работе с каменной кладкой.
Параллельно мы занимаемся организационными моментами. Проводим планы по ведению соцсетей, документации и процессом работы с клиентами. И вот, все эти мероприятия привели нас к осознанию того, что нам нужно определяться с названием и хотя бы разработать логотип с общим визуальным стилем для наших ресурсов.
Кстати подписывайтесь, ссылка будет внизу
Название выбрали исходя из внутренних размышлений и предпочтений, которые не поддаются никакому сакральному смыслу или осознанному объяснению - Silver Red Syndicate. Но в будущем хотим больше ориентироваться на сокращение SRS. Сейчас есть осознание проблем с авторским правом, но пытаемся решить для себя этот вопрос, о чем, скорее всего, напишу уже в следующих статьях.
Связались со знакомым дизайнером, с которым и начали работу. В начале мы подбирали варианты с выделением трех букв и их совмещением с полным названием, но быстро уперлись в те самые проблемы с авторскими правами, из-за которых вся работы могла бы пойти насмарку, если делать так, как нам хочется. Как всегда, мир оказался чуть более сложным и жестоким, чем кажется :)
Подобное решение у нас было фаворитным, но пришлось от него отказаться
Поэтому дизайнер посоветовал нам от простого названия с выделением букв перейти к варианту с использованием маскота, по которому если что потом будет проще доказывать свои права на пользование логотипом Мы начали перебирать разные варианты, в числе которых были и драконы, и солнце, и прочие банальные придумки. Но, в конечном итоге, решили остановиться на варианте с планетой и сопутствующей стилистике, которая выражалась в характерных дугах в виде орбит. После этого мы быстро получили последний на данный момент результат, который и решили взять в работу.
Мне такой вариант понравился, даже сокращение получилось прикрепить, но тут возможно еще придется что-то менять в угоду обстоятельствам. Помимо самого логотипа дизайнер разработал нам баннер в социальные сети и несколько других вариантов в наших основных цветах.
Пока что ищем возможность использования этого банера
Пока что это все, о чем я хотел написать в этой статье. Сейчас за последние полтора месяца произошло несколько событий, речь о которых пойдет уже в следующей части, которая, надеюсь, выйдет побыстрее чем эта. На данный момент мы работаем над двумя кейсами, которые также наверняка будут указаны в будущем, поэтому следите за нашим блогом, а я, пожалуй, отправлюсь работать.
А вы подписывайтесь на наш ВК. Сейчас начали его вести и планируем выкладывать в нем посты на различные тематики веб-разработки, SEO-продвижения и в целом интернет-маркетинга. Ссылка вот - https://vk.com/silverredsyndicate
