Мантра сегодняшнего бытия: «чем больше ты делишься, тем больше ты получаешь». Отчасти, именно поэтому сайты в интернете появляются ежедневно в невообразимом количестве, с разным дизайном и на разную тематику. И сфера архитектуры не остается в стороне. Вы можете задуматься, что особенного может быть в дизайне архитектурных сайтов? Как ни странно, но многое и хотя бы только потому, что эти сайты привлекают пользователей к деятельности компании/человека.
Тем не менее, существует ряд заблуждений относительно архитектурного веб-дизайна. Многие веб-мастера, как и сами заказчики-архитекторы, полагают, что такая «творческая» работа должна быть представлена в интернете в оригинальном виде, уникальном и необычном. В тоже время, если посмотреть на обилие разных тематических сайтов, то они-то как раз создаются очень и очень близкими по внешнему виду к самым обычным. Собственно, иначе и быть не может.
Но вот в чем загвоздка… О чем обычно рассказывается на таких сайтах? О деятельности компании, представляются проекты в фотографиях, существует страница с контактами, новостями, раздел СМИ. В целом-то как такового контента мало, а потому дизайну сайта и стараются уделить особое внимание.
Эзотерическая навигация
Самая первая ошибка и заблуждение мастеров – творческий подход к навигации. Иногда даже ведущие архитекторы имеют сайты, навигация на которых до безобразия непонятна. Создается впечатление, что если они в реалии проектируют также, то горе тем зданиям, что будут созданы. Например, проект архитектурного колледжа штата Иллинойс. Серьезное и уважаемое учреждение, но прочитать на сайте бегло и понять, куда нажимать сразу – сложновато.
А вот подборка htmlinspiration готова порадовать самыми разными архитектурными проектами, которые и выглядят необычно, и созданы вполне современными.
Возвращаясь же к навигации отметим, что в среде архитекторов почему-то сложилось мнение, что использовать «мистическую» навигацию – это круто! Это когда на сайте много текста и картинок и только если пользователь подводит к ним курсор мышки, то они изменяются и представляют собой ссылку. Вот только пользователи не всегда подводят и не так ищут эти самые ссылки. Один раз может и сработает, но потом посетители будут уходить, поскольку целевая аудитория архитектурных сайтов иная. Они приходят на такой сайт по работе, для бизнеса, для заказов, для возможности ведения строительства, а не для долгого наслаждения красивыми Hover-эффектами. Как пример, сайт snohetta. Выглядит красиво, но на РС пока не подведешь курсор к фото - не узнаешь, о чем речь.
Flash-сайты
Для того чтобы создавать эзотерически красивые сайты с большим количеством эффектов и анимацией, многие веб-дизайнеры прибегают к использованию flash. Да, еще 10 лет назад сайты на нем были популярны и появлялись, как грибы после дождя. Но сейчас flash способны заменить и иные движки, и технологии. Тем более, что Google плохо индексирует такие сайты, а это уже признак того, что проект в интернете не найдет себе целевой аудитории.
Единый URL
Общая проблема многих сайтов на разных движках. Обратите внимание, что происходит, если с главной страницы уйти в портфолио работ или кликать по фотографиям? В адресной строке ничего не будет меняться. Это происходит оттого, что сайт создан как интерактивный фильм, а не многостраничный документ. Пользователи не могут поделиться ссылкой на интересное архитектурное решение, новость или информацию с сайта, потому что ссылка одна и указывает только на домашнюю страницу.
Важность специфики
Архитектура очень специфическая область, узкая даже, если можно так выразиться. Поэтому пытаться угнаться за «ноу-хау» не всегда нужно. Это даже плохо. Даже если заказчику хочется размесить огромное число фотографий спроектированных им зданий или строений, задача веб-мастера подобрать и описания, и правильное их количество на странице – дабы все это не превращало сайт в кашу.
Разумеется, что нужно помнить о постоянном обновлении контента не реже одного раза в две недели. Успешные сайты представляют ценность для аудитории на регулярной основе и представляют собой нечто вроде медиа-потока. Соответственно, если сайт обновляется очень редко, то посетителей не будет. А обновлять можно, например, заменой фотографий, добавлением новых, изменением рассказа об объекте и представлением такового, как новости.
Вы спросите: а дизайнеру-то это зачем знать? Нарисовали сайт и готово. Отчасти – да, но «рисуя» дизайн, мастер должен заранее подготовить и отрисовать необходимые блоки, страницы, секции, иконки и прочее, что в дальнейшем и будут использоваться для развития сайта.
И вот некоторые примеры интересных архитектурных сайтов, имеющие и отдельные блоги, и новостные ленты, фотогалереи, отдельные страницы и обилие спецэффектов. При этом выглядят они современно и не перегружено. Многие из них были созданы пару-тройку лет назад и до сих пор известны в интернете, и не стремятся менять дизайн, ибо он прекрасен. AGi Architects, Bjorken Architects, Case 3D, jamesmerrellarchitects, snohetta, haririandhariri, architecture.
Photoshop и архитектура
Все проекты имеют небольшие красивые эффекты, переходы, использование фотофильтров и иное. Но иногда некоторые фотографии своих работ архитектурные бюро представляют в виде чертежей или контурного рисунка. Сделать это несложно в Photoshop, поэтому и посмотрим сегодня, как такое можно создать для дальнейшего использования в дизайне.
Чертежи создают с передней, боковой сторон здания или в виде сверху. Более того, чертежи и схемы отображают только точный план дома, а готовые фотографии имеют множественные сторонние детали, отражения, свет солнечных лучей. Разумеется, если у вас в запасе есть красивые 3D векторные объекты, то работать с ними проще. Но если есть только фотографии? Старайтесь, чтобы было меньше деталей и хорошая освещенность фокуса.
Открываем изображение, создаем копию и переходим Изображение -> Коррекция -> Обесцветить.
Применяем Фильтр -> стилизация -> Выделение краев и видим уже совсем иное изображение, которое уже почти и формирует эффект чертежа.
Применим Инверсию цветов. Синие чертежи обычно имеют синий цвет бумаги, поэтому нам потребуется сделать светлый рисунок на темном фоне. Если вы будете оставлять фон светлым (например, розовая миллиметровка), то рисунок должен у вас остаться темным. И в дальнейшем там, где мы будем использовать светлые цвета, вам придется заменить их на черный.
Любая фотография включает в себя помимо самого здания множество лишних объектов. Это могут быть деревья, кусты, люди, машины и пр. На чертежах всего этого нет, а потому мы воспользуемся инструментом Перо и выделим контур нашего здания. Ставьте больше точек и более-менее аккуратно обведите домик. Затем кликайте ПКМ по контуру и выбирайте Выделить область.
Слой должен быть активным и при активном выделении объекта кликаете на панели слоев добавить Слой-маску. Ваш объект автоматически изолируется на данном слое. Теперь, если у вас внутри рабочего контура есть лишние детали (как например, у нас в левой части у лестницы), вы выделяете отельные области и с помощью клавиши Del на клавиатуре удаляете их. Фон будет прозрачным, и объект останется цельным на маске.
Пришло время создать голубой фон. Создаем новый слой и заливаем его подходящим синим цветом. Сам слой располагаем под слоем с рабочим изображением. У слоя с изображением (черно-белым) выбираем режим наложения -> Экран. Таким образом, черный фон станет прозрачным, а белые линии останутся на синей подложке.
Добавим обводку для всего объекта. Кликаем два раза по слою с изображением и в окне свойств выбираем Выполнить обводку белым цветом, внутри, а вот ширину смотрите, как вам лучше подойдет. Мы выбрали 1 пиксель, но иногда удобнее и 5px. Зависит от рисунка и качественной вырезки контура.
С этим документом пока все. Сохраним.
Теперь займемся сеткой. Вопрос: «Какого размера создавать сетку?» – спорный. Все зависит от масштаба вашего изображения, объекта, от желаний. Иногда 80х80рх в самый раз, но мы выбрали 50х50рх, и тоже смотрится вполне красиво. При желании можно создать несколько слоев с сетками и сделать подобие миллиметровки (мелкие квадраты, большие, совсем крупные). Принцип работы будет один, но мы создадим одну сетку. Чтобы было проще представить, нарисуйте поверх своего домика небольшой квадрат и посмотрите по линейке в Photoshop какой его размер.
Создаем новый документ и выставляем его размер 50х50 пикселей. Увеличиваем масштаб для удобства работы и создаем новый прозрачный слой. Используя инструмент Выделение делаем выделение шириной/длиной в 2 пикселя сверху и по левой стороне и заливаем белым цветом.
Переходим в меню Редактирование -> Определить узор и сохраняем получившееся. Все, документ можно закрыть.
Возвращаемся к нашему чертежу и создаем новый чистый прозрачный слой. Выбираем инструмент Заливка и указываем вместо цвета – узор и из списка выбираем нашу сетку. Теперь кликаем в любом месте и.. вуа-ля, сетка появилась!
Чертежи обычно в рамке, поэтому выделяем по сетке (а это удобно стало) вокруг объекта с небольшими отступами, кликаем ПКМ по выделению и выбираем Выполнить обводку белым цветом, ориентировочно в 5рх.
Не снимая выделения, вновь кликаем по нему и из меню выбираем Инверсия выделенной области и нажимаем Del.
Чертежи не всегда новые, да к тому же любая бумага, ватман и так далее имеют специфический вид, очень отличный от цифрового аналога. Вы можете снизить яркость сетки и оставить изображение так, а можете добавить немного реалистичности.
Добавляем к слою с сеткой слой-маску и, зажимая Alt, кликаем по ней. Таким образом, она становится доступной для редактирования. Находим в интернете любую интересную текстуру пыли и царапин на черном фоне и открываем в Photoshop. Копируем её на слой-маску. Можно изменить масштаб, повернуть при необходимости.
Снимаем выделение и появится все наше готовое изображение. Активным на панели слоев оставляем слой-маску от сетки и нажимаем Ctrl+L (Уровни) и сдвигаем ползунки так, чтобы добиться максимальной контрастности. В сторону черного цвета. Вы увидите, как сетка обретет не такой строгий и четкий вид. Подберите понравившийся вариант и нажимайте Ок.
Теперь возьмем текстуру бумаги (например, отсюда) и вставим её на новый слой. Обесцветим и инвертируем, как делали это в начале с исходной фотографией. Режим наложения применим Экран.
Да вот, собственно и все! Чертеж на синей бумаге готов. Обратите внимание, что такие рисунки часто используют в приложениях, видеоиграх, на сайтах, в различных постах и прочее, и прочее. А создавать его не так и сложно.
Аналогично делается и на светлом фоне, но режимы наложения выбираются не Экран (что осветляют основу), а Умножение, Затемнение и прочие, которые, напротив, делают светлое темным. Более того, цвет фона подбирайте без большого количества белого. Светло-розовый затруднит вам работу с контрастом и получится уже не подобие чертежа, а рисунка от руки, что совсем не подходит в данном случае. Пусть будет чуть темнее.
Выводы
Сайты архитектурной тематики, в общем и целом, мало чем по стилизации отличаются от обычных сайтов компаний, блогов, туристических проектов. Но их основная задача – привлечь внимание посетителей. Поскольку целевая аудитория таких проектов очень специфична, то эффекты лучше создавать для фотографий, для переходов между страницами, но не для интерфейса в целом, не для ссылок.
Так или иначе, но архитектурная тематика – это, в первую очередь, чертежи. Разные чертежи на разных типах бумаги. Поэтому использование их вместе с фотографиями готовых объектов не бывает лишним. Или наоборот, создания только границ объектов, что изображены на фотографиях. Не всегда веб-мастерам дают доступ к оригинальным чертежам. Да, по сути, они в интернете и не нужны. Но подобие их наполняет сайт контентом, как минимум, делая его чуть более интересным.
Веб-дизайн – профессия творческая, а потому искать новые возможности и идеи, пожалуй, один из самых интересных моментов.