Даша Милова - Создание сайтов и SEO › vamp_fiesta Сбер ID
Создание сайтов под ключ, SEO и GEO-продвижение
Рейтинг
8 075
№ 146 в каталоге
Отзывы
Профессионализм
10/10
Коммуникация
10 /10
Город
Москва
Опыт работы
9 лет
На сайте с
2014 года
Юридический статус
ИП
Freelance.Boutique
Премиум-сервис для лучших исполнителей

Концепт: UX/UI редактора сайта — экран редактирования страницы для нетехнического владельца бизнеса

Используемые навыки UI/Пользовательский интерфейс UX/Пользовательский опыт Дизайн интерфейса Проектирование интерфейсов Разработка CMS

Описание

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

Решение

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

Результат

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

Оценили проект:

Другие проекты

Все проекты →
Веб-разработка и IT Экран регистрации веб-сервиса
Экран регистрации веб-сервиса
146
Веб-разработка и IT Сайт консьерж-сервиса Concierge Sardinia на Сардинии
Сайт консьерж-сервиса Concierge Sardinia на Сардинии
146
Дизайн и Брендинг Логотип для строительной компании ALFACADE
Логотип для строительной компании ALFACADE
166
Веб-разработка и IT Разработка сайта туристического агентства «Авторские путешествия»: индивидуальные туры по всему миру
Разработка сайта туристического агентства «Авторские путешествия»: индивидуальные туры по всему миру
30