На фоне города – подборка дизайна сайтов

02.09.2013

Как показывает практика, качественная, цепляющая картинка – половина успешного дизайна. Фотобанк PressFoto постоянно следит за новыми тенденциями в рекламе, полиграфии и web-дизайне, чтобы предвосхищать спрос наших покупателей, и предлагать им актуальные и качественные изображения. В этом блоге мы делимся своими наблюдениями, и рассказываем о наиболее интересных, модных течениях, и событиях в сфере дизайна. Темой этой публикации стали примеры web-дизайна, где в качестве фона используются большие фотографии городов.

Фоновое изображение на главной странице указывает на то, чем занимается  компания, и на характер товара или услуги, который она предлагает. Сайты в этой подборке, так или иначе связаны с деятельностью направленной на людей, или на развитие их бизнеса, поэтому в их дизайне присутствует городская тематика. Почему именно города, спросите вы? Как правило, яркие, цепляющие взгляд, фотографии мегаполисов ассоциируются с цивилизацией, прогрессом и силой. Правильное использование таких изображений переводит эту ассоциацию на сайт, заставляя зрителя думать, что и компания обладает этими мощными характеристиками. Это простой и эффективный прием. Давайте посмотрим как он работает на практике:

1. Эксклюзивные итальянские туры. Благодаря качественным фотографиям сайт выглядит роскошно, и прямо заманивает посетить Италию.

City_background_collection_of_web_design-1

 

2. 9 Design Street ­– красивая панорамная фотография города, в сочетании с сочным логотипом и яркой кнопкой, на которую так и хочется нажать.

City_background_collection_of_web_design-2

 

3.  Fima – напряженный живой город, с контрастной линией дороги, которая символизирует технологичность и инженерный прогресс, гармонично сочетается с тонкой белой типографикой.

City_background_collection_of_web_design-3

 

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

City_background_collection_of_web_design-4

 

5. Sweet Leaf Tea – легкий и запоминающийся дизайн, где отлично сочетаются слегка размытый город на фоне которого много самобытной типографики.

City_background_collection_of_web_design-5

 

6. A.W.M. Web Agency – фоновое изображение на сайте меняется, показывая различные  сферы деятельности компании. Каждое изображение – виды города потрясающего качества.

City_background_collection_of_web_design-6

 

7. Cost of Living Index – сайт встречает посетителя, опять же, красивым видом города, но здесь это не просто картинка. При выборе какого-либо показателя (кофе, автомобиль, сигареты т.д.), отображается табличка их стоимости в разных городах мира, а фон меняется, в зависимости от того, какой город вы выбираете.

City_background_collection_of_web_design-7

 

8. Solidiance – привлекательный и информативный веб-сайт посвященный инновационному городу в Азии. Внутренние страницы построены на основе вертикального параллакса, и имеют кучу красивых городских фотографий.

City_background_collection_of_web_design-8

 

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

City_background_collection_of_web_design-9

 

10. Официальный сайт Бехеровки –  загадочная иллюстрация, которая заставляет зрителей окунуться в пропитанную традициями старую Чехию.

City_background_collection_of_web_design-10

 

11. Dakic Online LLCсайт представляет собой прямую противоположность предыдущему примеру: спокойных и мощный образ современного промышленного города с чистым голубым небом. Сочетание синего, оранжевого и белого цветов удачно дополняет картинку.

City_background_collection_of_web_design-11

 

12. The Space InBetween – изображения меняются при прокрутке вниз. Текст расположен на затемненных плашках, чтобы ничего не мешало удобной навигации.

City_background_collection_of_web_design-12

 

13. Future Bristol Low Carbon 2050 – иллюстрированный городской пейзаж разделен на две части: посетители могут голосовать за понравившуюся концепцию развития города.

City_background_collection_of_web_design-13

 

14. Starmatic – сайт продвигает полезные IOS приложения, связанные с фотографией. На главной странице размытое изображение оживленного центра города, который приятно дополняется скетчем слогана и узким слайдером iPhone.

City_background_collection_of_web_design-14

 

15. Cropp – онлайн магазин молодежной одежды в стиле гранж, с навигационной сеткой и тематическими фото улиц.

City_background_collection_of_web_design-15

 

16. Spade – красивый фон, демонстрирующий ночные огни мегаполиса. Дизайн выполнен в  трехцветной палитре, где умело смешиваются темно-серый, ярко-красный и сдержанный белый цвета.

City_background_collection_of_web_design-16

 

17. Dassel und Wagner – здесь нет явного изображения города, но используется фотография неотъемлемой составляющей любого мегаполиса – толпы, которая усиливает слоган «Мы создаем успешные цифровые продукты», заставляя думать, что в современном обществе без них никуда.

City_background_collection_of_web_design-17

 

18. Visit Bruges – интересная интерактивная анимация рассказывает какие достопримечательности в какое время лучше всего посещать.

City_background_collection_of_web_design-18

 

19. Сайт Antonio Errigo удачно дополняет навигацию и активные элементы слегка размытыми видами мегаполиса.

City_background_collection_of_web_design-19

 

20. O2 Tracks – дизайнер использует виды ночного города в качестве фона для слайдера, чтобы усилить ощущение городской тусовки.

City_background_collection_of_web_design-20

 

21. Startupflyer – красивый контраст между иллюстрацией (самолетик и облака) и фотографией.

City_background_collection_of_web_design-21

 

А теперь несколько примеров сайтов из Рунета:

22. Alexarts — портфолио графического дизайнера с привязкой к городскому пейзажу. Не самый удачный пример, но зато ощутимый контраст с видами зарубежных мегаполисов.

City_background_collection_of_web_design-22

 

23. Алабуга ­­– сайт особой экономической зоны использует в качестве фона фотографию промышленных построек, усиливающую ощущение успешного производства.

City_background_collection_of_web_design-23

 

24. Adproject – сайт российской рекламной компании с иллюстрированным и анимированным видом городской улицы: машинки едут, баннеры мигают. Кликнув на специальные точки можно приблизить участок улицы, даже зайти внутрь некоторых зданий, и посмотреть на примеры работ агентства.

City_background_collection_of_web_design-24

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

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

По мотивам материалов: www.designmodo.com

Также может понравиться