Разработка интернет-магазина

Создаём функциональные, красивые и удобные интернет-магазины, применяя современные технологии и тенденции в web-дизайне.

Возможности и услуги

При разработке качественного интернет-решения, мы руководствуемся нашим главным принципом: “Дизайн — это не то, как это выглядит, а то как это работает”. Именно поэтому мы усердно думаем над деталями, из которых складывается мощный, удобный и красивый конечный продукт.

Классный дизайн

Стильный, уникальный и современный дизайн, который никого не оставит равнодушным

Мощная CMS

Удобная и простая система управления, обладающая большими возможностями

Никаких ограничений

Нет никаких ограничений на кол-во товаров, категорий, страниц

Импорт и экспорт товаров

Загружайте и выгружайте товары без труда в любимом формате Excel

Удобная навигация

Удобство в использовании на всех устройствах, благодаря адаптивному дизайну

Запуск за 45 дней

Магазин будет готов к работе за 45 дней (минимальное кол-во дней необходимое для разработки)

Бесплатная поддержка

Бесплатная техническая поддержка в течение 3-х месяцев после запуска

Домен и хостинг

Домен и хостинг на 1 год, а также SSL-сертификат

Руководство пользователя

Мы все вам раскажем и покажем, причём бесплатно

Внедряемые системы управления

Среди CMS (система управления сайтом) мы используем SimplaCMS и OpenCart. Они зарекомендовали себя как надёжные, удобные и простые в управлении системы. Если SimplaCMS — коммерческая, то OpenCart бесплатная, а благодаря модулям и доработкам для обеих систем — можно сделать действительно мощное решение на каждой из них.

Среди ключевых особенностей SimplaCMS: синхронизация с 1С уже встроена в систему, очень простая панель администратора, множество модулей оплаты и доставки. OpenCart — более функциональная система, которая по-умолчанию имеет бонусную систему, различные модули (слайдер изображений, управление баннерами, партнёрская программа, настройки регионов доставки, мультиязычность и многие другие полезные дополнения).

Ознакомиться с демо-версиями вы можете на официальных сайтах SimplaCMS и OpenCart.

Примеры работ

Kngaroo & Partners

Интернет-магазин Kngaroo & Partners основан в 2015 году (до 2017 года Royal Box). За столь небольшое время существования была проделана огромная работа по развитию, расширению ассортимента и географии доставки, а также в обслуживании покупателей.

Kngaroo & Partners является частью проекта «Kngaroo», в который входят такие услуги как web-разработка и доставка цветов в шляпных коробках. Уже в 2018 году значительно улучшилось присутствие магазина в интернете, был значительно изменён дизайн сайта, что повлияло на удобство навигации, расширился ассортимент, доставка осуществляется не только по России, но и в Казахстан и в Республику Беларусь.

Подчеркивание элементов на CSS

Давно хотелось поделиться своим опытом в вёрстке с другими специалистами и сегодня решили опубликовать свой первый пост о небольшой «фишке»: подчеркивание элементов на CSS. Многие из нас видели такой эффект, как появление полосы под каким-либо элементом. Причем полоса плавно появляется либо от края, либо от центра и подчеркивает весь элемент.

Хотим заметить, что это не значение border в CSS, а несколько другое значение, при использовании которого не потребуется использование скриптов или flash. Итак, давайте начнем.

Варианты подчёркивания

На самом деле, вариантов может быть множество – всё зависит от вашей фантазии. Мы вам покажем три разных варианта: появление полосы слева, от центра и справа.

Пример 1: подчёркивание слева

HTML

Для начала давайте создадим элемент. Например, тег a, который является ссылкой.

<a href="#">текст ссылки</a>

CSS

Обычно подчеркивание определяется значением text-decoration, но анимация в этом случае не будет работать. В данном случае мы его опустим и присвоим псевдоэлемент :before, с помощью которого мы и сделаем анимированное появление подчёркивания.

a {
    display: inline-block;
    position: relative;
    text-decoration: none;
}

Данному элементу мы задали блочное обтекание, что не позволит подчёркиванию выйти за пределы границ элемента и позволит разместить тег в любом месте внутри какого-либо блока. Далее перейдём к псевдоэлементу :before.

a:before {
    display: block;
    position: absolute;
    content: "";
    height: 2px;
    width: 0;
    background: #ec4444;
    transition: width 0.3s ease-in-out;
    left: 0;
    bottom: 0;
}

Мы задали абсолютное позиционирование псевдоэлементу для того, чтобы подчёркивание было внутри тега и не выходило за его пределы. Высота полосы будет составлять 2 пиксела, длина будет равна 0, цвет красный, а значение transition отвечает за анимацию. Теперь остается добавить эффект при наведении.

a:hover:before {
    width: 40%;
}

Таким образом мы задали значение длины в 40% от всей длины элемента. По аналогии расскажу и про другие примеры, где мы будем использовать еще один псевдоэлемент.

Пример 2: подчёркивание от центра

HTML

Оставим тот же тег.

<a href="#">текст ссылки</a>

CSS

a {
    display: inline-block;
    position: relative;
    text-decoration: none;
}
a:before {
    display: block;
    position: absolute;
    content: "";
    height: 2px;
    width: 0;
    background: #ec4444;
    transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
    left: 50%;
    bottom: 0;
}
a:after {
    display: block;
    position: absolute;
    content: "";
    height: 2px;
    width: 0;
    background-color: #ec4444;
    transition: width 0.3s ease-in-out;
    left: 50%;
    bottom: 0;
}

Здесь мы добавили псевдоэлемент :after, указали позиционирование слева 50% и добавили анимацию для того, чтобы появление было плавным. Данное значение размещает полосы строго по середине.

a:hover:before {
    width: 50%;
    left: 0;
}
a:hover:after {
    width: 50%;
}

При наведении нам нужно, чтобы подчеркивание шло от центра к краям элемента. Таким образом, пвседоэлементу :before мы задали позиционирование слева равным 0, что сделает появление подчёркивания к левому краю.

Пример 3: подчёркивание справа

HTML

<a href="#">текст ссылки</a>

CSS

a {
    display: inline-block;
    position: relative;
    text-decoration: none;
}
a:after {
    display: block;
    position: absolute;
    content: "";
    height: 2px;
    width: 0;
    background: #ec4444;
    transition: width 0.3s ease-in-out;
    right: 0;
    bottom: 0;
}
a:hover:after {
    width: 40%;
}

Таким образом, мы получили появление подчёркивания справа.

Что такое интернет-магазин?

Число пользователей в интернет с каждым днем становится всё больше и больше. Каждый ищет способ заработка в сети, желательно не затратный и быстроокупаемый. Один из таких видов – это интернет-магазины, хоть и в нашей стране это довольно новый вид продажи товаров.

Большую популярность интернет-магазины получили в США и Европе. Это магазины, которые начинали свои продажи через каталоги. Чтобы оптимизировать расходы постепенно компании начали переходить в интернет, где охват аудитории гораздо больше, да и цены можно снижать, т.к. нет необходимости в печати каталогов, что снижает расходы.

Что такое интернет-магазин?

Интернет-магазин – это виртуальная витрина, где покупатель также сможет выбрать товар и купить его, не выходя из дома. Основными отличиями от обычного магазина являются:

  • Не используется реальная торговая площадь в следствие чего нет необходимости платить за аренду;
  • Не нужно нанимать продавцов;
  • Нет необходимости покупать стеллажи, витрины;
  • Нет операционных расходов (платежи за услуги, зарплаты, печатная продукция и т.д.).

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

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

Сколько стоит создать интернет-магазин?

Стоимость создания хорошего магазина зависит от выбора CMS, от студии, которая его будет разрабатывать, и начинается она, в среднем, от 40 000 руб. Может показаться, что это много, но нет. Это вполне адекватная цена для хорошего магазина. Также не стоит забывать и о поддержке магазина, продвижении, налогах, т.к. это определенная статья расходов ежемесячно.

Чтобы открыть магазин экономно, вы можете воспользоваться агреторами, такими как Insales, Shopify. Вы будете только платить за аренду магазина, что на начальном этапе скажется на расходах. Но и есть минусы в таких системах. Главный из них – это ограниченный функционал. У вас не будет таких возможностей, если бы это был ваш собственный магазин.

Кроме того, очень популярны шаблоны. Вы можете установить бесплатную систему управления, например, OpenCart, Presta Shop, WordPress с расширением Woocommerce, Joomla с VirtueMart. Установить шаблон и начать торговать. На мой взгляд, это самый дешёвый вариант, но более трудоёмкий, т.к. делать вам придется все по большей части самим.

Насколько выгодно покупать в интернет-магазинах?

Многие думают, что если интернет-магазин, значит цены должны быть очень низкими, сравнимы с duty-free. Это миф, т.к. при покупке онлайн, магазин должен выписывать все документы, такие как: счета-фактуры, товарные накладные, гарантийный талоны и т.д. Тогда как в обычной рознице такие документы выдаются по запросу покупателя. Интернет-магазин, также как и розничный, уплачивает налоги и НДС, но стоимость при этом все равно остаётся ниже. Почему? Ответ довольно прост:

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

Это одни из основных причин, почему в интернет-магазине стоимость товара, обычно, ниже.

Способы оплаты в интернет-магазине

Выделим 3 основных способа оплаты товаров: оплата онлайн, оплата при получении, наложенный платёж. Об этих методах подробнее ниже.

Оплата онлайн

Чтобы ваш интернет-магазин смог принимать оплату, как говорится, «не отходя от кассы», вам необходимо подключить системы онлайн платежей. Вы можете самостоятельно подключить их, например, у банков есть API для подключения к интернет-магазину, приобрести модули платежных систем или заключить договор с одной из платежных систем, где есть множество способов оплаты (банковские карты, электронные деньги, терминалы, электронные кошельки и т.д.).

Рекомендуем заключать договор с платежной системой, т.к. вам не надо будет заботиться о способах оплаты, следить за обновлениями модулей или API и т.д. Да, комиссия за приём денежных средств имеется и взимается она с продавца. Это правильно, т.к. покупатель должен купить товар по стоимости, которую он видит в карточке товара. Одной из самых популярных платежных систем является Robokassa. Тарифы приемлемые и зависят от кол-ва заказов, что может значительно снизить процент комиссии.

Оплата при получении

Самый популярный тип оплаты заказа, т.к. здесь риски сведены к нулю. Покупатель сможет осмотреть содержимое заказа, проверить работоспособность и целостность товара или примерить его (если это одежда или обувь) и после этого принять решение о его покупке. Но сейчас всё больше людей предпочитают оплату онлайн, т.к. не надо бегать по банкоматам и снимать деньги.

Наложенный платеж

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

Способы доставки в интернет-магазине

Здесь особо заострять внимания нет смысла. Причина этому – множество служб доставки. Я лишь выделю несколько типов: курьерская доставка, доставка почтой, транспортными компаниями.

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

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

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

Вывод

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

Создание сайта: с чего начать

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

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

Идея и концепция сайта

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

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

Название сайта

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

Структура сайта

Отлично. Вы определились с названием, идеей и концепцией. Теперь самое время создать структуру или скелет сайта. Считаем, что на сайте должны обязательно присутствовать разделы «О компании» или «О нас», «Новости» (или «Блог»), «Контактная информация». Конечно, не стоит забывать и о ваших разделах, например, «Услуги».

К структуре тоже надо подходить с умом. Не нужно делать большие уровни вложенности, чтобы добраться до интересующей страницы. Также при продвижении сайта имеет значение URL. Для более успешной индексации рекомендуем использовать «человекопонятные» URL. Например, вместо site.com/page_1.html лучше использовать site.com/nazvanie-stranitsy.html. В последнем ссылка отображает название страницы.

Далее необходимо определиться с системой управления сайтом (CMS). В интернете их множество как платных, так и бесплатных. Чтобы подобрать удобную CMS для вас (с точки зрения редактирования содержимого сайта), попробуйте демо-версии и примите решение. Мы, например, своим клиентам устанавливали ImageCMS Corporate. Была очень удобная и функциональная система. В 2018 году мы начали внедрять WordPress, т.к. ImageCMS, к сожалению, прекратила поддержку и обновления для Corporate версии.

Выбор или подбор доменного имени (домена)

Домен – это ваш адрес в сети интернет. К его выбору нужно подходить с ответственностью, т.к. он регистрируется сроком, как минимум, на 1 год. Кроме того, если вы решите его поменять, то процесс продвижения сайта придется делать с нуля.

Касаемо самого адреса, то тут рекомендуем использовать запоминающиеся имена и легкие. Как говорится, чем проще, тем лучше. Конечно, желаемое имя может быть занято, но не стоить расстраиваться раньше времени. Если занята зона .RU, то вы можете зарегистрировать домен в зоне .COM, .ORG или .BIZ, к примеру.

Стоимость регистрации домена также разная. В данном случае рекомендуем воспользоваться поиском хостинг-провайдеров и проанализировать цены и после этого принимать решение у кого зарегистрировать домен. Я могу посоветовать среди российских регистраторов Reg.ru.

Дизайн сайта

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

Например, вы купили шаблон. Установили его на сайт или заказали установку, не имеет значения. Другой пользователь также купил другой шаблон и по «счастливой» случайности предлагает такие же услуги как и вы или использует для противозаконных целей. Соответственно посетитель может один раз зайти на ваш сайт, запомнит оформление и через недели 2 вспомнит вашу компанию, будет искать в интернете, случайно перейдет на другой сайт и увидит, что компания предлагает сомнительные услуги. Тогда клиент будет считать, что это ваша компания. Конечно, такие случаи не часты, но имеют место быть.

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

Если вы не хотите на начальном этапе вкладывать много средств в сайт, то предлагаем довольно бюджетный вариант сайта-визитки за 10 000 ₽ по системе «всё включено».

Контент сайта или его содержание

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

Другой способ – это писать тексты самостоятельно. Да, это займёт время, но не ленитесь. Такие тексты гораздо интереснее читать.

Третий способ – воспользоваться услугами копирайтеров. Они вам напишут текст согласно вашим требованиям и пожеланиям. Средняя стоимость написания текста 1500 руб. Но тексты пишутся, исходя из кол-ва символов. Например, 1000 знаков без пробелов может стоить и 200 руб., и 300 руб., и 600 руб. Все зависит от опыта и профессионализма копирайтера.

Вывод

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

Про адаптивный дизайн

Ни для кого уже не новшество, что ежедневно количество пользователей мобильными устройствами увеличивается. Если взглянуть на окружающее нас общество, то мы увидим, что в каждом кафе или торговом центре есть Wi-Fi, где сидит множество людей в интернете с телефона или планшета. Благодаря чему многие разработчики и дизайнеры сайтов внедряют в свои проекты адаптивный дизайн или responsive web-design.

Что же такое адаптивный дизайн?

Адаптивный, а если дословно перевести, то отзывчивый дизайн – дизайн сайта, адаптированный под разные устройства, причем сайт располагается на одном домене без переадресации на субдомен, типа m.site.com. Структура сайта меняется для каждого устройства, точнее ее порядок отображения.

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

Преимущества адаптивного дизайна

  • Единый стиль оформления всего сайта.
  • Содержимое сайта не урезается, как это делается именно в мобильных версиях.
  • Один домен для всех устройств.
  • Более удобное восприятие сайта на мобильных устройствах без необходимости увеличения экрана, чтобы прочитать или просмотреть контент.
  • Автоматическое изменение изображений под заданные параметры.
  • Современный подход к разработке проекта.
  • Охват большей аудитории.

Наша студия разрабатывает сайты с адаптивным дизайном. Обращайтесь, будем рады.

Сколько стоит сайт

Многие сталкивались с таким вопросом: «Сколько стоит разработка сайта?» Если спросить у Google или Яндекса, то можно увидеть огромное количество предложений, где стоимость будет варьироваться от 1000 руб. до бесконечности. Но почему такие разные цены? Почему у студий цена одна, а у фрилансеров цена совсем другая?

Некоторые представляют себе сайт с одной страницей, где размещена информация о компании + форма обратной связи. Это вымысел, таких сайтов довольно мало. Кроме таких, где информация размещена только об одном продукте (товаре, услуге), такие сайты называются Landing Page или Промосайтами. Но и сайтом это назвать нельзя, т.к. таких страниц может быть множество в рамках одного проекта. Обычно сайт состоит из нескольких разделов, где описываются подробно услуги компании, лента новостей или блог, контактные данные, услуги компании и т.д. Разделов может быть много – специфика той или иной компании.

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

  • Дизайнер;
  • Менеджера;
  • Разработчика;
  • Оплата счетов за услуги;
  • Комиссия (иначе говоря, прибыль).

Это наиболее важные статьи расходов, что сказывается и на стоимости конечного продукта. Конечно, есть студии, где стоимость создания сайта может быть и 1500 руб., и 1000 руб., но качество может быть не очень хорошим. Стоимость обуславливается тем, что разработка сайтов ставится на поток. Как правило, используют шаблонный дизайн, предлагают скудные возможности CMS, если её используют. Некоторые подобные сайты сложны в продвижении, т.к. не заточены для SEO, что вызывает трудности у специалистов по продвижению.

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

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