Pull to refresh

Исследование дизайна сайтов портфолио — закономерности и современная практика

Reading time 13 min
Views 38K
Original author: Smashing Editorial
Для этой статьи мы отобрали 55 дизайн студий и студий веб-разработки, проанализировали их сайты портфолио и определили популярные закономерности дизайнов для таких сайтов. Основной целью этого изучения было предоставление фрилансерам и дизайн студиям полезных ориентиров для создания своего собственного портфолио.

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

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

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

1. Светлый дизайн против Темного.


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

Удивительно, но согласно результатам наших исследований:

  • 82% сайтов портфолио имеют легкий дизайн с натуральными и спокойными цветами. Фоны этих сайтов это светлые оттенки серого и желтого а не чисто белый цвет (например Happycog, SimpleBits, 80/20 и Concentric Studio).
  • 29% сайтов портфолио имеют очень живые, яркие цвета (например, 45royale, Hicksdesign, Duoh, Frexy и Odopod).
  • Темные сайты гораздо чаще имеют большую типографику (например Adaptd, OrderedList, Carsonified, Blue_Flavor, SidebarCreative и pod1).


2. Сколько столбцов?


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


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

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


Также, большинство сайтов портфолио состоят из многих, детализированных страниц, с относительно глубокими подразделами. Минималистичные одностраничные сайты портфолио тоже редкость. Из сайтов, которые мы исследовали, только 5.4% имели простой и минималистический дизайн (а более конкретно Neutron Creations, Fish Marketing и 80/20).

3. Вводный блок наверху?


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


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


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

4. Выравнивание макета.


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


По данным наших исследований,

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


5. Выравнивание навигационного блока.


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

  • 80% сайтов портфолио имеют большое горизонтальное меню навигации,
  • 51% имеют горизонтальное меню навигации с выравниванием элементов в нем по правому краю (например, Concentric Studio, Mark Boulton Design).
  • 16.4% имеют горизонтальное меню навигации с выравниванием элементов по левому краю (например Squared Eye, Adaptd, BarbarianGroup),
  • 11% имеют горизонтальное навигационное меню на всю ширину страницы с большими интерактивными элементами (например, buffalo, SimpleBits).



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


Сайт Area17 имеет макет и навигацию с выравниванием по левому краю. Каждый из элементов навигации является довольно большим интерактивным элементом.

6. Дизайн поля ввода поискового запроса.


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

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


7. Flash элементы.


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


Сайт BKWLD является одним из нескольких сайтов портфолио в нашем исследований, которые используют тяжелые Flash файлы во всем сайте.
В нашем исследовании, только 3.7% из всех сайтов портфолио использовали большое количество Flash анимации и компонентов (в частности, Lift Interactive, Bkwld и другие, но в основном для слайдшоу и презентаций). Вполне вероятно, что это из-за того, что мы не включили в наш список исследования те веб-студии, которые создают интерактивные сайты, студии Flash дизайна или студии видео продукции.

8. Где ставить контактную информацию?


Одним из важных целей нашего исследования было понять, как дизайнеры передают контактную информацию в целом. Должны ли клиенты нажать на кнопку “Связаться с нами” для того, чтобы связаться с дизайн студией? Или же контактные данные поставлены на самом верхнем, видном месте страницы? Или может дизайнеры предпочитают ставить контактную информацию внизу, в то место где большинство пользователей ожидает его увидеть?
Сайты, которые мы проанализировали, ставили контактную информацию практически во всех областях страницы: в шапке, на левой стороне, на правой стороне, внизу страницы, даже посередине. Но мы также заметили некоторые интересные закономерности. Обратите внимание, мы были заинтересованы в следующем:

  1. где находится ссылка на страницу “Связаться с нами”,
  2. где фактически расположена контактная информация.



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

  • всего лишь 12.7% сайтов портфолио имеют номер телефона в шапке страницы (например, Things That Are Brown, Headscape, Clearleft и Concentric Studio),
  • всего лишь 9.1% сайтов имеют адрес электронной почты в шапке сайта (например, buffalo, Kyan media),
  • почтовый адрес обычно нигде не указан (54.5%), либо указан внизу сайта (40%), либо указан в шапке (5.4%),
  • ссылка “Contact” обычно находится в верхнем правом углу (71%) и/или внизу сайта (45.4%),
  • формулировки “Contact” (59.7%) и “Contact us” (21%) являются самыми популярными для ссылок на страницы с контактной информацией.



9. Страница “О нас”.


Страница “О нас” на сайтах портфолио используется для представления членов команды, объяснения философии студии и для того, чтобы доказать наличие опыта компании и профессионализма. Эта страница придает студии персональный подход, и если создан подобающим образом, вызывает доверие потенциальных клиентов.


Страница “О нас” сайта Weightshift.com показывает членов группы и рассказывает о них.
Страница “О нас” является обязательной для большинства сайтов портфолио: 89% проанализированных сайтов портфолио имели ссылки на страницу “О нас” в главном навигационном меню (исключение составляют сайты 31three, Huge Inc и другие).
Уровень детализации, который вы используете для представления вашей студии, зависит от вас. 59.1% сайтов портфолио, которых мы изучали, не имели дополнительные страницы и предлагали посетителям краткий и компактный обзор. Фотографии членов команды, их личные данные и информация о процессе разработки очень часто встречается на таких страницах. Общий тон текста, как правило, неформальный, дружественный, а иногда даже смешной. Самыми популярными формулировками ссылок на страницу “О нас” являются формулировки “About” (43.6%), “About us” (27.3%) и “Who we are” (7.2%).

10. Список клиентов.


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


Список с информацией о клиентах на сайте Squared Eye содержит информацию о всех клиентах, с которыми компания работала. С такими именами в списке как Фонд Гейтс, Институт Мира США, Телекомпания Фокс и Почтовая Служба США, компания кажется заслуживающим доверия.
Из всех сайтов портфолио, которые мы проанализировали, только 47.2% имеют список клиентов (либо в виде отдельной страницы, либо расположенной на главной странице). В большинстве случаев клиенты представлены в виде их логотипов, которые ведут на отдельные страницы для каждого клиента, содержащие подробное описание проделанной работы, также отзывы от клиента. Самыми популярными формулировками ссылок для таких страниц являются “Our clients” (46.1%), “Clients” (39.6%) или “Client list” (15.4%).

11. Страница списка услуг.


Учитывая тот факт, что посетители обычно приходят на такие сайты за поиском услуг, целесообразно создать отдельную страницу или раздел на главной с названием “Услуги”. Потенциальные клиенты обычно имеют довольно хорошее понимание того, что они ищут (динамичный дизайн, полиграфический дизайн, веб-дизайн, дизайн обложки CD/DVD и т.д.). Исходя из этого, будет хорошей идеей показать на сайте список предоставляемых услуг.


Страница услуг сайта Singalfeuer весьма кратким образом представляет предлагаемые услуги. Иконки и маленькие иллюстрации используются для хорошего эффекта.
67.2% сайтов портфолио, которые мы изучали, имеют какую нибудь отдельную страницу со списком услуг. Остальные ставят эту информацию на странице “О нас” или на главной странице. Страницы “Услуги” иногда имеют дополнительные страницы (31.5%), но в большинстве случаев одиночная страница весьма большая и подробная.
Связывание вашей страницы портфолио со страницей услуг, безусловно, является хорошей идеей, потому что она соединяет теорию с практикой и показывает клиентам на что ваша студия на самом деле способна. Самыми популярными формулировками для ссылок на страницу “Услуги” являются “Services” или “Our Services” (75.7%), а следом идет “What we do” (10.8%).

12. Страница портфолио.


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


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

Судя по результатам нашего исследования:

  • 7.2% сайтов не имеют портфолио вообще,
  • 12.7% сайтов показывают только скриншоты и логотипы, без какой либо информации,
  • 16.4% сайтов кратко представляют проекты рядом с логотипом и/или скриншатами,
  • 63.6% имеют очень подробные отдельные страницы для каждого из проделанных проектов, включая тематические исследования, отзывы, слайдшоу со скриншотами проекта, чертежи и эскизы (например Bright Creative, Weightshift, Huge Inc., Happy Cog, 45royale).
  • Удивительно, но самыми популярными формулировками ссылок на портфолио являются «Work» или «Our work» (47,2%), затем «Portfolio» (27,2%).


13. Страница рабочего процесса.


Фактически, страницу рабочего процесса лучше всего создавать как дополнительную страницу для страницы “О нас”. Однако, некоторые дизайнеры хотят более детально представить свой рабочий процесс. В то время как 74.5% сайтов портфолио не имеют страницы рабочего процесса вообще, остальные сайты для этой цели имеют достаточно объемные страницы, где они представляют весь процесс разработки, для того, чтобы потенциальные клиенты знали, что обе стороны могут ожидать.


Страница рабочего процесса сайта 45royale: компания объясняет из чего состоит их рабочий процесс и каким образом будут клиенты принимать участие в процессе дизайна.
Безусловно, хорошая идея объяснять потенциальным клиентам, каким образом они будут участвовать в процессе дизайна. Самыми популярными формулировками ссылок на эту страницу являются «How we work» или «Work with us» (42,8%), «Process» или “Our process” (35.7%) и “Approach” (7.1%).

14. Страница с контактной информацией.


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


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

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

  • 9% сайтов не имеют отдельной страницы с контактной информацией (вместо этого они показывают контактную информацию внизу каждой страницы),
  • информация о том, как к ним доехать (часто с интерактивной картой Google) есть на 45.4% сайтах (!),
  • 83.6% показывают номер телефона и адрес электронной почты на странице с контактной информацией,
  • 76.7% показывают почтовый адрес на странице с контактной информацией,
  • 69% сайтов студий имеют веб-форму для связи с ними,
  • 14.5% предлагают для скачивания виртуальные визитные карточки, обычно они расположены рядом с адресом электронной почты,
  • ссылки на профили в социальных сетях, таких как Facebook, Twitter и LinkedIn встречаются тоже часто (14.5%).


15. Специальные функции и дополнения.


Также мы заметили несколько отличительных элементов дизайна, которые дизайн студии предлагают своим потенциальным клиентам.
Один из популярных подходов заключается в предоставлении какой нибудь формы запроса проекта или предложения, которые потенциальные клиенты должны будут заполнить основными деталями своего проекта (например: Mark Boulton Design, stuff and nonsense, 45royale, Duoh и Clearleft).
Также некоторые дизайн студии предлагают инструмент для планировки проектов (например, buffalo, Happy Cog и 45royale) или же помогают клиентам определить цену проекта (такие как OnWired (http://onwired.com/contact/)) или же более подробное руководство по ценам (как это делается на BlueFlavor).


Он-лайн планировщик проектов студии Buffalo (http://planner.builtbybuffalo.com/) ведет пользователей через удобные формы создания технического задания, делая процесс заполнения полей легким и предотвратив ошибки или предоставление недостаточной информации.

Среди других интересных вещей, которые мы заметили, были окошки чатов на странице с контактной информацией (например, Agami Creative), “Измеритель стресса”, который показывает есть ли у студии свободные ресурсы или нет (например Bright Creative), калькулятор цены проекта и презентацию “Возможности и Навыки” (обычно в формате PDF).

16. Другие находки.


Мы также выяснили, что:

  • ни один из сайтов портфолио не имеет секции часто задаваемых вопросов (FAQ),
  • 76.3% сайтов портфолио имеют как минимум один блог. И много сайтов портфолио имеют два и больше блога,
  • 14.55% имеют функцию рассылки (например, bkwld, area17, buffalo, Viget и 45royale),
  • 9% предоставляют подробную карту сайта (например, Ideo, OmniTI, pod1, Erskine Design и Wishing Line).


Итоги.


  • 82% сайтов, которые мы проанализировали, имеют легкий дизайн, с натуральными и спокойными цветами,
  • 79% имеют традиционные блочные макеты, с двумя или тремя четко разделенными столбцами и с простым, удобно расположенным навигационным меню,
  • 79% имеют какой нибудь вводный блок в верхней части сайта,
  • в 89% сайтах макет выровнен по центру,
  • 80% имеют горизонтальное навигационное меню с выравниванием элементов по правому краю,
  • 89% не имеют функции поиска,
  • всего лишь 3.7% используют тяжелые Flash компоненты по всему сайту,
  • ссылка на страницу с контактной информацией расположена в верхнем правом углу в 71% случаев, и/или внизу сайта в 45.4% случаев,
  • 89% имеют ссылку “О нас” в главном навигационном меню,
  • всего лишь 47.2% имеют страницу с информацией о клиентах компании,
  • 67.2% имеют отдельную страницу со списком предоставляемых услуг,
  • 63.6% имеют отдельные страницы для каждой из осуществленных проектов, которые содержат тематические исследования, отзывы клиентов, слайдшоу со скриншотами, чертежи и эскизы,
  • 74.5% сайтов не имеют страницы представления рабочего процесса,
  • страница с контактной информацией должна содержать информацию о том как проехать в офис студии, номер телефона, адрес электронной почты, почтовый адрес, виртуальные визитные карточки и он-лайн форма связи.

Tags:
Hubs:
+91
Comments 44
Comments Comments 44

Articles