• Зачем нужен сайт?

• На какую аудиторию рассчитан?

• Каких результатов позволит добиться?
Ответы на эти и подобные вопросы и должны лечь в формирование
основы web-дизайна проекта.
Под термином «web-дизайн» принято понимать совокупность
работ по разработке логической структуры и художественного
оформления веб-страниц.
Задачей web-дизайна является обеспечение удобной подачи
информации пользователю сайта или web-приложения,
удовлетворение эстетического вкуса аудитории.
Основы web-дизайна закладываются на этапе разработки технического
задания – документа, описывающего требования относительно
визуального представления и структуры сайта. В техническом задании
также зачастую описываются пожелания касательно программной
реализации сайта.
После разработки и утверждения техзадания начинается этап разработки
дизайна. И первое, что необходимо сделать – это создать модульную
сетку. Модульная сетка описывает расположение элементов на страницах
сайта.
Модульная сетка любой web-страницы содержит, как минимум, два блока:
для основного теста сайта и для меню. Если на странице нужны
дополнительные элементы, например, еще одно меню, «подвал» («footer»)
или «хедер» («header»), то модульная сетка разбивается еще на несколько
блоков.
Размеры блоков модульной сетки подбираются индивидуально и могут
быть какими угодно. Однако следует учитывать, что согласно требованиям
юзабилити, появление горизонтальной полосы прокрутки при просмотре
страницы недопустимо – это негативно сказывается на восприятии сайта
посетителями. Поэтому в совокупности ширина блоков не должна
превышать максимальной ширины экранов представителей целевой
аудитории сайта.
В блоке «хедер» принято указывать название сайта, которое может быть
выбрано в соответствии с названием компании или именем автора, а также
при необходимости логотип сайта. Основной блок меню в европейских
сайтах традиционно расположен слева, в соответствии с направлением
письменности (слева-направо). Также основное меню может быть
расположено сверху, под «хедером».
Если сайт рассчитан для просмотра на экранах с разным разрешением, то
web-дизайн, как правило, выполняется «резиновым» или же центрируется
по горизонтали.
Когда информационная модель будущего сайта готова, можно
приниматься за художественную часть web-дизайна. Обычно web-дизайн
выполняется в виде шаблонов – определенных наборов элементов и их
взаимосвязей. Именно шаблоны позволяют отделить разработку
визуального дизайна сайта от содержания.
Различают шаблон главной и шаблоны типовых страниц сайта. Шаблон
главной страницы оформляется, как правило, более «затейливо», а
шаблоны остальных страниц сайта лишь поддерживают основную идею.
Разработанный в графическом редакторе шаблон верстается в html-файл.
При помощи тэгов языка html и таблиц стилей css задаются все
необходимые параметры страницы: размещение элементов, цвет и
размеры шрифтов, цвет фона и т.д.
Работа над шаблоном требует обязательного теста на кросс-
браузерность, т.е. на совместимость с различными браузерами и
их версиями. Разные браузеры могут по-разному
интерпретировать код html, поэтому такое тестирование
необходимо, чтобы избежать возможного «развала» дизайна.
1. ИСПОЛЬЗУЙТЕ МИНИМАЛЬНОЕ КОЛИЧЕСТВО ШРИФТОВ
При использовании более 3 разных шрифтов ваш веб-сайт теряет
структуру и выглядит непрофессионально
• базовый – для основных материалов сайта. Используйте читабельные,
простые шрифты с удобным межстрочным интервалом (примерно в 1,5
раза больше высоты символов);
• акцидентный – для заголовков. Этот шрифт можно выделить не только
размером, но и цветом;
• дополнительный – для навигации, важной информации, логотипа меню,
цитат и т. д.
https://pomelnikov.com/font-pair
2. СТАРАЙТЕСЬ ИСПОЛЬЗОВАТЬ СТАНДАРТНЫЕ ШРИФТЫ

Пользователи привыкли к стандартным шрифтам и читают быстрее текст,

написанный именно такими шрифтами

3. ОГРАНИЧЬТЕ ДЛИНУ СТРОКИ

Правильно подобранное количество знаков на одной строке – это ключ
к легкости прочтения вашего текста.

«Если вы хотите, чтобы вашему читателю было комфортно, каждая

строка должна содержать не более 60 знаков. Правильно подобранное
количество знаков на одной строке – это ключ к легкости прочтения
вашего текста».
Если строка слишком короткая, глазам придется часто менять
фокус, что сбивает темп чтения.
Если строка слишком длинная, глазам читателя, наоборот,
придется долго фокусироваться на написанном.
Что касается мобильных
устройств, придерживайтесь
диапазона в 30-40 знаков
в строке.
Сбоку представлен пример
двух сайтов, открытых
на мобильных устройствах.
На одном строка содержит
от 50 до 75 символов (лучшее
количество знаков в строке
для печатного текста
и разрешения компьютера),
а на втором мы видим
оптимальные 30-40 знаков.
4. ВЫБИРАЙТЕ
ГАРНИТУРЫ, КОТОРЫЕ
ХОРОШО ЧИТАЮТСЯ
В ЛЮБОМ РАЗМЕРЕ
Пользователи будут заходить
на ваш сайт с разных
устройств, у которых,
соответственно, различается
размер и разрешение.
Большинство пользовательских
интерфейсов используют
текстовые элементы различной
величины (кнопка
«копировать», подписи полей,
заголовки секций и т.д.).
Необходимо выбирать
гарнитуру, которая будет
хорошо выглядеть,
и оставаться читабельной
в любом размере
5. ИСПОЛЬЗУЙТЕ ШРИФТЫ С ЧЕТКИМИ БУКВАМИ
Многие шрифтовые гарнитуры созданы таким образом, что иногда бывает
очень легко спутать похожие буквы, особенно «I» и «L», написанные
латиницей (как на изображении ниже). В некоторых же буквы
расположены так близко друг к другу, что сочетание «r» и «n» можно
принять за букву «m». Поэтому, выбирая шрифт, протестируйте его
в разных контекстах. Так вы сможете убедиться, что из-за шрифтовой
гарнитуры у читателя не возникнет проблем с пониманием текста.
6. ИЗБЕГАЙТЕ КАПСА
Текст, написанный капсом – или одними заглавными буквами – подходит
для ситуации, где пользователь не вовлекается в процесс чтения
(например, в аббревиатурах или логотипах). Но в других случаях
не насилуйте ваших читателей текстом, написанным заглавными буквами.
7. НЕ СВОДИТЕ МЕЖСТРОЧНОЕ РАССТОЯНИЕ К МИНИМУМУ
В типографике существует специальный термин для обозначения
расстояния между строками – интерлиньяж (или межстрочный интервал).
Увеличивая интерлиньяж, вы увеличиваете вертикальное пространство
между строками, тем самым улучшая читабельность текста на экране.
По правилам, для обеспечения читабельности текста интерлиньяж должен
быть примерно на 30% больше, чем высота знака.
Слева: Текст написан практически вплотную.
Справа: Правильное межстрочное расстояние
способствует читабельности текста.
8. УБЕДИТЕСЬ, ЧТО У ВАС ВСЕ В ПОРЯДКЕ С ЦВЕТОВЫМ
КОНТРАСТОМ
Не используйте одни и те же или похожие по гамме цвета для текста
и фона. Чем лучше виден текст, тем быстрее пользователи смогут
прочитать его и уловить основные моменты. Консорциум Всемирной
паутины советует использовать следующее соотношение для основного
текста и текста изображения:
• Небольшие тексты должны иметь коэффициент контраста минимум 4,5:1
по отношению к фону.
• Большие тексты (от 14 размера полужирным шрифтом/от 18 размера
и выше стандартным шрифтом) должны иметь коэффициент контраста
минимум 3:1 по отношению к фону.
Этот текст не соответствует
стандарту цветового контраста,
поэтому его тяжело различить
на фоне.

Этот текст соответствует

стандарту цветового контраста,
поэтому он читается легко.
9. СТАРАЙТЕСЬ НЕ ИСПОЛЬЗОВАТЬ КРАСНЫЙ ИЛИ ЗЕЛЕНЫЙ
ЦВЕТ В ТЕКСТЕ
Дальтонизм – явление довольно распространенное, особенно среди
мужчин (8% мужского населения – дальтоники). Поэтому, помимо цвета,
желательно использовать какие-то другие знаки для выделения важной
информации. Также старайтесь не прибегать к красному и зеленому цвету,
так как именно эти цвета чаще всего не распознаются дальтониками.
При выборе цветовой
палитры для сайта не
забывайте использовать
таблицу безопасных цветов,
чтобы быть уверенными,
что браузер передаст тот
или иной цвет правильным
образом. Если браузер не
может распознать какой-
либо цвет, он может
смешать несколько
близлежащих, что приведет
к искажению цветовой
гаммы сайта.

Небольшой лайфхак: чтобы быстро подобрать контрастный цвет, можно

инвертировать цвет любого растрового элемента с помощью команды Ctrl+I.
10. СТАРАЙТЕСЬ НЕ ИСПОЛЬЗОВАТЬ МЕРЦАЮЩИЙ ТЕКСТ
Информация, которая мигает или мерцает, может вызвать недомогание
у восприимчивых к этому пользователей. Кроме недомогания, это также
может вызвать раздражение у многих читателей, так как будет отвлекать
их от процесса чтения.
( http://shpargalkablog.ru/2013/12/blink-text.html )
 Форма
Все без исключения объекты обладают формой. Мы можем создать объект
без цвета или текстуры, но информацию о форме опустить невозможно.
Наиболее часто используемыми простыми формами в веб-дизайне
являются: линия, прямоугольник, треугольник и круг.
Линия может выполнять две функции: соединение и разделение других
объектов.
Пример соединения
Пример разделения
 Прямоугольник
В нем важно подобрать пропорции.
«Золотое сечение» – деление отрезка на части таким образом, чтобы
отношение меньшей части к большей было таким же, как отношение
большей ко всей длине отрезка. Ниже представлен пример, в котором
точка C делит отрезок AB так, что AC:AB= CB:AC.

Принцип «золотого сечения» соблюдается не только на картинах Леонардо

да Винчи, но и во всех областях науки и искусства, в том числе, и веб-
дизайне. Считается, что «золотое сечение» порождает гармонию.
 На фотографии важные объекты должны располагаться на
расстоянии 3/8 и 5/8 от края, то есть, в важных зрительных центрах
 Треугольник
Это сложная для веб-дизайна фигура, позволяющая достичь разных
эффектов. Зачастую она плохо вписывается в общую картину, однако, при
правильном использовании, например, в логотипах, может подчеркнуть
надежность и устойчивость компании.
Круг
Как и треугольник, эта фигура хороша в логотипах, иконках и других
небольших объектах. В крупных объектах и экранном дизайне круг
применяется редко.
 ИЗОБРАЖЕНИЯ
Изображения на сайте вызывают интерес и погружают человека
в контекст. Вместе с текстом фотография работает на главную цель –
донести до аудитории сообщение о продукте или сервисе.
Текст поверх изображения
Расположение текста поверх фотографии или иллюстрации –
популярный и сильный графический прием оформления сайта.
Он обращает на себя внимание, показывает важность информации.
Этот прием используется чаще всего:
• в обложках и на первом экране сайта,
• в оглавлении в виде плитки (товары, статьи блога),
• в начале раздела,
• в блоках с призывами к действию и кнопкой.
 Проектная мастерская R3, сайт: pmr3.ru

Обложка на сайте varenye.com

Обложка лонгрида Cycling’s Road Forward от Washington Post

 Никита Обухов
Основатель Tilda Publishing

В обложках текст чаще всего

располагают по центру. Поэтому лучше
подбирать фотографию, у которой нет
мелких деталей посередине – там, где
будет заголовок. Это может быть
простая фигура, например, стена дома
или открытое пространство на пейзаже.
Что-то однородное. Хорошо работают
белые обложки – со светлой
фотографией на фоне. Можно задать
тексту цвет, чтобы создать яркий стиль.
 9 ПРИЕМОВ: КАК ОФОРМИТЬ ТЕКСТ НА ИЗОБРАЖЕНИИ,
ЧТОБЫ ОН ХОРОШО ВОСПРИНИМАЛСЯ
Прием 1. Добейтесь контраста с помощью цвета
Найдите изображение, которое легко воспринимает глаз: не слишком
яркое и не слишком темное, без множества мелких деталей. Когда
размещаете текст, руководствуйтесь простым правилом: фон темный –
значит, текст должен быть светлым. И наоборот: светлый фон – темный
текст.
Существует много программ и онлайн инструментов, где можно
проверить контрастность цветов. Например, B2L с русским
интерфейсом и Colour Contrast Check на английском.
Да: белый текст хорошо контрастирует Нет: яркий желтый заголовок плохо читается
с черным фоном. на светлой фотографии.
Прием 2. Сделайте фон темнее
Если оригинальная фотография недостаточно контрастна
по отношению к тексту, добавьте слой полупрозрачного темного фона
поверх снимка.
Затемнение изображения позволит тексту хорошо читаться. Чем больше
непрозрачности, тем темнее будет фотография. Правда, если
фотография очень светлая, то черный градиент может сделать
изображение грязноватым и бледным. Поэтому проверьте, как
фотография смотрится при затемнении. И лучше брать более темные
фотографии.
Чтобы установить затемнение в Тильде, зайдите в настройки обложек
или изображений. Меняйте значения в полях «Цвет фильтра в начале»
и «Цвет фильтра в конце».
Обложка без затемнения Обложка с затемнением 70%
 Советы по оформлению
• Стремитесь к балансу: фон должен быть достаточно насыщенным,
чтобы текст легко читался, и в то же время прозрачным, чтобы было
видно саму картинку. Степень затемнения зависит от того, насколько
контрастна оригинальная фотография.
• Чтобы сделать плавный градиент, делайте затемнение в нижней части
насыщеннее, чем в верхней.
• Можете затемнить только нижнюю часть изображения, и удобство
чтения повысится. Секрет в том, что все предметы, которые
мы видим, немного темнее внизу. Поэтому частичное затемнение
делает иллюстрации более естественными для нашего восприятия.
• Чтобы показать интерактивность элемента, меняйте степень
затемнения фона при наведении на элемент. В Тильде по этому
принципу работают некоторые блоки из категории «Плитка и ссылка».
Прием 3. Оформите обложку с помощью цветового градиента
Этот прием похож на предыдущий, только вместо черного слоя поверх
картинки добавляете цветной. Чтобы выбрать правильный оттенок,
подходящий к гамме сайта, используйте цвета фирменного стиля или
палитру фонового изображения.

Шаблон лендинга для

бизнес-конференции
в Тильде использует синий
градиент в обложке
 Советы по оформлению цветового градиента для обложки
• Необязательно делать цветной фон однородным, составьте
комбинацию из двух оттенков. В Тильде выберите один цвет для
верхнего фильтра, и другой – для нижнего.
• Еще один интересный ход: поставьте цвет нижнего фильтра, который
будет плавно переходить в цвет фона для следующего блока.
 Прием 4. Сделайте размытым все изображение или его часть
Другой способ добиться удобства восприятия – размыть фоновую
картинку или ту ее часть, где будет располагаться текст.

Да: детали фотографии сглажены, поэтому текст

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

Настройки:
• Sharpness. Инструмент для изменения резкости снимка. Если
выставить отрицательное значение, вся иллюстрация станет
размытой.
• Focus. Инструмент для настройки фокуса. Перемещайте круг или
прямоугольник, чтобы размыть часть изображения.
Советы по оформлению размытого фонового изображения
• Необязательно размывать изображение вручную: вы можете заранее
выбрать подходящую фотографию и поставить текст на области,
которая находится не в фокусе.
• Когда ставите текст на размытую часть изображения, обязательно
проверьте, как будет выглядеть блок на экранах с разным
разрешением и на разных устройствах. Возможно, текст съедет
на область снимка с высокой резкостью и станет нечитаемым.
• Этот прием хорошо работает в паре с затемнением фона. Используйте
их вместе, чтобы добиться лучшего результата.
 Прием 5. Меняйте позиционирование и размер картинки
Используйте незаполненное пространство на фотографии. В этой
области текст будет читаться легче и восприниматься как часть снимка.
Чтобы вставить текст в нужное место, меняйте положение самого
текста и изображения.

В Тильде положение текста

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

Чтобы яркий заголовок

хорошо читался
на разноцветном фоне, его
поставили на белую
подложку.
(Сайт нью-йоркского музея детского
искусства: cmany.org)
Советы по оформлению текста на подложке
• Подложка может быть и однотонной, и полупрозрачной. Все зависит
от общего настроения сайта: полупрозрачная – более легкая,
а однотонная сильнее различает область текста и область фотографии.
• Подложка не обязательно должна быть прямоугольной формы.
Попробуйте поставить круглую или квадратную. Чтобы сделать
нестандартную плашку в Тильде, конвертируйте блок с обложкой
в Zero Block, выберите в редакторе нужную фигуру и задайте ей цвет,
прозрачность.
• Следите, чтобы текст аккуратно вписался в пространство подложки.
 Прием 7. Увеличьте размер и измените насыщенность шрифта
Если текст на картинке плохо считывается, можно идти от обратного:
менять не изображение, а настройки шрифта.

Крупные элементы обладают большим визуальным весом. Заголовок

и описание можно сделать крупнее. Если это не помогает, попробуйте
изменить насыщенность начертания.
 Прием 8. Добавьте цветной акцент
Чтобы прием сработал, внимательно подходите к выбору изображения
и цвета для расстановки акцентов. Не используйте оттенок, который
сольется с фоном. Цвет акцента должен максимально выделяться
из общей гаммы, перетягивать на себя внимание.

Да: насыщенный красный цвет расставляет акценты. Нет: желтые иконки должны были привлечь
к себе внимание, но затерялись где-то на фоне.
Советы по оформлению обложки с цветовым акцентом
• Остановитесь на двух цветах – основном и дополнительном. Самые
эффективные сочетания – белый плюс дополнительный или черный
плюс дополнительный.
• Расстановка цветовых акцентов хорошо сочетается с другим
способом – если разместить текст на незаполненном пространстве
фотографии. В этом случае можно выделить слова цветом.
 Прием 9. Впишите текст в композицию
Сложный в исполнении, но очень запоминающийся вариант визуального
оформления. Его смысл в том, чтобы сделать текст органичной частью
изображения. Создайте эффект присутствия заголовка, когда буквы
выглядывают из-за объектов на картинке или плавно переходят
в очертания предметов.
Этот прием часто используется
в журнальной и плакатной верстке.
Он привлекает на себя все внимание,
поэтому здесь особенно важно качество
исполнения – нужно уметь работать
с графическими редакторами и разбираться
в типографике.

Подобное оформление выглядит

современно и будет уместно смотреться
в рекламном лендинге, портфолио
иллюстратора или дизайнера, лонгриде или
на веб-сайте компании, связанной
с творческой индустрией.
Советы по оформлению
• Не пытайтесь вписать в фотографию три абзаца текста. Емкий
заголовок органично встанет в пространство обложки, а мелкий
длинный текст потеряется на фоне.
• На изображении не должно быть много объектов. Иначе чтение
превратится в головоломку по поиску букв среди деталей
иллюстрации.
ПРАВИЛА КОМПОНОВКИ ТЕКСТА
И ИЗОБРАЖЕНИЙ НА САЙТЕ

1. Ставьте иллюстрацию над

заголовком и основным текстом
Когда мы заходим на сайт, первое, на что
обращаем внимание – изображения.
Мы рассматриваем их и только потом
переходим к чтению текста. Чтобы
не мешать естественному восприятию,
верстайте в логичной
последовательности: сначала
изображение, затем заголовок, после
него – основной текст.
2. Продумайте визуальную иерархию

Визуальная иерархия на сайте помогает посетителю сразу понять, что

самое важное, а что – второстепенное. Чтобы выстроить иерархию,
надо поработать с размером элементов: сделать важные заголовки –
больше, дополнительные – поменьше.

Информация воспринимается труднее, когда все элементы

одинакового размера.
3. Меняйте текст и изображение местами
Располагайте текст справа или слева от изображения. В плане верстки
эти блоки равноценны и одинаково хорошо читаются. Чередуя такие
модули, вы зададите ритм странице и удержите внимание пользователя.
4. Группу изображений с текстом лучше объединить в галерею

Делаете вы портфолио, продающую страницу или собственный

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

Однотипные фотографии удобно оформить в интерактивную галерею –

она занимает немного места на сайте и содержит много полезного
контента.
5. Не заставляйте читателя искать пояснение

Сноски вроде «См. рис. 1» затрудняют чтение. Текст, в котором

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

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

Если вы разбиваете текст на колонки, следите за их длиной. Разница

в пару строк допустима, но не более того. Иначе образуются излишки
свободного пространства, которые испортят общее впечатление
от композиции. Как результат – информация на сайте будет хуже
восприниматься.
Само по себе белое пространство на сайте полезно – на странице
не возникает ощущения перегруженности. Но когда длина колонок сильно
отличается, верстка кажется неаккуратной. Старайтесь этого избегать.
7. Не ставьте изображения, чтобы просто «разбавить» текст
Перед началом работы подумайте, какую задачу должна решать
фотография на странице.
• Документальная иллюстрация демонстрирует то, о чем
вы рассказываете в тексте. Иногда она способна заменить текст.
Можно написать лонгрид о дизайне нового iPhone X. А можно просто
его показать.
• Художественная иллюстрация передает абстрактные понятия.
Некоторые темы (например, поиск вдохновения), нельзя
сфотографировать или нарисовать. Зато можно раскрыть через образы
на иллюстрации.
 Художественные иллюстрации на сайте
Документальные иллюстрации на сайте apple.com
облачной платформы Soul: soulplatform.com
 ПОДПИСЬ ПОД ИЗОБРАЖЕНИЕМ
В оформлении подписей к фотографиям и иллюстрациям есть свои
нюансы, с которыми вы можете столкнуться.

1. Подпись не нужна, когда изображение:

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

В остальных случаях не пренебрегайте подписями. Она объяснит, что

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

Подпись всегда начинается с прописной буквы, как в обычном

предложении. Но точка в конце не ставится.

4. Размер шрифта

Выделите подпись графически. Обычно она набирается шрифтом

меньшего кегля, чем основной текст. Возьмите за правило уменьшать
ее на один шаг: если основной текст набран размером в 16 пунктов,
уменьшите подпись до 14.
5. Ширина

Ширина подписи не должна превышать ширину фотографии. Чтобы

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

6. Поясняющий текст

Ставьте поясняющий текст рядом с той частью изображения, к которой

он относится. Даже если без сложного графика не обойтись,
не усложняйте фотографию условными обозначениями, как
в учебниках. Длинную запутанную подпись не хочется читать
и расшифровывать.
7. Источник изображения
В подписи обязательно укажите информацию об авторе и источнике,
если используете не свои фотографии. Это нужно делать, даже если
вы приобретаете изображение на фотостоке или используете картинку
по лицензии Creative Commons.
Стандартная форма записи источника:
«Имя автора / Наименование источника».
Ссылка должна быть кликабельной.
Примеры:
Thomas Cizauskas / Flickr.com
Jeff Sheldon / Unsplash.com

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

специальный блок перед футером или перенесите эту информацию
в подвал.