Принцип третий. Визуал
Каждый элемент дизайна должен отражать и передавать идентичность бренда. Фотографии, иллюстрации и другая графика уравновешивают текст и разбивают веб-страницу, давая глазам отдохнуть от чтения.
Захватывающий образ героя производит хорошее первое впечатление. Анимированные переходы и эффекты, запускаемые при прокрутке, заставляют людей двигаться и превращают навигацию из бессмысленной необходимости в интерактивный опыт. Независимо от стиля бренда, визуальные эффекты должны добавлять энергию дизайну, а не просто занимать место.
Принцип второй. Смысл
Система должна говорить на языке пользователей, используя слова, фразы и концепции, знакомые пользователю, а не системные термины. Следуйте обычным правилам, чтобы информация отображалась в естественном и логическом порядке.
Качественный контент полезен, понятен и направляет вашу аудиторию к действиям, которые вы хотите, чтобы они предприняли. SEO следует планировать и вплетать в контент. SEO можно продумать и со вкусом, используя разговорный тон, который объединяет ключевые слова и фразы, которые не отвлекают от вашего сообщения.
Принцип первый. Цель
Сообщения веб-сайта и призывы к действию (CTA) являются ключом к достижению его целей. Цель сайта может быть такой же простой, как продвижение покупок, рассказ о компании или предоставление учебных пособий. Вы должны уметь выразить намерение своего сайта в одном-двух предложениях - подумайте о миссии.
Дизайн сайта — это не то, что вы должны придумывать по ходу дела. Цель даст вам четкий план и направит дизайн и создание контента. Крыло — это не практическая философия дизайна.
Часть закрепления цели вашего сайта — это знать, для кого он — кто ваша аудитория, какая информация им нужна и как ваш сайт будет ее предоставлять?

Простые вкладки в Zero block

Представляю простой, минималистичный и надежный скрипт, с помощью которого можно сделать неограниченное количество вкладок в Zero блоке.
Это не шутка. Вы можете уменьшить кнопки, расположить их в 5 рядов. Меняйте контент местами как хотите — это никак не повлияет на работу скрипта.
Создайте хоть 100 вкладок, и этот маленький скрипт будет ими управлять.
Наслаждайтесь :)

Инструкция по установке проста:
1. Создаем 3 кнопки и задаем всем кнопкам единый класс tbbtn. Теперь каждой кнопке последовательно задаем ссылку с номером вкладки — #tab1, #tab2..#tabN
2. Создаем блоки контента, задаем каждому элементу вкладки класс tab1, tab2..tabN. Элементы могут быть любые: текст, изображение, шейп, форма, кнопка. Количество элементов для каждой вкладки не ограниченно.
3. Добавляем блок HTML-код — T123 и вставляем в него код
4. Публикуем. Profit =)
<style>
/* цвет активной кнопки */
.tbactive {background: linear-gradient(348deg, #dd54ff, #ff8686, #ffd255)} 
</style>

<script>
$('[class*="tab"]:not(.tab1)').hide()
$('[href="#tab1"]').addClass('tbactive')
$('.tbbtn').each(function() {
  $(this).find('a').click(function() {
    $('.tbbtn a').removeClass('tbactive')
    $(this).addClass('tbactive')
    var tab = $(this).attr('href').slice(1)
    $('.' + tab + '').fadeIn(200)
    $('[class*="tab"]:not(.' + tab + ')').fadeOut(200)
  })
})
</script>
Made on
Tilda