Лучшие бесплатные платформы для создания и продвижения портфолио фотографа
Представителям творческих профессий, таким как фотографы, сложно обойтись без сайта-портфолио. Однако многим кажется, что разработка собственного сайта-потрфолио – это слишком сложно, дорого и, как правило, занимает много времени. Отсутствие нужных навыков и понимания механики сайта-строения – еще один сдерживающий фактор.
Решение всех этих проблем – использование специальных платформ, конструкторов сайтов, значительно упрощающих задачу. Благодаря современным конструкторам сайтов разработка занимает несколько часов и обходится на порядок дешевле, чем при заказе у веб-дизайнера, а зачастую и вовсе бесплатно.
Главное: можно обойтись без знаний в области веб-дизайна, HTML-верстки и программирования.
Ниже приведем подборку лучших конструкторов, которые помогут создать онлайн-портфолио для фотографов. Разумеется, это далеко не все современные конструкторы сайтов, присутствующие на рынке.
Но для фотографов – именно эти конструкторы являются наиболее подходящими онлайн-решениями.
№1 – PhotoShelter
PhotoShelter — является одной из самых востребованных платформ-портфолио для фотографов во всем мире. Ее возможности позволяют создать собственный фотосайт или портфолио, быстро и удобно менять шрифты, работать с макетами и изображениями. Вам не потребуется программировать, нужно лишь использовать предоставляемые инструменты, чтобы выставить в Сети свои работы и даже продавать их непосредственно со своего сайта. Кроме того, здесь предусмотрена интеграция с социальными сетями и SEO-опции.
№2 – Foliolink
Foliolink — еще один популярный инструмент, рассчитанный на художников и фотографов, демонстрирующих и продающих свои работы через интернет. Как и PhotoShelter, Foliolink позволит создать профессиональное портфолио без знаний HTML и CSS.
К вашим услугам инструменты для SEO-оптимизации, электронной коммерции, маркетинга и аналитики.
Разработчики Foliolink предусмотрели даже мобильную версию сайта. К тому же не обязательно спешить с выбором тарифного плана – новым пользователям дается неделя бесплатного использования на то, чтобы определиться подходит данная платформа или нет.
№3 – Zenfolio
Платформа Zenfolio располагает всеми необходимыми инструментами, чтобы вы смогли быстро создать эффектное онлайн-портфолио. Разработчики также позаботились обо всех, кто намерен монетизировать свой талант и продавать фотографии в Сети.
Достоинств у Zenfolio достаточно – простота настроек и удобство управления при помощи мыши (drag and drop рекдактор), возможность ведения электронной коммерции. Для тестирования платформы дается пробный премиум-аккаунт. Далее оплата за использование составит — $30 ежегодно, для базового тарифного плана.
№4 – Orosso
Если ваша задача получить профессиональное онлайн-портфолио всего за несколько минут – используйте Orosso.
Дальнейшее обслуживание созданного сайта также будет несложным. Внешний вид готового ресурса можно впоследствии корректировать.
Orosso вполне способен стать помощником в создании простого сайта-портфолио для художника, дизайнера или архитектора. Оценить возможности платформы бесплатно можно в течение двухнедельного триал-периода.
№5 – Pixpa
Pixpa — платформа для создания эффектных сайтов портфолио с ориентацией на электронную коммерцию. Здесь можно подобрать подходящий шаблон из сотен доступных вариантов, настроить фон, цвет, шрифт, меню. Доступно и использование доменного имени.
У Pixpa имеется интегрированная платформа для продажи фотографий. Вы можете попробовать эту и другие возможности в течение двухнедельного триал-периода.
№6 – FolioHD
FolioHD может стать хорошим выбором для художников и дизайнеров, архитекторов и моделей. Доступный функционал будет зависеть от выбранного тарифного плана.
Базовый (basic) будет бесплатным, однако загрузить можно лишь 36 файлов мультимедиа. Тарифные планы Power и Pro позволяют увеличить количество загрузок до 1000 и 2000 соответственно и открывают гораздо больше возможностей. Так можно будет настраивать параметры конфиденциальности, видеть статистику благодаря Google Analytics и получить доступ в Fotomoto.
№7 – 500px
500px используется в качестве удобного инструмента для создания портфолио. Вы сможете быстро и просто оформить пространство не только для демонстрации своих работ, но и для их продажи. При этом никакого дополнительного вмешательства, предполагающего правки кода, в дальнейшем не потребуется. Поддержка работоспособности сайта также очень проста.
После регистрации на 500px пользователю становится доступен широкий функционал. Вы сможете загрузить любое количество фотографий и выставлять свои работы на продажу в магазине. Можно будет отслеживать поведение посетителей сайта.
Также платформа предоставляет пользовательское доменное имя.
№8 – Folio Websites
С помощью Folio Websites можно создать профессиональное портфолио, в том числе и в мобильной версии. Кроме простоты использования и удобного дизайна у платформы есть еще одно преимущество – использование всех настроек, которые предполагает WordPress. Пользователю становятся доступна возможность продвигать портфолио в поисковой выдаче, благодаря набору SEO-инструментов. Готовые сайты будут корректно отображаться в мобильной версии. Использование бизнес-аккаунта на платформе Folio Websites обходится в сумму от $14.6 ежемесячно.
№9 – SmugMug
Меняться фотографиями и демонстрировать пользователям свое творчество удобно с помощью платформы SmugMug. Здесь же можно будет подобрать стильную тему для сайта. Работа с сервисом интуитивно понятна, настраивать цвета, шрифты и многое другое можно без труда. Здесь же предусмотрена возможность интеграции с социальными сетями.
№10 – 1X
Строго говоря, 1Х нельзя отнести к инструментам для создания портфолио. 1Х – это некое подобие социальной сети для фотографов, но общаться они могут не только с другими фотографами, но и с обычными пользователями. Также многим будет полезно общение с профессиональными дизайнерами, которое ведётся тут же на форуме. Выкладывать свои фотографии в 1Х может каждый, но перед публикацией все они проходят модерацию с отсеиванием неподходящих фото.
Cайт фотографа | Создать сайт портфолио для фотографа
Мы собрали профессиональные инструменты на одной платформе, чтобы вы смогли создать сайт мечты и заниматься любимым делом.
Начать
Перейти на сайт
Sharon Radisch
Ваше творчество теперь онлайн
Начать
Выберите один из дизайнерских шаблонов, созданных для презентации арт-работ и портфолио. Настройте его под себя и удивляйте посетителей.
Используйте стильные галереи и альбомы, чтобы загрузить файлы высокого качества и показать свои фотографии и видео миру.
Подключите свой домен и создайте корпоративную почту.
Привлекайте клиентов на сайт с помощью продвинутых инструментов маркетинга и SEO.
Возможности Wix для создания портфолио
Pro Gallery
Покажите свои фотографии в высочайшем качестве
Выберите подходящий макет; добавьте видео, фото и текст
Поделитесь своими работами в соцсетях
Разрешите скачивание фотографий и видео
Управляйте своими галереями когда и где удобно благодаря приложению Wix Owner
Начать
Photo Albums
Создайте пользовательский альбом, где клиенты смогут просматривать, загружать и покупать изображения.
Создавайте неограниченное количество независимых альбомов
Отредактируйте их, как вам нравится и добавьте логотип
Делитесь альбомами, которые защищены паролем, со своими клиентами
Продавайте цифровые изображения, принты и сувенирную продукцию прямо из фотоальбомов
Показывайте выборочные альбомы на своем сайте
Управляйте альбомами в приложении Wix Owner
Начать
Art Store
Показывайте, продавайте и печатайте свои работы онлайн
Продавайте цифровые или аналоговые работы в разных размерах
Управляйте всеми заказами в одном месте
Брендируйте и защитите фотографии и видео с помощью уникального водного знака
Создайте пользовательскую лицензию для использования ваших работ
Поднимайте продажи, печатайте и отправляйте ваши фотографии
Начать
Начать
Профессиональные возможности для развития бизнеса
Инструменты для бизнеса
Увеличьте органический трафик с помощью продвинутых инструментов SEO.
Расскажите свою историю и привлекайте клиентов с помощью постов в блоге
-
Оставайтесь с пользователями на связи благодаря email-рассылке
Предоставьте возможность делиться вашим контентом в соцсетях
Подключите ленту инстаграма, чтобы привлечь больше подписчиков
Начать
Ваше дело на пути к успеху
Предоставьте пользователям возможность бронирования онлайн
Отправляйте коммерческие предложения и выставляйте счета
Собирайте лиды и общайтесь с потенциальными клиентами в чате
Защищенная оплата бронирований и товара
Вы в пути? Работайте когда и где удобно благодаря приложению Wix Owner
Начать
Немного вдохновения
Стильные шаблоны Wix для создания портфолио
Интересные статьи, полезные советы и вдохновляющие подборки
Как создать сайт-портфолио для фотографаПортфолио для фотографа — 11 отличных примеровСоздайте портфолио своей мечты
Начать
Portfolio Starter — Портфолио HTML5 Адаптивный шаблон веб-сайта
Portfolio Starter — Портфолио HTML5 Адаптивный шаблон веб-сайтаПолучите скидку 50% на все шаблоны до 3 декабря, 23:59 по тихоокеанскому времени! Код: 1128CWWFTS123
Пропустить к основному контенту
Trusted By Teams по адресу
Trusted By Teams по адресу
Portfolio
Personal
CMS
Ecommerce
Члена
.
Perfect Pertember Protember Commerce
Члена
. Perfect Latember Pomer Properlio Blessflio
. Начиная с нуля. Вы можете настроить каждый пиксель его чистого, отзывчивого макета, что позволит вам быстро создать портфолио, которое выделит вас.
Элементы не найдены.
Поделиться
Возможности
Создавайте списки потенциальных клиентов и базу подписчиков с помощью красивых форм.
Адаптивная навигация
Навигация по сайту автоматически сворачивается в удобное для мобильных устройств меню на небольших устройствах.
Retina ready
Вся графика оптимизирована для устройств с экранами с высоким разрешением.
Адаптивный дизайн
Отлично отображается на настольных компьютерах, планшетах и телефонах.
Веб-шрифты
Использует шрифты из коллекции веб-шрифтов Google.
Символы
Повторно используемые элементы, которые вы можете использовать на своем сайте. Отредактируйте символ, и все его копии мгновенно обновятся.
Одноразовая лицензия
Может использоваться только вами или одним клиентом для одного конечного продукта. Вы не можете перепродавать или распространять этот шаблон в его исходном или измененном состоянии.
Бесплатная лицензия
Этот шаблон можно использовать бесплатно как в личных, так и в коммерческих проектах. Вы не можете перепродавать, распространять или лицензировать этот шаблон в его исходном или измененном состоянии.
Информация о лицензии
Доступна ли демонстрационная версия шаблона?
Используйте параметр «Предварительный просмотр в конструкторе», чтобы внести любые изменения в страницы шаблона и просмотреть, как макет будет соответствовать вашему контенту. Изменения в режиме предварительного просмотра не будут сохранены.
Можно ли использовать шаблоны в существующих проектах?
Невозможно применить шаблон к уже существующему проекту. Вместо этого вам нужно будет создать новый проект на основе шаблона.
Сколько страниц шаблонов можно редактировать с бесплатным тарифным планом?
С бесплатным планом учетной записи можно редактировать две страницы проекта на основе шаблона.
Чтобы разблокировать больше страниц и функций, требуется премиум-план.
Можно ли экспортировать шаблоны?
Как приобрести шаблон из командной учетной записи?
Шаблоны Webflow доступны только для покупки через отдельные учетные записи. После создания проекта на основе шаблона его можно перенести в групповую учетную запись.
Как удалить функциональность CMS из шаблона?
Шаблоны CMS предназначены для использования возможностей CMS Webflow. Можно перейти на базовый план сайта, если весь контент CMS будет удален из проекта.
Используйте инструмент View Connections, чтобы понять, где на сайте находится содержимое CMS, и удалите все динамические списки и содержимое CMS. Мы также рекомендуем вам проверить символы и шаблоны страницы коллекции.
Полностью настраиваемый в Webflow
Все шаблоны были созданы дизайнерами с использованием Webflow без написания кода. Это означает, что вы также можете настроить их с помощью нашего визуального интерфейса.
Узнайте, как
Последние шаблоны портфолио
Все шаблоны портфолио
Встроенные функции электронной торговли. Просто добавьте продукты.
Встроен динамический контент и визуальная CMS.
Встроено несколько вариантов макета.
Встроена функция электронной торговли. Просто добавьте товары.
Встроен динамический контент и визуальная CMS.
Встроено несколько вариантов макета.
Встроена функция электронной торговли. Просто добавьте товары.
Встроен динамический контент и Visual CMS.
Встроено несколько вариантов макета.
Встроена функция электронной торговли. Просто добавьте товары.
Динамический контент и встроенная визуальная CMS.
Несколько встроенных вариантов макета.
Еще от Webflow
Все шаблоны от Webflow
Встроенная функциональность электронной торговли.
Встроенная функциональность CMS.
Несколько вариантов макета встроенный.
Встроенная функциональность электронной торговли.
Встроенная функциональность CMS.
Встроено несколько вариантов макета.
Встроенная функциональность электронной торговли.
Встроенная функциональность CMS.
Встроенная функциональность CMS.
Несколько встроенных вариантов макета.
Категории
Фото и видео
Блог
Marketing
Travel
Технология
Sports
Другие
Некоммерческие
Medical
Food & Drik
Теги
Мультимакет
Комплект пользовательского интерфейса
Запуск
Одна страница
Блог
Ресторан
Photography
Designer
Agency
Portfolio
Real Estate
View All
Styles
Sidebar
Illustration
Organic
Elegant
Casual
Luxurious
Dark
Minimal
Clean
Функции
Система управления контентом
Электронная торговля
Членство
Адаптивный слайдер
Медиалайтбокс
Background video
Symbols
Interactions
Forms
3D transforms
Custom 404 page
Retina ready
Web fonts
Type
Free
Premium
Basic
CMS
Ecommerce
Одна страница
Комплект пользовательского интерфейса
Членство
Хотите продавать собственные шаблоны веб-сайтов?
Ознакомьтесь с процессом проверки и инструкциями, чтобы начать продавать собственные шаблоны веб-сайтов.
Узнайте, как
21-дневный курс портфолио по дизайну
[McGuire] Вот и мы. Окончательный обзор дизайна и еще несколько взаимодействий, прежде чем мы рассмотрим последние шаги в этом курсе. Мы добились огромного прогресса, и для меня большая честь представить Сару Лундберг, человека, который занимается дизайном всего университета Webflow.
[Сара] Теперь я буду преподавать. Мы собираемся просмотреть весь этот портфель вместе. Мы рассмотрим интервалы, названия ссылок, абзацы, мы добавим наше резюме и добавим больше взаимодействий.
[McGuire] Это звучит немного похоже на то, что вы сказали, слово «взаимодействия», но вы добавили несколько, несколько Z в конце взаимодействий. Это было намеренно?
[Сара] Я? Это я сделал?
[Макгуайр] Это у меня есть, это шведский?
[Сара] Нет, это не шведский. Просто, знаешь, когда ты преподаешь… Ладно.
[Макгуайр] Хорошо.
[Сара] Хорошо. Должен ли я продолжать свободно?
[МакГуайр] Продолжайте.
[Сара] Начнем с пробелов.
[McGuire] И домашняя страница.
[Сара] Хорошо. Итак, у меня есть 23 заметки.
[McGuire] На главной странице?
[Сара] Е-, нет. Нет, на весь продукт.
[Макгуайр] Хорошо. На интервале?
[Сара] На интервалах.
[Макгуайр] Хорошо. Какой первый?
[Сара] Итак, перейдите к списку продуктов и проверьте эту текстуру, чтобы мы могли ее выровнять.
[McGuire] Вы говорите между h3, Paragraph и списком коллекций.
[Сара] Да.
[Макгуайр] Хорошо. Таким образом, предпочтение было бы, давайте добавим немного верхнего поля здесь, чтобы выровнять его. Как выглядят 20 пикселей?
[Сара] 20 хорошо выглядит.
[Макгуайр] Хорошо. Итак, теперь у нас есть…
[Сара] Нет, нет, нет. Я говорю это. У нас осталось 22.
[Макгуайр] Осталось 22.
[Сара] Идеально. Итак, вы видите в деталях продукта, я хочу, чтобы вы увеличили отступы на этой карточке.
[МакГуайр] Вы говорите об увеличении расходов на этой карточке.
Итак, у нас по 30 со всех сторон. Что ты… Ты выглядишь на 60 или около того?
[Сара] 60 было бы идеально.
[Макгуайр] Хорошо. Таким образом, 60, больше интервалов внутри каждого из блоков ссылок на детали проекта.
[Сара] Итак, я хочу, чтобы вы посмотрели на текст в этой детали продукта, я хочу, чтобы он был четким. Расстояние между каждым элементом.
[Макгуайр] Отличный улов. Хорошо. Итак, здесь два варианта. Мы можем увеличить расстояние между архитектурным веб-сайтом и предварительным просмотром абзаца проекта, или мы можем уменьшить пространство, удалив… похоже, я получил отступ в 20 пикселей в верхней части названия проекта, предварительный просмотр. У вас есть предпочтения?
[Сара] У тебя есть 10? Это было бы прекрасно.
[Макгуайр] 10 вот здесь? Хорошо. Таким образом, вертикальное выравнивание между дизайном UX или пространством между дизайном UX и архитектурным веб-сайтом более равномерно.
[Сара] И прокрутите вниз до контактной формы.
[Макгуайр] Хорошо. Форма обратной связи. Двойной щелчок, ввод символа.
[Сара] Идеально. Вы помните, что мы сделали отступ 60 в деталях продукта?
[Макгуайр] Да. То же самое на-
[Сара] Я хочу, чтобы они были одинаковыми на странице контактов.
[McGuire] Блок формы до 60?
[Сара] Да.
[Макгуайр] Отлично. Значит, даже. 60 пикселей отступа, пробел внутри. Теперь он равномерно соответствует 60 пикселям, которые мы изменили в деталях проекта.
[Сара] Потрясающе. Итак, так же, как вы сделали текст даже в карточке с описанием товара, я хочу, чтобы вы сделали это, текст даже в контактной форме.
[McGuire] Пробел между h3, темным абзацем и меткой этого поля. Предполагая, что мы можем просто уменьшить маржу здесь примерно до 20 или 15?
[Макгуайр] 20?
[Сара] Это все, что у меня есть в настольной версии на главной странице.
[МакГуайр] Хорошо, отлично. Хорошие заметки.
[Сара] Хорошо. Итак, у меня есть некоторые заметки о табличках. Итак, давайте перейдем к точке останова Tablet.
[McGuire] Точка останова планшета. Мы здесь.
[Сара] Итак, интервал в этом разделе немного мал. Так можем ли мы добавить туда еще отступы?
[McGuire] Итак, насчет раздела… То есть это все разделы, а не только верхний раздел?
[Сара] Да.
[Макгуайр] Хорошо. Итак, мы добавим отступы. На самом деле, мы можем вариант, нажмите, чтобы удалить. Вы хотите что-то вроде 60 или меньше?
[Сара] 60 идеально.
[Макгуайр] Отлично.
[Сара] Итак, если вы прокрутите вниз до деталей проекта.
[Макгуайр] Хорошо. Детали-
[Сара] Я хочу…
[Макгуайр] … прямо здесь.
[Сара] Да. Я хочу, чтобы вы увеличили отступы там.
[МакГуайр] Хорошо. Увеличьте отступ там.
[Сара] Снижение!
[McGuire] Вы определенно сказали «увеличить отступы». Итак, насколько вы хотите увеличить отступ? 175 приемлемо?
[Сара] (смеется)
[Макгуайр] Вы хотели увеличить? Вы хотели увеличить отступы больше?
[Сара] № Уменьшение.
[Макгуайр] Хорошо. Так 30?
[Сара] Идеально.
[Макгуайр] Отлично.
[Сара] Хорошо. Итак, прокрутите вниз до контактной формы.
[МакГуайр] Хорошо. Форма обратной связи. Мы на планшете.
[Sara] Итак, я хочу, чтобы вы также уменьшили отступы.
[Макгуайр] Хорошо. Вернуться к 30, чтобы соответствовать вершине?
[Сара] Да. Замечательно.
[McGuire] Итак, у нас есть 30 отступов здесь, 30 отступов здесь, так что у нас есть эта последовательная строка. Это выравнивание прямо здесь.
[Сара] Вот и все. Перейдем в Mobile landscape и посмотрим там на раздел padding.
[Макгуайр] Хорошо. Заполнение раздела, мы выберем раздел. Заполнение в настоящее время 15.
[Сара] Итак, я хочу, чтобы вы увеличили отступы. Я думаю, 30 было бы здорово.
[Макгуайр] 30 отлично. 30 на все разделы.
[Sara] Итак, если вы посмотрите на h2, то увидите, что он слишком большой. Можно ли уменьшить этот размер?
[Макгуайр] Да.
25, 22.
[Сара] Выглядит неплохо.
[Макгуайр] Хорошо. h3 тогда, чтобы уменьшить его размер, чтобы он оставался пропорциональным?
[Сара] Да.
[Макгуайр] Хорошо.
[Сара] И последнее, я хочу, чтобы вы сделали немного меньше отступов в описании товара.
[McGuire] Итак, это детали проекта, это 30. Что-то вроде 10 или 15?
[Сара] 15 было бы здорово.
[МакГуайр] Хорошо, 15. Исходя из этого, предполагается, что вы собираетесь сделать то же самое с контактной формой, чтобы она оставалась неизменной?
[Сара] Точно.
[МакГуайр] Сколько записей у нас осталось после этого?
[Сара] Итак, мы на 12-м. Итак, у нас есть еще 11 нот. Это правильно?
[МакГуайр] Звучит как математика.
[Сара] Ага. Хорошо. Так это на Мобиле. Ну, давайте перейдем к более крупным контрольным точкам.
[McGuire] Увеличенная точка останова. 1920.
[Сара] И я хочу, чтобы вы взглянули на заполнение раздела здесь.
[Макгуайр] Хорошо. Заполнение раздела. Выберите свой раздел. В настоящее время 60, оно унаследовано от того, что мы изменили здесь на 60.
[Сара] Отлично. Я хочу, чтобы вы увеличили этот отступ.
[Макгуайр] Уменьшите его. Увеличить?
[Сара] Нет. Увеличивать. Я думаю, что 100 было бы здорово.
[Макгуайр] 100 сверху и снизу. Это повлияет на все разделы.
[Сара] Это все для домашней страницы.
[McGuire] Возврат к базовой точке останова. А следующая страница есть?
[Сара] Итак, у меня ничего нет на странице контактов. Итак, перейдем к паролю и странице 404. Или что такое защищенная паролем страница? Можете ли вы показать мне это?
[МакГуайр] Итак, вы не предоставили проект, ммм, руководство по дизайну этого. Итак, мы импровизировали.
[Сара] О. Прохладный. Минимальный. Мне нравится ваше внимание к Заголовку. Давайте перейдем к странице паролей и проверим более крупную точку останова.
[МакГуайр] Итак, страница с паролем, 1920.
[Сара] Так что да. Заголовок, в целом, слишком широкий.
[McGuire] Итак, мы выберем пароль Заголовок здесь. Давайте уменьшим размер этого. Мы могли бы сделать это на типографике здесь, или мы могли бы установить максимальную ширину, которая ближе к оригиналу, и просто уменьшить это… фактически удалить этот размер. Итак, мы в курсе того, что здесь происходит.
Это было 30 в 1.1. Это 30 на 1.1. Так что он выглядит уменьшенным, потому что мы смотрим на масштабированный вид. Есть ли здесь мысль, что вы хотите продолжить с этим размером? Или вы хотите увеличить размер шапки на 1920?
[Сара] Я имею в виду, что это может быть немного больше на большей контрольной точке.
[Макгуайр] Хорошо. Итак, мы сделаем размер заголовка…
[Сара] Думаю, 50 было бы здорово.
[Макгуайр] 50. Итак, в данном случае —
[Сара] Думаю, 40, 45 было бы здорово.
[МакГуайр] 45. Итак, в этом случае вы-
[Сара] Думаю, на самом деле 40.
[МакГуайр] Мы могли бы, вместо максимальной ширины 280, мы могли бы сказать 320 или даже-
[Сара] Я чувствую, что нам не нужно возиться с этим.
[McGuire] Мы можем заставить его отображать символы ширины порта.
[Сара] Хорошо. Это идеально.
[Макгуайр] Хорошо. 20 Фольксваген.
[Сара] Я имею в виду, мы могли бы сделать 0,20.
[Макгуайр] Нулевая точка 20.
[Сара] Хорошо. Итак, вернитесь к 45. Я думаю, это было нормально.
[Макгуайр] 45, Фольксваген?
[Сара] Нет, пикселей.
[Макгуайр] Пиксели. Хорошо. 45 пикселей на этой контрольной точке.
[Сара] Осталось только девять. Почти сделано. Перейдем к странице 404.
[Макгуайр] 404 стр. Страница 404.
[Сара] Что произойдет, когда область просмотра станет меньше?
[Макгуайр] Хорошо. Все еще отлично выглядит.
[Сара] Выглядит хорошо. Меньше. Меньше. Поэтому вам нужно перетащить его на меньшее устройство. Вы видите здесь проблему?
[Макгуайр] Контраст.
[Сара] Вырез слишком большой. Итак, я хочу, чтобы вы перешли на мобильный и уменьшили размер-
[МакГуайр] Итак, мобильный ландшафт, вы хотите внести изменения?
[Сара] Да, я думаю, это было бы здорово.
[МакГуайр] Итак.
[Сара] Да.
[Макгуайр] Хорошо. Итак, на 404, на этом тексте, уменьшите его до 100 пикселей?
[Сара] Выглядит хорошо.
[Макгуайр] Хорошо. Так что здесь сотня, даже когда становится уже.
[Сара] Пока все выглядит хорошо. Итак, давайте перейдем на страницу товара и посмотрим на кнопки.
[Макгуайр] Хорошо. Итак, вернемся к базовой точке останова. Вы говорите о кнопках на странице, вот об этой кнопке?
[Сара] Да. Итак, посмотрите на пространство. Итак, давайте удостоверимся, что по бокам кнопки больше места.
[McGuire] Итак, слева и справа что-то вроде 20 или 30?
[Сара] Выглядит хорошо.
[Макгуайр] Хорошо. Итак, по 20 слева и справа. 10 сверху и снизу.
[Сара] Я также хочу, чтобы вы, раз уж вы здесь, уменьшили поля от текста и снизу.
[Макгуайр] Уменьшение?
[Сара] (смеется) Я снова сказал не так?
[МакГуайр] Нет, все в порядке. Если вы хотите уменьшить его, это.
.. это, конечно, возможно. На сколько вы хотите уменьшить-
[Макгуайр] Просто скажите, когда.
[Сара] Он летит. Хорошо. Итак, увеличьте пространство между текстом и низом.
[Макгуайр] Хорошо. Отменить, отменить и увеличить место в описании проекта внизу. Итак, 10 пикселей, 20 пикселей, 30 пикселей. Что ты чувствуешь?
[Сара] 30 было бы здорово.
[Макгуайр] 30 пикселей.
[Сара] Итак, если вы прокрутите вниз до сеток, я хочу, чтобы они были ровными.
[МакГуайр] Вы говорите о пробелах в сетке здесь, которых 30, и о пробелах в сетке здесь, которых, вероятно, 16. Да, 16.
[Сара] Да.
[МакГуайр] Вам нужны даже те. Вы хотите соответствовать этому? Так это 16, а это 16? Или вы хотите сопоставить нижнюю часть с 30?
[Сара] Внизу до 30.
[МакГуайр] Хорошо. Итак, мы заблокируем это и введем 30. Итак, теперь наши промежутки сетки совпадают между каждой из трех сеток на странице. Опять же, здесь 30 пикселей. Это 30 пикселей здесь, в столбцах и строках, а также здесь между каждым из столбцов.
[Sara] Значит, на планшете будет теснее, чем на мобильном, так что давайте убедимся, что мы уменьшим зазоры.
[McGuire] Итак, вы говорите, что сетка пропускает сетку изображения, что-то вроде… давайте зафиксируем это. 15 или 10?
[Сара] Думаю, 10 было бы здорово.
[McGuire] Давайте сделаем здесь 10 пикселей. А затем, если вы хотите, чтобы то же самое было в других проектах?
[Сара] Да.
[McGuire] Получите сетку, зафиксируйте ее, 10 пикселей. Сделанный.
[Сара] Круто. Одна вещь, которую нужно знать, перейдите на Mobile, и я хочу, чтобы сетка изображений была одной колонкой.
[McGuire] Итак, изображение сетки. Сетка изображения в настоящее время представляет собой два на два. Удалите этот второй столбец. Щелкните правой кнопкой мыши, удалите столбец.
[Сара] Итак, просто убедитесь, что зазор совпадает.
[McGuire] Между другими проектами, так что в этом сейчас 15. Мы можем выбрать опцию, удалить это, чтобы оно наследовало 10.
Итак, теперь мы сопоставляем 10 пикселей с интервалом здесь и 10 пикселей с интервалом здесь.
[Сара] Потрясающе. Это все для мобильных устройств. Итак, давайте перейдем к более крупным контрольным точкам и проверим заголовок.
[McGuire] 1920 Заголовок — это заголовок.
[Сара] Хорошо. Хм, Заголовок на самом деле выглядит великолепно. Единственное, что осталось, это навбар.
[Макгуайр] Хорошо. Вернуться к базовой точке останова для панели навигации. Дважды щелкните, чтобы отредактировать наш символ.
[Сара] Итак, проверьте, насколько отзывчиво меню.
[McGuire] Итак, в Tablet мы инициируем эту кнопку меню. Мы можем пойти и открыть меню.
[Сара] Посмотрите на отступ слева.
[Макгуайр] Отлично. Итак, навигационная ссылка, мы пойдем туда и увеличим отступы до 30 пикселей с обеих сторон, чтобы они совпадали.
[Сара] Хорошо. Выглядит неплохо. Посмотрите Мобильный портрет.
[Макгуайр] Хорошо. Мобильный портрет. Предполагая, что вы хотите уменьшить отступы, чтобы выровнять логотип?
[Сара] Точно.
[Макгуайр] Хорошо. Так что мы уменьшим число с 30 до примерно 10.
[Сара] У нас ничего не осталось. Вот и все.
[Макгуайр] 23?
[Сара] Да.
[Макгуайр] Все 23.
[Сара] Все 23. Хорошо. Итак, это все. Вот что у нас есть для интервала. Итак, давайте поговорим об именах. Вы можете перейти к списку коллекций на главной странице?
[McGuire] Переход к списку коллекций на главной странице. Возвращаюсь, возвращаюсь сюда. Перейдя к списку коллекций на главной странице, вернемся к базовой точке останова. Хорошо. Мы здесь, список сбора.
[Сара] Сейчас это не очень доступно. Если вы используете программу чтения с экрана, она сначала прочитает UX-дизайн.
[МакГуайр] Отличное замечание. По умолчанию программы чтения с экрана будут читать первый текст внутри ссылки. Однако-
[Сара] Вы можете использовать Flexbox.
[Макгуайр] Flexbox. Итак, в деталях проекта, если мы хотим, чтобы это было более конкретным, мы можем собрать.
.. используя нашу коллекцию, мы можем составить более описательную версию текста. Более описательный текст для тех, кто использует программу чтения с экрана и интересуется не только UX-дизайном.
Итак, вот как мы можем это сделать. Для нашего текста кнопки здесь мы можем продолжать использовать это. Но мы собираемся обернуть его блоком Div. Вот почему. Если мы перейдем к команде K, чтобы ввести быстрый поиск и добавить блок Div, мы можем использовать блок Div для организации более описательного заголовка. Итак, мы размещаем текст кнопки прямо здесь, и мы можем изменить его позже. Сейчас там будет написано «Просмотреть проект». Но мы можем захотеть, чтобы вместо этого было сказано, что мы удалим слово проект, и теперь оно говорит «просмотр». И сейчас это нормально, потому что мы собираемся добавить еще два текстовых элемента.
Итак, внутри этого блока Div мы просто скопируем и вставим. И по умолчанию текстовые блоки занимают всю ширину. Это элементы блочного уровня. Но мы можем установить для них встроенный блок.
Таким образом, они будут складываться рядом друг с другом. Потому что на втором мы хотим его привязать, мы хотим связать этот текст, получить этот текст от имени клиента. Давайте закроем это, потому что сейчас оно покажет его название. Это немного близко прямо сейчас. Таким образом, мы всегда можем взять «представление» и просто добавить пробел. Просто нажмите Shift-пробел, чтобы выйти из ручного пространства после просмотра.
И тексты третьей кнопки, которые мы хотим использовать, давайте просто скопируем и снова вставим. Мы отвяжем это и вместо этого снова создадим проект Shift-Space.
[Сара] Идеально.
[McGuire] Теперь, когда у нас есть этот блок Div, мы можем разместить его прямо вверху. Но мы собираемся использовать немного магии здесь.
[Сара] Флексбокс.
[МакГуайр] Верно. Итак, первое, что прочитает программа чтения с экрана, это «Вид. План темной лошадки. Проект». Почему мы это сделали? Почему мы разместили блок Div в верхней части этого блока ссылок? Ну, причина в том, что если мы используем программу чтения с экрана, она теперь скажет:
[macOS VoiceOver] «Ссылка.
Посмотреть проект плана Darkhorse, UX-дизайн, архитектурный веб-сайт. Я разработал макет, вдохновленный архитектурными планами, который реагирует на действия пользователя и меняется при каждом посещении».
[McGuire] Теперь ссылка стала более наглядной. И мы можем добавить класс, чтобы все было организовано. Давайте сделаем предварительный просмотр клиентского проекта этого класса. И вот тут на помощь приходит Flexbox. Поскольку порядок документов теперь правильный, потому что программы чтения с экрана будут смотреть на него в первую очередь, эстетически мы все еще можем переместить его в конец. Мы можем изменить порядок Flexbox на последний. Теперь это внизу, и мы можем добавить верхнее поле, мы можем просто установить для верхнего поля значение auto. Это автоматически создаст пространство. Это подтолкнет предварительный просмотр клиента проекта вниз, в пространство, доступное в нашем блоке ссылок.
И если мы развернем навигатор, вот здесь слева, мы увидим, мы всегда увидим, что предварительный просмотр клиента проекта появляется первым.
Обычно программы чтения с экрана обращаются к официальному порядку документов, порядку внутри навигатора, и сначала находят его и читают «Просмотреть план темной лошадки. Проект».
[Сара] Что касается абзацев, здесь у меня была только одна заметка. Некоторые немного широковаты.
[Макгуайр] Согласен. И здесь мы можем установить максимальную ширину на уровне абзацев, на уровне тега всех абзацев. И хорошим примером этого может быть страница контактов, в абзаце действительно много текстов, которые мы читаем слева направо. Итак, давайте зайдем сюда.
При выборе любого абзаца мы можем использовать тег «все абзацы». Мы можем установить максимальную ширину, например, 60 каналов. И вот как они работают. Один CH равен ширине цифры ноль в любом шрифте. Итак, какой бы шрифт мы ни использовали, если мы установим эту максимальную ширину в 60 CH в теге all Paragraphs, она никогда не станет шире 60 нулей в этом шрифте. Итак, мы добавили его во все абзацы.
Есть одна заметка, которая находится на главной странице.
Если мы вернемся на домашнюю страницу, мы установим максимальную ширину. Мы вручную устанавливаем один для этого класса. Итак, если мы вернемся назад, хотя предполагается, что это повлияет на все абзацы, мы увидим, что хотя мы наследуем два селектора… и мы можем вернуться к этим всем абзацам. Мы видим, что максимальная ширина перечеркнута. Поэтому, если мы нажмем, мы увидим, что значение перезаписывается более конкретным селектором. И это, конечно, если мы нанесем ответный удар, то это сам Параграф. Итак, все, что нам нужно сделать, это удалить это более конкретное значение. Нажимаем сброс. И теперь он наследует 60 CH. Эти 60 СН контролируются всеми пунктами.
[Сара] Хорошо. Вот и все, что касается абзацев. Но на многих сайтах-портфолио есть резюме, а на нашем нет. Поэтому я хотел бы посмотреть, можем ли мы добавить один сейчас.
[МакГуайр] Абсолютно. И вы хотите, чтобы это было на…
[Сара] Я хочу убедиться, что это на всех страницах, так что давайте поместим это в панель навигации.
[Макгуайр] Хорошо. Итак, Navbar, дважды щелкните, чтобы отредактировать. Предположим, вам нужна кнопка навигационной ссылки или вы хотите, чтобы она выглядела как обычная навигационная ссылка?
[Сара] Обычная навигационная ссылка.
[МакГуайр] Хорошо. Итак, мы скопируем и вставим. Мы сделаем это Резюме. Убедимся в настройках элемента, что он связывает людей не с внешним URL, а с файлом, который мы можем загрузить. Итак, Меган, наш UX-дизайнер полностью выдумана, поэтому у нее нет резюме. Это нормально. Мы можем использовать рабочие листы из P90X. Давайте перейдем к нашей панели «Активы», и мы можем просто перетащить PDF-файл из P90X прямо в ресурсы, и он будет загружен.
А здесь вместо внешнего URL давайте привяжем его к файлу. И мы хотим выбрать актив, и мы выберем P90X, листы тренировок в формате PDF. Опять же, с такими ссылками мы всегда можем открыть их на той же вкладке, на этой вкладке или на новой вкладке. В этом случае мы откроем его в новой вкладке.
А если мы перейдем к предварительному просмотру и нажмем «Возобновить».
[Сара] Потрясающе.
[МакГуайр] Верно, Сара. У нас есть рабочие листы P90X с армейскими отжиманиями, подтягиваниями обратным хватом и тяжелыми штанами.
[Сара] Отличный дизайн. Итак, обратите внимание на расстояние между каждой из навигационных ссылок и кнопкой «Скажи привет».
[McGuire] Итак, вы говорите, равномерный интервал, вы хотите, чтобы между ними был равномерный интервал… Итак, если мы перейдем к панели «Стиль», мы увидим, что у нас есть 20 пикселей отступа слева и справа. здесь. Слева и справа здесь. Но, поскольку этот отступ находится внутри этого цвета, вы ищете, вероятно, 20 пикселей слева здесь?
[Сара] Так что здесь все хорошо. Но имейте в виду, это повлияет на разные точки останова.
[McGuire] Итак, если мы перейдем к Tablet и откроем нашу кнопку Menu, то давайте перейдем сюда, чтобы открыть Menu. Мы увидим, что на самом деле это похоже на что-то красное.
Давайте посмотрим, что там происходит. Похоже, у нас есть красный цвет, давайте удалим его. И приступим к сбросу. И поскольку мы добавили этот запас слева от 20, мы видим этот разрыв. Давайте удостоверимся, что это ноль, что уравняет это. И мы проверим здесь на Мобильный пейзаж, Мобильный портрет. Выглядит довольно ровным и подобранным здесь.
[Сара] Хорошо. Итак, резюме. Давайте делать взаимодействия.
[МакГуайр] Что было…
[Сара] О, я сделала это.
[МакГуайр] Ты собирался снова продлить Z-
[Сара]?
[Макгуайр] Да.
[Сара] О, у меня две записки. Начнем с взаимодействия с Лотти в контактной форме.
[Макгуайр] Хорошо. Форма обратной связи. Вернемся к базовой точке останова и спустимся к контакту. На самом деле, давайте сделаем это на странице контактов, чтобы все было аккуратно и организованно. И вот мы в блоке формы.
[Сара] Итак, я хочу добавить это к нашему сообщению об успехе.
[McGuire] Итак, переходим к настройкам элемента и переходим к Успеху.
Обычно он говорит: «Спасибо. Ваша заявка принята». Вы хотите добавить сюда много анимации?
[Сара] Да.
[Макгуайр] Хорошо. Куда вы хотите пойти для много анимации?
[Сара] Если вы зайдете на Lottiefiles.com.
[Макгуайр] Lottiefiles.com.
[Сара] И вы можете увидеть в строке поиска, найдите нужную вам анимацию Лотти. Так, например, успех.
[Макгуайр] Конфетти.
[Сара] Добьемся успеха.
[Макгуайр] Успех.
[Сара] Ладно, в ней есть куча. Давайте прокрутим и посмотрим, какой из них нам нравится. Тот, что внизу слева, отлично выглядит.
[McGuire] Итак, мы нажмем здесь. Давайте загрузим Лотти Джейсон.
[Сара] Отлично. Итак, давайте перенесем это в Webflow.
[McGuire] Итак, вернемся к Webflow, мы перетащим наш файл Лотти Джейсон с экрана, а затем просто поместим его прямо в сообщение об успешном завершении.
[Сара] Отлично.
[McGuire] И его продолжительность по умолчанию выглядит как три секунды, если мы просмотрим анимацию, мы увидим, что она довольно большая.
Итак, пара вещей здесь. Прежде всего, о самом сообщении об успехе. Вы хотите, чтобы он по-прежнему имел этот серый цвет или вы хотите прозрачный фон?
[Сара] Прозрачный.
[Макгуайр] Хорошо. Сделаем прозрачным. И тогда давайте установим ограничитель на этом. Итак, давайте установим максимальную ширину анимации Лотти в 300 пикселей. Мы можем установить для поля с обеих сторон значение auto, чтобы оно было центрировано.
[Сара] Можешь поместить это над текстом?
[Макгуайр] Да. Над текстом и давайте перейдем к предварительному просмотру, чтобы увидеть, как это выглядит.
[Сара] Можно немного уменьшить размер?
[McGuire] Итак, вы хотите увеличить максимальную ширину до большего числа?
[Сара] Нет, меньше.
[Макгуайр] Хорошо. Итак, 100.
[Сара] Выглядит неплохо.
[МакГуайр] Вот оно.
[Sara] Единственное, что я хотел бы отметить, это добавить немного интервала вверху и внизу этой анимации Лотти.
[McGuire] Итак, сверху у нас уже есть 20 пикселей отступа.
Итак, вы хотите добавить 20 пикселей внизу поля?
[Сара] Хорошо выглядит.
[McGuire] 20 и предварительный просмотр.
[Сара] Хорошо. Итак, это выглядит хорошо. Итак, еще одна вещь, которую я хотел сделать, — это сопоставить взаимодействие на странице продукта с домашней страницей.
[McGuire] Итак, вы говорите в шаблоне проектов.
[Сара] Если вы прокрутите вниз, давайте сделаем то же взаимодействие со свечением, которое мы сделали на главной странице.
[МакГуайр] Хорошо. Мы можем это сделать. Итак, давайте продублируем изображение нашего проекта. Давайте перейдем к дублированию, как мы это делали на главной странице. Мы можем удалить класс из этого и использовать… это было то, что закончилось в действительности. Вот оно. Эффект выбранных проектов. И пару изменений, которые мы должны сделать.
[McGuire] Первое, что мы хотим сделать, это установить это, чтобы заполнить пространство, доступное внутри этого pa. Итак, мы хотим расположить его вокруг своего родителя, мы выберем полный.
И второе, что нам нужно сделать, поскольку он абсолютно позиционирован, нам нужно убедиться, что его родитель, блок ссылок, настроен на относительное позиционирование. Теперь всякий раз, когда мы стилизуем класс, который используется на нескольких страницах, мы всегда хотим вернуться и убедиться, что он по-прежнему работает должным образом на другой странице. Итак, вернемся домой. Мы прокрутим вниз, перейдем в режим предварительного просмотра и наведем курсор, чтобы убедиться, что наш эффект свечения работает правильно.
[МакГуайр] И вроде работает нормально. Имея это в виду, давайте вернемся к шаблону нашего проекта, потому что, хотя у нас есть элемент, взаимодействие еще не было применено. Итак, мы хотим применить взаимодействие, когда кто-то наводит курсор на блок ссылок. Итак, мы можем перейти к взаимодействиям, и это будет намного быстрее, потому что мы построили взаимодействие до того, как добавим триггер элемента. Мы хотим, чтобы это происходило при наведении курсора мыши на элемент.