<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:yandex="http://news.yandex.ru" xmlns:media="http://search.yahoo.com/mrss/" xmlns:turbo="http://turbo.yandex.ru" version="2.0">
	<channel>
		<title>Blog</title>
		<link>http://vellgeri.ru</link>
		<language>ru</language>
		<item turbo="true">
			<title>Как написать продающий текст</title>
			<link>http://vellgeri.ru/tpost/38zyxz2lk1-kak-napisat-prodayuschii-tekst</link>
			<amplink>http://vellgeri.ru/tpost/38zyxz2lk1-kak-napisat-prodayuschii-tekst?amp=true</amplink>
			<pubDate>Wed, 07 Aug 2024 11:30:00 +0300</pubDate>
			<author>ИЩЕНКО ВАЛЕРИЯ</author>
			<category>Копирайтинг</category>
			<enclosure url="https://static.tildacdn.com/tild6530-6637-4665-b962-383034343937/elevated-view-laptop.jpg" type="image/jpeg"/>
			<description>Как правильно написанный текст стимулирует посетителей сайта к целевому действию. Секреты создания продающего текста.</description>
			<turbo:content>
<![CDATA[<header><h1>Как написать продающий текст</h1></header><figure><img src="https://static.tildacdn.com/tild6530-6637-4665-b962-383034343937/elevated-view-laptop.jpg"/></figure><h2  class="t-redactor__h2">Секреты создания эффективного продающего текста для сайта<br /><br /></h2><blockquote class="t-redactor__preface"><p style="text-align: left;">В&nbsp;современном мире конкуренция на&nbsp;рынке товаров и&nbsp;услуг очень высока. Чтобы привлечь внимание потенциальных клиентов и&nbsp;убедить их&nbsp;сделать покупку, необходимо создавать качественные и&nbsp;эффективные продающие тексты. В&nbsp;этой статье мы&nbsp;расскажем, как написать такой текст, который будет привлекать внимание читателей и&nbsp;стимулировать их&nbsp;к&nbsp;покупке.</p></blockquote><hr style="color: #e3e3e3;"><img src="https://static.tildacdn.com/tild3633-3737-4231-b663-343333383163/cover.jpg"><h4  class="t-redactor__h4"><br /><br />1.Определение целевой аудитории<br /><br /></h4><div class="t-redactor__text">Перед написанием текста определите свою <strong>целевую аудиторию</strong>. Это поможет вам понять потребности и&nbsp;предпочтения потенциальных клиентов, а&nbsp;также выбрать подходящий стиль и&nbsp;тон текста.</div><h4  class="t-redactor__h4">2.Использование сильных глаголов<br /><br /></h4><div class="t-redactor__text">Используйте сильные глаголы в&nbsp;вашем тексте, чтобы подчеркнуть преимущества вашего продукта или услуги.</div><blockquote class="t-redactor__quote"><em>Например, вместо «улучшить» можно написать «преобразовать», вместо «упростить»&nbsp;— «облегчить».</em></blockquote><h4  class="t-redactor__h4">3.Упоминание отзывов и рекомендаций<br /><br /></h4><div class="t-redactor__text">Включите в&nbsp;текст отзывы и&nbsp;рекомендации довольных клиентов, чтобы показать, что ваш продукт или услуга действительно работает и&nbsp;пользуется спросом.</div><img src="https://static.tildacdn.com/tild3365-3335-4830-b961-653966336162/reviews.PNG"><h4  class="t-redactor__h4">4.Использование цифр и статистики<br /><br /></h4><div class="t-redactor__text">Приведите конкретные цифры и&nbsp;статистику, которые подтверждают преимущества вашего продукта или услуги. Это поможет читателям увидеть реальные результаты использования вашего товара.</div><img src="https://static.tildacdn.com/tild6366-3136-4638-b930-663336363933/advantages.png"><h4  class="t-redactor__h4">5.Создание ощущения срочности<br /><br /></h4><div class="t-redactor__text">Добавьте в&nbsp;текст ощущение срочности, чтобы заставить читателей действовать сейчас, а&nbsp;не&nbsp;откладывать покупку на&nbsp;потом. Например, укажите <strong>ограниченный период времени</strong> для акции или скидки.</div><img src="https://static.tildacdn.com/tild3464-3439-4636-b232-353030623439/time.PNG"><h4  class="t-redactor__h4">6.Обращение к эмоциям<br /><br /></h4><div class="t-redactor__text">Учитывайте эмоции читателей, чтобы вызвать у&nbsp;них желание приобрести ваш товар. Используйте слова и&nbsp;фразы, которые вызывают положительные эмоции, такие как радость, счастье, удовольствие и&nbsp;т.&nbsp;д.</div><img src="https://static.tildacdn.com/tild3033-3035-4738-b535-666432316433/happy.PNG"><h4  class="t-redactor__h4">7.Создание доверия<br /><br /></h4><div class="t-redactor__text">Покажите свою надёжность и&nbsp;опыт в&nbsp;отрасли, чтобы завоевать доверие читателей. Укажите на <strong>сертификаты, награды и&nbsp;достижения</strong> вашей компании, а&nbsp;также на&nbsp;опыт и&nbsp;квалификацию ваших сотрудников.</div><img src="https://static.tildacdn.com/tild3361-6462-4131-b036-333963363536/experience.png"><hr style="color: #e3e3e3;"><h4  class="t-redactor__h4"><br /><br />Заключение</h4><blockquote class="t-redactor__preface">Следуя этим советам, вы&nbsp;сможете создать эффективный продающий текст для вашего сайта, который привлечёт внимание потенциальных клиентов и&nbsp;стимулирует их&nbsp;к&nbsp;покупке. Удачи!</blockquote>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Стили в веб-дизайне</title>
			<link>http://vellgeri.ru/tpost/hhy7hj9h31-stili-v-veb-dizaine</link>
			<amplink>http://vellgeri.ru/tpost/hhy7hj9h31-stili-v-veb-dizaine?amp=true</amplink>
			<pubDate>Fri, 30 Aug 2024 17:00:00 +0300</pubDate>
			<author>ИЩЕНКО ВАЛЕРИЯ</author>
			<category>Дизайн</category>
			<category>Тренды</category>
			<enclosure url="https://static.tildacdn.com/tild6533-3831-4638-a265-306430616130/web-design-trends-he.jpg" type="image/jpeg"/>
			<description>Какие бывают стили в веб-дизайне. Разбор самых распространённых направлений. </description>
			<turbo:content>
<![CDATA[<header><h1>Стили в веб-дизайне</h1></header><figure><img src="https://static.tildacdn.com/tild6533-3831-4638-a265-306430616130/web-design-trends-he.jpg"/></figure><h2  class="t-redactor__h2">Обзор основных направлений</h2><blockquote class="t-redactor__preface"><br />Веб-дизайн развивается стремительно, и&nbsp;каждый год появляются новые тенденции и&nbsp;подходы к&nbsp;оформлению сайтов. В&nbsp;этой статье рассмотрим основные стили веб-дизайна, которые помогут вам создать уникальный и&nbsp;привлекательный проект.</blockquote><hr style="color: #e3e3e3;"><img src="https://static.tildacdn.com/tild3063-3738-4065-a363-636238356330/2021-web-design-tren.jpg"><h3  class="t-redactor__h3">Основные стили при создании сайтов:</h3><div class="t-redactor__text"><ul><li data-list="bullet" style="color: rgb(0, 0, 0);"><a href="#1" style="color: rgb(0, 0, 0); border-bottom: 1px solid rgb(227, 227, 227); box-shadow: none; text-decoration: none;">Классический стиль</a></li><li data-list="bullet" style="color: rgb(0, 0, 0);"><a href="#2" style="color: rgb(0, 0, 0); border-bottom: 1px solid rgb(227, 227, 227); box-shadow: none; text-decoration: none;">Минимализм</a></li><li data-list="bullet" style="color: rgb(0, 0, 0);"><a href="#3" style="color: rgb(0, 0, 0); border-bottom: 1px solid rgb(227, 227, 227); box-shadow: none; text-decoration: none;">Рисованный стиль</a></li><li data-list="bullet" style="color: rgb(0, 0, 0);"><a href="#4" style="color: rgb(0, 0, 0); border-bottom: 1px solid rgb(227, 227, 227); box-shadow: none; text-decoration: none;">Метро стиль</a></li><li data-list="bullet" style="color: rgb(0, 0, 0);"><a href="#5" style="color: rgb(0, 0, 0); border-bottom: 1px solid rgb(227, 227, 227); box-shadow: none; text-decoration: none;">Флэт стиль</a></li><li data-list="bullet" style="color: rgb(0, 0, 0);"><a href="#6" style="color: rgb(0, 0, 0); border-bottom: 1px solid rgb(227, 227, 227); box-shadow: none; text-decoration: none;">Брутализм</a></li><li data-list="bullet" style="color: rgb(0, 0, 0);"><a href="#7" style="color: rgb(0, 0, 0); border-bottom: 1px solid rgb(227, 227, 227); box-shadow: none; text-decoration: none;">Гранж</a></li></ul></div><h4 id="1" class="t-redactor__h4"><br /><br />1.Классический стиль</h4><div class="t-redactor__text">Классический стиль характеризуется простотой, аккуратностью и&nbsp;использованием нейтральных цветовых решений. Этот стиль подходит для разных типов сайтов, включая юридические компании и&nbsp;салоны красоты.</div><blockquote class="t-redactor__quote">Простой, строгий, лаконичный, аккуратный.</blockquote><div class="t-redactor__text">Такой сайт имеет логически построенную структуру, понятную навигацию. Все элементы расположены в&nbsp;ожидаемых местах. Классическое меню сверху или сбоку слева, обычная колоночная сетка, минимум графики или полное ее&nbsp;отсутствие. Оформление не&nbsp;отвлекает внимание гостей на&nbsp;себя, и&nbsp;они могут целиком сосредоточиться на&nbsp;информации о&nbsp;бизнесе.</div><hr style="color: #ffffff;"><img src="https://static.tildacdn.com/tild3330-6632-4437-a332-303664353931/photo.PNG"><img src="https://static.tildacdn.com/tild3365-3562-4864-b231-643338663530/1.PNG"><img src="https://static.tildacdn.com/tild3136-6539-4132-b364-326234336438/2.PNG"><h4 id="2" class="t-redactor__h4"><br /><br />2.Минимализм</h4><div class="t-redactor__text">Минимализм&nbsp;— это стиль, который отличается точностью композиции, большим количеством свободного пространства и&nbsp;отсутствием лишних деталей. Он&nbsp;идеально подходит для интернет-магазинов, лэндингов и&nbsp;корпоративных сайтов.</div><blockquote class="t-redactor__quote">Стильный, аккуратный, эффектный.</blockquote><div class="t-redactor__text">Основной принципы&nbsp;— <strong>Убираем всё лишнее</strong>, что не&nbsp;несет никакой пользы конечному пользователю. Это относится и&nbsp;к&nbsp;шрифтам (без засечек), и&nbsp;к&nbsp;цветам (убираем все, оставляем черный и&nbsp;белый). Акцент на&nbsp;контент и&nbsp;фотографии. Сетка чаще всего используется модульная.</div><hr style="color: #ffffff;"><img src="https://static.tildacdn.com/tild6563-3336-4636-b832-653264343734/3.PNG"><img src="https://static.tildacdn.com/tild6439-3536-4563-b237-656236366463/4.PNG"><img src="https://static.tildacdn.com/tild3336-3839-4433-b134-663135363730/5.PNG"><h4 id="3" class="t-redactor__h4"><br /><br />3.Рисованный стиль</h4><div class="t-redactor__text">Рисованный стиль создаёт эффект страницы в&nbsp;блокноте с&nbsp;набросками от&nbsp;руки. Этот стиль часто выбирают творческие компании и&nbsp;магазины, предлагающие товары ручной работы.</div><blockquote class="t-redactor__quote">Необычный, оригинальный, запоминающийся.</blockquote><div class="t-redactor__text">Рисованные сайты могут быть как простыми, строгими, аккуратными, так и&nbsp;супер‑яркими и&nbsp;запутанными. Шрифты в&nbsp;данном стиле часто также рукописные, либо простые, аккуратные, классические, преимущественно гротески (без засечек).</div><hr style="color: #ffffff;"><img src="https://static.tildacdn.com/tild6235-3835-4138-b937-383264343866/6.PNG"><img src="https://static.tildacdn.com/tild3331-3234-4732-a265-666336626433/7.PNG"><img src="https://static.tildacdn.com/tild3533-6133-4961-b339-306562383237/8.PNG"><h4 id="4" class="t-redactor__h4"><br /><br />4.Метро (карточный) стиль</h4><div class="t-redactor__text">Метро стиль основан на&nbsp;использовании интерактивных карточек с&nbsp;изображениями, контентом и&nbsp;гиперссылками. Он&nbsp;удобен для восприятия информации и&nbsp;легко адаптируется под мобильные устройства.</div><blockquote class="t-redactor__quote">Блочный, упорядоченный, функциональный.</blockquote><div class="t-redactor__text">Основными характеристиками данного стиля является «блочная структура», а&nbsp;также разнообразие цветовой палитры. Внутри блоков может быть абсолютно разное оформление.</div><hr style="color: #ffffff;"><img src="https://static.tildacdn.com/tild6361-3736-4339-b335-653464643066/9.PNG"><img src="https://static.tildacdn.com/tild6363-6663-4331-b030-653933396666/photo.PNG"><img src="https://static.tildacdn.com/tild3061-3035-4661-a132-346239366563/photo.PNG"><h4 id="5" class="t-redactor__h4"><br /><br />5.Флэт (плоский) стиль (Flat или Material Design)</h4><div class="t-redactor__text">Флэт стиль&nbsp;— это минималистичный подход к&nbsp;дизайну пользовательского интерфейса, который характеризуется простотой, аккуратностью и&nbsp;отсутствием объёмных иллюстраций.</div><blockquote class="t-redactor__quote">Простой, аккуратный, плоский.</blockquote><div class="t-redactor__text">Этот стиль дизайна был разработан компанией Google. Отличительные черты: аккуратные цвета (не&nbsp;яркий и&nbsp;не&nbsp;блеклые), плоский формат (нет эффекта объема, текстур, градиента, сложных теней). Плоский дизайн подходит для любых ниш бизнеса.</div><hr style="color: #ffffff;"><img src="https://static.tildacdn.com/tild6639-3866-4666-a236-373166323132/photo.PNG"><img src="https://static.tildacdn.com/tild6533-3764-4164-b130-613239393139/photo.PNG"><img src="https://static.tildacdn.com/tild3034-6433-4731-a235-343064613930/photo.PNG"><h4 id="6" class="t-redactor__h4"><br /><br />6.Брутализм</h4><div class="t-redactor__text">Брутализм&nbsp;— яркий и&nbsp;нестандартный стиль, который использует хаос и&nbsp;необычные шрифты для создания уникального образа сайта.</div><blockquote class="t-redactor__quote">Странный, яркий, спорный.</blockquote><div class="t-redactor__text">Нестандартный вид сайтов в&nbsp;стиле брутализм вызывает неоднозначные эмоции у&nbsp;пользователей. Он&nbsp;либо нравится, либо вызывает отвращение и&nbsp;неприятие. Брутализм это про своеобразный хаос. Нет никакой логики в&nbsp;построении сетки, элементы располагаются вертикально в&nbsp;хаотичном порядке.</div><div class="t-redactor__text">Из-за специфического оформления этот стиль мало где можно применить. Может использоваться на торговых площадках, форумах, креативных энциклопедиях, узконаправленных портфолио или нестандартных, креативных фестивалях.</div><hr style="color: #ffffff;"><img src="https://static.tildacdn.com/tild3964-6462-4532-b130-386137626331/photo.PNG"><img src="https://static.tildacdn.com/tild6164-6137-4237-a330-383563323230/photo.PNG"><img src="https://static.tildacdn.com/tild6230-3763-4666-a364-356565653462/photo.PNG"><h4 id="7" class="t-redactor__h4"><br /><br />7.Гранж</h4><div class="t-redactor__text">Гранж&nbsp;— неординарный и&nbsp;стильный стиль, который характеризуется тёмными цветами, сложными сетками и&nbsp;нестандартными шрифтами. Гранж возник не&nbsp;в&nbsp;веб-дизайне, он&nbsp;пришел из&nbsp;мира музыки и&nbsp;взял оттуда некоторые особенности: небрежность, грубость, некоторую тяжесть.</div><blockquote class="t-redactor__quote">Смелый, бунтарский, тёмный.</blockquote><div class="t-redactor__text">Отличительные особенности данного направления&nbsp;— темные, грязные цвета и&nbsp;текстуры, неряшливое расположение элементов, сложная сетка или вовсе нарушенные правила построения композиции. Подойдёт для молодежной аудитории. В&nbsp;этом стиле моно оформить сайт рок-группы, брутального бара, барбер-шопа.</div><hr style="color: #ffffff;"><img src="https://static.tildacdn.com/tild3737-3466-4666-a238-643738303666/photo.PNG"><img src="https://static.tildacdn.com/tild6163-6139-4631-a530-636361303939/5_37e725dbacd38400ec.png"><img src="https://static.tildacdn.com/tild3932-3035-4634-b762-616365613230/7c2b0a58bd81bb9c7d57.jpg"><hr style="color: #e3e3e3;"><h4  class="t-redactor__h4"><br /><br />Заключение</h4><blockquote class="t-redactor__preface">Выбор стиля зависит от&nbsp;вашей цели, целевой аудитории и&nbsp;предпочтений. Экспериментируйте с&nbsp;разными направлениями, чтобы создать уникальный и&nbsp;привлекательный проект.</blockquote>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Как и зачем создавать прототип сайта</title>
			<link>http://vellgeri.ru/tpost/mvv14b2hp1-kak-i-zachem-sozdavat-prototip-saita</link>
			<amplink>http://vellgeri.ru/tpost/mvv14b2hp1-kak-i-zachem-sozdavat-prototip-saita?amp=true</amplink>
			<pubDate>Wed, 04 Sep 2024 13:00:00 +0300</pubDate>
			<author>ИЩЕНКО ВАЛЕРИЯ</author>
			<category>Дизайн</category>
			<enclosure url="https://static.tildacdn.com/tild3234-3030-4630-b232-303338316365/create-hifi.png" type="image/png"/>
			<description>Прототип сайта. Зачем он нужен? Этапы создания прототипа.</description>
			<turbo:content>
<![CDATA[<header><h1>Как и зачем создавать прототип сайта</h1></header><figure><img src="https://static.tildacdn.com/tild3234-3030-4630-b232-303338316365/create-hifi.png"/></figure><h2  class="t-redactor__h2">Этапы создания прототипа</h2><blockquote class="t-redactor__preface"><br />Прототип сайта&nbsp;— это его упрощённая версия, которая помогает разработчикам и&nbsp;дизайнерам определить структуру, навигацию и&nbsp;функциональность будущего проекта.</blockquote><hr style="color: #e3e3e3;"><img src="https://static.tildacdn.com/tild3837-6261-4835-b935-383966663231/image16-1_1.png"><h3  class="t-redactor__h3">Зачем нужен прототип сайта?</h3><div class="t-redactor__text"><strong>Создание прототипа позволяет:</strong><br /><br /><ul><li data-list="bullet">Оценить удобство использования сайта. Прототип показывает, насколько пользователю будет удобно перемещаться по&nbsp;сайту и&nbsp;находить нужную информацию.</li></ul><br /><ul><li data-list="bullet">Определить структуру сайта. Прототип помогает увидеть, как будут связаны между собой разные разделы сайта и&nbsp;какие элементы будут размещены на&nbsp;каждой странице.</li></ul><br /><ul><li data-list="bullet">Проверить функциональность сайта. Прототип позволяет протестировать работу различных функций и&nbsp;элементов сайта, таких как формы регистрации, корзины покупок и&nbsp;т.&nbsp;д.</li></ul><br /><ul><li data-list="bullet">Сэкономить время и&nbsp;деньги. Создание прототипа на&nbsp;ранних этапах разработки позволяет избежать ошибок и&nbsp;переделок, что в&nbsp;итоге снижает стоимость и&nbsp;сроки разработки сайта.</li></ul></div><h3  class="t-redactor__h3">Как создать прототип сайта?</h3><div class="t-redactor__text">Существует несколько способов создания прототипа сайта:</div><h4  class="t-redactor__h4">1.Ручное прототипирование</h4><div class="t-redactor__text">Разработчик создаёт прототип сайта вручную, используя инструменты вроде Photoshop или Sketch. Этот метод подходит для небольших проектов с&nbsp;простой структурой.</div><h4  class="t-redactor__h4">2.Использование специализированных инструментов.</h4><div class="t-redactor__text">Существуют программы и&nbsp;онлайн-сервисы, которые позволяют создавать прототипы сайтов автоматически. Они предлагают готовые шаблоны и&nbsp;инструменты для создания макетов страниц, форм и&nbsp;других элементов сайта.</div><h4  class="t-redactor__h4">3.Прототипирование с помощью конструктора сайтов.</h4><div class="t-redactor__text">Некоторые конструкторы сайтов, например, <a href="https://tilda.cc/ru/" style="color: rgb(0, 0, 0); border-bottom: 1px solid rgb(227, 227, 227); box-shadow: none; text-decoration: none;">Tilda</a>, <a href="https://ru.wix.com/" style="color: rgb(0, 0, 0); border-bottom: 1px solid rgb(227, 227, 227); box-shadow: none; text-decoration: none;">Wix </a>и <a href="https://wordpress.com/ru/" style="color: rgb(0, 0, 0); border-bottom: 1px solid rgb(227, 227, 227); box-shadow: none; text-decoration: none;">WordPress</a>, предоставляют возможность создавать прототипы сайтов прямо в&nbsp;панели управления. Это удобный и&nbsp;быстрый способ для создания простых сайтов.</div><img src="https://static.tildacdn.com/tild3363-3736-4066-b438-626333316238/dbe88ea2e7b61d1701ff.png"><hr style="color: #ffffff;"><h3  class="t-redactor__h3">При создании прототипа сайта важно учитывать следующие аспекты:</h3><h4  class="t-redactor__h4">1.Структура </h4><div class="t-redactor__text">Определите основные разделы и&nbsp;подразделы сайта, а&nbsp;также связи между ними.</div><img src="https://static.tildacdn.com/tild3137-6365-4539-a437-646561646337/photo.PNG"><h4  class="t-redactor__h4">2.Навигация</h4><div class="t-redactor__text">Разработайте удобную систему навигации, которая позволит пользователям быстро находить нужную информацию. Хороший прототип может быть использован для юзабилити-тестирования на&nbsp;целевой аудитории.</div><img src="https://static.tildacdn.com/tild3630-6630-4638-b763-666637323934/maket6.jpg"><h4  class="t-redactor__h4">3.Без цвета</h4><div class="t-redactor__text">Не&nbsp;отвлекайтесь на&nbsp;цвета, расставляйте акценты в&nbsp;черно-белой гамме. Тональной шкалы достаточно, чтобы нарисовать картину любой сложности.</div><img src="https://static.tildacdn.com/tild6435-6166-4638-b431-623932393163/image7.png"><h4  class="t-redactor__h4">4.Контент</h4><div class="t-redactor__text">Используйте максимально приближенные к&nbsp;реальности тексты и&nbsp;фото. Если на&nbsp;старте не&nbsp;хватает текстов, временно позаимствуйте их&nbsp;у&nbsp;конкурентов. Не&nbsp;используйте текст Lorem Ipsum. Назовите правильно блоки, которые должны быть по&nbsp;смыслу, учитывайте количество символов и, самое главное, назовите кнопки.</div><blockquote class="t-redactor__callout t-redactor__callout_fontSize_default" style="background: #e3e3e3; color: #000000;">
                                <div class="t-redactor__callout-icon" style="color: #a8c8c7">
                                    <svg width="24" height="24" role="img" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24">
                                        <circle cx="12.125" cy="12.125" r="12" style="fill:currentColor"/>
                                        <path d="M10.922 6.486c0-.728.406-1.091 1.217-1.091s1.215.363 1.215 1.091c0 .347-.102.617-.304.81-.202.193-.507.289-.911.289-.811 0-1.217-.366-1.217-1.099zm2.33 11.306h-2.234V9.604h2.234v8.188z" style="fill:#fff"/>
                                    </svg>
                                </div>
                                <div class="t-redactor__callout-text">
                                     Lorem Ipsum — это текст-рыба, который используют издатели и&nbsp;дизайнеры, если оригинальный текст недоступен.<br /><br /><em>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempor diam quis odio consequat elementum. Donec bibendum justo est, sed mollis quam bibendum&nbsp;ac. Donec …"</em>
                                </div>
                            </blockquote><img src="https://static.tildacdn.com/tild3934-6631-4233-b334-343364356136/2.png"><hr style="color: #e3e3e3;"><h4  class="t-redactor__h4"><br /><br />Заключение</h4><blockquote class="t-redactor__preface">Создание прототипа сайта&nbsp;— важный этап в&nbsp;разработке веб-проекта. Он&nbsp;помогает улучшить удобство использования, структуру и&nbsp;функциональность сайта, а&nbsp;также сэкономить время и&nbsp;деньги.</blockquote>]]>
			</turbo:content>
		</item>
		<item turbo="true">
			<title>Дизайн-система - что это? Как создать её с нуля?</title>
			<link>http://vellgeri.ru/tpost/fv3ylks1z1-dizain-sistema-chto-eto-kak-sozdat-eyo-s</link>
			<amplink>http://vellgeri.ru/tpost/fv3ylks1z1-dizain-sistema-chto-eto-kak-sozdat-eyo-s?amp=true</amplink>
			<pubDate>Thu, 01 Aug 2024 16:11:00 +0300</pubDate>
			<author>ИЩЕНКО ВАЛЕРИЯ</author>
			<category>Дизайн</category>
			<enclosure url="https://static.tildacdn.com/tild6461-6530-4165-a632-656233373333/1-1024x572.png" type="image/png"/>
			<description>Что такое дизайн-система и для чего она нужна. Практический опыт разработки и внедрения дизайн-системы.</description>
			<turbo:content>
<![CDATA[<header><h1>Дизайн-система - что это? Как создать её с нуля?</h1></header><figure><img src="https://static.tildacdn.com/tild6461-6530-4165-a632-656233373333/1-1024x572.png"/></figure><h2  class="t-redactor__h2">Создание дизайн-системы<br /><br /></h2><blockquote class="t-redactor__preface"><strong>Дизайн-система сайта</strong> — это набор компонентов, правил и стилей, которые помогают разработчикам и дизайнерам создавать и обновлять страницы сайта быстро и эффективно. <br /><br />Она состоит из трёх основных частей: <br /><ul><li data-list="bullet">дизайн-библиотеки (UI-kit),</li><li data-list="bullet">библиотеки компонентов (фреймворка),</li><li data-list="bullet">гайдлайнов.</li></ul></blockquote><hr style="color: #e3e3e3;"><img src="https://static.tildacdn.com/tild3039-6261-4266-b962-313234616338/3.png"><h3  class="t-redactor__h3"><br /><br />Этапы разработки дизайн-системы:</h3><h4  class="t-redactor__h4">1. Анализ существующего интерфейса сайта</h4><div class="t-redactor__text">Изучите все страницы и&nbsp;элементы, которые хотите включить в&nbsp;дизайн-систему. Необходимо проанализировать существующие продукты и&nbsp;определить, какие элементы интерфейса наиболее часто используются: кнопки, поля ввода, выпадающие списки, чекбоксы, карточки, шапки и&nbsp;др. А&nbsp;после&nbsp;— определить их&nbsp;свойства: размеры, отступы, цвета, типографику, поведение при наведении.</div><img src="https://static.tildacdn.com/tild3665-3364-4431-b138-383032613765/jjjjj.PNG"><h4  class="t-redactor__h4">2. Разработка дизайн-библиотеки</h4><div class="t-redactor__text">Cоздание <strong>UI-kit</strong> в&nbsp;программах Figma или Sketch, используя компоненты, стили и&nbsp;варианты.</div><blockquote class="t-redactor__quote"><strong>User Interface Kit (UI-kit)</strong>&nbsp;— это полный набор элементов и&nbsp;компонентов, необходимый для сборки большого однородного продукта.<br /><br />UI&nbsp;kit позволяет быстро внести изменения в&nbsp;сложных больших проектах со&nbsp;множеством макетов, так как элементы автоматически обновляются при изменении родительских компонентов в&nbsp;UI-наборе.</blockquote><img src="https://static.tildacdn.com/tild6331-6466-4031-b862-353231333364/elementy-navigacii.jpg"><h4  class="t-redactor__h4">3. Разработка библиотеки компонентов (фреймворка)</h4><div class="t-redactor__text">Верстальщики соберут UI-kit в&nbsp;коде, чтобы готовые компоненты можно было использовать в&nbsp;проекте.</div><blockquote class="t-redactor__quote"><strong>Фреймворк (framework&nbsp;— «каркас») </strong>—&nbsp;заготовка, готовая модель в&nbsp;программировании для быстрой разработки, на&nbsp;основе которой можно дописать собственный код. Он&nbsp;задает структуру, определяет правила и&nbsp;предоставляет необходимый набор инструментов для создания проекта.</blockquote><img src="https://static.tildacdn.com/tild3736-3364-4663-a635-316631383261/10----2.png"><h4  class="t-redactor__h4">4. Разработка гайдлайнов</h4><div class="t-redactor__text">Обсудите с&nbsp;командой, как и&nbsp;где применять разные элементы, и&nbsp;закрепите это в&nbsp;руководстве для избежания разногласий.</div><blockquote class="t-redactor__quote"><strong>Гайдлайн</strong> <strong>(guideline)</strong>&nbsp;— это технический документ с&nbsp;подробным описанием и&nbsp;правилами использования элементов фирменного стиля компании. В&nbsp;нём содержатся правила по&nbsp;использованию цветов, логотипа, слогана, товарного знака, шрифтов и&nbsp;других составляющих фирменного стиля.</blockquote><div class="t-redactor__text"><strong>Принципы создания качественного гайдлайна:</strong><br /><br /><ul><li data-list="bullet"><strong>Больше иллюстраций, меньше текста</strong></li></ul>Документ должен быть доступным и&nbsp;понятным для любого пользователя, поэтому важно объяснить на&nbsp;наглядных примерах, что вы&nbsp;хотите донести.<br /><br /><ul><li data-list="bullet"><strong>Гибкость правил</strong></li></ul>Предоставьте возможность дизайнерам выходить за&nbsp;рамки строгих правил и&nbsp;осуществлять смелые идеи.<br /><br /><ul><li data-list="bullet"><strong>Актуальная база данных</strong></li></ul>Необходимые цвета, шрифты, свод правил и&nbsp;примеры&nbsp;— сведения должны быть актуальными при передаче задания подрядчику.</div><img src="https://static.tildacdn.com/tild3332-6430-4463-b337-356466313434/lqe9TiTm-2.png"><h4  class="t-redactor__h4">5. Развитие и поддержка дизайн-системы</h4><div class="t-redactor__text">Обновляйте библиотеку и&nbsp;следите за&nbsp;актуальностью элементов, учитывая развитие и&nbsp;изменение сайта.</div><img src="https://static.tildacdn.com/tild3434-3038-4136-b039-383539343633/photo.PNG"><hr style="color: #e3e3e3;"><h4  class="t-redactor__h4"><br /><br />Заключение</h4><blockquote class="t-redactor__preface">Дизайн-система сайта помогает ускорить разработку новых страниц, обеспечивает единообразие стиля и&nbsp;облегчает поддержку и&nbsp;обновление интерфейса. Однако создание дизайн-системы с&nbsp;нуля может занять время и&nbsp;ресурсы, поэтому оцените необходимость её&nbsp;внедрения перед началом работы.</blockquote>]]>
			</turbo:content>
		</item>
		</channel>
</rss>