Главная → Вебдизайн → by

Портфолио Дизайн исследования: Design Patterns и текущей практики

В нашем недавнем исследовании

Типографские Design Patterns и лучший Practices, мы спросили наших читателей о тематических исследованиях они хотели бы, чтобы проводить.Один из самых популярных предложений было детальное изучение случае портфель веб-сайтов.По просьбам наших читателей, мы тщательно отобрали 55 дизайн agencies и ведомств веб-разработки, анализа их портфолио веб-сайтов и определил популярных шаблонов проектирования.Основная цель исследования состояла в том, чтобы обеспечить фрилансерам и дизайнерских агентств полезных советов для создания собственного portfolio.

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

Наконец, мы создали анкеты с этим 40 вопросов и пошел через веб-сайты всех этих дизайнерских агентств, заметив, шаблоны проектирования и заполнив нашу совершенно бесконечный формы.В целом, исследование приняли более 75 часов prepare.

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

Во второй части исследования будут опубликованы здесь, на Smashing Magazine, в течение двух недель.Поэтому, пожалуйста, подписаться на нашу RSS-feed и Следуйте за нами на Twitter.

Есть идеи или предложения?Может быть, есть что-то еще, что Вы хотели бы, чтобы проанализировать дополнительно в этом исследовании?Комментарий к этой статье —! Мы слушаем

1.Свет против Темных Design

Общий вопрос, который появляется часто заключается в том, чтобы создать визуально привлекательный сайт темные (то есть, использовать большие смелые типографики и ярких цветов, чтобы дать пользователю красочным и незабываемым) или более мягкий легкий сайт. (Тот, который имеет простую структуру и чистой типографии)

Удивительно, но согласно нашим исследованиям:

Конечно, выбирая темный или светлый дизайн сильно зависит от вашего личного подхода и индивидуальных целей для вашего портфеля.Сказать, что “ trend” сильная польза световые конструкции будет неточным, потому что каждый тип служить своей цели в отдельных ее context.

2.Сколько колонок

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

Screenshot

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

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

Кроме того, большинство веб-сайтов портфель состоит из нескольких, подробные страниц, с относительно глубокимподразделы.Минималистский одной странице портфелей встречаются редко: лишь 5,4% от портфеля сайтов мы видели, имеет простой и минималистский дизайн (а именно, нейтронной Creations Рыба Marketing __ и 4 | 80/20).

3.Вводный блок On Top

Портфолио веб-сайты обычно имеют большой вводный блок в заголовке страницы, в основном короткие дружественные заявления о том, что агентство предлагает и какие преимущества получит клиент, используя свои услуги.Блок, как правило, смешиваются яркие изображения с большой типографии.Она передает как company’ общий образ с и личный тон agency’ сотрудники с, что делает его одинаково профессионально и доброжелательно.Такие блоки обычно появляются сразу под логотипом на передней page.

Screenshot

По данным нашего исследования, 79% портфеля веб-сайты имеют какой-то вводный блок в верхней области.Мы заметили, однако, что некоторые портфели отказаться от вступительных блок в пользу демонстрации своих последних проектах ( концентрических studio ОГРОМНЫЙ inc. и Wishingline подавая пример).Для такой конструкции, небольшая “ О us” блок находится где-то в другом месте на странице, зачастую ниже fold.

Screenshot
45royale Inc. имеет дружественный вводный текст на первой странице.Он сообщает, что сайт принадлежит студия веб-дизайна, который находится в Кантоне, штат Джорджия, и это создает чистую, уникальный и полезный веб-сайтов и веб-applications.

4.Макет Alignment

Вернуться в ’ 90, веб-сайт макеты были традиционно левому краю, либо с вертикальной навигации в левой боковой панели или горизонтальной навигации в районе головы.С ростом принятие широкоэкранных дисплеев, ситуация изменилась.Все больше и больше дизайнеров горизонтального центрирования их макеты, так что пассивная белого пространства вокруг остатков страницы макета.Мы заметили тенденцию к более оригинальным, даже по правому краю, макеты в начале года, но ни одного портфеля в нашем текущего обследования имеет правому краю layout.

Layout alignment

По данным нашего исследования,

  • Без портфеля макеты по правому краю,
  • 89% портфеля макеты горизонтально по центру,
  • Остальные имеют либо оригинальные адаптивные макеты ( Methodи Морковь Creative), яркое фоновое изображение, которое заполняет оставшееся пространство экрана ( Duoh) или просто оставить его пустым (например, Ideo maybe.for.you __ и 8 | Area17)– Конечно, вы увидите оставшиеся места на экране, только если ваш дисплей имеет широкоэкранное resoluton.

5.Навигация Alignment

Где поставить главной навигации в макете?Вопрос isn’ T тривиальных и часто приводит к дебатов среди дизайнеров.Удивительно, но наше исследование показало, что большинство дизайнеров портфель разместить главной навигации в правом верхнем углу макета.В самом деле:

  • 80% портфеля имеют большой горизонтальной навигации,
  • 51% сайтов имеют горизонтальные навигации с выравниванием по правому краю элемента (например, Концентрические Studio Марк Болтон Design)
  • 16,4% имеют горизонтальные навигации с выравниванием по левому краю элемента (например, Squared Eye Adaptd BarbarianGroup),
  • 11% имеют полную ширину горизонтальной навигации с большими интерактивными элементами (например, buffalo SimpleBits).

Main Horizontal Navigation: Study

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

Main Horizontal Navigation: Study
Area17 имеет левому краю макета с выравниванием по левому краю навигации.Каждый элемент навигации является довольно большой интерактивных блоков element.

6.Search Box Design

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

  • 89% от портфеля сайтов мы изучали не имеют функции поиска,
  • Только 11% веб-сайтов имеют окно поиска, как правило, простой, чистый.Большинство владельцев этих портфелей есть блог, который они регулярно обновлять (в том числе Pod1 OmniTI Fortyseven media Ideo Viget).

7.Вспышка Elements

Flash, которая установлена ​​техника для богатого интерактивного дизайна, кажется, теряет популярность среди веб-дизайнеров — по крайней мере среди дизайнеров портфель веб-сайтов.Причина, вероятно, что некоторые эффекты вспышки может быть заменен на передовые технологии JavaScript, которая часто доступны из популярных библиотек JavaScript в качестве простой в использовании плагин ins.

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

A portfolio site with Flash-elements
BKWLD является одним из нескольких портфелей в нашем исследовании, которое использует флэш тяжело всем website.

В нашем исследовании, только 3,7% от портфеля сайтов использовать флэш тяжело (в частности, Лифт Interactive Bkwld, и другие, но в основном для слайд-шоу и презентаций).Причина очень вероятно, потому что мы не включает интерактивные движения дизайнерских агентств, Flash дизайн-студий и студий видео-продукции в нашей study.

8.?, Где поставить Контактная информация

Одной из важных задач нашего исследования было понять, как дизайнеры обычно передают информацию о контакте вариантов.У посетителей должны нажать на “ Контактные us” кнопку, чтобы войти в контакт с дизайн-агентства?Или контактная информация размещены на видных местах в верхней части страницы?Или же большинство дизайнеров положить контактную информацию в нижней –? Местом, где большинство пользователей ожидают его в любом случае

Веб-сайтов мы проанализировали положить контактную информацию практически в каждой области страницы: сверху, справа, слева, снизу, даже посреди страницы.Но мы также заметили некоторые интересные закономерности.Обратите внимание, что мы были заинтересованы в), где ссылка на “ Контактные us” страница и б), где фактическая контактная информация positioned.

Where is the link to contact information placed?

Оказывается, что:

Comments are closed.