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

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

#ДАТЫ

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

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

#ССЫЛКИ НА РАБОТАЮЩИЕ САЙТЫ

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

#СПЕЦИАЛИЗАЦИЯ

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

#ДОПОЛНИТЕЛЬНЫЕ НАВЫКИ

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

#РАЗНООБРАЗНЫЕ СТИЛИ

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

#КОММЕНТАРИИ

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

#ОФОРМЛЕНИЕ

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

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

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

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

В чём отличие портфолио (Portfolio) от резюме (CV, Curriculum Vitae)

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

Резюме можно составить на базе портфолио. Из резюме можно делать ссылки на работы, опубликованные в портфолио.

Где разместить портфолио

Варианты, которыми пользовался я или воспользовался бы:

• Привлекательные сайты-портфолио можно сделать, используя конструктор сайтов Wix — при этом не требуются знания программирования и вёрстки — подойдёт даже тем, кто ещё только планирует изучать веб-технологии
• GitHub Pages — бесплатный сервис для публикации статической информации, тесно связанный с репозиториями GitHub
• в качестве хранилища несложных работ (HTML + CSS + JS) можно использовать Сodepen (пример http://codepen.io/copist) — многим это нравится, потому что интересные работы можно скопировать себе и поэкспериментировать
• портфолио в виде блога на базе WordPress на бесплатном или платном хостинге
• сделать свой сайт-портфолио самостоятельно на каком-нибудь языке программирования и разместить в облачном сервисе Cloud9 , который также является удобной средой разработки вместо настольной IDE.

Список специализированных сервисов портфолио: Где и как создать себе сайт-визитку, портфолио или галерею [ lifehacker ]

Основываясь на личном опыте, хочу порекомендовать хранить резервные копии всех выполненных проектов (целые веб-сайты или отдельные веб-страницы) на своём хостинге. Я столкнулся с тем, что за 15+ лет часть сайтов, над которыми я работал, уже не существуют , а часть значительно изменилась. А если же у тебя есть резервная копия отдельных страниц или целого проекта, то сможешь поставить ссылки на свои копии, если оригинальные проекты больше не работают или сильно изменились.

Этот блог на базе WordPress расположен платном shared хостинге TheJetHost с удобной панелью управления, на нём же работают несколько проектов написанных на Javascript и PHP. Для более сложных проектов на базе NodeJS, Python, Ruby и PHP я использую Virtual Dedicated Server на FirstVDS и DigitalOcean .

Что разместить в портфолио?

1. Контакты (Contact Details)

Прочитав историю в портфолио с тобой захотят связаться. Надо дать несколько способов, но не слишком много. Адреса электронной почты будет достаточно, можно ещё добавить сервис быстрого обмена сообщениями (Skype, WhatsApp или Telegram), номер телефона на сайте размещать нежелательно. Можно воспользоваться сервисами, которые заменят имейл и номер телефона на картинки.

2. Биография (Bio, About)

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

Напиши рассказ о себе хорошим русским языком. Это универсальный совет на все случаи жизни: все можно рассказать и объяснить, и если ты не можешь излагать мысли интересно и понятно, то это - красный флажок — дальше будет хуже: возможно, автор такой биографии не может ни договориться с работодателем, ни понять задачу, ни описать решение.
А два-три интересных абзаца зацепят внимание, выделят тебя среди остальных. Грамотная речь без ошибок вызовет доверие.

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

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

3. Подходящий опыт (Relevant experience)

Нужны только работы, которые относятся к той работе, которую ты ХОЧЕШЬ выполнять. Возможно, в прошлом ты был дизайнером или занимался SEO, а теперь решил стать веб-программистом. Исключи из портфолио те работы , которыми ты не хотел бы больше заниматься , а также те, которые не могут пригодиться при работе на этой должности.

• Ты выполнял работу по SEO аккуратно и пунктуально, всё делал точно и вовремя? OK, подойдёт как демонстрация аккуратности, особенно если сайт вышел в ТОП.
• Ты сам рисовал дизайны сайтов? Подойдёт для .
• Ты развозил команду по домам? Понятно, что это хорошее дело, но этот пункт не нужен.

При поиске нового места работы по тому же профилю портфолио бывает битком забито выполненными работами. Но что делать новичкам? Откуда взять работу, если ничего ценного ещё не делал?

Список работ для новичков:

• Для студентов — твоя курсовая или квалификационная работа, если она была по этой специальности.
• Перечисли все самостоятельно выполненные работы . Учебные работы по жёсткому учебному процессу не котируются, “стерильные” работы из codecademy и htmlacademy не нужны. Только те, где была значительная самостоятельная работа. Даже если это самостоятельная работа при изучении книги, даже если это была попытка сделать (блог, форум, интернет-магазин, фото галерея), проект для друзей, сайт класса — если ты сделал всё сам, то это твоя работа и твой опыт, они ценятся.
• Если участвовал в конкурсе работ , но твоя работа не прошла в призёры — это твой опыт, добавь работу сюда.
• Если выполнял тестовое задание при устройстве на работу — это твой труд, результаты которого можно продемонстрировать (пример).

К каждой работе нужно приложить описание:

1. Дата или период выполнения работы
2. Для кого и что планировалось сделать. Это может быть техническое задание, описание задачи в обычном стиле, макет в системе прототипирования, графический макет (PSD), скриншот, блок-схема алгоритма, спецификация на API.
3. Что в итоге сделал. Подойдут скриншоты (очень выгодно будут смотреться скриншоты до и после улучшения ), ссылки на резервные страницы с результатами или на страницы действующего сайта, ссылки на репозиторий исходного кода.
4. Что получилось хорошо. Что вызывало гордость, радость, воодушевление. Это может быть твоё личное описание, рецензия заказчика на бирже фрилансеров, отзыв коллег, комментарии в соц сетях. Может быть была премия от заказчика или компании?
   Укажи, какие технические и нетехнические навыки пригодились или появились.
5. (для новичков) Что получилось не хорошо. Как бы это можно было исправить.

Работы нужно размещать в хронологическом порядке, самые свежие первыми. Максимальная «глубина» истории — 3-4 года. Более старые нужно удалять или оставлять о них только упоминания. Также рекомендую после трудоустройства удалить из портфолио пятый пункт описания работ («Что получилось не хорошо…») , чтобы там осталось только хорошее о себе и своих работах. Но можно и оставить, если регулярно актуализировать список и в этом пятом пункте обновлять варианты исправления недочётов с учётом современных знаний, методов, навыков («сейчас бы я …»).

4. Подходящие навыки (Relevant Skills)

Не надо сходить с ума и перечислять вообще всё, что умеешь. Выдели то, что ты умеешь лучше всего .

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

4.1. Профессиональные, технические навыки (Hard Skills)

Пример списка навыков одной из моих курсанток на программах поддержки :

Язык программирования JavaScript

• функциональное программирование
• модульная архитектура

jQuery

• jQueryUI
• шаблонизация ($.tmpl)
• роутинг HTML5 ($.routing)

AngularJS

• базовая архитектура приложения
• шаблонизация
• роутинг

MySQL

• проектирование модели данных
• индексы
• внешние ключи
• импорт / экспорт структуры и данных в консольном режиме

• настройка зависимостей проектов
  • composer
  • bower
• препроцессоры
  • SCSS
• сборка проектов
  • webpack
  • grunt
• работа с системой версионности git
  • github
  • bitbucket
  • + установка продукта из git репозитория на сервер Ubuntu
• Язык программирования PHP
  • функциональное программирование, базовые управляющие конструкции, основы объектно-ориентированного программирования
• фреймворк Laravel 5 (PHP)
  • роутинг, упрощённо
  • работа с базой, упрощённо
  • реализация REST
  • работа с JSON
  • обработка данных форм
• CMS WordPress (PHP)
  • создание и изменение тем
  • настройка виджетов
• CMS Joomla (PHP)
  • создание и изменение тем

Большой список, не правда ли? И по каждому из пунктов надо указать, какая работа может подтвердить навык, то есть указать гиперссылки на работы из первого пункта портфолио. Следи, чтобы не было “битых” ссылок.

Очень важно подтвердить технические навыки. Иногда это бывает чрезвычайно сложно, например, по причине подписанного соглашения о неразглашении (NDA) . В этом случае ты не сможешь вставить результаты своей работы в портфолио и, как ни удивительно, ничем не отличаешься от начинающего программиста c таким же пустым портфолио. Например, по этой причине у меня пустой профиль на Upwork и какие-то древнейшие работы на fl.ru — я более пяти лет работал с закрытыми проектами. Стаж есть, а примеров работ нет.

Чтобы «закрыть прореху», тебе надо будет придумать и реализовать , который продемонстрирует твои навыки. Твоё отличие от начинающего — ты сможешь спроектировать правильно и реализовать быстро. Буквально пара выходных и готов новый сервис, как . Не забудь выложить результат в репозиторий и добавить качественную инструкцию, как например, вот у меня в одном из ранних тестовых заданий — сокращателе ссылок .

4.2. Нетехнические навыки, личные качества (Soft Skills)

Cписок навыков, которые не относятся к специальности, но очень ценятся у работодателей и заказчиков

• Навыки технического письма — написание технических заданий, сообщений, записок; собирать все детали о задаче; иллюстрировать; писать кратко и грамотно, по существу, понятно
• Совместная работа в команде — не уединяться с проблемами, а решать совместно; делить задачи на части, чтобы делать параллельно; защищать членов команды; помогать; делиться своими знаниями и навыками; учиться у команды; уметь выявлять внутренние проблемы команды и находить варианты их решений
• Уметь находить решения — умение определять проблему, самостоятельно искать решения проблемы, пробовать разные варианты, не просить о помощи не попытавшись решить, не сидеть беспомощно в ожидании решений со стороны; также ценится знание — к кому с какими проблемами обращаться, чтобы программисты не передвигали мебель, а грузчики не писали программы
• Уметь принимать гибкие решения — умение быстро изменять свои решения под сиюминутные бизнес-требования, с минимальными затратами времени, без потери качества, стабильности, понятности
• Нести ответственность за свои решения — умение принимать технические решения и доводить их до конца, несмотря на трудности и сжатые сроки; концентрироваться на задаче; болеть за неё всей душой
• Умение сохранять спокойствие — не доводить проблему до неразрешимой, находить конструктивные решения проблем, не переводить разговор в спор, не переходить на личности, находить выход из конфликтов, уметь успокоить
• Умение работать удалённо — иметь навыки эффективной совместной работы с коллегами, которых нет рядом; самостоятельная реализация технических возможностей удалённой работа, обсуждение рабочих вопросов в удалённом режиме, согласование времени географически распределённой команды для совместных мероприятий, обмен решениями с удалёнными коллегами
• Умение концентрироваться — умение быстро переходить в рабочий режим, придерживаться режима работы, плана решения задачи, приоритетов задач, умение концентрироваться при отсутствии контроля со стороны при удалённом режиме работы
• Быть преданным делу — умение поддерживать внутреннюю мотивацию, понимать и поддерживать цели команды и компании, сохранять доверие к команде, лояльность к компании
• Умение выглядеть — одеваться под ситуацию, всегда выставлять себя, команду и компанию в лучшем свете

Продемонстрировать такие личные качества в портфолио — ещё более сложная задача, чем доказать технические навыки. Но считается, что профессиональный рост обеспечивается на 15% техническими навыками и на 85% личными, поэтому хоть и сложно, ну нужно.

У тебя есть идеи, что из этого списка можно продемонстрировать в портфолио и как это сделать? Давай обменяемся идеями и сделаем наше портфолио максимально эффективным. Чтобы заказчик или работодатель посмотрел и сказал — «О, этот спец на вес золота! Он тот, кто мне нужен!».

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

5. Аттестация, сертификаты, дипломы (Certification, Certificates, Diplomas)

В порядке увеличения важности

1. просто перечень курсов, которые прошёл
2. ссылки на страницы, где перечислены пройденные уроки, выполненные задач (htmlacademy.ru , codewars.com) или хотя бы бейджики за достижения (codecademy.com)
3. ссылки на курсы, где выдаются виртуальные сертификаты
4. сертификат, полученный онлайн (электронный или бумажный вариант)
5. сертификат при оффлайн тестировании (электронный или бумажный вариант)
6. диплом о высшем или специальном образовании

По четвёртому и пятому пунктам — список ресурсов, на которых можно получить сертификат:

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

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

Знания иностранных языков ценятся, поэтому сертификаты с курсов иностранного языка будут уместны.

6. Подходящие социальные профили (Social Profiles)

• Github
• Linkedin

Bitbucket ценится ниже чем, чем Github, но ссылка на свой профиль в этом сервисе — тоже хорошо. Российский аналог Linkedin — это МойКруг, я там встречал отличные профили веб-разработчиков, прям конфетки.

Хорошим дополнением будет ссылка на stackoverflow, hachcode, toster и другие профессиональные сообщества разработчиков, особенно если у тебя там высокая репутация.
Если есть свой профессиональный блог или профессиональный канал на Youtube — это ценная ссылка в портфолио.
Выкладываешь слайды со своих конференций на SlideShare — отлично.

Можно, конечно, указать свой Twitter, Facebook, Vkontakte, если есть. Я лично стесняюсь их, потому что там большой риск заполнить свою ленту всякими несерьёзными лайками и перепостами, но эти профили позволят заказчику или работодателю составить лучшее представление о тебе как о личности. Обычно профессиональные качества со временем проявляются в хобби, увлечениях, интересах и отношениях с другими людьми (это называется профессиональная деформация).

7. Получение новый знаний (Self-Studying, Mastering, Skill Growing)

«Век живи — век учись» — это про информационные технологии. Учить новое нужно постоянно. И было бы неплохо отразить это в портфолио.

Мне встречались квалифицированные специалисты, которые по разным причинам, вынужденно или осознанно, переставали следить за технологиями. Они достигли высокого уровня мастерства в одной узкой специализации. Но жизнь заставила их сменить место жительства или перейти на удалённую работу и оказалось, что в их специализации нет хороших предложений, а их 10+ лет стажа по узкой специализации не достаточны на новом рынке. Некоторые вообще не знают, что такое веб и HTTP. Некоторые пишут с нуля базу данных на C вместо использования популярных SQL/NoSQL решений.

В 2003 году я ушёл из компании, занимавшейся разработкой биллинговой системы для ЖКХ, потому что почувствовал — я заперт в узкой специализации, в одной технологии, мне будет трудно сменить место работы и я навсегда останусь привязанным к этой компании. Теперь я знаю достаточно много про разные биллинговые и платёжные системы и знаю более двух десятков языков программирования. Не все из них даже на 50%, но разобраться в чужом коде могу. Это позволяет мне быть универсальным веб-разработчиком.

Один программист 45 лет попросил составить ему план изучения технологий на 5 лет вперёд с целью … не скучать на пенсии и не зависеть от государства. Да, если он закончит план, то скучать или голодать ему не придётся. Информационные технологии — самое быстро развивающееся направление — его знания 100% пригодятся.

А у тебя как обстоят дела с самообразованием? Куда планируешь пойти учиться? Что планируешь изучить? Что ты изучаешь сейчас? Над чем экспериментируешь?

Продемонстрируй работодателю, что ты не остановил свою подготовку. Большой список не пиши, чтобы не вызвать ощущение, что ты хватаешься за 10 дел и скачешь по верхам. Для планирования используй другие средства, например задачник Todoist или сервис постановки целей SmartProgress .

8. Профессиональные интересы

Это только профессиональные интересы, ничего личного.

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

8.1. Текущие интересы (Professional interests)

Нужно перечислить текущие профессиональные интересы, по-которым работодатель или заказчик определит, что ты хочешь сейчас .

Примеры профессиональных интересов:

1. Получить практику в разработке на PHP
2. Изучить фреймворки Yii, Zend, и Symfony2.
3. Получить сертификат Zend Certified PHP Engineer
4. Углубить знания Javascript, Angular.js, Node.js

8.2. Профессиональные цели (Professional aims)

Твои интересы на ближайшие 3 — 5 лет, чтобы работодатель понял, куда ты будешь развиваться .

Примеры профессиональных целей:

• Провести полный цикл веб-разработки от проектирования до сопровождения
• Разработать профессиональный веб-инструмент (фреймворк, CMS, CRM или иной) для какого-нибудь специального применения
• Работать с конечными пользователями, с клиентами
• Создать высоконагруженное веб-приложение
• Создать мультиязычный веб-проект
• Разработать мультиплатформенное веб-приложение
• Стать руководителем команды разработки
• Изучить интернет-маркетинг и SEO
• Работать удалённо
• Свободно общаться на английском

Насколько подробно публиковать интересы и цели — решать тебе. Можно наметить только ориентиры (этакий todo list), а можно детально расписать план с указанием меток на шкале времени, как делается в SmartProgress . Планирование — отличный навык, даже если пока план реализуется не в срок.

9. Фото (Photo)

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

Выбери самую качественную фотографию. Стиль — деловой, но не слишком строгий (Business Casual). Для вдохновения — поищи в гугле по фразе «мужское портфолио фото». Будь на фото такой, какой ты бы был после того, как закончилась какая-нибудь официальная встреча, но то того, как начался банкет.

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

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

10. Версия для скачивания (Printable Copy, Hard Copy)

Многие предпочитают иметь отпечатанный на бумаге экземпляр резюме или портфолио. Оформи резюме в виде документа, который можно распечатать или сделай сайт-портфолио printer-friendly. По отзывам HR-специалистов, нет «лучшего» формата документа, поэтому рекомендую иметь идентичные версии в форматах PDF и DOC, на всякий случай ODT и просто HTML. Если подскажешь ссылку на сервис, который сразу все эти форматы поддерживает — моё огромное спасибо!

Советую в копию для печати добавить короткую ссылку и QR код для перехода на онлайн-версию веб-портфолио с смартфона или планшета. Лучше если веб-портфолио при этом будет с реализовано с поддержкой «отзывчивой» вёрстки (responsive layout).

Хочешь иметь этот лист под рукой? Скачай всю статью в электронном виде целиком (формат: html или PDF, объём ~10 страниц А4, время чтения 5 минут)

Текст
Полина Васильева

Каждый дизайнер стремится ответственно подойти к дизайну портфолио, чтобы оно было объективным выражением не только навыков и способностей, но и богатого воображения. Мы выбрали 10 популярных приёмов, хотя бы один из которых можно встретить на любом личном сайте.

Параллакс-скроллинг

Параллакс-скроллинг представляет собой разную скорость движения фонового изображения и элементов на переднем плане. Подобный эффект можно наблюдать в восьмибитных ретро-играх, где несколько слоёв двигаются с разной скоростью, создавая эффект объёмного пространства. Варианты воплощения параллакс-прокрутки зависят от фантазии веб-дизайнера: на сайтах-портфолио для этого эффекта можно написать целый сценарий, согласно которому вы обеспечите пользователям интересное иллюстрированное путешествие, так как фоновое изображение также может видоизменяться в течение прокрутки страницы. Минусы этого - уменьшение производительности сайта. Использование javascript значительно утяжеляет страницу, а следовательно, снижает скорость загрузки. Выход - применение эффекта лишь к нескольким элементам страницы.

Примеры

Оформление социальных
плагинов

Трудно найти современный сайт-портфолио без каких-либо отсылок к соцсетям: Facebook, Tumblr или Behance давно стали полем работы PR-специалистов самого разного толка, а значит, для собственного продвижения полезно не только иметь блог и несколько активных аккаунтов, но и не полениться сделать красивые ссылки на сайте-портфолио. Обычные иконки приелись интернет-пользователям, стало быть, их могут заинтересовать нестандартные социальные плагины.

Примеры

Креативный подход
к типографике

Креативный подход дизайнеров к типографике заполонил витрины магазинов, меню ресторанов и не обошёл стороной и веб-индустрию. Шрифтовая составляющая в вебе может представлять собой основной скелет дизайна всего сайта, и речь здесь не столько о блоках текста, сколько об эффекте акциденции. Благодаря стремлению к адаптивности сайтов, использование ярких шрифтов стало важнейшей частью современного дизайна сайтов. С появлением ресурсов, где продаются или доступны для бесплатной загрузки самые разнообразные шрифты, дизайнеры начали активно сочетать в своих макетах несколько акцидентных гарнитур. В случае оформления сайта-портфолио, важно всё же не переусердствовать: за формой подачи должно угадываться содержание.

Примеры

Адаптивный дизайн

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

Примеры

Фиксированное
меню навигации

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

Примеры

Вертикальный скроллинг

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

Примеры

Фото- и видеобэкграунд

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

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

Фотобэкграунд

Видеобэкграунд

Лаконичный дизайн

Утверждение «всё гениальное просто» не имеет срока годности: так называемый flat design не теряет популярности среди веб-дизайнеров. Пользователи будут вам благодарны за отсутствие перегруженности визуального и текстового контента. Кроме того, использование нейтрального фона (никаких градиентов, текстур и теней) и ярких цветовых акцентов на важных элементах не даст пользователю возможности отвлечься. На что обращать внимание и что брать за основу: модульная сетка, качественная типографика, отказ от любых элементов, не отвечающих за функциональность. Несмотря на иллюзорную простоту, в минималистичном решении нередко заложена целая философия, иначе дизайн рискует стать попросту скучным.

Примеры

Анимация

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

Примеры

Использование инфографики

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

Чтобы преуспеть на рынке web-дизайна и разработки или в качестве фрилансера, нужно иметь . Создатели сайта-портфолио сталкиваются с задачами посложнее, чем у других креативщиков. Их мастерство будет оценено не по картинке или тематическому исследованию, а тому как работает дизайн. Для этого обзора подобраны самые крутые, свежие дизайнерские сайты 2017 года. Сегодня много оформителей портфолио погналось за модными современными спецэффектами. Но творческий подход на основе не стареющих принципов веб-дизайна с уникальным авторским почерком – неоспоримо интересней и выглядит новаторским.

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

Великолепная графика проектов связно представлена в плоском плиточном дизайне. Малика поражает умением использовать позитивно-негативное пространство. Шикарно выглядит векторная графика оживленная синемаграфией. Эффектные иллюстрации на

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

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

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

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

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

Где взять первые работы для портфолио?

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

1. Создание веб-дизайна для себя.

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

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

2. Реализация проекта для друзей или знакомых.

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

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

3. Создание веб-дизайна для выдуманной компании.

Нет ни друзей, ни собаки, ни заказчиков? Придумайте сами Билла Гейтса (только фотку хоть его не ставьте), который бы горел желанием воспользоваться вашими услугами. Не рекомендуется для этого дела выбирать какие-то специфические ниши. Отдайте лучше предпочтение какой-нибудь строительной тематике, чему-нибудь близкому к маркетингу или интернет-магазину спортивной одежды.

4. Различные конкурсы.

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

5. Бесплатная реализация проектов.

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

Уже успешно реализовали первые заказы? Давайте тогда переходить к оформлению портфолио (примеров работ веб-дизайнера). Ниже я написал 5 советов, которых необходимо придерживаться во время этого процесса:

1. Используйте качественные изображения.

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

2. Подробное описание.

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

3. Спрашивайте разрешения у заказчиков.

Перед тем, как выкладывать сделанные заказы, поинтересуйтесь у заказчиков, а не против ли они вообще? Как правило, никто никогда не запрещает этого, однако уточнить стоит в любом случае.

4. Выбирайте лучшие работы.

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

5. Сделайте визуальную оценку.

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении