До и после создания сайта-портфолио

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

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


Планируйте заранее

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

После того, как вы ответите на все эти вопросы, откройте новый файл дизайна Figma или Adobe XD, или любой другой предпочитаемый вами инструмент дизайна, или просто возьмите ручку и бумагу. Начните делать наброски образа, который вы создали в своей голове. Играйте с дизайном, пока не будете довольны тем, что видите.

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

Иметь чистый и последовательный дизайн

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

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

Один из способов облегчить себе задачу — использовать CSS-фреймворк или библиотеку, например, Tailwind CSS, Material UI, Bootstrap и так далее. В этих инструментах уже есть готовые системы дизайна, и они следуют проверенным и верным шаблонам.

ОБЯЗАТЕЛЬНО укажите названия ваших навыков

Конечно, вы и другие разработчики могут знать, что светло-голубой символ атома означает React.js, или что один зеленый лист означает MongoDB. Но если ваша цель — найти клиентов или работу, вам нужно немного больше думать о своей целевой аудитории.

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

Демонстрируйте свои работы

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

При демонстрации проекта вы должны включить следующие основные элементы:

  • скриншот (если применимо)

  • название проекта

  • ссылки на предварительный просмотр в реальном времени и на репозиторий GitHub

  • краткое описание функциональности и/или используемых технологий

ОБЯЗАТЕЛЬНО включайте призыв к действию

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


НЕ перегружайте пользователей слишком большим количеством анимации

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

Слишком много или слишком сложные анимации не только будут отвлекать пользователей, но и существенно повлияют на производительность вашего сайта, особенно если они сделаны неправильно или пользователи используют не самые современные устройства.

Это не означает, что на вашем сайте не должно быть ни одной анимации. Напротив, если вы умеете это делать, покажите это! Но будьте осторожны и не переборщите. Вашим приоритетом должно быть содержание вашей страницы. Гораздо лучше иметь отдельный проект, в котором вы сможете сходить с ума, как только захотите, используя все свои навыки анимации.

Не пренебрегайте доступностью и отзывчивостью

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

Что касается отзывчивости, имейте в виду, что почти 60% веб-трафика приходится на мобильные устройства. Это означает, что в среднем пользователи чаще заходят на ваш сайт с мобильного телефона, а не с ноутбука или настольного компьютера.

Хорошим подходом является проектирование с учетом мобильных устройств. Это означает, что сначала вы создаете свой сайт, чтобы он хорошо смотрелся на мобильных устройствах, а затем масштабируете его для больших экранов. Лично мне проще преобразовать дизайн для маленького экрана в дизайн для большого экрана, чем наоборот.

Не болтайте бесконечно

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

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

НЕ загромождайте раздел с вашими работами

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

Не устанавливайте и не забывайте

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

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


Заключение

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

Оцените статью
devanswers.ru
Добавить комментарий