36 свежих html5 и css3 сайтов для вашего вдохновления

Сайт-визитка компании VS лендинг и корпоративный сайт — в чем отличия?

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

Лендинг — это в основном посадочная страница под контекстную рекламу, на которой размещают всю нужную информацию и сразу. Визитка — одно- или многостраничник с разделами по нескольким темам, акцентирующим внимание на определенные факты, товары и проч.

По моему опыту, посадочные страницы работают более «агрессивно». Тут вы найдете и форму с активной кнопкой, и призывы к действиям (бесконечно маячит «купи! купи! купи! … ну пожааалуйста»), и красивые, яркие, цепляющие изображения. Цель лендинга — продать, и чем быстрее, тем лучше. Корпоративный же и сайт-визитка не позволяют себе такие бурные и кричащие методы продаж — призывы к действию встречаются один-два раза, да и то в очень вежливой и деликатной форме.

Помимо этого, сайт-визитка и лендинг продают товары и предлагают услуги в разных объемах: посадочные страницы хорошо срабатывают, когда они предлагают что-то ОДНО (тогда они и эффективны), тогда как сайт-визитка посвящается и может содержать информацию обо всех услугах компании сразу.

Ещё один важный момент: сайт-визитка, как правило, заключает в себе куда больше сведений о компании, чем лендинг. Кроме преимуществ и выгод, на такого рода сайте находится место и для повествования об истории компании, и для рассказа о компетентности сотрудников и т.д. Другими словами, сайт-визитка больше работает на репутацию и узнаваемость бренда, в то время, как посадочная страница обязана продавать, собирать лиды и приводить к прямой и быстрой прибыли. Лендинг — это прямой (в лоб!) инструмент продаж, сайт-визитка — вспомогательный.

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

Визитка попроще, без изысков. У такого ресурса простая навигация, не предусмотрены какие-либо дополнительные модули — максимум может стоять форма обратной связи. На корпоративном же сайте могут быть и разного рода калькуляторы, организован поиск по сайту, каталогу (если есть), новостные ленты и т. д. Корпоративный сайт обычно больше, подробнее и полнее, чем сайт-визитка.

От корпоративного сайта визитка отличается в первую очередь функционалом. Визитка попроще, без изысков. У такого ресурса простая навигация, не предусмотрены какие-либо дополнительные модули — максимум может стоять форма обратной связи. На корпоративном же сайте могут быть и разного рода калькуляторы, организован поиск по сайту, каталогу (если есть), новостные ленты и т. д. Корпоративный сайт обычно больше, подробнее и полнее, чем сайт-визитка.

В связи со всем вышенаписанным, я плавно подвожу вас к вопросу:


Посмотреть всё в одном месте

Если вам нужно посмотреть сразу и макеты, и иконки, и шрифты, но вы слишком цените свой work in progress, чтобы переключаться между сайтами, познакомьтесь с ресурсами ниже. Там есть всё, только поисковый запрос уточните.

  • Behance Pinterest. Самые большие склады графического добра в интернете: русском и зарубежном.
  • Revision. Ресурс с работами отечественных студий и дизайнеров.
  • LookWork. Сайт идентифицирует себя как «Visual RSS». И не врёт. Можно отслеживать интересующие темы, выбирая их в меню, или зарегистрироваться и сформировать персональную ленту.
  • Muzli. Агрегатор сайтов дизайнерской тематики. Активно пиарится за рубежом. Существует в формате расширения для Chrome и подсовывает подборку для вдохновения каждый раз, когда открываешь новую вкладку. Кого-то вдохновляет. Но, на мой взгляд, дико отвлекает от работы.

10 самых красивых сайтов в Мире

1) rainforest.arkivert.no

Этот сайт сделан в виде 3D панорамы, что позволяет его выделить среди аналогичных площадок схожей тематики. Мягкие цвета и не загроможденный дизайн заставляют как можно дольше задержаться на этих страницах.

2) www.gruny.net

Очень красивый блог на движке WordPress. Именно к такому красочному дизайну (шапке блога) должен стремиться каждый.

3) www.sensisoft.com

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

4) houseofborel.com

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

5) cpeople.ru

Креативное агентство, входящее в десятку лучших агентств России.

6) www.2advanced.com


Мне понравилась загрузка самого сайта, выполненная в виде процентов. Сам сайт посвящен гаджетам продукции Apple.

7) saizenmedia.com

Еще одно креативное агентство. Потрясающая детализированная графика.

8) www.gnosh.co.uk

Необычный кулинарный блог G’NOSH одного из ресторанов Великобритании.

9) www.macaronibros.com

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

10) quakequizsf.org

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

Популярные статьи

  • 13.9K
  • 11 мин.

Статья для сайта: рецепт приготовления и способы подачи.Часть 3. Как разместить статью на сайте Руководство по верстке для контент-менеджеров и владельцев сайтов. Профессиональным верстальщикам не читать. Пройдем все шаги по размещению подготовленной статьи на сайте: от создания новой страницы до закрепления прав на текст. Берите свой текст, заходите в админку сайта и … поехали!

  • 1 ноября 2018
  • Кейсы

  • 16.1K
  • 12 мин.

Статья для сайта: рецепт приготовления и способы подачи Часть 1. Как написать статью для сайта Понятная статья о том, как писать статьи. Минимум теории, только практика и примеры. Заполняйте сайт контентом самостоятельно.

  • 21 сентября 2018
  • Кейсы

Замените «мы» и «наш» на «вы» и «ваш»

Желая произвести впечатление на потенциальных клиентов, при создании текстов для сайта многие попадают в опасную ловушку самолюбования. «Мы лидеры в отрасли N…», «Наши преимущества включают…» и т. д. И таких примеров можно привести очень много.

Дело в том, что те, кто нуждается в ваших услугах, хотят, чтобы вы поняли именно их потребности и предложили решение. Поэтому сведите к минимуму упоминание «мы» и «наш», заменив их на «вы» и «ваш».


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

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

10 красивых сайтов Рунета

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

1) www.lapastafresca.ru

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

2) iberi.ru

Я бы назвал этот сайт компании IBERI одним из самых стильных.

3) dasoft.ru

Еще одна площадка известной коммерческой компании, где нет ничего лишнего.

4) www.derevo-lubvi.ru

Романтикам этот проект точно придется по душе.

5) kc-dvor.ru

Вот таким образом представлено агенство по подбору домашнего персонала в одном из городов России.


6) lozhkin.net

Здесь сразу становится понятно, что это сайт одного из дизайнеров в области логотипов, значков и других иллюстраций.

7) ladio.ru

Международная студия веб-дизайна.

8) kohana.kiev.ua

Украинский сайт по сдаче яхт в аренду.

9) www.hrasti.com

10) www.filin.vn.ua

Сайт в виде энциклопедии про животных с красочными картинками.

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

Сколько стоит сайт-визитка?

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

Стоит разработка сайта, поверьте, не так уж и дорого. Мы, например, даже запустили специальное антикризисное предложение, где лендинг (он же продающий одностраничный сайт) стоит 9 800, а сайт-визитка (размером 3-5 страниц) 18 000. При правильном маркетинге и корректной работе менеджеров затраты окупаются в среднем за 2-3 месяца.

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

Найти конкретный элемент

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

  • Dribbble. По праву затёртый до дыр ресурс — здесь гигабайты идей для иконок и микровзаимодействий. Самое сложное — найти среди них что-то полезное.
  • Motion UI. Субъективная выжимка из Dribbble — для тех, кто не хочет ворошить его завалы самостоятельно.
  • Codepen Codrops. Ресурсы, где хранятся уже готовые рабочие элементы: хоть сейчас вставляй на сайт. Находите что-то крутое, обыгрываете в своём дизайне и несёте нужный кусок кода верстальщику — профит.
  • Web Design Freebies. Подборка иконок, шрифтов, иногда проскакивают мокапы — золотая жила для мудборда. Больше не обновляется, так что пользуйтесь, пока не протухло.
  • Color Supplyyy App. Простое и приятное приложение для подбора цветовой гаммы.
  • Fonts Google. Шрифты, которые Google одобряет.
  • Uimovement. Коллекция няшных микровзаимодействий.


С этим читают