@anton_chernyy@anton_chernyyhttps://teletype.in/atom/anton_chernyy2026-04-21T01:19:16.657Zanton_chernyy:-VQh0dv9WКонсультация по дизайну сайта2020-09-02T10:34:01.339Z2020-09-02T10:34:01.339Z<img src="https://tgraph.io/file/5b7bd6e51f10df98445cd.png">https://phuquocinside.com
<p><a href="https://phuquocinside.com" target="_blank">https://phuquocinside.com</a></p>
<p></p>
<p>Добрый день! Меня зовут Антон Черный. Я дизайнер в компании Vigbo.</p>
<p>По вашему сайту я разделю разбор на 2 части. Это будут <strong>конкретные</strong> моменты на которые я укажу вам с помощью скриншотов и расскажу что в них лучше поправить или заменить и <strong>основные советы, </strong>это то на что стоит обратить внимание на протяжении всего сайта.</p>
<p><strong>Конкретные моменты:</strong></p>
<p>1) Начнем с вашей шапки сайта.</p>
<figure class="m_column">
<img src="https://tgraph.io/file/5b7bd6e51f10df98445cd.png" width="1230" />
</figure>
<p>Старайтесь не допускать таких моментов, когда у вас шапка сайта распадается на 2 строки это неправильно с точки зрения веб-дизайна и не удобно для пользователя. Вы можете либо уменьшить размер текста в пунктах меню, либо смело в 2 раза уменьшить размер логотипа, таким образом все поместится на одной строчке.</p>
<p>Также, если говорим о меню навигации, хочется заметить как вы оформили всплывающие пункты меню, например при наведении на ссылку "Экскурсии". Чтобы я советовал поправить:</p>
<ul>
<li>Не использовать прозрачность. Сейчас вы указали цвет с прозрачностью и он не красиво отображается поверх изображения. То есть смысла в этой прозрачности вообще нет, лучше указать 100% заливку цвета.</li>
<li>Нет эффекта наведения на текст. Точнее он в системе есть, но вы указали одинаковые цвета, как при статичном отображении, так и при наведении. Из-за этого нет ощущения, что ссылки работают</li>
</ul>
<p>2) Сейчас покажу кусочек вашего сайта:</p>
<figure class="m_column">
<img src="https://tgraph.io/file/ed65f21aeeba487017d5e.png" width="2754" />
</figure>
<p>В этом месте самая большая концентрация не выровненных блоков.</p>
<ul>
<li>Заголовок "Экскурсии..." выровнен по правому краю сайта</li>
<li>Подзаголовок "о1 Наши услуги" по левому краю сайта</li>
<li>Тексты в блоках ниже имеют выравнивание по центру</li>
</ul>
<p>Из-за этого создается ощущение, что блок весь "кривой". Я бы советовал сделать следующее:</p>
<ul>
<li>Выровнять все тексты по центру</li>
<li>Убрать пунктирную линию совсем. Мы (дизайнеры) вообще не советуем загрязнять сайты этими разделителями, лучше это делать с помощью отступов или игрой с цветом</li>
</ul>
<p>3) Данный блок с текстом желательно переработать:</p>
<figure class="m_column">
<img src="https://tgraph.io/file/e79672d565bb041521143.png" width="1290" />
</figure>
<ul>
<li>Не используйте лишние пробелы как в последнем предложении</li>
<li>Добавьте межстрочного интервала, а то строки слипаются</li>
<li>Акцентируйте важные заголовки с помощью размера текста</li>
<li>Выровняйте все по левой части, а то появился отступ</li>
</ul>
<p>4) Далее все красиво. Доходим до блока:</p>
<figure class="m_column">
<img src="https://tgraph.io/file/d3cc6a16de60d7e4d26b3.png" width="2708" />
</figure>
<p>Какой-то немного кривой блок. Все разное, прыгает. Может как-то его пересмотреть? Чтобы он ровнее и очевидней был для пользователей.</p>
<p><strong>Основные советы по сайту:</strong></p>
<p>1) Обязательно проверьте, чтобы на сайте не использовалось более 2 <strong>шрифтов</strong>. Есть негласное правило хорошего дизайна, что на сайте используется 1-2 шрифта. Из них, например, 1 шрифт используется для простого текста на сайте, 2-ой же шрифт используется для заголовков и текстов, где шрифт пишется большим размером. Это создаст общую стилистику вашему сайту и все страницы и блоки на сайте будут составлять собой одно целое. Это улучшит восприятие вашего проекта в целом. Также стоит использовать не только одинаковые шрифты, но и одинаковые настройки этих самых шрифтов.Если с этим сложно, то я рекомендую сделать так. Выписываете на листочек настройки из одного заголовка, который вам нравится по внешнему виду. Выписать нужно:</p>
<ul>
<li>Название шрифта</li>
<li>Размер шрифта</li>
<li>Межбуквенное расстояние</li>
<li>Межстрочное расстояние</li>
</ul>
<p>И далее вы проходитесь по всем заголовкам на сайте и сверяете эти настройки. Также нужно проделать и для простого текста, который вы используете на сайте. Если прям приходить к идеалу, то этот совет актуален для следующих типов текста:</p>
<ul>
<li>Заголовки</li>
<li>Текст в кнопках и ссылках</li>
<li>Подзаголовки и надзаголовки</li>
<li>Обычный текст сайта</li>
</ul>
<p>Таким образом у вас будет отличная типографика на сайте. Также делаем и мы, когда создаем свои шаблоны для конструктора.</p>
<p>2) То, что я вам выше писал про шрифты качается также и всех <strong>кнопок</strong> на сайте а также отступов. Начнем с кнопок. Вы должны выбрать 1 вариант кнопки, ее размер, шрифт, настройки, форма написания (все большие или только первая буква большая), ее цвет, цвет при наведении. И использовать на всем сайте именно такие кнопки. Иногда имеет смысл сделать второй вариант кнопки, если она используется поверх изображений</p>
<p>3) <strong>Отступы</strong> тоже очень важны. Они визуально строят ваш сайт. Проверьте чтобы в начале и в конце каждого из блоков на вашем сайте использовался одинаковый отступ, например 40-50px. Когда вы используете разные отступы в блоках, это визуально "ломает" сайт как гармошка.</p>
<p>Итог. В целом у вас красивый сайт с хорошей логикой и структурой, вам просто не хватает общего стиля на всем проекте. Я понимаю, что это может быть сложно или вы не подумали об этом ранее, все нормально, для этого я и советую все эти пункты. Просто пройдитесь по всем страницам, примените общие настройки и вы сами заметите, что ваш сайт станет очевидней и удобней для пользователя.</p>
<p>Я сделал общий обзор по сайту. Это те советы, которые помогут вам его улучшить. если вдруг что-то не понятно, есть какие-то вопросы, то пишите мне через личный кабинет. Не стесняйтесь, спрашивайте, возможно нужно что-то исправить или проверить сайт после вашей доработки. В общем по любым вопросам я вас жду. В остальном же желаю удачи вашему делу и бизнесу, надеюсь у вас все получится таким, как вы его задумали. Всего хорошего!</p>