Некоторые веб-сайты похожи на увеличенные визитки: фотография, четыре предложения о том, кто вы, и форма обратной связи, которую нужно искать практически под увеличительным стеклом. А есть и такие сайты, которые за считанные секунды умудряются передать личность человека, не требуя от него долгих объяснений.
Они не всегда самые впечатляющие. Некоторые используют всего два цвета и простую типографику. Другие полны движения, огромных фотографий или мелких деталей, которые приглашают к изучению. Интересно то, что все они исходят из одной идеи: личный веб-сайт должен помочь вам показать, кто вы, чем вы занимаетесь и почему стоит познакомиться с вами.
Если вы ищете примеры личных веб-сайтов для создания собственного, у вас, вероятно, уже есть несколько сохраненных образцов. Возможно, вам нравится минимализм веб-сайта архитектурной фирмы, галереи фотографий или то, как писатель представляет свои книги. Проблема возникает, когда вы пытаетесь смешать все эти стили и в итоге получаете веб-сайт, в котором есть немного от каждого, но нет узнаваемой индивидуальности.
Чтобы этого избежать, мы отобрали 15 реальных сайтов писателей, дизайнеров, фотографов, профессионалов и представителей творческих профессий. Мы не просто покажем вам красивые страницы: мы проанализируем, что работает на каждом из них, какие дизайнерские решения интересны и что вы могли бы адаптировать для своего собственного проекта.
Потому что вдохновение нужно для того, чтобы научиться принимать решения, а не для того, чтобы копировать сайт соседа, меняя логотип.
Прежде чем перейти к нашему выбору, стоит уточнить, что не существует единого шаблона для персонального сайта, подходящего для всех.
Писатель должен продемонстрировать свои публикации и облегчить читателям поиск его книг. Фотограф должен подчеркнуть достоинства изображений. А консультант должен объяснить свои услуги , продемонстрировать свою компетентность и упростить посетителям возможность связаться с ним.
Поэтому мы составили этот список из 15 примеров личных сайтов, отсортированных по профессиональному профилю. Страницы и ссылки проверены по официальным сайтам, хотя их дизайн может меняться со временем.
15 примеров в этом руководстве
| писатели | Брэндон Сандерсон, Элизабет Гилберт, Нил Гейман |
| дизайнеры и креативщики | Адхам Даннауэй, Антон и Ирен, Тобиас Алин, Элис Ли |
| Fotógrafos | Джессика Чоу, Крис Буркард, Питер Маккиннон |
| Персональный бренд | Мари Форлео, Энн Хэндли, Али Абдал |
| оригинал | Бруно Симон, Деннис Снелленберг |
У сайтов писателей есть одна особенность: настоящим главным героем должен быть не только сам автор, но и его произведение.
Хороший сайт автора позволяет узнать о его книгах, выяснить, с чего начать чтение, открыть для себя новинки и пообщаться с другими читателями. И все это без превращения в загроможденный каталог обложек.
Вместо того чтобы просто перечислять его романы, веб-сайт Брэндона Сандерсона систематизирует различные литературные вселенные и саги, включает новости и предлагает нечто особенно интересное: индикаторы прогресса в его писательских проектах. Для сообщества, которое внимательно следит за каждой новой публикацией, эта информация является поводом для возвращения на сайт.
Чему мы можем научиться: Если у вас есть лояльная аудитория, ваш веб-сайт не должен быть просто статичной витриной. Вы можете включать в него новости, обновления проектов или эксклюзивный контент, который побудит читателей регулярно посещать его.
2. Элизабет Гилберт — Когда презентация определяет дизайн
На сайте Элизабет Гилберт центральное место занимает представленная работа, сопровождаемая редакционной информацией, рецензиями и различными вариантами покупки. Автор имеет богатый опыт, но главная страница использует это преимущество, чтобы привлечь внимание к конкретной публикации.
Чему мы можем научиться: Не всем вашим проектам нужно уделять одинаковое внимание. Если вы запускаете книгу, выставку или новую услугу, вы можете временно изменить обложку, чтобы она отражала эту цель.
3. Нил Гейман — Ценность хорошо организованного файла
Веб-сайт Нила Геймана — другой пример. Его главная привлекательность заключается не в погоне за последними визуальными трендами, а в составлении обширного каталога книг, комиксов и других произведений в отдельных разделах. Его библиография служит справочником для поиска произведений и изучения очень разнообразного литературного творчества.
Чему мы можем научиться: Если у вас многолетний опыт, архитектура контента имеет такое же значение, как и эстетика. Четкая организация по произведениям, категориям или этапам профессиональной деятельности может быть полезнее, чем эффектная обложка, затрудняющая поиск информации.
Эти три примера демонстрируют, что веб-дизайн для писателей может служить совершенно разным целям: поддержанию сообщества, продвижению нового произведения или документированию карьеры.
Здесь правила немного меняются. Когда кто-то нанимает дизайнера, иллюстратора или разработчика, сам веб-сайт становится частью его визитной карточки.
Недостаточно просто заявить о наличии эстетического вкуса или умении создавать цифровые продукты. Ваше портфолио должно это подтверждать.
Однако демонстрация креативности не означает повсеместное использование анимации. Хорошее креативное портфолио должно сочетать в себе индивидуальность, ясность и простоту понимания проектов.
Адхам Даннауэй сочетает в себе дизайн продукта и фронтенд-разработку. Его характерный визуальный стиль позволяет четко разграничить эти две области, обеспечивая быстрое понимание его профессионального профиля. На сайте также размещены ссылки на проекты, ресурсы и контент, связанные с его работой.
Чему мы можем научиться: предлагая различные услуги, не нужно прятать их под общим описанием. Можно использовать визуальную композицию, чтобы объяснить, как они дополняют друг друга. Хорошая обложка быстро отвечает на вопрос: «Чем именно вы занимаетесь?»
5. Антон и Ирен — Проекты объясняют лучше, чем прилагательные.
Несмотря на то, что это студия из двух человек, их веб-сайт является ценным ресурсом для всех, кто хочет разработать креативный бренд. На нем представлены работы для самых разных клиентов и показаны связи этих проектов с такими дисциплинами, как стратегия, дизайн интерфейсов, художественное руководство и разработка. Их портфолио не полагается исключительно на список навыков.
Чему мы можем научиться: Преподавание конкретных проектов часто говорит о большем, чем просто описание себя как «новатора, увлеченного и творческого человека». Если вы описываете первоначальную проблему, принятые решения и результат работы, вы помогаете другим понять ваш мыслительный процесс и то, какой вклад вы можете внести.
6. Тобиас Ахлин — Преподавание также может быть способом продемонстрировать свой опыт.
В основе работы Тобиаса Ахлина лежат три идеи: проектирование, экспериментирование и обучение. На его веб-сайте представлены статьи, учебные пособия и проекты, такие как SpinKit и Moving Letters — небольшие инструменты, позволяющие пользователям непосредственно оценить его техническое мастерство.
Чему мы можем научиться: ваше портфолио не обязательно должно ограничиваться работами для клиентов. Публикация собственных ресурсов, экспериментов или обучающих материалов также позволяет продемонстрировать навыки, завоевать доверие и привлечь посетителей, заинтересованных в вашей области экспертизы.
На сайте Элис Ли представлены иллюстрации, фрески, керамика и коммерческие проекты. Изображения занимают видное место, и её работы сохраняют узнаваемый графический стиль, даже при использовании различных техник и материалов. Сайт также систематизирует работы по категориям и облегчает профессиональные запросы.
Чему мы можем научиться: сильная визуальная идентичность — это не всегда использование одного и того же шаблона. Это поддержание узнаваемой согласованности с помощью цвета, форм, иллюстраций и тональности.
Эти примеры веб-портфолио демонстрируют четыре способа повышения авторитета в творческой сфере: объяснение специализации, документирование проектов, обмен знаниями и разработка собственного визуального языка.
И ни одна из этих целей не обязательно требует использования сложного веб-сайта.
На сайте, посвященном фотографии, изображения должны говорить сами за себя. Но это не значит, что все остальное должно исчезнуть.
Хорошая галерея нуждается в ритме, иерархии и организации. Размещение двадцати пяти фотографий в сетке — это не то же самое, что создание подборки, где каждому изображению отведено достаточно места.
Следующие примеры демонстрируют различные подходы.
8. Джессика Чоу — Позволяя работе быть в центре внимания
На сайте Джессики Чоу представлен широкий выбор редакционных портретов и фотопроектов. Изображения сопровождаются названиями и ссылками на ее публикации, что позволяет посетителям познакомиться как со стилем фотографа, так и с профессиональным контекстом ее работ.
Чему мы можем научиться: фотографу не нужно заполнять обложку пояснениями. Хорошо организованная подборка, содержащая информацию о проектах и четкий способ связи с авторами, может представить его работы гораздо эффективнее, чем несколько абзацев саморекламы.
9. Крис Буркард — Превращение специализации в профессиональную идентичность
Творчество Криса Буркарда сосредоточено на фотографии природы, приключений, путешествий и серфинга. Его веб-сайт сочетает эту специализацию с его опытом работы креативным директором, автором и спикером. Профессиональная идентичность зависит не только от впечатляющих фотографий, но и от узнаваемой тематической области.
Из этого можно сделать вывод: вам не нужно демонстрировать абсолютно всё, что вы умеете фотографировать. Если вы хотите зарекомендовать себя в определённой специализации, целостная подборка работ лучше передаст ваше видение, чем галерея, где, казалось бы, несвязанные между собой произведения выставлены бок о бок.
10. Питер Маккиннон — Галерея, избегающая отвлекающих факторов.
На сайте Питера Маккиннона представлено портфолио фотографий, где изображения занимают центральное место. Навигация позволяет пользователям изучать такие категории, как портреты и лайфстайл-фотография, что снижает необходимость в декоративных элементах, которые могли бы конкурировать с содержанием.
Чему мы можем научиться: В некоторых областях дизайна важно уметь вовремя отступить. Четкая структура, хорошо продуманные пространства и тщательно подобранные фотографии часто работают лучше, чем набор визуальных эффектов.
Не все личные веб-сайты должны функционировать как портфолио. Для консультантов, тренеров, специализированных писателей и фрилансеров приоритеты обычно иные: объяснить, кому они помогают, продемонстрировать экспертность и облегчить следующий шаг.
В данном случае веб-дизайн для личного бренда должен сочетать индивидуальность с деловой ясностью. Главная страница может быть красивой, но если посетитель не понимает, что вы предлагаете, на кого вы работаете или как вас нанять, она, вероятно, не выполняет свою задачу.
11. Мари Форлео — личный бренд, построенный вокруг ее продукции.
Мари Форлео сочетает свою работу в качестве автора и коммуникатора с обучающими программами, видеороликами, ресурсами и бизнес-контентом. Ее веб-сайт объединяет различные направления деятельности под узнаваемым брендом и предлагает посетителям несколько способов начать знакомство с ее работами.
Чему мы можем научиться: Когда ваш бизнес растет и вы начинаете предлагать различные услуги или продукты, вам нужна архитектура, которая их объединяет. Личный бренд не должен навсегда ограничиваться биографией и страницей контактов.
На сайте Энн Хэндли особое внимание уделяется её рассылке Total Annarchy, а также её карьере писателя и оратора. Это интересное решение: вместо того, чтобы рассматривать электронную почту как второстепенный элемент, она использует её как основной способ связи со своей аудиторией.
Чему мы можем научиться: если ваша стратегия основана на обмене знаниями и создании сообщества, ваша рассылка может играть аналогичную роль, как и ваши услуги. Не обязательно всё должно заканчиваться кнопкой «Запросить ценовое предложение».
13. Али Абдал — Создание личного бренда для различных целевых аудиторий.
На сайте Али Абдаала объединены видеоролики, статьи, ресурсы, книги и обучающие материалы. Интересной особенностью является то, что он направляет посетителей в зависимости от их целей: изучение вопросов продуктивности, развитие бизнеса или совершенствование конкретных навыков.
Чему мы можем научиться: Когда у вас аудитория с разнообразными интересами, не всегда достаточно организовать меню по форматам типа «блог», «видео» и «курсы». Вы также можете структурировать навигацию в соответствии с потребностями пользователей.
Эти три примера показывают, что хороший веб-сайт для личного бренда строится не только на внешности, биографии или достижениях человека, стоящего за ним. Он также должен учитывать потребности посетителя.
Вы ищете информацию? Хотите воспользоваться услугами? Вам нужно узнать о вашем опыте? Вас интересует какой-либо курс?
Чем быстрее вы сориентируетесь, тем полезнее окажется сайт.
В завершение подборки мы представляем два проекта, демонстрирующие, насколько далеко может зайти цифровое творчество, когда профессиональный специалист хочет передать знания, опираясь на собственный опыт.
Эти сайты потрясающие, но важно анализировать их с учетом контекста. Экспериментальная навигация может быть великолепна для креативного разработчика, но совершенно не нужна для консалтинговой компании.
14. Бруно Симон — Портфолио, превращающееся в интерактивный опыт.
Портфолио Бруно Симона позволяет исследовать трехмерное пространство, управляя небольшим транспортным средством. Вместо того чтобы демонстрировать свои навыки программирования с помощью списка технологий, он показывает их напрямую на примере проекта, разработанного с использованием Three.js и других инструментов.
Чему мы можем научиться: Если ваша специализация — создание цифровых продуктов, собственный веб-сайт может стать витриной ваших навыков. Однако креативность должна сопровождаться учетом производительности, доступности и удобства использования.
15. Деннис Снелленберг — Когда анимация становится частью вашей идентичности
Портфолио Денниса Снелленберга доказывает, что для создания запоминающегося впечатления от сайта не обязательно превращать его в видеоигру. В его дизайне сочетаются крупноформатные фотографии, выразительная типография, плавные переходы и ненавязчивая анимация, которая направляет посетителя по мере изучения его проектов.
Интересно, что эти ресурсы не просто для красоты. Деннис специализируется на дизайне и разработке цифровых решений, поэтому его веб-сайт служит демонстрацией его возможностей. Он также позволяет пользователям ознакомиться с реальными проектами и легко получить доступ к его профессиональной информации и контактным данным.
Чему мы можем научиться: Анимация и микроинтеракции могут добавить индивидуальности веб-сайту, если они уместны и соответствуют тому, что мы хотим продемонстрировать. Секрет в том, чтобы использовать их для улучшения пользовательского опыта, не жертвуя при этом читаемостью, доступностью или удобством навигации.
Последние два примера, Бруно Симон и Деннис Снелленберг, демонстрируют два разных способа превращения личного веб-сайта в витрину талантов. Первый выбирает впечатляющий трехмерный опыт; второй использует движение, композицию и переходы, чтобы показать свое мастерство интерактивного дизайна.
Это не значит, что вы должны заполнить свой сайт анимацией. Это значит, что дизайн может продемонстрировать ваши навыки еще до того, как кто-либо прочитает ваше резюме.
И это один из лучших уроков, которые мы можем извлечь из этих портфолио: оригинальность работает, когда она связана с вашей профессиональной идентичностью, а не когда она используется исключительно для привлечения внимания.
После просмотра пятнадцати таких разных примеров может показаться, что общих правил нет. Некоторые используют фотографии, другие — текст, третьи выбирают сдержанный дизайн, а четвертые превращают навигацию в интерактивный опыт.
Однако лучшие персональные веб-сайты обычно отвечают трем требованиям: наличие узнаваемого имиджа, представление работы в понятной форме и облегчение посетителя в поиске нужной информации.
Визуальная идентичность — это не просто выбор любимых цветов и их использование на всех кнопках.
Сочетание шрифтов, изображений, композиции, цветов и тона общения помогает сделать вашу страницу соответствующей вашей деятельности.
Фотографу, специализирующемуся на архитектурной фотографии, может потребоваться минималистичная презентация и просторные декорации. Иллюстратору детских книг, возможно, больше подойдет более выразительный визуальный стиль. Ни один из вариантов не является принципиально лучше другого: важно, чтобы он соответствовал профессиональному имиджу, который вы хотите создать.
В веб-дизайне для личного брендинга важно избегать распространенной ошибки: выбора шаблона только потому, что он выглядит современно, без учета того, действительно ли он отражает нашу работу.
Вам не обязательно включать каждый проект, который вы выполнили с момента начала работы.
Грамотно составленное портфолио, как правило, выглядит убедительнее, чем бесконечная коллекция работ, где текущие проекты соседствуют с работами, которые больше не соответствуют вашему профессиональному уровню.
По возможности, предоставляйте контекст для того, что вы показываете. Кратко объясните, что было нужно клиенту, в чем заключался ваш вклад и что вы предоставили. Если у вас есть подтвержденные результаты и разрешение на их распространение, вы также можете их включить.
Это помогает продемонстрировать опыт, не полагаясь исключительно на такие утверждения, как «Я креативный человек», «Я предлагаю инновационные решения» или «Я увлечен своей работой».
Персональный веб-сайт должен позволять быстро ответить на три вопроса: кто вы, чем занимаетесь и как с вами можно связаться.
Не всем из них нужно одинаковое меню, но им необходима четкая и понятная организация. Во многих случаях достаточно главной страницы, профессиональной презентации, разделов «Проекты» или «Услуги» и страницы «Контакты».
Также важно обратить внимание на мобильную версию, контрастность текста, размер кнопок и скорость загрузки.
Анимация может выглядеть впечатляюще на мощном компьютере, но стать препятствием на телефоне с ограниченным интернет-соединением.
Следовательно, визуальная оригинальность ни в коем случае не должна использоваться как оправдание для пренебрежения пользовательским опытом.
После сохранения нескольких примеров пришло время принимать решения. И здесь лучше всего начать с вопроса, который гораздо менее увлекателен, чем выбор цветов: чего вы хотите добиться с помощью своего сайта?
Если вы писатель, вам, возможно, потребуется демонстрировать свои книги и держать читателей в курсе событий. Если вы работаете фотографом, ваш приоритет, вероятно, — показывать проекты и получать новые заказы. А если вы консультант, ваш веб-сайт должен объяснять, какие услуги вы предлагаете, и обеспечивать потенциальным клиентам удобную возможность связаться с вами.
Проект должен отвечать этой цели, а не наоборот.
Тип личной страницы | Стиль, который может подойти | Что мне следует выделить? |
|---|---|---|
Писатель или автор | редакционный | Книги, биографии и новинки |
Графический дизайнер | Креативный или минималист | Проекты и визуальная идентичность |
Fotógrafo | Визуально и захватывающе | Галереи и избранные работы |
Консультант или специалист | Четкий и корпоративный | Опыт, услуги и контакты |
Иллюстратор или художник | Выразительный и художественный | Работы и уникальный стиль |
Креативный разработчик | Экспериментальный | Интерактивные навыки и проекты |
Эти стили не являются жестко определенными категориями. Писатель может выбрать минималистичный веб-сайт, в то время как консультант может иметь очень креативный визуальный стиль.
Важно, чтобы эстетические решения не препятствовали пониманию содержания.
Также следует учитывать, сколько времени вы можете посвятить обслуживанию сайта. Страница, насыщенная анимацией, эффектами и пользовательскими функциями, может потребовать больше внимания, чем хорошо структурированное портфолио.
В Zudro Digital Media мы разрабатываем веб-сайты на WordPress , адаптируя их структуру и дизайн к потребностям каждого проекта. Персональный веб-сайт должен позволять вам развиваться, обновлять контент и изменять представление о ваших услугах, не начиная все с нуля каждый раз, когда ваш бизнес меняется.
Это зависит от вашего бизнеса, но обычно полезно включить в презентацию понятную информацию, сведения о вашем опыте, перечень проектов или услуг, а также простой способ связаться с вами.
Вы также можете добавлять публикации, проверенные отзывы, загружаемые ресурсы или новостную рассылку, если это соответствует вашим целям.
Не стоит заполнять меню разделами только для того, чтобы ваш сайт выглядел более полным. Лучше предложить несколько полезных материалов, чем публиковать пустые или повторяющиеся страницы.
Это не несовместимые варианты.
Онлайн-портфолио в первую очередь предназначено для демонстрации работ и проектов. Личный веб-сайт может иметь более широкий охват и включать в себя услуги, биографию, статьи, товары, ресурсы и другие способы взаимодействия с аудиторией.
Для дизайнера или фотографа портфолио может стать центральным элементом личного веб-сайта. Для консультанта, вероятно, будет целесообразнее подчеркнуть предоставляемые услуги и использовать примеры успешных проектов в качестве подтверждения.
Существуют различные варианты, включая WordPress, Webflow, Framer, Wix и Squarespace.
Выбор зависит от типа проекта, ваших знаний, уровня индивидуализации и того, насколько легко вы хотите обновлять веб-сайт.
Для простой страницы может быть достаточно визуального конструктора. Если вам нужна более обширная структура контента, специфические интеграции или пользовательские функции, стоит рассмотреть решение, которое позволит проекту развиваться без лишних ограничений.
Единой, наилучшей платформы для всех ситуаций не существует.
Лучшими примерами персональных сайтов являются не всегда те, которые используют больше всего анимации, эффектных фотографий или потрясающих спецэффектов.
Именно такие объекты способны передать узнаваемый образ и облегчить посетителю понимание того, чем занимается человек, стоящий за ними.
В этих пятнадцати примерах мы увидели совершенно разные способы достижения этой цели: писатели, превращающие свои веб-сайты в пространства для читателей, фотографы, позволяющие своим изображениям говорить за себя, профессионалы, систематизирующие свои знания, и творческие люди, использующие саму навигацию для демонстрации своих навыков.
Цель урока не в том, чтобы выбрать, какие из этих страниц вы хотите скопировать.
Это включает в себя определение того, что вам нужно донести, до кого вы хотите донести информацию и какие дизайнерские решения могут помочь вам этого достичь.
Потому что ваш личный веб-сайт не обязательно должен выглядеть как сайт известного профессионала. Он должен отражать вашу работу, быть полезным для посетителей и развиваться вместе с вами.
В Zudro Digital Media мы понимаем веб-дизайн как сочетание идентичности, контента и пользовательского опыта. Хороший веб-сайт должен быть визуально привлекательным, но он также должен быть понятным, функциональным и служить определенной цели.
И, пожалуй, самый главный вывод, который мы можем сделать из всех этих примеров: вам не нужен самый экстравагантный сайт в интернете. Вам нужен сайт, который будет понятен вам и тем людям, которых вы хотите привлечь.
Связанные записи
