Как сделать лого по центру
Выравнивание логотипов средствами CSS
Если вы занимаетесь фронтенд-разработкой, то вам, возможно, приходится создавать разделы сайтов, содержащие логотипы каких-то компаний. На первый взгляд эта задача может показаться очень простой. Но, когда дело доходит до выравнивания и центровки логотипов, выясняется, что всё сложнее, чем кажется. Кроме того, тут стоит сказать о том, что изображения логотипов могут иметь разные размеры, и о том, что некоторые логотипы имеют вертикальную ориентацию, а некоторые — горизонтальную.
В этом материале я собираюсь рассмотреть различные способы размещения группы логотипов на странице, различные подходы к их качественному выравниванию средствами CSS. Полагаю, что статья понравится веб-дизайнерам, так как приёмы, о которых пойдёт в ней речь, помогут им упростить решение задачи по идеальному выравниванию логотипов в соответствующих разделах сайтов, над которыми они работают.
Пара слов о дизайне
Прежде чем мы углубимся в CSS-код и в разговор о том, как лучше всего организовывать и стилизовать логотипы различных размеров, мне хотелось бы немного рассказать о том, как я, выступая в роли дизайнера, работаю с логотипами в специальном приложении. Здесь я буду говорить о приложении Sketch, но вы можете пользоваться любым другим подобным инструментом.
Итак, у меня есть восемь логотипов, которые нужно разместить в сетке. Первым делом я их выделяю и перетаскиваю в рабочую область Sketch.
Выглядит эта куча логотипов весьма некрасиво. Давайте это исправим.
Размещение логотипов в сетке
Обратите внимание на то, что некоторые логотипы кажутся более крупными, чем другие. Логотип Airbnb — самый большой из всех. Для того чтобы разобраться в происходящем, я обычно размещаю их в прямоугольниках. Эти прямоугольники помогают мне лучше оценивать размеры логотипов, их выравнивание относительно друг друга и расстояние между ними.
Теперь, когда мы вывели на страницу прямоугольники, становится хорошо заметным то, что некоторые из логотипов неправильно выровнены, то, что некоторые из них заметно больше, чем другие, и то, что некоторые логотипы находятся совершенно не там, где им следует быть. Вот что получилось после того, как я настроил размеры логотипов и выровнял их по центру.
Результат изменения размеров логотипов и их выравнивания. Логотип Dropbox Business после этого выглядит слишком маленьким
После изменения размеров логотипов и их выравнивания обнаружилась проблема с одним из них — с логотипом Dropbox Business. Я, чтобы сделать эту проблему заметнее, оставил на предыдущем рисунке соответствующий вспомогательный прямоугольник. Для начала, этот логотип ориентирован горизонтально (он очень длинный), и, кроме того, он имеет белый фон. Исправить ситуацию можно, обрезав фон в Sketch и увеличив логотип.
Исправление логотипа Dropbox Business
Теперь в нашем распоряжении есть хороший макет, который готов к тому, чтобы воссоздать его средствами HTML и CSS. Учитывайте то, что в следующих разделах мы будем исходить из предположения о том, что вы — веб-программист, и вам, от дизайнера, достались логотипы, на размер которых особого внимания никто не обращал.
Реализация макета для логотипов, основанного на CSS Grid
Поговорим о том, как создать раздел страницы, содержащий логотипы, учитывая следующие требования:
В этом примере я разработаю макет раздела с использованием CSS Grid. Но это не должно вас ограничивать в выборе технологии для создания подобных разделов. Пользуйтесь здесь тем, что подходит вам, и то, что поддерживают интересующие вас браузеры.
Начало работы над разделом сайта с логотипами
Как видите, в результате оказалось, что логотипы занимают всю ширину родительских элементов. Размеры логотипов неоднородны. Поэтому давайте начнём улучшать наш раздел с того, что настроим свойство логотипов width :
Результат настройки ширины логотипов
Изменение ширины хорошо показало себя на некоторых логотипах. Но, например, внешний вид логотипа Dropbox это лишь ухудшило. Дело тут в том, что это — горизонтальный логотип. Прежде чем рассматривать решение этой проблемы, давайте попробуем настроить высоту логотипов:
Результат настройки высоты логотипов
Так, у нас проблема. Логотип Dropbox нехорошо растянуло по высоте. Дело тут в том, что высота этого логотипа меньше, чем у других. В результате установленное в CSS значение height для этого логотипа слишком велико. Его применение приводит к растягиванию логотипа с нарушением пропорций.
Решить эту проблему можно, воспользовавшись свойством object-fit :
Нашим следующим шагом будет выравнивание логотипов по горизонтали и по вертикали.
Flexbox-стили позволили отцентровать логотипы. Вот как они теперь выглядят.
Логотипы выровнены по центру, но логотип Dropbox получился слишком маленьким
Результаты применения разных подходов к стилизации логотипов
Свойство object-fit: contain хорошо тем, что оно, независимо от ширины или высоты логотипа, заставляет изображение занимать отведённое ему пространство и при этом не искажаться.
О директиве supports и о свойстве object-fit
Для того чтобы убедиться в том, что эта методика работает так, как ожидается, я испытал её на другом наборе логотипов. Результат мне понравился.
Использование свойства object-fit
Анализ размещения логотипов
Использование свойства mix-blend-mode для удаления белого фона
Логотипы размещены на сером фоне. Благодаря этому мы можем заметить то, что некоторые из них, являясь JPG-изображениями, имеют белый непрозрачный фон.
Дело сделано! Белый фон исчез. Хотя тут стоит отметить то, что этот приём может сделать некоторые логотипы темнее. Например — так случилось с логотипом McDonald’s.
Логотипы до и после избавления от белого цвета. Обратите внимание на выделенные изображения
Использование CSS-селекторов
Выравнивание последнего ряда логотипов по центру
Выводя на страницу некий набор логотипов и используя сеточный макет, нельзя быть полностью уверенным в том, что в последнем ряду занятыми окажутся все места. Пустое место в последнем ряду логотипов (именно такой последний ряд имеется в нашем примере) выглядит не очень хорошо. Для того чтобы выровнять последний ряд логотипов по центру, лучше всего использовать для разработки макета соответствующего раздела не Grid, а Flexbox.
Теперь последний ряд логотипов будет аккуратно выровнен по центру.
Flexbox-макет и выравнивание последнего ряда логотипов по центру
Заключительные рекомендации
Прежде чем завершить эту статью, мне хотелось бы дать вам несколько советов, которые вы можете принять во внимание, работая над сеточным макетом для раздела страницы, в котором планируется вывести логотипы:
2 июня 2018 | Опубликовано в css | 2 Комментариев »
В дизайнерской среде существует заблуждение о том, что выравнивание логотипа по центру страницы сделает ваш бренд более запоминающимся. Недавние исследования показали что это не так. Оказалось, что лучше всего в этом аспекте работает выравнивание по левому краю, а остальные варианты могут даже усложнить навигацию по сайту.
Логотип справа мешает узнаваемости бренда
Исследование под руководством Нельсона Нормана показало, что пользователи лучше запоминают бренд, если логотип выровнен по левому краю. Показатели запоминания в этом случае были на отметке в 89%.
Когда пользователь сканирует сайт, его взгляд тянется влево. Логотип расположенный справа естественно получит меньше взглядов, и как следствие показатели узнаваемости бренда будут ниже. Если же логотип размещен слева, на него бросают взгляд чаще, поэтому и запоминается он лучше.
Логотип по центру усложняет навигацию
Вышеупомянутое исследование также затронуло и случай выравнивания логотипа по центру. По сравнению с логотипом слева, существенной разницы в узнаваемости бренда не было. В этом случае другие факторы, такие как контрастность и разборчивость логотипа, играют значительно более важную роль.
Однако обнаружилась другая проблема. Оказалось что выровненный по центру логотип может мешать навигации. Пользователи в шесть раз чаще испытывали проблемы с переходом на главную страницу.
У пользователей существует привычка нажимать на самый левый элемент для перехода на главную страницу сайта. Если этот элемент не логотип, рука тянется к самой левой ссылке. Это неудобство может провести пользователя через несколько ненужных ему страниц, прежде чем он доберется до желаемой главной.
Один из способов предотвратить эту ошибку — расположение ссылки «Домой» слева в навигационной панели. Когда пользователь будет искать взглядом ссылку для возвращения на главную, он ожидаемо найдет ее в левой части.
Лучше всего работают логотипы слева
Если вам одинаково важны узнаваемость бренда и предсказуемость навигации, выбирайте выравнивание логотипа по левому краю. Пользователи сканируют взглядом страницу с левого верхнего угла к нижнему правому. Это значит что логотип, который располагается слева будет заметнее чем центральный, или правый.
Культурные различия
Большая часть языков использует систему чтения слева направо, однако есть языки, в которых читают справа налево. Если вы разрабатываете сайт для аудитории, которая читает на иврите, арабском, персидском, урду и т. д., то логотип должен располагаться справа. В этом случае он получит больше взглядов и даст бренду больше узнаваемости.
Почему не нужно выравнивать логотип по центру или по правому краю
Перевод подготовил автор телеграм канала http://t.me/uxidesign
Многие дизайнеры предполагают, что центрирование или правое выравнивание логотипа своего сайта сделает их бренд более запоминающимся. Исследования показали, что это предположение неверно.
Фактически, когда вы выравниваете логотип не по левому краю, это может сделать ваш бренд менее запоминающимся и усложнить ориентацию по сайту.
Исследование, проведенное группой Nielsen Norman, показало, что больше пользователей запоминает бренды, чьи логотипы размещаются слева, а не справа. Они обнаружили, что «Подъем отзывчивости бренда составил 89%», когда логотип находится слева.
Когда пользователи просматривают сайты, их зрительный взгляд устремляется влево. Логотип, размещенный справа, получит меньше зрительных взглядов, что приводит к слабой отзывчивости пользователей. Размещение логотипа слева лучше акцентирует внимание пользователя, благодаря чему ваш бренд запоминается лучше.
Группа Nielson Norman также провела исследование относительно логотипов выровненных по центру. Их отзывчивость намного ниже, чем у выровненных по левому краю.
Не правильное положение логотипа вредит навигации сайта. Результаты исследования показали, что в шесть раз больше пользователей не могут перейти на главную страницу одним щелчком, когда логотип в центре, а не слева.
У пользователей есть условная привычка щелкать крайний левый элемент, чтобы попасть на домашнюю страницу. Если этот элемент не является логотипом, он нажимает любую ссылку. Эта навигационная ошибка может отправить пользователей в путешествие по нескольким неправильным страницам, прежде чем они вернутся на главную.
Если вам важна отзывчивость и навигация по сайту, выравнивайте логотип по левому краю. Пользователи просматривают страницы, начиная с левого верхнего угла. Это означает, что пользователи будут пристально смотреть на логотип с выравниванием по левому краю, а не по центру или по правому краю.
Чем больше визуальных взглядов получает ваш логотип, тем проще пользователям запомнить ваш бренд. Размещение логотипа слева также усиливает привычку пользователя щелкнуть крайний левый элемент, чтобы попасть на домашнюю страницу.
Ваш логотип оказывает большое влияние на первое впечатление пользователя. Если он не запоминается, пользователи с меньшей вероятностью пересмотрят ваш сайт. Выравнивание логотипа на вашем заголовке играет ключевую роль в определении популярности бренда.
Пользовательские взгляды и навигационные привычки должны диктовать, где вы размещаете свой логотип. Следуйте этому правилу, чтобы ваш бренд был успешным, а навигация по сайту оставалась всегда удобной.
Краткое содержание:
1. Справа меньше видят
2. По центру усложняет переход на главную
Логотип выравненный по правому краю снижает отзывчивость
Как всегда, гребём всех под одну хрень. Арабы, евреи и прочие RTL-сконфигурированные прыскают в ладошку от всей этой чуши.
Эх, бро, тебя бы тоже лучше в ладошку в свое время.
1.«Подъем отзывчивости бренда составил 89%» — это очень смешно звучит. Извините 🙂
2. Что такое «отзывчивость бренда»? В оригинале используется слово Recall, и я бы скорее перевёл это как «запоминаемость бренда». И суть статьи звучала бы так «Расположение логотипа на сайте влияет на запоминаемость бренда пользователями и навигацию по сайту»
«Результаты исследования показали, что в шесть раз больше пользователей не могут перейти на главную страницу одним щелчком, когда логотип в центре, а не слева.»
А зачем переходить на главную страницу? У сайта как правило есть конкретные конверсионные цели. Гораздо логичнее рассматривать расположение логотипа с точки зрения достижения определенных целей. Более того, большая часть пользователей попадает на сайт через поиск или рекламу, в таком случае они сразу направляются на целевую страницу. Чаще всего следующий шаг это заказ услуги с этой страницы, либо далее по воронке продаж и оформление заказа, если это магазин. То есть если рассматривать движение пользователя по пути достижения целей, то уход на главную страницу зачастую будет антиконверсионым шагом. Само по себе исследование может полезным, но давать его в таком виде неокрепшим умам очень вредно. Потом же «специалисты» будут однозначно утверждать, что логотип по центру это плохо, нужно только слева ставить, они же читали.
Как использовать логотип в веб-дизайне
Почти все дизайнеры соглашаются в том, где должен быть размещен логотип на веб-странице. Но правы ли они?
Когда вы создаете сайт, где вы должны разместить логотип? Быстрый взгляд на самые популярные сайты в Интернете дает четкий ответ на данный вопрос. Он должен располагаться в верхнем левом углу.
Нужны доказательства? Просто просмотрите такие сайты как YouTube, Vimeo, Amazon, Instagram, eBay, Adidas, BBC, Wikipedia, Reddit, Dribbble, Netflix, Ford, BP, Levis, Shell, O2, Sony, NASA и даже этот сайт ниже.
Веб-сайт McDonald’s следует этому правило, поэтому он расположил свой логотип в верхнем левом углу страницы
В этих конкретных примерах логотипы являются словесными. Однако то же самое правило действует и для знаковых логотипов, доказательством чему служат сайты Airbnb, Spotify, Nike, Facebook, Pinterest и Apple.
Но прежде чем поступить так же, подумайте хорошенько, должны ли вы следовать за толпой и размещать свой логотип в том же месте, что и все остальные?
Логотип в центре для газетного вида
Хорошо, если бы вы решили расположить свой логотип в самом центре или в правом верхнем углу страницы, вы не были бы одиноки в этом. Одна из категорий веб-сайтов, которая часто центрирует свой логотип — это газеты и журналы.
Принцип данного подхода заключается в том, чтобы повторить хорошо знакомый вид печатной версии газеты и ее названия. Примеры сайтов, которые следуют этому принципу, включают такие знаменитые издания как Washington Post, The New York Times, Los Angeles Times, The Boston Globe, The Times, Financial Times, The Spectator, New Statesman, British Vogue, Radio Times и Wired.
Интернет-журналы, такие как Wired, повторяют опыт печатных изданий, центрируя свой логотип на своей веб-странице
Даже если вы не газета, вы все равно можете передать ощущение традиционного печатного издания, информационного бюллетеня или газеты, сосредоточив свой логотип в подобном стиле заголовка.
Примеры этой стратегии можно увидеть на сайтах для отеля Virginfield Smithfield Station, организации художника Ричарда Дибенкорна и дома моды Sunspel.
Однако давайте будем предельно ясными: печатные издатели никоим образом не объединены тем, что абсолютно все они размещают логотип по центру. Большинство британских газет, например, придерживаются веб-стандартов, размещая свой логотип в верхнем левом углу, включая The Sun, The Mirror, Daily Telegraph, Mail Online и Daily Express. Это означает, что печатные издательства двигаются вперед и полностью погружены в разработку своих цифровых предложений.
Выделение расположения логотипа
Если отойти от традиционных печатных издательств, то примеров других веб-сайтов, где логотипы расположены по центру или размещены вверху справа, немногочисленны.
Samsung является одним из редких веб-сайтов, где логотип расположен в центре
Есть, конечно же, и другие сайты, которые центрируют свои логотипы, включая Samsung, в то время как сайты типа Amnesty International и Guardian предпочли расположить лого справа. Но в основном это единичные случаи.
Другим весьма заметным исключением из этого правила являются поисковые страницы, в том числе Google, Bing, Yahoo, Duck Duck Go, Wolfram Alpha и Baidu, где логотип появляется справа от панели поиска или же сверху нее, хотя это может быть рассмотрено как элемент особой категории веб-сайтов.
Главная страница поисковых систем — это особая категория, когда речь идет о размещении логотипов
Итак, что стоит за этим подавляющим правилом относительно того, где разместить логотип?
Почему логотипы обычно расположены слева вверху?
Исторически, размещение логотипа слева частично зависело от того, как браузеры отображали веб-сайты на экранах. Фиксированная ширина браузера означала, что если ваш логотип был расположен справа (или даже в центре), он может вообще не отображаться, в зависимости от размера экрана и формы окна браузера.
Размещение логотипа в левом верхнем углу имеет долгую историю
Смещение влево также связано с тем, как в Европе и на Западе (в отличие от азиатских и арабских культур) печатный контент традиционно читается: слева направо и сверху вниз. Эти глубоко укоренившиеся привычки, естественно, перешли к чтению на цифровых устройствах, как показали исследования Nielsen Norman Group.
Зачем следовать тренду размещения логотипа?
Учитывая, что схема размещения логотипа в верхнем левом углу настолько укоренилась, единственная логическая причина размещения вашего логотипа в другом месте — это намеренное игнорирование данного правила в попытке привлечь пользователей, сделав сайт отличающимся от других и инновационным.
И вы можете подумать, что все в порядке: в конце концов, вы же не собираетесь запутать пользователей, перемещая окно поиска, кнопку меню или основную навигационную панель с их стандартных мест расположения, что никоим образом не относится к логотипам, потому что они не имеют функциональной цели, не так ли? Неправильно!
Независимо от того, осознаете вы это или нет, ваши пользователи ожидают, что логотип будет служить определенной функциональной цели. Она заключается в том, что, когда они нажимают на логотип, то они возвращаются на главную страницу. И если лого находится не там, где они ожидают его увидеть, то, скорее всего, это привет к нарушению их пользовательского опыта.
Фактически, согласно исследованию, пользователи считают, что вернуться на главную страницу примерно в шесть раз сложнее, когда логотип размещен в центре страницы по сравнению с тем, когда он находится в верхнем левом углу.
Возможно, если логотип расположен в центре страницы, но кнопка «Главная» находится в верхнем левом углу, как это сделало агентство JAMstudio, пользователи не будут чувствовать себя настолько запутавшимися.
Но в целом мы бы рекомендовали, в том случае если вы пытаетесь сделать свой дизайн привлекательным и инновационным, то, вероятно, вы должны просто найти способ получше, чтобы сделать это.
Логотипы в нескольких местах
Разумеется, размещение логотипа в верхнем левом углу не означает, что вы также не можете использовать свой логотип в другом месте на странице. Многие сайты любят давать больше внимания своим брендам, размещая его также в боковой панели или в футере веб-сайта.
Сеть Envato Tuts + усиливает свой брендинг, разместив логотип в футере, а также в верхнем левом углу
Но в то время как нет ничего плохого в использовании нескольких экземпляров вашего логотипа на сайте, всегда имейте в виду, что пользователи будут ожидать, что каждый из них будет функционировать, как ссылка на главную страницу.