Привлекайте больше клиентов через простой и понятный
Вам нужен сайт, который выполнит 3 ключевых действия
Принесёт потенциальных клиентов
Понятно расскажет о товаре или услуге
Покажет премущества и отличит от конкурентов
Что полезно знать о создании сайтов
При наличии дизайн-макета есть два варианта, как превратить его в сайт: производить вёрстку на чистом коде или с помощью конструктора(CMS). Конструктор имеет ограничения и позволяет использовать только тот функционал, который в него заложен. Однако, создание сайта таким способом быстрее и проще, а следовательно дешевле. По этой причине популярность разных конструкторов только возрастает со временем, а их функционал постоянно расширяется позволяя реализовывать более сложные вещи. Сайт на чистом коде не имеет никаких технических ограничений, но его разработка дольше, сложнее и дороже.
Самый простой и наглядный способ оценить эффективность конструктора - посмотреть подборку сайтов, созданных с его помощью. Если говорить о Тильде, с которой я работаю, то подборку лучших сайтов на Тильде можно посмотреть тут:
https://tilda.cc/ru/madeontilda/
750 ₽/месяц - обслуживание сайта созданного на Тильде
Название для сайта (домен) можно приобрести бесплатно из тех, что предлагает Тильда. Все они заканчиваются на .tilda.ws и выглядят таким образом: https://названиесайта.tilda.ws/
Либо можно пойти классическим путем и арендовать любое название из доступных. Цена аренды доменного имя за первый год начинается от 200 рублей. Цена за последующие годы аренды около 3-5 тысяч рублей за год.
Даже по запросу активно используемого слова "ortodont" мы увидим, что все популярные имена заняты, однако имя ortodont.store можно приобрести всего за 250₽ в первый год аренды.
Самый простой и наглядный способ оценить эффективность конструктора - посмотреть подборку сайтов, созданных с его помощью. Если говорить о Тильде, с которой я работаю, то подборку лучших сайтов на Тильде можно посмотреть тут:
https://tilda.cc/ru/madeontilda/
750 ₽/месяц - обслуживание сайта созданного на Тильде
Название для сайта (домен) можно приобрести бесплатно из тех, что предлагает Тильда. Все они заканчиваются на .tilda.ws и выглядят таким образом: https://названиесайта.tilda.ws/
Либо можно пойти классическим путем и арендовать любое название из доступных. Цена аренды доменного имя за первый год начинается от 200 рублей. Цена за последующие годы аренды около 3-5 тысяч рублей за год.
Даже по запросу активно используемого слова "ortodont" мы увидим, что все популярные имена заняты, однако имя ortodont.store можно приобрести всего за 250₽ в первый год аренды.
Как самостоятельно выбрать конструктор для своего сайт? Для начала давайте узнаем, какие конструкторы в России самые популярные. Ищем "статистика cms в России" и находим, например, такое:
https://2ip.ru/analytics/top-tld/ru/
https://2ip.ru/analytics/top-tld/ru/
Возьмите топ-5 конструкторов и сравните стоимость ежемесячной подписки, гибкость функционала и регулярность обновлений. Таким образом у вас сформируется первоначальное понимание из чего выбирать.
Создание любого сайта можно разделить на 3 последовательных этапа:
Прототип
Начальная стадия, где создается смысловую структуру сайта. На нем решается какие мысли и в какой последовательности будет донесены до посетителя. Строим повествование таким образом, чтобы рассказать о продукте/услуге и ответить на все возникающие вопросы посетителя сайта.
Основа сайта - это текст, в котором содержится та информация, за которой пришел пользователь. Дизайн и оформление - дело второстепенное, как приправа к основному блюду. Поэтому на этапе прототипирования никак не затрагивается визуальная составляющая и прорабатываются только смыслы.
Прототип
Начальная стадия, где создается смысловую структуру сайта. На нем решается какие мысли и в какой последовательности будет донесены до посетителя. Строим повествование таким образом, чтобы рассказать о продукте/услуге и ответить на все возникающие вопросы посетителя сайта.
Основа сайта - это текст, в котором содержится та информация, за которой пришел пользователь. Дизайн и оформление - дело второстепенное, как приправа к основному блюду. Поэтому на этапе прототипирования никак не затрагивается визуальная составляющая и прорабатываются только смыслы.
В конца этапа прототипирования получается картинка, где прописан весь текст, понятна последовательность блоков, а так же функциональное наполнение сайта (где размещается кнопка, где карточка товара, а где корзина).
Поменять или добавить формулировку на этом этапе быстрее и проще, чем когда сайт уже создан и запущен. Поэтому текст в прототипе дорабатывается, пока не будет полностью устраивать.
Поменять или добавить формулировку на этом этапе быстрее и проще, чем когда сайт уже создан и запущен. Поэтому текст в прототипе дорабатывается, пока не будет полностью устраивать.
Дизайн
Для начала нужно изучить сайты конкурентов, чтобы посмотреть какой стиль подходит под выбранную тематику, а какой нет. Далее можно посмотреть сайты на любые другие тематики, чтобы найти то, что нравится именно вам. Много хороших примеров можно найти на https://tilda.ru/ru/madeontilda/
Выбрав один или несколько подходящих стилей я отрисую первые 2 блока, чтобы можно было сравнить их друг с другом и выбрать более подходящий.
Для начала нужно изучить сайты конкурентов, чтобы посмотреть какой стиль подходит под выбранную тематику, а какой нет. Далее можно посмотреть сайты на любые другие тематики, чтобы найти то, что нравится именно вам. Много хороших примеров можно найти на https://tilda.ru/ru/madeontilda/
Выбрав один или несколько подходящих стилей я отрисую первые 2 блока, чтобы можно было сравнить их друг с другом и выбрать более подходящий.
Когда мы нащупаем стиль, я ухожу делать дизайн до самого последнего блока и далее мы корректируем его до тех пор, пока результат нас не устроит.
После множества правок и поиска компромиссов мы получаем картинку компьютерной версии сайта с устраивающим дизайном. После утверждения я приступаю к отрисовке мобильной версии сайта, а так же версии для планшета. Всего будет отрисовано (и в дальнейшем сверстано) 3 адаптивные версии дизайна на основе компьютерной широкоформатной.
Имея на руках все дизайн-макеты в адаптиве, мы еще раз возвращаемся к смысловой составляющей нашего сайта и проверяем, не нужно ли что-то поменять. Если всё устраивает- утверждаем дизайн-макет и я перехожу к превращению картинки в работающий сайт. Для этого я буду использовать Тильду.
После множества правок и поиска компромиссов мы получаем картинку компьютерной версии сайта с устраивающим дизайном. После утверждения я приступаю к отрисовке мобильной версии сайта, а так же версии для планшета. Всего будет отрисовано (и в дальнейшем сверстано) 3 адаптивные версии дизайна на основе компьютерной широкоформатной.
Имея на руках все дизайн-макеты в адаптиве, мы еще раз возвращаемся к смысловой составляющей нашего сайта и проверяем, не нужно ли что-то поменять. Если всё устраивает- утверждаем дизайн-макет и я перехожу к превращению картинки в работающий сайт. Для этого я буду использовать Тильду.
Вёрстка
Этот этап называют по-разному, но смысл в том, чтобы наша картинка стала функционирующим сайтом. Хорошая новость в том, что вы как заказчик на этом этапе уже можете отдыхать, потому что от вас не требуется ничего, кроме терпения.
После того, как сайт будет свёрстан, его уже можно будет открыть по ссылке, понажимать кнопки и посмотреть как он будет вести себя на разных устройствах. Однако, какое-то время еще потребуется на то, чтобы исправить мелкие недочеты, которые обнаружатся только на этапе тестирования.
Этот этап называют по-разному, но смысл в том, чтобы наша картинка стала функционирующим сайтом. Хорошая новость в том, что вы как заказчик на этом этапе уже можете отдыхать, потому что от вас не требуется ничего, кроме терпения.
После того, как сайт будет свёрстан, его уже можно будет открыть по ссылке, понажимать кнопки и посмотреть как он будет вести себя на разных устройствах. Однако, какое-то время еще потребуется на то, чтобы исправить мелкие недочеты, которые обнаружатся только на этапе тестирования.
Полный цикл разработки сайта
Маркетинговый прототип
Современный дизайн
Вёрстка сайта на Тильде
Обо мне
Я работал дизайнером-оформителем торговых центров Metro, Ашан и Гиперглобус. Делал всю рекламную коммуникацию в торговом центре: придумывал, верстал макеты и печатал их на широкоформатном принтере. Затем размещал в торговом зале.
Работал с бумагой, пвх-пластиком, пенокартоном и виниловой пленкой. Сотрудничал с типографиями и закупал posm для магазина (рамки, ценникодержатели, крючки, меловые доски и т. д.)
Параллельно с работой я старался узнать больше о дизайне и веб-разработке. Информацию брал из разных мест: Moscow Digital Academy, Skillbox, Тильдошная, Андрей Бычков, Uprock. Из книг советую: Дизайн для недизайнеров, Пиши и сокращай, Не заставляйте меня думать.
Сейчас я занимаюсь полным циклом создания сайта — от продающего прототипа до дизайна и верстки на Тильде. В своей работе использую nocode решения от nolim и менее популярных авторов.
Большую часть времени при разработке я трачу на составление структуры сайта, чтобы каждый блок содержал действительно нужную информацию, а не клише «низкие цены, высокое качество, опытные сотрудники». Предпочитаю использовать преимущественно минималистичный стиль дизайна, чтобы акцентировать внимание посетителя на продающий текст.
Работал с бумагой, пвх-пластиком, пенокартоном и виниловой пленкой. Сотрудничал с типографиями и закупал posm для магазина (рамки, ценникодержатели, крючки, меловые доски и т. д.)
Параллельно с работой я старался узнать больше о дизайне и веб-разработке. Информацию брал из разных мест: Moscow Digital Academy, Skillbox, Тильдошная, Андрей Бычков, Uprock. Из книг советую: Дизайн для недизайнеров, Пиши и сокращай, Не заставляйте меня думать.
Сейчас я занимаюсь полным циклом создания сайта — от продающего прототипа до дизайна и верстки на Тильде. В своей работе использую nocode решения от nolim и менее популярных авторов.
Большую часть времени при разработке я трачу на составление структуры сайта, чтобы каждый блок содержал действительно нужную информацию, а не клише «низкие цены, высокое качество, опытные сотрудники». Предпочитаю использовать преимущественно минималистичный стиль дизайна, чтобы акцентировать внимание посетителя на продающий текст.
Реализованные проекты
