Расчет модульной сетки: анализ, расчет и построение / Хабр

анализ, расчет и построение / Хабр

Intro

Краткая предыстория

Привет, Хабр. Я читаю тебя без малого 10 лет, но ни разу не писал статей. Сначала сказать было нечего, потом — некогда. Но сегодня звёзды сошлись и подвернулась подходящая тема. Модульная сетка.

Казалось бы, набросать сетку — дело пяти минут. Всё разжёвано до нас, и бутстрапы есть на любой вкус, и «Аннушка уже пролила своё масло…». Но на практике у дизайнеров частенько возникают вопросы. Многих вводят в ступор даже небольшие отступления от привычных 12-колоночных сеток, потому что им не до конца понятны принципы построения.

Когда-то эту тему хорошо раскрывал цикл статей Алексея Черенкевича, но тексты пропали из открытого доступа. И хотя их ещё можно найти в архивах, сами тексты за прошедшие годы несколько устарели.

Словом, в очередной раз отвечая на вопрос по модульной сетке и не найдя ни одной подходящей ссылки, решил как-то обобщить в заметке всё, что размазывалось по десяткам комментариев на разных сайтах.

Как работает сетка

Любой макет содержит элементы. И порой их очень много. Между элементами возникают оптические связи и притяжения, которые подчиняются теории близости и, в частности, правилу внешнего и внутреннего.

Сетка помогает соблюдать это правило, не вычисляя каждое расстояние и размер в отдельности. Вы закладываете ключевые закономерности один раз, при построении сетки, а затем просто придерживаетесь их.

В отличие от колоночной, модульная сетка задает вертикальный ритм и основные пропорции элементов, поддерживая их во всем макете. Это удобная, гибкая и довольно простая система. При условии, что вы достаточно вникли в ее принципы.

Чем определяется структура сетки

Модульная сетка строится в двух направлениях: горизонтальном и вертикальном. Грубо говоря, это комбинация колонок и рядов с разлиновкой макета на строки.

Последнее интуитивно понятно всем пожилым аксакалам, которым доводилось с помощью карандаша и линейки сотнями чертить горизонтальные линии на листах для рефератов. Впрочем, не удивлюсь, если студенты делают это до сих пор.

Итак, если вам нужно построить сетку с нуля, вы будете отталкиваться от двух вещей. Во-первых, от контента, который нужно разместить в макете: текстов, иллюстраций, таблиц, перечней, медиафайлов. Во-вторых, от пропорций и площади носителя: бумажного листа, экрана, холста или чего-то более экзотического.

Если контент простой и неизменный, и известен вам заранее, то проще всего будет отталкиваться именно от него. Если же контент сложный и непредсказуемый (например, user-generated — пользовательский), то сетка в большей степени будет определяться форматом носителя и общими принципами типографики и композиции.

Начало построения. Вертикальный ритм

Когда речь идёт о сайтах или печатной продукции, дизайн во многом зависит от типографики и свойств текста. Поэтому построение сетки удобно начинать с вертикального ритма.

В первую очередь вам нужно нащупать два взаимосвязанных ключевых параметра: базовую высоту строки и базовый размер шрифта. Проще говоря (хи-хи), базовые интерлиньяж и кегль. И вот эта простенькая задача постоянно вводит людей в ступор. «Как мне узнать нужную высоту строки?», «А какой шрифт брать?», «А сколько строк нужно делать для буклета? А для визитки?» и т.п.

Вариант «А». Подход «от строки»

Если у вашего носителя фиксированный размер и вам уже известен весь ключевой контент, то интерлиньяж можно прикинуть заранее.

Для этого нужно представить, что каждый элемент дизайна, включая отступы, занимает по высоте некоторое количество абстрактных строк. Потом сложить все строки вместе и разделить на них высоту макета. А затем каждую абстрактную строку разбить на N реальных строк, соответствующих нужному интерлиньяжу — так, чтобы в них адекватно поместился заданный текст.

Простой, но подробный пример с картинкой

Допустим, вам нужно сверстать на листе А4 список лучших работников месяца. Их у вас трое. Для каждого сотрудника вы делаете блок-карточку: слева фото, справа текст. Фотография крупнее, поэтому высота карточки равна ее высоте. Кроме того, на листе нужно разместить шапку с заголовком, а внизу — блок контактной информации [профсоюза гениев].

Вы анализируете задачу и мысленно прикидываете относительные высоты всех элементов. Вы предполагаете, скажем, что будущая шапка по высоте займет примерно половину высоты фотографии. А в подвале окажется много всего, и он получится где-то равным фотографиям по высоте. Плюс-минус лопата. Вы пересчитаете это снова, если понадобится.

Если теперь принять высоту шапки за одну «строку», получится, что весь ваш контент занимает 9 абстрактных «строк». Если вам трудно абстрагироваться от интерлиньяжа, назовите эти «строки» рядами или горизонтальными блоками. Предположим, вы еще захотите добавить по 1/2 строки воздуха перед верхним и нижним краями листа. Итого, ваш макет нужно делить на 10 строк:

В результате вы делите ваш носитель (лист A4) по высоте на 10 «строк». Получаются блоки высотой около 3 сантиметров. Очевидно, что это слишком крупная разлиновка, чтобы верстать по ней тексты, контактную информацию и прочие мелочи.

Вы смотрите на свои текстовки и понимаете, что возле каждой фотографии у вас получается описание где-то на 10—12 строчек текста. То есть, каждый блок нужно разделить еще на 5—6 частей. Предположим, вы перестраховываетесь и берете большее значение, чтобы по одной строчке ушло на отступы. Бинго. Теперь ваш макет представляет собой 10 блоков по 6 строк в каждой. То есть 60 строк. С учетом высоты листа (~300 мм), каждая строка получилась высотой ~5мм. Всё, можно прототипировать прототип, а затем дизайнить дизайн.

А как же быть с размером шрифта? О, теперь всё очень просто! По всё той же логике «правила внешнего и внутреннего», интерлиньяж должен составлять примерно 150—200% от высоты кегля. То есть размер вашего шрифта будет в 1,5—2 раза меньше высоты строки. А это от 2,5 до 3,3мм. Этот размер несложно подобрать в пунктах или даже просто на глаз.

Подчеркну, что не обязательно вымерять тысячные доли с калькулятором. У вас есть глазомер и чувство пропорции — их должно быть достаточно. И даже если они пока не развиты, спустя сотню-другую макетов вы сможете попадать в сетку пальцем с точностью до 1-2 пикселей, даже при скрытых направляющих и отключенной привязке. И не забывайте, что человеческий глаз воспринимает размеры и расстояния с поправками на физиологию. Поэтому и сама сетка — не догма, а лишь грубое подспорье в расчетах. Последнее слово всегда за оптической компенсацией. К этой теме вернёмся ниже.

Ещё момент. Бывает так, что после всех расчетов выясняется, что шрифт слишком крупный или интерлиньяж слишком мелкий. В этом случае вы либо делаете перерасчет сетки, либо просто используете пропорциональные значения. Как правило, компромиссный вариант — это половинный или полуторный интерлиньяж.

Вариант «Б». Подход «от кегля»

Далеко не всегда у вас будет предсказуемый контент и фиксированный холст. В веб-дизайне вы куда чаще работаете с тотальной неопределенностью.

Иногда это похоже на художественную лепку из соплей. Высота вашего макета условно бесконечная, ширина — плавающая, основной контент пользовательский, встраиваемые виджеты предоставлены артелью «Пупкин и сыновья», а реальные тексты страниц заказчик собирается показать вам где-то примерно за день до запуска сайта. Но это не точно.

В таких условиях, очевидно, нет смысла пытаться определять количество строк. Зато можно танцевать от обратного: от размера шрифта (кегля). И это даже проще.

Всё, что вам нужно, это выбрать для проекта базовый кегль, который будет достаточно крупным, чтобы хорошо читаться, и при этом достаточно компактным, чтобы в строку основных текстовых блоков помещались 7—8 слов. Строго говоря, для русского языка достаточно и 5—6 слов, потому что в среднем у нас, конечно, длиннее и тверже. Но это ориентир, а не догма. Опираться нужно на конкретный макет, конкретный шрифт плюс собственное зрение и опыт.

В общем случае, ваш базовый кегль для десктопных версий сайта окажется в диапазоне от 14 до 22 пикселей. Причем тенденция идёт в сторону укрупнения.

Для педантов отмечу: таки да, для кегля уже изобретены относительные единицы измерения, и это прекрасно. Но если мы углубимся в это здесь, то старость наступит незаметно, и первую сетку наш юный читатель достроит примерно к тому моменту, когда в полной мере прочувствует бесперспективность своих отчислений в пенсионный фонд. Поэтому и здесь, и далее по тексту «px» — простые квадратные пиксели. Без учёта ретин, без учета адаптивностей, а также «без колонок, без усилка и без защиты от дурака, которого ты здесь валяешь».

Сразу ответ на частый вопрос: «базовый» не означает «самый мелкий». В любом макете почти всегда будут и менее заметные надписи: сноски, примечания, подстрочники и т.п. Здесь же речь идет о том шрифте, которым вы будете набирать основную массу текста. Вспомните любой текстовый редактор. Вы открываете новый файл и начинаете печатать каким-то «просто шрифтом», лишенным какого-либо специального форматирования — это и есть базовый шрифт, basefont. Если вам нужно сделать надпись помельче, никто не запрещает использовать мелкий кегль, это нормально.

Итак, определились с базовым шрифтом. Что дальше? А дальше — интерлиньяж. По уже упомянутым традициям современной типографики он составит 150—200% от кегля. А иногда и более.

(Подчеркну: речь о современных реалиях. Просьба не попрекать Брингхерстом и другими классиками книжной типографики — они, безусловно, взорвали свой танцпол, но с тех пор мир немного изменился. Те 120—180% всё-таки рассчитывались для книг, да ещё и в латинице).

Таким образом, ваш базовый интерлиньяж почти всегда окажется где-то в диапазоне от 22 до 40 пикселей.

По личному опыту, для простых коммерческих сайтов довольно удобен базовый интерлиньяж 15px. (Подразумевается 30px, но на уровне верстки удобнее сразу работать с половинчатым, т.к. он дает хорошие отступы в 15px и 45px. Важно понять, что в контексте модульной сетки 15 и 30 суть одно и то же — вы просто работаете либо с половинным значением «тридцатки», либо с целым значением «пятнашки»). Хотя при всей любви к классическим модульным сеткам, не отрицаю плюсы той же трендовой 4-пиксельной сетки для UI-дизайна. Сетки разные нужны, сетки разные важны. Это инструмент, а не религия.

Результат по вертикали

Теперь, когда у нас есть базовый интерлиньяж, мы можем разлинеить макет и следовать, наконец-то, вертикальному ритму. Это значит, что каждый элемент дизайна будет занимать по высоте некоторое число строк. С ритмом становится удобно и легко работать. Не нужно вычислять точные значения в пикселях. Вы меряете всё строками. Заголовок первого уровня — 4 строки, иллюстрация — 8 строк, аватар — 3 строки, кнопка — 3 строки, меню — 5 строк, отступ — 1 строка и т.п. (Надеюсь, вы понимаете, что это фигуральный пример, а не рецепт успеха).

К слову, жесткий ритм особенно удобен для верстки с CSS-препроцессорами. Верстальщику достаточно заменить одну переменную с базовым интерлиньяжем, чтобы весь сайт пропорционально уменьшился или увеличился. Это не означает, что на этом его работа закончится, но избавит от тонны рутинных операций по адаптации каждого компонента дизайна в отдельности.

Колонки и межколоночный интервал

От чего зависит число колонок

В первую очередь, от контента. Здесь всё проще, чем с высотой. Если речь идёт о печатной продукции, вы в подавляющем большинстве случаев можете предположить число колонок еще на стадии первых черновиков.

Например, если вы верстаете блок про времена года, вашим магическим числом наверняка будет 4. Вы можете сгруппировать их в один ряд или в два. При этом число колонок получится кратным либо двум, либо четырем. То есть есть смысл опираться на числа 2, 4, 6, 8, 12 или 16.

Усложним. Предположим, под блоком с временами года у вас идёт блок с тремя рекламными объявлениями. Очевидно, для этой части макета удобнее было бы число колонок, кратное трем: 3, 6, 12… Но сетка в 3 колонки явно неудачна для времен года. Поэтому нужно искать для них какой-то общий знаменатель. Предыдущий абзац подсказывает, что вам нужна сетка на 6 или 12 колонок.

*Еще пример. Вам нужно сверстать типовой блок-визитку, состоящий из логотипа/аватара (слева) и контактной информации (справа). Сколько нужно колонок? Давайте прикинем.

Если мы хотим сделать равновесную композицию, то можно обойтись даже двумя колонками. В этом случае выравнивание лого будет центральным, а текст придется размещать на глаз. А можно предположить, что текст по ширине занимает места примерно вдвое больше, чем логотип, и соответственно сделать блок в три колонки. А можно пойти еще дальше и заложить в сетку еще и отступы. Допустим, слева и справа будет поля по 1 колонке, логотип займет 2 колонки, текст 4, плюс 1 колонка отступа между лого и текстом — итого 8 колонок.*

Вот таким нехитрым образом вы рассуждаете, продумывая сетку. Если контента много, а глаз не намётан, можно с первого раза пролететь и по мере проработки деталей макета понять, что сетка не годится. Это нормально. Ничего страшного.

Когда речь идёт об отдельно взятом макете, подогнать дизайн под новую сетку нетрудно. Если же проект большой и предполагает изобилие страниц или макетов с единой канвой (сайт, брошюра, книга и т. д.), лучше заложить в сетку некоторый запас прочности и хорошенько протестировать ее со случайным контентом из разных страниц. Запас прочности, как правило, достигается кратным увеличением числа колонок: например, вам сейчас нужно только 3, а вы закладываете 6 или 9.

Отмечу один нюанс. Если вы делаете нечто с выраженной центральной композицией и активно используете горизонтальное выравнивание по центру, выгоднее сделать число колонок нечетным. Это позволит равномернее распределять отступы и контент. Совет касается и внутреннего дробления колонок. В примере выше, если у вас было 3 колонки и вам понадобилось их детализировать, при центральной композиции вы разобьете каждую колонку еще на 3, а вот при симметричной — на 2 или 4. В итоге, в первом случае колонок станет 9, а во втором — 6 или 12.

Почему все любят 12-колоночные сетки

Тут всё просто. Число 12 делится на: 12, 6, 4, 3, 2, 1. Поэтому сетка получается гибкой и позволяет органично верстать блоки почти любого количества или ширины. Более того, отбрасывая по краям макета 1 или 2 колонки в качестве полей, вы получаете в центре блок, который делится ещё и на 10, 5 или 8.

Из личного опыта добавлю, что очень удобно рисовать адаптивные макеты, отталкиваясь от ширины в 1200 пикселей, особенно без межколоночных интервалов. Вы получаете 12 колонок с приятной шириной ровно в 100 пикселей и постоянно оргазмируете от круглых чисел в процессе работы. И когда вам нужно поместить на макет плашку кнопки, вы не тянете границы прямоугольника туда-сюда, а мгновенно и не задумываясь вбиваете размер: 300 на 60 и кликаете на макет. К слову, полезно приучить себя позиционировать элементы не мышкой и стрелками, а вбиванием цифры отступов по иксу и игреку — макеты станут опрятнее.

Если контент не подразумевает верстку встык, бывает удобно сделать 24 колонки и работать с ними так же, как с межколоночным интервалом, просто отступая при необходимости полную колонку в 50px. Это создает вокруг контента достаточно воздуха, и макет смотрится дорого. Если же требуется интервал помельче, берется ровно половина колонки, то есть 25px. Все расчеты на лету, числа удобные.

Межколоночное расстояние (gutter)

Зачем и когда нужно делать отступы между колонками?

Мы не всегда делаем мозаику. Чаще всего контент не верстается встык — между двумя блоками должно быть какое-то расстояние, чтобы они не слиплись и не перекрыли друг друга.

Кроме того, для снятия нагрузки с глаза зрителя бывает нужен воздух, белое пространство. Когда в макете мало места и много информации (в газете, например), увеличение межколоночного интервала становится практически единственным способом хоть как-то размежевать текстово-графическую кашу.

В большинстве случаев, межколоночный интервал значительно меньше ширины колонки. Его размер тоже определяется особенностями контента. Если вы верстаете интерфейс, где много классических элементов управления, узкое межколоночное расстояние служит удобным разделителем. Например, между поисковой строкой и кнопкой, или между чекбоксом и его лейблом. (Хотя в целом здесь есть смысл подумать о «квадратной» сетке: 4px или иной, вообще без всяких колонок, и для этого тоже есть причины). Если же вы верстаете страницу с крупными текстовыми блоками, организованными всего в 2—3 колонки, то межколоночное расстояние имеет смысл сделать большим, чтобы дать контенту максимум воздуха.

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

Только пусть вас не подкупает приятное слово «благородный» — в коммерческом сегменте такой дизайн не всегда хорош. В целом, чем активнее и агрессивнее схема продаж, чем голоднее и злее маркетологи заказчика, тем плотнее будет верстка и тем меньше там останется воздуха. Предельный (или, скорее, запредельный) случай — газеты бесплатных объявлений а ля «Из рук в руки», где занятая площадь напрямую определяет заработок. Разумеется, там не нужны эстетические изыски с гигантскими полями. С тем же успехом можно просто залезть в карман учредителю и позаимствовать оттуда пару сотен долларов до следующей зимы. Разницы никакой, а согласовывать меньше.

Модуль

Собственно, вот таким непростым путём мы с вами добрались до определяющего понятия «модуль», в честь которого и названа модульная сетка. Обычно с него начинают, но судя по вопросам дизайнеров, такой подход не работает. Так что же это вообще такое и зачем оно нужно?

По сути, это просто пропорция. Ширина модуля равна ширине колонки, а высота — нескольким строкам. Скольким именно? Зависит от вашего дизайна и от эффекта, которого вы хотите добиться.

*Несколько лет назад мне довелось делать сайт, посвященный пилонам — шестам для танцев. Естественно, модуль там был сильно вытянут по вертикали. Я использовал соотношение ширины и высоты почти 1:3. Во-первых, потому что подавляющее большинство иллюстраций было портретной ориентации и тоже вытянуто. Во-вторых, потому что сам продукт и весь стиль предполагал некоторую долю фаллической символики. Модуль определяется и контентом, и композицией, и стилем.

Если вы делаете нечто «стабильное», то наоборот: есть смысл подумать о модуле, чуть вытянутом по горизонтали. Если же вы верстаете огромную длинную таблицу, которая служит основным контентом в макете, то очевидно, что за модуль нужно принимать одну или две базовых строки этой самой таблицы. Словом, думайте.*

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

Допустим, вы делаете портал. У вас есть меню высотой в 3 строки, затем следует баннер главной новости высотой в 9 строк, затем ряд каких-то цифр (курсов валют, погоды и др) в 3 строки, затем ряд из нескольких новостей второго плана на 9 строк. То есть весь контент чередуется: 3-9-3-9-3-9-3… На практике этот прием редко оправдан, он не очень-то гибок. Но стоит держать в голове, что ритм может быть сложным.

Сетка в сетке

Да, бывает и такое. Когда проект сложный и многокомпонентный, вы можете использовать несколько вложенных сеток. Простейший пример: общая раскладка макета (layout) использует гигантские колонки с крупным текстом, а внутри одной из них лежит форма калькулятора с кучей элементов управления, сверстанных по квадратной сетке в 4px. В этом нет ничего особенно криминального.

Более того, когда речь идёт о сайтах, часть вашего контента может быть вообще посторонней и встраиваемой: плееры, онлайн-карты, виджеты, платежные фреймы и т.д. Миллион вариантов. У этих элементов будут свои внутренние сетки, которые вы не контролируете. И это тоже нормально.

Что вы можете сделать, так это соблюсти правило внутреннего и внешнего для контейнеров, содержащих эти блоки. Конкретнее, дать вокруг достаточно воздуха (в том числе и по вертикали), чтобы они не лепились к остальному контенту, выглядели обособленно и не перетягивали посторонние элементы в свою визуальную зону. Все расстояния и пропорции в вашем макете относительны, поэтому, грубо говоря, вы можете сбалансировать чужой контент «снаружи» почти с тем же успехом, как если бы меняли размеры его содержимого «внутри».

Оптическая компенсация

Дизайнерам-перфекционистам бывает трудно понять этот момент. Сетка — это просто методология для упрощения расчетов. Это не символ веры, не закон мироздания, и не панацея. Более того, математические пропорции по чисто физиологическим причинам не являются идеальными для человеческого восприятия. Сетка не учитывает возникновение оптических иллюзий и искажений.

Поэтому, если ваш глаз сообщает вам, что какой-то элемент нужно сдвинуть на пару пикселей правее направляющей сетки, вы можете сделать это. (Не факт, что верстальщик заметит и сохранит ваш оптический костыль, но всё же).

Отдельный важный момент: элементы в сетке выравниваются по визуальной массе, а не по габаритным границам. Это значит, что (в идеале) круг, выровненный по левому полю, почти всегда окажется на несколько пикселей левее квадрата, который выровнен по тому же полю. А мелкий подстрочник под крупным заголовком почти всегда нужно смещать вправо, потому что оптически левый край первой буквы заголовка окажется правее, чем «по расчетам». Это частности оптической компенсации.

Таких тонкостей довольно много. Но важно понимать, что в случае с веб-дизайном вы почти никогда не получите идеальную картинку. Веб-верстка зачастую формализована, она опирается на формульные зависимости фреймворков, чтобы гибко адаптироваться под разные устройства и платформы. И адекватно масштабировать ваше 3-пиксельное смещение заголовка с учетом всех особенностей сглаживания, антиалиасинга и прочих ругательных слов практически невозможно. Это нужно воспринимать философски.

Резюме

Пожалуй, изя всё. Текст и без того объемный, особые выводы не нужны: тут либо вникать, либо нет. В любом случае, спасибо за ваше внимание и интерес к основам дизайна и типографики. Успехов.

Модульные сетки в работе UX-дизайнера. Инструкция по применению | by Natalie Hrodskaya | DesignSpot

Modular Grid by Jan Vantomme. Источник:http://generative.systems/modular-grid/

Люди всегда интуитивно пользовались чувством пропорции. Это легко подтвердить, потому что уже с самых ранних цивилизаций можно увидеть связь пропорций с измерением и конструированием, размещением предметов относительно друг друга в пространстве. Сетками, как разметкой, системой опорных линий, пользовались для составления планов строительства и разбивки территории, с помощью нее художники Возрождения увеличивали свои эскизы, а в картографии сетки были координатной основой, по которой составлялись военные планы.

В работе дизайнера, когда макеты состоят из различных элементов, сетка помогает их упорядочить. Сетка позволяет, не вычисляя каждое расстояние и размер в отдельности, заложив ключевые закономерности при её построении всего один раз, затем просто их переиспользовать. Например, сетка позволяет соблюсти правило теории близости (также вы можете найти это правило среди гештальт-принципов восприятия) и, в частности, правило внешнего и внутреннего, согласно которому внутренние расстояния должны быть меньше внешних.

Как только вы начинаете пользоваться сеткой, сложно не заметить её преимущества:

сетка определяет единый стиль оформления, правила расположения элементов, выравнивания, добавления новых элементов в макет;
ускоряет работу с макетом, т.к. следуя единым правилам, время на принятия решения где, что, каким образом будет расположено, минимально, кроме того позволяет получать предсказуемый результат при работе в команде;
снижает вероятность ошибок при переиспользовании компонентов макета. Компонентный подход используют в своей работе и разработчики, поэтому компоненты позволяют команде работать синхронно, легко поддерживать изменения и экономить время;
макет выглядит более эстетично, элементы пропорциональны и структурированы. Кроме того, если в дизайне используется сетка, это помогает пользователю быстрее считывать информацию. Сетка создает визуальный порядок и ориентироваться становится легче.

В зависимости от того, что берется за основу построения сетки, можно выделить следующие ее типы: блочная (в основе блок), колоночная (колонки), модульная (модуль), иерархическая (визуальный вес и расположение элементов относительно друг друга).

Блочная или манускриптная сетка — самый простой вид сетки, которая, как правило, используется в печатных изданиях. Обычно такая сетка представляет собой стандартизированный прямоугольник, который содержит контент на странице или на экране.

В качестве примера, можно привести простые страницы блогов, статей, новостей, где страницы предназначены для сплошного чтения. Источник:https://www.smashingmagazine.com/2012/12/css-baseline-the-good-the-bad-and-the-ugly/

Колоночная сетка — сетка, имеющая колонки в своей структуре. Ширина межколонника (gutter) определяется его назначением, если он просто отделяет элементы друг от друга, то разумно сделать его ширину минимально необходимой, но он должен быть в любом случае ощутимо больше межстрочного интервала, чтобы строки в соседних колонках не выглядели продолжением друг друга.

Основные блоки выровнены по вертикальным колонкам, используется узкий межколонник. Обратите внимание, что для цен на билеты символ доллара вынесен за колонку, т.к. он имеет меньший визуальный вес, чем сама цена. Таким образом, дизайнер прибегнул к оптической компенсации, визуально выстраивая вертикальную линию колонки относительно более “тяжелых” цифр цен 39–67. Источник:https://silotheatre.co.nz/here-lies-loveШирокий межколонник может быть дизайнерским решением. Источник:https://www.nationalgeographic.com/

Модульная сетка характеризуется наличием как вертикального членения, так и горизонтального. То, что образуется на пересечениях, есть модуль — прямоугольник с заданной высотой и шириной, который лежит в основе композиции. Сетка определяет как в целом будет выглядеть макет и где будут расположены отдельные элементы: текстовые блоки, заголовки, изображения.

Пример модульной сетки из книжной печати, где сетка содержит 4 колонки и 4 ряда. Изображение или текстовый блок могут занимать один или более модулей. Источник:thinkingwithtype.comПример создания концепта страницы с размещением основных блоков по модульной сетке. В качестве модуля используется объединение двух колонок и двух горизонтальных строк.Пример модульной сетки, где в качестве модуля взят квадратный блок заданных размеров. Источник:http://bodhicycling.be/home

Иерархическая — сетка с интуитивным размещением блоков, которая фокусируется на пропорциях и визуальном весе элементов в дизайне. Этот тип сетки часто используется, когда контент не стандартизированный и не однообразный. Часто встречается для бизнес доменов, связанных с модой, фотографией, искусством.

Источник:https://www.behance.net/gallery/28285019/OEHLIN-B

Наиболее сложной для построения является модульная сетка, она включает в себя в том числе и построение колоночной. Поэтому давайте рассмотрим принципы её создания.

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

И так, начнем с базовой сетки. Она напоминает миллиметровую бумагу. Она позволит перемещать самые мелкие элементы макета, сохраняя все расстояния между ними равными и единообразными. Шаг сетки зависит от неделимых элементов (атомов) макета. Ими могут быть базовый шрифт и высота строки, радио-кнопка, чекбокс, минимальное расстояние между видимыми блоками контента, например, между фотографиями в галерее или карточками товаров.

Примером базовой сетки является 8-ми пиксельная сетка компонентов Material Design. Источник:https://material.io/design/layout/spacing-methods.html#Пример выравнивания элементов попапа по базовой 8-ми пиксельной сетке. Все элементы и расстояния между ними кратны 8. Источник: внутренний проект EPAM

Почему 8-пиксельная? В качестве шага для данной сетки был выбран блок 8х8 пикселей, т. к. у большинства распространенных девайсов размер экрана в пикселях кратен восьми, следовательно разрабатывать дизайн интерфейсов для них с этой системой будет проще. Кроме того, если все числовые значения четные, масштабировать размеры и расстояния для широкого круга девайсов, сохраняя дизайн в исходном виде, становится проще.

К примеру, у девайсов с разрешением в полтора раза больше оригинального возникнут проблемы с рендерингом нечетных величин. Увеличение элемента размером в пять пикселей в полтора раза приведет к смещению в половину пикселя.

Рекомендация по использованию 8-пиксельной сетки есть и в Human Interface Guidelines Apple.

Почему не 10? Потому что, опять же у большинства девайсов размер экрана в пикселях кратен восьми и к тому же 10-пиксельная сетка вносит больше ограничений на размеры элементов.

8,16,24,32,40,48,56,64,72,80,88,96,104,112,120 15 рамеров

10,20,30,40,50,60,70,80,90,100,110,120 12 размеров

В конечном счете вы можете решить использовать и 10-ти, и 6-ти пиксельные сетки в качестве базовых. Главным аргументом в пользу их выбора должны стать удобство работы, следования выбранным правилам и их поддержку для вас и вашей команды.

Пример использования 6-ти пиксельной сетки. Источник: внутренняя система EPAM Learn

Существует два подхода к использованию базовой сетки. При использовании hard-сетки все элементы имеют размеры кратные базовому блоку сетки, например 8, если мы говорим о 8-ми пиксельной сетке, и располагаются строго по сетке.

Второй подход — soft-сетки, который сводится к использованию расстояний между элементами, кратными 8 в нашем случае.

Источник:https://spec.fm/specifics/8-pt-grid

Основной плюс использования hard-сетки — это то, что как бы вы не группировали элементы между собой, вы всегда сможете контролировать внутренние и внешние отступы и перемещать контейнеры элементов, как кирпичики. Material Design, где все спроектировано под 4-х пиксельную сетку (типографика, иконки и некоторые другие элементы разработаны с использованием 4-x пиксельной сетки, а остальные компоненты с использованием 8-ми пиксельной) обычно полностью соответствует этому методу.

4-x пиксельная сетка Material Design. Источник:https://material.io/design/layout/spacing-methods.html#baseline

Плюс soft-сетки в том, что когда приходит время верстки вашего макета, использование сетки вызовет скорее трудности, т.к. языки программирования не используют такую же структуру для задания сеток. Когда скорость реализации на первом месте, soft-сетки являются более гибкими и минималистичными по структуре кода. Она также будет более предпочтительной для дизайна под iOS, где большинство системных графических элементов не заданы жесткой сеткой.

При выборе базовой сетки, важно помнить, что шаг сетки должен ровно укладываться в высоту строки основного текста. Допустим, в качестве базового шрифта вы выбрали шрифт с кеглем 16 пикселей, тогда согласно рекомендациям современной типографики интерлиньяж составит 150–200% от кегля (иногда и более). Чтобы 8-ми пиксельный блок базовой сетки уложился ровное количество раз в высоту строки, можно выбрать в качестве интерлиньяжа значение равное 24 пикселям. Отталкиваясь от этой высоты строки основного текста, можно разлинеить макет и следовать вертикальному ритму.

Слева: построение вертикального ритма на основе базовой линии и интерлиньяжа. Справа: построение вертикального ритма на основе высоты строки

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

Узнать больше: CSS Baseline: The Good, The Bad And The Ugly «Smashing Magazine».

Это значит, что теперь каждый элемент дизайна будет занимать по высоте некоторое число строк. С ритмом удобно работать, вы меряете всё строками, а не пикселями. Например, меню и заголовок первого уровня — 2 строки, изображение — 8 строк, кнопка — 1 строка, отступ — 1 строка и т.д.

Вертикальный ритм на примере использования строк, высота которых равна высоте блока базовой сетки. Источник: внутренняя система EPAM Learn

Колоночная сетка отвечает за горизонтальный ритм, который можно получить путем выбора соотношения ширины колонки и отступа, которое позволит легко менять положении более крупных блоков.

Источник: внутренняя система EPAM Learn

Почему так популярна 12-колоночная сетка? Потому что число 12 делится на: 12, 6, 4, 3, 2, 1. Поэтому сетка получается гибкой и позволяет органично верстать блоки почти любого количества или ширины. Более того, отбрасывая по краям макета 1 или 2 колонки в качестве полей, вы получаете в центре блок, который делится ещё и на 10, 5 или 8.

Что учитывают при построении колоночной сетки

Точки перехода (breakpoints)

В адаптивном дизайне нужно сохранять структуру макета и аккуратность подачи информации для всех разрешений, поэтому макеты следует делать для всех контрольных точек. Колонки сетки могут оставаться статичными и добавляться по мере увеличения ширины экрана, а элементы менять свое положение, подчиняясь колоночному ритму и точкам перехода (breakpoints). За таковые можно принять 480, 600, 840, 960, 1280 и 1440. И для каждого разрешения экрана соответственно будет разное количество колонок. В качестве подробного примера, рекомендуется ознакомиться с Material Design responsive layout grid. При жестком дедлайне, вы можете выбрать наиболее популярные 2–3 точки перехода, используя веб-аналитику вашего ресурса или ваших конкурентов.

Пример переиспользования точек перехода Material Design responsive laoyout grid для внутреннего проекта EPAM

Или можно сохранять количество колонок для всех точек перехода и изменять пропорционально размер колонок и межколонников между ними.

Использование 12-ти колоночной сетки на примере карточек для внутреннего проекта EPAM Events

Для лучшего понимания как работает responsive layout, где, когда и как он применяется, а так же про концепцию адаптивного дизайна смотрите в нашем видео про дизайн сайтов и страниц для различных устройств

Пример расчета сетки для точки перехода в 1280 пикселей.

Определим количество колонок. Например, будет галерея из шести фотографий с текстовыми описаниями, два крупных графика и три абзаца текста. Тогда число колонок должно быть кратно 2, 3 и 6. Подойдет число 12. Деление рабочей области в 1280 пиксeлей на 12 колонок (columns) с шириной межколонников (gutters) например в 20 пикселей даст ширину колонок в 85 пикселей при резервировании по 20 пикселей отступов с правого и левого края. Таким образом у нас получилось 12 колонок по 85 пикселей, 11 межколонников по 20 пикселей и по 20 пиксeлей осталось на правое и левое поле (margins).

1280px = (85px12)+(20px11)+(20px+20px)

Такое распределение дает комбинации элементов разных размеров.

В вебе также используется понятие Fluid Grid или «резиновая» сетка. Ее особенность в том, что расстояния для нее задаются не в пикселях, а в процентах. За 100% принимается область контента. Ниже упрощенный пример для ширины макета в 1000 пикселей с 6-ю колонками.

Построив базовую сетку, и определившись с колоночной сеткой, мы получаем пересечение колонок и строк, которое образует модуль — базовую единицу модульной сетки. При выборе размера модуля, нужно помнить, что слишком большой модуль даст негибкую сетку, слишком мелкий теряет смысл. Модули можно и нужно объединять в группы, таким образом мы получим дизайнерскую сетку — конечный вариант модульной сетки, разработанной под конкретный проект.

Как правило, на практике ограничиваются комбинацией базовой и колоночной сетки, т.к. разработка и поддержка дизайнерской сетки достаточно трудоемки.

Дизайнерская (финальная модульная) сетка может складываться из двух узких колонок по бокам и одной широкой по центру. Может из одинаковых колонок с широкими отступами, а может состоять из «плавающих» колонок (когда две, когда пять), но так, чтобы это становилось видимым за счет повторения компоновки материалов и вложение «меньшего в большее».

Укрупнение колонок для первой и третьей глобальных секций ресурса. Источник:https://www.nationalgeographic.com/

Сетка в сетке

Если проект сложный и многокомпонентный, то возможно использование несколько вложенных сеток. Например: макет использует колонки с крупным текстом, а внутри одной из них лежит форма калькулятора с кучей элементов управления, сверстанных по квадратной 4-х пиксельной сетке. Кроме того, часть контента может быть вообще посторонней и встраиваемой: плееры, онлайн-карты, виджеты, платежные фреймы и т.д. У этих элементов будут свои внутренние сетки, которые вы не контролируете. Что можно сделать, так это соблюсти правило внутреннего и внешнего для контейнеров, содержащих эти блоки, дать вокруг достаточно воздуха (в том числе и по вертикали), чтобы они не приклеивались к остальному контенту, выглядели обособленно и не перетягивали посторонние элементы в свою визуальную зону.

Не начинайте поиск дизайн решения с построения сетки. Сначала необходимо:

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

Только теперь можно начать прорабатывать сетку:

выберите шаг базовой сетки, основываясь на типографике, которую будете использовать и размерах базовых элементов: кнопок, полей ввода, чекбоксов и т.д. Вы можете ограничится поддержкой только вертикального ритма на основе высоты строки базового шрифта;
определите оптимальное количество колонок в зависимости от структуры контента;
выберите количество точек перехода, которые вы будете поддерживать;
постройте колоночную сетку и попробуйте расположить ключевые элементы интерфейса;
определите размер модуля, который позволит вам создавать контентные блоки (этот шаг вы можете опустить, на практике его редко используют из-за трудоемкости поддержки).

Важно! Сетка должна не диктовать, а помогать в дизайне. Поэтому, от сетки можно отступать! Не нужно беспрекословно все выравнивать по сетке. Если какой-то блок никак не помещается в вашу сетку, его можно не подстраивать.

Пробуйте и у вас все получится!

В статье использованы проверенные материалы, которые мы рекомендуем дополнительно прочитать для знакомства с темой:

Модульная сетка http://tilda.education/courses/web-design/grid/
Вертикальный ритм https://habr.com/company/edison/blog/340670/
8pt Grid for Web (RU) https://designpub.ru/https-medium-com-simberev-8pt-grid-for-web-f05fccc956ab
8pt Grid for Web https://spec.fm/specifics/8-pt-grid
Модульная сетка с нуля https://habr.com/post/344910/
Руководство по сеткам http://deadsign.ru/design/grids_in_web_design/
Сетки для адаптивного дизайна https://habr.com/company/rambler-co/blog/261679/
Гештальт-принципы https://habr.com/ru/company/cloud4y/blog/347444/
Building Better UI Designs With Layout Grids https://www.smashingmagazine.com/2017/12/building-better-ui-designs-layout-grids/

Для углубленного изучения есть хорошие материалы:

Описание поведения Material Responsive сетки и точек перехода(breakpoints) для нее Material Responsive Grid
Документация одной из самых популярных сеток Bootstrap Grid system
Изучить истоки можно ознакомившись с книгой Йозефа Мюллер-Брокманна «Модульные системы в графическом дизайне»

Конец 🙂

Если вы узнали что-то новое, то не забудьте похлопать 🙂

6 правил создания сеток в веб-дизайне

Поднимите свои знания в области веб-дизайна на новый уровень и изучите передовой опыт использования сеток при разработке веб-сайтов.

Содержание

Что такое сетка веб-сайта?
Роль сеток в веб-дизайне
Рекомендации по использованию сеток веб-сайтов

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

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

В веб-дизайне сетки используются для того, чтобы помочь дизайнерам понять, как и где размещать элементы на странице. Эти рекомендации включают в себя поля, пробелы и столбцы вместе, обеспечивая всеобъемлющую и согласованную основу для содержимого страницы.

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

С точки зрения того, как она используется в процессе веб-дизайна, система сетки помогает выравнивать элементы страницы на основе последовательных столбцов и строк. Когда у нас есть эта структурированная структура, мы можем размещать текст, изображения и любой элемент дизайна последовательным и упорядоченным образом в интерфейсе.

При разработке дизайна для Интернета и мобильных устройств целью страниц или интерфейсов, которые мы разрабатываем, является создание различных пользовательских потоков. Поскольку пользовательские потоки часто содержат несколько экранов или окон, которые повторяют схожие схемы дизайна и макеты, сетки упрощают процесс разработки каркасов, шаблонов или стандартизированных макетов для похожих страниц.

Сетки помогают разделить страницы по горизонтали и вертикали, используя строки и столбцы. Сеточные системы служат систематическим подходом, который позволяет дизайнерам размещать элементы в организованном порядке и обеспечивает модульный подход к разработке компонентов для нескольких страниц или макетов. Сетки также определяют согласованный набор фиксированных единиц измерения, которые определяют размеры, интервалы и выравнивание, которым должен соответствовать каждый элемент дизайна.

Концепция макетов сетки возникла в печатном дизайне, когда они использовались в контексте типографики с целью размещения рукописного текста на бумаге, особенно в книгах и газетах. При этом существует множество областей современного дизайна, которые зависят от макета на основе сетки и процветают. Это включает в себя веб-дизайн, интерактивный дизайн и особенно адаптивный дизайн.

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

Существует множество терминов и понятий, с которыми нужно ознакомиться и понять в области веб-дизайна, но особенно когда речь идет о роли сеток в веб-дизайне. Между каждым из многих компонентов, составляющих структуру сетки, большим разнообразием типов сетки и мыслительными процессами, которые входят в выбор того, какой тип сетки подходит для вашего контента и дизайна… есть много всего, что нужно учесть.

Столбцы — это вертикальные секции, охватывающие высоту области контента и считаются «кирпичиками» сетки. Уникальность столбцов заключается в том, что чем больше столбцов в сетке, тем более гибкой является сетка. Мы обсудим это более подробно в ближайшее время. Ширина столбцов всегда зависит от дизайнера, но с точки зрения стандартной практики традиционное количество используемых столбцов составляет 12 на настольных компьютерах, 8 на планшетах и 4 на мобильных устройствах. Большинство сеток имеют ширину столбца 60-80px. Ширина столбца является ключевым фактором, влияющим на ширину вашего реального контента.

Модули — это единицы пространства, созданные на пересечении строк и столбцов. Модули или модули контента, как их часто называют, считаются строительными блоками страницы, поскольку каждый элемент дизайна вписывается (текст, изображения, кнопки и т. д.) в модули, созданные прямоугольными шаблонами в сетке. .

Желоба — это линии между столбцами и строками, которые отделяют каждый из этих блоков. Довольно распространенный размер желоба составляет 20 пикселей. Роль желобов заключается в формировании отрицательного пространства (независимо от того, насколько оно большое или маленькое) между столбцами и строками. Проще говоря, желоба — это пространство между столбцами и пространством между строками. Водосточные желоба имеют особое значение при планировке каменной кладки, где ширина желоба является одной из важнейших деталей планировки.

Поля — это свободное пространство между форматом и внешним краем содержимого, которое также можно назвать «внешними желобами». Боковые поля обычно имеют размер 20-30 пикселей на мобильных устройствах и сильно различаются между настольными и мобильными устройствами.

Вы можете узнать слово margin из жаргона HTML и CSS, где поля используются как свойство для создания пространства вокруг элемента дизайна или контейнера. Имейте в виду, что размер поля не влияет на размер содержимого рядом с ним. Он просто определяет количество пространства вокруг элемента, что в контексте сеток макета означает , а именно в пространство между форматом и внешним краем содержимого.

Хотя по определению термин «сетка» подразумевает строго квадратную структуру, существует также множество подтипов сеток, каждая из которых имеет свои уникальные варианты использования в веб-дизайне. Даже не подозревая об этом, ваши варианты дизайна до сих пор, такие как размещение или ширина контента вашего веб-сайта, могли легко следовать мышлению сеточного макета, даже если вы этого не осознавали. Когда мы будем рассматривать различные типы сеток, мы рассмотрим примеры дизайна сеток, которые представляют обсуждаемые нами типы сеток.

Блочные сетки также могут называться одноколоночными сетками или сетками рукописей и считаются самой простой структурой сетки. Блочные сетки состоят из одного столбца и могут включать один элемент или несколько элементов, расположенных вертикально и окруженных полями. Используя терминологию, которую мы определили ранее («Анатомия сетки»), блочная сетка представляет собой большую прямоугольную область, занимающую большую часть пространства внутри формата.

Сетки блоков часто используются для обширных или непрерывных блоков текста, и их часто можно найти на страницах блогов или в сообщениях. Другой случай, когда вы можете столкнуться с блочной сеткой, — это большие полноразмерные изображения, такие как обложки или основные изображения.

Один из наиболее распространенных вариантов использования макета блочной сетки, который мы видели, — это страницы с отдельными сообщениями, в основном для статей или отдельных сообщений в блогах, как показано на изображении выше. Показанный выше шаблон одиночного поста Elementor находит способ сделать страницу с одним столбцом такой же разнообразной и интересной, как и любую другую, применяя различные ширины, шрифты, а также классические визуальные элементы, такие как главные изображения и разделители форм — и все это, несмотря на то, что это в «только» одной колонке.

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

Сетки столбцов состоят из нескольких столбцов, в основном используемых для организации нескольких элементов в столбцы. Сетки столбцов могут иметь всего два столбца, без реального ограничения их количества. При этом стандартные макеты сетки в веб-дизайне состоят из шести, девяти или 12 столбцов. Но на самом деле дизайнер должен решить, сколько столбцов он считает необходимым.

После помещения в сетку столбцов текст и изображения выравниваются по вертикальным линиям и линиям потока столбцов. Элементы дизайна можно размещать внутри одного столбца или между двумя или более, чтобы создать вариант визуального макета. Расстояние между колонками (отступами) должно быть пропорциональным и одинаковым на всей странице. В симметричной сетке столбцов все столбцы имеют одинаковую ширину, в то время как в асимметричной сетке некоторые столбцы будут пропорционально тоньше или шире, чем другие.

Пример выше — это шаблон Elementor для страницы с ценами. Хотя страницы с ценами могут быть разработаны бесконечным количеством способов, очень часто (особенно для цифровых продуктов) где-то в середине страницы можно увидеть таблицу из трех или четырех столбцов, которая представляет различные варианты подписки продукта или услуги.

Логически эти таблицы на основе столбцов являются прямым результатом согласованной инфраструктуры на основе сетки, которая поддерживает 3-4 четких, кратких столбца с минимальным объемом текста. Сетка на основе столбцов действительно является наиболее подходящим выбором, так как когда дело доходит до написания страницы с ценами, вы хотите дать каждой подписке или плану, который вы представляете, как можно больше ясности. Не должно быть никаких отвлекающих факторов, никаких помех, ничего, что отвлекало бы внимание читателя от важной информации.

Как правило, модульные сетки используются в веб-дизайне, когда необходимо организовать несколько элементов, и сетки столбцов, которая фокусируется только на вертикальном выравнивании/организации, недостаточно. Модульные сетки получили свое название от наличия модулей одинакового размера (которые мы обсуждали ранее). Типичными вариантами использования модульных сеток являются домашние экраны мобильных телефонов, на которых отображается полная коллекция приложений, или веб-сайты электронной коммерции, которые отображают коллекции инвентаря на страницах своих категорий.

Как показано выше, модульные сетки широко используются для галерей изображений и макетов карточек, например, сетка изображений, демонстрирующая широкий спектр вариантов напольных покрытий, которые может предложить компания, занимающаяся напольными покрытиями. Что уникально в этой конкретной галерее изображений, так это то, что она построена с виджетом Elementor Pro Gallery, который работает исключительно с дизайном на основе сетки.

Галерейный тип может быть либо с выровненной сеткой (полностью модульной), либо сеткой каменной кладки, либо иерархической сеткой, которую мы вскоре обсудим. В дополнение к различным параметрам макета сетки функция Pro Gallery имеет возможность создания нескольких галерей, что позволяет использовать разные представления галереи. Посетители веб-сайта могут либо просмотреть всю галерею изображений сразу, либо отфильтровать ее по категориям. В любом случае, макет на основе сетки установлен в камне.

Другим вариантом модульной сетки может быть создание страницы архива, на которой отображаются эскизы постов (или статей) блога. Это стало возможным благодаря виджету «Сообщения», который отображает макет карты с миниатюрами изображений, заголовков, выдержек и дат.

Имейте в виду, что даже несмотря на то, что сами квадраты изображения имеют несколько строк текста под ними, это по-прежнему модульная сетка, поскольку каждая карточка целиком (миниатюра, заголовок, описание и дата) помещается в прямоугольник одинакового размера. .

Иерархическая сетка, которую также можно описать как «свободную», представляет собой сетку, элементы которой размещаются «спонтанно» среди столбцов и строк сетки. Это означает, что ширина столбцов и высота строк различаются по всей сетке.

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

В этом шаблоне Elementor для страницы «Обо мне» вся страница использует произвольную сетку, что является особенно подходящим названием для макета страницы, поскольку несколько размеров квадрата и прямоугольника свободно размещаются по мере продвижения вниз по странице. Что уникально, так это то, что верхняя часть страницы (контент героя) полностью произвольная, но следующие разделы страницы разделены на равномерно разделенный макет с тремя столбцами и, наконец, с четным макетом с двумя столбцами. Иерархические сетки, безусловно, идеальный способ сделать вещи интересными.

Когда страница или сайт спроектированы адаптивно, это означает, что макет страницы и ее содержимое адаптируются к различным устройствам и размерам браузера. С точки зрения макета сетки это означает, что по мере изменения размера экрана меняется и количество столбцов, и, конечно же, их ширина.

Сетки дизайна привязаны к базовой сетке, тогда как адаптивные сетки являются изменчивыми, что означает, что столбцы сетки могут масштабироваться и переориентироваться в соответствии с областью просмотра пользователя. При фиксированной сетке уменьшение размеров экрана приведет вас к следующей контрольной точке, а боковые поля будут автоматически уменьшаться до следующей контрольной точки.

Отзывчивая сетка, или, как ее еще называют, гибкая сетка — это то, что вы видите, когда видите, что элементы динамически меняются по мере того, как браузер/экран сжимается. Адаптивные сетки будут систематически выравнивать и располагать ваш контент таким образом, чтобы логически представлять их информационную иерархию. Это означает, что по мере того, как окно просмотра сжимается, плитки и содержимое сетки масштабируются соответственно.

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

Учитывая его критическую важность в дизайне макета, логично, что пустое пространство является неотъемлемой частью веб-сайта и сетки макета. По сути, макеты сетки определяются не только размером их столбцов и строк, но также шириной и высотой пустого пространства между ними, также известного как интервал.

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

В приведенном выше примере домашняя страница Elementor Experts показывает, насколько эффективным может быть пустое пространство, особенно на главной странице веб-сайта. Поскольку основная цель домашней страницы — побудить пользователей к действию и узнать о платформе Experts, пустое пространство облегчает этот процесс, используя подход, ориентированный на контент.

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

Многие дизайнеры используют концепцию, называемую золотым сечением, когда стремятся улучшить размер, баланс и компоновку своей сетки. По своей сути Золотое сечение — это пропорция, равная 1,6180. Золотое сечение основано на так называемом золотом прямоугольнике, прямоугольнике, длина которого в 1,6180 раз больше ширины.

Это означает, что если ширина равна 100 пикселей, длина будет 161,80 пикселей. Это применимо к ширине и длине изображений, объектов или фигур, расположенных рядом друг с другом, или для формирования одной формы или самого элемента. При использовании золотого сечения дизайнеры могут оценить, как разделить горизонтальное пространство, доступное им на странице, и сколько места выделить для каждого элемента и вокруг него и т. д.

В этом рабочем процессе микродизайна вам также необходимо выбрать размер изображения, размер шрифта и т. д. Но для этого вы должны решить, в каком соотношении разделить столбцы, что затем приведет вас к решению, насколько большими будут ваше изображение и шрифт, и что вы хотите подчеркнуть больше или меньше, или если вы хотите сделать одинаковый акцент на каждом из них.

В этом руководстве учитывается множество факторов, таких как ширина страницы, размер содержимого, а также количество и размер модулей, которые потребуются для контента, в сетке. С точки зрения доступности, золотое сечение направляет взгляд пользователей к определенным точкам или областям на экране, и это то, на что дизайнеры хотят повлиять, когда они определяют и применяют информационную иерархию своего контента и схемы дизайна.

Правило третей — еще один метод веб-дизайна, который помогает дизайнерам создавать визуально сбалансированные макеты сетки и размещение изображений. Этот метод размещает наложение сетки, которое делит пространство дизайна на трети как по горизонтали, так и по вертикали. Это любое изображение или страница раздела/пространства на девять равных частей, образованных пересечениями линий. Правило третей гласит, что размещение «предметов интереса» в «третьях» изображения привлечет к ним внимание пользователя более эффектным и визуально привлекательным способом.

Теперь, когда вы полностью понимаете, почему сетки так важны в веб-дизайне и как вы можете создать их для своего веб-сайта, пришло время начать измерение и выравнивание. Имейте в виду, что это относится к каждому элементу дизайна: выравнивание виджетов и компонентов как по горизонтали, так и по вертикали, выравнивание текстовых элементов по базовой линии и центрирование каждого типа элементов по всей странице. Ваш рабочий процесс дизайна и ваши результаты дизайна будут только благодарны вам, и мы рады видеть, что у вас есть в магазине.

Мой первый опыт работы дизайнером начался с верстки журналов. Другими словами, все началось с сетки. Эти тонкие красные линии в InDesign середины 2000-х. Я помню то любопытство, с которым я изучал, как они работают, какие они бывают и как их правильно использовать в той или иной ситуации. В стране, в которой я жил в то время, было почти невозможно просто пойти и купить приличный журнал или какую-то конкретную книгу по теме. Что касается сеток, вокруг циркулировала пара книг — хорошие книги, такие как «Форма книги» Яна Чихольда, «Системы сетки в графическом дизайне» Йозефа Мюллера-Брокмана и что-то еще, что я не могу вспомнить. И, конечно же, как и многие другие дизайнеры, я постоянно исследовал мир коммутируемого Интернета в поисках статей, правил, книг, примеров или даже связанных материалов. Прошло около 10 лет с тех пор, как я сделал и забыл тот макет журнала, но это любопытное чувство не покидает меня до сих пор. Я думаю, что он даже стал больше.

Около года назад во время моего непродолжительного визита в Москву меня попросили сделать серию прототипов для одного из главных оппозиционных СМИ России — «Новой газеты». Я был рад взяться за эту работу в основном по двум причинам — мне всегда нравились проекты, связанные со СМИ + проект, как правило, выполнялся с одной из самых известных в России дизайн-студий Charmer, которая отвечает за почти все достойные внимания редизайны российских СМИ прошлых лет.

Прежде чем приступить к реализации, мы поговорили с арт-директором и сооснователем Charmer Александром Гладких о разных подходах к редизайну медиа, использовании грид-систем, будущем технологий и роли медиа в нем. Я был вдохновлен его работой и системным подходом, который, очевидно, выделял его проекты среди остальных.

Он показал мне некоторые из своих сеток, основанных на пропорциях в соответствии с типом медиа, который он использовал в своем проекте (например, 16×9 для веб-сайтов с большим количеством видео, 3×2 для фотографий и так далее). Это был новый подход для меня, учитывая, что я обычно строил свои системы сетки на основе значений базового типа — определяя вертикальный ритм, а затем составляя макет с учетом этого. Итак, наши разговоры вызвали много размышлений и исследований, что также привело меня к поиску алгоритма, который объединил бы медиацентрический и типоцентрический подходы в одну систему посредством множественных вычислений. И идея заключалась в том, чтобы обернуть эти расчеты в простой в использовании мастер, который позволил бы любому дизайнеру попробовать его и, к счастью, найти свой путь в расчетах в макетировании.

В любой дисциплине дизайна, о которой я знаю, и особенно в графическом дизайне, сетки — это одна из тех вещей, которые оказывают визуальное и логическое воздействие, но не видны напрямую. В очень абстрактной точке они сначала строят иерархию, а затем распределяют объекты в ее логических границах. Это похоже на ДНК в клетке, которая приказывает своим белкам организоваться определенным образом, чтобы построить работающую систему. С точки зрения макета любой мультимедийный веб-сайт представляет собой комбинацию изображений и текста, приправленных различными разделителями, обрамленных в различные рамки, иногда частично замененных значками и обычно различающихся по цвету. Изображение может содержать какое-то действие в пределах своих размеров, поэтому мы можем назвать его видео, но это различие не имеет значения в этот момент и станет полезным только через пару шагов.

Итак, давайте начнем с текста. Очевидно, что для его визуализации нужны шрифты, разборчивость которых позволит нашим читателям разрушительно воспринимать информацию, которой собираются поделиться авторы или редакторы сайта. Среди всех стилей текста, которые могут быть представлены на вашем веб-сайте (заголовки, заголовки, лиды и т. д.), основной текст (тот, который вы сейчас читаете) — это тот, который вы читаете чаще всего. Итак, когда дело доходит до разборчивости текста, это правильное место для начала. Как мы знаем из более ранних исследований, разборчивый текст, будь то книга или веб-сайт, должен иметь хорошо отрегулированный вертикальный ритм. И когда дело доходит до настройки свойств основного текста с целью сделать его разборчивым с точки зрения вертикального ритма и в соответствии с вашими знаниями, большинство графических редакторов (таких как Sketch, Photoshop или Illustrator) помимо процесса выбора шрифта, который мы собираемся рассмотреть позже, заставит вас иметь дело с двумя основными числами — размером шрифта и высотой строки, что в результате даст вам отношение размера шрифта к высоте строки основного текста (назовем его flr для дальнейшего использования) . На иллюстрации ниже вы можете видеть основные копии FLR некоторых популярных медиа-сайтов.

Поскольку есть еще что рассказать, я не буду заострять внимание на процессе настройки flr и перейду к процессу выбора шрифта. Для тех из вас, кто сталкивается с этим процессом впервые, я быстро нарыл несколько ссылок, таких как эта, эта и эта, но будьте уверены, Google может направить вас еще дальше.

Когда вы начнете применять разные шрифты к своему основному тексту (используя одни и те же флапы), вы обнаружите, что (помимо других визуальных изменений) вертикальный ритм вашего тела изменится, и иногда изменится очень сильно. Вы можете увидеть это в примере ниже, где я использовал Helvetica Neue и Baskerville с одинаковыми значениями размера шрифта/высоты строки.

Это означает, что вы не можете просто взять любой flr с понравившегося сайта, применить его к выбранному вами шрифту и ожидать, что он сработает. Этого не будет, и в основном потому, что разные шрифты, среди прочих различий, имеют разные значения x-height, как, например, с Helvetica Neue (x-height составляет около 50% высоты шрифта) и Baskerville (x-высота намного меньше, чем 50). % высоты шрифта). Но значение x-height (как и многие другие значения шрифта) нельзя увидеть в Sketch или Photoshop, поэтому вы можете использовать свои глаза, опыт и чувство прекрасного, чтобы выбрать шрифт, который сформирует ритм, который подойдет. ваша основная копия нуждается. Итак, вот где начинается первое испытание.

Я искал хорошую статью об отношениях и настройках x-height/font-height и нашел один интересный момент в презентации Ксавьера Бертельса, где он заявил, что существует сильная зависимость между разборчивостью основного текста и x-height/em- отношение высоты блока (размер строчных букв по сравнению с прописными буквами) и как можно ближе высота x доходит до 50% от высоты em-box, что лучше для удобочитаемости основного текста. Он даже сделал для этого формулу, которая проиллюстрирована ниже, с 16 в качестве размера шрифта и 8 в качестве значения x-height внутри него:

Конечно, есть много других факторов разборчивости шрифта и его пригодности для использования в основном тексте, но отношение x-height/font-size, безусловно, хорошо иметь в виду при выборе шрифтов для вашего следующего проекта. . И было бы очень удобно иметь возможность просматривать библиотеку шрифтов по дополнительным показателям, таким как этот.

Новый браузер шрифтов Adobe Typekit со свойством x-height в фильтрах базовая сетка. В моем случае это число (базовый микромодуль) — это высота строки основного текста, деленная на 2 или 3 в некоторых случаях. Ксавьер предлагает разделить его на 3 или 4 в своей презентации, но на самом деле это зависит от вас, если вы можете разделить его. Итак, если высота строки моего основного текста будет 22 pt, мой базовый микромодуль будет 11 pt. Просто так. Теперь я могу построить что-то вроде этого:

Следующий шаг немного сложнее. Нам нужно нарисовать вертикальные линии, которые будут нашими столбцами, и, допустим, нам нужно 12 из них для этого. Теперь нам нужно указать ширину нашего столбца и значения наших желобов (если, конечно, они нам нужны). Эти ширины могут быть определены определенными пропорциями мультимедиа, которые должны соответствовать любому количеству наших столбцов, типичной шириной рекламного баннера или размерами любого графического объекта, который мы можем захотеть использовать в любом точном размере. Если говорить о самых распространенных медиа-пропорциях, я бы назвал 3:2 (обычно используется для фотографий) и 16:9.(обычно используется для видео). Есть также много других пропорций, которые вы можете найти в Интернете или распечатать. Что интересно в пропорциях, так это то, что они универсальны и имеют смысл не только в графическом представлении, но и, например, в виде звуков.

Итак, теперь нам нужно выровнять нашу пропорцию ( давайте выберем 16:9) с нашим базовым ритмом, чтобы сформировать систему. Когда я впервые столкнулся с этой проблемой, я решил вычислить ее таким образом — взять все блоки 16:9, которые существуют в диапазоне от 160/90 px до 1280/720 px, и узнать, какой из них делится на 11, то есть в соответствии с моим базовым ритмом. Если вы хотите получить представление о том, как это выглядело, вот сокращенная версия процесса:

Я взял все свои блоки, и, поскольку они имеют одинаковую пропорцию (16:9), я легко расположил их друг с другом. Затем нарисуйте столбцы на основе ширины меньшего блока. И, конечно же, все блоки соответствовали моему базовому ритму в 8 пикселей. Позже я узнал, что та же логика прослеживается и в расположении обертонов в музыке.

Из этого небольшого эксперимента мы узнали, что в энтропии всех возможных значений сетки есть такие, которые не только соответствуют каким-то определенным отношениям и могут образовывать внутри себя иерархическую структуру величин, но и опираются на заданный вертикальный ритм, который хранится внутри вашей основной копии. Также эти иерархические системы легко делятся на столбцы, при этом в качестве ширины столбца используется наименьшая ширина блока. Таким образом, вместо того, чтобы пытаться поместить слона в заранее определенную клетку (в нашем случае типичная ширина сетки, например, 960 или 1024 px, которые многие используют по умолчанию), мы можем скрафтить коробку по метрикам слона и впустить его на выдохе. Что нам нужно, так это применить некоторую математику, чтобы извлечь значения из наших настроек типографики и использовать их в качестве фильтра, чтобы выбрать правильные размеры из последовательности выбранных соотношений. И построить из него всю систему. В тот момент я подумал, что было бы неплохо проконсультироваться с кем-нибудь, кто больше разбирается в математике и программировании. Следующую часть статьи я отправляю к моему подельнику — Назару Грабовскому, который присоединился ко мне в этом проекте, начиная с, ну, сейчас.

Я никогда не занимался ни веб-дизайном, ни типографикой, но всегда интересовался анатомией шрифта, тем, как достигается хорошая читаемость, и смежными темами. Когда Росс обратился ко мне со своей идеей, я нашел ее довольно интересной и предложил помощь в решении численных задач, с которыми он столкнулся. Некоторое время я разрабатывал алгоритмы разного типа, в том числе для графики и обработки изображений. И, на первый взгляд, казалось, что ритм в сетках должен иметь лаконичное и элегантное арифметическое решение. Но сначала мне нужно было погрузиться в мир типографики. Обсуждая с Россом и исследуя идею ритма, как его получить и применить, я довольно много узнал о современной типографике (как для новичка в этой области). Вы можете получить представление о том, какие эпистемологические усилия мне пришлось предпринять, взглянув на мои записи.

Сначала я не мог понять ритма с точки зрения прямоугольных строительных блоков, и зачем кому-то желать ограничивать свой дизайн макета какими-то числами. Но постепенно, по мере лучшего понимания основ типографики, все прояснилось. И моей главной целью стало разложить возникшую числовую задачу на базовые ортогональные элементы, чтобы из этих базовых элементов стало легко строить ритмическую сетку. Как любая численная задача и ее решение (алгоритм), она должна иметь некоторый вход (данный изначально) и выход (желаемый результат). Для меня это началось с анализа входов и выходов.

Основным числом, определяющим весь ритм, является номер базовой линии, который представляет собой долю высоты строки, обычно деленную на 2 или 3 (не путать с базовой метрикой — горизонтальной линией, на которой расположены буквы. Номер базовой линии это просто число, полученное из значений метрик шрифта). На основе исходного числа нам нужно получить размер микроблока — максимально возможный блок, соответствующий ритму в одном столбце. Такой микроблок позволяет строить более крупные блоки и остальную часть сетки. Нетривиальная часть вступает в игру, когда мы рассматриваем желоба, и по определению она должна быть кратна базовому числу. Следовательно, желоба также становятся частью более крупных блоков, и такой случай вносит загадку в вычисление оптимального ритма. Без желобов решение довольно простое — просто целочисленное деление без каких-либо остатков. При использовании желобов необходимо учитывать ширину макета (как верхний предел) одновременно с базовым числом (как множитель желобов). Следовательно, основная взаимосвязь между вертикальными и горизонтальными размерами микроблока — это количество базовых линий и размер желоба.

Поскольку вся проблема лежит в области целых чисел (мы не можем разбить пиксель на более мелкие части), это накладывает ограничения на арифметику, которую мы можем применить, в частности, это означает только целочисленную арифметику (деление без остатка). Но после некоторой возни с модульной арифметикой решение было найдено на основе наименьшего общего кратного. Чтобы сделать его полным и немного формальным, я резюмировал арифметическое определение микроблока в следующей краткой формуле:

Но не расстраивайтесь, если вы не знакомы с такими обозначениями. Все это означает, что высота микроблока должна быть кратна номеру базовой линии, при этом ширина сетки должна быть кратна ширине микроблока с учетом размера желоба. Если вам интересны подробности, вы можете проверить более явный вывод и не стесняйтесь оставлять комментарии ниже, если нужны разъяснения.

Первая версия генератора сетки на основе описанного выше решения была реализована в Octave — удобной среде с открытым исходным кодом для математических манипуляций. Этот инструмент генерирует конфигурацию сетки и простое изображение только соответствующего макета. Но затем мы смогли сгенерировать сотни ритмических макетов сетки за считанные минуты и проверить их, чтобы проверить и обеспечить правильность полученной формулы и алгоритма.

При проверке десятков сгенерированных раскладок обнаружился один интересный факт. Некоторые соотношения блоков более гибкие, чем другие. Поскольку в медиа используется довольно ограниченное количество пропорций, мы рассматриваем только пропорции 1:1, 3:2 и 16:9. В масштабе 1:1 вы можете получить ритмические блоки практически любого размера желоба. Но для 16:9 все наоборот — вы можете использовать только нулевой отступ, чтобы получить желаемые пропорции блоков. Наконец, 3:2 находится посередине, в нем достаточно ритмов, но не так много, как 1:1. В основном это из-за числа 9, так как нечетные числа не так дружелюбны к делимости, как числа 1 и 2. И вы мало что можете с этим поделать, если хотите сохранить строгую точность с отношениями.

Следующим шагом было создание веб-приложения. И тут начинается другое веселье — точная типографика в браузере. Две основные проблемы, с которыми мы столкнулись, это позиционирование базовой линии текста с точностью до пикселей и как извлечь вертикальные метрики шрифта . Проблема с метриками шрифтов в вебе практически решена. Например, OpenType.js позволяет извлечь все метрики, содержащиеся в файле шрифта. Но настоящая проблема возникает, когда мы хотим использовать пользовательские шрифты, уже имеющиеся в его системе. Поскольку браузеру (веб-приложению) запрещено получать автоматический доступ к файлам без явного взаимодействия с пользователем, всплывающих окон и т. д., невозможно использовать такие инструменты, как OpenType, поскольку для этого требуется знать, где находятся файлы шрифтов. Более того, мы даже не можем достоверно проверить, какие шрифты на самом деле присутствуют в системе пользователя.

Нам нужно было придумать способ обнаружения системных шрифтов и извлечения их метрик. К счастью, мы были не первыми, кто столкнулся с этой головоломкой, и нам было достаточно просто объединить существующие решения. Трюк с обнаружением шрифтов основан на изящной идее, что несколько повторяющихся букв занимают некоторую уникальную ширину для каждого шрифта при отображении в браузере. Следовательно, если выбранный шрифт отсутствует в системе пользователя, то образец текста отображается с резервным шрифтом, который имеет другой горизонтальный диапазон, и мы можем проверить это заранее. Что ж, на самом деле это своего рода решение грубой силы, так как вероятность обнаружения коллизий мала (когда два одинаковых образца текста с разными гарнитурами занимают одно и то же горизонтальное пространство), но на самом деле оно работает достаточно хорошо для большинства стандартных семейств шрифтов.

На данный момент детектируются популярные системные шрифты (просто их названия), но все же нам нужно как-то извлечь из них метрики шрифтов и визуализировать их. Ни один из браузеров не предоставляет готового решения для получения информации о глифах шрифта и их метриках, поэтому в качестве обходного пути вертикальные метрики анализируются и извлекаются с помощью графических инструментов, доступных в браузере. В частности, выбранный шрифт отображается в 2D-холсте браузера, а затем анализируется с помощью небольшого кода и метода сканирования — стандартного семейства алгоритмов компьютерной графики. Обнаружив нижние и верхние границы для H , d , x , p глифов по отдельности мы фактически получаем основные вертикальные метрики для выбранного шрифта — высота прописной буквы, восхождение, x-высота и спуск соответственно. Теперь, когда у нас есть системные шрифты и их показатели, , мы можем вычесть значение UPM для высоты x, чтобы оценить разборчивость шрифта и визуализировать, насколько оно отличается от рекомендованного 500UPM .

Метрики шрифта Veritcal обозначены красной и серой линиями. Высота рисунка зебры визуализирует рекомендуемую высоту x для выбранного шрифта. А высота оранжевой полосы показывает отклонение x-height шрифта от рекомендованного.

Все эти проблемы с обнаружением шрифтов и извлечением метрик были сделаны, потому что мы хотели, чтобы веб-приложение создавало ритмические сетки. Кажется, теперь у нас есть вся информация, необходимая для объединения сетки в веб-макете. Но подождите, не так быстро. Вылезает еще одно препятствие. Похоже, что CSS не обеспечивает контроль над позиционированием базовой линии текста (на этот раз мы говорим о фактической базовой линии, а не о базовом номере). И крайне важно отображать ритмическую сетку с точностью до пикселя, так как мы хотим разместить текст точно на базовых линиях, которые равномерно распределены внутри сетки. Я имею в виду, что в CSS вы можете расположить текст вертикально, как хотите (относительно, абсолютно, сдвинуть на разные единицы) и указать высоту строки для многострочного текста, но вы не можете контролировать, где именно размещается базовая линия текста для произвольного шрифта. Простое упражнение по веб-макету, иллюстрирующее эту проблему: поместите текст, нарисуйте горизонтальную линию и расположите эту линию, как если бы она была базовой линией. Затем случайным образом измените гарнитуру или размер шрифта. Попробуй сам. К сожалению, текст больше не придерживается базовой линии после изменения шрифта? К сожалению, консорциум W3C прямо заявляет об этом — «CSS не определяет положение базовой линии строки» (стандарт W3C CSS). Это означает, что вы не можете указать базовую позицию при размещении фрагмента текста. Поэтому каждый поставщик браузера реализует автоматическое базовое позиционирование в соответствии со своими убеждениями, и, конечно, они различаются в разных браузерах (хотя и не во всех).

К счастью, ребята из сообщества Adobe столкнулись с похожей проблемой, поэтому я позаимствовал их решение Strut для выравнивания буквицы (благодаря Алану Стернсу) и адаптировал его только для выравнивания базовой линии, но для многострочного текста . Попытайся. Strut Trick по-прежнему имеет ограничение на минимальную высоту строки, которую можно использовать, обычно около 120% в зависимости от шрифта. Но это единственное жизнеспособное кросс-шрифтовое и кросс-браузерное решение, которое я смог придумать на данный момент. Я хотел бы услышать ваши идеи о том, как достичь идеального решения без ограничений. Если вы хотите лучше понять, что здесь происходит, есть отличная статья Кристофера Ауэ, объясняющая внутренности выравнивания в CSS и связанные с этим проблемы — «Вертикальное выравнивание: все, что вам нужно знать».

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

Итак, первый момент — это размер текстовой части Вашего объявления. Текст не должен быть громоздким. Чем он меньше, тем лучше. Многие ошибочно предполагают, что чем подробнее и точнее описан продукт, тем больше шанс того, что вероятный клиент поймёт все его плюсы и примет решение о покупке. Но это не так.

Делаем выводы — уместить весь сок Вашего предложения нужно максимум в 2-3 строчках. Этого объёма должно хватить, чтобы описать все плюсы товара/услуги. Хорошо работают только такие объявления. «Воду» и длинную рекламу в десяти томах оставьте незадачливым конкурентам.

Поверьте, обилие сложных профессиональных словечек и терминов далеко не всегда сделают Вас крутым специалистом в глазах клиентов. С целевой аудиторией нужно говорить на её же языке, особенно если речь о наружной рекламе.

Ещё одна большая ошибка при подготовке маркетинговых текстов — самохвальство. «В нашей клинике самое крутое оборудование», «наш товар едет прямо от производителя», «наша продукция очень качественная». Думаете, от покупателей отбоя не будет? Нет, не будет покупателей. Потому что в рекламе говорить нужно не о себе, а о выгоде клиентов. Как это выглядит? Разберём на примерах.

«Наш товар едет прямо от производителя». Дополним тезис следующим образом: «а так как мы не сотрудничаем с посредниками, вы экономите до 50% в сравнении с рыночной ценой». Наполовину дешевле, чем в большинстве магазинов. Разве плохо?

Как видите, всё очень просто! Надеемся, эта информация будет для Вас очень полезной. А если Вам нужна помощь в подготовке мощного и броского рекламного объявления, можете обратиться к нам в любое время. Консультация бесплатна!

Федеральная антимонопольная служба весь год следила, чтобы потребляемая россиянами реклама соответствовала правилам и законам индустрии. 10 случаев, зафиксированных радарами ФАС, «Право.Ru» посчитало особенно примечательными. В Челябинске «устанавливали так, чтобы стояло» (правда, не очень понятно, что именно), в Новгороде дешевые обои продавали с оскорблением публики, в Москве скидки на жилье продвигали опасным для детской психики образом, а отголоски украинского кризиса обнаружились сразу в двух рекламных кампаниях: одной – про писца, другой – про барана.

Открывают десятку неординарных реклам, вызвавших гонения со стороны ФАС, билборды и стикеры крупнейшего столичного застройщика элитной недвижимости – компании «Донстрой», в которых отрицалось существование главного новогоднего персонажа. Под занавес 2014 года на улицах и в вагонах метро появилась реклама со словами: «Деда Мороза нет, а скидки – есть!». В этом высказывании, по мнению обратившихся к антимонопольщикам родителей, содержится реальная угроза для психики детей. Ведомство пообещало рассмотреть рекламу «Донстроя» и запросило в компании объяснения.

Другие специалисты в области креатива довели тему хвойных деревьев до неприличного. В Курганское УФАС обратились местные жители с жалобой на рекламу ООО «УралЭкоСтрой», адресованную потенциальным покупателям земельных участков в коттеджном поселке «Лесная усадьба». Изображение девушки в зимней шапке на баннерах компании сопровождалось надписью «КАЖДОМУ СОСНУ или ель». Реклама была признана УФАС непристойной, а также нарушающей требования законодательства о государственном языке РФ и закона «О рекламе». При рассмотрении дела ведомство привлекло для проведения лингвистического исследования кандидата филологических наук, который признал, что рекламный текст содержит обсценное слово «сосну», указав, что оно употребляется в ненормативной лексике как глагол, «обозначающий интимный процесс», и недопустимо в публичной речи.

Воронежское управление антимонопольной службы в конце ноября возбудило дело в отношении портала, использовавшего в наружной рекламе изображение госфлага Украины с подписью «Почем украинский писец для Воронежа? Аналитика. Дискуссии. Видеотрансляция». На фоне сине-желтого полотнища, помимо текста, было размещено фото указанного пушного зверя. Заявитель, обратившийся с жалобой, был уверен, что реклама, «учитывая накал политсобытий в соседнем государстве, может прорастить среди людей зерна агрессии». Рекламодатель, по мнению УФАС, употребил на своем плакате оскорбительные выражения и сравнения в отношении официального государственного символа Украины.

В сентябре якутское УФАС отобрало у продавца цветов баннер с изображением красноармейца, позаимствованным из знаменитого агитационного плаката художника Дмитрия Моора (Орлова). Оригинальную надпись «Ты записался добровольцем?» бизнес-леди заменила на выражение: «А ты купил своей любимой цветы?». УФАС не оценило чувство юмора, признав рекламу ненадлежащей и оскорбляющей образ героя войны, солдата, защищавшего Родину, что недопустимо по требованиям ФЗ о рекламе.

Пермское УФАС в июле заинтересовалось баннерами, размещенными в городе Лысьва, которые содержали двусмысленные картинки и провокационные высказывания в адрес президента США Барака Обамы в связи с его поддержкой новых властей Украины. На одном из щитов был изображен баран с нарисованным на шкуре американским флагом и лозунгом «Баран Абама. Убери копыта от Украины. Своих не бросаем!». На другом плакате было помещено изображение американского президента, которому протягивают банан с надписью «Украина». В верхней и нижней частях баннера, кроме того, были напечатаны фразы: «Банан-Обама» и «Не подавись». Директор ответственного рекламного агентства объяснил УФАС, что таким образом выражает свою гражданскую позицию и виновным в нарушении законодательства себя не считает. По его словам, ранее он уже сумел отстоять свои взгляды в ходе телефонного разговора с сотрудником прокуратуры.

В мае москвичи указали столичному УФАС на рекламные щиты фитнес-клуба с изображением крупных ягод клубники и надписью «Крепкие ягодицы к лету!». Негодование от такого образного ряда возникло и у московского департамента СМИ и рекламы, также направившего обращение в антимонопольный орган по поводу «неэтичной» рекламы. В УФАС, в свою очередь, всех заявителей заверили, что, если его экспертный совет разделит возникшие сомнения по поводу неоднозначного рекламного хода, будет возбуждено дело об административном нарушении.

Также в мае мурманским управлением ФАС была признана недостоверной уличная реклама ОАО «Национальный банк «Траст», в которой использовалось изображение Брюcа Уиллиса. Дело было возбуждено по обращению одной из местных жительниц с жалобой на баннеры «Траста» в приемную Президента РФ в Мурманской области. С ее слов, в рекламе говорилось о снижении кредитных ставок до 12 %. Однако, когда женщина обратилась в филиал НБ «Траст», выяснилось, что на самом деле кредиты по таким условиям не предоставляются. Проверяя эту информацию, специалисты УФАС не смогли даже с близкого расстояния прочесть сведения об условиях кредитования, указанные в рекламе крайне мелким шрифтом.

В ноябре Арбитражный суд Тюменской области утвердил штраф суши-ресторану, реклама которого была ранее признана комиссией регионального УФАС ненадлежащей. В своем плакате, по мнению антимонопольного органа, рекламодатель использовал провоцирующую и двусмысленную фразу, сопровождавшую изображение полуобнаженной девушки. Модель в нижнем белье с приложенным к губам пальцем будто бы с гордостью заявляла покупателям: «23 раза смогла заказать суши». При этом часть слогана «23 раза смогла» была выделена с помощью крупного шрифта.

В октябре новгородское УФАС наложило штраф на компанию, замаскировавшую в своих баннерах путем комбинации заглавных и строчных букв непристойное слово, которым рекламодатель призывал покупателей отказаться от поисков более низких цен на обои и обратиться в его фирму. С рекламного плаката потенциальным клиентам так и говорилось: «НЕХочешь ИСКАТЬ ГДЕ ДЕШЕВЛЕ – ИДИ В ТЕТРИС». УФАС сочло, что способ исполнения рекламы (комбинация заглавных (НЕХ-) и строчных (-очешь) букв, а также отсутствие интервала между частями слова) был выбран для того, чтобы в тексте отчетливо просматривалось слово «НЕХ-«. По заключению антимонопольного органа, оно употребляется в ненормативной лексике и, являясь непристойным, воспринимается потребителями как оскорбительное.

Также в октябре челябинским УФАС было признано ненадлежащим рекламное объявление стоматологической клиники, опубликованное на страницах одного из местных СМИ. Реклама привлекала внимание надписью, выполненной крупным шрифтом: «Имп…..ция. Устанавливаем, чтобы стояло». При этом недостающие в первом слове буквы были заменены изображением пяти корон. УФАС пришло к выводу, что подмена пропущенных букв могла ввести потребителей в заблуждение относительно услуги, которую рекламирует стоматология.

Поскольку маркетинг традиционно отделялся от продаж на один шаг, часто бывает очень трудно связать прямые продажи с более широкими маркетинговыми усилиями, которые сосредоточены на таких вещах, как узнаваемость бренда. Однако, когда дело доходит до изучения затрат на SMS-маркетинг и рентабельности инвестиций, этот вопрос может быть несколько менее пугающим.

Почему? Во-первых, стоимость отправки текстового сообщения в маркетинговых целях чрезвычайно низка — обычно от одного до пяти центов за сообщение. Во-вторых, хорошие маркетинговые SMS-кампании имеют очень четкий и измеримый призыв к действию; предприятия пытаются получить регистрацию, погашение купонов, взаимодействие с веб-сайтом или какую-то другую очень конкретную и измеримую цель. И, в-третьих, подписчики, подписавшиеся на получение текстовых маркетинговых сообщений, гораздо более вовлечены и, скорее всего, откроют, прочитают и будут действовать в результате SMS-кампании. Все эти факторы делают расчет затрат на SMS-маркетинг и рентабельность инвестиций более приятным занятием для большинства компаний.

Хотя фактическая стоимость текстового маркетинга очень низка, а отраслевые оценки составляют всего несколько копеек за текст, общая стоимость кампании по маркетингу SMS-сообщений будет включать несколько других факторов, таких как разработка сообщений и стоимость дополнительных маркетинговых кампаний для расширения списка SMS-сообщений. разработка.

Например, если вы начинаете без контактной информации, вам необходимо создать средство для сбора телефонных номеров и получения разрешения на текстовые сообщения клиентам и потенциальным клиентам. Ресторану, возможно, придется инвестировать в настольную кампанию, которая предлагает будущую скидку в обмен на текстовый номер. Вы можете заплатить за проведение кампании по электронной почте или рекламу в социальных сетях для сбора разрешений и данных о подписчиках. Все это влияет на ответ на вопрос, сколько стоит SMS-маркетинг?

Однако этот номер может быть немного обманчивым, потому что ваши расходы на маркетинг текстовых сообщений будут учтены заранее. Всякий раз, когда вы начинаете новую программу SMS-маркетинга, существуют некоторые авансовые затраты на создание кампаний, которые помогут вам составить первоначальный список контактов. Кроме того, вам может потребоваться инвестировать в некоторое программное обеспечение или инструменты и обучить своих сотрудников проводить маркетинговые кампании с помощью SMS. Стоимость кампании SMS-маркетинга этого типа не будет постоянной, что означает, что последующие кампании будут технически менее затратными.

Хорошим практическим правилом является расчет стоимости SMS-маркетинга в расчете на одно сообщение ежеквартально или ежегодно. После того, как эти первоначальные инвестиции будут сделаны, вы сможете постоянно рассчитывать среднюю стоимость сообщения.

Большинство компаний, приступивших к маркетинговой SMS-кампании, обнаруживают, что стоимость маркетинга текстовых сообщений очень низка по сравнению с другими маркетинговыми кампаниями, и в результате они обеспечивают солидный ROI. Вы можете либо просто оценить свои затраты на SMS и полученный доход, либо создать более подробную запись своей статистики, чтобы определить рентабельность инвестиций в SMS-маркетинг.

Если вы проводите SMS-кампанию, цель которой не связана с получением дохода, по крайней мере, в краткосрочной перспективе, вам может быть немного сложнее оценить затраты на SMS-маркетинг и рентабельность инвестиций. По-прежнему полезно ставить такие цели, как увеличение количества подписчиков, повышение рейтинга кликов и сокращение отказов, а затем измерять эти ключевые показатели эффективности.

При расчете рентабельности инвестиций в SMS-маркетинг возьмите общий доход, полученный от кампании, и вычтите общие затраты на текстовый маркетинг для этой кампании. Это предполагает, что ваша маркетинговая SMS-кампания напрямую приносит измеримый доход.

Такие кампании могут включать эксклюзивное приглашение приобрести новый продукт по низкой начальной цене или специальную скидку на будущую услугу. Текстовые кампании можно легко разделить, чтобы вы могли видеть, скольким подписчикам вы распространяете предложение и сколько затем активируете его. Это может быть простой способ увидеть ваши расходы на SMS-маркетинг и рентабельность инвестиций.

Многие другие кампании требуют более высоких первоначальных затрат, таких как покупка места для рекламы в печати, в эфире, в Интернете или на вывесках. Они также обычно включают рекламные фирмы, дизайнеров, творческих писателей, фотографов или видеооператоров, которые часто имеют высокую цену.

В дополнение к более высокой стоимости других методов маркетинга эти другие каналы обычно не очень целенаправленны. Они пытаются охватить большее количество людей; однако сегодня все больше и больше людей отказываются от бомбардировки рекламой вокруг себя.

Например, средний коэффициент конверсии для рекламы в Facebook составляет немногим более 9%, в то время как при просмотре телевизионной рекламы на 5,7% больше шансов совершить покупку, чем при полном отсутствии рекламы. Сравните этот уровень вовлеченности с SMS-маркетингом, где 98% всех текстовых сообщений открываются, а 95% читаются и выполняются в течение трех минут.

Кроме того, вероятность того, что получатели текстовых маркетинговых сообщений воспользуются предложенным купоном, в десять раз выше, чем через другие каналы. Одной из основных причин повышения уровня вовлеченности является то, что подписчики решили подписаться на получение маркетинговых сообщений от определенных компаний. Те, на кого нацелена реклама в большинстве других маркетинговых каналов, этого не сделали. Даже маркетинг по электронной почте, который по-прежнему требует подписки, имеет гораздо более низкие показатели открываемости, чем SMS-сообщения, из-за спам-фильтров и получателей, которые просто получают слишком много сообщений.

DialMyCalls может помочь вам измерить как ваши расходы на SMS-маркетинг, так и рентабельность инвестиций, используя функцию панели инструментов и аналитику. Зарегистрируйте бесплатную учетную запись и попробуйте наш доступный и простой в использовании сервис. Мы упрощаем реализацию маркетинговых SMS-кампаний, позволяя вам за считанные минуты охватить вашу ключевую аудиторию с помощью обычных текстовых маркетинговых сообщений.

Рост числа подписчиков является основой любой успешной программы SMS-маркетинга. Чем больше он растет, тем большую ценность вы получаете. Мы создали самый полный в отрасли набор инструментов для роста числа подписчиков, чтобы максимально увеличить размер вашей аудитории и поддерживать ее рост.

Наши клиенты быстро и последовательно составляют свои списки SMS-сообщений, используя всплывающие окна веб-сайтов, целевые страницы, ссылки для подписки в социальных сетях, настраиваемые QR-коды, формы оформления заказа, короткие коды и сторонние интеграции… с соблюдением требований на каждом этапе пути. .

Наша платформа упрощает взаимодействие с вашими подписчиками с помощью релевантных, персонализированных массовых текстовых сообщений и личных бесед, которые укрепляют лояльность и побуждают к действию. Помимо обмена сообщениями, наше программное обеспечение для SMS-маркетинга предлагает множество инструментов для дальнейшего взаимодействия с вашей аудиторией.

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

Наши возможности сегментации помогают маркетологам персонализировать обмен сообщениями и максимизировать результаты, создавая целевые списки на основе множества факторов, таких как местоположение, возраст, история покупок, поведение кликов и многое другое. Сегментированные кампании всегда лучше и помогают вам получить максимальную отдачу от вашего SMS-маркетинга.

Повысьте эффективность вашего SMS-маркетинга с помощью нашего богатого набора интеграций. Наша платформа для обмена текстовыми сообщениями предлагает более 15 встроенных интеграций и еще более 4000 через Zapier, чтобы помочь расширить ваши списки, получить данные о подписчиках и автоматизировать производительность.

Тысячи маркетологов по всей Северной Америке используют наши интеграции для увеличения доходов от электронной торговли, привлечения потенциальных клиентов, создания списков адресов электронной почты, отправки текстовых сообщений и многого другого.

Каждый клиент важен, и каждое взаимодействие с клиентом имеет значение. Мы нанимаем, обучаем и воспитываем чутких, технических экспертов и фанатичных слуг клиентов. Наши клиенты чувствуют разницу и сообщают нам об этом через наши невероятные оценки удовлетворенности, постоянные добрые слова, лояльность клиентов и случайные подарки, которые они присылают нашей команде.

Не секрет, что все фотографии, для того чтобы их разместить в глянцевых журналах, дорабатывают в фотошопе. В этом очень простом уроке по работе с фотошопом мы легко научимся увеличивать объем волос в фотошопе. Это будет сделано буквально за несколько шагов, используя всего лишь фильтр «Пластика» («Liquify»). Многие боятся работать с этим фильтром пугаясь обилию его настроек, но поверьте этот фильтр обладает просто огромными возможностями и освоив его Вы не сможете представить свою работу в фотошопе без этого фильтра.

Для начала давайте создадим выделенную область волос, с которой будем работать. Это проще всего сделать с помощью рисования в режиме быстрой маски. Выбираем инструмент «Кисть» (В), параметры кисти оставляем по умолчанию, жёсткость устанавливаем на 0%, нажимаем клавишу «D» (для установки чёрного цвета на передний план) и клавишу «Q» (для перехода в режим быстрой маски).

И закрашиваем область волос с которой мы будем работать, примерно так, как Вы видите на скриншоте ниже. Если у Вас настройки быстрой маски стоят не так как у меня, то возможно Вам придётся инвертировать маску — Ctrl+I (чтобы получить результат как у меня).

Поставим примерно такие параметры инструмента, которые Вы видите ниже и для получения эффекта завивки волос, обработаем прическу этим инструментом, чередуя короткие мазки и щелчки с задержкой. Если у Вас волосы закручиваются не в ту сторону, то нажмите и удерживайте клавишу Alt и завивка будет происходить в обратную сторону.

Делаем его копию или снимаем блокировку со слоя. Чтобы создать дубликат слоя нужно зайти во вкладку «Слои» и выбрать «Создать дубликат слоя». Для того, чтобы производить любые изменения с основным слоем, необходимо снять с него блокировку. Для этого нажимаем дважды левой кнопкой мыши по замку на слое, как показано на рисунке.

В «Марионеточной деформации» есть специальные булавки, которыми мы закрепим ту часть головы и лица, которая не должна подвергаться изменениям. Особенное внимание уделите краям изображения, чтобы они не деформировались. Чем больше будет булавок, тем меньше искажений будет на закрепленной области.

Теперь нужно слегка раздвинуть область с волосами, сделав её шире. Для этого удерживая нажатой левую кнопку мыши слегка оттягиваем наружный край с волосами и ставим булавку. Чтобы не было ломанной кривой по линии волос, то нужно ставить меньше булавок.

Но на этом манипуляции по коррекции объема волос не заканчиваются. Можно также прибегнуть к функции прорисовки волос. Для этого нам нужно соединить все слои изображения в одно и лучше всего сделать это следующим образом. Становимся в окне слоев на верхний слой, делая его активным. Далее при помощи инструмента «Прямоугольное выделение» обводим полностью изображение.

У нас получился новый слой со всеми изменениями в одном слое. Далее с помощью инструмента «Кисть» сделаем прорисовку. Выбираем нужный тип инструмента «Кисть», как показано на рисунке, задав минимальную жесткость и размер (диаметр) установив в пределах 3-5 пикселей. Непрозрачность кисти устанавливаем на 30 %.

Увеличиваем изображение, для этого нажав клавишу Alt прокручиваем колесико на мышке (скролинг) вверх. Далее определяем какой участок волос прорисовываем и удерживая нажатой клавишу Alt, левой кнопкой мышки нажимаем на тот участок изображения, цвет которого нам подходит для цвета кисти.

Создаем новый слой, для этого во вкладке «Слои» выбираем «Новый» и далее «Слой». В этом слое рисуем инструментом «Кисть» пряди волос. Выбирая нужный цвет, согласно соответствия рисуем прядки тому участку волос, где она будет располагаться.

Знание того, как увеличивать и уменьшать масштаб в Photoshop, необходимо для более точного редактирования изображений. Функция масштабирования позволяет вам приблизиться к каждому пикселю, чтобы убедиться, что ваши изменения верны. Вот все, что вам нужно знать о том, как увеличивать и уменьшать масштаб в Photoshop, а также дополнительные советы по навигации по документу.

Чтобы быстро увеличить или уменьшить масштаб документа в Photoshop, нажмите Command + +/- (Mac) или Control + +/- (Windows) на клавиатуре. При увеличении вы можете перемещаться по документу, удерживая клавишу пробела, щелкая и перетаскивая, чтобы переместить весь документ в поле зрения.

Хотя это самый простой способ, существует множество других способов использования функции масштабирования, и каждый из них имеет свои преимущества. Метод, который вы используете, скорее всего, изменится в зависимости от вашего проекта. Знание каждого способа масштабирования позволяет вам выбрать правильный метод того, что вам нужно достичь в данный момент.

После того, как вы научитесь масштабировать, также полезно знать, как легко перемещаться по документу, чтобы переходить к другим областям изображения, о которых я расскажу позже в этом уроке. А пока давайте рассмотрим лучшие способы увеличения в Photoshop!

Первый метод позволяет вам увеличивать или уменьшать масштаб в определенных местах изображения, щелкая по области изображения. Чтобы использовать инструмент масштабирования, выберите значок на панели инструментов или нажмите Z .

Инструмент масштабирования позволяет масштабировать все окна, открытые в Photoshop. Каждое изображение будет увеличиваться в одном и том же месте. Чтобы использовать эту функцию, установите флажок рядом с «Увеличить все окна» .

При нажатии на 100% изображение будет автоматически увеличено до 100%, что означает, что каждый пиксель занимает на экране размер одного пикселя. После увеличения на 100% вы можете увидеть все детали изображения. Этот зум также позволяет увидеть, насколько четким будет изображение при печати в полном размере.

Нажатие на По размеру экрана масштабирует изображение до значения, позволяющего видеть все изображение в окне. Это означает, что края не будут обрезаны, и будет видно все изображение. Это вид по умолчанию для изображений при открытии в Photoshop.

Нижний процент можно изменить для увеличения или уменьшения изображения. Нажмите на процент и введите новый процент и нажмите Enter (Windows) или Return (Mac). Изображение автоматически увеличится до этого процента, что даст вам возможность увеличить до точных уровней.

Если вы хотите легко изменить уровень масштабирования, удерживайте Shift при нажатии Enter (Windows) или Return (Mac). Процент останется выбранным, поэтому вы можете просто повторно ввести цифру, чтобы получить правильный уровень масштабирования.

Скользящий ползунок также работает с процентным методом. Чтобы использовать бегунок, удерживайте Control (Windows) или Command (Mac), одновременно нажимая и удерживая процент. Переместите курсор влево и вправо, чтобы увеличить или уменьшить масштаб. Удерживайте Shift , чтобы увеличивать или уменьшать масштаб быстрее.

Вы также можете выбрать другие параметры масштабирования, такие как «По размеру экрана», «По размеру слоя(-ов) на экране», «100%», «200%», «Размер печати» или «Реальный размер» в меню просмотра. Каждый вариант дает разный уровень масштабирования.

Существует несколько сочетаний клавиш для доступа к инструменту масштабирования. Тот, который вы выберете, будет зависеть от того, какой инструмент вы используете или что для вас проще всего. Возможность доступа к инструменту или его использования различными способами позволяет вам использовать инструмент, не нарушая рабочий процесс.

При использовании другого инструмента можно быстро увеличить масштаб, удерживая Control + Space (Windows) или Command + Space . Когда вы нажмете на изображение, оно увеличится, а когда вы отпустите, ваш предыдущий инструмент снова будет в игре.

При использовании другого инструмента вы также можете удерживать Alt (Windows) или Option (Mac) при использовании колеса мыши для прокрутки. Это также будет увеличивать и уменьшать масштаб, не затрагивая инструмент, который вы используете для ускорения рабочего процесса.

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

Если вы используете мышь, вы можете использовать колесо прокрутки для быстрого перемещения вверх или вниз по изображению. Если вы хотите переместить изображение влево или вправо, удерживайте Control (Windows) или Command (Mac) при прокрутке вверх или вниз.

Независимо от того, используете ли вы инструмент масштабирования или сочетания клавиш, в Photoshop существует множество способов увеличения и уменьшения масштаба. Затем с помощью пробела вы можете легко перемещаться по документу, даже если вы не увеличили масштаб в идеальном месте с самого начала.

С выпуском Adobe Photoshop 22.0 в октябре 2020 года Adobe выпустила бета-нейронный фильтр Super Zoom. Super Zoom позволяет пользователю врезаться в человека с разной величиной, а затем использует искусственный интеллект сэнсэя для улучшения фотографии, чтобы устранить деградацию.

Масштаб, как он описывает, позволяет определить как увеличение, так и обрезку. Используя значок +, мы можем увеличить увеличение в 1 раз. При этом ограничивающая рамка вокруг исходного изображения изменяется. Перетаскивание этой ограничивающей рамки определяет общую обрезку изображения.

Следующий флажок предназначен для удаления артефактов JPEG, которые становятся более заметными при увеличении. Файлы JPEG естественным образом сжимаются, и в зависимости от артефактов масштабирование становится все более и более сложным. Включение этой опции при работе с JPEG обычно является хорошей идеей, однако всегда проверяйте, не теряете ли вы качество деталей. У этого есть свой собственный инструмент в списке нейронных фильтров, однако можно увидеть, что он имеет ограниченный успех в зависимости от выбранных изображений и настроек.

Еще одна проблема, возникающая при увеличении, — фокус становится все более и более важным. Чтобы помочь решить любые проблемы с фокусировкой (хотя в камере фокусировка должна быть идеальной, но случаются разные ситуации, и, возможно, увеличение выходит за рамки настройки), Adobe включила инструмент повышения резкости, чтобы помочь смягчить проблемы.

Другой вариант флажка — Enhance Face Details указывает ИИ-сенсею улучшать лицо любого, кого он обнаружит. Я предполагаю, что это связано с тем, что ИИ приходится запускать разные процессы для деталей лица, а не для общих деталей.

Super Zoom — это долгожданная новая функция для всех, кто работал в сфере дизайна. Иногда изображение может не обрезаться, и вам нужно увеличить масштаб. Нейронные фильтры — это шаг вперед для Photoshop, и они будут оставаться источником инноваций в ближайшие годы. Super Zoom — это амбициозное, но долгожданное дополнение к фильтру, которое, мы надеемся, скоро выйдет из бета-версии. Ознакомьтесь с другими нашими статьями об обновлении 22.

Цветные фоны — это не изобретение. Они существуют уже давно. Однако на какое-то время они уступили место обоям, поскольку преобладали изображение, дизайн и т. Д. вместо использования фона с цветом (или с оттенками цветов). Теперь они снова в моде, и по этой причине, если вы дизайнер или просто любите заниматься творчеством, пришло время узнать более тщательно окрашенные фоны.

Цветной фон — это основа, так сказать, состоящая из целого ряда цветов. Это может быть уникальный цвет, например зеленый, синий, красный … или градиентные тона или рисунки, в которых разные цвета смешиваются и комбинируются, создавая уникальный дизайн.

Составить список типов цветного фона было бы практически невозможно, тем более, что их так много, что нужно назвать. Обычно, классификация производится по цвету или дизайну. Например, если он основан на цвете, у вас будет фон в теплых, нейтральных и холодных тонах; или однотонные и пастельные. Вы также можете найти градиентный, размытый или гладкий фон.

Если вы предпочитаете быть более оригинальными и креативными в своих дизайнах и проектах и хотите создать цветной фон с нуля, то мы расскажем вам, какие шаги вам следует предпринять. Для этого мы используем Photoshop, так как это одна из наиболее часто используемых программ профессионалами и дизайнерами. Но в основном во всех программах для редактирования изображений у вас будут одинаковые (или похожие) шаги, чтобы получить желаемый результат.

Откройте программу Photoshop. Вам нужно попросить меня создать для вас новый документ. В этом случае размеры зависят от вас, но, если у вас ничего не определено, лучше всего выбрать размер 1920 x 1080 пикселей. Установите фоновый слой на черный вместо белого.

Наконец, вам просто нужно щелкнуть точку в документе и перейти к другой точке (обычно сверху вниз, снизу вверх или в сторону). Будет создана линия, идущая от одной точки к другой, и когда вы отпустите кнопку мыши, вы увидите, что автоматически будет создан градиент.

Конечно, вы также можете поэкспериментировать, и с градиентом вы получите небольшое меню в верхней части Photoshop, где вы можете выбрать разные градиенты, а также стили градиента, его режим наложения, непрозрачность, а также другие детали, которые могут изменяться весь результат.

Excel для Microsoft 365 Word для Microsoft 365 Outlook для Microsoft 365 PowerPoint для Microsoft 365 Access для Microsoft 365 Publisher для Microsoft 365 Visio Online (план 2) Excel для Microsoft 365 для Mac Word для Microsoft 365 для Mac Outlook для Microsoft 365 для Mac PowerPoint для Microsoft 365 для Mac Excel 2021 Word 2021 Outlook 2021 PowerPoint 2021 Access 2021 Microsoft® Project профессиональный 2021 Publisher 2021 Microsoft Visio профессиональный 2021 Microsoft Visio стандартный 2021 OneNote 2021 Excel 2021 for Mac Word 2021 for Mac Outlook 2021 for Mac PowerPoint 2021 for Mac Excel 2019 Word 2019 Outlook 2019 PowerPoint 2019 Access 2019 Project профессиональный 2019 Publisher 2019 Visio профессиональный 2019 Visio стандартный 2019 Excel 2019 для Mac Word 2019 для Mac Outlook 2019 для Mac PowerPoint 2019 для Mac Excel 2016 Word 2016 Outlook 2016 PowerPoint 2016 Access 2016 OneNote 2016 Project профессиональный 2016 Publisher 2016 Visio профессиональный 2016 Visio стандартный 2016 Excel 2016 для Mac Word 2016 для Mac Outlook 2016 для Mac PowerPoint 2016 для Mac Excel 2013 Word 2013 Outlook 2013 PowerPoint 2013 Access 2013 OneNote 2013 Project профессиональный 2013 Publisher 2013 Visio профессиональный 2013 Visio 2013 Project для Office 365 Еще. ..Меньше

Эта функция доступна только подписчикам Microsoft 365 для классических клиентов Windows.

Для темного режима (AKA «Ночной режим») необходимо изменить параметр в системных настройках macOS. Щелкните меню Apple в левом верхнем углу, выберите Системные настройки > Общие , а в верхней части диалогового окна можно переключить macOS с светлого на темный.

Если вы хотите оставить темный режим включенным для вашей ОС, но хотите отключить его для отдельных приложений Microsoft 365, перейдите в параметры приложения (например, Параметры Word>) и на вкладке Общие найдите группу Персонализация . Там вы найдете отключить темный режим. Обратите внимание, что этот параметр влияет только на текущее приложение, поэтому, если вы хотите, чтобы оно было отключено в Word и Excel, например, вам потребуется повторить этот шаг в каждом из этих приложений.

 корпус {
    фон: #fff;
    }
    главный {
    положение: родственник;
    высота: 250 пикселей;
    }
    основной :: после {
    содержание: '';
    фон: серый;
    положение: абсолютное;
    ширина: 35%;
    высота: 100%;
    справа: 0;
    сверху: 0;
    }
    основной .контейнер {
    z-индекс: 1;
    положение: родственник;
    }

 <тело>
    <заголовок>
    
    
    <основной>
      <дел>
        <дел>

Лучшие презентации | Секция «Прикладная математика» Институт прикладной математики и механики СПбПУ

С июня 2011 года коллектив кафедры принял решение о публикации лучших презентаций на сайте.

Основными критериями отбора являются наличие у соискателя рекомендации в аспирантуру или диплома с отличием, учитывается также степень успешности защиты работы.

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

Год	ФИО соискателя	Название работы	Размер	Файл
2018	Гаврилов Андрей Олегович	Сравнение прогнозных моделей для нестационарных временных рядов, наблюдаемых на валютных рынках	3.95 MB
2018	Елисеев Артем Андреевич	Решение задач двумерной гидродинамики вихревыми методами	1. 36 MB
2018	Кореневская Мария Максимовна	Исследование моделей приоритетного обслуживания с вероятностным выталкивающим механизмом при наличии повторных требований	2.96 MB
2018	Никулин Всеволод Алексеевич	Сравнительный анализ алгоритмов нахождения оптимальной функции управления рулевым колесом автомобиля с реалистично моделируемыми задержками в управлении	2.39 MB
2018	Пестова Наталья Николаевна	Оптимизация налоговой учетной политики предприятия	866 КB
2018	Позигун Михаил Владимирович	Алгоритм и программная реализация метода быстрого распространения контура для решения задачи полуавтоматической сегментации медицинских изображений	893 КB
2017	Алексеева Наталья Михайловна	Алгоритмы восстановления изображения в позитронно-эмиссионной томографии с применением адаптивной сетки	1. 85 MB
2017	Александров Алексей Дмитриевич	Разработка быстрого алгоритма для составления расписания шлюзованного участка судоходного канала	981.35 KB
2017	Кацман Виктор Игоревич	Алгоритм автоматической проверки правильности преобразований комбинаторных выражений	358.2 KB
2017	Крашенинников Александр Сергеевич	Исследование модели естественного языка, как эволюционирующей сети, с использованием NoSQL системы управления базами данных	658.46 KB
2017	Кутузов Антон Валерьевич	Изучение оценок фрактальных размерностей детерминированных слагаемых аддитивных моделей процессов, регистрируемых в транскраниальной допплерографии	1006. 46 KB
2017	Плеханова Елена Сергеевна	Использование Transfer learning для выявления вредных мутаций в белках млекопитающих	882.76 KB
2017	Черткова Александра Александровна	Моделирование динамики распространения транспозонов в геноме человека в норме и патологии	1.33 MB
2017	Шагал Александра Александровна	Робастное оценивание параметров многомерного нормального закона	1.1 MB
2016	Савчук Даниил Александрович	Управление объемной визуализацией с помощью функций передачи	1003.27 KB
2016	Стефанова Мария Владимировна	Методика определения движения райзерной системы	4. 6 MB
2015	Виноградов Алексей Кириллович	Разработка масс-пружинной модели мягких тел для тренажера хирурга	1.22 MB
2015	Шелудько Елизавета Эдуардовна	Построение алгоритмов для анализа и улучшения качества геномных сборок	1.14 MB
2015	Вердина Мария Константиновна	Алгоритм распознавания клеточных структур на снимках электронного микроскопа	1000.61 KB
2015	Советников Максим Олегович	Робастные оценки параметра масштаба и коэффициента корреляции нормального распределения	1.41 MB
15.	2015	Чистякова Ольга Игоревна	Развитие функционального подхода к контролю точности решений задач об изгибе стержней Тимошенко	1. 02 MB
2015	Давыдов Роман Вадимович	Математическое моделирование взаимодействия фемтосекундных лазерных импульсов с металлами	1004.47 KB
2015	Терских Анастасия Владимировна	Анализ мутанционного ландшафта пациентов с хроническим миелейкозом	1.15 MB
2015	Дымова Арина Викторовна	Математическая модель динамики экспрессии генов gap в эмбрионе плодовой мушки, учитываюшая сайты связывания транскрипционных факторов	1.73 MB
2014	Шварц Андрей Германович	Нелинейные продольные волны в тонких упругих цилиндрических оболочках	1.03 MB
2014	Иголкина Анна Андреевна	Разработка метода предсказания процентного содержания типов клеток в образцах крови человека	912. 38 KB
2014	Якунин Сергей Александрович	Исследование эффективности методов внутренней точки при решении специального класса контактных задач	1.29 MB
2014	Ряховский Алексей Игоревич	Численное моделирование сильноточных разрядов, инициированных электрическим взрывом проводников	980.36 KB
2014	Андреев Станислав Андреевич	Математическое моделирование сети генов гэп в дрозофиле в условиях изменчивости материнских факторов	1.78 MB
2014	Рубцов Александр Олегович	Моделирование турбулентных течений на вращающемся диске и сравнение с экспериментом	1.57 MB
2014	Гуревич Елена Петровна	Оценка индивидуальных параметров моделей фармакокинетики антигемофильных глобулинов	1021. 99 KB
2014	Лейзарович Екатерина Викторовна	Модуль для обучения решению задач по курсу «Дискретная математика»	1.3 MB
2014	Дубовой Евгений Владимирович	Индикатор состояния фьючерсного рынка	984.77 KB
2014	Терентьев Алексей Борисович	Исследование методов генерации защищенного машинного кода	517.93 KB
2012	Курц Валентина Валерьевна	Математическое моделирование автомобильного трафика в транспортных тренажерах	576.51 KB
2012	Дук Мария Алексеевна	Моделирование динамики регуляторных контуров с миРНК на малых временах	2. 23 MB
2012	Фишков Александр Александрович	Использование истории интернет-поиска для улучшения его качества	880.1 KB
2012	Шпартько Полина Викторовна	Численное моделирование и анализ задач теплопроводности применительно к тепловому неразрушающему тестированию	840.7 KB
2012	Кириллова Юлия Павловна	Разработка генератора виртуальных машин для предотвращения обратного проектирования программного обеспечения, поставляемого в виде машинных кодов	607.17 KB
2012	Кононова Анастасия Геннадиевна	Построение набора регулярных грамматик для реализации генератора виртуальных машин на произвольном вычислительном устройстве	1. 24 MB
2012	Чуканов Вячеслав Сергеевич	Анимация, обработка взаимодействия с объектами и визуализация травяного покрова в реальном времени	757.85 KB
2012	Мацулевич Светлана Викторовна	Гарантированные оценки для задач линейной алгебры и класса итерационных методов Пикара-Линделефа	537.24 KB
2012	Сапожников Герман Александрович	Разработка алгоритма автоматического построения иерархий из набора данных для классификации документов	1.58 MB
2012	Любомищенко Николай Сергеевич	Алгоритмы робастного оценивания спектральных характеристик сигналов и их использование	396.02 KB
2011	Чурилова Мария Александровна	Адаптация сеток на основе функциональных апостериорных оценок с аппроксимациями Равьяра-Тома	35. 1 MB
2011	Бурков Денис Игоревич	Визуализация рельефа местности визуально равноплотными сетками	1.09 MB
2011	Родионова Ольга Петровна	Исследование задачи склейки ориентируемых поверхностей из многоугольников	315.91 KB
2011	Гула Игорь Александрович	Моделирование экспрессии генов сегментации в раннем развитии эмбриона дрозофилы	698.07 KB
2011	Канжелева Ольга Юрьевна	Полиномиальная интерполяция над кольцами вычетов Z/nZ	165.63 KB

Лучшие презентации стартапов на Slideshare. Часть 1

Марк Хлынов, CEO креативного презентационного агентства esPrezo — рассматривает презентации IT-компаний и комментирует их.

Airbnb

Airbnb Pitch Deck from The Awesome Pitch Co

Почему эта презентация так хороша? В её дизайне нет ни лишней информации, ни декораций. Только минимально необходимые тезисы и их простейшее графическое представление. Все как по Джобсу, в стиле дзен-презентации. Ее концепция, кстати, принадлежит Гарру Рейнолдсу, автору одной из лучших книг по дизайну презентаций «Презентация в стиле Дзен».

Еще раз обратите внимание, насколько слайды Airbnb просты. Либо несколько тезисных предложений, либо схема 2×2 (кстати, такая же схема была и на презентации iPhone в 2007 году), либо пара статистических фактов в текстовом или визуальном формате. Ни одного слайда с более чем тремя смысловыми блоками кроме последнего. Идеальный формат питча для выступления на публике.

Что можно улучшить?

— Убрать с первого слайда нумерацию (да и на остальных слайдах) и фразу «Welcome» (титульный слайд никогда не нумеруют, его цель — впечатлять аудиторию, задать ожидания).

— Вместо текущего заголовка в формате «Market», «Competition» тезисно сформулировать идею слайда в одном коротком предложении. Например, «Наш сегмент рынка пустует», «Рынок составляет 100 миллионов долларов».

— Использовать цвет для создания фокуса на слайдах. В текущем формате основным голубым цветом Airbnb рисуется практически все, что не оставляет места для выделения ключевой мысли. Кажется, что шапка слайда является наиболее важной частью, что, конечно, не так. Нужно выделять цветом наиболее существенные элементы «тела» слайда, где содержится основная информация.

Dish.fm

Dish.fm presentation — launch of iPad from Zhanna Sharipova

Очень качественная презентация российского стартапа. Идеально гармонирующие между собой шрифты для заголовков и основного текста, светло-зеленый цвет бэкграунда и сочные фотографии, подчеркивающие тематику питч-дэка — листать презентацию приятно.

Но, пожалуй, важнее то, что на каждом слайде есть фокус — одна идея на слайд и одно средство визуализации в ее поддержку (изображение, схема или кастомизированная фоновая иконка. В целом, это как раз та презентация, в которой все предельно просто, но при этом очень красиво — можно брать за пример.

Tealet

Tealet — DRINK THE TEA from 500 Startups

В отличие от презентации Airbnb у Tealet есть красочная визуальная концепция слайдов. Она подчеркивает идею стартапа: начиная от изображения чайных полей на бэкграунде и заканчивая цветовой палитрой в зеленых тонах. На слайдах есть четкий порядок — ключевой месседж и его визуализация: схемы для объясняющего материала и изображения, чтобы впечатлить аудиторию.

Особенно хорошо получилось использовать пиктограммы. Вместо тяжелого для восприятия текста в стиле буллет-поинтов и непонятных схем использованы иконки, которые облегчают понимание идей.

Кстати, эту презентацию для стартапа Tealet делали наши знакомые из презентационного агентства Empowered Presentations.

Cadee

Cadee from 500 Startups

Сразу видно, что у ребят в команде есть крутой дизайнер. Иначе как объяснить, что вы с первого слайда считываете, в какой отрасли работает стартап? Слайды стилизованы под игровое поле (травяная текстура на бэкграунде), белый цвет напоминает мячик для гольфа — контекст задан отлично.

Блоки презентации (why golfers, бизнес-модель, доминирование на рынке) начинаются с единого стилизованного слайда, что помогает ориентироваться в её структуре.

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

Одна из отличительных особенностей презентации в том, что соблюден принцип порядка. Текстовые блоки и графические объекты выравнены относительно друг друга, текстовая информация выравнена преимущественно по центру, что, с учетом небольшого объема материала, смотрится хорошо.

Единственный минус в скриншотах: на них слишком много информации, нет фокуса. Это сбивает с толку и делает слайды сложными для восприятия.

Subscrea

Subscrea Pitch Deck from The Awesome Pitch Co

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

Закрепленный заголовок помогает с самого начала уловить идею. Хотя не всегда заголовок сделан в формате короткого и ясного предложения — много слайдов с бесполезными «вехами» («Solution», «Marketing Strategy»). При этом композиция на каждом слайде построена по-своему: элементы выравнены то по центру (слайд с конкурентной средой), то центр пустует (слайд с объектами продажи по подписке), то и вовсе по левому краю (слайды с маркетинговой стратегией, бизнес-моделью, основным вехами). Также стоит отметить, что разноформатные иконки (в данном случае рельефные значки и плоские логотипы) конфликтуют между собой, когда представлены на одном слайде, особенно если их очень много — в этом случае лучше использовать либо только флэт иконки, либо только объемные, чтобы соответствовать заданному единому стилю.

ResumUP

ResumUP from webready

Уникальный случай, когда вся презентация — это набор скриншотов. Обычно скриншоты как раз-таки убивают слайды, но не в случае с ResumUP, у которых вышла просто супер-история — одно только раскрытие проблемы чего стоит! Слайды с инфографикой могут показаться слегка сложными для восприятия, но презентация, очевидно, создавалась сугубо для выступления с расчетом на комментирование голосом каждого вижуала.

Кстати, хороший пример, когда не нужны скриншоты, ни слайды — презентация Uber Conference на TechCrunch.

Biogrify

Biogrify Pitch Deck from The Awesome Pitch Co

Визуальная концепция презентации подчеркивает идею стартапа: яркая цветовая палитра, необычные шрифты, эмоциональные фотографии и пёстрая инфографика передают атмосферу креативной коммуникации и социальных сетей.

Однако ввиду отсутствия фокуса на слайде месседж не всегда ясен: хэдлайны теряются среди прочей информации, изобилие цветов, форм и размерности текста делают слайды тяжелыми для восприятия и лишь декорируют их. Подобный формат может подойти в случае рассылки презентации по почте или размещения на Slideshare, когда людям свойственно «разглядывать слайды» (как инфографику). В случае же презентации для выступления — глаза будут разбегаться.

Top That

Top That Pitch Deck from The Awesome Pitch Co

Это стартап-питч на основе сайта, изначально разработанного в виде презентации. Визуальная концепция очень контрастна: слайды имеют нейтральный серый бэкграунд, а при оформлении текста и пиктограмм используются яркие цвета. Перемещение между элементами структуры помогает отслеживать навигационная панель, расположенная в верхней части слайда — отличное решение для экономии пространства и ориентирования аудитории, в какой части презентации она находится.

Минусами являются частое рандомное равнение элементов относительно друг друга, отсутствие всяких границ при наполнении слайда, а самое главное — отсутствие фокуса: большое количество цветов и форм дезориентирует — и ключевой месседж нередко теряется.

Кстати, Top That далеко не единственный сайт с интерфейсом, разработанным в виде презентации. Этот подход набирает популярность: можно также посмотреть на сайты Piffle, Piccsy, Duxter.

10 самых влиятельных презентаций даже с учетом

Влиятельные презентации оказывают влияние – на человека, на аудиторию, в глобальном масштабе. Стили, голоса и содержание могут различаться, но вдохновляющая природа презентаций одна и та же. Все они представляют что-то влиятельное. Идея изменить отношение. Организация, меняющая жизнь. Продукт, который изменит мир.

Шесть принципов влияния содержат рекомендации, которые вы действительно можете изучить и которым следуете, чтобы создать успешную презентацию. Различные другие теории также обрисовывают формулу. Однако самые мощные презентации просто вдохновлены. Они захватывают аудиторию, будь то замечательные докладчики или замечательные идеи — обычно и то, и другое. Читайте вперед для некоторых из наших самых любимых.

Шерил Сэндберг – Почему у нас слишком мало женщин-лидеров

Многие из самых влиятельных презентаций всех времен – это выступления на TED. Центральный принцип «идеи, достойные распространения» вдохновляет каждое слово и каждого говорящего. Они чрезвычайно популярны и бесплатны для просмотра онлайн, а это означает, что эти концепции находят отклик у миллиардов людей во всем мире. Мы создали краткое руководство о том, как использовать презентации TED Talks при создании следующей презентации.

Эту презентацию Шерил Сэндберг просмотрели более семи миллионов человек. В нем рассматривается большая проблема небольшого процента женщин-лидеров в бизнесе и других профессиях. Это семь миллионов человек, вдохновленных поддержкой расширения прав и возможностей женщин, — семь миллионов человек, на которых повлияла одна презентация.

Эрик Шмидт – Как работает Google

Как работает Google из Эрик Шмидт

«Как работает Google» – любимая презентация на популярной платформе SlideShare. Его влияние исходит от его создателя Эрика Шмидта, бывшего генерального директора и исполнительного председателя Google. Честный совет от топ-лидера компании вдохновил миллионы деловых людей, особенно тех, кто начинает свой собственный стартап.

Демонстрирует потенциал презентаций PowerPoint — даже без выступающего вживую. Его простой, но увлекательный характер раскрывает некоторые из лучших и самых творческих методов презентации: короткие фрагменты текста, рассказ из комиксов и красочные иллюстрации.

Стив Джобс. Знакомство с Macintosh

Одна из самых влиятельных презентаций всех времен раскрыла революционное изобретение Стива Джобса, когда он представил Macintosh в 1984 году. чтобы доказать потенциал ПК и поощрить многообещающие результаты компании.

Вдохновила и сама презентация. Стив Джобс рисковал своей карьерой ради этого творения. После многих лет напряженной работы он, наконец, сделал огромный шаг вперед в современную технологическую эру – и представил все это оригинально и увлекательно.

Стив Джобс – Представляем iPhone

Скачок вперед 23 года, и Стив Джобс продолжает влиять на современные технологии с введением iPhone в 2007 году. Эта презентация показала один из самых влиятельных продуктов всех времен. Это изменило то, как мы общаемся в повседневной жизни. Это также сделало Apple ведущей компанией в области современных технологий и закрепило за Стивом Джобом репутацию лучшего генерального директора всех времен.

В этой знаменитой программной речи Джобс провозгласил футуристическое видение, которое многим показалось надуманным — портативный компьютер, который поместится в вашем кармане. Тем не менее, с появлением iPhone 7 менее чем через десять лет это видение стало вполне возможным. Он привлекает свою аудиторию не только невероятным продуктом, но и визуально привлекательным и захватывающим стилем.

Тони Роббинс – Сила убеждений

В «Силе убеждений» Роббинс использует единственный простой инструмент – доску и ручку. Он в первую очередь очаровывает слушателей языком тела; используя активные жесты и уверенную речь.

Как и в случае с выступлениями Теда, Роббинс популяризировал мотивационные презентации. Больше не ограничиваясь деловыми людьми и профессионалами, каждый может оценить его совет и применить его к аспекту своей жизни. Он создал различные влиятельные презентации, но его новаторский стиль презентации является самым влиятельным из всех.

Дэн Пинк. Загадка мотивации

Презентация Дэна Пинкса «Загадка мотивации» входит в десятку самых просматриваемых выступлений Теда. Достигнув 18 миллионов человек, он вдохновил на изменение бизнес-мышлений во всем мире. Его свежие идеи могут влиять на всю структуру компании, в том числе на стимулы и мотивацию сотрудников.

Отказавшись от традиционных систем вознаграждения, он вместо этого поддерживает новый акцент на внутренней мотивации. Прислушиваясь к личным историям сотрудников, предприятия могут добиться успеха благодаря индивидуальным стимулам изнутри, что в конечном итоге принесет пользу всем.

Гэвин МакМахон – 22 правила феноменального сторителлинга

22 правила Pixar феноменального сторителлинга из Гэвин МакМахон

Самые влиятельные интеллектуальные и игривые презентации вдохновляют не только деловых людей, но и творческие умы. Презентация Pixar «22 правила феноменального сторителлинга» нравится обоим. Разные стили текста и веселые иллюстрации создают уникальную и запоминающуюся индивидуальность.

Эта презентация обещает вдохновить писателей и творческих людей во всем мире. В нем содержатся ценные и применимые советы от самой Pixar — вероятно, самой успешной компании по сторителлингу всех времен.

Скотт Харрисон – Благотворительность: Презентация воды

Что может быть более влиятельным, чем представление совершенно нового отношения и подхода к благотворительности? Это именно то, что делает Скотт Харрисон, продвигая свою организацию Charity: Water. Эмоциональной и честной речью он вызывает сочувствие и щедрость у своей аудитории.

Он создает презентацию, чтобы вдохновить на изменения, используя яркие визуальные эффекты, шокирующие изображения и душераздирающие видео. Такие влиятельные выступления сработали — с 2007 года Харрисон помог собрать более 100 миллионов долларов для Charity: Water.

Empowered Presentations – Дым, удобная правда

ДЫМ – Удобная правда [1-е место в конкурсе на лучшую презентацию в мире] от Empowered Presentations страстная цель и активное сообщение. В 2010 году он занял первое место в конкурсе «Лучшая презентация мира». Как и во всех лучших презентациях, в этой PowerPoint рассказывалась история. Он также сохранял одну идею для каждого слайда и использовал мощные визуальные эффекты.

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

Эми Тан – Где прячется творчество?

Стиль Эми Тан похож на стиль других великих ораторов, поскольку она использует яркие образы, юмор и повествовательный голос. Однако эта презентация уникальна тем, что вместо того, чтобы представить нам целостную и завершенную идею, она вызывает вопросы у своей аудитории. Следуя ее личной истории, мы задаемся широким и влиятельным вопросом: что такое творчество? И как я могу получить к нему доступ внутри себя? Иногда самые влиятельные презентации ставят вопрос, а не ответ.

Вдохновитесь этим списком успешных докладчиков. Учитесь на примере и создавайте собственное влияние с помощью презентаций.

23 действительно работающих примера презентаций (плюс шаблоны!)

От Тони Роббинса до выступлений на TedX — нельзя игнорировать силу хорошо сделанной презентации. Это один из лучших способов связаться с аудиторией, изменить восприятие и продать товары и услуги.

Чтобы помочь вам в вашем стремлении к совершенству презентации, мы собрали 23 лучших примера бизнес-презентаций. Эти тщательно подобранные идеи варьируются от бизнес-презентаций PowerPoint до презентаций по подбору персонала и всего, что между ними.

В качестве бонуса некоторые из наших примеров включают редактируемые шаблоны видеопрезентаций от Biteable.

Biteable позволяет любому создавать великолепные видеопрезентации — никаких предварительных навыков создания видео не требуется. Простая в использовании платформа содержит сотни фирменных шаблонов и видеосцен, разработанных с учетом бизнес-аудитории. Видео, созданное с помощью Biteable, — это именно то, что вам нужно, чтобы добавить этот вау-фактор и оказать влияние на вашу аудиторию.

Примеры видеопрезентаций

Видеопрезентации — наша специализация в Biteable. Мы любим их, потому что они являются наиболее визуально привлекательным и запоминающимся способом общения.

1. Анимированные персонажи

Наш первый пример презентации — бизнес-объяснение от Biteable, в котором используются анимированные персонажи. Дружелюбный и современный стиль делает эту презентацию идеальной для привлечения вашей аудитории.

Шаблон бонуса: Нужна бизнес-видеопрезентация, отражающая прекрасное разнообразие ваших клиентов или команды? Используйте рабочие сцены Biteable. Вы можете изменить оттенок кожи и цвет волос для любого из анимированных персонажей.

2. Видео конференции

Видео также являются идеальным решением для мероприятий (например, торговых выставок), где их можно зацикливать для постоянного воспроизведения, пока вы занимаетесь более важными вещами, такими как общение с людьми и раздача бесплатных образцов сыра.

Для этого примера презентации мероприятия, приведенного ниже, мы использовали яркие цвета, видеоматериалы и сообщения, отражающие бренд и ценности компании. Все эти элементы работают вместе, чтобы привлечь внимание прохожих.

Огромный выбор шаблонов видеопрезентаций можно найти в нашей галерее шаблонов.

Примеры презентаций Business PowerPoint

Вселяя страх в сердца сотрудников с 1987 года, PowerPoint является синонимом пресных, скучных презентаций, которые больше похожи на испытание на выносливость, чем на возможность обучения. Но так не должно быть. Ознакомьтесь с этими примерами бизнес-презентаций PowerPoint.

3. Советы по дизайну

В этой презентации PowerPoint иронично рассматривается проблема выступающих и пользователей PowerPoint, а не самой программы.

Даже при внушительных 61 слайде винтажная тема, привлекательные цвета и привлекательный контент поддерживают интерес зрителя. Он содержит полезные и действенные советы по созданию лучшего опыта для вашей аудитории.

У тебя плохо с PowerPoint! от @jessedee из Джесси Дежарден — @jessedee

4. Pixar

Pixar, как и следовало ожидать, переопределяет значение PowerPoint в своих «22 правилах феноменального сторителлинга». Силуэты персонажей мгновенно узнаваемы и тесно связаны с брендом Pixar. Яркие цветовые палитры тщательно подобраны, чтобы подчеркнуть содержание каждого слайда.

Эта презентация имеет хорошую длину, в ней содержится одно сообщение на слайде, что позволяет аудитории легко делать заметки и запоминать информацию.

22 правила Pixar для феноменального повествования from Gavin McMahon

Примеры слайдов Google

Если вы занимаетесь бизнесом, скорее всего, вы сталкивались с наборами слайдов. Подобно колоде карт, каждый слайд играет ключевую роль в общей «колоде», создавая всестороннюю презентацию.

Если вам нужно проинформировать свою команду, представить результаты или наметить новую стратегию, слайды — один из самых эффективных способов сделать это.

Google Slides — один из лучших способов создать презентацию прямо сейчас. Он прост в использовании и имеет встроенные инструменты дизайна, которые интегрируются с Adobe, Lucidchart и другими. Самое приятное — это бесплатно!

5. Обучение учителей

Вот подборка слайдов, созданная для обучения учителей тому, как эффективно использовать Google Slides в классе. На первый взгляд это кажется скучным и деловым, но если вы присмотритесь, станет очевидно, что создатель хорошо знает свою аудиторию, добавляя удобный для учителей контент, который обязательно вызовет улыбку.

На слайдах представлены скриншоты и практические советы о том, как учителя могут использовать программное обеспечение, чтобы немного облегчить себе жизнь и в то же время обучать своих учеников.

Креативные способы использования слайдов Google (обновление 2017 г.) от Джеффри Брэдбери

6. Информатор о благотворительности

Следующая презентация Google предназначена для повышения осведомленности о приюте для животных. У него простой и понятный обмен сообщениями, и он использует пушистых друзей, которых спасает, чтобы тянуть за сердечные струны и поощрять пожертвования и усыновления от своей аудитории.

Совет для профессионалов: Создавать презентацию — это увлекательно, но и немного сложно. Легко чувствовать себя подавленным, особенно если от этого зависит успех вашего бизнеса или некоммерческой организации. Ознакомьтесь с нашими советами, чтобы узнать, как сделать выдающуюся презентацию.

Примеры презентаций Prezi

Если вы еще не сталкивались с Prezi, это отличная альтернатива использованию статических слайдов. Находясь где-то между слайдами и видеопрезентацией, он позволяет импортировать другой контент и добавлять движение, чтобы сделать просмотр более привлекательным.

7. Резюме мероприятия Red Bull

Этот Prezi был создан для документирования трюка со свободным падением Red Bull в стратосфере несколько лет назад. Он аккуратно фиксирует все, на что способен Prezi, включая вставку видео и эффект масштабирования, который придает анимированный, почти трехмерный эффект тому, что в противном случае было бы неподвижным изображением.

Prezi ежегодно присуждает награды за лучшие образцы презентаций за год. Следующий пример — один из победителей 2018 года. Это было сделано, чтобы выделить новый инструмент Logitech.

8. Запуск Logitech Spotlight

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

Примеры презентаций по продажам

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

9. Видео-презентация по стимулированию продаж

В сегодняшней быстро меняющейся среде продаж вам нужен способ сделать презентации, посвященные продажам, запоминающимися и привлекательными для занятых торговых представителей. Видео, способствующие продажам – это только билет. Используйте этот шаблон видеопрезентации в следующий раз, когда вам нужно будет представить свои показатели.

10. Торговая колода Zuroa

Если вы ищете продающую колоду, вы не можете пройти мимо этого примера от Zuora. Что делает его великолепным? Он начинается с представления глобального изменения в том, как потребители совершают покупки. Это глобальное явление, с которым мы все можем иметь дело.

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

Zuora Sales Deck from Ryan Gum

Примеры презентаций

Презентации используются для обзора бизнес-планов и обычно представляются во время встреч с клиентами, инвесторами или потенциальными партнерами.

11. Презентация Uber

Это оригинальная презентация Uber, которая (помимо того, что она выглядит немного устаревшей) дает отличный обзор их бизнес-модели и ясно показывает, как они намеревались разрушить традиционную отрасль и обеспечить лучшее служение людям. Прямо сейчас вы, вероятно, очень благодарны за то, что эта презентация прошла успешно.

Презентация Uber от Donatella Cambosu

Вы можете создать собственную презентацию с помощью Biteable или начать с одного из наших шаблонов видео, чтобы сделать что-то более запоминающимся.

12. Шаблон видеопрезентации

Эта видеопрезентация четко говорит о проблемах всех, кому необходимо добираться до работы и искать парковку. Затем он предоставляет решение с помощью своего приложения, которое упрощает парковку.

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

13. Презентация Fyre Festival

Самый эпический пример недавней презентационной колоды — это презентация для Fyre Festival — величайшего события, которого никогда не было. Удивляйтесь его убедительности, задыхайтесь от возможности стать частью культурного опыта десятилетия, съеживайтесь, когда все становится все хуже и хуже.

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

Fyre Festival — The Pitch Deck от Джош Кинг

Примеры бизнес-презентаций

Нужно донести правильное сообщение до нужных людей? Бизнес-презентации могут сделать для вас большую работу.

Просто нажмите кнопку воспроизведения, и пусть ваше видео говорит за вас. Не нужно возиться со словами и потеть перед потенциальными клиентами, просто будьте круты, как огурец, пока ваша презентация говорит за вас.

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

14. Шаблон бизнес-введения

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

15. Шаблон бизнес-объяснения

Примеры презентаций исследований

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

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

При часто сухом, сложном и техническом материале может возникнуть искушение для презентаций последовать их примеру. Используйте изображения вместо стен текста и делайте все как можно проще.

16. Исследовательская колода TrackMaven

TrackMaven использует свой симпатичный талисман, чтобы облегчить эту презентацию с большим объемом данных. Графики помогают оживить их выводы, и они гарантируют, что на слайде будет только один небольшой вывод, чтобы зрители могли легко делать заметки.

Полное руководство по оптимальному времени для публикации в социальных сетях (и не только!) от TrackMaven

17. Отчет об исследовании носимых технологий

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

Отчет об исследовании носимых технологий: устройства и одежда. из Яркий шум

Примеры презентаций команды

Мотивация вашей команды может быть сложной задачей даже в самые лучшие времена, особенно когда вам нужно собрать их вместе для… очередной презентации!

18. Шаблон обновления команды

Мы создали этот шаблон презентации как пример того, как вовлечь вашу команду. В данном случае это внутренний запуск продукта. Используя красочную анимацию и увлекательный темп, эта видео-презентация намного лучше, чем статичная PowerPoint, верно?

19. Объяснение совместной работы Officevibe

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

Секреты отличной команды от Элоди А.

Примеры презентаций по набору персонала

Набор нужных людей может быть проблемой. Презентации могут помочь представить вашу команду и ваш бизнес, рисуя динамическую картину того, каково это работать с вами.

Видеоролики и анимированные слайды позволяют передать суть вашего бренда и рабочего места, чтобы нужные сотрудники могли вас найти.

20. Разъяснитель корпоративной культуры

Если вы кадровое агентство, ваша задача — выделиться среди сотен других агентств на рынке.

21. Культура кайдзен

Демонстрация вашего агентства с помощью слайдов может дать работодателям и сотрудникам возможность вести с вами дела. Кайдзен четко демонстрирует свою репутацию и подчеркивает здесь ценности и индивидуальность своего бренда (а также свою высокую оценку кофейных зерен).

Набор слайдов Кайдзен из Пол Уилер

Примеры презентаций объяснения

Есть объяснения? Использование объяснительного видео — это идеальный способ продемонстрировать технические, цифровые или иные продукты, которые слишком сложно объяснить с помощью неподвижных изображений и текста.

Объяснительные видеоролики помогут вам представить характеристики и преимущества вашего продукта в увлекательной форме, которая обращается к вашей идеальной аудитории и в то же время продвигает ваш бренд.

22. Образец объяснения продукта

23. Объяснитель Lucidchart

Lucidchart отлично справляется с использованием обучающих видеороликов для своего программного обеспечения. Их серия объяснителей-внутри-объяснений развлекает зрителя милыми образами и очаровательным голосом бренда. В то же время видео обучает аудиторию тому, как использовать реальный продукт. Мы (почти) гарантируем, что вы еще больше полюбите пауков после просмотра этого фильма.