Портфолио веб дизайнера – это первое, что увидит ваш клиент и будет
Как веб-дизайнер, ваше портфолио на веб-сайте является ключом к тому, чтобы помочь вам получить следующую работу или нового клиента. Это то, как вы демонстрируете свои навыки дизайнера. Мы поделимся советами и примерами сайтов-портфолио веб-дизайна, которые помогут вам сделать свой лучший.
Мы начнем с того, что поделимся некоторыми примерами хороших веб-сайтов-портфолио, чтобы вы могли понять, что работает лучше всего и почему. Мы также поделимся тем, что вы должны включить в свое портфолио, если хотите получить работу, и поделимся советами о том, как улучшить веб-сайт с портфолио или как начать работу, если вы создаете его впервые.
Не забудьте прочитать:
Тренды веб-дизайна 2023 года
Портфолио веб дизайнера
Данн Петти
Данн Петти — известный дизайнер-фрилансер, специализирующийся на разработке веб-сайтов и приложений для крупных компаний, таких как Google, Airbnb, North Face и Uber, и это лишь некоторые из них.
Что мне нравится в его веб-сайте, так это то, как хорошо работает домашняя страница. Во-первых, вверху есть сильное заявление, позволяющее вам точно знать, на каком виде дизайнерских работ он специализируется. Он намекает на прошлые работы с клиентами с текстом обновления в реальном времени для таких компаний, как «Airbnb», «Uber» и других. Ниже есть красивая галерея работ, которую можно пролистать, чтобы получить представление о его прошлой работе и о том, что он может сделать для следующего клиента.
И самое главное, есть четкий призыв к действию с его контактной информацией, повторяемый несколько раз. Сначала это кнопка под заявлением в верхней части сайта, и вот она снова, когда вы прокрутите до конца, напоминая вам, что он доступен для внештатной работы. Можно добавить свою контактную информацию более чем в одном месте, тем более, что это цель вашего веб-сайта-портфолио. Обратите внимание на веб-сайт Dann и найдите лучшие места для добавления своей контактной информации.
Не забудьте прочитать:
Тренды веб-дизайна 2023 года
Кэмерон Уорд
Это отличный пример простого портфолио продуктового дизайна, и так уж случилось, что он построен на Webflow. Домашняя страница имеет потрясающе простой дизайн, который подходит к делу, что очень важно для потенциальных клиентов, желающих нанять веб-дизайнера. В настольной версии в дизайне используется разделенный макет. Каждое из тематических исследований занимает большую часть экрана в этих больших красочных блоках.
Тренды логотипов 2023
10 лучших трендов логотипов на 2023 год, на которые стоит обратить внимание
Их всего 5, поэтому мы можем быстро оценить их навыки дизайна продукта. Как вы вскоре поймете в разделе, где мы делимся советами о том, что включить в ваше портфолио, вам не нужно много примеров ваших дизайнерских работ. Лучше включать меньше примеров, которые являются качественными, демонстрируют глубину вашей работы и лучшие из ваших способностей. Вам не нужно включать каждый проект, который вы когда-либо создавали, быть избирательным и показывать только лучшее.
Адриан З
Вы обязательно захотите проверить портфолио Адриана на вкладке своего собственного браузера, так как есть так много восхитительных взаимодействий, которые нужно испытать. Вы заметите постоянную тенденцию к сильному заголовку, тонкому вступительному абзацу, который расскажет вам больше о дизайнере, быстрому призыву к действию, чтобы связаться с ним, и красивой галерее работ. Но этот сайт определенно выводит его на новый уровень благодаря качеству дизайнерских макетов и потрясающему интерактивному опыту.
Owltastic
В этом веб-сайте-портфолио веб-дизайна от Owltastic так много замечательных вещей . Во-первых, брендинг — это большая часть того, что отличает его от других. С таким именем, как Owltastic, как можно не обращать внимания? В логотипе есть милая маленькая сова, красивая цветовая палитра и небольшие элементы дизайна, которые связывают опыт брендинга, даже копирайтинг приятно читать: «Создавайте дизайн в ночи, чтобы воплотить мудрые идеи в жизнь».
Это отличный пример одного из тех одностраничных веб-сайтов, где все, что вам нужно знать, находится на главной. Единственным предметом для критики будет то, что вместо того, чтобы каждый из примеров веб-сайтов ссылался на Dribbble, где вы не можете контролировать процесс просмотра, было бы лучше создать отдельную веб-страницу на сайте и внутреннюю ссылку.
Тренды логотипов 2023
10 лучших трендов логотипов на 2023 год, на которые стоит обратить внимание
Единая дизайнерская компания
Хотя это не веб-сайт с личным портфолио, а веб-сайт чикагской компании , занимающейся веб-дизайном , он по-прежнему служит отличным примером. Обязательно ознакомьтесь с забавной анимацией в дизайне заголовка на домашней странице, это отличный способ приветствовать посетителя и поделиться дополнительной информацией с помощью анимированной графики.
Обычно вы можете отличить сайт-портфолио для частного лица от сайта компании или агентства по тому, как они представляют свои тематические исследования. Обратите внимание на то, как они перечисляют все услуги, которые они предлагают, от исследования пользователей до составления карты путешествий, прототипирования, интерактивного дизайна и многого другого. Они также включают обширную информацию в свои тематические исследования, включая такие фрагменты, как эта диаграмма, о том, как они приходят к правильному решению с помощью итераций.
Папестиеллиз
Это такой забавный пример веб-сайта-портфолио от Papestielliz . В дизайне так много жизни, от иллюстрированных персонажей, представляющих дизайнера, стоящего за этим «совместным дизайнерским дуэтом», до микровзаимодействий во время навигации по сайту.
Они определенно выделяются своей необычной типографикой и выбором цветов. Подумайте, как сделать ваш сайт-портфолио запоминающимся. Как можно удивить и порадовать потенциального клиента, приходящего на ваш сайт, который может захотеть нанять вас?
Уэно
Закончим еще одним примером от креативного агентства Ueno . Опять же, мы можем многое узнать о том, как настроить наши веб-сайты портфолио от отмеченных наградами агентств. Они не только тратят много времени и усилий на работу, которую делают для своих клиентов, но и на то, как они представляют эту работу в тематических исследованиях, чтобы привлечь больше тех же клиентов. Вот отрывок из одного из примеров использования Уэно для Verve .
Одним из отличий Ueno от других агентств является их энергичный копирайтинг. Обратите внимание на то, как они демонстрируют это на своем веб-сайте, и в то же время расскажут вам, как они изменили дизайн веб-сайта Verve. Помимо хорошего дизайна, как еще вы можете выделиться с помощью своего веб-сайта-портфолио? Вы делаете захватывающие фотографии, талантливо иллюстрировали или, может быть, у вас есть потрясающие навыки движения? Найдите способы встроить их в свой веб-сайт.
Что вы должны включить в свое портфолио
Теперь, когда вы видели несколько примеров отличных портфолио веб-дизайна и то, как они представили свою работу и навыки. Как вы можете использовать эту информацию, чтобы улучшить свое портфолио или, возможно, даже создать свой первый веб-сайт с портфолио?
Несмотря на то, что вы можете создать свой веб-сайт-портфолио любым способом, чтобы раскрыть свои навыки и индивидуальность дизайнера, следует помнить о нескольких ключевых моментах. Вот что вы должны включить в свой сайт-портфолио.
Покажите 3–5 своих лучших примеров работ
Многие дизайнеры совершают ошибку, включая все, над чем они когда-либо работали, в свое портфолио. Это огромная ошибка. Вместо этого вы захотите включить 3-5 своих лучших работ. Лучше показывать меньше, но примеров лучшего качества, чем кучу мелких, неполных и посредственных примеров работы.
Создать тематические исследования
Когда вы думаете о том, какие работы показать в своем портфолио, подумайте, как вы можете продемонстрировать их в тематическом исследовании. Вместо того, чтобы показывать разовый дизайн, например дизайн одной целевой страницы, подумайте о том, как вы лучше это покажете. Вы хотите продемонстрировать не только свои дизайнерские навыки, но и то, что вы — стратегический творческий партнер, с которым можно работать и решать творческие задачи.
Показать незавершенную работу вместе с окончательным результатом
Добавьте контекст к своим тематическим исследованиям, предоставив им формулировку проблемы, возможно, небольшую предысторию целей, которые вы помогали этому клиенту достичь с помощью своего дизайна. Не забудьте показать прогресс вашего дизайна от начальных набросков, каркасов низкой точности и мудбордов до финального макета дизайна пользовательского интерфейса с высокой точностью.
Сделайте ваши дизайнерские макеты уникальными
Вместо того, чтобы показывать снимок экрана целевой страницы или экрана приложения на белом фоне, подумайте о некоторых творческих способах создания макетов своих дизайнов. Действительно сделайте все возможное на этом этапе, потому что презентация имеет решающее значение в вашем портфолио. Помните веб-сайт Papestielliz, которым мы поделились ранее? Посмотрите, как они смоделировали некоторые из своих проектов.
Вместо того, чтобы просто нарисовать дизайн пользовательского интерфейса на розовом фоне, они добавили трехмерные элементы и тени, чтобы придать целевой странице больше размеров. Во втором примере обратите внимание на тень от увеличенного изображения другого экрана. На одном статическом изображении они показали вам, что происходит, когда вы нажимаете кнопку «Buttle Tea Menu».
Анализируйте и добавляйте в закладки свои любимые веб-сайты-портфолио
Каждый раз, когда вы посещаете новый веб-сайт, будь то сайт-портфолио или нет, анализируйте, что в нем работает, а что нет. Даже плохой веб-сайт-портфолио можно улучшить, но только если вы научитесь хорошо разбираться в веб-дизайне, вы сможете заметить разницу.
Для получения дополнительной информации о том, что делает портфолио хорошим или плохим, посмотрите это видео, где Ран делится своими мыслями о двух разных сайтах портфолио.https://www.youtube.com/embed/zlqTm79di1E
Не забудьте сохранить библиотеку любимых сайтов-портфолио, чтобы вы могли ссылаться на них позже, когда будете искать вдохновение при создании своего собственного. Я лично использую Evernote для сохранения закладок не только на любимых мной веб-сайтах-портфолио, но и на веб-сайтах в целом, которые являются отличными примерами веб-дизайна. Когда мне нужно немного вдохновения, я просматриваю тег «веб-дизайн» в Evernote и могу вернуться к ним.
