Каким должно быть портфолио веб-дизайнера. Как сделать портфолио веб-дизайнера: советы для начинающих

Всем привет, ребята! На связи Василий Блинов и сегодня мы обсудим, как новичку сделать портфолио веб-дизайнера привлекательным для клиентов. Если для важны его примеры текстов, то визитной карточкой дизайнера является портфолио с его работами. Это самый важный инструмент для поиска интересного и высокооплачиваемого предложения от работодателя.

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

Где взять примеры работ новичку

Если вы , то наверняка у вас ещё нет примеров. Да и где им взяться, если вы только начинаете пробовать себя в этой сфере? В предыдущей статье о самостоятельном развитии, мы обсудили наличие качественного портфолио.

Теперь мы подготовили для вас несколько проверенных идей, где взять первые примеры:

  • Придумайте себе заказчика.

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

  • Сделайте дизайн популярного бренда.

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

  • Пробуйте свои силы в конкурсах.

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

Один из таких — 99designs .

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

  • Ведите свои социальные сети.

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

Как сделать сайт-портфолио

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

Мы расскажем о нескольких простых вариантах создания собственного сайта:

  • Сделать его на WordPress.

Выбираете хостинг, устанавливаете Вордпресс на него, выбираете шаблон, заполняете сайт своими работами и необходимой информацией. Шаблон можно выбрать на themeforest . Там они есть специальные для портфолио.

  • Создать в программе Adobe Muse .

Работать довольно легко и интуитивно, только вот за пользование нужно заплатить.

  • Также своё портфолио можно сделать с помощью: Dunked , Тумблер , Adobe Портфолио (синхронизируется с Behance ), Readymag , Squarespace .

Главное, при составлении портфолио соблюдать несколько правил:

  • Определите самые лучшие из своих произведений и разместите их.

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

  • Используйте даты.

Это покажет заказчику, сколько времени вы уже занимаетесь своим ремеслом, насколько ответственно вы относитесь к своему делу, востребованы ли ваши работы.

  • Важной деталью являются ссылки на уже работающие сайты.

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

  • Определитесь со своей специализацией.

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

  • Чтобы гарантированно получить заказчика, было бы неплохо обладать дополнительными навыками, к примеру, вёрсткой сайтов.

Это значительно увеличивает шанс получить желаемое место в проекте.

  • Не перестарайтесь.

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

  • Экспериментируйте со стилем.

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

  • Помните главную цель вашего портфолио.

Это, в первую очередь, привлечение новых клиентов, а не повод похвастаться перед друзьями или другими менее успешными дизайнерами. К примеру, на таком портале, как Behance , много дизайнеров, которые публикуют свои работы. Вы можете узнать их мнение, получить лайки, комментарии, но выйти на реального крупного заказчика сложно, если, конечно, вы не попали в самый ТОП.

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

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

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

Структура простого портфолио

Для начинающих мы расскажем, как структурировать информацию, чтобы всё красиво и аккуратно выглядело.

  1. Размещаем вашу фотографию, пишем ФИО, профессию и контакты.
  2. Далее скриншоты ваших работ. Напишите количество успешно выполненных заказов. Самые удачные проекты разместите на первой странице. Для начала достаточно трёх – четырёх работ.
  3. Для того, чтобы ваши макеты выглядели презентабельно, советуем использовать сервис Getcover . Он делает скрин макета в браузере.

Заключение

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

Желаем вам творческого энтузиазма и вдохновения.

Всего вам доброго!

ВЕБ - ПОРТФОЛИО ДЛИНОЮ ВСЮ ЖИЗНЬ

О.Б. Смоляр

ОГБОУ «Томский базовый медицинский колледж»

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

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

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

Портфолио студента

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

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

    мотивации к образовательным достижениям;

    приобретению опыта в деловой конкуренции;

    обоснованной реализации самообразования для развития профессиональных компетентностей;

    выработке умения объективно оценивать уровень своих профессиональных компетентностей;

    повышению конкурентоспособности будущего специалиста.

Необходимость портфолио в студенческой жизни

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

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

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

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

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

Каждый студент должен иметь портфолио

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

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

Портфолио преподавателя

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

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


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

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


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

Необходимость портфолио преподавателя

    Подготовка документов к отчетности или конкурсу на замещение вакантной должности при поиске работы.

    Лицензирование, аттестация, аккредитация образовательного учреждения.

    Систематизация деятельности.

    Самопрезентация.

    Стимулирующий фактор.

    Объективная диагностика профессиональной деятельности.

Веб-портфолио

Цифровая революция, цифровая урбанизация стремительно меняют образовательный ландшафт. Образовательный процесс "уходит" в Интернет, продолжается после занятий в социальных сетях, на форумах и других площадках. Преподаватели ведут сайты, блоги, новостные ленты в социальных сетях, консультируют обучаемых на форумах и сайтах, общаются с коллегами в социальных сетях, хранят документы для совместного использования и редактирования в «облаках» и т.п. Меняется и технологическая платформа для ведения портфолио. Известны несколько известных инструментов и сервисов в различных социальных сетях, предназначенных для общения, обучения, размещения портфолио. В таких сетях, как ВКонтакте.ру, Одноклассники, Google +, Facebook , MySpace и подобных им удобно обмениваться новостями. Социальные сети для учителей: Nsportal . ru , proshkolu . ru , pedsovet . su , pedsovet . org , itn . ru и другие реализуют возможность профессионального общения (чаты, форумы, блоги, сообщения), обмена разработками, но не предполагают использования сервиса учениками (студентами) из-за невозможности обеспечения безопасности персональных данных. Развиваются сервисы для создания сайта: ucoz.ru, wix.com, nethouse.ru, Jimbo.com. Следующие сервисы могут быть использованы в качестве инструментов для ведения онлайн портфолио: portfolios.ru, photopr.ru, portfoliopen.com, portfoliobox.net. Особенный интерес представляют англоязычные социальные сети для создания Веб-портфолио любыми категориями пользователей: MyFolio.com, foliofor.me и другие. Эти сети обеспечивают ведение Веб-портфолио и широко используются в зарубежных системах образования. Удобным набором сервисов обладает отечественная специализированная социальная сеть 4portfolio.ru, которая предназначена для конструирования портфолио, сбора и хранения полного отчета об успехах и достижения, общаться, обучаться дистанционно.

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

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

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

Веб-портфолио педагога

В портфолио педагога рекомендуется представить следующую информацию:

    личное портфолио – личная информация о семье и увлечениях в свободное от работы время;

    портфолио достижений - это коллекция работ, способ фиксирования, накопления, демонстрация и оценки индивидуальных или коллективных достижений педагога;

    портфолио отзывов – собираются отзывы о работе преподавателя, о его учебной, методической, научной, общественной деятельности;

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

Основные преимущества использования Веб-портфолио:

Инновационные образовательные технологии делают учебный процесс эффективней, интересней, ярче и доступней;

Средства ИКТ позволяют приобретать знания более простым и понятным для молодого поколения способом, повышают мотивацию и степень вовлеченности всех участников в образовательный процесс;

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

Возможность вступления в сообщества для расширения круга профессионального общения, обмена педагогическими инновациями и методическим опытом;

Основа профессионального роста и признания в педагогическом сообществе;

Постоянное взаимодействие обучаемых и педагогов в сети в удобное для них время;

Построение индивидуальной траектории обучения.

Веб-портфолио студента

Как следует организовать ведение Веб-портфолио студента:

Наполнение страничек портфолио информацией о динамике формирования знаний, умений и возможности их использования для саморазвития;

Непрерывный доступ студента к Веб-портфолио;

Возможность архивации по желанию студента текстовых данных, аудио данных, видео данных;

Защита информации студента от несанкционированного просмотра и использования;

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

Постепенное заполнение карьерного роста портфолио на базе Веб-технологий.

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

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

Портфолио есть зеркало. Какое в нём будет отражение, зависит только от нас!

Литература.

    Панюкова С.В., Гостин А.М., Кулиева Г. А, Самохина Н.В. Создание и ведение веб-портфолио преподавателя.

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

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

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


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

Примеры

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


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

Примеры

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


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

Примеры

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


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

Примеры

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


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

Примеры

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


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

Примеры

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


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

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

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

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

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


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

Примеры

Анимация


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

Примеры

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


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

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

Ранее мы уже публиковали подборки с шаблонами для создания портфолио. Например:

Clean

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

Gorgo Portfolio

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

Lithium

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

Brandy

Еще один чрезвычайно качественный шаблон для создания личного портфолио . Он имеет множество плюшек, которые все так любят: Parallax эффекты, эффект появления блоков при скроллинге, плавная прокрутка, различные счетчики и, конечно же, блок самого портфолио.
Шаблон абсолютно бесплатен и подойдет для фрилансеров любой IT профессии.

Kong

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

MyFolio

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

Basic

Строгий шаблон в синих тонах для создания портфолио. Построен на Bootstrsp 3.2. Если заменить иконки в первом экране, можно использовать фрилансерам любой сферы деятельности.

Small

Небольшой одностраничный html шаблон в плоском стиле . Он разделен на три экрана с высотой 100%. Первый экран - фотография и краткая информация о фрилансере.
Второй экран - портфолио. Выводятся последние 8 работ из Вашего портфолио на dribbble . То есть все, что нужно сделать, это настроить интеграцию с и на этом все. Изображения будут обновляться сами, синхронно с вашими действиями на Dribbble.
Третий экран - Контактная информация.

Kelvin

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

Portio

Интересный, универсальный шаблон, хотя есть много моментов, из-за которых я бы не стал его использовать: это дурацкие шрифты, убогие кнопки. Возможно, кого-то заинтересует такой вариант. Как никак - яркая цветовая гамма. Если немножко поправить CSS стили, можно прийти к хорошему результату.

Port

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

Hexa

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

Freelancer

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

Dribbble Portfolio

Еще один шаблон, портфолио в котором интегрировано с Dribbble . Требуется лишь настроить выгрузку последних работ и забыть о постоянном, нудном обновлении портфолио на своей личной странице.
Шаблон выполнен в строгой, современной цветовой гамме. Все смотрится очень чистенько.
Также как и предыдущий Dribbble-шаблон, он небольшой. Я бы даже сказал, лаконичный. В общем, моя оценка 9 из 10.

Geek

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

Dribbble Folio V2

Бесплатный шаблон с автонаполняемым портфолио . Работы импортируются с сайта Dribbble . Перед использованием данного решения, не забудьте настроить интеграцию с вашим профилем на Dribbble.
К сожалению, демо нет.

Harbour

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