Логотип сайта: Логотип для сайта: как его создать без навыков дизайнера

<div></div>

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

Для логотипа, как и для любой картинки, полезно прописать атрибуты alt и текст всплывающей подсказки title.

1. После оценки влияния фирменного стиля на успешность бизнеса очевидна роль логотипа для сайта, что это не просто элемент декора. Это рабочий инструмент для повышения узнаваемости, лояльности.
2. Отнеситесь к разработке фирменного стиля, как к лицу вашей компании. Не обязательно делать дорого, важно сделать аккуратно и презентабельно.
3. Нужно учесть три компонента и поработать над каждым: форма, посыл, цвет.
4. Протестируйте варианты логотипа на других людях, представителях ЦА, получите обратную связь от коллег и клиентов. Лучше на начальном этапе внести корректировки, чем впоследствии проводить ребрендинг.

Как расположение логотипа влияет на юзабилити вашего сайта?

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

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

Нарушение общепринятой традиции может показаться легким решением для тех, кто желает создать оригинальный дизайн и таким образом «выделиться из толпы» конкурентов. На примере ниже домашняя страница отеля New York Edition имеет традиционную структуру, при этом название отеля и меню навигации находятся с правого края страницы:

Веб-сайт отеля New York Edition нарушает стандартную схему веб-дизайна: логотип и навигация располагаются на правой стороне страницы

Расположение имеет значение?

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

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

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

Чтобы проследить за возможными последствиями нестандартного размещения логотипа, было проведено сравнение реакции пользователей на сайты 4 разных гостиниц:

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

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

3. Пользователям было показано 5 разных веб-сайтов (в случайном порядке), после чего они отвечали на вопросы, не имевшие прямой связи с содержанием страниц. Это делалось для минимизации так называемого «эффекта новизны» (recency effect), который мог привести к сохранению более яркого воспоминания о только что просмотренном сайте. Подобное тестирование с напоминанием (aided recall) часто используется в маркетинговых исследованиях, чтобы оценить эффективность рекламы.

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

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

Левый vs. правый

На реальном сайте отеля Hudson логотип размещается с левой стороны. На измененной версии сайта логотип и навигация были перенесены в менее традиционную правую сторону:

Сравнение реальной версии сайта (слева) с переделанной версией (справа)

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

Средняя запоминаемость бренда для 4 протестированных сайтов была следующей:

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

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

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

Размещение логотипа в левой части экрана увеличивает запоминаемость бренда почти в два раза

Может ли необычное расположение логотипа придать «уникальности» бренду?

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

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

Логотипы, размещенные справа, не были оценены участниками эксперимента как более стильные или уникальные

Визуальный дизайн для эффективного продвижения бренда

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

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

Высоких вам конверсий!

По материалам: nngroup.com 

09-03-2016

Создание логотипа для адаптивных сайтов. Логотип для сайта.

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

Создание логотипа для адаптивных сайтов

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

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

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

Логотип для сайта. Адаптивные логотипы для адаптивного веб-дизайна

В данной статье мы подробно рассмотрим, почему же простые формы, гибкость и многофункциональность в разработке дизайна логотипа стали так важны. Безусловные законодатели моды: Twitter, Facebook, Spotify и Google, совершенствуют и безусловно упрощают графические элементы логотипов в ответ на внедрение адаптивных дизайнов и постоянно растущее влияние рынка гаджетов. У них есть чему поучиться. Кстати, не пропустите статью о карточном дизайне, ставшем уже чем-то большим нежели просто тренд 2018-2020. Эта тенденция только развивается и вовсе не думает сходить на нет.

Элементарные факты.

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

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

Логотипы Apple Computer.

Стив Джобс пригласил дизайнера Роба Яноффа, чтобы тот создал что-то запоминающееся, простое и современное. Цвет знака изменялся неоднократно, но сама форма всегда оставалась неизменной. По прошествии 30 лет она стала иконой узнаваемости во всем мире. Именно простота данного дизайна позволяет ему работать в любом размере и на любом носителе. Этот знак идеален для адаптивной среды, хоть и был придуман задолго до появления этой технологии.

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

Рассмотрим логотип Great Lakes Golf. Ведь кто-то наверняка потратил уйму сил и времени, чтобы втиснуть в него столько элементов. В результате получилось нагромождение деталей, и, как вы понимаете, качественно уменьшить подобный логотип не получится. А теперь обратите внимание на логотип Skype: непринужденный, чистый и хорошо запоминающийся. Он будет хорош везде и спокойно уменьшится для маленьких пространств мобильных устройств.

Человеческий глаз может явно различить сложные элементы на айдентике Great Lakes Golf только на всей ширине экрана. Но уменьшите его до 50%, и он едва читается, все смешивается в непонятные пиксели. Логотип Skype напротив прекрасно масштабируется. А если места совсем мало, то он достаточно гибок, чтобы просто отбросить все лишнее.

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

Поможем вам в создании успешного логотипа

Свяжитесь с нами, чтобы узнать условия и стоимость работ.

Ответ от технологичных компаний

Логотип для сайта у FACEBOOK

Чтобы соответствовать адаптивным дизайнам для мобильных приложений, крупные IT компании все больше упрощают свои логотипы. Facebook, например, убрал голубую линию под значком «F». А в 2015 дизайнеры упростили и сам шрифт, убрав верхний выносной элемент строчной «а» и заменив ее простой, округлой версией. Кстати, не пропустите нашу статью о важности оригинального или адаптированного шрифта в создании логотипов. Остальные буквы также были уменьшены и улучшены. На первый взгляд эти изменения могут показаться крайне незначительными, но основания для них были серьезные. Facebook изменил логотип, чтобы он лучше смотрелся на экранах мобильных.

Рестайлинг Facebook.

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

Айдентика SPOTIFY

Изначально у Spotify был веселенький логотип с небольшим эффектом волны, который сразу же «съелся» бы при уменьшении. В 2013 он был изменен и упрощен до черного шрифта и зеленого значка, к которым мы так привыкли. Затем он стал просто однотонно зелёным. Возник вопрос: зачем Spotify чинить то, что не ломалось? Но это изменение стало частью масштабного ребрендинга, и толчком к нему послужил поиск гибкого отображения на мобильных платформах.

Рестайлинг бренда Spotify.

«За счет своей пластичности система привлекательна на любых экранах, в печати, в любой интерактивной среде. Мы испытывали ее даже на крошечных мобильных с крошечными экранами», – Лиланд Машмэйер, креативный директор нью-йоркского брэндингового агентства Collins

GOOGLE

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

Первые шаги рестайлинга логотипа Google.

В последнее время стало заметно, что их тонкий шрифт Serif с засечками выглядел невнятно на адаптивных веб-страницах. И, как и другие технологичные брэнды, команда Гугл упростили его, взяв написание Sans Serif и сделав его плоским, а также создали компанейский и привлекательный значок “G”.

Недавние изменения логотипа Google.

“Когда-то поиском Google можно было воспользоваться только на одном устройстве: персональном компьютере. Сегодня люди обращаются к Google с различных гаджетов, из различных приложений… В подтверждение этого мы представляем вашему вниманию обновленный логотип, который позволит почувствовать магию Google даже на самых маленьких экранчиках .», – сообщение из официального блога Google , Тамар Йегошуа, вице-президент по управлению продуктом.

PRINCE

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

Логотипы Twitter, Nike, Apple, Starbucks и Pinterest. Возможно вы уже не помните надутый шрифт и картинку птички, которые составляли логотип Twitter? Спустя какое-то время Twitter поработал над дизайном и отсек все лишнее. Сейчас это исключительно упрощенное изображение птички. Никакого значка в виде строчной «t», никакого текста, только птичка-логотип.

Изменения логотипа Twitter.

“Twitter – это птичка, птичка — это Twitter. Нам больше не нужны текст, надутый шрифт или строчная «t».”, – Креативный директор Дуг Боуман

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

Поможем вам в создании успешного логотипа

Свяжитесь с нами, чтобы узнать условия и стоимость работ.

Логотип для сайта. Заглядывая вперед

Хотим ли мы сказать, что отныне все логотипы обязательно должны превратиться в элементарные плоские значки или в дизайне стоит использовать только плоские шрифты San Serif? Не думаю. Между тем больше нельзя игнорировать влияние адаптивного пространства веб-дизайна на брендинг и айдентику и любопытно посмотреть, что же будет дальше. Теперь мы понимаем, что постулат о том, что айдентика компании – это незыблемая твердыня, которая не должна меняться никогда, морально устарел. Это дает путь новому подходу к брендингу, в котором место динамической айдентике. От горизонтальных форматов к вертикальным, от текста к значку, меняются даже цвета, чтобы соответствовать темному или светлому фону экрана.

Кто-то может возразить, что то, что применимо к брендингу технологичных компаний, не подходит, скажем, адвокатскому бюро или кафе. Однако, в конечном итоге, все индустрии придут к адаптивности своих сайтов, и рост рынка мобильных гаджетов отразится на всех. И тогда некоторые удивятся, почему дела у них идут не так хорошо, как у Twitter или Pinterest. Разрабатывая веб сайты, брифуя клиентов, мы в Mindrepublic в 100% случаев отмечаем необходимость мобильной верстки. Ни один из клиентов за все это время не сказал, что ему все равно как будет выглядеть его сайт с экрана планшета или смартфона.

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

Понравилась наша статья, поделитесь с друзьями!
Удачи в бизнесе, ваш mindrepublic.ru

Мы подготовили для вас небольшое видео о том, как мы создаем логотипы в MindRepublic.

Техника позиционирования логотипа внутри шапки сайта (header).

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

Вот пример:

Как правило, такой логотип размещается с левой стороны и рядом с ним находится меню сайта.

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

На самом деле, ничего сложного здесь нет.

Для примера, давайте возьмем следующую структуру документа:

<div>
                <div> 
                 <a href="#"><img src="logo.png"></a>
                 <p>Место для меню</p>
</div>
</div>
<div>
                <div>
        <h2>Заголовок.</h2>
        <p>ПLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
    </div>
</div>
<div>
                <div>
                               <p>Текст footer</p>
    </div>
</div>

Если мы просто вставим логотип внутрь header, без всяких стилей:

<a href="#"><img src="logo.png"></a>

То, можно будет увидеть следующую картину:

Место для меню сместилось на уровень ниже и теперь отображается не правильно.

Чтобы избежать этой ситуации, к логотипу нужно добавить следующие стили CSS.

<a href="#"><img src="logo.png"></a>

Для ссылки, которая содержит логотип мы используем обтекание слева float:left, и с помощью margin-ов задаем точную позицию логотипа.

Теперь все отображается так, как надо:

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Логотип для сайта

Как сделать живой логотип для сайта, с объёмными буквами и без картинки, используя только HTML и CSS.

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

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

Это простейший вариант. Буквы естественно могут быть любые и любых размеров.

Есть идеи как сделать им округлые формы, и добавить логотипу что-то наподобие колец сириуса, или какой-то другой прибамбас.

Но это в недалёком будущем, а пока смотрим что получилось и как это сделано.

Код:

HTML


<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

Один нюанс: в Firefox логотип отображается не совсем корректно. Никак не могу разобраться в чём причина. Префиксы не помогают.

Буду весьма признателен за помощь в этом вопросе.

В следующем посте будем рисовать значки меню.

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

Какие-то домик конвертик и карандашик, сжирают почти секунду. Попробуем их вывести кодом.

Желаю творческих успехов.

Логотип сайта не отображается — CodeRoad

Я работаю над сайтом . Я загрузил логотип для сайта. Логотип отлично отображается, когда я запускаю его на своем PC, но когда я загружаю файл онлайн с помощью FileZilla, логотип не отображается, а отображается только текст alt. Я дважды проверил код и почти уверен, что мой код в порядке. Вот он,

  <h2><a href="index.html" title="Stop4Gifts"><img src="uploads/logo.png" alt="Stop4Gifts"/> </a></h2>

Пожалуйста, помогите мне. Спасибо

<h2>
  <a href="index.html" title="Stop4Gifts">
    <img src="uploads/logo.PNG" alt="Stop4Gifts"/> 
  </a>
</h2>

<link rel="stylesheet" type="text/css" href="../css/css.css" >
<img src="../img/beFluent1.jpg" alt="beFluent1logo" />