—»     —»   Обзор дизайнерских портфолио: полезные рекомендации и вошедшие в обиход приёмы
  Раздел: Web-дизайн, Фриланс   Комментариев: 1  

Обзор дизайнерских портфолио: полезные рекомендации и вошедшие в обиход приёмы



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

В данной статье изложены лишь предварительные итоги нашего масштабного исследования направлений дизайна портфолио. Далее мы обсудим аспекты внешнего оформления, типы структур, разметку и схемы навигации веб-сайтов портфолио. Рассмотрим в подробностях и дизайнерское решение каждой отдельной страницы, в том числе, страниц "О нас", "Наши клиенты", "Наши услуги", "Портфолио", "Методика работы" и "Наши контактные данные". Вам, конечно, не обязательно следовать примерам, приведённым в этой публикации; лучше составьте себе общее представление о чужих портфолио, чтобы затем придумать какие-то детали для своего - практичные, внятные и запоминающиеся. Наша благодарность Марку Наттеру (Mark Nutter) за помощь в сборе материала для данного обзора.

Светлые тона против тёмных

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

Результаты наших исследований оказались весьма неожиданными:

• 82 % веб-сайтов портфолио оформляются в светлой гамме нейтральных спокойных тонов. Их фон обычно светло-серого или желтоватого оттенка, а не чисто белый,
• 29 % веб-сайтов портфолио брызжут яркими красками,
• "тёмным" веб-сайтам гораздо более присущи крупные шрифты и броская наглядность.

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

Сколько вам нужно столбцов?

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

Обзор дизайнерских портфолио: полезные рекомендации и вошедшие в обиход приёмы

По данным нашего исследования, разработчики лишь немногих веб-сайтов рискуют применять, так сказать, "нестандартные" решения при выполнении разметки и построении схем навигации, например, на основе javascript-прокрутки, да и вообще, любые нетипичные схемы. Разметка большинства портфолио традиционна и имеет блочную структуру из двух-трёх чётко разделённых столбцов с простым удобным меню навигации.
Кроме того, веб-сайты портфолио, как правило, содержат по нескольку плотно заполненных страниц с довольно объёмными подразделами. Одностраничные портфолио в минималистском стиле встречаются редко: всего 5,4 % веб-сайтов портфолио из числа рассмотренных нами отличаются простотой и минимализмом дизайнов.

Нужен ли вводный модуль вверху страницы?

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

Обзор дизайнерских портфолио: полезные рекомендации и вошедшие в обиход приёмы

Наше исследование выявило наличие той или иной вариации вводного модуля в верхней части 79 % веб-сайтов портфолио. Однако, мы заметили, что в некоторых портфолио вводный модуль заменён витриной с фрагментами последних проектов. Авторы этих дизайнов помещают небольшой модуль "О нас" где-нибудь в другом месте, часто внизу страницы.

Выравнивание разметки

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

Обзор дизайнерских портфолио: полезные рекомендации и вошедшие в обиход приёмы

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

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

Выравнивание меню навигации

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

• 80 % страниц портфолио снабжены крупными горизонтальными меню навигации,
• у 51 % веб-сайтов горизонтальные меню навигации с выравниванием элементов по правому краю,
• у 16,4 % горизонтальные меню навигации с выравниванием элементов по левому краю,
• в 11 % случаев горизонтальные меню навигации с крупными, активируемыми нажатием элементами растянуты во всю ширину страницы.

Обзор дизайнерских портфолио: полезные рекомендации и вошедшие в обиход приёмы

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

Поле поискового запроса

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

• у 89 % веб-сайтов портфолио, рассмотренных нами, нет поисковых систем,
• всего 11 % веб-сайтов снабжены полем поискового запроса, как правило, простым и отчётливым в оформлении. Большинство владельцев этих портфолио ведут регулярно дополняемые блоги.

Flash-элементы

Flash-средства, традиционно применяющиеся при создании красочных интерактивных дизайнов, кажется, теряют популярность среди веб-дизайнеров, — по крайней мере, среди разработчиков веб-сайтов портфолио. Причина, возможно, кроется в том, что некоторые Flash-эффекты теперь достигаются применением новейших javascript-приёмов, необходимые встраиваемые модули для которых, причём лёгкие в использовании, часто можно найти в общедоступных javascript-библиотеках.
Слайдовые фильмы, анимацию и "перетекание" изображений из одного в другое стало гораздо легче, быстрее и проще конструировать средствами javascript, чем Flash. Зрелищная Flash-анимация и видео-эффекты постепенно вытесняются более практичными и компактными javascript-решениями. Однако, к использованию Flash пока ещё иногда прибегают, — например, для варьирования подвижных текстов.
По данным нашего исследования, всего лишь 3,7 % веб-сайтов портфолио изобилуют Flash-элементами (и то, в основном, в слайдовых фильмах и презентациях). Возможно, всё дело в том, что мы не включили в обзор сайты агентств по разработке интерактивной наглядной видео-продукции, студий Flash-дизайна или видео-студий.

Где размещать координаты для связи?

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

Обзор дизайнерских портфолио: полезные рекомендации и вошедшие в обиход приёмы

Оказывается:

• всего 12,7 % веб-сайтов содержат номер телефона в заголовке,
• всего 9,1 % веб-сайтов содержат адрес электронной почты в заголовке,
• обычный почтовый адрес, как правило, вообще не указывается (в 54,5 % случаев), либо размещается внизу (в 40 % случаев), либо вверху страницы (в 5,4 % случаев),
• "контактная" ссылка обычно находится в верхнем правом углу (в 71 % случаев) и/или внизу (в 45,4 % случаев),
• "Обратная связь" (“Contact”) (59,7 %) и "Связаться с нами" (“Contact us”) (21 %) - наиболее распространённые формулировки для ссылок на страницы контактных данных.

Обзор дизайнерских портфолио: полезные рекомендации и вошедшие в обиход приёмы

Страница "О нас"

Страница "О нас" знакомит посетителей веб-сайтов портфолио с командой сотрудников каждого из агентств, с принципами их работы, а также предоставляет нам подтверждения их высокой квалификации и профессионализма. Эта страница позволяет дизайн-студии "явить своё человеческое лицо" и, — при грамотном подходе — внушить доверие к себе её потенциальным клиентам.
Страница "О нас", определённо, нужна любому портфолио: 89 % их из числа рассмотренных нами содержат ссылки на неё в главном меню навигации.
Насколько подробно вы опишете своё агентство, конечно, вам решать. 59,1 % страниц "О нас", исследованных нами, не имеют внутренних вкладышей и предоставляют посетителям краткую, сжатую справку. Фотографии сотрудников, личные сведения о них, а также познавательная информация о различных аспектах дизайна очень часто служат материалом для заполнения таких страниц. Основная статья обычно выдержана в неформальном, дружеском и порой даже шутливом тоне. Ссылки на данную страницу чаще всего словесно оформляются фразами "О компании" (“About”) (43,6 %), "О нас" (“About us”) (27,3 %) и "Кто мы такие" (“Who we are”) (7,2 %).

Страница списка ваших клиентов

Мало что так убедительно подчёркивает профессионализм и надёжную репутацию компании, как внушительный перечень её клиентов. Ясное дело, чем весомее собранные в этом списке имена, тем вероятнее проявление внимания к вам со стороны потенциальных заказчиков. Нам по опыту известно, что многие из них подбирают себе дизайнерское агентство-подрядчика, просматривая списки клиентов, примеры работ и отзывы. Поэтому нас удивило наличие отдельной страницы с перечнем клиентов лишь у нескольких агентств.
Среди рассмотренных нами портфолио только у 47,2 % есть страницы "Наши клиенты" (как отдельные, так и в составе страниц самого портфолио). В большинстве случаев фирмы-клиенты обозначены их эмблемами, часто прикреплёнными к ссылкам на подробные описания разработанных для них данными агентствами проектов с их же отзывами. Наиболее популярные подписи-ссылки на эти страницы — "Наши клиенты" (“Our clients”) (46,1 %), "Клиенты" (“Clients”) (39,6 %) и "Список клиентов" (“Client list”) (15,4 %).

Страница "Услуги"

С учётом того, что обычно посетители просматривают подобные веб-сайты в поисках подрядчиков, имеет смысл оправдать их старания, поместив на главной странице текст внятного содержательного приветствия, либо выделив раздел "Услуги" в самостоятельную страницу. Потенциальные клиенты, как правило, точно знают, что им нужно (фрагмент подвижной графики, эскиз для печати, веб-дизайн, эскиз обложки для CD/DVD и т. д.), поэтому стоит вынести перечень выполняемых вами основных работ на отдельную страницу "Услуги".
У 67,2 % портфолио, которые мы видели, имеется отдельная страница "Услуги" в том или ином виде. В остальных случаях эти сведения вынесены на страницу "О нас" или на главную. Часть страниц "Услуги" содержат вкладыши (35,1 %), но чаще всего это одна страница, с длинным и подробным описанием.

Связать страницу вашего портфолио со страницей услуг ссылкой определённо стоит, тем самым вы совместите теорию с практикой, наглядно демонстрируя возможности вашего агентства. Наиболее распространённые формулировки ссылок на подобные страницы — "Услуги" (“Services”) или "Наши услуги" (“Our Services”) (75,7 %), менее популярна фраза "Виды выполняемых работ" (“What we do”) (10,8 %).

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

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

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

• у 7,2 % веб-сайтов вообще нет портфолио,
• 12,7 % демонстрируют только эмблемы или экранные снимки без описаний и отчётов,
• 16,4 % снабжают каждую эмблему и/или экранный снимок кратким описанием проекта,
• 63,6 % отводят каждому проекту страницу с очень подробным описанием, содержащим отчёт, отзывы, слайдовый фильм из экранных снимков, чертежей и набросков.

Странно, что наиболее популярная подпись-ссылка на страницу портфолио — "Примеры работ" (“Work”) или "Примеры наших работ" (“Our work”) (47,2 %), а "Портфолио" (“Portfolio”) идёт следом (27,2 %).

Страница "Методика нашей работы"

"Методике", пожалуй, лучше быть подразделом страницы "О нас", чем самостоятельной страницей. Однако, некоторым дизайнерам хочется заявить о себе более основательно. При том, что у 74,5 % веб-сайтов вообще нет страницы "Методика работы", все остальные дизайнеры посвящают потенциальных клиентов в тонкости своей профессии, не жалея слов, чтобы обе стороны знали, на что они могут рассчитывать.
Готовить потенциальных заказчиков к сотрудничеству в ходе разработки будущих проектов, конечно, нужно. Самые распространённые формулировки для ссылок на эти страницы — "Как мы работаем" (“How we work”) или "Как работается с нами" (“Working with us”) (42,8 %), "Рабочий процесс" (“Process”) или "Наш рабочий процесс" (“Our process”) (35,7 %) и "Методика" (“Approach”) (7,1 %).

Страница "Контакты"

Если всё пойдёт, как надо, и ваше портфолио заинтересует посетителей, то в конце концов они окажутся на странице "Контакты". Приложите все усилия к тому, чтобы максимально облегчить им общение с вами. Собирайте все необходимые сведения, предлагая заказчикам заполнить простой и понятный бланк с вопросами о наиболее значимых аспектах их проектов. Можно указать также ваши номер телефона, почтовый адрес и адрес электронной почты: чем больше каналов связи, тем лучше.
Схема проезда, кнопки открытия вашего профиля в социальных сетях и электронной vCards-визитки тоже не будут лишними.

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

• у 9 % веб-сайтов нет страницы "Контакты" (вместо неё координаты для связи указаны внизу каждой из страниц этих ресурсов),
• схемы проезда (часто вместе с интерактивными картами сервиса GoogleMaps) имеются на 45,4 % веб-сайтов портфолио (!),
• 83,6 % сообщают номера телефонов и адреса электронной почты на страницах контактов,
• 76,7 % сообщают почтовые адреса на страницах контактов,
• у 69 % веб-сайтов есть веб-бланки обратной связи,
• 14,5 % предлагают вам скачать vCard-визитку, обычно, по соседству с адресом электронной почты,
• часто используются ссылки на веб-сайты таких социальных сетей, как Facebook, Twitter и LinkedIn (в 14,5 % случаев).

Специальные и дополнительные возможности

Кроме всего прочего, мы заметили, что некоторые дизайн-агентства предлагают потенциальным клиентам определённый набор элементов. Один из прижившихся приёмов состоит в заполнении будущим заказчиком при подаче заявки на разработку его проекта или размещение его заказа неких учётных карточек, содержащих основные данные об этом проекте. Иногда клиентам также предлагают календарь-калькулятор для составления графика-сметы, или помощь в расчёте затрат на реализацию проекта, или же более подробный прейскурант.
Среди прочих подмеченных нами любопытных дополнений были окна чатов на страницах контактов (например, у Agami Creative), "Шкала нагрузки", отображающая степень готовности компании к приёму новых заказов, калькулятор для сметных расчётов, а также презентация "Наши возможности и достижения" (в виде PDF-файлов, как правило).

Прочие находки

Мы также установили следующие факты:

• ни на одном из веб-сайтов портфолио не оказалось FAQ-страницы,
• у 76,3 % веб-сайтов имеется, как минимум, по одному блогу. А многие портфолио располагают двумя или более блогами,
• 14,55 % содержат реестр подписки на бюллетени или рассылки,
• 9 % предоставляют посетителям подробные карты сайтов.

Итоги

• 82 % рассмотренных нами веб-сайтов портфолио оформлены без излишеств, в нейтральных, спокойных тонах,
• 79 % имеют стандартную "блочную" разметку из двух-трёх чётко разделённых столбцов с простым, удобно расположенным меню навигации,
• 79 % веб-сайтов содержат вводный модуль в том или ином виде вверху страницы,
• в 89 % случаев разметка страниц горизонтально выровнена по центру,
• у 80 % крупные горизонтальные меню навигации,
• у 51 % горизонтальные меню навигации с выравниванием элементов по правому краю,
• у 89 % нет поисковых механизмов,
• всего 3,7 % активно используют Flash-элементы по всему веб-сайту,
• ссылки обратной связи расположены в верхнем правом углу 71 % страниц и/или в "подвале" 45,4 % страниц,
• 89 % связаны ссылкой со страницей "О нас" через главное меню навигации,
• лишь у 47,2 % есть страница "Наши клиенты",
• 67,2 % портфолио так или иначе содержат отдельную страницу "Услуги",
• 63,6 % отводят каждому проекту свою страницу с его подробным описанием, отзывами, слайдовым фильмом из экранных снимков, чертежей и набросков,
• у 74,5 % веб-сайтов нет страниц "Методика работы",
• страница контактных данных должна содержать схемы проезда, номер телефона, адрес электронной почты, обычный почтовый адрес, vCard-визитку и онлайн-бланк.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Опубликовал Mysterious Master   Прочитано (раз): 22859   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 8 июня 2012 @ 10:03
Написал: zero-art — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Спасибо за анализ сайтов-портфолио дизайнеров!
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930