CodeRange — визуальные возможности

Адрес: https://webarchitect.ru/main/

Наверное лучший пример портфолио, раскрывающий наши возможности в среде интерактивных визуальных эффектов.

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

Что это такое?

Это первая версия нашего сайта, запущенная в начале десятых годов; из времён, когда наша студия носила название Code Range.

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

Сейчас — вся актуальная информация убрана с демонстративных страниц и заполнена «текстом рыбой» Lorem ipsum, дабы не вводить вас в заблуждение.

Разберем подробнее

Первая задумка породившая подобную концепцию — это принципиальное желание отойти от так называемого «скролла», т.е. основной экран должен быть один и он должен быть статичен.
С какого бы устройства вы не подключились к сайту — вы не увидите бегунка с правой стороны браузера.

Первичный вид основного экрана

Как же размещать информацию?
Изначально мы планировали эффект по типу LightBox, или говоря простым языком — «всплывающее окно» с информацией, после нажатия на ту или иную ссылку.
Но игровой интерфейс — навеял более оригинальное решение:
при нажатии на каждую плитку из перечня меню — слева выезжает информационный экран, сопровождая движение аудио-эффектом.

При закрытии вкладки «крестиком» — происходит обратное, но в сопровождении аудио-файла отвечающего за закрытие.

Движение информационного экрана

Аналогичный небольшой сдвиг вправо — происходит для пунктов навигации, при наведении на них курсора.

Вся так называемая «рама» сайта — имеет непрерывно меняющийся CSS код, создавая эффект пульсирующего света.
Таймер периодичности — имеет каждый элемент сайта, заставляя работать весь дизайн синхронно.

Сравнение состояний подсветки

На бэкграунде задействованы 2 эффекта:
— Plexus эффект. Это геометрия, объединяющая в себе плавающие точки и соединяющие их линии, образуя таким образом различные геометрические фигуры.
— Россыпь пикселей. Случайно движущиеся пиксели, создающие ощущение звездного неба.

Plexus реагирует на движение мыши, создавая геометрию недалеко от курсора.

Главный экран без подложки

Конечно же мы позаботились о «слабых» устройствах и архаичных браузерах.
Например на старых версиях IE — большинство эффектов — отключены по-умолчанию.
А для непредсказуемых ситуаций — мы ввели панель управления в разделе настройки, сохраняющую все опции при последующем посещении сайта.

Панель настроек, крупно

Мобильная версия ≠ адаптивная

Хотя весь дизайн страницы является по сути «резиновым»,
к мобильным устройствам мы подошли несколько нестандартно.
Сжав браузер до состояния смартфона — вы увидите довольно неказистую картину, не лишенную в свою очередь возможности к полноценному взаимодействию.

Сжатое состояние главного экрана на ПК

Однако зайдя на сайт непосредственно через смартфон — вы получите отдельную мобильную версию.

Страница для смартфонов

Это и отличает адаптивность от мобильной версии, последнее — выводит пользователю альтернативную страницу.
Алгоритм определяет устройство и выполняет заданные инструкции к показу той или иной версии.
Не смотря на то, что такой метод преимущественно себя изжил — он оказывается безальтернативным в некоторых ситуациях.

Это еще не все

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

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

Дизайн раздела «веб-мастеринг»

Здесь мы уже реализовали полноценную адаптивность для узких экранов.

Вид на узких экранах

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

Web Architect