1. Создайте веб-сайт, а не PDF-документ

Первое, что я бы посоветовал, — это создать веб-сайт, а не PDF- документ. Хотя многие компании по-прежнему позволяют загружать PDF-версию своего портфолио в приложение, простой ввод URL-адреса (адреса веб-сайта) может быть более удобным для вас и рекрутера. Кроме того, вы можете показать гораздо больше вещей через Интернет (веб-сайт), направляя зрителей через вашу работу интерактивным и более подробным образом.

Например, веб-сайты онлайн-портфолио позволяют создавать ссылки на другие социальные профили, которые у вас связаны с UX. Кроме того, вы можете ссылаться или вставлять видеоролики, которые объясняют о продукте, а также включают рабочие прототипы, которые зрители могут воспроизводить в любом месте в любое время. Кроме того, вы можете включать визуально привлекательные взаимодействия или любые другие факторы дизайна (видео, анимацию и т. Д.), Которые выражают ваше творчество. (* Behance или Dribbble Playbook могут работать так же хорошо, если вы объясните свой пошаговый процесс UX)

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

«Итак, как и где мне начать создавать свой сайт-портфолио?»

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

Существующие адаптивные фреймворки, доступные для скачивания:

• Шаблоны загрузки HTML 5 начальной от Colorlib
• HTML5 / CSS3 шаблоны от Colorlib
• Шаблоны HTML5 / CSS3 из сообщения в блоге Брэдли Найса
• Шаблоны загрузки начальной от Bashooka
• Адаптивные шаблоны от Responsive Miracle

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

Альтернативный способ создания сайта (без кодирования):

• Squarespace
• Wix
• Weebly

2. Расскажите историю о том, кто вы

Независимо от того, подаете ли вы заявку через направление сотрудника или через Интернет, вы, вероятно, знаете, что есть сотни, а может быть, тысячи соискателей, которые хотят получить работу настолько, насколько вы хотите. Итак, вам нужно подумать: «Как мне упаковать себя, чтобы выделиться среди остальных?»

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

• «Что во мне уникального?
•  Как я попал в UX? »
• «Какие у меня есть навыки, которые пригодятся для этой роли?»
• «Каковы мои интересы и увлечения, которые действительно совпадают с этой работой, и как я могу связать с ней свой предыдущий опыт или проект?»
• «Чего мне не хватает с точки зрения навыков или знаний?» — очень важно осознавать себя

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

Помимо добавления раздела «Обо мне» на более высоком уровне, не менее важным может быть создание красивой вводной страницы вашего веб-сайта. Например, вы можете добавить видео или картинку с коротким, но убедительным описанием того, кто вы и какую работу ищете. Краткие, но простые объяснения с описанием себя — отличный способ подвести итог, не заставляя зрителя нажимать на раздел «Обо мне». Пока сбалансированность и преемственность концепции дизайна на всем вашем веб-сайте (визуальный дизайн, о котором я расскажу далее), потенциально может повлиять на то, что зритель представляет себе, каким дизайнером вы являетесь.

Чистая и современная целевая страница портфолио — http://ivomynttinen.com/

Мне лично нравится этот сайт-портфолио, созданный Иво Мынттиненом. Хотя было бы лучше, если бы имя было видно на этой странице, все же об этом человеке уже есть много информации. Кроме того, простое и чистое использование типографики позволяет легко читать с современным дизайном (изображение полной страницы), доказывая, что он в курсе текущих тенденций веб-дизайна. Я не говорю, что вы должны делать свое портфолио именно таким — вы можете сделать так много творческих вещей. Это всего лишь пример, объясняющий важность хорошего общего «ощущения» вашей целевой страницы.

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

3. Привлекательный визуальный дизайн имеет значение

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

«Так что же это за маленькие, но мощные штуки?»

Кто сказал, что привлекательный дизайн веб-сайта-портфолио не имеет значения? Вы думаете, что имеет значение только содержание вашего проекта? Я так не думаю!

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

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

UX-дизайнеры тоже дизайнеры, поэтому вам стоит обратить внимание на эти мелкие детали! Нет ничего плохого в том, чтобы все выглядело красиво.

Предложение

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

Навигация — это один из самых основных компонентов вашего веб-сайта-портфолио. Когда вы будете в море, куда вы отправитесь, не имея в руках компаса? (ха-ха) В любом случае зрители должны знать, куда щелкнуть, чтобы попасть в определенные места («О нас», «Портфолио», «Контакты» и т. д.). Не пытайтесь скрыть их или сделать так, чтобы их было трудно найти. Очень важно убедиться, что посетители вашего веб-сайта могут легко просматривать его содержимое. Это поможет им плавно переходить от экрана к экрану и даже повысит вероятность просмотра 100% того, что вы подготовили.

«Что находится на типичной панели навигации?»

В большинстве случаев (обычно) у дизайнеров есть следующее:

• портфолио
• О нас
• Резюме (или просто ссылка в разделе «О нас»)
• Контакт
• Необязательно — другие витрины, такие как встроенная страница Dribbble, фотографии, которые иногда являются артефактами дизайна вне профессиональной работы

Другие вещи, которые должны быть видны и легко найти, — это ссылки, которые выполняют определенные действия. Например, ссылка на скачивание вашего резюме должна быть четкой и четкой, поскольку это один из самых важных компонентов. Кроме того, в какой-то момент должны быть видны ссылки на ваши профессиональные ссылки, такие как LinkedIn, Dribbble, CodePen или Github.

5. Список лучших проектов в первую очередь

На мой взгляд, если вы пытаетесь получить свою первую UX-работу, я думаю, имеет смысл перечислить ваши «ЛУЧШИЕ» проекты на стартовой линии (по мере того, как вы набираетесь опыта и добавляете больше проектов в свое портфолио, вы можете перенастроить макет если нужно).

«Почему я должен сначала перечислять свои лучшие проекты?»

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

* Альтернативой этому является создание отдельного раздела, например «Избранные проекты». Иногда это работает лучше;)

6. Что хорошо иметь в каждой детали проекта

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

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

Обзор

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

• Цель проекта — почему вы начали этот проект
• Цель — чего вы достигли, каковы были результаты
• Подход — как вы этого достигли, какие шаги были предприняты
• Продолжительность проекта — недавно, сколько времени длилось
• Члены группы — имена (и / или ссылки на их профили в LinkedIn)
• Ваша роль — важна, когда вы рассказываете историю во время интервью (как вы внесли свой вклад в команду)
• Ссылки — скачать приложение, просмотреть плакат, просмотреть прототип, источник данных и т. Д.
• Финальная демонстрация продукта — фотографии / видео (обзор)

UX процесс

Это, вероятно, самый важный раздел, который ДОЛЖЕН быть. Если ваш проект следует процессу UX, я предлагаю вам объяснить его подробно, но в сжатой форме. Зритель должен пройти по вашим стопам, взглянув на:

• Исследования — бумажные обзоры, конкурентный анализ, интервью, контекстные запросы, опросы и т. Д.
• Идея — мозговой штурм, расхождение и совпадение идей, путь клиента, личность и т. Д.
• Каркас — идеи, наброски, мозговой штурм, что сработало, а что нет, результаты тестирования, итерации
• Дизайн — проработанный дизайн, тестирование / обратная связь, итерации, окончательный дизайн
• Прототип — пользовательское тестирование, итерация, в сторону разработки (если вы это сделали)

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

Дополнительные вещи, которые нужно включить (если хотите)

• Демонстрация рабочего прототипа — встроенный iframe, чтобы пользователи могли поиграть с ним
• Статьи, опубликованные в рамках проекта, полученные награды, конференции, стипендии и т. Д. — демонстрирующие ваши достижения и преданность проекту.
• Заключение — что вы узнали и что будете делать дальше

Дополнительные советы

• Включите достаточно большие изображения с хорошим разрешением (сжатые изображения)
• Опишите переходы от одного этапа к другому
• Включите ограничения / препятствия во время проекта (или запишите это где-нибудь в своих заметках) — это полезно при проведении собеседований. Что прошло хорошо, а что нет, и как вы преодолели эти ситуации как команда / индивидуально
• Избегайте слишком большого количества текста — у вас будет возможность объяснить позже
• Иногда у людей есть две версии: 1) короткая версия с картинками, 2) тематическое исследование — это тоже хороший способ показать свою работу.
• Попробуйте найти вдохновение — найдите веб-сайты портфолио UX-профессионалов, которые, по вашему мнению, являются фантастическими, и извлеките уроки из них, сравнивая их со своими собственными.

7. Создавайте дополнительные портфолио, связанные с дизайном

Как дизайнер, иногда вам может потребоваться создать идеальные до пикселя, привлекательные концепции дизайна пользовательского интерфейса, взаимодействия, анимации (GIF) и продемонстрировать их в качестве побочных проектов. Иногда запись инструментов, которые вы можете использовать в своем резюме, может не доказать свою точку зрения. А иногда роль, которую вы выполняете в проекте, не всегда может соответствовать вашим конкретным навыкам. Как я уже упоминал пару раз ранее о Behance и Dribbble , на самом деле это отличные места для публикации ваших творческих проектов, отдельно от вашего веб-сайта UX Portfolio.

В моем случае, помимо веб-сайта с портфолио, я очень активен на Dribbble, публикую множество UI-дизайнов, анимированных GIF-файлов, прототипов и прочего. Лично я считаю, что этот вид демонстрации — еще один отличный способ показать свою страсть и свои знания. Во время моих интервью многие люди, с которыми я разговаривал, указывали, что смотрят мои работы на Dribbble. Большинство из них рассказали мне, как они смогли «поверить», что я могу использовать эти инструменты. Более того, они оценили усилия, которые я приложил, выполняя такие вещи, как Daily UI Challenge, чтобы повысить свои навыки (мотивацию)

Источник

Узнать больше интересного: