Перевод статьи «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. Как можно быстрее показывайте ваши навыки и проекты
Обычно, когда люди заходят посмотреть ваше портфолио, они хотят познакомиться с вашими навыками и проектами.
Мне попадалось много отличных одностраничных портфолио, где раздел «Обо мне» куда больше привлекал внимание, чем «Проекты».
Я советую вам или особо подчеркивать какие-то свои навыки в разделе «Обо мне», или (и это предпочтительней) сделать так, чтобы блок «Проекты» появлялся раньше, чем «Обо мне».
3. Минимализм, оригинальность или и то, и другое?
Что касается дизайна и UX, важно принять сознательное решение относительно того, как должно выглядеть ваше портфолио.
Если вы не имеете большого опыта в веб-дизайне, я советую остановиться на чем-то простом и функциональном. Не используйте больше трех основных цветов и двух разных шрифтов. Также следите за тем, чтобы контент был хорошо подобран.
Накопив больше опыта в веб-дизайне, вы начнете замечать хорошие паттерны UX и дизайна. Вот тогда можно будет проявить всю свою оригинальность и творческий подход.
4. Меньше значит больше
Как и в кодинге, порой самые простые решения в дизайне и UX также являются самыми лучшими.
Об этом особенно важно помнить, когда добавляете анимации. Может казаться, что большое количество интерактивных и мигающих элементов на странице это круто, но с точки зрения UX это обычно не слишком хорошо.
Я советую придерживаться простоты. Добавляя какие-либо дополнительные элементы или анимации, подумайте, принесут ли они какую-то пользу.
5. Подумайте над тем, что в первую очередь должен заметить человек, открывший ваше портфолио
На создание первого впечатления о странице у человека уходит меньше секунды.
Поэтому жизненно важно проанализировать, что именно, по вашему мнению, должно сразу бросаться в глаза. Ваше имя? Ваши навыки? Или какие-то анимации?
Что касается портфолио разработчиков, я советую сосредоточиться на вашем имени и наборе навыков. Можно добавить какой-то красивый слоган, чтобы сразу становилось понятно, что вы — разработчик.
6. Определение уровня навыков в процентах или при помощи столбчатых диаграмм ничего не дает читателю
Когда я начинал заниматься веб-разработкой, я сам таким грешил: использовал проценты, чтобы отобразить свой уровень навыков в разных технологиях.
На самом деле описание навыков в процентах или изображение их на диаграммах ничего вам не прибавляет в глазах читателя. Никто не знает, что все это на самом деле значит. Фраза «100% навыков в JavaScript» создаст впечатление, что вы — наилучший JS-разработчик в мире. Но это, скорее всего, не так.
Если хотите добавить какие-то цифры, используйте годы опыта или количество проектов. Эти показатели универсальны и понятны.
7. Не заставляйте меня кликать
Есть простое, но эффективное правило UX, которое стоит иметь в виду: уменьшайте число кликов.
Каждый клик на вашем сайте должен иметь какое-то значение. Например, если у вас в главной навигации есть ссылка «Обо мне», она должна вести к разделу, где я могу почитать о вас.
Но бывали случаи, когда я кликал на такую ссылку и попадал в раздел, где была другая ссылка, на которую и нужно было кликнуть, чтобы получить соответствующий контент. Это раздражает.
Не забывайте анализировать, куда ведут ваши ссылки.
8. Делайте так, чтобы связаться с вами было просто!
Ваше портфолио предназначено для того, чтобы демонстрировать ваши навыки и проекты. Но не забудьте сделать так, чтобы заинтересованные люди могли легко с вами связаться.
Я советую размещать email или ссылки на социальные сети и в хедере, и в футере.
Мне также понравилось, как в некоторых портфолио авторы прикрепили иконки соцсетей в определенном месте. Благодаря этому читатель, на какой бы странице ни находился, всегда может сразу связаться с автором.
9. Пользуйтесь Google Lighthouse для выявления самых простых ошибок
Большинство портфолио, которые я просмотрел, были в очень хорошем состоянии. Откуда я знаю? Я запускал Google Lighthouse.
Google Lighthouse — это инструмент в браузерах Chrome, дающий действенную информацию о производительности вашего сайта, использовании best practices, о доступности сайта и SEO.
Вот несколько ситуаций, когда Lighthouse может быть очень полезен:
- вам нужно улучшить SEO;
- производительность страницы можно повысить, оптимизировав изображения;
- доступность не на должном уровне.
Так что в следующий раз, прежде чем нажать кнопку «deploy», запустите Google Lighthouse и изучите отчет.
Вот и все! Надеюсь, эти советы помогут вам улучшить ваше портфолио!
