Нейросети для помощи в создании сайтов
Dora AI генерирует лендинги, блоги, портфолио и другие веб-страницы с уникальным дизайном за минуту. Подробнее в этой статье
Dorik AI Website Builder - делает нормальный сайт, который легко поправить, например, добавить свои картинки или немного рихтануть текст. Легко настроить настроить ссылки на кнопки и т.д. Для первого сайта прям плюсую. Подробнее в этой статье
Coframe - это копирайтер, фронтенд-разработчик и UX-исследователь, ии-дизайнер. Вставляете адрес своего сайта, затем сервис предоставит развернутые советы с метриками. Подробнее в этой статье
Framer - конструктор сайтов с искусственным интеллектом, удобный редактор, встроенная CMS, готовые шаблоны, база картинок, готовые цветовые решения и т.п. Подробнее в этой статье
Galileo - генерирует UI дизайн по запросу и картинке. Хорошая находка для UI-дизайнеров. После генерации вы сможете редактировать макет прямо на сайте или экспортировать в Figma. Подробнее в этой статье
draw-a-ui - Генерация сайта из простого наброска без знания кода, преобразует макет в рабочую страницу. Подробнее в этой статье
Хотите узнавать первыми о полезных сервисах с искусственным интеллектом для работы, учебы и облегчения жизни? В своем телеграм канале НейроProfit я рассказываю, как можно использовать нейросети для бизнеса
Как обойтись без UX-редактора и сделать текст в интерфейсе понятным пользователю?
В процессе разработки продукта или фичи неизбежно возникает необходимость работы с текстом. Если в команде есть UX-редактор, то именно ему поручается этот этап. Он играет роль дополнительного "мозга" для создания удобного и бесшовного флоу. Кроме того, UX-редактор обладает высокой продуктовой насмотренностью - через его руки проходит множество макетов, что позволяет ему выявлять потенциальные риски, последствия и пересечения с другими продуктами в компании и на рынке
Зачем нужно проверять тексты и какие могут быть последствия, если этого не делать? Даже самые привлекательные интерфейсы могут оказаться бесполезными, если пользователь "споткнется" о неправильно подобранные слова, орфографические или пунктуационные ошибки, несоответствие контексту или даже оскорбительный смысл, воспринимаемый пользователями в невинных, на первый взгляд, фразах. Последствия могут быть разными - от незначительных до серьезных, вплоть до потери лояльности клиентов
Но бывает и такое, что в команде нет UX-редактора и работу с текстом приходится брать в свои руки. Для таких случаев я совместно с Софьей Львовой (Лид UXW в Билайне) разработали ряд рекомендаций, которые помогут дизайнерам самостоятельно проверять текст на качество
Оглавление:
Дефис/тире/длинное тире
Дефис используется для объединения частей слов и словосочетаний, для прикрепления частиц и префиксов, а также для обозначения сокращений и в сложных словах
Длинное тире используется в предложениях и отделяется пробелами. Оно ставится между подлежащим и сказуемым, для выделения прямой речи, на месте пропущенного члена предложения, для обозначения маршрутов и в других случаях
Короткое тире используется в числовых диапазонах (может отличаться от компании к компании в зависимости от редполитики)
Ёлочки/лапки
Ёлочки и лапки являются знаками препинания и помогают сделать текст более структурированным, удобным для чтения и понимания, а также подчеркнуть важные элементы или сообщения
Ёлочки (« ») — это кавычки первого уровня, а лапки (“ ”) — это кавычки второго уровня (может отличаться от компании к компании в зависимости от редполитики)
Рекомендуется использовать разные типы кавычек для внешнего и внутреннего текста внутри кавычек. Например: ЗАО «Издательский дом „Зерновые культуры“»
Неразрывные пробелы
Неразрывные пробелы в интерфейсе используются для обеспечения правильного отображения текста и предотвращения нежелательного переноса слов на новую строку. Вот несколько основных способов применения:
1) инициалы (А. П. Чехов)
2) сокращения с точками (и т. д.)
3) числа с последующим словом или единицей измерения (10 км, 1984 г.),
4) предлоги, союзы и иногда частицы (ни о чем)
5) сохранение целостности комбинации слов
Чтобы поставить неразрывный пробел, используйте комбинацию Shift+Opt+Space на MacOS и Shift+Alt+Space на Windows
Е/ё
Большинство людей, далёких от написания текстов, считают, что ничего страшно не будет, если вместо «ё» писать букву «е», считая их взаимозаменяемыми. На самом же деле, это две разных буквы. Например: все/всё, осел/осёл, совершенный/совершённый
В разных компаниях к букве ё относятся по-разному. Где-то её используют, а где-то нет. Если у вас нет редполитики — не ленитесь разделять эти буквы. Уважайте русский язык и любите букву ё
Точки на концах абзацев
Точки на концах абзацев в интерфейсе создают визуальную структуру, делая интерфейс более организованным и удобным для восприятия, но, в зависимости от редполитики, могут и не использоваться
В каких-то компаниях точки на концах абзацев ставят, а на каких-то нет. Если у вас нет редполитики — сами принимайте решение ставить точки или нет
Гендерная нейтральность
Гендерная нейтральность в тексте предполагает использование языковых конструкций и выражений, которые не отражают предположений или ограничений по половому признаку. В современном мире это становится все более важным, поскольку общество становится более инклюзивным в отношении гендерных различий
Не называйте кнопки: «согласен(-на)», «готов(-а)», «ознакомился(-ась)». Особенно часто этим грешат в лигалах
Эмоциональная нейтральность
Принцип эмоциональной нейтральности в интерфейсе подразумевает использование текста и элементов, которые не вызывают сильных эмоциональных реакций у пользователей, а остаются более универсальными и понятными для всех пользователей. Это помогает предотвратить возможные негативные ассоциации или недопонимания
Не пишите: «Вы не можете продолжить без авторизации. Пожалуйста зарегистрируйтесь». Это предложение может вызвать чувство ограничения или даже раздражение из-за использования слов "не можете" и "пожалуйста", которые подчеркивают ограничения и требования
Нейминг кнопок
Нейминг в кнопках должен быть таким, чтобы кнопки однозначно и прозрачно давали понять, куда ведут и при этом стыковались с заголовком. Если в заголовке спрашиваем «Подключить услугу?», то в кнопке должно быть «Подключить» и никак не «Активировать»
Если у вас в команде любят заигрывать с Conversational Design (когда на кнопках вместо «Подключить» пишут «Да, хочу!»), пристально следим, чтобы кнопка всегда была рядом с заголовком иначе с большой долей вероятности смысл будет потерян
Заголовки
У людей нет, ни времени, ни желания читать экраны. Поэтому в заголовке должна быть отображена понятная суть. Например: «Оплата прошла», «Отключите VPN»
Дубликаты текста
Текст не должен дублироваться без весомой причины. Например, в форме ввода не нужно писать «Введите ФИО», достаточно просто «ФИО». Сама форма ввода уже заменяет глагол «введите»
Адаптивность
Вся важная текстовая информация должна вмещаться в самые маленькие экраны. Важный для людей текст должен быть на самом видном месте вверху страницы, неважный спрятан в самом низу
Канцеляризмы
В тексте не должно быть сложных слов, канцеляризмов, сложноподчинённых оборотов, вводных слов, чтобы текст стал более доступным и интуитивно понятным для пользователей. Использование сложных формулировок может создать путаницу и затруднить восприятие информации
Вывод
Данные рекомендации помогут вам улучшить текст в интерфейсе, но не заменят работу опытного UX-редактора. Ведь UX-редактор – это специалист, который обладает глубокими знаниями в области UX-дизайна, лингвистики и психологии. Он умеет создавать тексты, которые не только понятны и удобны для пользователей, но и мотивируют их к целевому действию
Тем не менее, в отсутствии в команде такого специалиста, применение данных рекомендаций позволит вам сделать текст более понятным и читаемым самостоятельно
Понравилась статья?
Ищи больше в моём телеграм-канале. Там постоянно выходит что-то интересное
Вы хотите головоломок?
Их есть у нас! Красивая карта, целых три уровня и много жителей, которых надо осчастливить быстрым интернетом. Для этого придется немножко подумать, но оно того стоит: ведь тем, кто дойдет до конца, выдадим красивую награду в профиль!
Куда складывать референсы? или Eagle, как панацея для дизайнера
В этой статье я хотел бы поделиться опытом пользования Eagle. Рассказать о его преимуществами и пару слов о недостатках
Повышение насмотренности
Повышение насмотренности является неотъемлемым процессом в жизни каждого дизайнера. Референсы – это твой фундамент, на который ты сможешь опереться, независимо от поставленной задачи в любой момент времени
Как это происходит сейчас
Дизайнеры активно собирают свои базы на таких именитых сервисах как: Dribble, Behance, Dprofile, Pinterest. Но есть нюанс. Это разные сервисы и не имеют общей системы навигации. Да и в целом там много всего надо перерабатывать, чтобы пользователям было удобно
Проблема рядового дизайнера состоит в том, что если ты сохраняешь референсы постоянно, их количество неумолимо растёт и работать без чёткой системы становится невозможно
Но есть решение…
Eagle – твой незаменимый помощник
Продукт, который позволит собирать, искать и упорядочивать дизайн-файлы логичным образом в одном месте
Лицензия Eagle включает в себя 2 копии, которые будут работать на двух девайсах одновременно. Так же, ты получаешь расширение в браузер, при помощи которого в связке с приложением и происходит вся магия
Программа является абсолютным киллером всех прочих аналогов, так как оптимизирует практически все рутинные действия, которые мы совершаем в процессе работы.
Расширенный список поддерживаемых форматов до svg, psd, gif, font и прочих
Папки и смарт-папки
Папки выполнены в минималистичном стиле, что позволяет выводить до 40 папок одновременно и не теряться среди них. Не остаётся без внимания возможность персонализировать папки при помощи цвета и иконок
Так же в Eagle есть возможность создавать смарт-папки с умной фильтрацией, но этому решению я не нашёл никакого практического применения
Поиск по цвету или названию
При сохранении каждого файла через плагин, приложение по автоматически создает цветовую палитру и его название, благодаря чему, ты можешь быстро искать необходимые изображения по различным параметрам
Автоматическое сохранение ссылок
При сохранении любой сущности на веб-странице сохраняется ссылка на источник. Благодаря этому не придётся вспоминать где вы нашли тот или иной референс
Качественный скриншотер
Удобные команды, похожие на нативные, а именно:
• option+2 для скриншота выбранной области
• option+3 для скриншота видимой области
• option+4 для скриншота всей страницы с прокруткой
Из крутых фич – Eagle позволяет сохранять элементы на странице с зажатой клавишей cmd. Это очень удобно и бонусом сокращает количество необходимых кликов до минимума
Все скриншоты сохраняются в превосходном качестве (гораздо лучше любых браузерных конкурентов, проверено временем)
Хранение шрифтов
Хранение шрифтов – моя больная тема. Сдал свой рабочий ноутбук, получил новый, вроде всё нужное перенёс, а шрифты забыл. Жизнь тлен → Любой браузер → Скачать SF Pro (и так далее). Eagle поддерживает шрифты, это не может не радовать
Какие файлы поддерживает Eagle?
В настоящее время Eagle поддерживает добавление всех типов форматов файлов. Следующие форматы файлов можно предварительно просмотреть или воспроизвести напрямую:
• Фото (bmp, gif, heic, heif, hif, icns, ico, jpeg, jpg, png, svg, tif, tiff, ttf, webp, avif, base64, jfif, insp, jxl, jpe)
• 3D (fbx, obj, 3ds, 3mf, dae, ifc, ply, stl, glb)
• Текстура (dds, exr, hdr, tga)
• Видео (m4v, mp4, webm, mov (H. 264 / H. 265 / HEVC / AV1 / VP9 / VP8)
• Аудио (aac, flac, m4a, mp3, ogg, wav)
• Шрифт (ttf, ttc, otf, woff)
• RAW (3fr, arw, cr2, cr3, crw, dng, erf, mrw, nef, nrw, orf, otf, pef, raf, raw, rw2, sr2, srw, x3f)
• Office (txt, key, numbers, pages, pdf, potx, ppt, pptx, xls, xlsx, doc, docx, eddx, emmx)
• Другие (html, mhtml, url)
Недостатки
• цена лицензии в $30 (Raindrop.io как бесплатный аналог)
• покупка через Paypal (недоступен для граждан РФ)
• отсутствует облачность, для сгрузки файлов – об этом в пункте ниже
Как сделать Eagle облачным
Для этого необходимо скачать приложение Google Drive и создать библиотеку Eagle на облачном диске. После этого все сохранённые файлы будут автоматически сгружаться в облако Google Drive. В среднем, файлы весят около 3 мб. Кажется что 15 гб, которые Google предоставляет бесплатно должно хватить надолго
Идеальных не бывает?
Готов поспорить. По моему мнению, это единственное безальтернативное решение на рынке для хранения референсов. У Eagle очень грамотный интерфейс, множество полезных функций, которые экономят твоё время и не уводят фокус от наслаждения «прекрасным»
Рекомендую попробовать всем, кто любит порядок и ценит своё время
Понравилась статья?
Ищи больше в моём телеграм-канале. Там постоянно выходит что-то интересное
Лучшее объяснение смысла ux
Когда тебе пересказывают «внятное» тз
А что мы вообще знаем о себе
Что надо успеть за выходные
Выспаться, провести генеральную уборку, посмотреть все новые сериалы и позаниматься спортом. Потом расстроиться, что время прошло зря. Есть альтернатива: сесть за руль и махнуть в путешествие. Как минимум, его вы всегда будете вспоминать с улыбкой. Собрали несколько нестандартных маршрутов.