Примеры сайтов на Wix (Викс)
Примеры сайтов на Wix (Викс) - uGuide.ru

Примеры сайтов на Wix (Викс)

    Дмитрий Луценко
  • Обновлено:
    2020-12-29
  • Просмотры:
    26k
  • Отзывы:
    0
  • Наша оценка:
    5.0
Wix – конструктор сайтов #1 во всем мире и один из лучших в рунете. Более 90 млн. пользователей выбрали его в качестве платформы для своего сайта. Но давайте опустим пафосность и детальнее посмотрим что же можно сделать в этом сервисе.

Итак, небольшая подборка сайтов, лендингов, интернет-магазинов и блогов созданных на Wix.

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

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

Примеры Wix-сайтов:

  1. Baikaleast.net – сайт туристического агентства.
  2. Lakshmi.studio – визитка салон красоты.
  3. Трафареты.рф – одностраничник компании.
  4. Teatr-surpriz.ru – лендинг кукольного театра.
  5. Vastrepast.ru – московский кейтеринг.
  6. Etoxorosho.ru – сайт производителя молока.
  7. Arhtour.com – туристический сайт.
  8. Kemstom.net – визитка стоматологической клиники.
  9. Krilatki.ru – чипирование кошек и собак.
  10. Mypaleta.ru – сайт фабрики мороженого.
  11. Kuztagis.ru – сайт архитектурного техникума.
  12. L-king.ru – магазин спортивного оборудования.
  13. Moylen.ru – магазин авторской одежды.
  14. Status-sk.ru – сайт управляющей компании.
  15. Press1.ru – сайт типографии.

1. Туры и экскурсии «Baikal East»

baikaleast.net logo

Туристическое агентство: baikaleast.net

Baikaleast.net – визитка туристического агентства, качественная. Дизайн привлекательный, тематический. Эффект параллакса в полноэкранном хедере смотрится отлично. Зимние пейзажи на чистом белом фоне, внятные заголовки, лаконичные и убедительные описания услуг, простое и понятное меню – всё на своих местах и легко воспринимается. Кнопка оставления заявки в хедере и ссылка на список услуг экономят время посетителям. По каждой услуге есть хорошо оформленная страница описания с ценами и аккуратной формой обратной связи.

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

2. Студия красоты «Lakshmi»

lakshmi.studio лого

Визитка салона красоты: Lakshmi.studio

Lakshmi.studio – визитка салона красоты, в котором делают аппаратный массаж, причёски, маникюр, педикюр, шугаринг наращивают волосы и оказывают прочие бьюти-услуги женщинам и мужчинам. Дизайн явно привлекательный, но не адаптивный. Основное внимание притягивает разнообразие используемых шрифтов: их много, но, при этом, всё отлично читается и не напрягает. Пастельные тона хорошо сочетаются с тематикой ухода за телом. Логотип в шапке смотрится органично, как и ссылки на Instagram, запись на приём и обилие телефонов для связи.

Форма записи на процедуры также скрывается за ярлыком, присутствующим на всех страницах. Она приятно выглядит, сделана в стиле остальной части сайта. Раздел с услугами оформлен хорошо, хотя шрифт мелковат. Зато цены удобно поданы на манер того, как это бывает в ресторанных меню. Наглядно. Текстов на сайте немного, они приятно читаются, но грешат чрезмерной сладостью. Структура визитки простейшая – всего 4 раздела меню, причём, ссылка на контакты ведёт не на отдельную страницу, а на анкор футера с картой проезда и прочими данными. Хорошая работа.

3. Сайт производителя трафаретов

трафареты.рф

Трафареты.рф: компания по созданию трафаретов

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

Заказы отправляются через форму. Удобно организована сортировка по коллекциям и типам трафаретов. Оригинально сделана заготовка текста для презентации различных рисунков. Она везде одинаковая, но интересно написана и подходит под все позиции с одинаковым успехом. Дизайн у страниц адаптивный. На главной интересно поданы виды трафаретов, где по меткам подсвечиваются подсказки на фотографиях. Этапы совершения заказа оформлены необычно – слишком много пустого пространства между словами. Зато внятно выглядит. Интересный одностраничник, качественный. Ничего лишнего и смотреть приятно.

4. Выездные спектакли «Сюрприз»

сайт teatr-surpriz.ru

Teatr-surpriz.ru: кукольный театр в Москве

Teatr-surpriz.ru – сайт московского кукольного театра для детей и родителей. Заказать спектакль можно с выездом в детский сад, к себе домой или как-то иначе. Дизайн не адаптивный, по стилистике соответствует театральной тематике. Странно выглядит ярлык с кнопкой доступа к меню и ссылками на контакты: перекрывает часть макета на всех экранах, оттягивает слишком много внимания на себя, да и не совсем подходит по оформлению. В остальном сайт выглядит неплохо. Чёрно-бело-синяя гамма с хорошо читаемыми, подходящими по стилю белыми шрифтами на чёрной подложке, яркими фотографиями и красно-зелёными акцентами вполне гармонично смотрится, не напрягает взгляд. Всё вместе это создаёт предпраздничное, уютное настроение предвкушения какой-то сказки. Удачное визуальное позиционирование для театра.

С технической точки зрения сайт несложный. Главная страница по структуре является лендингом с многочисленными триггерами призыва к заказу спектаклей, перечнем привлекательных тезисов и убедительных доводов в пользу театра. Тексты написаны хорошо, нормально оформлены. Описания постановок яркие, сопровождаются большим количеством фотографий и видеофрагментами. Посетитель получает чёткое представление о том, что его будет ожидать вживую на спектакле. Есть возможность покупки билетов онлайн, но этот процесс здесь весьма запутанный, идёт в комплекте с инструкцией. У Wix есть встроенные средства для приёма платежей онлайн, но разработчик предпочёл воспользоваться внешними сервисами, чем испортил эргономику процесса для клиентов. В остальном всё сделано хорошо, особенно по части контента.

5. Кейтеринг «Vast Repast»

vastrepast

Услуги кайтеринга: Vastrepast.ru

Vastrepast.ru – очень красивая визитка московского кейтеринга. Банкеты, фуршеты, кофе-брейки, бизнес-ланчи, организация мероприятий под ключ и прочее входит в перечень услуг заведения. Дизайн привлекательный, располагающий. Его хочется рассматривать, хотя с технической точки зрения он несложный. Много белого пустого пространства, красивые оттенки коричневого, симпатичная графика, внятные, удачно подобранные шрифты составляют приятную для глаза картину. Особую роль играют смачные фотографии с примерами сервировки стола и отдельных блюд. Галерея из Instagram на главной странице смотрится отлично – хороший пример, как с помощью простого виджета Wix и готовых фото из соцсети сделать красивую композицию. Пользователь может выбрать количество отображаемых фото самостоятельно.

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

6. Сайт-компании

Etoxorosho.ru

Сайт компании производителя молока: Etoxorosho.ru

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

За нестандартным дизайном прячется информативный сайт, на страницах которого можно найти новости компании, сведения для партнёров, рецепты, идеи для интерьеров и даже факты о смехе или первых фотографиях в мире. Последнее кажется чрезмерным, но почитать действительно интересно, к тому же такие тексты могут привести на сайт новую аудиторию из поисковых систем. Единственная проблема — плохая вёрстка: фотографии наезжают на текст. Но это можно быстро исправить в редакторе Wix.

7. Сайт турагентства

Arhtour.com

Сайт туристической компании, созданный в конструкторе Wix: Arhtour.com

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

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

8. Медицинский сайт

Kemstom.net

Сайт стоматологии на Wix: Kemstom.net

Kemstom.net – лендинг стоматологической клиники, который демонстрирует, что на WIx можно создать привлекательный проект, даже если очень сильно спешить. Привлекательные блоки, анимация — всё было бы отлично, если бы не ошибки в вёрстке, которых можно избежать, если потратить на настройку лендинга хотя бы пару часов.

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

9. Чипирование кошек и собак

Krilatki.ru – сайт-визитка специалиста по клеймированию и чипированию животных. Страница простейшая, оформлена как обычная бумажная визитка в один экран. Тем не менее, информации достаточно – указан тип услуг, локация их оказания, виды животных, с которыми работают, а также номер телефона и соцсети, по которым можно обращаться. Проще не придумаешь. Дизайн элементарный, такую страницу можно сделать минут за 10-15, едва познакомившись с Wix. Единственный момент – главное меню из одного пункта здесь лишнее, его бы лучше скрыть, хотя на эффективность визитной карточки это вряд ли повлияет. Пример простейшего варианта презентации услуг с помощью веб-сайта.

10. Производитель мороженого

Mypaleta.ru – сайт-визитка фабрики, выпускающей натуральное мороженое-смузи. Дизайн очень яркий, всё застелено сочными изображениями фруктов и готового продукта. Структура главной страницы довольно сложная, используется большое количество разнообразных эффектов, что, к сожалению, снижает скорость её загрузки – макет красивый, но тяжёлый. Оформление довольно смелое, поскольку находится на грани: используется большое количество цветов, элементов и резких переходов – такую структуру непросто реализовать гармонично. Тем не менее, ничего не раздражает, у разработчиков получится интересный проект. Глядя на это всё, просыпается желание съесть мороженого – а это главное.

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

11. Сайт архитектурного техникума

Kuztagis.ru – объёмный, довольно сложный структурно сайт образовательного учреждения. Навигация двухуровневая на несколько десятков страниц, вполне очевидная, эргономика хорошая. На сайте очень много контента в разнообразных форматах, в том числе, ссылок на документы во внешних облачных хранилищах, расписаний, боксов, галерей. Текстовые материалы грамотные, подробные. Реализована версия для слабовидящих с повышенной контрастностью и увеличенными шрифтами.

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

12. Магазин спортивного оборудования

L-king.ru – магазин спортивного инвентаря. Дизайн довольно спорный. Чёрная подложка непривлекательно контрастирует с белыми рамками фонов фотографий, прямоугольниками форм и кнопок. Смотрится это странно, в отличие от шрифтов – они крупные, хорошо выглядят на тёмном фоне. Вообще, многие элементы излишне крупные – к примеру, значки социалок, которые маячат на каждом экране. В десктопной версии ещё ничего, а при масштабировании в мобильную занимают слишком много места, перекрывая карточки товаров, иллюстрации и прочее. Навигация простая и понятная – в одноуровневом меню трудно запутаться, хотя выезжающее при наведении курсора подменю каталога имеет слишком большую задержку скрытия – вполовину меньшей бы хватило.

Сайт является смесью лендинга, блога и магазина. Часть страниц привязана к анкорным ссылкам на блоки главной. Честно говоря, это тоже выглядит странновато – лучше бы оформили разделы оптовиков и контактов отдельными статическими страницами. Некоторые фотографии в соседних фреймах отличаются по размеру, что бросается в глаза. Каталог товаров нормальный, но опять же – белые обложки на чёрном фоне смотрятся так себе. Поэтому большинство магазинов выполнены в светлых тонах – там таких проблем быть не может. Товарные карточки имеют понятную структуру, но тоже не впечатляют дизайном: шрифты удлинены и сужены, белые кнопки, нет заказа в 1 клик и т. д. Оправданием проекту служит возраст – площадка собрана ещё в 2012 году, тогда всё вышеописанное не так резало глаз. Далеко не лучший образец магазина на Wix, хотя, видимо, свои задачи он выполняет, раз до сих пор работает.

13. Магазин авторской одежды

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

В разделах каталога используется анимация при наведении – меняется титульное фото, так что можно сразу посмотреть товар в двух ракурсах, что есть удобно, наглядно. Страницы загружаются быстро – фотографии, как наиболее тяжёлые элементы, явно оптимизированы без значительной потери качества. Карточки товаров оформлены хорошо: куча дополнительных фотографий с возможностью увеличения, выбор цвета, количества и размера, покупка в 1 клик, артикул, инструкция к подбору размера и качественные описания. Статические страницы оформлены просто, лаконично выдают всю важную для покупателя информацию. В контактах нет соцсетей/мессенджеров, остальное на месте. Удачный пример среднего по объёму магазина на Wix.

14. Сайт управляющей компании

Status-sk.ru – визитка краснодарской управляющей компании. Дизайн весьма своеобразный, служит хорошим примером того, что на Wix, при желании, можно реализовать довольно широкий спектр подходов к оформлению макетов. Сочетание красного, серого и белого выглядит традиционно нарядно, броско. Боковое меню в треугольном фрейме постоянно находится на экране, перекрывая часть контента при скроллинге, что мешает при просмотре главной страницы в мобильной версии. На других страницах оно уступает место верхнему горизонтальному меню – выглядит не так ярко, зато практично.

Шрифты везде крупные, отлично читаются – явно идёт на широкую аудиторию жильцов многоквартирных домов, не у всех из которых хорошее зрение. Блоговый раздел «Новости» лишён записей, совсем – это плохо. Или убрать, или написать бы чего-нибудь туда. Информационный раздел оформлен необычно – пчелиными сотами, но есть проблема: кликабельная область у них маленькая, если не довести мышкой до нужного места, можно подумать, что за ними нет ссылок на категории материалов. То же касается и внутренних разделов – плитки большие, но кликабельны лишь на две трети площади. Есть личный кабинет для жильцов подконтрольных домов. В целом, сайт выглядит как авангардный эксперимент – броский, всё необходимое по части функциональности/информации есть, но эргономика страдает.

15. Сайт типографии

Press1.ru – многостраничный сайт-визитка типографии. Сайт старый, дизайну явно лет 10, если не больше, – сейчас делают по-другому. Тем не менее, ничего плохого в нём нет. Смотрится далеко не шикарно, но и не раздражает. Навигация понятная, единственный явный минус – в парочке страниц услуг отсутствует контент, они попросту пустые. Также зачем-то пункт «Контакты» дублируется единственным одноимённым подпунктом – мелкий, но всё же недочёт. Шапка узкая, содержит фирменный логотип и крупный номер телефона для заказа услуг.

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

Подводим итог

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

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

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

  • Автор: Дмитрий Луценко

no avatar