Дизайн текста и визуальное повествованиеПрактический курс Максима Ильяхова

«Пиши, соблазняй» — курс о создании сильных информационных продуктов. Не просто написать какой‑то текст, а сделать так, чтобы больше людей захотели его прочитать и поделиться. Даже если это текст о новых правилах валютного контроля или лечении рака за границей.

Курс — для продвинутого уровня. Будет интересно редакторам, блогерам, главредам, которые умеют сделать сильную структуру и написать понятный текст, без стоп‑слов и ерунды, но не понимают — а что дальше, как выхватить внимание читателя из своего этого информационного шума.

Курс не учит писать текст. За этим лучше на другой курс — «Информационный стиль». Там стоп‑слова, гигиена текста, структура и прочий редакторский минимум.

Курс сложный, но мне дал как редактору сто шагов вперёд. Во время курса постоянно писала клиентам что‑то вроде: «Вот, наконец придумала, как сделать это» или «А вот тут — выкидываем текст, делаем схему».

Курс построен очень гармонично: маленькие кусочки теории и сразу — практика. Изучили «призму Ильяхова», посмотрели на примерах и тут же пилим заголовки из своего реального проекта. Потом Максим делает разбор. Разобрали принципы иллюстрации — и вот уже пилим заглавную картинку для своей статьи. Оказывается, что иногда даже не нужно платить дизайнеру, можно сделать самому и получится круто.

Вся сила — в разборе работ, своих и чужих. Видишь множество вариантов, как можно сделать ещё, по‑другому. В общем, полный блокнот идей, как модно говорить в инстаграме. Заданий очень много. Если Максим не успевает разобрать чью‑то работу во время курса, можно попросить разобрать лично.

С курса унесла много инструментов по управлению вниманием читателя. А ещё Максим даёт огромную библиотеку статей, примеров, плохих и хороших — можно что‑то своровать для своих проектов или хотя бы просто увидеть, как ещё бывает. Регулярно изучаю эти материалы, за два месяца так до конца и не дошла. Но постоянно открываю что‑то новое.

Курс не изматывает. Нет домашних заданий, которые нужно делать ночью. Все задания — во время курса, и их очень много. Успеваешь разобраться в нескольких своих статьях.

И ещё, на курсе не чувствуешь себя ущербным и глупым, как иногда бывает. Максим очень деликатно разбирает работы, не требует какого‑то запредельного уровня, не оценивает и не ставит оценки. Всё построено так, что не стыдишься своих кривых рук, а растёшь и становишься круче с каждым заданием.

Дизайн текста: создаем идеальные параграфы Дизайн

Не секрет, что читаемость и популярность статей, которые вы размещаете на страницах собственных сайтов, зависит не только от того, как они написаны, а и от того, как они оформлены. В данной статье мы затронем именно дизайн текста.

1. Почему дизайн текста играет важную роль?
2. Главные правила дизайна текстов
3. Дизайн текста в email-рассылках

Запомните, что соблюдать «культуру» дизайна, необходимо с самого «начала» сайта, это позволит не только быстро научится оформлять тексты, а и поможет создать собственный стиль, который является одним из факторов, влияющих на успех и популярность ресурса.

Почему дизайн текста играет важную роль?

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

А теперь переходим непосредственно к правилам оформления текстов…

Главные правила дизайна текстов

Шрифт

Первое правило заключается в том, что все элементы контента необходимо оформлять в одной стилистике. Это поможет повысить читабельность текста и улучшит его восприятие пользователями. И, в первую очередь, это правило касается именно выбора шрифтов. Необходимо ориентироваться на распространенные шрифты без засечек. Хорошим вариантом является шрифт Verdana. Все дело в том, что рубленные шрифты обладают более привлекательным внешним видом. Они состоят из крупных символов с большими межсимвольными расстояниями, что значительно улучшает читабельность.

Например:

И еще, не стоит забывать о размере шрифта, а он должен быть достаточно большим и удобночитабельным. Однако выбор каких-либо конкретных параметров, напрямую зависит от общего стиля оформления и особенностей тематики ресурса.

Выравнивание

Еще одно важное правило о котором не стоит забывать, когда создаете дизайн текста. Как известно, существует четыре варианта выравнивания текста, а именно — по ширине, по центру, по левому и правому краю. Лучше всего воздержаться от применения выравнивания по ширине, так как интервал между словами может быть очень большим, а это в свою очередь сильно сказывается на читабельности текста. Также не используется выравнивание по правому краю, в этом случае пользователю каждый раз будет необходимо искать начало новой строки, а это не только неудобно, также это сильно раздражает.

Таким образом получается, что оптимальным вариантом будет выравнивание по левому краю.

Заголовки

Всего существует 6 уровней заголовков для текстовых документов. Рекомендую вам использовать 3-4 уровня, так как использование всех уровней может запутать пользователя.

взято с www.myshared.ru

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

Отступы

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

Например, вы можете отделять отступами абзацы. Допустимое расстояние здесь может быть в диапазоне от высоты шрифта до высоты строки.

Еще одним пример — расстояние от окончания текста до следующего заголовка, должно быть в несколько раз больше, чем от заголовка до начала текста.

Абзацы

Существует два вида абзацев — русские и английские. В русских абзацах не предполагаются вертикальные отступы, вместо них проводится «красная строчка». Более удобными для чтения являются английские абзацы, где каждый абзац отделяется от последующего отступами или межстрочными интервалами. Недопустимым является использование в одном тесте обоих видов оформления абзацев.

Форматирование текста

Повысить интерес читателей к тексту можно отформатировав его. Здесь можно выделять жирным слова, или подчеркивать и зачеркивать, выделять курсивом и другим цветом. Однако помните, что если вы выделяете текст разными цветами, их количество не должно превышать двух, иначе получится каша. Всего необходимо в меру.

Картинки

Еще один секрет читабельности текста — наличие в нем тематических картинок. Это верный способ повысить эмоциональный уровень и лояльность пользователей при чтении.

На этом советы по дизайну текста закончились, удачи вам в этом увлекательном деле и уникальности вашим текстам!

---

Дизайн текста в email-рассылках

Помимо перечисленных правил в некоторых случаях есть ограничения, например, в дизайне электронных писем. Если учесть эти ограничения на этапе дизайна, то получится спроектировать email так, чтобы в конечном итоге получатель видел красивое письмо, которое корректно отображается в любом устройстве.

Шрифты в дизайне email-рассылок

Почтовые клиенты отображают только стандартные шрифты:

• Arial
• Comic Sans
• Courier New
• Georgia
• Impact
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana

Поэтому в текстовых массивах нужно использовать их. 

Если очень нужно использовать нестандартный шрифт — обычно это происходит с заголовками, — то приходится использовать его в виде картинок, например, как здесь: 

Это нормальная практика. Главное — не увлекаться картинками, всю самую информацию верстать текстом. Это важно, потому что иногда изображения могут не отображаться, так что часть информации окажется недоступна читателю. Если вставляете в письмо текст в виде картинки, то обязательно надо прописать alt-текст, в котором будет написан тот же заголовок, что и на картинке. Это даёт два преимущества:

• если изображение в письме не отобразится, то читатель всё равно сможет прочитать информацию;
• если письмо читает человек с ограниченными возможностями с помощью голосового помощника, он услышит информацию с картинки.

Параметры шрифта в email-рассылках

Рекомендуемый размер шрифта в письмах — 14px, интервал — 1,5. В html-вёрстке писем размер шрифта всегда указывается в px.

По поводу цвета текста рекомендации примерно такие же, как в целом для веба и печати: важно, чтобы шрифт был контрастным к фону. Некоторые специалисты не рекомендуют использовать чёрный шрифт на белом фоне, считается, что это утомляет глаза, поэтому лучше использовать тёмно-серый, например, #333333.

Использование текстовых стилей

В email-письмах, как и везде в вёрстке текста, есть разные элементы: заголовки, массивы текста, ссылки, кнопки. Важно визуально отделить их друг от друга, но при этом не переборщить со стилями, чтобы письмо не выглядело аляповатым.

Стили, которые вам понадобятся:

• главный заголовок;
• заголовки;
• массив текста;
• ссылки;
• кнопки.

Используйте разный шрифт разного кегля и, возможно, начертания для заголовков и текста, ссылки можно выделить цветом и подчёркиванием, но использовать для них тот же шрифт, что и в тексте. 

Если соблюдать эти простые правила, то легко можно сделать аккуратное, читаемое письмо.

Ещё больше правил для оформления писем можно прочитать в полной инструкции дизайна email-рассылок.

---

Читайте также:

15 шрифтов Google поддерживающих кириллицу

10 правил оформления продающего текста

Кнопка «Наверх»: как создать с CSS и jQuery

10 правил идеальной типографики | Применение шрифтов в веб-дизайне

Применение шрифтов в веб-дизайне имеет свои особенности. Полиграфия и веб-дизайн сильно отличаются средствами передачи и выражения. В этой статье 10 правил идеальной Digital типографики: шрифты, стили, читаемость… все самое важное об оформлении текста на сайте.

Типографикой называется художественное оформление текста на сайте. Веб-типографика —мощный инструмент для передачи основного посыла в  маркетинге. С ее помощью объединяется в единый смысл текстовая и графическая информация.

Потому, что на веб-сайте принципиальным является необходимость задержать пользователя как можно дольше – в идеале, чтобы он дочитал статью до конца. Такой результат может быть достигнут созданием текста простым и удобным для чтения. Другими словами, текст должен читаться с комфортом.

Эта статья посвящена правилам оформления текстов при создании сайтов, и другим принципиальным моментам компьютерной верстки. Разработка сайта — это большой комплекс работ, в который входит и создание текстов. Очень важно правильно использовать визуальный контент, чтобы направлять внимание пользователей к нужному действию.

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

Выбор цвета для дизайна сайта. Примеры: 50 великолепных цветовых схем

1. Крупный, мелкий или средний текст?

Последние годы все более популярны большие шрифты, причем, если шрифт крупный, то это лучше для сайта. Почему это так? Это связано с «тотальной мобилизацией» — на смартфонах мелкий шрифт очень сложно прочесть. Восприятие большого шрифта значительно лучше и не составит большого труда прочитать текст или заголовок крупным шрифтом. Однако мелкая типографика так же находит применение в дизайне, так как она гармонично наполняет пространство между изображениями.

Довольно часто «якобы для дизайна» коверкают текст – а следует делать наоборот! Текстовая составляющая веб-сайта всегда приоритетнее графики. Сама по себе картинка без подсказки текстом не подталкивает к выполнению целевого действия. А вот вместе с текстом – легко! Следовательно, для получения желаемого, правильно расставляйте приоритеты.

Ваши шрифты на сайте делайте как можно крупнее! Они особенно классно смотрятся в сочетании с лаконичным дизайном. Используйте адаптивные шрифты, потому что они одинаково хорошо читаемы на декстопной и мобильной версиях.

2. Выравнивание текста: по центру или по краю?

Многие дизайнеры рекомендуют делать, выравнивание текста по левому краю, так как оно считается оптимальным для восприятия. Очень осторожно можно использовать выравнивание по центру и по правому краю. А вот по ширине — не в коем случае, такой текст становится мало читабельным.

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

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

3. Какова оптимальная длина строк?

Здесь хорошо работает правило «золотой середины» — не должна быть слишком длинная (затрудняет понимание сути и забудешь, пока дочитаешь), но и не очень короткая. Оптимальная длинна строк в диапазоне от 55 до 65 символов (для декстопов) и от 30 до 40 символов (для мобильных)

Упростите жизнь вашим пользователям – не заставляйте их преодолевать трудности и раздражаться, пробираясь сквозь плохо читабельный текст.

4. Кавычки: лапки или елочки?

Вот как могут выглядеть  кавычки в тексте: «кавычки» или «кавычки», немецкие „лапки“, ‘одинарные кавычки’, “двойные кавычки”. В русском языке предпочтение отдается елочкам – так уж сложилось. Лапки применяются, когда необходимо поставить одни кавычки внутри других кавычек.

Профессионалы всегда ставят елочки. А еще это важно, так как в языках программирования и HTML разметке, используются «программистские» кавычки, поэтому предпочтение следует отдавать таким «елочкам».

5. Как оформить стили заголовков?

Стили заголовков делаются по принципу пирамиды. Н1 — основной заголовок – самым крупным шрифтом, Н2 — подзаголовок второго уровня – поменьше, и так далее. Основной текст – меньше заголовка последнего уровня.

Не рекомендуется делать заголовки заглавными буквами (капслоком). В этом случае, говорят дизайнеры,  люди воспринимают заголовки как изображение и не вникают в суть текста. Хорошо выделить заголовок другим шрифтом или контрастным цветом.

Не пропустите нашу новую публикацию, она поможет вам глубже изучить вопрос SEO оптимизации: Как использовать теги заголовков «h2, Н2, Н3…»

6. Спец. термины типорфики: кегль, кернинг, интерлиньяж

Это термины верстальщиков, но их следует знать. Кегль – это высота букв. Кернинг – это интервалы между буквами. Важно! Между разными буквами кернинг может быть различным. Это делается для лучшей читабельности.  Интерлиньяж – это расстояние между строчками.

Выбор значений кегля, кернинга, интерлиньяжа всегда  подбирается индивидуально для каждого проекта. Есть общая рекомендация делать интерлиньяж в 1,5 раза больше кегля.

7. Общий стиль для одинаковых элементов

Объединение  похожих элементов  – это базовое правило в UX-дизайне, оно в полной мере касается и типографики. Схожие элементы визуально воспринимаются как одно целое. Поэтому чтобы дизайн выглядел стильным  все схожие элементы необходимо выполнять одинаково. Это шрифты в меню, заголовки одного уровня, сами тексты, поля в формах, иконки.

А вот цветом лучше поосторожней — во всяком случае не перебарщивайте с этим. Различный цвет рифта отвлекает внимание, разноцветность создаст ощущение мешанины. Так же избегайте выделения жирным или капслоком основных мыслей. Лучше их расположить рядом с иконкой или на контрастном фоне.

Если вам важно не рассеивать внимание пользователей, а напротив, сконцентрировать его, – тогда оформляйте однотипные элементы одинаково!

8. Какой выбрать шрифт с засечками или без?

Этот спор все еще продолжается. Ранее не рекомендовалось применять шрифты с засечками для веб-дизайна.  Это отчасти справедливо, так как компьютерные экраны низкого разрешения могут плохо отображать засечки. Сегодня компьютерная техника намного лучшего качества, поэтому эта проблема минимальна, следовательно, ограничения на шрифты с засечками могут быть сняты.

Однако большинство пользователей привыкли к шрифтам без засечек, и они могут раздражать для мелкого шрифта. Разумно использовать шрифты с засечками в заголовках. Наиболее популярными и читабельными шрифтами без засечек принято считать: Rockwell, Helvetica, Futura, Garamond, Bodoni, Frutiger, Trajan, Myriad. Эти шрифты наиболее часто используются при разработке веб сайтов.

9. Какой цвет текста использовать?

Классический вариант для основного шрифта: сочетание белого на черном или черного на белом — лучше этого еще не придумано. Однако темно-серый шрифт вместо черного, вполне достойно выглядит. Также неплохо смотрится белый шрифт на темно-красном, темно-синем или темно-зеленом фоне. Сегодня популярна еще одна интересная альтернатива – текст на прозрачном фоне.

Чтобы сконцентрировать внимание пользователей на основных блоках текста, их можно выделить, расположив на цветной подложке. Кнопка СТА всегда должна быть контрастного цвета. Осторожно экспериментируйте с «кислотными» цветами, особенно при сочетании красного на зеленом или синего на желтом.

Особенности восприятия цвета в веб-дизайне. Как зацепить клиента

10. В приоритете читабельность текстов

Это действительно важнее всех устоявшихся правил. Опирайтесь в первую очередь на то, удобно ли вашим пользователям воспринимать текст и помогает ли он выполнить целевое действие!

Для этого не обойтись без экспериментов, необходимо периодически проводить А/В-тестирование, опросы и спрашивать напрямик,  нравятся ли пользователям типографика на сайте и как она воспринимается.

Разработка дизайна сайта это серьезный творческий процесс и типографика в дизайне это только небольшая, но очень важная его часть. Грамотное использование веб шрифтов существенно влияет на степень восприимчивости текстовой информации на веб странице.

Соблюдайте эти рекомендации и ваш веб-ресурс всегда будет выглядеть достойно:

• Грамотная публикация текстов включает в себя понятие типографика, или художественное оформление текста.
• Для хорошего сайта очень важным требованием является совместимость с возможно большим количеством различных браузеров.
• Корректное отображению страниц зависит от того насколько профессионально выполнена верстка сайта.

Коммуникация с пользователями играет огромную роль в веб-дизайне, и типографика является важнейшей частью этого процесса, ведь текстовый контент это примерно 90% всей информации на сайте. Веб-типографика используется для объединения UX дизайна с WOW эффектом, чтобы максимально доступно и  выразительно преподнести торговое предложение.

Если для вашего коммерческого сайта нужен стильный современный дизайн, мы всегда рады помочь. Наша команда предложит и реализует свежие, инновационные lbpfqythcrbt идеи для успеха вашего проекта. Позвоните нам, чтобы получить бесплатную консультацию или заполните форму, чтобы заказать дизайн или разработку сайта.

10.10.2021

← Поделиться с друзьями !

Шпаргалка: 8 правил типографики, которые спасут любой текст | by Граф дизайна

Мини-правила, о которых я расскажу, скорее подходят для небольшой полиграфии, рекламных баннеров на бумаге, в интернете и других носителях, которые содержат небольшое количество текста.

При вёрстке книг и журналов или в веб-дизайне некоторыми правилами лучше пренебречь или хорошо задуматься пред их использованием.

Начнём!

Я специально создал этот небольшой ужас, чтобы прогнать его по всем правилам из шпаргалки.

Добавь воздуха тексту. Интерлиньяж (межстрочное расстояние) текста должен быть равен примерно 110% от размера шрифта для заголовков и 120% для обычного текста. Если размер заголовка 60 pt, то интерлиньяж должен быть равен примерно 66 pt. Это правило не строгое, потому что многое зависит от размера шрифта, его гарнитуры, ширины колонки и т.д.

Иногда для заголовков приходится делать интерлиньяж даже меньше кегля шрифта.

Соблюдай правила русского языка, правильно расставляй запятые, отличай тире от дефиса. Тире на клавиатуре — Alt + 0151 (по крайней мере на Шиндоус).

Если предлог стоит в конце строки, он называется «висячий». Переноси его на следующую строку, а тире наоборот не переноси.

Используй кавычки «ёлочки» вместо кавычек „лапок”. Лапки используй только внутри ёлочек, если нужны кавычки внутри кавычек.

Пример: «… „…” …»

Знаки, как скобки и кавычки с левой стороны выноси за линию текста. Если текст выровнен и справа, то справа так же выноси запятые, точки, кавычки, скобки. Тире и дефисы в таком случае переносятся на треть или наполовину.

На самом деле это правило спорное, и я больше склоняюсь к тому, чтобы пользоваться им крайне редко не во всех случаях. Подробнее об этом у Игоря Штанга.

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

Никогда не игнорируй буквы «ё» и «й». Они имеют равно те же права на существование, что и остальные буквы.

Всегда проверяй макет на ошибки, удаляй двойные пробелы.

Пользуйся кернингом, чтобы поправить расстояние между символами там, где это выглядит неровно. Для проверки: площадь пространства между символами должна быть одинаковой.

10 правил размещения текста на фото в веб-дизайне

Одна из наиболее популярных в современном веб-дизайне техник — использование текста на фотографии. Этот метод не просто так применяется повсеместно. Если подойти к его реализации с умом, он может стать настоящим ключом к успеху. В этой публикации вы узнаете 10 правил успешного расположения текста на фотографии.

Итак, что вам нужно? Правильное фото, наметанный глаз в типографике и понимание того, чего именно вы хотите добиться, добавляя текст на фотографию. Если вы готовы попробовать, давайте приступим.

1. Добавьте контраст

В качественном дизайне текст должен хорошо читаться. Убедитесь что цвет текста отличается от цвета фотографии достаточно, чтобы быть хорошо заметным. Если у вас фотография с темным фоном, выбирайте белый (или светлый) цвет текста. Если фотография светлая, используйте темный шрифт.

Контраст также может быть реализован и в размерах. То есть текст может быть контрастно больше или меньше на фоне происходящего на фото. К примеру на сайте Pack, который вы видите выше, фотография большая, с крупными элементами, а текст тонкий и светлый. Элементы хорошо сочетаются, но также составляют контраст.

2. Сделайте текст частью фотографии

Иногда получается сделать так, чтобы текст стал частью изображения, с которым вы работаете. Это нелегко добиться, да и работают подобные решения не всегда. Для подобной работы вам понадобится простое изображение и простая типографика, как в примере выше.

3. Следуйте за визуальным потоком

Работа с направлением, заданным фотографией — одно из самых важных умений в работе с текстом и фото. Вы должны расположить слова в той части изображения, в которой они будут смотреться логично. Также будьте внимательны и не размещайте текст поверх важной части изображения, таких как лица или продукт, который продаете.

Следование за визуальным потоком означает размещение текста там, куда смотрит (в прямом или переносном смысле) объект на фото. В качестве примеров рассмотрите два примера выше.

4. Размойте изображение

Один из самых простых методов, которой вы можете использовать при работе с текстом и изображением это размытие фотографии или ее части. Небольшое размытие фона при помощи инструментов типа Adobe Photoshop поможет выделить текст, поместить его на первый план. Размытие также поможет навести фокус на главный объект, как это видно в примере сайта Wallmob. Размытие придает продукту и тексту особую четкость, привлекая внимание пользователя.

5. Поместите текст на подложку

Когда на фотографии много разноцветных объектов, или перепадов от светлых к темным тонам, вы можете поместить текст на подложку, тем самым сделав его более заметным.

Выберите форму подложки которая будет хорошо смотреться с вашим текстом (в примере выше вы видите прямоугольник и круг). Затем выберите цвет, который будет контрастировать с цветом текста достаточно, чтобы шрифт был хорошо заметен. Попробуйте сделать подложку полупрозрачной, чтобы привнести мягкости в дизайн.

6. Добавляйте текст на фон

Еще один отличный способ размещения текста — на фоне изображения. Обычно фон меньше загружен элементами, с ним проще работать и размещать на нем текст. Также задний план чаще однотонный, поэтому цветной текст будет на нем лучше заметен и более читабельным.

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

7. Увеличивайте масштаб

Если вы не уверены в своем дизайне, попробуйте добавить масштаб! Это применимо к обоим элементам сегодняшней темы — тексту или изображению, элементы которого можно сделать больше, чем в жизни. Увеличенный объект привлекает внимание, а разница в масштабах между текстом и изображением может неплохо сочетаться.

Увеличивая изображение, как в примере с кофе, можно сыграть на контрасте. А увеличенный текст будет куда проще прочесть.

8. Добавьте цвета

Добавление нового оттенка может также сделать страницу интереснее. Выше вы видите два примера того, как цветной текст внес новый оттенок в общую картину. В одном случае это цвет отражающий общую цветовую картину изображения, во втором — это новый цвет, которым в изображении и не пахнет. Оба варианта могут быть одинаково эффективны.

9. Используйте наложение цвета

Эффект, который становится все популярнее — наложения цвета поверх изображения, и текст сверху. Это не самая простая техника, но она может сделать ваш дизайн потрясающим.

Главная сложность состоит в том, чтобы соблюсти баланс и сделать цветовое наложение достаточно прозрачным, чтобы была видна картинка, но в то же время достаточно непрозрачным, чтобы текст хорошо читался. Вам придется поэкспериментировать с настройками фотографий и цвета, чтобы наловчиться в использовании этой техники. Не знаете какие оттенки использовать? Начните с цветов вашего бренда.

10. Будьте проще

Проверенный временем совет «будь проще» в веб-дизайне особенно важен. Когда речь заходит о сочетании фотографии и текста, он также актуален. Вы хотите, чтобы посетитель видел и текст и картинку. Применение большого количества эффектов может вызвать обратный эффект.

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

Автор статьи Carrie Cousins
Перевод — Дежурка!

Тексты для сайта дизайн-студии: методы оформления, верстки, содержания

Евгения Черешкова, автор, редактор, SEO-копирайтер

Эта статья для дизайнеров интерьера, которые хотят самостоятельно писать тексты для своего сайта. Разберемся:

• зачем нужны тексты на сайте дизайн-студии. И нужны ли вообще;
• что делать, чтобы статью дочитывали до конца;
• какие инструменты помогают сделать текст сильнее.

Ошибка большинства сайтов

Пример текста со страницы «О нас» дизайн-студии. Попробуйте прочитать его с точки зрения клиента, который ищет дизайнера:

Вы дочитали этот текст? Мы не смогли, потому что слов много, а информации ноль. Точнее, нет полезной для клиента информации.

Даже если студия подумала о клиенте и вложила в текст пользу, читатель все равно о ней не узнал бы. Потому длинные абзацы — это скучно.

К сожалению, подобные неинформативные «простыни» встречаются на 9 сайтах из 10. Пользователи быстро пролистывают портфолио, ищут прайс. А блог и другие страницы сайта нередко просто игнорируют.

Если у вас есть сайт, зайдите на страницу «О нас». Насколько ваш текст похож на абзац из примера?

То есть текст не играет никакой роли?

И да, и нет.

Как пользователь читает статью

От заголовка до последней точки пользователь читает только некоторые посты в соцсетях и на развлекательных порталах. Но мало кого в той же степени интересует текст на сайте компании, предлагающей какие-либо услуги. Это нормально.

Сначала читатель оценивает пользу для себя: зачем он должен потратить время. В этом ему помогают:

• подзаголовки,
• иллюстрации,
• видео,
• таблицы и списки,
• выноски на полях,
• выделенные цветом блоки

и другие инструменты.

Текст интересен в последнюю очередь

Если перед читателем много букв, его мозг сразу подает сигнал, что здесь скучно. Максимум, глаз пробежится по первым словам абзацев. И если будет уж очень интересно, то может быть, пользователь дочитает до конца. Но ему будет трудно.

Помогайте пользователю читать

Начните с цели

Пишете ли вы текст для страницы «О нас», описываете проект в портфолио или планируете статью в блог — сначала задумайтесь: зачем пользователю нужна эта статья? Для кого вы пишете?

Ваша студия наверняка работает для определенной целевой аудитории. Например, вы хотите создавать интерьеры в стиле ар-деко в квартирах и домах от 150 м2. Вам интересны именно такие заказчики. Значит, писать статью о скандинавском стиле для маленькой квартиры нет смысла.

Рассказывайте о том, что интересно вашей аудитории

Далее подумайте, какую пользу принесет ваша статья. На какой вопрос читателя она ответит? Распространенная ошибка — писать обо всем в одной статье.

Невозможно в одном тексте рассказать обо всех настенных отделочных материалах. Логичнее написать один текст об обоях, другой о краске, третий о настенной керамике. Еще лучше — разбить каждую тему на несколько: как выбрать обои, как правильно клеить бумажные обои, как укладывать жидкие обои и т. д.

Правило: 1 статья = 1 тема

Продумайте структуру

Стройте рассказ логично. Подумайте, на какие части можно разделить выбранную тему. Дайте каждой части заголовок. Если все сделано верно, все подзаголовки будут дополнять заголовок статьи.

Читая только подзаголовки, должно быть понятно, о чем идет речь в статье.

Двигайтесь от простого к сложному, если что-то объясняете. Во вступлении раскройте, о чем пойдет речь в статье, а в заключении подведите итоги: выпишите главные мысли.

Помните: картинка важнее текста

Визуализация интерьера или словесное описание — каким способом дизайнер пользуется, чтобы донести до клиента концепцию проекта?

*Пример интерьера из портфолио студии E2Art

99% дизайнеров показывают клиенту 3D-визуализацию, эскизы от руки или коллажи, потому что на пальцах довольно трудно объяснить цвет, фактуру и расстановку акцентов в будущем интерьере. Со статьями то же самое. О чем бы вы ни писали, в первую очередь пользователь обратит внимание на картинки.

Есть два способа сделать хорошую статью:

1. Сначала подумать об иллюстрациях, а об остальном написать.
2. Сначала набросать основные тезисы статьи, и к максимальному количеству текста подобрать визуальный контент.

Каким путем идти, каждый выбирает для себя.

Визуальной опорой становятся не только фотографии интерьеров, но также:

• инфографика,
• видео,
• выделенные блоки: текст в рамке, на фоне,
• эмодзи (если настроение текста позволяет).

Акцентом становится и текстовый контент:

• заголовки,
• таблицы,
• списки,
• выделения текста жирным, курсивом, цветом, другим шрифтом,
• выноски на полях.

Привлекает внимание все, что по ритму отличается от монотонного текста.

Но, как и в композиции интерьера важно не перестараться. Если в комнате переборщить с декором и яркими цветами, получится кич. Если в статье использовать сразу все приемы привлечения внимания, тоже получится кич. Внимание читателя расползется, мозг быстро насытится, и пользователь уйдет.

Воспринимайте статью как композицию:

— расставляйте визуальные акценты,

— акцентов должно быть в меру: не больше двух на один экран,

— каждый акцент должен нести информацию,

— каждый акцент должен быть связан по смыслу с другими акцентами и темой статьи.

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

Если все акценты несут связную информацию, мозг читателя быстро сделает вывод, стоит ли читать этот текст. И если решение положительное, он вернется к началу статьи и прочитает ее от и до.

Подумайте, как вы читаете эту статью — последовательно или сначала обратили внимание на акценты?

Когда текст воспринимается легко: верстка

За счет одного красивого декора полноценного интерьера не получится. Есть основные элементы: мебель, свет, отделка. И статья не может обойтись без слов.

Текстовый контент тоже нужно оформлять правильно. О верстке мы поговорим в одной из следующих статей, а здесь пропишем базовые принципы:

1. Все заголовки контрастны основному тексту.

2. Текст разделен на абзацы.

Абзацы не должны быть длинными. В идеале не больше пяти строк. Но и череда коротких абзацев, в 1—2 строки, смотрятся некрасиво: текст становится похож на список. Спокойные, ровные абзацы должны чередоваться с акцентами.

3. Шрифт помогает читать.

Не стоит гнаться за украшательством. Основной текст должен быть написан простым шрифтом, достаточно крупным.

Сравните, как меняется восприятие в зависимости от шрифта.

Если вам сложно подобрать шрифт, обратитесь за помощью к графическому дизайнеру.

4. Курсив и полужирный шрифт использованы по делу.

Взгляд проходит в первую очередь по началам строк. Поэтому стоит подумать, нужно ли выделение жирным. Но если вы решаете, что все-таки нужно, делайте это равномерно по тексту.

Когда текст воспринимается легко: язык

Никакие акценты и красивая верстка не спасут статью, если она написана сложным языком.

Основные принципы хорошего текста:

1. Тема полезна читателю.

Об этом говорили в начале статьи. Если тема неактуальна для пользователя, читать статью он не будет.

2. В тексте больше информации, а не пустых фраз.

Глобальная проблема интернета: 90% статей написано вычурным языком. В текстах, посвященных дизайну интерьера, это особенно заметно. В погоне за украшательством не самые профессиональные копирайтеры списывают друг у друга однотипные фразы:

Ситуация такая же, как с текстом о компании, который мы привели в начале статьи. Слов много, информации никакой.

3. В тексте нет канцеляритов.

Другая крайность — переизбыток профессиональных терминов в статье и канцеляритов.

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

Почему большинству людей так трудно читать договора? Потому что приходится разбирать каждую фразу, пробираться через груду терминов. Но юридический документ — это необходимость. Не заставляйте бедных пользователей разбираться еще и в статье о дизайне.

И не пишите канцелярским языком.

4. В предложении нет составных сказуемых и отглагольных существительных.

Большая беда 99% текстов в интернете — перегруженность сказуемыми, которые состоят из двух и более слов. Их легко можно узнать по словам «может», «должен», «является» и подобным. Такие глаголы требуют пары – второго глагола. Предложение станет легче, если заменить такое сказуемое одним глаголом.

Отглагольные существительные — вроде «проведение», «обеспечение», «оказание» — тоже усложняют текст.

5. Предложения короткие.

Если в предложении больше двух запятых, стоит его переформулировать. Убирайте вводные слова, причастные и деепричастные обороты. Разбивайте предложение на два-три. Но опять же, не перестарайтесь. В погоне за краткостью многие впадают в другую крайностью: составляют статью из рубленых фраз.

6. В тексте нет лжи.

Говорите конкретно.

Желая показать себя с лучшей стороны студии начинают скрывать правду за пространными фразами. Помните о целевой аудитории: какую пользу должны получить ваши клиенты?

Инструменты для хорошего текста

Istio.com — инструмент «Карта» помогает убрать повторы, равномерно распределить однокоренные слова по тексту.

«Главред» — выделяет канцеляриты, вводные слова, штампы, сложные сказуемые и отглагольные.

Text.ru. Чаще используется для определения уникальности. Показатель «Водность» помогает «отжать воду» текст — убрать лишние слова.

«Типограф» — расставляет правильные тире и кавычки, ставит неразрывные пробелы там, где это необходимо.

Проверяйте текст

Не скупитесь на услуги редактора и корректора — они помогут довести текст до ума. А если решите все-таки нанимать копирайтера, проверяйте его по всем перечисленным в этой статье параметрам:

1. Писать на тему, полезную целевой аудитории. 1 статья = 1 тема.
2. Сначала продумать структуру.
3. Давать больше информации, убирать воду.
4. Заменять текст визуальной информацией.
5. Расставлять акценты, которые помогают ориентироваться по тексту. Статья — это композиция.
6. Выбирать шрифт, который легко читается.
7. Делить текст на абзацы. 1 абзац = 1 мысль. 1 абзац — не больше пяти строк.
8. Писать простыми предложениями. 1 предложение = 1 мысль. 1 предложение – не больше 13 слов.
9. Избегать сложных конструкций: меньше деепричастных и причастных оборотов, составных сказуемых, вводных слов.
10. Не приукрашивать и не лгать.

————————————————————————

Евгения Черешкова,

редактор, автор, SEO-копирайтер

Помогаю сделать контент интереснее и понятнее для читателя.

Сайт textforbusiness.ru

Telegram, WhatsApp: +7(903)000-47-04

Skype, email: [email protected]

————————————————————————

Смотрите также по теме:

Как создать и чем наполнить сайт для дизайнера интерьера

Архитектура статьи: как сделать текст интереснее с помощью верстки

Как сделать сайт удобным: элементы навигации

Как сделать сайт на Tilda. Подборка обучающих материалов

Как UX-тексты помогают создавать хороший дизайн

Тексты пользовательского интерфейса информируют и убеждают. Если UX-дизайн привлекает и помогает ориентироваться на сайте, то UX-текст объясняет, что, как и почему нужно сделать, мотивируя пользователя на действие.

UX-дизайн не будет полным без подписей. Текст связывает продукт и потребителя.

Некоторые считают, что лучше один раз увидеть, и они правы: человеческий мозг воспринимает изображения в 60 тысяч раз быстрее, чем тексты.

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

Как читают интернет-пользователи

Создание UX-текстов переживает новый этап развития. Продолжительность концентрации внимания сокращается, и мы уже не хотим читать длинные параграфы или предложения. Мы сканируем тексты, и поэтому предпочитаем короткий и ясный контент.

Текст кнопок и иконок, подзаголовки, уведомления, сообщения об ошибке, навигация, руководства пользователя и многое другое — часть дизайна и пользовательского опыта.

Мы читаем онлайн-тексты на 25% дольше, чем печатные материалы.

Как правило, пользователи читают лишь 20-28% слов, которые видят на сайте. Поэтому UX-текст должен иметь следующие характеристики:

• ясный (clear) — пользователь должен понимать, что вы хотите ему сказать;
• краткий (concise) — придерживайтесь основной темы и не превращайте интерфейс в художественное сочинение;
• последовательный (consistent) — придерживайтесь единого тона, стиля и терминологии.

Не стоит забывать, что текст должен быть полезным и помогать взаимодействовать с интерфейсом.

Для наилучшего пользовательского опыта контент располагается в соответствии с тем, как читают интернет-пользователи.

1. Они начинают читать с левого верхнего края страницы.
2. Они предпочитают элементы навигации, расположенные в верхней части страницы.
3. Они просматривают страницу по диагонали, от левого верхнего края до правого нижнего.
4. Пользователи обращают внимание на меню.
5. Они игнорируют необычные элементы.
6. Им нравятся заголовки и списки.
7. Они пропускают большие блоки текста.
8. Они предпочитают, когда текст не разбит на несколько колонок.
9. Они любят цифры, особенно нечетные.
10. Сначала они замечают тексты, а затем — графику.

Советы по интеграции UX-текстов в дизайн

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

Откажитесь от замещающего текста

Приступая к работе над интерфейсом, многие используют текст-«рыбу» (чаще всего — Lorem Ipsum), чтобы отметить расположение текстовых блоков. Не нужно этого делать.

Из-за разных комбинаций букв, количества знаков и структуры слова будут отличаться. Если блок, заполненный Lorem Ipsum, выглядит хорошо, это не значит, что другой текст его не испортит.

Чем раньше внедрить реальный текст в интерфейс, тем лучше: он будет выглядеть естественнее, и работа займет меньше времени.

Пишите простым языком

Старайтесь использовать слова, которые всем понятны. Откажитесь от технических терминов или жаргона, длинных и сложных слов, а также страдательного залога.

Делайте призывы к действию ободряющими. Например, в сообщении об ошибке уместнее будет не «ОК», а «Попробовать еще раз».

Хорошо работает и позитивный тон. Вместо «Неправильный пароль» можно написать «Кажется, этот пароль не подходит»: это звучит дружелюбнее.

Используйте цифры

Мы подсознательно ассоциируем цифры с фактами, размерами, статистикой и всем, что потенциально полезно. Поэтому на лэндинге многих брендов часто встречаются цифры. И поэтому они лучше всего работают для создания дополнительной ценности и доверия.

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

Также цифры помогают сэкономить место и сделать контент короче.

Выражайте голос и тон своего бренда

Работая с другими UX-писателями, стоит убедиться, что они знакомы с брендбуком и персоной пользователя. Весь контент, который вы создаете, должен транслировать позицию и тон бренда.

Тон — это манера общения бренда с аудиторией. Убедитесь, что используете одни и те же слова, шаблоны и предложения. Подготовьте руководства для писателей и дизайнеров, чтобы они последовательно транслировали их в своем контенте.

Они определяют, какие термины использовать, какой длины заголовки, местоимения, пунктуацию, юмор. Все это определяет идентичность бренда и репутацию, которую вы хотите построить.

Не бойтесь творческих решений

UX-тексты должны быть короткими и информативными, отражать характер бренда и его имидж. Однако это не значит, что они должны быть скучными.

Если это допустимо, используйте в интерфейсе юмор и позитивное настроение. Например, сообщение об ошибке — шанс добавить вежливую шутку, которая вдохновит пользователей остаться на сайте.

Главное — не переборщить, чтобы ваш юмор был оценен и вызвал соответствующую реакцию. Всего одно удачное слово и подходящая иконка могут улучшить пользовательский опыт и даже побудить рассказать о вашем бренде.

UX-тексты помогают сделать пользовательский путь более комфортным и осмысленным, поэтому дизайнеры и разработчики не должны игнорировать советы авторов контента. Правильная комбинация текста и дизайна поможет выделить сайт среди конкурентов.

Источник.

Фото на обложке: Pexels

Creepy Zalgo Text Generator (копирование и вставка) — LingoJam

Переводчик для преобразования обычного текста в жуткий текст zalgo.

Генерация жуткого текста

Вы могли попасть на эту страницу после того, как увидели, что кто-то публикует жуткий текст zalgo (l̶͓̀̈́͆͒̆͗͝į̶̘̪̫̤͙̤̯̫̻̺͇̗̼̑͗̋̄̂̑͠ķ̷̛͓͉̫͓̦̪̱͔̖̻̈́̓͌̀͐̅̉͗̀̊͠ȩ̸̪͙̬̩̼̺͕͙̼͚̻̠͚͆̀͆̋͝ ̴͖̹̮̯̑́̿̀̐̓̅t̵̢̼͙̙͇͙͎̳͖̀̔͒̈́̚ḩ̵̟͖̺̭̜͈̝̾̋i̴̗̲͈͎̤̮̫̳͖̐̒̾̀͊͠ş̷̢̻̝͓͚͉̜̳̗̼͖̺̬̑̓̽͗͛̂̎̃̽̓̄͘ͅ) в комментариях к записи в блоге, комментарии на YouTube или на другой странице в социальных сетях.Его также называют «пустым текстом», и для него характерны неаккуратные отметки, из-за которых он выглядит «взломанным» или «глючным». И теперь, когда вы можете сгенерировать свой собственный текст zalgo с помощью вышеуказанного переводчика, вы, вероятно, задаетесь вопросом: как текст конвертируется в такой странный текст?

Ну, история начинается с Unicode. Юникод — это отраслевой стандарт, который управляет всеми символами, которые вы просматриваете на большинстве своих электронных устройств. Юникод содержит определенные специальные символы, называемые «объединяющий символ».Эти символы представляют собой не отдельные буквы, а , добавленные к другим буквам и символам. Результат: мы можем добавить к вашему тексту странные пометки.

При изучении письменности добавляемые знаки называются «диакритическими знаками». Хотя они полезны для создания сумасшедшего текста, который мы можем скопировать и вставить в комментарии к забавному видео с кошками на YouTube, они также очень полезны, когда мы хотим улучшить способ произношения буквы. Добавляя диакритический знак, мы можем указать, что буква произносится иначе, чем обычно.

Когда вы впервые увидели этот странный текст, вы могли подумать, что это вызвано взломом или ошибкой, но, конечно, теперь вы знаете, что это не так. Любой может преобразовать свой текст в странный хакерский текст w̶̞͇̿͊̿̿̿̌̀̈́͗̄̔͝i̵̛͖̪͉͑̆̌̆̐͒̈́̎͛͘͘̚͝͝ţ̵̝͎̜̞̩͚̼̰̰̻̥͒́͋̒͛̌͋̒͛̌h̴̢̧̡̻͍̦̙̹̝̹̬̺̲̗͂̈̏͆̚͠ ̶̧͎̜͖̣͎͔̘̳͓̗͎͈̪̇͑̉͘͝ǎ̶̞͕̩̭̺̘́̐̎̔̀̀̔͆̚͘͜ͅl̴̰̲͔̈͝ļ̷̧̛̜͔̘͈̯̖̥̌̋͋̿̇̔̌̈̍̕͝ͅ ̵̧͔̥̣͚͚͇̦̱̝̘̝̽̔͜ͅs̸̨̢̛̺̫̬̠̗͉̩̩͉̩̺͛͊̀̓̂̃̔̇̓̎͆͊̚ó̸̠͍͖̗̼͓̀̀̇́̒̒̃́̔̑ř̶͉̅̉̀̐̃t̶͕̬̯̰͓̣͋̅̆̽̌̈́ș̶͈̬̔͑̅͛͜ со странными отметками — никаких хакерских навыков не требуется;) Это не значит, что вы не можете использовать этот переводчик для создания глючного текста, n̸̨̨͈͖̝͚̰̬͓̗̫̹̓̑͒͊d̵͍̹̠͍͖͈̬͋̏̀̍͝ удивите всех своих друзей n00b.

Скопируйте и вставьте

Вы можете копировать и вставлять жуткий текст в большинство разделов блогов и комментариев в социальных сетях. Вероятно, именно здесь вы впервые увидели этот странный текст до того, как пришли искать переводчика. Если вы вырежете и вставите его в форму, которая допускает только определенное подмножество символов Юникода, то странные глючные метки могут быть удалены или, возможно, весь ваш текст. Примеры того, где вы, вероятно, не можете его использовать, — это когда вы создаете адрес электронной почты и когда вы создаете домен веб-сайта.

Что такое Zalgo?

Zalgo — это интернет-мем, созданный Дэйвом Келли. Мем включает в себя получение обычного не жуткого изображения и каким-то образом жуткого. Ниже приведен пример обычного комикса, преобразованного в форму zalgo:

Залго может также относиться к существу, которое пронизывает мемы залго — существу неописуемого ужаса. Он также известен как «Тот, кто ждет за стеной» и «Незпердианский коллективный разум».

Беспорядочный текст

Есть большая вероятность, что вы пришли к этому переводчику без какого-либо жуткого контекста.Возможно, вы просто искали что-то, чтобы ваш текст выглядел беспорядочным — как будто все c̵̡̨̛̭̪͙͓̥̋̾̈́͋̽̌̌͊͊̊͑h̵̰̳̱̃́̂̈́̇͛͆͗̈͛̽̽̚̕ͅḁ̵͕͓̻͔̖́͗̾̈̉̑̈́̈́̎͝͠ͅr̴̡̫̱̝̤͇̭̙͇͈͉͙̔̊͂̃̾a̵͈͚̤̖̾͗̀̽̽̈́̈́͌̍̚͜͝c̷̡̆̀͒̓̀̀͛̎̐̔̔̄̓̔̇t̷̢̨̡̛̩͉͇͕̭̥̭͑̆̄̈̌̽̾̋͐͝è̵̬͚ŗ̸̢̛̹̙̙͕͈̠̲͆̄̄͌̋͒̔̽̄̏̌͘͘͠s̶͖̤̙̆͌̏̒̅ испорчены. Этот переводчик определенно создает беспорядочный текст, но, возможно, вы искали что-то менее беспорядочное, например, этот причудливый текстовый генератор.

Особая благодарность combatwombat за создание замечательной библиотеки JavaScript, которая выполняет преобразование.

↓ Подробнее … ↓

Искусство слова: как отличный макет текста может изменить ваш дизайн

Хороший UX-дизайн — это больше, чем просто подбор красивых картинок. Пора перестать пренебрегать версткой текста. Искусство слова — это то, как слова выглядят на странице или на экране.

С момента зарождения письменности способ представления и расположения букв всегда имел значение. Сегодня ничем не отличается. В этой статье мы рассмотрим, почему макет текста важен, как развивались методы макета и как можно создать шедевр.

Давайте приступим!

Почему важен макет текста

—

Слова — это работа копирайтера, верно?

Больше нет.

Графические дизайнеры должны быть более гибкими, чем когда-либо, носить несколько шляп для любого конкретного проекта. Не волнуйтесь, копирование и дизайн идут рука об руку, и мы начинаем видеть рост гибридных позиций, таких как «писатель UX». * Ooohhh *

Если вам не нравится искусство слова, вот несколько причин, чтобы вас мотивировать.

1. Вашим читателям небезразлично… много

Было доказано, что неуклюжие макеты и огромные блоки текста приводят к более высокому показателю отказов (люди отказываются от вашего сайта). Люди обычно просматривают веб-страницы в поисках информации, поэтому плохая типографика, неправильный размер шрифта и плохой интервал могут сделать чтение настоящей проблемой. Плохие времена два: вы потеряли пользователя, а ваш читатель пропустил ваш потрясающий контент.

В мире гифок, семисекундных видео и мемов вы конкурируете с большим количеством медиа, и если ваша копия не увлечет пользователя, вы потеряете их.Читатель всегда прав. Дайте людям желаемый макет текста.

2. Ваша копия — лодка, а ваш дизайн — океан

Эти двое созданы друг для друга, но они должны работать вместе.

Хороший дизайн может улучшить внешний вид веб-сайта, но если пользователи не читают ваш контент, то, возможно, вы катитесь к кораблекрушению в области маркетинга. То же самое и с вашим письменным контентом. Без визуальных эффектов и хорошего дизайна ваша копия останется неполной.

Предупреждение: добавьте слишком много визуальных элементов, и вы рискуете потерять свой контент.Поверьте, я из Белфаста. Мы построили Титаник. Использование слишком большого количества цветов, фотографий, анимации и текстовых функций заставит ваших читателей покинуть корабль.

Все дело в том, чтобы найти золотую середину. Держите его в чистоте, держите в чистоте, сохраняйте читабельность .

3. Сделать просто. Большие результаты.

Небольшое форматирование не займет много времени, но может иметь большое значение для ваших читателей. Дополнительные 10 минут могут стать разницей между провальной публикацией и вирусной.

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

Как освоить верстку текста

—

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

1. Выберите подходящие цвета

Используйте разные цвета, чтобы текст выделялся, но убедитесь, что вы все поняли правильно. Текст, который невозможно прочитать, сводит на нет цель того, что мы делаем. Используйте такие инструменты, как Adobe Color, чтобы установить цветовую палитру для вашего проекта с цветами, которые дополняют друг друга.

Помните, что наглядность и удобочитаемость здесь важнее, чем красивый внешний вид. Вы должны использовать прагматичный и функциональный подход к написанному или напечатанному слову.

2.Сопряжение шрифтов

Единственное, что хуже несовпадения цветов — это несовпадение шрифтов.

В редких случаях могут использоваться совершенно разные шрифты, чтобы обеспечить резкий контраст между заголовком / заголовком и основным текстом. Но часто это просто выглядит некрасиво.

via Typewolf

Используйте шрифты из одного семейства, чтобы искусство слов было единообразным во всем вашем дизайне.

Хорошая новость в том, что вам не нужно быть мастером типографики, чтобы понять это. С помощью бесплатных инструментов, таких как Typewolf, вы можете автоматически найти отличные примеры соответствующей типографики, чтобы вы могли найти идеальные стили шрифтов, которые хорошо сочетаются друг с другом и подходят вашему бренду.

3. Правильно используйте заголовки

Заголовочные теги — обычная функция на большинстве письменных платформ. Они используются для улучшения внешнего вида вашего сообщения, позволяя пользователям быстро сканировать ваш контент. Они также важны для поисковой оптимизации (SEO) и обеспечения того, чтобы ваш контент появлялся в Google.

Дизайн от tale026

Когда Google просматривает ваш сайт, его система ищет теги заголовков, которые обычно указывают на хорошо организованный контент. Боты Google предполагают, что этот тип контента более читабелен, и повышают его в результатах поисковых систем.

Те же основные принципы применимы, даже если вы пишете копию для плаката, брошюры, открытки или, честно говоря, чего-то еще. Используйте заголовки большего размера для самых важных вещей (то, что вы хотите, чтобы читатель увидел первым), и двигайтесь дальше вниз.

Для цифрового контента теги заголовков обычно идут от самого большого (h2) до самого маленького (иногда можно увидеть до H6). Стремитесь к обратной пирамиде по важности и структуре абзацев. Используйте h2 для основных заголовков, h3 для тем, h4 для подтем и h5 для мелких деталей.

Вот пример:

Видите, как я передаю основную идею в заголовке?

Шаги, которые вы должны предпринять (h3)

Это тема, которая открывает новый угол для обсуждения и изучения.

Используйте модель обратной пирамиды (h4)

Это подтема, потому что я изучаю вопрос в рамках этой темы.

Тайные заговоры в копирайтинге (h5)

Это касательная к подтеме. Идеально, если вы хотите провести читателя дальше по кроличьей норе.

4. Каратэ руби свои абзацы

Длинные предложения — верный способ заставить ваших читателей быстро потерять внимание, и когда они продолжаются и продолжают, они, как правило, отключаются, и вы быстро теряете их, за это время они могут полностью покинуть ваш сайт и перейти на что-то более интересное, например, просмотр видеороликов на YouTube о скрытых сообщениях в логотипах крупных корпораций.

У людей теперь более короткая продолжительность концентрации внимания, чем у золотых рыбок, поэтому вы должны делать ее краткой и милой.Просмотрите любую крупную онлайн-публикацию, и вы заметите одну вещь: в них редко есть абзацы длиннее трех предложений.

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

5. Используйте маркированный список и цифры

Это так просто. Вот почему:

1. Маркировка разбивает макет текста.
2. Они предоставляют короткие всплески информации.
3. Списки идеальны для фактов или деталей.

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

• Общее практическое правило заключается в том, что если точка маркера длиннее одной строки, она слишком длинна, чтобы быть точкой маркера. (Ой!)

6. Смешайте содержание

Причина, по которой такие сайты, как Medium, Buzzfeed и Upworthy, быстро набирают популярность: они снова сделали письменный контент привлекательным.

В общем, вы должны стараться давать читателям перерыв в блоках текста каждые 250 слов. Конечно, вы можете сделать больше, но постарайтесь найти баланс. Все гифки и отсутствие копий делают Джека неосведомленным читателем.

Цитаты

Я большой поклонник блочных цитат! Они действительно помогают разбивать блоки текста, дают отдых читателям и выделяют важные предложения. К тому же они просто великолепно выглядят.

Изображения

Будь то ответ Quora, средний пост или веб-страница, визуальный контент значительно увеличивает силу вашего контента.

Фотографии, графика, GIF-файлы, инфографика и все остальное — все это отличные инструменты для привлечения внимания читателя. Рост популярности Buzzfeed говорит обо всем.

Полужирный , курсив , выделение и подчеркивание

Полужирный отлично подходит для того, чтобы выделить определенное слово или фразу для читателя. Используйте его, чтобы ваш читатель перестал бегать по страницам.

Курсив может использоваться, чтобы выделить точку, передать тон или даже передать диалог.

Highlights может помочь избежать чрезмерного использования других функций, таких как жирный шрифт или кавычки.

Подчеркивание сложно использовать в цифровом контенте. Их можно спутать со ссылками, но вы все равно можете использовать их для выделения или заголовков.

Это мощное оружие с по развернуть в искусство слова , но чрезмерное их использование может привести к содержанию выглядящему непрофессионально и загроможденному .

Если все выделяется, то в конечном итоге ничего не получается, поэтому оставьте это для вещей, на которые вы действительно хотите привлечь внимание читателя.

Создавайте красивый письменный контент

—

Все больше и больше платформ измеряют успешность контента по коэффициенту прочтения, а не по количеству людей, просматривающих статью. Искусство слова — это ваше секретное оружие, которое помогает читателям читать и направлять их по содержанию до самого конца.

Поздравляю, если вы зашли так далеко! Вероятно, это означает одно из трех:

1. Я хорошо сделал свою работу.
2. Объем вашего внимания намного выше, чем у золотой рыбки.
3. (Скорее всего) вы направляетесь в комментарии, чтобы побороться со мной. * плачет *

Как бы там ни было, воспользуйтесь этим быстрым ускоренным курсом по макету текста, чтобы ускорить ваш письменный контент!

Какие у вас любимые уловки, чтобы ваш текст выглядел как шедевр?

Нужна помощь в создании идеального макета?

Наши талантливые дизайнеры всегда готовы помочь.

Генератор текстового дизайна

| Cool Generator List

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

14 Текстовый дизайн Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Текстовый дизайн

PNG

Генератор дизайна текста Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Текстовый дизайн PNG Генератор дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Текстовый дизайн

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Загрузить PNG 6

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна

Загрузить PNG

Дизайн текста Генератор Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Текстовый дизайн

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

002 Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна 9 Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

14 Создать PNG Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Загрузить текстовый дизайн

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Текстовый дизайн PNG Генератор дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Текстовый дизайн Генератор Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Текстовый дизайн

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG 9000 9000 Текстовый дизайн

Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна 246 Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

906 PNG

906 PNG Генератор текстового дизайна 9024

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Генератор текстового дизайна Загрузить PNG

Загрузить Генератор текстового дизайна PNG

Генератор текстового дизайна Скачать PNG

Как создать продающий текстовый дизайн для одежды — Printify

Вы хотите в по ключевым принципам и методам, которые составляют основу успешного текстового дизайна одежды? Тогда пристегнись!

И почему мы вообще об этом сейчас говорим? Люди любят одежду с посланиями!

Как повысить уровень текстового дизайна и выделиться среди текстовых конкурентов?

Вы можете создать крутой текстовый дизайн менее чем за пять минут.Это до смешного просто и часто — очень прибыльно. Самое лучшее в этом? Все любят текстовый дизайн.

Менее привлекательной стороной дизайна текста является конкуренция. Скорее всего, вы не единственный, кто оценивает эту идею и просматривает Интернет в поисках крылатых фраз вроде «Брось, это нравится».

Изображения: Asos.com

Чтобы победить конкурентов и занять нишу для своего бренда на загруженном рынке, вам понадобится более изощренный трюк, чем простая замена шрифта на какой-нибудь действительно крутой .

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

Начинаем:

Добавить графический элемент . Изображение: Asos.com

Добавление графического элемента, точно отражающего основную идею вашего дизайна, может действительно повысить его привлекательность. Подумайте об этих футболках с надписью «Пора просекко» — без бокалов для шампанского, подчеркивающих дизайн, они не такие уж особенные.Будь то стрела, пиратский корабль или цветок — они могут придать вашему дизайну столь необходимую дополнительную привлекательность.

Для бесплатных иконок попробуйте FlatIcon

Сделайте его читабельным с первого взгляда.

В зависимости от того, к какому образу вы стремитесь, а также от длины ремня, иногда стоит разбить слова, чтобы создать лучший визуальный поток. Вы можете попробовать изменить размер и шрифт некоторых слов, чтобы выделить привлекательные ключевые слова.

Выберите оригинальную тему.

Хороший шрифт может изменить дизайн. Подумайте о том, какой эффект вы хотите произвести на своих клиентов, или о настроении, которое создает ваш дизайн, и выберите шрифт на основе этих знаний. Это может быть что-то необычное, грубое или старомодное — хороший шрифт может улучшить ваш текстовый дизайн.

ТОП-10 популярных шрифтов, которые любят использовать люди:

1. Helvetica (Макс Мидингер 1957)
2. Баскервиль (Джон Баскервиль, 1757)
3. Times (Стэнли Морисон, 1957)
4. Akzidenz Grotesk (Литейный завод Бретольдского типа, 1896 г.)
5. Готэм (Хефлер и Фрер-Джонс, 2000)
6. Бодони (Джамбаттиста Бодони, 1790)
7. Дидо (Фирмин Дидо, 1784-1811)
8. Futura (Paul Renner, 1927) — один из самых популярных шрифтов в мире
9. Гилл Санс (Эрик Гилл, 1928)
10. Фрутигер (Адриан Фрутигер, 1977)

# 1 ВРЕМЯ ИССЛЕДОВАНИЯ

Зачем ограничивать свое воображение, когда в сети витают тысячи идей? Все, что вам нужно сделать, это найти их.

Попробуйте то, что уже продается [Не копировать]

Ваша ниша + поиск на Amazon

С этим простым советом вы быстро купитесь в новых идеях футболок. Для начала определитесь со своей нишей. Если вам не хватает нишевых идей, ознакомьтесь с этим обширным списком нишевых рынков.

Допустим, вы хотите более подробно изучить нишу «выпечки хлеба». Перейдите на Amazon и введите «рубашка для выпечки хлеба» в поле поиска, затем отсортируйте результаты по среднему обзору клиентов, чтобы получить полное представление о тенденциях на рынке.Если у вас настроена учетная запись в Amazon Merch, вы также сможете увидеть общий объем продаж по каждому товару, что полезно для оценки прибыльности любой идеи.

Слово / фраза + поиск на Amazon

Эта идея использует функцию автозаполнения Amazon и способна наполнить ваш мозг интересными (и часто неожиданными) идеями. Все, что вам нужно сделать, это ввести одно или два слова выбранной фразы, сказать «почему нет», «сделал ли ты» или «этот парень» и посмотреть на предложения, которые предложит Amazon.

Так о каких фразах мы здесь говорим? Все, что скатывается с языка и подойдет для футболки, например:

1. Нет новых друзей
2. Я уже скучаю по кровати
3. Командные голы
4. Это изящество
5. Просто для смеха
6. Я здесь только за пиццей

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

Для некоторых сумасшедших словосочетаний или идей вы также можете попробовать онлайн-генератор случайных слов.

Etsy search

Поскольку это платформа для художников, торговая площадка Etsy до краев заполнена уникальными концепциями и продуктами. Можно сказать, что это настоящая сокровищница дизайнерских идей.

Если вам нужен толчок к творчеству, отправляйтесь на Etsy и просмотрите их разделы «Топы и футболки» — вы найдете отдельные категории для мужчин, женщин и детей.Если вы отсортируете результаты по «самым последним», вам будут показаны футболки, которые были проданы недавно, потому что Etsy имеет тенденцию автоматически обновлять список всех продуктов, когда они продаются. Чтобы получить приблизительное представление о том, насколько хорошо работает магазин, перейдите в его профиль и проверьте статистику слева — в большинстве случаев вы сможете увидеть общее количество продаж, а также количество «поклонников». (люди, которым понравился магазин).

Источник изображения: Etsy

Это никоим образом не означает, что вы должны пойти на Etsy, чтобы украсть чьи-то идеи.Пожалуйста, относитесь к Etsy как к источнику вдохновения, а не как к быстрому способу создания прибыльных дизайнов. Если вы найдете идею футболки, которая вам действительно нравится, придумайте аналогичные концепции, которые затронут этот конкретный сегмент рынка и аудиторию. Что еще могло их заинтересовать? Имейте в виду, что люди, которые покупают футболки с текстовым дизайном, делают это потому, что они могут относиться к «идее», лежащей в основе дизайна, и каким-то образом поддерживать ее, а не потому, что это особенно модный предмет одежды.

Изучите уже знакомую тему

В конечном итоге, чтобы придумать что-то оригинальное и прибыльное, вы должны либо задействовать зарождающуюся тенденцию, либо потребность, либо целевую нишу.Чтобы сэкономить время на поиски и повысить свои шансы найти хорошего продавца, вы всегда должны начинать со своей области знаний. Отлично ли вы собираете мебель из ИКЕА, ухаживаете за комнатными растениями или цитируете случайные факты, почему бы не превратить это в линию футболок? Хороший дизайн «трогает нервы» — он должен вызывать эмоции или давать людям то, что им легко понять. Однако для этого вы должны знать болевые точки, заботы, увлечения и мечты людей в этой конкретной нише — и если у вас уже есть достаточный объем знаний по определенной теме, вам это легко дается.

Думайте вне рубашки Изображение: AhavtiLifeStyle

Легко застрять в мысли, что для производства самых продаваемых футболок вы должны смотреть на самые продаваемые футболки и оттуда перепроектировать свои идеи. Например, вы видите, что популярность феминистских рубашек набирает популярность, поэтому вы запрыгиваете на эту подножку. И хотя это может оказаться отличной дойной коровой, это не обязательно лучшая стратегия в каждом случае.

Чтобы найти неиспользованные или недостаточно обслуживаемые рынки, вам нужно начать думать за пределами мира футболок.Это означает, что нужно начинать с вашей целевой аудитории или людей из вашей целевой ниши и переходить к другим нишам и областям интересов, которые могут послужить источником вдохновения. Вот некоторые из мест, которые могут дать вам хороший творческий импульс:

> Книжные тренды:

Это невероятно богатая товарная категория, которая разбивается на несколько подкатегорий, каждая из которых представляет собой нишевые рынки. Простой поиск на Amazon может заполнить ваш ум десятком идей футболок.

> Дизайн канцелярских товаров, плакатов и открыток:

Когда дело доходит до серьезного дизайнерского мышления, бренды, специализирующиеся на визуальной коммуникации (плакаты, поздравительные открытки или канцелярские товары в целом), такие как Ohh Deer или We Built This City, имеют много чего, что может дать толчок вашему творческому процессу. Вы можете изучить различные стили иллюстраций, цвета, шрифты и концепции дизайна, чтобы определить новые тенденции и заложить основу для вашего следующего шедевра.

Источник изображения: Ohh Deer

> Группы в Facebook, видео на YouTube, 9GAG, Reddit и т. Д .:

Использование социальных сетей для раскрытия крутых концепций дизайна — одна из самых очевидных стратегий, но ее эффективность нельзя недооценивать. Чтобы уловить тренд до того, как он достигнет массовой аудитории, нужно идти туда, где происходят разговоры.

# 2 РАЗЛИЧНЫХ СПОСОБА ПОЛУЧЕНИЯ ДИЗАЙНА Источник изображения: Unsplash

Дизайн своими руками (DIY)

Если у вас есть для этого навыки или способность учиться, создание собственных дизайнов — идеальный вариант.Во-первых, вам не придется искать правильные слова, чтобы передать свои идеи и проинформировать другого человека, что сэкономит много времени, энергии и финансовых ресурсов. Кроме того, это означает, что вы можете действовать в соответствии со своими идеями незамедлительно и быстро повторять их, что значительно увеличивает скорость вывода на рынок и дает вашим проектам определенное конкурентное преимущество. Даже если у вас есть ресурсы, чтобы нанять помощника, хорошо иметь хотя бы базовые навыки, чтобы поддерживать уравновешенный подход к процессу проектирования и уметь быстро отделять идеи с большим потенциалом от тех, которые кричат ​​о проблемах.

Используйте Placeit.net и создавайте быстрые макеты для маркетинговых материалов.

Наймите дизайнера, который сделает для вас дизайн

Другой отличный вариант, доступный вам, — это нанять профессионального дизайнера футболок. Хотя найти первоклассных дизайнеров футболок довольно сложно, они не единороги — мы подробно написали обо всех факторах, которые следует принять во внимание, прежде чем нанимать кого-либо, а также о том, где найти лучших дизайнерских талантов. Важно помнить, что многие дизайнеры хорошо знают несколько областей дизайна, но не разбираются во всех областях дизайна.Вот почему для вас очень важно иметь четкое представление о том, какой тип дизайна вы хотите и какие навыки потребуются, чтобы воплотить его в жизнь, прежде чем начинать поиск.

Приобрести права на печать у дизайнера или агентства

Если вы не можете создавать дизайны самостоятельно и не хотите платить за это кому-то другому, у вас все равно есть возможность приобрести права на печать понравившихся вам дизайнов. Это супербыстрый способ перейти от идеи к конечному результату, не тратя слишком много на крутые дизайны.

Например, вы можете найти действительно привлекательные дизайны футболок на Graphicriver за 12 долларов, а также найти что-то действительно высококлассное, если это ваша цель.

№ 3 ВОПРОСЫ АВТОРСКИХ ПРАВ

Одна из самых неприятных вещей при создании каталога продукции на футболках с текстовым дизайном заключается в том, что их очень легко украсть. Если графические элементы практически отсутствуют, шрифты и повседневные фразы не могут быть защищены авторским правом — если кто-то изменит ваш дизайн пиксель за пикселем, вы мало что сможете сделать.И это действительно потрясающе.

Итак, хотя текстовый дизайн может принести много денег, рекомендуется также потратить немного больше времени и энергии на разработку действительно оригинальных концепций, которые будут защищены авторскими правами.

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

КЛЮЧЕВЫЕ ВХОДЫ Изображение: Pexels

Текстовые дизайны могут оказаться дойной коровой, поэтому очень важно приложить определенные усилия и подумать, чтобы создать интересные, привлекающие внимание концепции, чтобы выделиться среди конкурентов.

Это легко сделать, поэкспериментируя с графическими элементами, добавляя тени или играя со шрифтами и цветами.

Хорошо продуманный дизайн футболки отражает желание людей принадлежать к определенной группе или поддерживать выбранную идею — это гораздо больше, чем просто броская фраза на футболке.

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

Вы можете начать с простейших методов, известных как «Просто начни создавать», или с изучения тенденций и списков бестселлеров.

Дизайн текста и макет страницы книги — ColorPage Marketing & Publishing

Когда дело доходит до дизайна текста и макета страницы книги, есть важные моменты, которые необходимо обсудить, прежде чем принимать такие решения…

Знай пределы

Чтобы правильно разложить страницы книги, вам необходимо знать ограничения в отношении области изображения, полей, промежутков, полей за обрез и размера обрезки.

Область изображения

Область изображения — это часть страницы книги, которую можно распечатать. Область изображения на каждой странице вашей книги должна находиться в пределах согласованных и четко определенных полей. Весь текст, номера страниц, заголовки и иллюстрации должны находиться в этой области изображения.

Поля

В показанном примере наши стандартные поля равны 1/2 дюйма по всему периметру, за исключением края переплета (желоба), который составляет 5/8 дюйма.

Размер отделки

Обрезной размер — это окончательный размер переплетенной книги после окончательной обрезки.Наши стандартные размеры обрезки для готовых переплетенных книг без полей: 8,5 ″ x 11 ″, 7 ″ x 10 ″, 6 ″ x 9 ″, 5,5 ″ x 8,5 ″.

Прокачка

Под обрезом понимается любая область печати, выходящая за край страницы книги. Для текстовых страниц или обложки книги выход под обрез должен выходить за пределы области обрезки не менее чем на 1/8 дюйма. Для фотографий расширьте выход за обрезную область не менее чем на 1/4 дюйма, чтобы учесть изменения толщины обрезки и корешка.

Разделы текста

Текстовые страницы для каждого раздела (главы) обычно начинаются с правой страницы.

Номера страниц

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

Макет

Возможности оформления вашей книги безграничны. Мы рекомендуем вам не отходить слишком далеко от стандартных макетов — в противном случае макет может отвлекать от предмета книги, затрудняя чтение и продажу.В следующих трех примерах показаны различные способы использования текста и графики, а также полей и выравнивания для достижения желаемого вида вашей книги.

Дизайн текста: шрифты

Шрифт — это набор букв с уникальным общим дизайном, состоящий из прописных и строчных букв, латинского алфавита, курсива, цифр и специальных символов.

Части буквы
На этом рисунке показаны различные части буквы и названия каждой из них. Самая распространенная часть известной буквы — это засечка (№ 3 на рисунке).Примером шрифта с засечками является AGaramond. Примером шрифта без засечек (он же Sans Serif) является Arial. Шрифты с засечками менее утомительны, чем шрифты без засечек.

Стиль шрифта
Шрифт может иметь много разных стилей: Обычный, Полужирный, Сжатый, Курсив, Черный, Наклонный, Подчеркнутый и другие. Эти стили также можно комбинировать для создания других стилей. Например, у вас может быть шрифт полужирный, — курсив, — подчеркнутый шрифт .
Если вы собираетесь использовать разные стили шрифтов, рекомендуется использовать шрифт, содержащий этот стиль.Большинство текстовых редакторов и программ верстки позволяют сделать шрифт полужирным, курсивом и т. Д. — но они всего лишь , имитирующие шрифт . Для достижения наилучших результатов используйте шрифт, содержащий нужный стиль. Простой пример — AGaramond:

.

Как видите, выбор шрифта и стиля очень важен.

стилей текста | U.С. Система веб-дизайна (USWDS)

.underline-base-lightest.text-underline серый-5 # f0f0f0

.underline-base-lighter.text-underline серый-прохладный-10 # dfe1e2

.underline-base-light.text-underline серый-прохладный-30 # a9aeb1

.underline-base.text-underline серый-прохладный-50 # 71767a

.underline-base-dark.подчеркивание текста серый-прохладный-60 # 565c65

.underline-base-darker.text-underline серый-прохладный-70 # 3d4551

.underline-base-darkest.text-underline серый-90 # 1b1b1b

.подчеркивание-чернила. текст-подчеркивание серый-90 # 1b1b1b

.underline-primary-lighter.text-underline синий-10 # d9e8f6

.underline-primary-light.подчеркивание текста синий-30 # 73b3e7

.underline-primary.text-underline синий-60в # 005ea2

.underline-primary-vivid.text-underline синий-теплый-60в # 0050d8

.подчеркивание-основной-темный. текст-подчеркивание синий-теплый-70в # 1a4480

.underline-primary-darker.text-underline синий-теплый-80в # 162e51

.подчеркивание-вторичный-lighter.text-underline красный-прохладный-10в # f8dfe2

.underline-вторичный-светлый. текст-подчеркивание красный-30 # f2938c

.underline-вторичный.подчеркивание текста красный-50 # d83933

.underline-вторичный-яркий. текст-подчеркивание красный холодный 50в # e41d3d

.underline-вторичный-темный. текст-подчеркивание красный-60в # b50909

.подчеркивание-вторичный-темнее. текст-подчеркивание красный-70в # 8b0a03

.underline-accent-cool-lighter.text-underline синий-прохладный-5в # e1f3f8

.подчеркивание-акцент-прохладный-свет. текст-подчеркивание синий-прохладный-20в # 97d4ea

.underline-accent-cool.text-underline голубой-30в # 00bde3

, подчеркивающий-акцент-холодный-темный.подчеркивание текста синий-прохладный-40в # 28a0cb

.underline-accent-cool-darker.text-underline синий холодный 60в # 07648d

, подчеркивающий-акцент-теплый-светлее.подчеркивание текста оранжевый-10 # f2e4d4

.underline-accent-теплый-свет. текст-подчеркивание оранжевый-20в # ffbc78

.underline-accent-теплый. текст-подчеркивание оранжевый-30в # fa9441

.подчеркивание-акцент-теплый-темный. текст-подчеркивание оранжевый-50в # c05600

.underline-accent-теплый-темный. текст-подчеркивание оранжевый-60 # 775540

.подчеркивание-Emergency.text-подчеркивание красный-теплый-60в # 9c3d10

.underline-Emergency-dark.text-underline красный-теплый-80 # 332d29

Полное руководство по дизайну текста, микрокопий и типографики в мобильных приложениях | Автор: Gil Bouhnick

Первоначально опубликовано под номером , мобильная ложка .

Текст — большая часть нашего дизайна.

Я собрал 40 правил, касающихся текста, в надежде создать полезное руководство для всех вас, дизайнеров, писателей UX, разработчиков и менеджеров по продуктам, которые хотят улучшить свой UX-написание, микрокопирование, типографику и общую работу по дизайну пользовательского интерфейса.

1. Работайте над текстом на ранней стадии, потому что проблемы с текстом часто обнаруживают проблемы с дизайном.

2. Будьте лаконичны.

«Писать легко. Все, что вам нужно сделать, это вычеркнуть неправильные слова.»

« Писать легко, все, что вам нужно сделать, это вычеркнуть неправильные слова ».

3. Будьте краткими, но что более важно: будьте осмысленными.

4. Не говорите слишком серьезно или слишком технически.

5. Поговорите со своими пользователями.

6. Странность в том, что постоянство проявляется только тогда, когда оно отсутствует.

Согласованность пользовательского интерфейса замечается только тогда, когда она отсутствует.

7. Оставайтесь верными своему бренду.

8. Используйте последовательную терминологию; ведите терминологический документ, чтобы гарантировать единообразие микрокопии для разных частей вашего продукта.

9. Пишите последовательным голосом.

10. Не обращайтесь к пользователю одновременно от второго и первого лица в одной фразе.

(Исходный код и другие советы по написанию пользовательского интерфейса здесь)

11. Определите стратегию: заглавный регистр против регистра предложения и придерживайтесь ее во всем продукте.

Последовательные заголовки важны

12. Ясность — ключ к успеху: ваш текст должен быть четким.

13. Пишите короткие и простые предложения.

14. Когда речь идет о числах — используйте цифры.

Цифры легче читать

15. По возможности используйте сегодня, вчера или завтра вместо дат.

Даты трудно отсканировать и запомнить

16. Текст кнопок должен быть четким. Пользователи часто не читают вопрос, поэтому текст кнопок должен включать описание действия.

Когда кнопки включают в себя действие, которое они выполняют, пользователь может пропустить вопрос и по-прежнему знать, что делать.

17. Сократите текст кнопки CTA и объедините его с заголовком для большей ясности (подробнее здесь).

Оформление заголовков кнопок повышает ясность и повышает коэффициент конверсии.

18. Удобные сообщения об ошибках должны включать следующее: 1. В чем заключалась проблема. 2. Почему это произошло. 3. Как решить.

(источник)

К сожалению, плохие сообщения об ошибках все еще распространены в мобильных приложениях

19. Подумайте о локализации с первого дня.

Например: немецкие слова могут быть на 200% длиннее английских — убедитесь, что ваш дизайн может содержать значительно более длинные слова, оставляя по возможности свободными пробелы.

Каждый раз, когда вы размещаете текст, может потребоваться более длинный текст.

20. Избегайте длинных блоков текста: помните, что пользователи не читают, они сканируют (исследование: пользователи читают 20–28% вашего текста).

21. Держите дистанцию! Не позволяйте ни одному из ваших текстов приближаться к стандартным полям (левое / правое) или верхним / нижним элементам — интервал — ваш лучший помощник, если вы хотите, чтобы ваш текст был заметен.

Следите за полями

22. Не бойтесь выходить за рамки своей страницы / представления.

Мобильная прокрутка естественна — воспользуйтесь ею и удвойте пробелы.

Удвойте пробелы. Нет, утроить!

23. Обратите внимание на выравнивание текста: выравнивание по центру хорошо работает для коротких разделов или как виртуальный разделитель. Выравнивание по левому краю легче читать, поэтому лучше для более длинных предложений.

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

24. Стремитесь исключить сирот и вдов. Если вы разрабатываете длинный абзац для мобильного приложения, это может быть не то, что вы можете контролировать, но если в вашем предложении 8–10 слов, вы можете разделить его на 2 строки и убедиться, что он будет выглядеть одинаково для всех смартфонов.

Какой из них приятнее для глаз?

25. Если заголовки становятся слишком длинными — подумайте об использовании заголовков для бровей

Заголовки для бровей — отличное решение для длинных заголовков

26. Тщательно выбирайте шрифт (размер, вес, цветовой контраст)

27. Следите за иерархией (размер , расстояние между элементами и т. д.)

Создайте иерархию с расстояниями между группами

28. Не будьте странными.

29. Измерьте свое ведущее пространство. Хорошим правилом является установка интерлиньяжа на 2–5 пунктов больше, чем размер шрифта , в зависимости от гарнитуры (источника).

Неправильный начальный пробел создает странные текстовые блоки

30. Длинные или короткие строки могут утомлять и отвлекать. Оптимизируйте ширину каждой линии (меру) и стремитесь к 40–80 символам (источник).

31. Сохраняйте одинаковые поля для всех текстовых блоков во всем дизайне приложения.

32. Не используйте одновременно слишком много типов шрифтов.

Не более 1–2 шрифта, пожалуйста.

33. Жирный шрифт вернулся, но используйте его с умом (например, для заголовков).

34. Черный цвет увеличивает нагрузку на глаза. Избегайте использования черного и используйте вместо него темно-серый.

Сведите к минимуму использование черного и / или жирного текста

35. Не смешивайте слишком много цветов. Используйте красочные визуальные эффекты и сделайте текст четким и чистым.

36. Чтобы выделить предложение без использования полужирного шрифта — увеличьте шрифт и увеличьте отступы.

Вы можете выделить текст, не используя жирный шрифт.

37. Дизайнеры и разработчики мобильных приложений: никогда не доверяйте эмулятору! (особенно когда задействован текст)

38. Я могу обещать вам, что 0% ваших клиентов когда-либо будут запускать ваше мобильное приложение на эмуляторе.

39. Мобильный дизайн всегда нужно проверять и тестировать на реальных мобильных устройствах. Как можно больше.

40. Всегда имейте запасной план: загружайте свои строки с сервера, чтобы в случае опечатки или срочного изменения вы могли изменить свою копию без необходимости выпускать новую версию своего мобильного приложения (источник: 7 лучших практики для лучшей мобильной разработки).

No related posts.