Адаптивні логотипи поради для екранів маленьких розмірів
Під час створення адаптивного сайту, логотипи часто обділяють увагою. Якщо ви розглянете приклади багатьох чуйних сайтів, то помітите, що лого, як правило, просто зменшується пропорційно в міру зменшення розміру екрана. У випадку простих прямокутних емблем цей підхід працює непогано, але якщо композиція та пропорції елемента інші, ви ризикуєте отримати нечитані написи і незрозумілі символи. На щастя, є засоби уникнути цих неприємностей.
Посібник зі стилю
Добре розроблена айдентика передбачає різні варіанти відображення лого. У кращому випадку ви знайдете вертикальні та горизонтальні варіанти розташування, коротку та повну версію, додатковий текст та його відсутність тощо. Зазвичай такі можливості прописуються в посібнику з фірмового стилю. Нижче бачите приклад того, як це буває.
У нашому випадку це є логотип пенсільванського університету. Їхній посібник за стилем передбачає версію логотипу для відображення в зменшеному вигляді.
Зменшена версія логотипу позбавлена додаткового дрібного тексту, а основний текст елемента вирівняний за висотою щита. Подивіться як виглядають обидві версії у шапці шириною у 320px. Другий варіант зрозуміліший і краще сприймається.
Немає посібника зі стилю? Діємо обережно
На жаль, далеко не всі логотипи супроводжуються таким зручним і докладним керівництвом. Якщо ви зіткнулися саме з такою нагодою, спробуйте запропонувати власне рішення. Однак врахуйте, що з ним потрібно бути вкрай обережним, дбаючи про те, щоб зберігалася максимальна впізнаваність бренду. Ось кілька порад, які допоможуть вам досягти цього:
Знижуємо кількість деталей
Логотипи з великою кількістю дрібних деталей зустрічаються рідко,але якщо вам попався саме такий, зниження деталізації допоможе зробити лого зрозумілішим у меншому розмірі. Дрібні елементи можна об'єднати в один більший, тонкі лінії можна зробити товщі, об'єкти з обведенням можна перетворити на об'єкти із заливкою. Хорошим прикладом таких маніпуляцій є логотип компанії Argento та їх посібник зі стилю.
Для кожної версії логотипу кількість деталей знижено, що робить логотип зрозумілішим і простішим для сприйняття.
Розгортаємо лого в горизонтальне положення
Це мабуть найпростіша та найпоширеніша техніка для адаптивних логотипів. У цьому випадку ми беремо елемент, розташований над текстом і поміщаємо його праворуч або ліворуч. Прикладом такого рішення є логотип Case-Mate.
Віднімаємо зайве
З логотипами, що використовують дрібний шрифт, працює покрокове віднімання дрібних елементів. Розглянемо цей випадок з прикладу емблеми організації National Oceanic and Atmospheric Administration (NOAA). В оригінальній версії логотипу ми бачимо велику кількість тексту довкола головного елемента. Зменшуючи логотип, ми насамперед прибираємо його. Якщо логотип потрібно зменшити ще сильніше, ми прибираємо навіть напис усередині головного елемента. У цьому емблема зберігає впізнаваність.
Існує багато варіантів того, як зробити логотип кращим у зменшеному варіанті та зберегти його впізнаваність. Ми сподіваємося, що ця практика стане обов'язковою для дизайнерів найближчим часом.