Невозможно отучить людей изучать самые ненужные предметы.
Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3
Надо знать обо всем понемножку, но все о немногом.
Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы
Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)
Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода
Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5
Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости
Справочник от А до Я
HTML, CSS, JavaScript
Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы
Помогли мы вам |
Давно что-то в блоге не публиковались красивые вдохновляющие материалы, все про шрифты да про шрифты. Сегодня эту ситуацию буду исправлять! А поскольку недавно работал над шаблоном для сайта отеля, то решил подобрать лучшие дизайны данной тематики. В итоге получилось найти около 25-ти разных работ, которыми сегодня с вами и поделюсь.
Если внимательно присмотреться к сайтам отелей, то можно увидеть в них общие черты и приемы. Причем я имею ввиду не только похожие пункты меню или повсеместное наличие формы бронирования. По стилистике и манере представления информации, использованию эффектов, графики и т.п. можно выделить некоторые тренды в данной сфере. Так что, если у вас стоит задача создания макета сайта отеля, будет полезно просмотреть подборку дизайнов ниже.
К сожалению, скриншоты не могут полностью передать функциональность и все дизайнерские решения в проектах, поэтому по каждому из них я написал пару слов о своих впечатлениях и наблюдениях. В любом случае советую переходить на приглянувшиеся работы и смотреть их в живую.
Joie De Vivre
Проект комплексный, поскольку содержит данные сразу о нескольких отелях. Разработчикам пришлось постараться над функциональностью дабы органично вместить всю информацию на одном сайте.
Dorchester Collection
Элегантный дизайн, который подчеркивают большие красивые фото и соответствующие по стилистике шрифты. Последние мне особенно нравятся – типографика идеальная.
Palms
Яркий современный дизайн. Он выполнен преимущественно в темных черно-серых тонах с использованием розово-фиолетовых цветов в разных элементах. Эффектно.
The Sacher Family
Такой себе типичный дизайн сайта отеля, который часто видим в шаблонах, исключением может быть разве что главная страница. Выглядит неплохо, качественные фотографии, хотя скрипты и некоторые CSS стили работают “коряво”.
Ritz Paris
В этом сайте сразу несколько интересных деталей: во-первых, музыка и видео в шапке, во-вторых, рисованные иллюстрации и простой одностраничный формат. Причем все это нисколько не преуменьшает статус отеля. Интересное решение.
Faena
Здесь определенно акцент делается на визуальную составляющую – картинки, фото, видео и все в том же духе. Дизайн имеет некий блочный “квадратный” формат, из-за которого информация воспринимается максимально легко. Практически каждая страница обладает своим оформлением будь то раздел апартаментов или “О нас” (где, кстати, найдете красивое видео).
The Peninsula
По дизайну это такой себе классический корпоративный сайт. Здесь нет каких-то специфических изысканных решений, все четко и понятно. Сложность для этого и подобных ему проектов в том, что нужно разместить достаточно много информации о целой сети отелей, но при этом не запутать пользователя (чтобы ему было удобно и понятно).
Atlantist
На сайте много графики и изображений, текст – лишь как дополнительный элемент. Выглядит красочно и ярко. Захотелось сразу на отдых:)
El Conquistador Resort
Проект выполнен в стиле одностраничных сайтов, он достаточно простой визуально, без изысков. Понравится тем, кто любит быстро находить нужную информацию на сайте. Плавающее меню с формой бронирования – хорошая идея.
Capo La Gala
Еще один одностраничный сайт, причем похожий на шаблоны, где при прокрутке страницы тексты появляются с эффектами. К счастью, эти переходы не раздражают, а наоборот делают проект “живеньким” и интересным. Меню спрятано по умолчанию и появляется лишь при клике на соответствующий элемент – нашим юзерам этот механизм явно не подойдет (т.к. они с ним не особо знакомы).
Sofitel
В принципе, неплохой сайт – в меру функциональный и стильный, хотя немного “отдает стариной”. Выпадающие меню, приемы, дизайн – все это напоминают сайты из 2010 года или около того. Еще и картинки на главной не лучшего качества.
Aria Hotel
Достаточно много сайтов отелей делаются простыми с акцентом на содержимое, а не креатив. Сложно сказать какой дизайн более привлекателен – одни пользователи любят получить максимум информации, другие “клюют” на красочные картинки – наверное, подход зависит от направленности отеля и его ценовой политики.
Room Guru
Кстати, о ценах. Среди всех сайтов отелей можно встретить проекты, позволяющие сравнивать разные предложения – например, RoomGuru. Это достаточно удобно для тех, кто любит много путешествовать и желает при этом немного сэкономить. Мощный инструмент поиска отелей собирает информацию с туристических сайтов (Booking.com, Expedia, HotelTravel, HolidayInn, Hotelopia) и выдает вам лучшие варианты.
Для таких проектов, понятное дело, ключевым моментом является информация об отелях: описание, условия проживания, рейтинг, цены, интерьер и т.п. Причем важно компактно подавать ее в результатах поиска.
На страницах городов можно разместить чуть больше данных, например, о и популярных местах того или иного города. Карточка (профиль) отеля обязательно должен содержит фотографии интерьера и чем больше, тем лучше. Вообще подобные сайты сейчас, весьма популярны.
Morgans Hotel Group
Как по мне, это один из самых стильных и современных сайтов отелей. Глядя на страницы проекта, можно понять в каком дизайне выполнен интерьер самого отеля. У разработчиков отлично получилось передать стилистику объекта.
The Hoxton
Еще один очень классный атмосферный дизайн, хоть и выполнен совсем в ином направлении нежели предыдущий. Выглядит модно, стильно и молодежно. Оригинальная навигация.
Forte Village Resort
Весьма красивый и функциональный дизайн. Разработчикам удалось поместить максимум фотографий, которые бы не только не отвлекали от основной информации, а и усиливали положительное впечатление от отеля.
Lotte New York Palace
Как по мне, это классический дизайн сайта отеля – все просто и доступно. Хорошо ощущается американская стилистика отеля, хотя, возможно, это все из-за фотографий интерьера.
Red Lion
В целом прикольный сайт – спокойный дизайн, читабельный текст не смотря на разнообразные фоновые текстуры. Есть несколько оригинальных эффектов, например, в меню и для заголовка страницы.
Hotel Terra Jackson Hole
На сайте очень много фотографий. По сути, они являются фоном практически для каждой страницы, а текст здесь как дополнение. Нельзя сказать, что эта графика напрягает, скорее наоборот дает понимание об интерьере отеля.
Cheval Blanc
Достаточно оригинальный дизайн для сайта отеля. Большие яркие фоновые фотографии, музыка и видео на главной, эффектная навигация – все это делает проект действительно интересным.
The George Hotel
Ближе к концу статьи начали попадаться действительно крутые и оригинальные дизайны. В этом сайте очень интересная навигация, причем все это выглядит максимально стильно, необычно и функционально. Один из лучших вариантов в подборке определенно.
BoziOko
Весь проект является своего рода видео туром по отелю – прокручивая колесо мышки, вы передвигаетесь по территории отеля и можете заглядывать в апартаменты или смотреть другую информацию. Эффект присутствия гарантирован. Классный сайт.
Bourg Tibourg
Дизайнеры очень постарались над графическим оформлением данного сайта – иллюстрации потрясающие. Однако функциональность при этом выглядит немного слабо, что немного портит итоговое впечатление.
Aldrovandi
Весь сайт находится “в одном экране”, то есть отсутствует вертикальная полоса прокрутки. Такое решение смотрится компактно, стильно, и никаких сложностей с навигацией при этом нет.
EME Catedral Hotel
Если честно, сайт достаточно простоват, хотя и смотрится неплохо. Нет здесь какой-то изюминки.
NoMad Hotel
Еще один проект, где основной акцент делается на графику – для каждой страницы своя фоновая иллюстрация. Выглядит стильно, однако непонятно почему для текста создан такой маленький блок. Странно использовать колесо прокрутки, когда на странице столько свободного места, хотя, возможно, создатели не хотели закрывать изображения.
Итого. Надеюсь подборка вам понравилась. Пару слов об основных тенденциях:
Ключевым моментом для меня лично является некая гармония в дизайне, когда идеально сочетаются графика, тексты и еще какие-то эффекты. Сайт может быть не перегруженным фотографиями, но стильным или наоборот состоять только из изображений, но не напрягать. Также интересно было увидеть какой-то новый подход, а не банальное шаблонное решение.
|
|