Выпуск №63. Создаем дизайн для Twitter

| понедельник, 15 февраля 2010 г.


Создаем дизайн для Twitter

Автор a.lesyk 10/12/2009
Создать свой уникальный дизайн для Twitter достаточно просто. Твиттер устроен так, что блок контента всегда находится посередине и имеет фиксированный размер 765px в ширину.
Рисуем дизайн для Twitter
Все остальное место можно использовать на свое усмотрение, то есть в вашем распоряжении в зависимости от разрешения экрана пользователя (1024 или 1280px) имеется от 128 до 256px слева и справа от основного блока.
Помимо этого можно использовать место в шапке своего аккаунта, рядом с логотипом Twitter, например, посадив туда прикольных человечков, как это сделал я. 


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

Все, что от нас требуется это придумать и нарисовать один рисунок в форматах JPG, GIF или PNG. Twitter позволяет загружать свой фоновый рисунок размером до 800 Кб, поэтому полет фантазии можно не ограничивать; 800 Кб вполне достаточно для фона любой сложности и техники исполнения.

Что будет изображено на фоне – решать вам. Можно разместить в сайдбаре Твиттера контактную информацию (адрес эл.почты, icq, адрес фида, аккаунта на flickr) – кто чем пользуется. Можно вывесить свою фотку, можно нарисовать повесившегося зайца. Главное – чтобы фон лег так, как это было задумано дизайнером. Для этого учитывайте некоторые особенности Twitter:
  • Что бы вы ни делали, фон контентного блока, блока меню и футера всегда будет белым.
  • В оформлении вышеуказанных блоков можно изменить только цвета текста, ссылок.
  • Посетители вашего аккаунта используют различные разрешения экрана. Учитывайте это. Лучше использовать «общие зоны», которые при разных разрешениях не разъедутся и не «спрячутся» под зарезервированные Twitter зоны. На рисунке ниже я серым цветом выделил т.н. "общие зоны", то есть такие, в которых при любом из разрешений монитора (1024 или 1280px) не потеряется смысл вашей композиции. Разметить картинку в Photoshop можно добавив гайды (View->New Guide).
  • Если опасаетесь того, что посетители вашего аккаунта будут видеть не то, что хотелось бы, воспользуйтесь возможностью «замостить» фоновое изображение. То есть используйте небольшую картинку (см. второй пример) и отметьте в панели управления своим аккаунтом во вкладке «Design» “tile background”.
  • В качестве эксперимента воспользуйтесь PSD-макетом (15.3 Мб), который используется в моем Твиттере. При наличии фотошопа вы сможете все изменить под себя, начиная с фото и заканчивая надписями.

Еще немного цифр:
  • Ширина логотипа Твиттера 156px;
  • Ширина меню Твиттера 318px;
  • Расстояние между правым краем логотипа и левым краем меню - 291px.

Почему стоит ориентироваться на пользователей, использующих разрешение 1024-1280px в ширину? Взгляните на актуальную статистику использования различных разрешений, и этот вопрос отпадет сам по себе.
Разрешение, WxHПроцент пользователей, %
1024×76827.9%
1280×102424.9%
1280×80015.7%
1440×9006.3%
1680×10505.1%
1152×8644.0%
1400×10503.3%
800×6001.5%
1920×12001.4%
1600×12001.1%

Для наглядности также рекомендую посмотреть на то, что рисуют для своего Twitter другие.

Примеры оформления Twitter:

@dickieadams
@happytreefriend
@grant_clark
@JJunkins

Тренируйтесь и кидайте в комментариях ссылки на то, что у вас получилось. Удачи в покорении Twitter!

Источник: http://itnewsonly.com/dizayn/twitter-design.html
Выпуск подготовлен  при поддержке PRGroup Mona vie

2 коммент.:

itnewsonly комментирует...
17 июня 2010 г., 5:22

Поставьте, пожалуйста, ссылку на первоисточник. http://itnewsonly.com/dizayn/twitter-design.html

Наталья Шульга комментирует...
17 июня 2010 г., 15:35

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

Отправить комментарий