{ "version": "https:\/\/jsonfeed.org\/version\/1.1", "title": "ПроДизайн.рус: заметки с тегом правила дизайна", "_rss_description": "Полезные статьи для дизайнера", "_rss_language": "ru", "_itunes_email": "", "_itunes_categories_xml": "", "_itunes_image": "", "_itunes_explicit": "", "home_page_url": "https:\/\/www.xn--80ahjdhybhj.xn--p1acf\/tags\/pravila-dizayna\/", "feed_url": "https:\/\/www.xn--80ahjdhybhj.xn--p1acf\/tags\/pravila-dizayna\/json\/", "icon": "https:\/\/www.xn--80ahjdhybhj.xn--p1acf\/pictures\/userpic\/userpic@2x.jpg?1678788487", "authors": [ { "name": "ПроДизайн.рус", "url": "https:\/\/www.xn--80ahjdhybhj.xn--p1acf\/", "avatar": "https:\/\/www.xn--80ahjdhybhj.xn--p1acf\/pictures\/userpic\/userpic@2x.jpg?1678788487" } ], "items": [ { "id": "24", "url": "https:\/\/www.xn--80ahjdhybhj.xn--p1acf\/all\/10-pravil-veb-dizaynera-po-tipografike\/", "title": "10 правил веб дизайнера по типографике", "content_html": "

Для создания качественного веб дизайна следует учитывать принципы типографики и соблюдать их, чтобы страницы выглядели эстетично, а текст можно было легко читать. Благодаря использованию типографики в дизайне сайт больше привлекает внимание, проще воспринимается и производит приятное впечатление.<\/p>\n

\n\"\"\n<\/div>\n

Правила веб-дизайна<\/h2>\n

Специалисты в данной отрасли выделили 10 основных правил, которых должен придерживаться каждый профи:<\/p>\n

1. Применение стандартных шрифтов<\/h3>\n

Многие веб дизайнеры любят экспериментировать, попробовать подать материал по-особенному. Опытные специалисты рекомендуют использовать стандартные шрифты. Использование декоративных шрифтов может отвлекать читателей от содержания. Необычное изображение букв трудно воспринимается, быстро устают глаза. Удерживать внимание читателей проще с помощью стандартных типографских шрифтов.<\/p>\n

2. Умеренность в количестве шрифтов — не более 2-3 видов<\/h3>\n

Рекомендуется выбрать один шрифт для заголовков, один для подзаголовков и один для основного текста. Такие тексты выглядят эстетично, их легко читать.<\/p>\n

3. Использование Caps Lock для выделения текстовых фрагментов недопустимо<\/h3>\n

Когда часть текста выделяется заглавными буквами, это оказывает негативное влияние на пользователей.<\/p>\n

4. Использование контраста<\/h3>\n

Правило хорошей типографии — для создания акцента на важных мыслях добавлять контрастное выделение отдельных фрагментов текста.<\/p>\n

\n\"\"\n
Слово «ideas» выделено синей плашкой, чтобы показать его важность в данном предложении<\/div>\n<\/div>\n

5. Строки должны иметь оптимальную длину<\/h3>\n

Читатели плохо воспринимают информацию, если строки слишком длинные. Нормальной считается длина от 40 до 70 символов. Оптимальное значение — 60.<\/p>\n

6. Отказ от висячих строк<\/h3>\n

Когда вверху или внизу имеются короткие строки, оторванные от предыдущего или последующего абзаца, нарушается эстетика текста. Это мешает хорошему восприятию и рассеивает внимание читателей. Их нужно устранять путём переноса строк или изменением интервала между буквами.<\/p>\n

7. Межстрочное расстояние<\/h3>\n

Не стоит строки располагать слишком близко. От этого страдает читабельность и восприятие. Оптимальный интервал — от 130 до 150% высоты строки.<\/p>\n

8. Не стоит делать переносы<\/h3>\n

Они рассеивают внимание и мешают воспринимать информацию.<\/p>\n

9. Помним о мобильной версии<\/h3>\n

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

10. Отказ от шрифта Comic Sans<\/h3>\n

Текст, напечатанный таким шрифтом, абсолютно нечитабельный, глаза от него устают моментально. Шрифт совершенно непригоден для использования в типографике.<\/p>\n

\n\"\"\n<\/div>\n

Эти правила являются основой веб дизайна<\/a><\/b>. Используйте типографику в дизайне, чтобы тексты хорошо воспринимались и легко читались, а внимание ничего не отвлекало от содержания страницы.
\nЕсть и другие аспекты создания красивого и удобного сайта — с ними вы можете ознакомиться в этой статье<\/a><\/b>. А чтобы ваше портфолио приводило клиентов, воспользуйтесь сервисом взаимопиара для дизайнеров Betop.me<\/a><\/b> — лайки, просмотры и комментарии в Behance, Dribbble, Artstation и другие площадки.<\/p>\n", "date_published": "2023-03-26T13:18:10+03:00", "date_modified": "2023-03-27T16:12:39+03:00", "tags": [ "основы веб дизайна", "правила дизайна", "Продвижение Behance", "создание сайтов", "типографика", "Тренды 2023", "шрифты" ], "image": "https:\/\/www.xn--80ahjdhybhj.xn--p1acf\/pictures\/10_pravil_po_tipografike.jpg", "_date_published_rfc2822": "Sun, 26 Mar 2023 13:18:10 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "24", "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/www.xn--80ahjdhybhj.xn--p1acf\/pictures\/10_pravil_po_tipografike.jpg", "https:\/\/www.xn--80ahjdhybhj.xn--p1acf\/pictures\/Ispolzovanie_kontrasta.jpg", "https:\/\/www.xn--80ahjdhybhj.xn--p1acf\/pictures\/Skazhi-comic-sans-net.jpg" ] } }, { "id": "23", "url": "https:\/\/www.xn--80ahjdhybhj.xn--p1acf\/all\/5-pravil-web-disaina\/", "title": "5 правил веб-дизайна", "content_html": "

Создание сайта<\/b> — сложный процесс, разбитый на несколько этапов. Начинается он с изучения группы потенциальных пользователей, сборе бизнес-требований, проектирования, дизайна, верстки, программирования и заканчивается оптимизацией скорости работы и SEO оптимизацией. При этом полезно придерживаться рекомендаций, которыми мы поделимся с вами.<\/p>\n

\n\"\"\n<\/div>\n

Как сделать красивый и удобный сайт?<\/h2>\n

Прежде всего стоит сосредоточиться на пользователе, который в итоге и должен стать вашим покупателем. Поэтому нужно сделать так, чтобы ему было как можно проще ориентироваться в готовом продукте.
\nПри разработке веб-сайта, магазина или интернет-приложения вы должны обеспечить не только простоту использования, но и прозрачность передачи информации. Благодаря этому пользователям будет комфортнее находиться на сайте, а, следовательно, они с большей вероятностью вернутся к вам.
\nВедь красивый сайт — это удобный сайт.<\/i> Просто симпатичные картинки при общем хаосе не помогут довести клиента до продажи. Поэтому давайте разбираться как дизайнеру прийти к этому балансу удобства и эстетики.<\/p>\n

Современные правила веб-дизайна<\/h2>\n

1. Понятная навигация и структура сайта<\/b>
\nПродуманная структура сайта дает легкий и быстрый доступ к самой важной информации. Хорошее меню — это, прежде всего, тщательно выверенная система информации с четко определенными названиями конкретных отделов.<\/p>\n

\n\"\"\n
Продумывайте структуру сайта прежде, чем переходить к дизайну — так вы сможете учесть все важные нюансы<\/div>\n<\/div>\n

2. Отзывчивый веб-дизайн (RWD)<\/b>
\nРечь идет о проектировании с учетом всех устройств: смартфонов, планшетов, ноутбуков и т. д. Создание сайтов на принципах RWD сейчас не столько стандарт, сколько необходимость. Качественно разработанный продукт должен соответствовать разрешению устройства, на котором он отображается. В результате сайт становится разборчивым и удобным для использования на всех типах устройств.<\/p>\n

\n\"\"\n
При создании структуры сайта учитывайте также все устройства — компьютер, планшет, телефон<\/div>\n<\/div>\n

3. Количество шрифтов и открытый текст<\/b>
\nЗолотое правило — чем меньше разных шрифтов, тем лучше. При разработке вы должны сосредоточиться на четком, последовательном содержании. Использование как можно меньшего количества шрифтов делает информацию и тексты на странице прозрачными. При открытии страницы в фоновом режиме не загружаются никакие дополнительные шрифты, что, в свою очередь, положительно влияет на время загрузки всей страницы.
\n4. Расстояние между элементами<\/b>
\nДайте пользователям больше места. Не сжимайте информацию и не располагайте тексты слишком близко друг к другу — это создает чувство панической скованности и угнетает потенциальную аудиторию. Интервал и наличие свободного места позволяют получателям чувствовать себя более комфортно при навигации по веб-сайту или интернет-магазину. Расстояние между элементами делает информацию более четкой и легкой для поиска.<\/p>\n

\n\"\"\n
Текст, изображение и другие элементы можно набрасывать блоками на этапе создания структуры<\/div>\n<\/div>\n

5. Наблюдение, анализ и тестирование<\/b>
\nПри создании веб-сайтов, магазинов или приложений вы должны собирать отзывы своих получателей — для этого используются соответствующие аналитические инструменты. Вы должны проектировать с акцентом на потенциального пользователя, чтобы пользоваться сайтом было легко, просто и приятно.<\/p>\n

Благодаря тестам и анализу данных по аудиториям вы узнаете, что еще можно улучшить, где внести изменения, чтобы посетители без проблем находили интересный контент.<\/p>\n

Вышеперечисленные пункты — лишь капля в море.<\/b> Проектирование эффективных веб-сайтов, магазинов и веб-приложений — сложный процесс, требующий, прежде всего, времени, знаний и терпения.
\nНо если вы готовы постигать навыки создания крутых сайтов, то рекомендуем кроме требований к структуре сайтов также изучить основные тренды веб-дизайна 2023 года<\/a>. Это позволит вам быть на общей волне в digital, повышать оплату за свои услуги и находить новых клиентов.<\/p>\n

А в продвижении вам поможет Betop.me<\/a> — накрутка просмотров, лайков, комментариев и подписчиков платформах для дизайнеров Behance, Dribbble, Artstation и других.<\/b>
\nЗачем продвигаться?<\/i> Чтобы стать заметными среди других дизайнеров и получить новых клиентов.<\/p>\n", "date_published": "2023-03-05T13:10:10+03:00", "date_modified": "2023-03-05T13:10:02+03:00", "tags": [ "веб-дизайн", "дизайн сайтов", "правила дизайна", "Продвижение Behance", "создание сайтов" ], "image": "https:\/\/www.xn--80ahjdhybhj.xn--p1acf\/pictures\/5-aspektov-sozdaniya-saytov.jpg", "_date_published_rfc2822": "Sun, 05 Mar 2023 13:10:10 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "23", "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/www.xn--80ahjdhybhj.xn--p1acf\/pictures\/5-aspektov-sozdaniya-saytov.jpg", "https:\/\/www.xn--80ahjdhybhj.xn--p1acf\/pictures\/Easy_navigation.jpg", "https:\/\/www.xn--80ahjdhybhj.xn--p1acf\/pictures\/Adaptations_devices.jpg", "https:\/\/www.xn--80ahjdhybhj.xn--p1acf\/pictures\/The_distance_between_elements.jpg" ] } } ], "_e2_version": 4079, "_e2_ua_string": "Aegea 11.0 (v4079)" }