Когда вы совершаете покупки по ссылкам на нашем сайте, мы можем получать партнерскую комиссию. Вот как это работает.

Бристольское агентство Фиаско Дизайн недавно ухватился за возможность создать новый динамичный дизайн веб-сайта для британского велосипедиста сэра Криса Хоя. Целью было рассказать невероятную историю Хоя, а также продемонстрировать его недавние публичные выступления и собственную линейку велосипедов HOY.

Здесь сооснователь и креативный директор Fiasco Design. Бен Стирс объясняет, как команда объединила каждый элемент в этом элегантном новом дизайне.

Как появился бриф?

Прошлым летом руководство ESP сэра Криса Хоя обратилось к нам с просьбой принять участие в редизайне. Раньше мы работали с ESP над рядом проектов, включая сайт другого их спортсмена, велогонщика Джейсона Кенни, а также сайт их собственной компании. После их завершения возникла необходимость освежить сайт Криса, так что дальнейшее развитие событий было вполне естественным.

У вас было много творческой свободы?

Нам дали очень открытый бриф. Нам просто было поручено модернизировать текущий сайт Криса и сделать его контент более «динамичным». Было несколько требований, связанных с новыми областями сайта, но в целом мы смогли взять на себя полный творческий контроль над дизайном сайта, что было очень приятно.

Команда Fiasco Design смогла взять на себя полный творческий контроль над дизайном сайта.
Команда Fiasco Design смогла взять на себя полный творческий контроль над дизайном сайта.

Каков был ваш дизайнерский подход к проекту?

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

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

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

Что вы использовали для создания сайта?

JavaScript и CSS. И, как и в любом веб-проекте, на протяжении всего процесса мы также используем ряд различных программ, включая Photoshop, Illustrator и Dreamweaver. Сайт был разработан с использованием Illustrator и Photoshop и встроен в браузер с помощью Dreamweaver.

Сайт создан с использованием комбинации JavaScript, CSS, Illustrator, Photoshop и Dreamweaver.
Сайт создан с использованием комбинации JavaScript, CSS, Illustrator, Photoshop и Dreamweaver.

Вы упомянули, что сайт «раздвигает границы адаптивного веб-дизайна с минимальным использованием JavaScript». Можете ли вы объяснить, как?

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

Что было самым сложным в проекте?

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

Дизайн сайта сильно различается по стилю и функциональности от десктопного до мобильного.
Дизайн сайта сильно различается по стилю и функциональности от десктопного до мобильного.

Какова была реакция на сайт на данный момент?

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

Хотите увидеть больше от Фиаско Дизайн? Проверьте Веб-сайт или следите за командой на Твиттер для регулярных обновлений.

Понравилось это? Прочтите это!

  • Как создать приложение: попробуйте эти замечательные уроки
  • блестящий Учебник по Wordpress выбор
  • Загрузите эти бесплатные приложения для iPhone для дизайнеров