Концепция дизайна сайта для компании GearHeart

Постановка задачи

Задача: создать логотип и сайт-презентацию для команды девелоперов Gearheart

Сфера деятельности: команда разрабатывает сложные и нестандартные веб-приложения.

Клиенты и конкурентные преимущества: основные клиенты – это стартапы или компании, которым нужно развивать сложные существующие продукты. Основное конкурентное преимущество команды – это качество менеджмента (прозрачное планирование, отчетность и оценка, соблюдение сроков и дедлайнов), профессионализм (команда опытных специалистов + аутсорс) и высокий уровень качества продукта (система тестирования, код-ревью, контроль качества и т.д.). На мировом рынке команда может предоставить конкурентно-выгодные цены.

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

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

Сайты, которые выполняют часть задач или по стилистике и эффекту близки к задаче:www.hotdot.pro – наглядность и визуальная эффектность.www.versivo.ru – эффект технологичности (с поправкой на год создания)www.alchemy-digital.co.uk – эффекты прокрутки и построение сайтаwww.epicenterconsulting.com – построение, особенно схема работыhttp://cordova.apache.org – простор и чистотаhttp://foundation.zurb.com – простота восприятияhttp://www.google.com.ua/nexus/5 – эффекты прокрутки

Важное замечание: представленные материалы -- концепт, детали (иконки, шрифты, локальные элементы композиции, цвета и т.д.) могут подлежать доработке и изменению. Задача концепта -- продемонстрировать основные предлагаемые ходы, композиционные, стилистические и семантические, которые решают задачи клиента.

Вступительный блок “О нас”Задача блока: привлечь внимание и дать общее представление о компании, простимулировать прокрутку вниз, как очевидное действие. Доп. сценарий -- поиграться с легкой анимацией и описанием технологий.

Блок преимуществ и рабочего процессаЗадача блока: рассказать о главных преимуществах компании, продемонстрировать профессиональный уровень и прозрачность рабочего процесса, двух типов. Точность описаний и важные подробности вызывают интерес и доверие.

Блок проектовЗадача блока: продемонстрировать опыт компании, заявленную выше разносторонность и уникальность ее проектов

Блок статьиЗадача блока: продемонстрировать дополнительный масштаб деятельности компании, ее вовлеченность в мировой контекст программирования.

Блок командыЗадача блока: продемонстрировать наличие команды и уверенность компании в себе и в ценностях собственных рабочих процессов.

Структурная блок-схема и комментарии

карта сайтакопирайты

краткое описание компании и технологий

блок навигации

преимущества

рабочий процесс

избранные проекты

команда

все проекты

преимущество

член команды

член команды

член команды

член команды

член команды

член команды

член команды

член команды

преимущество

рабочий процесс

вариант 1

проект 1 проект 1 проект 1

проект 1

автор

проект 1

заголовок и лид статьи

проект 1

рабочий процесс

вариант 2

преимущество преимущество

лого меню

подвал сайта

Эскизирование по блок-схеме

рекомендуется просмотр приложенного изображения “main-1.jpg”

Дополнительные элементы

Вступительный блокПри наведении на технологию -- лого становится цветным и появляется круглая плашка, по клику -- краткое описание почему и для чего вы используете именно эту технологию. Это с одной стороны, механическая игрушка, с другой, демонстрирует тщательность подхода, особенно для менее технически подкованных клиентов -- т.к. показывает, что выбор технологий не случаен.

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

рекомендуется просмотр приложенного изображения “main-2.jpg”

Блок проектовЧтобы подчеркнуть уникальность и разносторонность проектов -- вместо скриншотов используем иконки проектов с кратким описанием. При наведении на проект -- демонстрируется его краткое описание и используемые технологии.

Блок избранной статьиНазвание и ссылка в формулировке “избранные статьи” позволяет нивелировать значение даты последней статьи и их количества, сохраняя положительный эффект от наличия.

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

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

Сетка и адаптация дизайна

рекомендуется просмотр приложенных изображений “grid”, “iphone”, “ipad”, “notebook”

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

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