Создание «говорящего» онлайн-портфолио
4 апреля 2011, 20:15. Разместил: Mysterious Master
Создать "говорящее" портфолио легче, чем вам кажется. Стремитесь к простоте и практичности, решайте поставленные задачи, и тогда в итоге вы получите успешно работающее на ваш имидж портфолио. В данной статье мы рассмотрим пять ловушек, подстерегающих разработчиков портфолио. А затем дадим вам ряд советов, точно следуя которым и выполняя наши рекомендации, вы добьётесь значительных результатов.
Итак, типичные ошибки дизайнеров, которые нужно знать, чтобы избегать их.
Западня #1: Туман многословия
Чёткость и ясность должны быть основополагающими принципами построения вашего портфолио. Не тратьте двадцать слов на то, что можно выразить в семи. Выносите ваши лучшие материалы на видное место.
Старайтесь, по возможности, помещать важные материалы "на первой полосе". Избегайте чересчур замысловатых фраз в текстах. Не дробите портфолио на слишком мелкие разделы, однако, обеспечьте ему охват контента, достаточный для достижения ваших целей.
Одна из статей на сайте Copyblogger содержит список простых рекомендаций по составлению текстов, основанных на изучении литературного наследия писателя, заявившего о себе в начале XX века и известного краткостью формулировок.
См. статью "5 заветных секретов писательского мастерства Эрнеста Хемингуэя" ("Ernest Hemingway’s Top 5 Tips for Writing Well").
Хемингуэй был поборником краткости предложений, разяще хлёсткого языка и однозначности толкования: основных принципов составления эффективно работающих веб-текстов.
Коллиз Тэид (Collis Ta’eed) в своей статье "Создание безукоризненного портфолио" ("Creating The Perfect Portfolio") делится с дизайнерами советами от лица воображаемого заказчика. В разделе, озаглавленном "Итак, к делу", приводятся аргументы в пользу сокращения количества образцов в вашем портфолио и облегчения поиска лучших среди них. Заказчику приходится наскоро просматривать множество ресурсов, выбирая подрядчика. Чем заметнее ваши лучшие достижения, тем выше вероятность для вас успешно пройти отбор. Портфолио Ивэна Эккарда (Evan Eckard) - наглядный пример веб-сайта с витриной лучших работ прямо на первой странице, сразу "переходящего к делу".
Западня #2: Нагромождение информации
Другой подвох самим себе кроется в стремлении дизайнеров втиснуть массу сведений в ограниченное пространство. Нужно равномерно распределить их по страницам, которые пользователи будут просматривать для получения дополнительной информации, рассчитав их объём для каждой страницы. Помните об этом, разрабатывая ваше портфолио. Чем плотнее вы набьёте его всякой всячиной, тем больше оно будет похоже на тюк тряпья. Если вам, всё же, нужно вместить много информации на одной странице, ознакомьтесь с публикацией "Сетчатая и столбцовая разметка" ("Grid and Column Designs") на сайте WebDesigner Wall.
Там содержится ряд полезных советов по успешному применению сетчатых структур для размещения крупных массивов данных.
Западня #3: Отсутствие чувства меры
Простота и внятность изложения материала помогут вам избежать лишних ошибок.
Это относится ко всем аспектам оформления вашего портфолио. Тише едешь - дальше будешь. Чем больший спектр сведений вы попытаетесь охватить в вашем портфолио, тем выше вероятность допустить досадный промах.
Демонстрация 18 примеров вашего владения различными профессиональными приёмами представит их менее доходчиво, чем подчёркнутое выделение всего нескольких из их числа. Пользователей может захлестнуть валом излишней информации о различных категориях или образцах работы в рамках одной категории. И тогда они просто не заметят в этом море жемчужины, служащие ярким подтверждением вашего мастерства.
Западня #4: Вычурность схем навигации
Дизайнеров так и тянет хоть чем-то выделиться. Схема навигации вашего веб-сайта - наименее подходящее место для осуществления подобных попыток. Это игра чисел. При достаточно большом количестве посетителей сайта вашего портфолио, которым навигация по нему далась с трудом, это портфолио можно считать провальным проектом.
В своей статье "Моё последнее портфолио постиг облом, это может случиться и с вашим" ("My Last Portfolio Sucked, Yours Might Too") Кайл Мейер (Kyle Meyer) приводит ряд весьма показательных примеров построения схем навигации, которым следовать явно не стоит. Он рассматривает 200 портфолио, разъясняя допущенные при их создании ошибки. Более 32 % недочётов пришлись на последствия неправильной конструкции схем навигации.
Примеры дизайнерских решений, которых следует избегать при построении схем навигации.
Западня #5: Визуальные излишества
Оцените оправданность включения в дизайн каждого декоративного элемента. Если он способствует решению стоящих перед вами задач и придаёт законченность образцу вашего творчества, то всё в порядке. В противном случае удалите его.
Грамотное применение пробелов в вашем портфолио выдаёт в его разработчике профессионала. Чем большим количеством элементов вы напичкаете каждую единицу площади страницы, тем труднее вам будет сохранить на ней видимость профессионализма.
Направляйте пользователей в их освоении страницы, структурировав её по принципу соподчинённости. На сайте "Boxes and Arrows" опубликована статья "Наглядные комментарии: знание особенностей зрительного восприятия" ("Visible Narratives: Understanding Visual Organization"), разъясняющая принципы ранжирования объектов по степени их заметности для человека.
А в интервью, озаглавленном "Соотношение оформительских эффектов и практичности в дизайне" ("Where Visual Design Meets Usability"), затрагиваются как вопросы структурирования страницы по принципу соподчинённости, так и проблема перенасыщенности сайта декоративными украшениями. Люк (Luke) резюмирует некоторые предостережения Эдварда Тафта (Edward Tufte) относительно избытка информации на странице.
Правила построения эффективно работающего портфолио
Далее приводятся рекомендации по улучшению дизайна вашего портфолио или его грамотной разработке "с нуля". Помните, что выполнение некоторых из этих рекомендаций потребует от вас терпения, времени и тщательного планирования. Но оно того стоит. А примеры, использованные в качестве иллюстраций, показывают, каких выдающихся результатов можно достичь, всего лишь соблюдая эти простые 12 правил.
Сформулируйте критерии успеха вашего проекта и наметьте пути его достижения
Приступая к реализации любого проекта, сначала чётко намечайте себе цели. Осознание целей будет влиять на все ваши последующие решения.
Ниже излагаются типичные задачи портфолио различных типов. При этом, не забывайте, что часто перед портфолио ставится более одной задачи. По крайней мере, будьте готовы к тому, что вам понадобятся несколько портфолио различного назначения.
• Портфолио "Заказывайте у нас" предназначено для того, чтобы обеспечивать вас работой. Если вы находитесь в активном поиске заказов, то главной задачей вашего портфолио будет помощь в организации вашего найма. Такое портфолио можно оформить в соответствии с запросами фирм, с которыми вы хотели бы сотрудничать.
• Портфолио, задуманное как генератор продаж, должно бесперебойно направлять к вам поток клиентов. Его задача - углублять интерес, проявленный потенциальными заказчиками, и способствовать заключению ими сделок.
• Портфолио, рассчитанное на создание вам имени, работает на ваш имидж среди коллег и в сети. Его можно оформить в виде витрины ваших художественных достижений, либо собрать ваши работы в блоге-портфолио.
• Социально-сетевое портфолио помогает налаживать контакты. Многие ресурсы социальных сетей располагают отличными сервисами для создания портфолио, поощряя размещение у себя ваших портфолио предоставлением различных льгот. Прежде всего, по выгодному использованию веб-сайта в качестве площадки социально-сетевого общения.
Рассмотрите возможность создания нескольких портфолио
Не ограничиваться одним портфолио стоит по ряду причин. Возможно, вы хотите продемонстрировать свои умения во всём их многообразии. Или же вы намерены послать своё портфолио конкретному директору по маркетингу, чтобы получить определённый заказ.
Он это оценит. Ведь вы сэкономите его время и подчеркнёте значимость данного заказа для вас, даже если ваше портфолио поместится всего на одной странице.
А подготовив отдельные портфолио для различных групп потребителей, вы почувствуете отдачу, несмотря на то, что работы в этих портфолио будут повторяться.
Например, Ник Эйнли (Nik Ainley), британский дизайнер и иллюстратор. У него несколько портфолио, каждое из которых решает свою задачу. Он состоит в различных сообществах, куда допускаются только владельцы портфолио, и участие в работе которых способствует укреплению его репутации, позволяя ему при этом ещё и общаться с другими дизайнерами в социальных сетях. Количество посещений его веб-сайта, Shiny Binary, уже перевалило за 1 миллион.
У Ника есть портфолио на сайте Behance. Он - участник целого ряда пользовательских групп этого ресурса и обзавёлся довольно широким кругом собственных друзей. Его портфолио чётко информирует нас о том, что он готов работать в качестве фрилансера, подписать долгосрочный контракт, поступить на службу штатным сотрудником и выступить консультантом.
Кроме того, его портфолио пользуется широкой популярностью на сайте DeviantArt. Там он - участник сообщества с 2004 года, и сейчас в его портфолио уже более 80 образцов, а комментариев к его работам - свыше 1 000. Многие ценители хорошего дизайна отметили его дизайны значком "Избранное".
На сайте CPLUV он появляется реже, однако, разместил своё портфолио и в его галерее. А на Depthcore у него очень хорошее портфолио. Данный веб-сайт размещает работы только зарекомендовавших себя художников, поэтому высокое качество здесь гарантировано.
То есть, на примере Ника Эйнли мы видим преимущества наличия у дизайнера нескольких онлайн-портфолио, пусть даже с однотипными образцами. Каждое из них служит для него пропуском в новое сообщество. Поступая подобным образом, вы сможете заводить знакомства с людьми и демонстрировать им ваши работы.
Ориентируйтесь на свою целевую аудиторию
Чем точнее ваши разработки ориентированы на определённую аудиторию, тем понятнее они людям, составляющим эту аудиторию. Если вы пытаетесь заполучить консервативно настроенных корпоративных клиентов, то предоставьте им понятные, имеющие товарный и профессиональный вид образцы. Не нужно демонстрировать ваши экстравагантные, гранжевые или заумные работы, если только эти черты не свойственны потребительской среде сегмента рынка, в котором вы стремитесь закрепиться.
В статье "Секрет успеха веб-дизайнера у заказчиков" ("The Secret to Getting a Lot of Web Design Work") есть раздел "Сделайте портфолио таким, каким его приятно видеть вашим клиентам" (“Design the portfolio you think your clients want to see”). В этом вся суть. Пусть ваше портфолио отвечает вкусам целевой аудитории. Если вы рассчитываете привлечь внимание конкретных клиентов, то разрабатывая портфолио, старайтесь смотреть на дизайн их глазами.
Работа "под запросы аудитории" даёт вам и другие преимущества. Барбара Пеллоу (Barbara Pellow) в статье "Определение целевой аудитории" ("Finding a Target Market") рассматривает как вертикальный, так и горизонтальный охват целевой аудитории. Она указывает на ряд дополнительных преимуществ целевого маркетинга. Общаясь с ограниченным сообществом людей, вы быстрее получите признание в качестве знатока своего предмета.
Целевой рыночный подход помогает вам выборочно предлагать ваши услуги.
Возьмём, например, веб-дизайнера, специализирующегося на создании сайтов для адвокатских контор. Его целевая аудитория будет отличаться от той, с которой работает дизайнер, конструирующий веб-сайты рок-группам. Тексты, графика и общее оформление их портфолио, соответственно, будут совершенно разными. Веб-дизайнер с полным портфолио удачных проектов, разработанных им для юридических фирм, облегчит себе получение заказа от очередной адвокатской конторы, обойдя других дизайнеров или агентства.
Ориентируясь на свою целевую аудиторию, дизайнерам легче привлечь к себе внимание.
Они смогут успешнее находить заказы по своей специализации и обретать статус экспертов в своей области. Например, портфолио Дэна Гилроя (Dan Gilroy) успешно решает задачу привлечения его целевой аудитории.
Ориентация на вашу целевую аудиторию - важное условие при отборе материалов для портфолио и разработке вашего веб-сайта.
Ставьте практичность во главу угла
Схема навигации имеет первостепенное значение. Вернитесь к абзацу о вычурных схемах навигации. Другой важный аспект - соответствие веб-стандартам. Он приобретает особую значимость, если в данный момент вы находитесь в поиске заказов. Прочтите статью Джеффри Вина (Jeffrey Veen) "Пять способов улучшить портфолио дизайнера" ("Five Steps to a Better Design Portfolio"). В ней рассматриваются наиболее действенные приёмы построения портфолио, которое должно понравиться заказчику.
Кроме того, не забывайте о поисковых роботах. Старайтесь повысить податливость вашего ресурса к поисковой оптимизации. Блог SEOBook - отличное подспорье по этой части. Грамотный подход к SEO-оптимизации повышает возможности потенциальных клиентов по обнаружению вашего ресурса с помощью поисковых механизмов.
Правильно выбирайте "строительные" технологии
Если использование определённых технологий является обязательным условием получения интересующего вас заказа, то имеет смысл сконструировать ваше портфолио по этим технологиям. У Flash, конечно, масса достоинств, но годятся ли эти средства для вашего веб-сайта?
Возможно, что нет, если вы - дизайнер логотипов. Однако, если вы хотите устроиться Flash-дизайнером в шикарное агентство по разработке интерактивной продукции, этот выбор будет верным решением.
Схема навигации на странице портфолио цифрового дизайнера Мэтью В. Робинсона (Mathew V. Robinson) (см. следующую страницу) проста в использовании. Быстродействие - ценная особенность Flash-сайта. Портфолио Мэтью очень удобное и смотрится отлично.
Выбирая технологическое решение будущего ресурса, учитывайте фактор удобства его сопровождения. Максимально упростив ваше портфолио, вы в дальнейшем сэкономите время на его модернизацию и реконструкцию.
Насколько легко вам добавлять материалы в ваше портфолио и удалять их? Чем легче выполнение этих операций, тем выше вероятность того, что обновлять ваше портфолио вы будете регулярно. У Джейми Грегори (Jamie Gregory) простая, изящная и удобная страница портфолио, причём, всего одна. Он может запросто добавлять или менять местами образцы работ.
При выборе технологических решений стоит заложить и резерв на развитие сайта. Часто применение javascript или других технологических средств в небольших пропорциях оказывается разумнее их полномасштабного насаждения. Таким образом вы решите стоящие перед вами задачи, не усложняя проект. Уделите минуту изучению портфолио Мариуса Роозендаля (Marius Roosendaal), оцените чёткую строгость кодировки, выгодно дополняемую изящными javascript-эффектами.
Хорошо подумайте, сделать ли вам свой веб-сайт статичным или применить систему управления контентом. Одностраничные портфолио проще обновлять, и заполнять их вашими лучшими образцами можно быстрее. Да, и с навигацией проблем не будет, на одной-то странице. Однако, ваш ресурс потеряет в гибкости, и вы не получите те выгодные дополнительные преимущества в плане продвижения ваших работ, которые даёт вам применение систем управления контентом, например, возможность вести блог.
Разрабатывайте проект по плану
Ключевое условие успеха вашего портфолио - отношение к нему не менее ответственное, чем к заказному проекту. Занимайтесь им так же профессионально, как любым другим веб-дизайном, за разработку которого вы берётесь. Отводите достаточно времени на решение задач, стоящих перед вами. Кроме того, обязательно намечайте себе сроки завершения проектов, чтобы не расслабляться.
Отбирайте работы в портфолио, устанавливая тематические и жанровые рамки
Ваше портфолио должно состоять только из лучших образцов, отобранных в соответствии с задачами, которое оно призвано решать. Если вы хотите заниматься реконструкцией веб-сайтов, то и ваше портфолио нужно наполнять примерами именно таких разработок, а не дизайнами эмблем или печатных плакатов, которые вы, возможно, когда-то делали. Если данный конкретный вид работы вас не интересует, не выставляйте в своей витрине её образцы. Толку будет больше.
Джесс Беннетт-Чемберлен (Jesse Bennett-Chamberlain) в мае 2007 года реконструировал свой веб-сайт, 31three.com. Прежде в его портфолио были дизайны печатной продукции и эмблем.
Новая версия ресурса "очищена" от всего лишнего и чётко ориентирована на его целевую аудиторию - разработчиков, которым нужна помощь дизайнера.
Теперь в его портфолио собраны только дизайны веб-сайтов и интерфейсов, потому что он ищет именно такие заказы. Портфолио по многим показателям образцовое, и пользуется широкой популярностью в блогосфере.
Это не означает отказ Джесса от разработки логотипов или элементов фирменного стиля. Он занимается и ими, осознавая, однако, что люди обращаются к нему не за логотипами. А за дизайнами для новых или уже готовых веб-сайтов; разработку логотипа он может попутно включить в пакет услуг. Более подробно методика его работы описана в статье "Реконструкция сайта ExpressionEngine" ("Redesigning the ExpressionEngine Site").
Разумеется, некоторые дизайнеры и агентства предпочтут смешанные портфолио. Чем больше искусно выполняемых вами видов работы, тем сложнее вам будет организовать продвижение ваших услуг на рынке. Старайтесь, по возможности, сводить количество ваших выставочных образцов к минимуму. От десятка лучших из них часто больше пользы, чем от полусотни просто хороших.
Предоставляйте контактные данные, документацию и пояснения в достаточном объёме и в доступной форме
Координаты для связи должны находиться на видном месте, а формы обратной связи должны быть просты в применении. Оформите их как можно заметнее. На сайте портфолио Hicksdesign контактные данные хорошо видны на каждой странице.
Пояснив, в качестве кого вы участвовали в проектах, представленных в вашем портфолио, вы внушите доверие потенциальным клиентам. Если вы выступили дизайнером какого-то веб-сайта, а программистом был другой человек, так и напишите. А если вы оказались мастером на все руки, выполнив работу целиком, заявляйте об этом твёрдо и без ложной скромности.
Кэмерон Моул (Cameron Moll) следует этому принципу.
Подробные досье проектов позволяют ближе познакомиться с методикой вашей работы. После первичного отсева кандидатов в подрядчики потенциальный клиент может вернуться к вашему портфолио и рассмотреть его внимательнее. Досье проектов демонстрируют вашу компетентность и тщательность. Дейвид Эйри (David Airey) обеспечил лёгкий доступ к досье его проектов.
Отзывы клиентов убедительно свидетельствуют вашим посетителям о том, что вы слов на ветер не бросаете. Если оформить их грамотно и со вкусом, то ваше портфолио, благодаря им, будет смотреться гораздо профессиональнее. В статье Дейвида Эйри "О ценности отзывов клиентов" ("The Importance of Client Testimonials") приводятся полезные сведения по данному вопросу.
Подчиняйте оформление портфолио решению ваших глобальных задач
Примеры вашей работы должны зримо выделяться в вашем портфолио на фоне всего остального. Если детали оформления или разметки страницы перетягивают центр внимания на себя, то вам, очевидно, не удастся достичь поставленных целей. Тщательно взвешивайте решения о добавлении на неё каждого декоративного элемента. При появлении сомнений, упрощайте дизайн.
Придавайте вашим дизайнам личностный оттенок
Портфолио Ника Ла (Nick La) выдержано в его собственном стиле и отражает его интересы. Самобытная фоновая иллюстрация бросается в глаза. Она, как бы, служит красивой обёрткой, не снижая практичность ресурса. У кого-то другого она могла бы сильно затруднить обзор выставленных работ (хотя в данном портфолио баланс соблюдён идеально).
Ник разместил свои образцы на сплошных белых плашках, чётко разбив дизайн на столбцы. Представленные работы гармонируют с фоновой картинкой. Добиться такого эффекта авторского присутствия нелегко, но в случае успеха ваше портфолио не просто запомнится, а даже прославится.
Портфолио Ника N.design Studio произвело фурор. В конце концов, воплощая наши годами зревшие творческие идеи в зримых образах, мы и вкладываем в дизайны душу.
Сет Гоудин (Seth Godin) в публикации "Как добиться признания" ("How to Be Remarkable") делает на этот счёт ряд очень тонких замечаний. Цитата: "Признание приходит к тем, кто не боится крайностей: громадных размеров, бешеных скоростей, почти полной неподвижности, брызжущей сочности, невесомой лёгкости, неимоверной трудности". Хорошо сказано, правда, с края обрыва можно запросто сорваться вниз.
Будьте осторожны, включая настолько экстравагантные личностные штрихи в оформление вашего портфолио, чтобы не повредить его практичности и соблюсти общее равновесие веб-сайта, которое это самое портфолио попытается нарушить.
Продвигайте и популяризируйте ваши работы
Продвигать ваше портфолио можно по-разному. Подумайте, не вступить ли вам в какие-нибудь профессиональные онлайн-сообщества, чтобы общаться в социальных сетях с их участниками.
Мы назвали ряд ресурсов сообществ, размещающих у себя портфолио участников. Добавьте тематическую ветвь, посвящённую вашему портфолио, на дизайнерский форум.
Предложите образцы ваших разработок галереям различных веб-сайтов. Практически любой метод "раскрутки" веб-сайта годится и для продвижения портфолио.
Заведите у себя на сайте блог. Чем больше посетителей у вашей страницы, тем шире известность вашего портфолио. Дэн Сидерхольм (Dan Cederholm) начал применять эту стратегию одним из первых, прославив с её помощью собственный блог Simplebits. Его портфолио уютно устроилось на том же веб-сайте.
Популяризировать свои работы вы можете с помощью ссылок на них, прикреплённых к вашим исходящим электронным письмам. Добавьте ссылку на своё портфолио себе в Facebook-профиль или на свою страницу в любом другом сообществе. Упоминайте своё портфолио при переписке и сделайте его частью собственного онлайн-имиджа.
Намечайте себе долгосрочные перспективы
Планировать на будущее всегда полезно. Ваши запросы будут расти по мере накопления опыта в ходе разработки различных проектов. И, так же, как уроки недавнего прошлого, влиять на решения, которые вы принимаете, создавая ваше портфолио.
Портфолио обеспечен успех, если в нём идеально соотносятся личностное авторское звучание, своеобразие, простота и лёгкость использования. Пусть ваше портфолио отличается от всех прочих и способствует достижению ваших целей.
Вернуться назад