Примеры сайтов на Google Sites (Гугл Сайты)

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

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

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

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

1. Jivrus.com — сайт компании.
2. Restonent.com — медицинский сайт.
3. E-gamingexperts.com — сайт агентства.
4. Electricpcs.com — сайт маркетингового агентства.
5. Huegelpto.com — образовательный сайт.
6. K-france.co.uk — сайт окулистов.
7. Csemn.org — сайт сообщества.
8. Drpete.co.uk — бизнес-сайт.
9. Hotelflanders.com — сайт отеля.
10. Metda.org — сайт образовательной организации.
11. Профсоюз46.рф — сайт профсоюза преподавателей.
12. Вьюговей.рф — ассоциация скульпторов России.
13. Еморехи.рф — портал об орехах.
14. Пикселёк.рф — визитка типографии.
15. Medol-med.ru – сайт медицинского центра.

Jivrus Technologies — сайт компании

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

На самом деле, ничего сложного в оформлении страниц нет — они построены из многократно повторяющихся одинаковых блоков «картинка+текст», но работа выполнена на хорошем уровне. Каждая секция сопровождаются грамотным маркетинговым описанием, красные акценты добавляют структурности, визуально разделяют поток информации на смысловые блоки. Страниц около 10, все они оформлены качественно, есть даже простенький блог. Многие ссылки ведут на поддомен с дополнительными материалами — сайт имеет огромный масштаб по меркам Google Sites. За счёт качественной подачи контента проект выглядит богато по меркам платформы — практически эталон.

Reston ENT — медицинский сайт

Restonent.com — сайт-визитка американского медицинского центра. Оформлен в классических цветах ниши — сочетанием белого и синего цветов. Страницы имеют простейшую структуру — чередующиеся текстовые блоки и секции со ссылками. Единственный дизайнерский изыск, придающий целостность конструкции, — чередование цвета фона блоков с белого на синий. Шрифты тоже перекрашены под фон для комфортного чтения. Здесь много блоков, состоящих из перечней ссылок. Выглядит всё это аккуратно, но скучно — изображений очень мало, везде одни ссылки да текст. Иллюстрации смогли бы разбавить поток букв.

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

E-Gaming Experts — сайт агентства

E-gamingexperts.com — сайт-визитка компании, которая занимается консультированием разработчиков приложений азартных игр. Здесь можно получить консультации по оптимизации прибыльности букмекерских контор, лотерей, казино, покерных клубов и других электронных видов развлечений. Дизайн сайта простейший. Использование контрастного красно-зелёного сочетания в элементах и хедерных изображениях отлично передаёт суть игорного бизнеса — живость эмоций, зелёное полотно стола и т. д. Логотип соответствующий. Страницы адаптивные. Шрифт подобран удачно — он округлый, легко читается, размер в самый раз. Никаких других элементов персонализации дизайна нет. Кнопок соцсетей тоже, что наводит на мысли. Связь только через доменную почту.

На сайте всего 5 страниц, заполненных большим количеством текстового контента. Упор сделан на отзывы в прессе и статьи (что-то вроде блога). Форматирование других разделов выполнено колонками и списками — самыми простыми типами подачи текстового материала. Ни выделенных заголовков, ни таблиц, ни табов каких-нибудь — просто списки и текстовые абзацы. Хорошая демонстрация стоковых возможностей Google Sites. Именно так же просто собраны большинство сайтов на движке. Выглядят аккуратно, но простовато. Спасает контент — в основном, это качественно написанные статьи, намекающие на значимость сайта для своих владельцев, серьёзное отношение к нему. В остальном никаких изысков — рассматривать нечего.

PCS — сайт маркетингового агентства

Electricpcs.com — сайт американской компании по продвижению услуг и продуктов предприятий энергетической сферы. Дизайн сайта приятный, по уровню выше, чем в среднем бывает на этом движке. За счёт использования большого количества иконок, комбинаций различных типов шрифтов и цветовых акцентов, ярких изображений и чёткой структуры подачи информации сайт выглядит привлекательным. Даже контакты оформлены фотографиями ответственных лиц — на сайтах от Google такую роскошь редко встретишь. Есть отдельный раздел с условиями принятия на работу — требования, перспективы.

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

Huegel Eagles PTO — образовательный сайт

Huegelpto.com — сайт добровольной организации досуга и воспитания детей вне школы. То есть что-то вроде кружка — копают грядки, играют, продают печенье, собираются на мероприятия и т. д. Примечателен вертикальным боковым меню. В остальном ничего особенного — простые шапки заголовков страниц, белый фон, использование простейших блоков (картинка+текст) для иллюстрации вариантов активностей кружка. На странице волонтёров внизу есть форма от фирменного сервиса, а для расписания мероприятий добавили страницу Google-календаря.

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

K-France Opticians — сайт конторы окулистов

K-france.co.uk — сайт магазина оптики, совмещённого с диагностикой зрения. Врачи проверяют, потом выписывают рецепт для коррекции зрения, а вы покупаете очки либо линзы, в итоге. Местная медицинская практика. Сайт по дизайну весьма крутой, учитывая, на чём он создан. Тут уже нетипичный для платформы подход. Сразу видно — что-то делали через код. К примеру, простенький слайдер, блок отзывов, эффекты появления элементов и нестандартный формат для карты. Увы, ввиду преобразований, дизайн утратил адаптивность. Зато выглядит вполне хорошо — цвета необычные, но каким-то образом соответствуют содержимому.

Страниц около десятка, все они хорошо оформлены. Например, в разделе очков красиво выставлены представленные бренды — в графическом редакторе сделали иллюстрацию и вставили, смотрится отлично. Внизу кнопочки с эффектами — CSS3, чего тоже не может стандартный редактор Google Sites. В футере куча ссылок на материалы и разделы — смотрится солидно, всё ровненько выстроено и легко читается. Страница контактов вообще супер: пиктограммы, кнопочки, кастомная форма (не Google Form). Сразу видно, что над сайтом работали. Он простой, но далеко не примитивный, просто шедевр по меркам платформы.

CSE — сайт сообщества

Csemn.org — сайт образовательной организации, помогающей адаптироваться в новых языковых условиях детям и целым семьям. Изучают культуру, английский, китайский, пишут, читают, обсуждают, кушают — в общем, платный кружок по интересам. Наиболее интересная часть адаптивного дизайна — многоуровневое меню, способное сворачиваться в гамбургер. Страниц множество, сайт довольно сложный структурно. Оформление отличное, активно используются колонки для текста, фотографии, значки и прочее. Дизайн хоть не впечатляет, но и не отталкивает примитивностью. Сайт активно использует ресурсы сервисов Google — календарь, диск и т. д.

Это первый сайт в подборке, имеющий возможность поиска материалов. А почитать тут есть что, особенно в медиацентре — контента куча, он отлично подан и отформатирован. Настолько, насколько позволяет платформа. Внутри куча ссылок, ведущих на другие страницы и внешние ресурсы. Есть что-то вроде блога — по факту, это одна страница, в которой по цепочке с ручным датированием после заголовка расположены публикации. То есть выглядит как блог, но им не является. В целом, сайт впечатляет размахом. Наверное, один из самых крупных на Google Sites. Кто-то очень постарался — здесь такое непросто сделать.

DrPete — экспертные консультации для бизнеса

Drpete.co.uk — британский сайт-визитка компании, предоставляющей услуги консалтинга для двух дюжин ниш бизнеса. Проект мощный, количество страниц, задействованных в нём, гораздо больше того, что отражено в меню. Активно используются сервисы Google для отображения документов, статей блога, форм и прочего. Есть кастомные элементы вроде карусели брендов. В целом, дизайн серьёзный и симпатичный — почти такой же, какой можно получить в более продвинутом конструкторе с визуальным редактором. Хорошо смотрятся полоски заголовков под хедером, отделённые синей линией, — своя фишка, так сказать. Такой же акцент (синяя линия) использован в меню. Всё вместе хорошо смотрится.

Страницы построены, в основном из комбинация обычных абзацев с отформатированным текстом и колонок из изображений с заголовками и описаниями, содержащими ссылки. Выглядит это насыщенно, а за счёт ссылок — ещё и содержательно. На сайте куча текстового материала. Есть страница команды с фото, клиентов, контактов со сложной Google-формой подачи заявки и нечто вроде блога. Все блоки, колонки, картинки и прочее равномерно подогнаны, ничего не вылазит и не торчит. Ещё один образец отлично собранного проекта на Google Sites с минимальным вкраплением элементов кодом — почти всё собрано родными инструментами редактора.

Flanders hotel bruges — бронирование номеров

Hotelflanders.com — сайт бельгийского отеля Flanders, расположенного в Брюгге. Цель — привлечение туристов, реклама услуг и возможность предоставления бронирования номеров в онлайн-режиме. Всё это сайт может. Дизайн адаптивный, выглядит богато за счёт коричневой цветовой гаммы, красивых изображений, а также контрастного чередования тёмных и светлых блоков. Сайт задействует возможности движка по полной программе. Особенно впечатляет возможность 3D-путешествия по номерам и территории отеля при помощи средств Google Maps. Есть ссылки на социалки, обычная карта, нормально оформленный блок контактов и прочее в таком духе.

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

Metda — сайт образовательной организации

Metda.org — сайт американской некоммерческой организации, которая занимается консультациями по внедрению информационных технологий в учебные заведения. По сути, они рекламируют необходимость закупки оборудования, за ними стоят производители и поставщики. То есть мы имеем дело с сайтом-визиткой. Дизайн у неё адаптивный, самая яркая его часть — оранжевое выпадающее меню. Для контраста используется чередование областей разного цвета в текстовых материалах. Раздел «О нас» выполнен в виде вставки правового документа, загруженного с Google-диска. Скроллинг в окошке смотрится не очень, зато практично.

Контента на сайте немного, наиболее богато оформлен раздел с мероприятиями. Похоже, информацию в нём обновляют перед каждым ивентом — афиша своего рода. Что интересно, на карте главной страницы отображены маячки членов организации. Наведя на любой из них, можно почитать краткую информацию о человеке — имя, адрес и прочее. Более информативного раздела «Команда» трудно представить для сайта. В целом, проект выполнен просто, но со вкусом. Текста немного, всё по делу, а фишка с картой и командой вообще вне конкуренции.

Сайт профсоюза преподавателей

Профсоюз46.рф — серьёзный сайт, освещающий деятельность профсоюзной организации работников образования Курской области. Дизайн адаптивный, простой и ненавязчивый. Пастельные тона, внятные заголовки и шрифты публикаций, достаточное количество фотографий, есть поиск по материалам, которых здесь довольно много. Меню двухуровневое с большим объёмом вложенности – контента пруд пруди, от истории организации, мероприятий, новостей до профилактики, партнёрских организаций и перспектив развития. Это справочник, титульное онлайн-представительство, созданное в, казалось бы, простом конструкторе, но аккуратно и качественно.

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

Ассоциация скульпторов России

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

Портал об орехах

Еморехи.рф — объёмный, структурно сложный портал, полностью посвящённый всевозможным орехам и сухофруктам: статьи, обсуждения, объявления о продаже и всё такое. Удивительно, но люди умудряются создавать на Google Sites даже такое. Сайту лет 10, дизайн не адаптивный, понятно. Выглядит чисто, опрятно. Пестрят лишь красно-синие акценты рекламных заголовков. Структура серьёзная – обширное основное меню, сайдбар с полным перечнем ассортимента, куча статей в формате блога и миллион ссылок на внешние и внутренние страницы по теме.

Здесь реализована доска объявлений, причём, выглядит она неплохо несмотря на то, что последние публикации датируются 2015 годом. Есть блог на несколько сотен статей, который портят нерабочие кнопки социальных сетей и счётчики – пустые фреймы. В сайдбаре сделали рекламную ленту с яркими заголовками, в отдельном разделе можно посмотреть список магазинов с профильной продукцией. Это сайт-монстр по меркам движка, контента море и в структурном плане постарались. Пример того, что можно сделать, если выжать из движка все соки и подключить воображение. Браво!

Визитка типографии

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

Контента на сайте очень много и он, на удивление не только качественный, но и более-менее аккуратно форматирован – несложно воспринимается. Каждая страница, не считая шапки, содержит баннер с номером телефона типографии – пропустить сложно. Более того, раздел контактов оформлен богато – есть карта проезда, даже две и форма обратной связи. Сайт поддерживает регистрацию клиентов. Информация о вакансиях, доставке, ценах и оплате вынесена в отдельный раздел. Отличная визитка, единственное «но» — не для всех услуг есть примеры работ.

Сайт медицинского центра

Medol-med.ru — качественная визитка московского медицинского центра. Дизайн симпатичный, но не адаптивный. Немного мешает фон сайта из двух цветов, который сильно контрастирует с остальной цветовой гаммой, выглядит чужеродным. Шапка ярким красным цветом даёт телефоны и адрес, титульное изображение стандартное для этой тематики – голубой тон и врачи. Главное меню украшено эффектом смены цвета при наведении курсора и выглядит очень приятно, хоть и просто. Сайдбар содержит большое количество ссылок на описания услуг, аккуратно, лаконично оформленных.

Контент грамотный, хорошо форматирован, но есть пробелы в информативности. Например, в разделе со специалистами центра только профиль и ФИО – ничего особо не понятно, не помешали бы отдельные страницы по каждому, с фото и описанием квалификации. Эти данные указаны только для двоих из них – маловато. Разделы с лицензиями, ценами, акциями, вакансиями на месте, всё как положено. Отлично оформлена страница контактов – куча данных, красивая подача, карта. Очень подробно. Хороший сайт, органично выглядит.

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

Вы сами всё видели: иностранные разработчики умудряются создавать при помощи Google Sites весьма приличные проекты. Да, дизайн, как правило у них простой, разнообразия элементов нет. Они выезжают за счёт контента и его подачи. Комбинируя различные стили форматирования, симулируют дизайн блоговой ленты, подтягивают сторонние интеграции, используют много отредактированных в графических программах изображений (яркий пример — партнёры, бренды и т. д.), через код вставляют свои элементы и прочее выдумывают. Фантазия у них работает.

Очевидно, Google Sites на западе используют не только некоммерческие организации, но и вполне мощные компании, которые могут позволить себе создание сайта в платном конструкторе либо на CMS (движке), либо на ещё чём-нибудь. Вывод прост: они любят Google, доверяют его продуктам и внедряют их по максимуму в свои бизнес-процессы. У нас иначе: большинство предпочитает использовать конструктор со всеми необходимыми инструментами из коробки, чем фантазировать, как сделать галерею из 10 картинок с лайтбоксом и подписями либо добавить нормальный слайдер.

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

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

Источник: uguide.ru