Спроектировала и сверстала экран редактирования страницы сайта для владельца бизнеса без технических знаний. Нужно было сделать интерфейс, который не требует обучения: понятные названия полей, превью поискового сниппета, загрузка фото перетаскиванием и отмена опасных действий. Концепт без реального заказчика.
— Спроектировала структуру экрана: боковое меню (страницы, товары, заявки со счётчиком, фотографии, контакты) и верхнюю строку состояния со статусом «черновик сохранён» и кнопками «Как увидят покупатели», «Опубликовать».
— Сверстала интерфейс на HTML и CSS, отрисовала собственные SVG-иконки для всех разделов и действий.
— Сделала редактор текста с минималистичной панелью форматирования, чтобы владелец бизнеса не терялся в обилии инструментов.
— Показала загрузку фото перетаскиванием: полоса прогресса и подсказка, что фотографии с телефона уменьшатся автоматически.
— Добавила блок «Как страницу увидят в поиске»: превью сниппета с вкладками Яндекс, Google и Телефон, поля «Заголовок в поиске Яндекса и Google» и «Описание в поиске» со счётчиками символов и подсказками.
— Разместила переключатели «Показывать на сайте» (скрыть страницу без удаления) и «Ссылка в меню».
— Предусмотрела чек-лист перед публикацией, чтобы пользователь не пропустил важные шаги.
— Сделала уведомление об удалении фото с кнопкой «Вернуть» — отмена опасного действия.
— Применила принцип: названия полей человеческим языком, потенциально опасные действия с возможностью отмены.
Получился HTML/CSS-прототип экрана редактирования страницы сайта. Он показывает, как снизить порог входа для нетехнического владельца бизнеса: понятные названия, превью сниппета, загрузка фото перетаскиванием и отмена удаления. Проект концептуальный, без реального заказчика.