История одного лендинга

    Здравствуйте, дорогие хабравчане! В этом посте я хочу рассказать о том, как и в какую цену я заказывал сайт у фрилансеров, в какие сроки я получил результат и что из этого сделал сам. Задача была создать “лендинг-магазин”: одностраничный сайт для двух товаров, с возможностью сразу же сделать заказ через полнофункциональную корзину.

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


    Техническое задание


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

    Я постарался составить максимально подробное ТЗ, разместив всю информацию в виде макета с примерным расположением элементов и комментариями, по какой логике что должно работать. Но даже с таким, достаточно подробным, на мой взгляд, описанием и фактически готовым прототипом, люди умудрялись задавать вопросы, ответы на которые мне казались очевидными. Отсюда вывод — чем детальнее и доступнее вы “разжевываете” то, что хотите донести, чем больше вы формализуете и четко описываете то, каким должен быть результат, тем меньше вопросов получите. Если у вас в голове проскальзывает мысль, что “это итак понятно” — нет, и еще раз нет! Не ленитесь и опишите этот момент, сделайте сноску или пояснение.

    Дизайн


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

    Всего мне поступило 61 предложение, среди которых было даже “скопировать любой лендинг и поменять в нем любые элементы (фон, картинки, текст, контакты и тд) за 24 часа”. Все предложения можно условно разбить на несколько ценовых категорий (плюс-минус):

    • От 1000 до 3000 — простовато, зачастую не очень профессионально, на мой вкус
    • От 4000 до 8000 — вполне удобоваримое качество, но не всегда стабильное. Большие портфолио, и, думаю, большинство заказчиков останутся довольны результатом.
    • От 9000 до 15000 — часто складывается впечатление слегка завышенной цены, но просматривая портфолио, все таки виден стабильный результат. Эта ценовая категория пользуется популярностью. В основном, лично мне не нравилась стилистика работ. А когда сомневаешься, в таких делах, риск не очень оправдан.
    • Категория 20 и выше — часто зависит от эго дизайнера. Много талантливых художников работает в этой категории — такие сайты впечатляют, но для моей задачи это было лишним. Может быть дополнена проработанным прототипом, что создает впечатление подхода к работе “с головой” и хоть как-то оправдывает дороговизну.

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

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

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

    Верстка


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

    Разместив заказ, я получил 20 предложений. Самым шокирующим было предложение за 19000 руб. На вопрос, что же я получу за такую цену, потенциальный подрядчик ответил: “Входит качественная верстка, чек-лист для проверки, описание логики работы корзины”.

    Было несколько предложений за 1500-2000 руб, потом несколько за 6000 руб и еще парочка 10000+ руб.

    Одно из предложений привлекло меня больше всего правильными уточняющими вопросами (я просил заранее предусмотреть картинки в разрешении x2, чтобы четко отображались на retina-дисплеях), и я предложил начать работу. Мы договорились на 3000 рублей. Первые результаты верстальщик предоставил уже через пару дней и сказал, что в связи с годовщиной свадьбы родителей слегка задерживается.

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

    Далее в течение трех недель я периодически пытался узнать, как у него дела, и еще раз предложил рассчитаться, но безуспешно. Под конец третьей недели верстальщик появился, написал “Сегодня постараюсь доделать” и опять пропал… После этого, я плюнул, скачал пофайлово готовую верстку, переделал JavaScript так, как мне было удобнее, и сделал backend.

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

    Backend


    Серверную часть я сделал сам за 1.5 дня. В принципе, я мог бы и эту часть заказать, но, боюсь, трудозатраты на ТЗ с описанием нюансов и моим видением желаемого результата, в купе с пожеланиями по качеству кода, были бы сопоставимы с ресурсами, которые заняла у меня собственная работа.

    Я использовал Slim Framework, подключив к нему несколько библиотек:

    • Illuminate Database (он же Eloquent — компонент Laravel) — для работы с базой
    • PHP dotenv — для конфигурации в разных окружениях
    • recaptcha — чтобы защититься от спама
    • PHPMailer — для отправки писем

    Код хранится в репозитории на Bitbucket, а работает на обычном виртуальном хостинге.

    Зачем это все?


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

    Если у вас есть идея, не откладывайте ее в долгий ящик, а пробуйте реализовать. Я еще год назад собирался приступить, но сделал это только сейчас. Старайтесь делегировать работу по-максимуму, чтобы заниматься именно проектом, а не нюансами реализации. Любую задумку можно воплотить в разумные сроки и суммы, даже если вы сильно загружены основной работой. А готовый результат всегда доставляет приятные эмоции!

    Update, поскольку много спрашивают:

    Сам лендинг — http://tadiran-air.ru
    Биржа — https://fl.ru

    Similar posts

    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 55

      +1
      Ссылку бы хоть дали на результат, заодно и проверили бы хостинг и backend на хаброэффект)

      Одно не понятно, зачем для лендинга тащить такой backend, есть вполне лёгкие, быстрые и неприхотливые вещи специально для лендингов. Мне Landing-CMS нравится (особенно то, что сейчас в dev ветке пока и готовится к релизу, много функций добавили удобных), кто-то другие вещи выбирает тоже без БД и готовых работать на любой версии PHP и слабом железе.

      Видел лендинги на Битриксе, Symfony и Laravel — таких уже в дурку пора забирать)
        +2
        Ходят слухи что нормальный хостинг на столько дешевый что разговор о слабом железе неактуален.
          +1
          Если честно, не хотел делать рекламный пост, поэтому ссылок не давал, отправлю вам личным сообщением.

          Для бэкенда у меня было несколько специфичных задач:
          1. Сохранение в базу и отправка на почту сообщения о заказе обратного звонка
          2. Сохранение заказа в базу и отправка писем. Плюс ко всему там прописана логика ценообразования.
          3. Применение промокода и хранение списка промокодов.

          Редкая CMS сможет из коробки реализовать именно то, что нужно, но зато придется с ней разбираться, как устроены шаблоны и т.п. Пришлось бы подстраиваться под нее, да и опыт с разными CMS у меня не очень большой. В данном случае реализация на Slim заняла реально очень мало времени — вывел шаблон, подключил через Composer нужные библиотеки и воспользовался ими. Пусть папка vendor и стала достаточно объемной, я бы не назвал получившееся решение тяжелым. Если бы я использовал Laravel, то да, это было бы «из пушки по воробьям».
            +1
            Ну да, в вашем случае наверное база оправдана…
              0
              Если не затруднит, мне бы не помешала ссылка на продукт
                0
                Отправил в лс.
                0
                Я бы вам предложил верстку и сразу WP Woocommerce с возможностью редактировать все на сайте, и перехват буфера из index.php для кеширования, чтобы WP работал как 1 статический файл, быстро и функционально )
              0
              Поделитесь, пожалуйста, ссылкой на фриланс-биржу, на который вы смогли быстро найти качественного дизайнера. Спасибо.
                0
                Ответил личным сообщением.
                  +1
                  И мне, пожалуйста, ссылку на фриланс-биржу и Ваш сайт.
                    +1

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

                      +1
                      Тоже мучаюсь подобной проблемой — у кого бы нормальный лендинг заказать
                      поделитесь ссылками
                      +1
                      а если это реклама, но не себя, а человека, которого я знаю и который делает хорошо, то всё равно моветон?
                      если вдруг нет, то вам вот сюда.
                      +2
                      Рынок IT очень сложный, автора шокировала верстка 19 000 рублей, так то, 19 000 рублей — это старт для нормального лендинга с поддержкой мобильной версии, если еще корзинку верстать, то еще пару тысяч можно накинуть.

                      Landing — около 300$
                      Landing + WP ACF fields ~ 500-600$
                      Landing + WP ACT + Woocommerce — 800-950$

                      — А в цену входит нормальный процесс производства, без пропадания, зависания и костылей.

                      Еще в цену входят хорошие люди )

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

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

                      — Очень интересно посмотреть на результат, может вопрос шоков и цен будет расскрыт, так то Landing можно сделать и за 30$

                      — По поводу сложности рынка. Мои партнеры из Индии получают 100$ в час за дизайн, я просто голову ломаю, как так можно продавать гениально! )
                        0
                        PS. К тому же цена формируется как у врача. Если запись 100%, то цену можно просто поднимать и не важно, что она выше рыночной, многие клиенты зарабтывают и им всеравно сколько стоит Landing -300 или 1000$, главное, чтобы сделали и не любили мозги.

                          0
                          Да, тут есть нюанс, что я любой этап работы имел возможность подхватить и доделать сам. Поэтому на некоторый риск шел сознательно. Если бы я сам не был специалистом в этой области, то конечно стремился бы нивелировать риск, искал бы не дешевле, а надежнее.
                            0
                            что же вы мобильного сделаете такого, что не сделает фрилансер за 4000 рублей?
                              0
                              Как минимум сделаю ) А все остальное просто слова, рынок большой и кроме «производства», есть масса других качеств не менее важных

                              Еще хочу напомнить, что в Вебе UI — сама сложная вещь, если мы не говорим про частные случаи просчета бизнес логик

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

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

                              — А еще самостоятельность, самостоятельный разработчик стоит больших денег, который реально решит вашу проблему, а не будет ждать от вас указаний.
                            +1
                            Интересная статья. Можно, пожалуйста, ссылку на Ваш сайт.
                              +1
                              Довольно недорого всё вышло!
                              Скиньте, пожалуйста, ссылку на ваш сайт и на биржу.
                              Также, интересно было бы посмотреть, как вы сформулировали задачу и ТЗ.
                              Спасибо!
                                0
                                Отправил вам в лс.
                                  +3
                                  Привет! Не надо в лс — пиши здесь, видишь — все спрашивают.
                                  Опять этот дурацкий страх быть обвиненным в рекламе
                                    0
                                    Да, добавил в конец поста.
                                0
                                Я для себя нашёл один гарантированно рабочий способ заказать дешёвый и качественный дизайн без геморроя — это конкурсы на фриланс-сайтах. На fl.ru, правда, сам конкурс стоит денег, но зато можно выбрать из пачки готовых работ ту, которая нравится, либо ничего не выбирать. Практика показывает, что из 2-3 десятков присланных работ всегда будут 2-3 качественных. На украинском freelancehunt.com вообще цены такие, что иногда диву даёшься, на что люди живут — топ 10 дизайнеров с реально хорошими работами охотно участвуют в конкурсах на лендинги за 10-15 тысяч рублей и делают их прекрасно.
                                  0

                                  Зачем нормальному фрилансеру участвовать в конкурсе?

                                    0
                                    Не знаю, но факт в том, что участвуют. :) Причем, участвуют топовые фрилансеры, с самыми высокими рейтингами и работами отличного качества.
                                      0
                                      Потому что есть фрилансеры — выходцы из нормальных фирм, но сами себя продавать не умеют. Даже новичок может себя работой на бирже под 100% забить, тоже не могу понять, какие могут быть конкурсы вообще, да ще за минимальный бюджет, было бы за что сражаться )
                                    0

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

                                      0
                                      Я в течение нескольких дней не спеша выбирал. Но просмотрел много портфолио, это факт.
                                      0
                                      С такими ценами на бирже даже на еду не заработаешь.
                                        0
                                        Специально зарегистрировался ради ссылки на сайт и ссылки на фриланс-биржу с дизайнерами. Если можно, еще и ТЗ скиньте по дизу…

                                        Заранее благодарен за ответ!!!
                                          0
                                          Добавил ссылки в конец поста. ТЗ отправил в лс.
                                          0
                                          Интересно что такое «лендинг-магазин»?
                                          Можно вас подробней указать требования. Что такое «полнофункциональная корзина»? Клиент, создав заказ отправляет вам письмо и это все? У вас есть список заказов с их статусами, если да то в каком виде? Есть ли проверка, что товар в наличии, может быть доставлен в данный регион, и подсчет цены доставки, есть ли оплата?
                                            0
                                            «Полнофункциональная корзина» — добавить товар в корзину, изменить количество, применить промокод. Заказ сохраняется в базу и отправляется письмо, на этом все.
                                              0
                                              Обычно на лендингах не делают корзины и оформления заказа, поэтому я назвал его так.
                                              0
                                              Скиньте, пожалуйста, ссылку на ваш сайт и на биржу. Спасибо!
                                                0
                                                Добавил в конец поста по многочисленным просьбам.
                                                0
                                                А вы уверены, что получили качественную верстку? Банальных спрайтов для иконок нет. У кнопки задана высота. Нет плавных переходов.
                                                  0
                                                  И горизонтальный скрол на мобильном.
                                                    0
                                                    Подскажите, с какого устройства вы смотрите? Я изначально просил делать ширину 480, то есть на устройствах с меньшим разрешением может быть скролл.
                                                      0
                                                      Традиционно считается, что на ширине 320px не должно быть горизонтального скролла.
                                                    0
                                                    Иконки сделаны спрайтами, просто разбиты на группы. Возможно вы имели в виду, что не «все в одном» — не вижу в этом проблемы. Насчет высоты у кнопки и плавных переходов не очень понял.
                                                      0
                                                      Смысл спрайтов как раз в том, чтобы все иконки собрать в 1 файл. Было бы больше блоков на лендинге, верстальщик делал бы больше файлов спрайтов?
                                                      Высота — у кнопки прописан height: 64px. Что будет если текст не будет помещаться в эти 64 пикселя? Конечно с такой высотой это малореально, но это уже не признак качества.
                                                        0
                                                        За ту цену, что заплатил автор на это можно смело закрыть глаза. Тем более если учесть, что ему делали не универсальное решение, а просто решали конкретно его задачу.
                                                    +1
                                                    я бы наверное для 2-х товаров всего обошлась покупкой шаблона за баксов так 50 и залила бы его на вордпресс, дешево и сердито, возможно у кого денег много тот конечно может и побаловать себя уникальной картинкой, но я не вижу смысла :)
                                                      0
                                                      Здравствуйте! Он получил себе сайт такой, какой хотел. Вы же будете ограничены предоставленным ассортиментом готовых шаблонов. У каждого свой выбор.
                                                        0
                                                        конечно, поэтому я и говорю, у кого есть лишние денежки может себе делать как хочет, но как совет для начинающих или не обладающих большим бюджетом на свои проекты, если купить шаблон, то хуже не будет. Но к этому делу тоже нужно подходить с умом и знать что проверять и что тебе нужно будет, иначе потом придется доделывать, что тоже затратно как минимум по времени
                                                      +1
                                                      А мне понравилось. Честно

                                                      Но не сам сайт (он тоже приятный), а посыл автора в последнем абзаце. Внушает уважение

                                                      В голове каждый день возникают хорошие мысли и варианты, но за рутиной по схеме работа-дом идеи забрасываются и затем забываются

                                                      Спасибо, что напомнили ) оказывается, так тоже можно ))
                                                        0
                                                        Поправьте меня, если я не прав. В коде встречаются через слово  , первый признак что сайт сверстан в редакторе. Так же это видно по id классам стиля. За дизайн по-моему, тоже слегка переплачено, возможно я сужу по результату верстки которая испортила дизайн макет.
                                                          0
                                                          Не очень понял, что встречается через слово? Какой редактор вы имеете в виду и в чем, на ваш взгляд, верстать правильно? Про id классы стиля тоже не совсем вас понимаю, можете привести пример правильно/не правильно?
                                                            0

                                                            Это плохая верстка. image Она как раз и стоит 3тр. Адаптивная верстка по фрилансу на сегодня от 7тр, за12/15тр уже классная.

                                                              0
                                                              А вы никогда не задумывались, зачем, собственно, нужны «nbsp» — они же неразрывные пробелы? В верстке они расставлены не просто так, а согласно типографическим правилам, так что тут большой плюс верстальщику.
                                                          0
                                                          Что-то адаптивная вёрстка совсем никакая. По крайней мере, если включать эмуляцию в консоле хрома. Или у вас там идёт прям определение мобильных устройств через серверную часть?
                                                            0
                                                            Нет, исключительно по разрешению экрана.
                                                              0
                                                              Прошу прощения. С мобильной вёрсткой всё в порядке. Это у меня вызывало проблемы одно из расширений в chrome.
                                                              Пожалуй, я б только скрипты из head перенёс в конец body и favicon увеличил.
                                                              А сайт вполне симпатичен.

                                                          Only users with full accounts can post comments. Log in, please.