UXPUB

UXPUB - спільнота з 4,813 дизайнерів та креативних фахівців

Місце для обміну досвідом та дискусій навколо індустрії

Зареєструватися Увійти
Cover image for Проєктування веб-портфоліо. Сторінка редагування
Антон Солодовников
Антон Солодовников

Опубліковано

Проєктування веб-портфоліо. Сторінка редагування

План 📝

  1. Структура сторінки
  2. Розділи
  3. Верхня частина редактору
  4. Поле вводу тексту та панель інструментів

Структура сторінки 🏗️

Надихнувшись (вкрав) uxpub, вирішив розробити схожу за структурою сторінку, яка буде складатись із двух розділів: редагування та попередній перегляд.

Розглянемо більш детально розділ редагування. Він складається з форми завантаження обкладинки, поля заголовка, поля тегів та редактора тексту з панеллю інструментів.

Structure


Розділи 🕹️

Як я вже казав, сторінка складається з розділу редагування та розділу попереднього перегляду. Це зроблено для покращення користувацького досвіду. Для навігації між розділами було використано перемикач "Edit/Preview".

Edit and preview modes


Верхня частина редактору 🤯

Першим на погляд попадає форма завантаження обкладинки, справа від якої є допоміжний текст, який залежить від стану компонента. Якщо при завантаженні сталася помилка, обов'язково повідомте користувача та не забудьте вказати причину помилки та як її виправити.

Наступні два поля слугують для задання заголовка та тегів. Пам'ятайте, що гарною практикою є стилізація поля при вводі даних. Крім того, не забувайте про плейсхолдери.

Поле з тегами буде мати автодоповнення, користувач зможе обирати вже існуючі теги або створити нові.

Top element of edit page


Поле вводу тексту та панель інструментів 📝

Перейдемо до найголовнішої частини нашої сторінки, в якому ми будемо проводити більшість часу, при створенні статті.

Чому використання моноширинного шрифту в редакторі є гарною практикою? Є декілька відповідей:

  1. Легше бачити тонкі розділові знаки, такі як: () {}
  2. Однакова ширина символів Це все полегшує написання текстів та мінімізують можливі помилки.

Для того, щоб спростити використання markdown розмітки створимо панель інструментів: жирний шрифт, курсив, посилання, заголовок, код та зображення. В цілому, можна обійтись без цієї панелі, якщо знати markdown, але вона значно прискорює написання тексту.

Не забувайте про контраст тексту, він повинен бути, як мінімум, на 5 стопів вище ніж фон.

Text field


Висновок 🧮

Підсумовуючи, редактор тексту повинен бути максимально зрозумілим, розбірливим та простим. Сподіваюсь вам допомогла ця невеличка стаття.

Edit page


Підписуйтесь та тикайте вподобайку, щоб не пропустити нові статті. Бажаю вам гарного для 👋

Обговорення (0)