Перейти к содержанию
Авторизация  
Альваро

Как создать идеальную аватарку для сообщества В Контакте

Рекомендуемые сообщения

Вводная часть: аватарка

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

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

Делать аватарку по принципу «и так сойдет», или «авось прокатит», или «эта фоточка заебись» – НЕЛЬЗЯ. 

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

Максимальные значения для ширины и высоты аватарки ВК — 200*700 (200 в ширину и 700 по высоте)

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

 

Часть 1: Высота

Как бы это странно не звучало, но высота аватарки это первое что стоит учитывать при создании аватарки для сообщества ВК. Почему, спросите вы. Именно это я и постараюсь вам объяснить в этой статье

Монитор (разрешение)

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

Какое же разрешение стоит выбрать?

В феврале 2012 года случилось: разрешение 1024*768 перестало быть самым популярным. С первого места его сместило разрешение 1366*768, которое стоит на большинстве ноутбуков (все пересели с настольных ПК на ноутбуки).

Значит, по высоте мы ограничены в 768 пикселей (на картинке ошибка: перепутал высоту и ширину)2012-07-24-21.35.55-1024x764.jpg

Самая популярная операционная сеть — Win 7, как ни крути. Внизу у нас есть плашка панели задач, которая тоже сжирает место по высоте.

2012-07-24-21.39.11-1024x764.jpg

Качество фотографии не ахти. Хотелось порисовать.

И так, минимум панель задач в Вннде 7 сжирает 40 пикселей. Итого у нас по высоте уже 768-40=728. Идем дальше. (на картинке ошибка: перепутал высоту и ширину)

Самый популярный браузер в мире — Google Chrome. Он тоже отнимает драгоценное пространство по высоте

2012-07-24-21.39.09-1024x764.jpg

Милый хром своими вкладками сжирает 30 пикселей, а адресной строкой 31 (а может и 30. мерил на глаз). Итого 60-61 пиксель обязательно сожрет браузер и никуда от этого не деться. Про другие браузеры чуть позже.

Кроме вкладок и адресной строки, которые никуда не денешь, у многих пользователей могут быть открыты закладки. Я, например, их постоянно держу развернутыми, так как это экономит время (быстрый доступ к часто используемым сайтам). Закладки отнимают еще 30 пикселей. Итого Google Chrome по высоте может отнимать от 61 до 91 пикселя.

Значит получаем 728 — 61(91) = 667(637) , а это уже меньше максимально допустимой высоты аватарки в 700 пикселей.

2012-07-24-21.43.26-1024x764.jpg

Дальше вступают ограничения самого Контакта.

2012-07-24-22.17.01-1024x764.jpg

40 пикселей кушает верхняя навигационная панель ВК. Еще 29 пикселей прямоугольник(«тип»), на которой написан тип сообщества и 10 пикселей отступ от «типа» до заветной аватарки.

Итого 40+29+10=79 пикселей на навигацию ВК.

667(637) — 79 = 588 (558 — с панелью закладок)

2012-07-24-22.17.21-764x1024.jpg

558 пикселей — максимальная высота аватарки в ВК, которую будет полностью видно на первом экране ноутбука с разрешением 1366*768пикселей. Но это еще не все!

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

Кнопка «подписаться» должна быть на первом экране

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

Давайте разберемся в размерах:

  • блок «подписатьсявступить в группу» съедает 77 пикселей
  • если это публичная страница и её упоминали в своих записях пользователи, то появляется блок «упоминания» публичной страницы. Вместе со всеми отступами он сожрет 43 пикселя
123111-1024x764.jpg
 

Итого у нас получается:

  • 588 (558)  — 77 = 511(481 — с панелью закладок) — для группы
  • 588 (558)  — (77+43) = 468(438 — с панелью закладок)
Давайте допустим, что панель закладок открыта у всех. Значит максимальная высота аватарки, которая будет на первом экране с кнопкой подписаться для группы равна 481px, а для публичной страницы — 438px
 

Другие браузеры

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

Так вот, панели. Они тоже отнимают какое-то пространство по высоте, и я бы накидывал к полученным выше значениям высоты аватарки для группы и публичной странице по 50px … то есть отнимал!

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

  1. для группы — 431 пиксель +50*
  • для публичной страницы — 388 пикселей +50*

*50 — это запас для других браузеров. Можно не использовать.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

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

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

Авторизация  

×