9 советов по улучшению портфолио разработчика

Перевод статьи «What I learned after reviewing over 40 developer portfolios – 9 tips for a better portfolio».

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

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

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

В этом видео вы можете послушать советы, вместо того чтобы читать, а также посмотреть примеры.

1. Определите назначение вашего портфолио

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

Если ваша аудитория — другие разработчики, имеет смысл добавить какие-то крутые анимации. А если вы хотите произвести хорошее впечатление на рекрутеров, большое значение имеет UX и то, как вы структурируете контент.

// Tam Sylte добавил отличный комментарий:

Я хотел бы кое-что добавить. В портфолио должен звучать ваш голос. Порой я вижу портфолио, где все излагается в третьем лице, например: «Джон — Javascript-разработчик…». Куда лучше будет написать «Я — Javascript-энтузиаст с 2010 года…» или что-то вроде того. Представляйте свою аудиторию и говорите с этими людьми (рекрутерами или вашими коллегами) так, будто они стоят перед вами.

2. Как можно быстрее показывайте ваши навыки и проекты

Обычно, когда люди заходят посмотреть ваше портфолио, они хотят познакомиться с вашими навыками и проектами.

Мне попадалось много отличных одностраничных портфолио, где раздел «Обо мне» куда больше привлекал внимание, чем «Проекты».

Robbie Antenesse сделал «проекты» вторым разделом своего портфолио.

Я советую вам или особо подчеркивать какие-то свои навыки в разделе «Обо мне», или (и это предпочтительней) сделать так, чтобы блок «Проекты» появлялся раньше, чем «Обо мне».

3. Минимализм, оригинальность или и то, и другое?

Что касается дизайна и UX, важно принять сознательное решение относительно того, как должно выглядеть ваше портфолио.

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

Code With Ghazi — хороший пример простого, но не банального дизайна.

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

4. Меньше значит больше

Как и в кодинге, порой самые простые решения в дизайне и UX также являются самыми лучшими.

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

Я советую придерживаться простоты. Добавляя какие-либо дополнительные элементы или анимации, подумайте, принесут ли они какую-то пользу.

5. Подумайте над тем, что в первую очередь должен заметить человек, открывший ваше портфолио

На создание первого впечатления о странице у человека уходит меньше секунды.

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

На этой странице подчеркивается увлечение автора вебом и UI/UX-дизайном.

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

6. Определение уровня навыков в процентах или при помощи столбчатых диаграмм ничего не дает читателю

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

На самом деле описание навыков в процентах или изображение их на диаграммах ничего вам не прибавляет в глазах читателя. Никто не знает, что все это на самом деле значит. Фраза «100% навыков в JavaScript» создаст впечатление, что вы — наилучший JS-разработчик в мире. Но это, скорее всего, не так.

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

7. Не заставляйте меня кликать

Есть простое, но эффективное правило UX, которое стоит иметь в виду: уменьшайте число кликов.

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

Но бывали случаи, когда я кликал на такую ссылку и попадал в раздел, где была другая ссылка, на которую и нужно было кликнуть, чтобы получить соответствующий контент. Это раздражает.

Не забывайте анализировать, куда ведут ваши ссылки.

8. Делайте так, чтобы связаться с вами было просто!

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

Я советую размещать email или ссылки на социальные сети и в хедере, и в футере.

Здесь автор закрепил ссылки на соцсети сбоку страницы.

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

9. Пользуйтесь Google Lighthouse для выявления самых простых ошибок

Большинство портфолио, которые я просмотрел, были в очень хорошем состоянии. Откуда я знаю? Я запускал Google Lighthouse.

Google Lighthouse — это инструмент в браузерах Chrome, дающий действенную информацию о производительности вашего сайта, использовании best practices, о доступности сайта и SEO.

Производительность этой страницы можно было бы и улучшить.

Вот несколько ситуаций, когда Lighthouse может быть очень полезен:

  • вам нужно улучшить SEO;
  • производительность страницы можно повысить, оптимизировав изображения;
  • доступность не на должном уровне.

Так что в следующий раз, прежде чем нажать кнопку «deploy», запустите Google Lighthouse и изучите отчет.

Вот и все! Надеюсь, эти советы помогут вам улучшить ваше портфолио!

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Прокрутить вверх