Самые популярные приёмы в дизайне веб-портфолио — Look At Me
Текст
Полина Васильева
Каждый дизайнер стремится ответственно подойти к дизайну портфолио, чтобы оно было объективным выражением не только навыков и способностей, но и богатого воображения. Мы выбрали 10 популярных приёмов, хотя бы один из которых можно встретить на любом личном сайте.
Параллакс-скроллинг
by Jake Blakeley
Параллакс-скроллинг представляет собой разную скорость движения фонового изображения и элементов на переднем плане. Подобный эффект можно наблюдать в восьмибитных ретро-играх, где несколько слоёв двигаются с разной скоростью, создавая эффект объёмного пространства. Варианты воплощения параллакс-прокрутки зависят от фантазии веб-дизайнера: на сайтах-портфолио для этого эффекта можно написать целый сценарий, согласно которому вы обеспечите пользователям интересное иллюстрированное путешествие, так как фоновое изображение также может видоизменяться в течение прокрутки страницы. Минусы этого — уменьшение производительности сайта. Использование javascript значительно утяжеляет страницу, а следовательно, снижает скорость загрузки. Выход — применение эффекта лишь к нескольким элементам страницы.
Примеры
Оформление социальных
плагинов
by Seth Eckert
Трудно найти современный сайт-портфолио без каких-либо отсылок к соцсетям: Facebook, Tumblr или Behance давно стали полем работы PR-специалистов самого разного толка, а значит, для собственного продвижения полезно не только иметь блог и несколько активных аккаунтов, но и не полениться сделать красивые ссылки на сайте-портфолио. Обычные иконки приелись интернет-пользователям, стало быть, их могут заинтересовать нестандартные социальные плагины.
Примеры
Креативный подход
к типографике
by Ricky Linn
Креативный подход дизайнеров к типографике заполонил витрины магазинов, меню ресторанов и не обошёл стороной и веб-индустрию. Шрифтовая составляющая в вебе может представлять собой основной скелет дизайна всего сайта, и речь здесь не столько о блоках текста, сколько об эффекте акциденции. Благодаря стремлению к адаптивности сайтов, использование ярких шрифтов стало важнейшей частью современного дизайна сайтов. С появлением ресурсов, где продаются или доступны для бесплатной загрузки самые разнообразные шрифты, дизайнеры начали активно сочетать в своих макетах несколько акцидентных гарнитур. В случае оформления сайта-портфолио, важно всё же не переусердствовать: за формой подачи должно угадываться содержание.
Примеры
Адаптивный дизайн
by Chris Bannister
Времена, когда для сайта надо было разрабатывать несколько версий с учётом всех платформ, канули в прошлое благодаря адаптивному веб-дизайну. Исследования показывают, что большую часть трафика дают именно мобильные пользователи, а это значит, что сайт должен круто выглядеть не только на ПК, но и на великом множестве гаджетов, обладающих различным разрешением и форматом. Изначально разработчики рассматривали проектирование веб-приложений как второстепенную задачу, однако теперь ситуация в корне изменилась: проектирование начинается именно с адаптивной версии. Важно продумать, как передать концепцию всего сайта (в нашем случае сайта-портфолио) с помощью небольшого экрана и всего одной колонки.
Примеры
Фиксированное
меню навигации
by Andreas Brixen
Закреплённые элементы верхнего меню всегда остаются на одном месте при прокрутке страницы, иными словами, вы не оставляете посетителям шанса заблудиться в разделах вашего сайта. Эта функция особенно удобна для адаптивных сайтов: отпадает надобность создавать кнопку «подняться наверх», и, ко всему прочему, очень стильно выглядит. Ключевые разделы вашего портфолио будут у пользователей всегда перед глазами. Роль удобной навигации в проектировании сайта трудно переоценить и нельзя считать задачей второстепенной: соответствующая панель может быть как горизонтальной, так и вертикальной.
Примеры
Вертикальный скроллинг
by Creativedash
Решения, способствующие оптимизации сайтов, стали ключевыми для веб-дизайнеров. Вертикальный скроллинг, в той же мере что и фиксированная навигация, отвечает за удобство просмотра страницы с мобильных гаджетов. В данном случае первоочередная задача дизайнера — расположить всю необходимую информацию на одной странице. Таким образом вы спасёте пользователей от загрузки новых страниц, а значит, сэкономите им время.
Примеры
Фото- и видеобэкграунд
by Brett Smith
Фотография на фоне — не новый, но по-прежнему популярный приём. Это решение, актуальное не только для портфолио стилистов, студий и фотографов, но и всех, чью деятельность можно максимально эффектно подать с помощью фотографии. Помимо смыслового содержания фото, стоит обратить внимание на цветовую палитру, контрастность и наличие/отсутствие мелких деталей, которые так или иначе диктуют расположение различных элементов дизайна на главной странице.
Не меньшей популярностью пользуются видеобэкграунды, которые вне зависимости от продолжительности ролика увеличивают длительность нахождения пользователя на сайте. Однако если вы решаете сделать ролик длинным, имеет смысл разбить его на части и сделать переход к этим частям. Возможность звукового сопровождения также должна быть подвластна пользователю: лишние звуки могут отвлекать, тем более если фоном у него уже играет какая-то музыка из любимого плейлиста.
Фотобэкграунд
Видеобэкграунд
Лаконичный дизайн
by Dmitry Samarenkov
Утверждение «всё гениальное просто» не имеет срока годности: так называемый flat design не теряет популярности среди веб-дизайнеров. Пользователи будут вам благодарны за отсутствие перегруженности визуального и текстового контента. Кроме того, использование нейтрального фона (никаких градиентов, текстур и теней) и ярких цветовых акцентов на важных элементах не даст пользователю возможности отвлечься. На что обращать внимание и что брать за основу: модульная сетка, качественная типографика, отказ от любых элементов, не отвечающих за функциональность. Несмотря на иллюзорную простоту, в минималистичном решении нередко заложена целая философия, иначе дизайн рискует стать попросту скучным.
Примеры
Анимация
by Levani Ambokadze
В настоящее время анимировать элементы страницы веб-сайта стало возможным без использования утяжеляющих страницу javascript. Получив мощную поддержку среди дизайнеров и разработчиков, данный приём поможет создать по-настоящему классные эффекты. Анимация акцентирует внимание пользователя на нужных элементах. Сайт становится интересно разглядывать благодаря скроллингу, когда анимационные эффекты появляются при прокрутке сайта.
Примеры
Использование инфографики
by Piotr Kwiatkowski
Инфографика — способ упорядочить, визуализировать и сократить до необходимого минимума объём информации любого рода: от статистических данных до презентации вашего творческого процесса. Использование инфографики для веб-сайтов вряд ли можно назвать свежей идеей, однако такой метод подачи информации не теряет своей актуальности. К тому же, различные инновации позволяют использовать этот тренд весьма небанально: если вас не пугает трудоёмкий процесс создания, вы можете взять на вооружение видео и анимацию, хорошие иллюстрации и подробные объяснения тех или иных пунктов. Обратить внимание при создании инфографики следует в первую очередь на внутреннюю целостность всей истории, которую вы хотите рассказать. Помните, что инфографика должна, прежде всего, иметь твёрдую концепцию и преследовать определённую цель.
Примеры
Исследование дизайна сайтов портфолио — закономерности и современная практика / Habr
Для этой статьи мы отобрали 55 дизайн студий и студий веб-разработки, проанализировали их сайты портфолио и определили популярные закономерности дизайнов для таких сайтов. Основной целью этого изучения было предоставление фрилансерам и дизайн студиям полезных ориентиров для создания своего собственного портфолио.Мы сделали мозговой штурм самых важных вопросов касающихся дизайна и задали вопрос дизайнерам со всего света – какие решения они чаще всего должны принимать при создании дизайна для сайта портфолио. Мы также попросили дизайнеров сказать нам какие именно вопросы они бы хотели увидеть проанализированными в данной статье. В итоге у нас получился список из 40 вопросов касающихся дизайна сайта портфолио, которые мы сгруппировали по важности. И, в конце концов, мы искали хорошие сочетания состоявшихся дизайн студий и красивых сайтов портфолио малых и больших агентств.
Далее мы создали список из этих 40 вопросов и прошлись по ним для каждого из сайтов выбранных дизайн студий, делая для себя заметки по каждому из них. В целом данное исследование заняло 75 часов.
Данная статья представляет предварительные результаты нашего исследования дизайнов сайтов портфолио. Ниже мы будем обсуждать визуальный дизайн, структуру, макет и навигацию сайтов портфолио. Мы также просмотрели детали каждой секции таких сайтов, таких как “О нас”, “Клиенты”, “Услуги”, “Портфолио”, “Контакты”. Конечно же, вы не обязаны следовать всем советам из данной статьи. Вместо этого просто используйте данные советы для выявления чего-то своего, что можно использовать в своих дизайнах, что отличительно и легко запоминаемо.
Главный вопрос, на который приходится ответить при создании сайтов портфолио, это создать визуально привлекательный темный сайт (что означает использование больших и жирных шрифтов и ярких цветов) либо же мягкий и легкий сайт (сайт с простой структурой и легкой типографикой).
Удивительно, но согласно результатам наших исследований:
- 82% сайтов портфолио имеют легкий дизайн с натуральными и спокойными цветами. Фоны этих сайтов это светлые оттенки серого и желтого а не чисто белый цвет (например Happycog, SimpleBits, 80/20 и Concentric Studio).
- 29% сайтов портфолио имеют очень живые, яркие цвета (например, 45royale, Hicksdesign, Duoh, Frexy и Odopod).
- Темные сайты гораздо чаще имеют большую типографику (например Adaptd, OrderedList, Carsonified, Blue_Flavor, SidebarCreative и pod1).
Интересно, что во многих из сайтов портфолио варьируется количество столбцов между секциями сайта. Страницы “Клиенты” и “О нас” обычно имеют 2 столбца, в то время как главная страница имеет от трех до четырех столбцов, которые показывают важную информацию в компактном виде. Фактически, мы заметили, что страницы получают все больше и больше столбцов: каждый шестой сайт портфолио, который мы видели, имел как минимум одну страницу с четырьмя столбцами.
По данным наших исследований, некоторые веб-сайты рискуют экспериментируя нестандартными дизайнами или навигацией с использованием JavaScript либо другими методами оригинальных макетов. Большинство из сайтов портфолио имеют традиционные блочные макеты страниц, с двумя или тремя четко разделенными столбцами и простым и удобным навигационным меню.
carrot creative имеет оригинальный макет из одной страницы с использованием навигации с JavaScript прокруткой, что необычно и запоминаемо, но необязательно интуитивно.
Также, большинство сайтов портфолио состоят из многих, детализированных страниц, с относительно глубокими подразделами. Минималистичные одностраничные сайты портфолио тоже редкость. Из сайтов, которые мы исследовали, только 5.4% имели простой и минималистический дизайн (а более конкретно Neutron Creations, Fish Marketing и 80/20).
Сайты портфолио обычно имеют большой вводный блок в шапке страницы, который содержит краткое дружественное изложение предоставляемых услуг и тех преимуществ, которые будут у клиента, если тот воспользуется их услугами. Блок, как правило, содержит красочные изображения и большую типографику. Он передает как образ всей компании, так и всех ее сотрудников делая это одинаково профессионально и дружелюбно. Такие блоки обычно расположены сразу под логотипом, на первой странице.
По данным наших исследований, 79% сайтов портфолио имеют вводный блок в верхней части сайта, в каком нибудь виде. Мы также заметили, что некоторые из сайтов отказываются от вводных блоков в пользу показа своих последних работ (например, concentric studio, HUGE inc. и Wishingline). На таких сайтах маленькая ссылка “О нас” ставится на каком нибудь другом месте на странице, обычно внизу страницы.
Сайт 45royale Inc. имеет дружественный вводный текст на главной странице. Он сообщает, что этот сайт принадлежит компании, которая находится в штате Джорджиа (Georgia) и которая создает легкие, уникальные и удобные сайты и веб-приложения.
В 90-х, макеты традиционно выравнивались по левому краю с либо вертикальным меню на левой стороне, либо горизонтальным меню в шапке. Это поменялось с ростом масштабов использования мониторов с широким разрешением. Все больше и больше дизайнеров создают свои дизайны, выравнивая макет по центру, чтобы пробелы по краям балансировали его. Мы замечали тенденцию к более оригинальному выравниванию по правому краю в начале года, но при данном исследовании мы больше не нашли сайта портфолио с выравниванием по правому краю.
По данным наших исследований,
- не существует макетов выровненных по правому краю,
- 89% макетов сайтов выровнены по центру,
- остальные имеют либо оригинальные адаптирующиеся макеты (Method и Carrot Creative), яркие фоновые рисунки, которые заполняют свободное место на странице (например, Duoh) или просто незаполненные места оставлены как есть (например, Ideo, maybe.for.you и Area17) – конечно же вы увидите это свободное пространство, если у вас монитор с большим разрешением.
Куда в макете поставить блок основной навигации по сайту? Вопрос нетривиальный и часто ведет к спорам между дизайнерами. Удивительно, но наше исследование показало, что большинство дизайнеров сайтов портфолио ставят блок основной навигации в верхний правый угол макета. Фактически:
- 80% сайтов портфолио имеют большое горизонтальное меню навигации,
- 51% имеют горизонтальное меню навигации с выравниванием элементов в нем по правому краю (например, Concentric Studio, Mark Boulton Design).
- 16.4% имеют горизонтальное меню навигации с выравниванием элементов по левому краю (например Squared Eye, Adaptd, BarbarianGroup),
- 11% имеют горизонтальное навигационное меню на всю ширину страницы с большими интерактивными элементами (например, buffalo, SimpleBits).
Вертикальная навигация используется редко и другие подходы (например, горизонтальная навигация внизу страницы) можно увидеть на нетрадиционных макетах, хоть и редко.
Сайт Area17 имеет макет и навигацию с выравниванием по левому краю. Каждый из элементов навигации является довольно большим интерактивным элементом.
В то время как многие сайты портфолио довольно маленькие и представляют пользователям только некоторую информацию по предоставляемым услугам и о компании, некоторые сайты портфолио довольно объемны и представляют различные тематически исследования, содержат в себе блог и детальную информацию о каждом из своих больших проектов. В общем, если сайт содержит много информации, функция поиска по сайту может быть полезна для пользователей сайта. Как оказалось, очень немногие компании интегрируют функцию поиска в свои сайты портфолио.
- 89% сайтов портфолио что мы изучили, не имели функции поиска,
- только 11% сайтов имели поле ввода поискового запроса, обычно простое поле. Большинство хозяев таких сайтов портфолио имеют свой блог, который они регулярно обновляют (например pod1, OmniTI, fortysevenmedia, Ideo, Viget).
Flash, который является техникой для богатых интерактивных дизайнов, кажется теряет свою популярность среди веб-дизайнеров, по крайней мере среди тех, которые создают сайты портфолио. Причина наверное состоит в том, что некоторые эффекты Flash могут быть заменены передовыми методами JavaScript, которые часто доступны в популярных JavaScript библиотеках как легкие в использовании модули.
Слайдшоу, анимационные эффекты и эффекты перехода теперь могут быть созданы с использованием JavaScript решений, которые легкие, быстрые и более простые. Богатые Flash анимации и видеоэффекты заменяются более простыми JavaScript техниками. Хотя Flash иногда используется, например, для динамической смены текста.
Сайт BKWLD является одним из нескольких сайтов портфолио в нашем исследований, которые используют тяжелые Flash файлы во всем сайте.
В нашем исследовании, только 3.7% из всех сайтов портфолио использовали большое количество Flash анимации и компонентов (в частности, Lift Interactive, Bkwld и другие, но в основном для слайдшоу и презентаций). Вполне вероятно, что это из-за того, что мы не включили в наш список исследования те веб-студии, которые создают интерактивные сайты, студии Flash дизайна или студии видео продукции.
Одним из важных целей нашего исследования было понять, как дизайнеры передают контактную информацию в целом. Должны ли клиенты нажать на кнопку “Связаться с нами” для того, чтобы связаться с дизайн студией? Или же контактные данные поставлены на самом верхнем, видном месте страницы? Или может дизайнеры предпочитают ставить контактную информацию внизу, в то место где большинство пользователей ожидает его увидеть?
Сайты, которые мы проанализировали, ставили контактную информацию практически во всех областях страницы: в шапке, на левой стороне, на правой стороне, внизу страницы, даже посередине. Но мы также заметили некоторые интересные закономерности. Обратите внимание, мы были заинтересованы в следующем:
- где находится ссылка на страницу “Связаться с нами”,
- где фактически расположена контактная информация.
Оказывается, что:
- всего лишь 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%) являются самыми популярными для ссылок на страницы с контактной информацией.
Страница “О нас” на сайтах портфолио используется для представления членов команды, объяснения философии студии и для того, чтобы доказать наличие опыта компании и профессионализма. Эта страница придает студии персональный подход, и если создан подобающим образом, вызывает доверие потенциальных клиентов.
Страница “О нас” сайта Weightshift.com показывает членов группы и рассказывает о них.
Страница “О нас” является обязательной для большинства сайтов портфолио: 89% проанализированных сайтов портфолио имели ссылки на страницу “О нас” в главном навигационном меню (исключение составляют сайты 31three, Huge Inc и другие).
Уровень детализации, который вы используете для представления вашей студии, зависит от вас. 59.1% сайтов портфолио, которых мы изучали, не имели дополнительные страницы и предлагали посетителям краткий и компактный обзор. Фотографии членов команды, их личные данные и информация о процессе разработки очень часто встречается на таких страницах. Общий тон текста, как правило, неформальный, дружественный, а иногда даже смешной. Самыми популярными формулировками ссылок на страницу “О нас” являются формулировки “About” (43.6%), “About us” (27.3%) и “Who we are” (7.2%).
Один из явных признаков профессионализма и хорошей репутации в индустрии, это солидный список клиентов, с которыми ваша компания работала. Конечно же, чем влиятельнее клиенты в списке, тем больше вероятности того, что потенциальные клиенты обратят на вашу студию внимание. Наш опыт показал, что потенциальные клиенты всегда смотрят на список клиентов, исследования и отзывы, когда ищут дизайн студию. Поэтому мы были удивлены, обнаружив лишь несколько студий, которые имели отдельную страницу со списком своих клиентов.
Список с информацией о клиентах на сайте Squared Eye содержит информацию о всех клиентах, с которыми компания работала. С такими именами в списке как Фонд Гейтс, Институт Мира США, Телекомпания Фокс и Почтовая Служба США, компания кажется заслуживающим доверия.
Из всех сайтов портфолио, которые мы проанализировали, только 47.2% имеют список клиентов (либо в виде отдельной страницы, либо расположенной на главной странице). В большинстве случаев клиенты представлены в виде их логотипов, которые ведут на отдельные страницы для каждого клиента, содержащие подробное описание проделанной работы, также отзывы от клиента. Самыми популярными формулировками ссылок для таких страниц являются “Our clients” (46.1%), “Clients” (39.6%) или “Client list” (15.4%).
Учитывая тот факт, что посетители обычно приходят на такие сайты за поиском услуг, целесообразно создать отдельную страницу или раздел на главной с названием “Услуги”. Потенциальные клиенты обычно имеют довольно хорошее понимание того, что они ищут (динамичный дизайн, полиграфический дизайн, веб-дизайн, дизайн обложки CD/DVD и т.д.). Исходя из этого, будет хорошей идеей показать на сайте список предоставляемых услуг.
Страница услуг сайта Singalfeuer весьма кратким образом представляет предлагаемые услуги. Иконки и маленькие иллюстрации используются для хорошего эффекта.
67.2% сайтов портфолио, которые мы изучали, имеют какую нибудь отдельную страницу со списком услуг. Остальные ставят эту информацию на странице “О нас” или на главной странице. Страницы “Услуги” иногда имеют дополнительные страницы (31.5%), но в большинстве случаев одиночная страница весьма большая и подробная.
Связывание вашей страницы портфолио со страницей услуг, безусловно, является хорошей идеей, потому что она соединяет теорию с практикой и показывает клиентам на что ваша студия на самом деле способна. Самыми популярными формулировками для ссылок на страницу “Услуги” являются “Services” или “Our Services” (75.7%), а следом идет “What we do” (10.8%).
Очевидно, что потенциальные клиенты хотят видеть на что способна дизайн студия. Соответствует ли она их стилю? Какой эстетики она придерживается для визуального дизайна, типографики и удобности? Выглядят ли их дизайны интуитивно и приятно? Это те вопросы, на которые потенциальные клиенты хотят услышать ответы, когда они интересуются какой либо дизайн студией. Исходя из этого, солидное представление предыдущих работ может убедить клиента связаться с дизайн студией.
Тематические исследования 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%).
Фактически, страницу рабочего процесса лучше всего создавать как дополнительную страницу для страницы “О нас”. Однако, некоторые дизайнеры хотят более детально представить свой рабочий процесс. В то время как 74.5% сайтов портфолио не имеют страницы рабочего процесса вообще, остальные сайты для этой цели имеют достаточно объемные страницы, где они представляют весь процесс разработки, для того, чтобы потенциальные клиенты знали, что обе стороны могут ожидать.
Страница рабочего процесса сайта 45royale: компания объясняет из чего состоит их рабочий процесс и каким образом будут клиенты принимать участие в процессе дизайна.
Безусловно, хорошая идея объяснять потенциальным клиентам, каким образом они будут участвовать в процессе дизайна. Самыми популярными формулировками ссылок на эту страницу являются «How we work» или «Work with us» (42,8%), «Process» или “Our process” (35.7%) и “Approach” (7.1%).
Если все пройдет хорошо и ваше портфолио заслужило интерес посетителей, тогда страница с контактной информацией будет их конечным назначением. Сделайте все возможное, чтобы процесс связи с вами был как можно легким. Убедитесь в том, чтобы клиент смог предоставить всю необходимую информацию через веб-форму. Вы также можете предоставить клиентам ваш номер телефона, адрес электронной почты и почтовый адрес, чем больше, тем лучше. Предоставление информации как к вам доехать, кнопки на профили в социальных сетях, виртуальные визитные карточки тоже хорошие идеи.
Страница с контактной информацией студии OmniTI имеет информацию о том, как к ним доехать, адрес офиса, персональную контактную информацию, виртуальные визитные карточки, номера телефонов и информацию о рабочих часах. Также дает информацию о том закрыт ли офис в данный момент или нет. Это пример хорошей страницы с контактной информацией.
По данным нашего исследования:
- 9% сайтов не имеют отдельной страницы с контактной информацией (вместо этого они показывают контактную информацию внизу каждой страницы),
- информация о том, как к ним доехать (часто с интерактивной картой Google) есть на 45.4% сайтах (!),
- 83.6% показывают номер телефона и адрес электронной почты на странице с контактной информацией,
- 76.7% показывают почтовый адрес на странице с контактной информацией,
- 69% сайтов студий имеют веб-форму для связи с ними,
- 14.5% предлагают для скачивания виртуальные визитные карточки, обычно они расположены рядом с адресом электронной почты,
- ссылки на профили в социальных сетях, таких как Facebook, Twitter и LinkedIn встречаются тоже часто (14.5%).
Также мы заметили несколько отличительных элементов дизайна, которые дизайн студии предлагают своим потенциальным клиентам.
Один из популярных подходов заключается в предоставлении какой нибудь формы запроса проекта или предложения, которые потенциальные клиенты должны будут заполнить основными деталями своего проекта (например: 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).
Мы также выяснили, что:
- ни один из сайтов портфолио не имеет секции часто задаваемых вопросов (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% сайтов не имеют страницы представления рабочего процесса,
- страница с контактной информацией должна содержать информацию о том как проехать в офис студии, номер телефона, адрес электронной почты, почтовый адрес, виртуальные визитные карточки и он-лайн форма связи.
Онлайн-портфолио программистов, верcтальщиков и веб-разработчиков
Тема сегодняшней подборки удачного веб-дизайна, пожалуй, одна из самых многообещающих. Мы собрали интересные портфолио программистов, верстальщиков и веб-разработчиков. Этим специалистом уж никак нельзя быть сапожниками без сапог, ведь по их сайтам сразу видно что они умеют. Поэтому каждый из них старается сделать свой сайт самым интересным, быстрым и привлекательным. Давайте посмотрим на результаты этих трудов.
duhaihang.com
angela.io
owenod.com
sergeylukin.com
lenghart.sk
victorciel.com
manato.ca
riccardozanutta.com
wafeek.com
alexeygarin.com
lg-digitale-medien.de
joseluisgj.com
msabai.com
tkmh.me
filipbenda.com
nicolabolton.co.uk
arielwenzhang.com
nyondesign.it
Автор подборки — Дежурка
Смотрите также:
- Хороший пример от дизайн-агентств
- Персональные одностраничные сайты
- Одностраничные портфолио для вдохновения
Портфолио веб-дизайнера
До сих пор мне трудно представить, что есть веб-дизайнеры, которые не имеют собственных веб-сайтов. В век компьютерных технологий крайне важно, чтобы у каждой творческого человека было своё цифровое портфолио, особенно если он работает в сфере веб. Сайт должен быть чистый и легким для восприятия, а главное, удачно демонстрировать ваши работы. В данном случае поговорка «сапожник без сапог» неуместна, так как первое, на что будут обращать внимание клиенты и работодатели — это ваше портфолио.
Создать портфолио веб-сайта — это не просто разместить несколько изображений в Интернете. Часто портфолио может спасти Вас (и потенциальных клиентов) от потерянного времени и потраченных нервов.
Создание хорошего портфолио, которое привлекает клиентов — задача не из легких, поэтому в этой статье мы будем делиться советами и рекомендациями о том, как можно расширить возможности веб-портфолио.
1. Лучше меньше, но лучше: преимущество качества над количеством
Продемонстрируйте только лучшие работы, а не все дизайн-проекты, над которыми вы работали в последние десять лет. Ваша цель — удивить и заинтересовать потенциальных клиентов и работодателей качеством ваших работ, а не утомить их количеством. Вам нужно, чтобы заказчики получили представление о том, какую работу вы можете сделать и в каком стиле вы работаете.
2. Больше информации
Убедитесь, что контактная информация легко доступна, а также предложите несколько способов связаться с вами, будь-то адрес электронной почты или социальные сети , — чем больше вариантов, тем лучше.
Добавьте немного информации о том, какой тип работы вы сможете сделать, ищите ли вы работу в офисе или отдаёте предпочтение фрилансу. Расскажите немного о себе, своих навыках, интересах. Не плохо бы было добавить фотографию.
Эти вещи сделают вас более представительными для посетителей сайта и помогут им наладить связь с вами. Людям нравится взаимодействовать друг с другом, и предоставление этой информации может помочь вам получить преимущество.
3. Сделайте незабываемый дизайн
Уникальный креативный дизайна не только выделит ваш сайт из остальных, но и поможет привлечь новых заказчиков. Он будет служить предметом зависти и источником вдохновения для других веб-дизайнеров. Не относитесь к созданию портфолио, как к необходимости, делайте его с интересом и любовью и попробуйте вложить в него частичку своей души.
4. Постоянно обновляйте портфолио
Нет ничего печальнее, чем чудесное портфолио, которое было сведено на нет его создателем. Постоянно обновляйте своё портфолио свежими новыми проектами, контентом, и т.д.
Клиент может обратить внимание на один из ваших сайтов, который был создан 5 лет назад, и откуда ему будет знать, что вы подняли свои навыки на новый уровень.
5. Описывайте свои работы
Иногда людям бывает интересно узнать о назначении той или иной работы, для кого и с какой целью она создавались. Напишите, какую роль вы принимали в создании сайта (например, дизайна и вёрстка) и обязательно укажите ссылки на проекты, которые успешно функционируют в сети. Многим будет интересно увидеть не только картинку, но и функциональную реализацию ваших работ.
6. Раздел «Блог» на сайте
Добавьте раздел для блога, чтобы поделиться своим личным опытом, связанным с веб-достижениями, т.е. где ваши дизайн-проекты были показаны, какие награды вы, возможно, получили и т.д.
Используйте блог для того, чтобы дать клиентам представление о ваших интересах, помимо создания веб-страниц, чтобы показать им, что вы реальный человек, а не какой-то робот, который сидит за компьютером.
Заключение
Не забывайте размещать свои работы везде, где это уместно делать. Вот несколько сервисов, на которых вы можете бесплатно добавить своё портфолио, они помогут показать ваши работы более широкой аудитории. Думаю, в описании они не нуждаются:
При написании статьи были использованы материалы из designshack и creativenerds
Советы и рекомендации по портфолио UX-дизайнера / Habr
Простая и понятная статья от Micah Bowers о том как лучше подойти к созданию портфолио UX дизайнеру, чтобы получить профит.«То как вы поднимаетесь на гору, важнее факта достижения вершины».
В своих мемуарах Let My People Go Surfing Ивон Чуйнард, основатель глобального наружного бренда Patagonia, пишет:
«То как вы поднимаетесь на гору, важнее факта достижения вершины».
Именно в мире UX дизайна методология важна более всего, а особенно в поиске клиентов и карьерных возможностях. Один из лучших способов для разработчиков UX продемонстрировать методологию и навыки профессиональное решение проблем — через хорошо продуманное сайт-портфолио.
Вместо того, чтобы думать о портфолио как демонстрации навыков — «Вот что я могу сделать» — дизайнеры UX должны воспользоваться возможностью, чтобы проиллюстрировать процесс и создать восхитительный пользовательский опыт: «Вот как я использую дизайн для решения проблем людей».
Подобно тому как люди стремятся работать в тех отраслях в которых они хотят работать, дизайнеры должны адаптировать портфолио к определенной аудитории. Почему?
В UX Дизайне есть такие направления как: дизайнер взаимодействия, исследователь UX, информационный архитектор и стратег пользовательского опыта. Эти роли существуют, чтобы улучшить опыт пользователей, но они не различны по сути. Каждый из них вносит свой уникальный вклад в процесс разработки продукта.
Замечательный способ вдохновиться на создание своего портфолио — это просмотр работ дизайна UX агентств. Этот пример из Momentum Design Lab показывает, как объединить сложный процесс проектирования с простой графикой и понятным языком.
В этом руководстве мы покажем дизайнерам UX, как создать блестящий веб-сайт портфолио…
- Рассмотрение основных вопросов о процессе;
- Делимся практическими советами и ресурсами по дизайну портфолио; а также
- Яркие примеры UX портфолио.
Давайте начнем.
Вопросы по портфолио на которые должен ответить каждый UX дизайнер
Когда дело доходит до портфолио UX, у дизайнера не должно быть двусмысленности в отношении навыков, которыми они владеют, в отношении процессов которые они используют, и в отношении видов проектов, на которых они специализируются, но в то же время информации не должно быть слишком много.
Таким образом, портфолио UX не должно стать хранилищем для ВСЕХ прошлых работ. Выберите проекты, которые являются конкретными, свежими и выдающимися, и представляйте их как процесс со всеми шагами проектирования UX, которые потребовались для достижения наилучшего решения.
Чтобы портфолио было четким и понятным необходимо планирование. До того как приступить к созданию портфолио UX, есть важные вопросы, на которые необходимо ответить. Не пропускайте этот шаг.
Ответы могут пролить свет на содержание портфолио и служить в качестве организационной структуры сайта.
К какому типу UX дизайнера я отношусь?
Не ограничивайте возможности будущей карьеры прошлыми должностями. Найдите время, чтобы оценить, что вы на самом деле делаете и как вы это делаете. Вы можете быть удивлены обнаружив, что на протяжении всей своей карьеры вы занимались не тем. Целью этого вопроса является выявление паттернов решения проблем на которые вы опираетесь снова и снова в процессе проектирования UX.
Это довольно емкий вопрос, но не бойтесь того, что вы можете выяснить. Как и все объемные вопросы, лучше разбить его на более мелкие вопросы, поэтому спросите себя:
- Есть ли нечто общее что проходит через все виды проблем UX дизайна, которые я обычно решаю?
- Каковы повторяющиеся шаги моего процесса проектирования UX?
- Какие методы я использую для проведения исследований, и что я делаю с результатами?
- Существуют ли подходы к решению проблем, которые я ценю выше других?
- Как я дошел до этого момента в своей карьере дизайна UX и какой у меня реальный опыт?
* Совет. После того, как вы ответили на эти вопросы, суммируйте все свои ответы в одном, легко читаемом предложении и покажите его на странице «Главная» или «Об авторе» вашего портфолио.
Дизайнер Miro Kirov приветствует посетителей своего портфолио четким описанием его профессионального опыта, сильных сторон и достижений. При этом он также намекает на тип клиентов, с которыми он стремится сотрудничать.
Что я делаю в области UX дизайна
Когда вам станет понятен внутренний процесс решения проблем, придет время более детально узнать чем вы на самом деле занимаетесь в качестве UX дизайнера.
Вот несколько вопросов, которые помогут вам начать работу:
- Я UX дизайнер или исследователь?
- Я UX специалист широкого профиля? Могу ли я легко переключаться между исследованиями и дизайном UX?
- Я специалист? Есть ли конкретная задача исследования или дизайна UX, в которой я преуспеваю и хотел бы совершенствоваться?
- Могут ли мои навыки охватить дизайн пользовательского интерфейса и визуальный дизайн?
- Есть ли у меня способность, опыт и желание управлять командой профессионалов UX?
Ваши ответы важны, потому что они показывают, какие проекты должны быть включены в ваше портфолио, и как позиционировать себя.
Дизайнер UX / UI Kat Windley использует изображения обложек портфолио, чтобы продемонстрировать свой опыт работы с крупными заказчиками индустрии моды.
Например, если вы действительно хотите работать дизайнером взаимодействия, было бы неразумно создавать портфолио вокруг проектов и письменных описаний, которые бы подчеркивали прошлый опыт в нишевой области этнографических исследований.
Вот грубый пример: длинный список «соответствующих навыков» на вашем сайте портфолио не повышает ценность ваших посетителей.
Длинные списки дизайнерских навыков и достижений трудно читать, легче проигнорировать.
Лучший способ поведать о ваших способностях в UX дизайне — через ваши проекты. Это означает, что вы объединяете программы и методы проектирования, которые вы используете для презентации визуальных эффектов и описаний вашего проекта.
Чтобы начать работу, возьмите проект, которым вы гордитесь, и задайте такие вопросы, как:
- Что я внес в этот проект на каждом этапе процесса проектирования UX?
- Какие инструменты и методы я использовал для этого?
- Я создал или помог реализовать стратегию, которая оказала большое влияние на конечный продукт?
- Был ли я вовлечен в ранние переговоры с клиентом или разработку проектного предложения?
- Были ли какие-либо серьезные препятствия, которые требовали от меня выполнения задач за пределами моей обычной компетенции?
- Не продавай себя задешево. Если вы внимательно изучите свое участие в проекте, вы, скорее всего, обнаружите, что сделали намного больше, чем просто «провел исследование» или «пользовался программным обеспечением».
* Совет: Некоторые дизайнеры UX включают категорию «Навыки» для каждого проекта в своем портфолио. Это может быть эффективным, но оно также может иметь неприятные последствия, если вы перечислите слишком много навыков или выделите те, которые не соответствуют общей структуре вашего процесса проектирования UX.
Кому нужны мои навыки UX дизайна?
Молодым и неопытным дизайнерам UX в самом начале непросто определиться с видом работ которые они хотели бы выполнять, но с течением времени и несколькими успешными проектами становится легче представить желаемый карьерный путь. Это важный аспект UX портфолио.
С теми людьми, с которыми вы работаете, проектами, над которыми вы работаете, и отрасль, в которой вы работаете, должны быть четко указаны в примерах и описаниях в вашем портфолио.
Например, если у вас есть очень конкретная цель стать пользователем-исследователем цифровых продуктов, которые влияют на мир университетских видов спорта, ваше портфолио должно это отразить.
Чтобы получить представление о том, как и для кого вы хотели бы использовать свои навыки проектирования UX, задайте себе вопросы:
- Каковы две лучшие отрасли, в которой я бы хотел работать?
- Есть ли у меня проекты или прошлый опыт, которые помогут мне получить работу в моей любимой отрасли?
- Какой рабочий темп мне нравится? Устраивает ли меня работа сверхурочно?
- Хочу ли я быть фрилансером? Работа со стартапами? Или хотите быть карьеристом?
- Существует что-то на что я хочу чтобы влияли мои работы?
- Сколько я хочу получать?
- Где я хочу жить? Я хочу работать удаленно?
Это не исчерпывающий список, хорошо начать хотя бы с этого. Если вы опытный разработчик решений для UX, вы будете пользоваться большим спросом, но это также означает, что люди будут готовы нанять вас, даже если вы им не совсем подходите. В конечном счете, вы должны периодически включать внутреннего цензора и планировать карьеру UX, которая согласуется с вашими амбициями.
Рассказывай и показывай — Практические советы по дизайну для UX-портфолио
Каждый пиксель вашего сайта портфолио — это возможность создать восхитительный пользовательский интерфейс. От визуализации проектов до информационной архитектуры сайта каждый элемент дизайна является шансом заявить: «Я — топовый дизайнер UX».
Итог: относитесь к вашему портфолио как к профессиональному проекту, и включайте эти практические советы по дизайну в разработку сайта.
Визуальная простота должна занимать важнейшее место в дизайн процессе.
- Представляйте артефакты вашего процесса проектирования UX в чистом, однородном и последовательном виде. Речь идет о эскизах, каркасах, картах пользовательских путешествий, прототипах и многом другом.
- Включение таких функций, как сложные анимации или нетрадиционные макеты страниц, может отвлекать посетителей от реальной причины, по которой они пришли на ваш сайт — чтобы увидеть вашу работу.
- Конечно можно показать глянцевые картинки конечного продукта, но это лишь небольшая часть дела. HR менеджеры и потенциальные клиенты хотят быстро увидеть и понять ваш процесс, а глянцевый интерфейс не попадает в основу ваших усилий по решению проблем.
Опытные дизайнеры UX, такие как Jeffrey Davis, знают ценность показа неглянцевых артефактов своего процесса проектирования (например, эта таблица стратегии содержания).
Даже проектные агентства UX, такие как Cyber Duck обмениваются концептуальными зарисовками и интерфейсами с низкой точностью, как способ продемонстрировать процесс решения проблем.
- Предоставьте итоговое описание каждого проекта в своем портфолио.
- Кратко определите проблему и покажите, как были исследованы различные решения.
- Итог проекта — это не список того, что вы сделали, а способ показать каких положительных результатов достигли.
Проект Билла Триббла кратко описывает проблему дизайна UX и показывает свою роль в решении.
Продемонстрируйте свою экспертность объясняя процесс без жаргона
- Никто не приходит на ваш сайт портфолио UX, чтобы быть впечатленным вашими обширными знаниями технического жаргона.
- Используйте пояснения, доступно и профессионально, и избегайте чрезмерного самолюбования и инсайдерского юмора.
- Объясняйте простым языком, который будет понятен по мере изменения технологий.
- Простота располагает к пониманию, поэтому пишите на простом языке, который может быть легко понят неспециалистами. В конце концов, человек, отвечающий за найм, может быть не знаком со сложной терминологией UX.
Исследование дизайна UX может быть сложным, но дизайнер Maria Corino использует понятный для понимания язык, чтобы прояснить намерение ее исследовательских усилий.
Продемонстрируйте свою способность сотрудничать с другими
- Эта способность не должна быть намеренной, но должна показывать примеры, где вы хорошо работали с другими специалистами в области проектирования и разработки.
- Если у вас есть опыт работы с C-Suite, выделите его.
- Если вы управляли группой разработчиков продукта или группой удаленных сотрудников, не забудьте это указать.
Тщательно проверьте свою работу и отбросьте все, что вы считаете не идеальным
- Проверка перед публикацией — одна из самых сложных задач для творческих профессионалов, но обратите внимание на то, что люди посещают ваше портфолио, не для того чтобы производить тщательный анализ каждого проекта, который вы когда-либо публиковали.
- Кроме того, ваша работа 3-4 летней давности, вероятно, сильно отличается от проектов, над которыми вы работали последние год-полтора.
- Покажите свои лучшие работы, и убедитесь что нет ничего, что противоречит вашему нормальному процессу UX проектирования.
Укрепите доверие на основе рекомендаций клиентов
- Дизайнеры часто создают тесные рабочие отношения с участниками проекта. Включите одно-два предложения-отзыва от участника проекта и это будет замечательным способом внушить доверие людям, которые захотят нанять вас в будущем.
- Убедитесь, что отзывы, которые вы используете, имеют отношение к типу клиентов UX, которые вы хотите привлечь.
Дизайнер UX Tamara Olson полагается на жирный шрифт заголовка, чтобы выделить ключевые фразы из отзывов клиентов, которые говорят о ее дизайнерских навыках и позитивных отношениях с клиентами.
- Для ваших потенциальных клиентов или HR менеджеров по найму будет очень полезным познакомиться с вашими проектами самостоятельно, поэтому не стесняйтесь вставлять ссылки на живые примеры своей работы.
- Но не полагайтесь только на ссылки. Каждый проект в вашем портфолио нуждается в контексте и объяснении вашего участия.
- Предупреждение: время от времени контролируйте свои ссылки, чтобы убедиться, что ваша работа все еще актуальна. У клиентов иногда есть привычка вносить коррективы в процессе эксплуатации сайта, которые могут в свою очередь дискредитировать вас как специалиста.
- Это легко упустить из вида, но важно (особенно для фрилансеров) для посетителей сайта быть на связи.
- В конце проекта можно добавить фразу — понравилось, напишите мне.
- Обеспечьте один или два надежных способа связи с вами.
Дизайнер UX Alex Gilev вместо кнопки «Связаться со мной», соблазняет посетителей обещанием: «Работайте со мной и ваш продукт улучшится».
Помните, 5 основных компонентов экспертных UX портфолио
Если вы ничего не усвоили из этого руководства, запомните эти пять основных истин:
- Процесс имеет первостепенное значение, а портфолио UX дизайнера должно четко определять, какой путь дизайнер проходит от проблемы к решению.
- Портфолио UX дизайнера — это больше, чем демонстрация навыков, это возможность создать приятный пользовательский интерфейс и продемонстрировать мастерство процесса проектирования UX.
- Простые описания проектов и визуальные эффекты более эффективны, чем технический жаргон и картинки ради картинок.
- Каждый проект в портфолио дизайнера UX должен отражать выполненную роль в проекте и результат работы.
- Дизайнеры должны адаптировать свои портфолио UX к определенной аудитории.
Дизайнер UX Fabio Muniz делится артефактом дизайна, созданный в Документах Google. Помните, что использовать показушные изображения продукта нормально, но они не имеют ничего общего с процессом дизайнера.
Не ошибитесь — разработка сайта портфолио UX — это значительная работа, требующая тщательной мысли и исполнения, но когда процесс остается на переднем плане, это один из лучших способов для дизайнеров получить доступ к карьере и клиентам, о которых они всегда мечтали.
Первоначально опубликовано на сайте www.toptal.com.