Дизайнеры обновленной версии www.gazeta.ru явно вдохновлялись @дневниками

@темы: Дизайн, Интернет, Ссылки, дневники

---

Занимайся чтением - рекламная кампания от агентства SLAVA

@темы: Видео, Дизайн, реклама

---

06.03.2012 в 21:51

Пишет  bokonist:

умер Ralph McQuarrie, иллюстратор и автор многих визуальных образов научной фантастики, в том числе Star Wars, Battlestar Galactica, Back to the Future и Star Trek



via Concept Ships (прекрасный блог про техногенный арт)

@темы: Дизайн

---

В копилку менеджерам

Повестка дня на планерке: "Как правильно ставить задачи дизайнерам". Начальник отдела дизайна раздал всем моим менеджерам пластелин и попросил "сделать пи@дато". В результате получилось 16 вариантов этого самого, все абсолютно разные. Потом из этого же пластелина все лепили кнопку - кнопка так же была у каждого на вкус и цвет. Потом раздали формы: сердечки, цветочки, бабочки и попросили прикрепить кнопку на форму. Результат вы понимаете. Потом уже с прикрепленной кнопкой на форме надо было написать: "Я люблю тебя, жизнь, ну а ты меня снова и снова". Такой вот краткий экскурс в ежедневную работу отдела дизайна
Такие тренинги проводит QIP

@темы: Дизайн, Интересности

---

Поехали?

Сегодня официально был представлен новый логотип Сочи-2014. Он должен сменить звезду города-кандидата.
Разработан сей небесспорный шедевр в одном из крупнейших брендинговых агентств Interbrand



В день запуска нового бренда стартует рекламная кампания «Мы такие», призванная раскрыть культурные и ментальные особенности нашего народа.
После Нового года будет запущен следующий этап кампании — «Моя олимпиада», демонстрирующая, какой вклад каждый житель России может внести в подготовку такого масштабного проекта, как Игры 2014 года.
Кампания будет ориентирована на представителей Олимпийской семьи и зарубежные рынки: Западную Европу, Канаду, США, Азию.

Слоганом кампании по запуску нового бренда станет слово «ПОЕХАЛИ!»

@темы: Видео, Дизайн, События, Identity, Сочи-2014

---

Теория разбитого окна

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

Конкретнее речь идёт о том, что "решающие инстанции" склонны крутить пальцем у виска, если дизайнер говорит, что нужно ещё поработать с текстом - выравнивание, межстрочное и межбуквенные расстояния и пр., ведь микротипографика - это А и Б аккуратного, читабельного дизайна. Нужно заменить какой-то цвет в логотипе, от которого у создателей логотипа глаза на лоб вылезут? Ну и что, заменим! Подумаешь, что у них фирменный цвет тюркиз. С нашим синим тоже покатит. Клиент всё равно ничего не заметит. И таких примеров у каждого дизайнера найдётся ни один десяток.

Однако, на мой взгляд, такие "незаметные" недочёты как ошибки цветопередачи, опечатки и прочие "маленькие радости" иллюстрируют как нельзя лучше теорию "Разбитого окна" (Fixing Broken Windows). Если кто не в курсе, то, вкратце и сильно упрощённо, речь в этой теории, выдвинутой в 80-х американскими социологами Келлингом и Вилсоном, идёт о том, что уже одно разбитое окно дома, даже в самом фешенебельном районе города, приводит к тому, что разбиваются остальные окна, площадь вокруг самого строения начинает закидываться мусором, растаскиваются кирпичи, плитки и прочее, а сама местность начинает притягивать к себе людей весьма сомнительной репутации (ведь явно об этом доме никто не заботится и здесь всё можно!), деморализуя в конечном итоге жителей прилегающих домов. Ведь признайтесь честно, способны ли Вы выкинуть окурок или бумажку от конфеты в месте с намытыми, вычищенными полами, где всё блестит и сверкает? Лично я начинаю искать мусорку и если не нахожу, ношу мусор в руке или ищу место в своей сумке, в то время как меня совсем не мучает совесть выкинуть свой хлам на груды другого, если он уже вокруг есть.

Теория Келлинга и Вилсона, пусть даже многократно раскритикованная из-за недостатка эмпирических данных, связывает мелкие бытовые нарушения (вроде выбитой лампочки, загаженного подъезда, расписанной двери или выбитого окна) с человеческой деморализацией, и как следствие, с повышенной криминальностью. Я даже как-то сталкивалась с расаказом о нью-йоркском метро, которое только в 90-х годах, именно благодаря теории "Разбитого окна", стало снова доступным для пользования, а не местной помойкой. Просто навели порядок и не дали ему исчезнуть! Мэрия города ещё в 70-х взяла себе на вооружение дизайнера Милтона Глезера, который разработал логотип I LOVE NY, чтобы кампанией "I LOVE NY" поднять мораль у жителей города и вызвать любовь к месту своего проживания. Однако только под руководством мэра Джулиани появилась программа "Ноль толерантности", по которой полицейские должны были призывать жителей к ответственности за любую разбитую лампочку в общественном месте, опрокинутую мусорку или расписанную стену дома. Результаты были просто ошеломляющими - число разбойных нападений по городу упало на 64%, а число общих преступлений в Нью-Йорке сократилось на 75%! И это в городе, который называли "Адом в миниатюре"! Другое дело конечно, что ввиду особенностей американского законодательства и любви американцев к судам, мэрии пришлось выплачивать миллионные суммы пострадавшим от "полицейского произвола" в связи с программой "Ноль толерантности". Однако так массивно упавшая преступность, благодаря своевременной замене сгоревшей лампочки, производит лично на меня очень сильное впечатление.

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

Итак, если Ваш непосредственный руководитель закатывает глазки, когда Вы пытаетесь ему объяснить, что микро-работу нельзя просто так заметать под половик в надежде, что клиент всё рано ничего не заметит и не оценит, и Вам нужно на завершение работы ещё как минимум 2 часа, расскажите ему про теорию разбитого окна, не забывая отдать в итоге отличный, максимально вылизанный результат.»

© conjure

@темы: Дизайн, Работа, Цитаты

---

Тема оформления TEXUS

18/03/2009 - Обновлен css-код
В связи с изменением верстки дневников в код внесены необходимые правки.
Если очень коротко, то добавляем строку: #pchs_title, #lastComments_title {display:none !important;} для корректной работы вкладок со свежими комментариями и постоянными читателями.

История версий

25/07/2008 - Обновлен css-код.
Среди изменений:
1. Увеличение ширины до 980px;
2. Строка поиска;
3. Возможность задать свою картинку для каждой группы меню;
4. Приведен пример использования блока extrabottom;
5. Заложена возможность использования блока extratop.

15/03/2008 - В css внесены изменения в соответсвии с новой версткой дневников.
Тестируем, не стесняемся

Совместимость с основными броузерами ~90%.

Актуальная версия кода:

* html body{behavior:url("/files/csshover.htc";);}
* html #wrapper{overflow:visible;}
body {padding:10px !important; font-family: "Trebuchet MS",Arial,sans-serif!important; font-size:75%!important; color:#333!important; background:#ccc;}
.postDate, .postTitle {color:#349dcb; font-size:140%!important; font-weight:700!important;}
A {color:#006DBA!important;}
#wrapper{ background:#fff; padding:0 !important; width:980px; min-width:980px!important; margin:0 auto !important;overflow:hidden !important;}
#side {margin:0 !important; padding:0 !important;}
#side .bordered {width:980px;background:#002e4b; height:91px; margin: 0 !important; padding: 0!important; position:absolute; top:10px; z-index:5;}
#side li {float:left; display:block; padding-right:10px!important;}
#side A, #side {color:#fff!important;}
#extratop {height:130px;}
#page-c {height:auto; margin:0!important}
#page-t {margin:0!important}
.singlePost {height: auto !important; height: 1em; border: 0 !important;}
#thisDiaryLinks, #globalLinks, #thisDiaryInfo, #thisDiaryOwner, #myDiaryLinks, #lastComments, #pchs, h1 {clear:none; float:left; display:block; width:135px; height:26px; margin:0!important; }
#YaSearch {padding:0!important; margin:0!important;height:0!important;border:0!important;}
#YaSearch A {display:none;}
#YaSearchForm .submit {height:20px;}
#YaSearchForm { visibility: visible !important; display: block !important; margin:0!important; width:235px; height:45px; padding:5px 10px 1px; position:absolute;right:0; top:55px;}
#yaquery {color:#fff!important;}
#thisDiaryLinks ul, #globalLinks ul, #thisDiaryOwner ul, #myDiaryLinks ul, #lastComments ul, #pchs ul{ display:none; width:960px; padding:10px 10px; position:absolute;left:0; top:90px;}
#lastComments ul li {float:left; width:450px!important; margin-right:20px; height:40px; border-bottom: 1px dashed #ddd;}
#lastComments:hover ul, #lastComments ul:hover, #pchs:hover ul, #pchs ul:hover, #globalLinks:hover ul, #globalLinks ul:hover, #thisDiaryOwner:hover ul, #thisDiaryOwner ul:hover #globalLinks:hover ul, #globalLinks ul:hover, #thisDiaryLinks:hover ul, #thisDiaryLinks ul:hover {display:block!important; z-index:10;}
#myDiaryLinks, #myDiaryLinks ul {display:block;}
#thisDiaryLinks ul {background:#FFAA00;}
#thisDiaryLinks {background: url('/userdir/0/3/4/0/0340/31838794.gif';) #FFAA00 no-repeat;}
#globalLinks ul {background:#0198AC;}
#globalLinks {background: url('/userdir/0/3/4/0/0340/31838554.gif';) #0198AC no-repeat;}
#thisDiaryOwner ul {background:#89D51C}
#thisDiaryOwner {background: url('/userdir/0/3/4/0/0340/31838548.gif';) #89D51C no-repeat;}
#myDiaryLinks ul {background:#e33827;}
#myDiaryLinks {background: url('/userdir/0/3/4/0/0340/31838550.gif';) #e33827 no-repeat;}
#lastComments ul {background:#AE015C;}
#lastComments {background: url('/userdir/0/3/4/0/0340/31838558.gif';) #AE015C no-repeat;}
#pchs ul {background:#005286;}
#pchs {background: url('/userdir/0/3/4/0/0340/31838556.gif';) #005286 no-repeat;}
#thisDiaryPhoto, #paySupportLink, #diarySupportLink, #diarySpiritLink, #myLinksLink, #upInChart, #myProfileLink, #NContent, #login_form, #mainpageLink, #pchs_title, #lastComments_title {display:none !important;}
#extrabottom {height:5px;width:100%; background:#002e4b; clear:both;}
#thisDiaryInfo, H1 {font-size:220%!important;margin:0!important; height:45px!important;}
#thisDiaryInfo { width:350px;text-align:right; padding: 10px 10px 0 0!important; }
H1 { width:610px;text-align:left!important; padding:10px 0 0 10px!important;}
.search {width:160px !important;}
.sign {font-size:80%; color:#666;}
.header {color:#e33827!important;}
#TagsList {padding:0 !important; margin:0!important; position:absolute;left:0; top:-55px;}
#TagsList LI {border-bottom: 1px dashed #ddd; display:block; height:20px; float:left; width:140px!important; margin-right:10px!important;}
#TagsList LI A {padding:0 !important; }
.postLinksBackg {display:block !important; border-top: 1px dashed #ddd; border-bottom: 1px dashed #ddd; margin-top: 10px !important; padding:10px 0 !important;}
.comments {background: url('/userdir/0/3/4/0/0340/15202154.gif';) no-repeat; padding:0 0 0 20px!important;}
.subscribe {background: url('/userdir/0/3/4/0/0340/15203190.gif';) no-repeat; padding:0 0 0 20px!important;}
.addToQuote {background: url('/userdir/0/3/4/0/0340/15202458.gif';) no-repeat; padding:0 0 0 20px!important;}
.umail, .email {background: url('/userdir/0/3/4/0/0340/15202570.gif';) no-repeat; padding:0 0 0 20px!important;}
.diary {background: url('/userdir/0/3/4/0/0340/15202094.gif';) no-repeat; padding:0 0 0 20px!important;}
.profile {background: url('/userdir/0/3/4/0/0340/15202054.gif';) no-repeat; padding:0 0 0 20px!important;}
.bordered, .menuSection {border: none !important;}
.text, textarea, #mce_editor_0, #mceSpanFonts {font-family: "Trebuchet MS",Arial,sans-serif!important;border:#ccc 1px solid!important;color:#000!important}
#JournalComments .singlePost div.authorName, #JournalComments .singlePost div.commentAuthor {display:none;}
#JournalComments .singlePost div.paragraph {margin:0!important;}
#codebuttons a {float:left;}
#codebuttons {clear:both;}
#mce_editor_0_parent a, #mce_editor_0_parent select {float:left;}

Это beta-версия темы оформления с условным названием TEXUS
Сверстанная почти полгода назад, она до сегодняшнего дня пылилась у меня в чулане из-за технической несовместисти с @дневниками.
За цветными горизонтальными полосками скрываются основные элементы меню.
Все просто, компактно и, одновременно, всегда под рукой.
Поддерживается всеми основными браузерами.

2DO list:
Меню сообществ
Поиск
Список любимых ссылок

PS.: Стиль каждый использует на свой страх и риск. Код распространяется as is - как есть.
Я оставляю за собой право не отвечать на вопросы типа "А как сделать... ?" - для этого есть DiaryCSS

Если стиль Вам все-таки понравился или оказался полезен при создании собственного дизайна — можете поставить действующую ссылочку на этот пост где-нибудь в своем эпиграфе.
Ну или черкнуть пару строк в комментариях ;-)

запись создана: 20.06.2007 в 03:54

@темы: @дневники, Дизайн, Креатив, дневники, CSS, texus

---

Блоги и блоки: Table Layout

www.w3.org/TR/CSS21/tables.html#propdef-table-l...

@темы: Дизайн, CSS, Блоги и блоки

---

Подбираем внешний вид текста

www.typetester.org/

Сервис позволяет легко подобрать шрифт, его размер, межстрочный интервал и другие параметры оформления текста.
Посмотреть как все это выглядит, сравнить с другими вариантами, а на выходе получить сформированный css-код (ссылка get css)тыт
PS.: Старайтесь использовать безопасные шрифты (на typetester они собраны в группу safe list) — это обеспечит идентичный вид текста во всех браузерах и операционных системах.
Если же вы решились использовать какой-то специфический шрифт старайтесь выбрать для него не менее одного альтернативного из безопасных шрифтов — это правило хорошего тона

Ну и, по традиции, пример:

font-family: Europe, Arial, Tahoma;

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

Самый полный на сегодня список безопасных шрифтов для web приведен здесь

@темы: Дизайн, CSS

---

Узкий дизайн? Не видно всех кнопок визуального редактора?

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

Случай тяжелый, но лекарство есть:

 #codebuttons a {float:left;}
 #codebuttons {clear:both;}
 #mce_editor_0_parent a, #mce_editor_0_parent select {float:left;}

@темы: Дизайн, дневники, CSS

---

про дизайн

Дизайн — это решение бизнес-задачи, а не навешивание креативных рюшек и перерисовывание миллиона вариантов. Каждый раз вы решаете уникальную задачу, потому что строительные компании разные, с разными бизнес-процессами, спецификой, конкурентными преимуществами, особенностями. Потому сайты ВСЕГДА будут разными. Если скучно — попробуйте копнуть чуть глубже, погрузиться в среду, внести новые кардинальные предложения не столько по цветам/коллажам/etc, сколько по организации и представлению информации, путям привлечения клиентов и т.п. Хотя бы на уровне обсуждения с заказчиком.

Пожалуй, это одно из наиболее удачных определений веб-дизайна, да и во многом дизайна вообще.

Цитата из комментариев к заметке Как нарисовать пятый в этом году сайт строительной компании и сохранить интерес к работе

@темы: Дизайн, Ссылки, Цитаты

---

Шрифты для web

Windows fonts / Mac fonts / Font family

Normal style	Bold style
Arial, Arial, Helvetica, sans-serif	Arial, Arial, Helvetica, sans-serif
Arial Black, Arial Black, Gadget, sans-serif	Arial Black, Arial Black, Gadget, sans-serif
Comic Sans MS, Comic Sans MS5, cursive	Comic Sans MS, Comic Sans MS5, cursive
Courier New, Courier New, Courier6, monospace	Courier New, Courier New, Courier6, monospace
Georgia1, Georgia, serif	Georgia1, Georgia, serif
Impact, Impact5, Charcoal6, sans-serif	Impact, Impact5, Charcoal6, sans-serif
Lucida Console, Monaco5, monospace	Lucida Console, Monaco5, monospace
Lucida Sans Unicode, Lucida Grande, sans-serif	Lucida Sans Unicode, Lucida Grande, sans-serif
Palatino Linotype, Book Antiqua3, Palatino6, serif	Palatino Linotype, Book Antiqua3, Palatino6, serif
Tahoma, Geneva, sans-serif	Tahoma, Geneva, sans-serif
Times New Roman, Times, serif	Times New Roman, Times, serif
Trebuchet MS1, Helvetica, sans-serif	Trebuchet MS1, Helvetica, sans-serif
Verdana, Verdana, Geneva, sans-serif	Verdana, Verdana, Geneva, sans-serif
Symbol, Symbol (Symbol2, Symbol2)	Symbol, Symbol (Symbol2, Symbol2)
Webdings, Webdings (Webdings2, Webdings2)	Webdings, Webdings (Webdings2, Webdings2)
Wingdings, Zapf Dingbats (Wingdings2, Zapf Dingbats2)	Wingdings, Zapf Dingbats (Wingdings2, Zapf Dingbats2)
MS Sans Serif4, Geneva, sans-serif	MS Sans Serif4, Geneva, sans-serif
MS Serif4, New York6, serif	MS Serif4, New York6, serif

Примечания

Примечания:

¹ Georgia and Trebuchet MS are bundled with Windows 2000/XP and they are also included in the IE font pack (and bundled with other MS applications), so they are quite common in Windows 98 systems.

² Symbolic fonts are only displayed in Internet Explorer, in other browsers a font substitute is used instead (although the Symbol font does work in Opera and the Webdings works in Safari).

³ Book Antiqua is almost exactly the same font that Palatino Linotype, Palatino Linotype is included in Windows 2000/XP while Book Antiqua was bundled with Windows 98.

⁴ These fonts are not TrueType fonts but bitmap fonts, so they won't look well when using some font sizes (they are designed for 8, 10, 12, 14, 18 and 24 point sizes at 96 DPI).

⁵ These fonts work in Safari but only when using the normal font style, and not with bold or italic styles. Comic Sans MS works in bold but not in italic. Other Mac browsers seems to emulate properly the styles not provided by the font (thanks to Christian Fecteau for the tip).

⁶ These fonts are present in Mac OS X only if Classic is installed.

@темы: Дизайн, Интернет, CSS

---

про идеи и их воплощение

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

А, как известно, не так давно Студия Лебедева взялась реализовать идею в клавиатуре «Отимус»

@темы: Дизайн, Интересности

---

Как рождаются логотипы?

Зачастую, процесс рождения логотипа, фирменного знака, бренда остается за кадром. Мы видим только результат.
Нравится он нам или нет, но, как правило, мы никогда не знаем как рассуждал дизайнер, как трансформировалась первичная идея в процессе работы над знаком. Но ведь именно сам процесс является, пожалуй, самой сложной и самой интересной частью работы над логотипом.
Интересную теорию создания логотипов продвигает в массы блог logologos.blogspot.com

@темы: Блоги, Дизайн, Интересности, Identity

---

Новый код для дизайна фиксированной ширины по центру

4 строчки, которые изменят все!

Универсальный код для постановки основного блока дневника фиксированной ширины по центру страницы.
Обратите внимание на то что префиксы .left и .right теперь не нужны.

В коде выделены добавленные/измененне свойства.

#wrapper{min-width:850px!important; width:850px; margin: 0 auto !important; padding:0 !important; overflow:hidden !important}
#side {width:180px !important; margin:0 !important}
#page-c {width:660px !important; padding:0 !important; margin:0 !important}
#page-t {margin:0 !important;}

Как и прежде получить css для своего дневника можно с помощью удобного генератора кода
www.quartex.ru/diary/cssgen/ (версия от 17 марта 2008)

ЧТОБЫ ДНЕВНИК ОСТАВАЛСЯ НА СТРАНИЦЕ СЛЕВА
В свойствах блока #wrapper
1. Удалите из полученного в генераторе кода параметр overflow:hidden !important и margin: 0 auto !important;

В итоге должно получиться следующее:

#wrapper{min-width:850px!important; width:850px; padding:0 !important;}
#side {width:180px !important; margin:0 !important}
#page-c {width:660px !important; padding:0 !important; margin:0 !important}
#page-t {margin:0 !important;}

ЧТОБЫ ДНЕВНИК РАЗМЕЩАЛСЯ НА СТРАНИЦЕ СПРАВА

В свойствах блока #wrapper
1. Удалите из полученного в генераторе кода параметр overflow:hidden !important и margin: 0 auto !important;
2. Добавьте свойство float:right!important;

В итоге должно получиться следующее:

#wrapper{min-width:850px!important; width:850px; float:right!important; padding:0 !important}
#side {width:180px !important; margin:0 !important}
#page-c {width:660px !important; padding:0 !important; margin:0 !important}
#page-t {margin:0 !important;}

@темы: Дизайн, дневники, CSS

---

Генератор цветовых схем + подборка готовых сочетаний

Прекрасный иснтрумент для подбора цветов и сочетаний о Adobe kuler.adobe.com

www.colourlovers.com - колеекция цветовых схем и сочетаний для дизайна, возможность подбора собственных сочетаний он-лайн

typetester.maratz.com - подбор шрифтов, предпросмотр любого текста

www.beinspired.ru - галерея интересных дизайнов

Уроки web-дизайна в стиле Web 2.0 - уроки - примеры прекрасного CSS

@темы: Дизайн, Ссылки, CSS, Web 2.0

---

Ребрендинг РИА Новости

В конце декабря информационное агентство РИА Новости объявило о начале масштабного ребрендинга, первым шагом которого является внедрение нового логотипа.
По сложившейся уже традиции работу поручили забугорному разработчику. На этот раз им оказался дизайнер и эксперт в области газетного и медиа дизайна Mario Garcia (обновление The Wall Street Journal его рук дело).
Новый знак РИА Новости дополнил коллекцию "карамельных шариков".
Предшественник прослужил компании около 15 лет.

@темы: Дизайн, Identity

---

Ребрендинг XEROX

Вместе с реорганизацией, компания XEROX (долгие годы остававшаяся одной из признанных икон айдентики) решилась сменить свое лицо.

Грустно, но, похоже, даже китам не удается противостоять волне объемно-карамельного ребрендинга...

Новый бренд - творение бюро Interbrand
Интересные комментарии на BrandNew и у жж-юзера redstarcreative

@темы: Дизайн, Identity

---

Ребрендинг РЖД

23 мая "Российские железные дороги" приступают к внедрению нового корпоративного стиля, разработанного BBDO Branding, - пишут сегодня "Ведомости"



"Новый корпоративный стиль ОАО «РЖД» – символ перемен, происходящих в компании. Сегодня в сфере интересов ОАО «РЖД» — не только железнодорожные перевозки, но и логистика, туризм, строительство, телекоммуникации, медицина и многое другое. Именно поэтому новый знак несет широкую смысловую нагрузку и не акцентируется только на железных дорогах."

"Бренд РЖД несет в себе такие ценности, как преданность традициям, внимание к клиентам, гарантированное качество услуг, надежность, скорость, инновационность, технологичность, широта интересов, активное развитие. Ярко-красный цвет и прогрессивная графика нового фирменного знака ОАО «РЖД», разработанного BBDO Branding, наглядно демонстрируют, что компания готова к активным действиям в современных экономических условиях. Уникальная монограмма, основанная на кириллической аббревиатуре, сохраняет аутентичность и российское происхождение компании, создавая при этом привлекательный образ для международной аудитории."
Так думают в РЖД.

Затраты на внедрение нового стиля оцениваются примерно в 150 миллионов долларов.

Грустная история, в общем.

@темы: Дизайн, Identity

---

Уроки diaryCSS: Примеры, советы и маленькие хитрости

Давайте сразу договоримся

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

Использование кодов из этой статьи Вы осуществляете на свой страх и риск.
Я не несу никакой ответсвенности за изменение внешнего вида Вашего дневника, либо возможных проблем, вызванных использованием css-кода из этой статьи.
Список примеров будет пополняться по мере возможности.

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

Если у Вас есть какое-то хорошее проверенное решение, которым Вы хотели бы поделиться - напишите о нем в комментарии, после проверки я внесу его в список со ссылкой на Вас.

Я всегда открыт для общения, однако не нужно задавать мне вопросы по css на u-mail или в icq - ответов не последует. Если вопрос по коду из этой статьи - воспользуйтесь комментариями. С другими вопросами советую обращаться в сообщество  diaryCSS.
Спасибо.

Надеюсь, Вы найдете здесь что-то полезное для себя


Справочник css селекторов:
Будет постепенно пополняться

Элемент дизайна - описание элемента в css

Предыдущая запсь - .prevPostLink
Следующая запись - .nextPostLink

u-mail - .umail
E-mail - .email
Дневник - .diary
Профиль - .profile
Добавить в цитатник - .addToQuote
Подписаться - .subscribe
Комментарии - .comments
Написать у себя - .quote_post

@темы - .atTag
@музыка - .atMusic
@настроение - .atMood

NEW! Элементы колонки меню:

#postsCalendar - Календарь записей
#albumLink - Альбом
#rssLink - RSS
#myDiaryLink - Мой дневник
#writeThisDiary - Новая запись
#umailLink - U-mail
#myFavLink - Избранное
#myQuotLink - Цитатник
#discussionLink - Дискуссии
#myProfileLink - Мой профиль
#optionsLink - Настройки
#myStatLink - Моя статистика
#photolibLink - Библиотека
#allDiaryLink - Все дневники
#mainpageLink - Главная страница
#favListLink - Список избранных
#pchListLink - Список ПЧ
#communityCatalogueLink - Каталог сообществ
#myCommunitiesLink - Мои сообщества
#randomDiaryLink - Случайный дневник
#diarySpiritLink - @дневники: изнутри
#diarySupportLink - Техподдержка
#paySupportLink - Техподдержка платных
#faqLink - FAQ
#iAmQuit - Выход
#more_login - Иконка входа под другим именем рядом с Выходом
#tagslistlink - Темы записей
#headlineList - Список заголовков
#comments - Комментарии
#subscribe - Подписаться
#addToQuote - Добавить в цитатник
#subscribeEmail - Подписаться на дневник
#addToFav - Добавить в избранное
#delFromFav - Удалить из избранного
#upInChart - Поднять в списке
#myLinksLink - Мои ссылки
#all_links - Ссылки

NEW!
#myDraftLink - Черновик
#thisDiaryPhoto - Фото владельца дневника



Что можно сделать с ссылками в меню?

1. Добавить к ссылками иконки:
#myFavLink {background: url('/userdir/0/0/0/0/0000/000000.gif') 2px 3px no-repeat; padding:0 0 0 20px !important; height:18px;}
Это минимально достаточная запись в плане используемых параметров.

Внимательно читаем пояснения!

Самое главное здесь:
2px 3px - в примере задают положение фоновой картинки, относительно границ блока: первая цифра (2px) определяет отступ для фонового изображения слева, вторая (3px) - отступ сверху.
no-repeat - запрещает повторение картинки, если необходимо замостить фон по принципу обоев просто удалите no-repeat
Чтобы разрешить повторение картинки по принципу обоев: только по горизонтали - вместо no-repeat используйте repeat-x, только по вертикали - repeat-y
height - высота. Задается в px.
Должна быть не меньше высоты выводимого изображения.
padding - так называемый "внутренний" отступ. Задается обычно четырьмя числами в px
Первая цифра - отступ от верхнего края блока, вторая - от правого, третья - снизу, четвертая - слева.
Левый внутренний отступ должен быть не меньше ширины используемой иконки.
То есть запись padding:0 5px 10px 20px; задаст блоку внутренние отступы 0 сверху, 5 справа, 10 снизу и 20 слева.

Если все отступы одинаковые - достаточно записи типа padding:5px; - в этом случае отступ от любого края блока будет равен 5px
Если отступы сверху=снизу и слева=справа достаточно записи типа padding:5px 10px - в этом случае сверху и снизу отступ будет 5px, слева и справа по 10px.

Использовать можно изображения любого, разрешенного в библиотеке изображений формата.

2. Заменить текстовые ссылки в меню на изображения:
Применимо в том числе к музыке, настроению и @темам.

#myFavLink A {display:block; width:40px; height:25px; line-height:500px; overflow:hidden; background: #eee url('/userdir/0/0/0/0/0000/000000.gif') 2px 4px no-repeat;}

Для @тем код будет таким:
.atTag SPAN {display:block; width:40px; height:25px; line-height:500px; float:left; overflow:hidden; background: #eee url('/userdir/0/0/0/0/0000/00000.gif') 2px 4px no-repeat;}

Размещаем изображение в верхней части дневника, без использования эпиграфа.
Изображение будет расположено над блоком записей и колонкой меню, эпиграф при этом можно использовать для чего-то более полезного.

#extratop {background: #ccc url('/userdir/0/0/0/0/0000/00000.jpg') 0 0 no-repeat; height:100px; width:100%;}

no-repeat - запрещает повторение картинки, если необходимо замостить фон по принципу обоев просто удалите no-repeat
Чтобы разрешить повторение картинки по принципу обоев: только по горизонтали - вместо no-repeat используйте repeat-x, только по вертикали - repeat-y
height - определяет высоту вашей картинки

Задаем элементу прозрачность

Ниже приведен кросс-браузерный пример использования 50% прозрачности для блока меню (id=side)
#side {
filter: alpha(opacity=50); /* IE 5.5+ */
-moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
-khtml-opacity: 0.5; /* Konqueror 3.1+, Safari 1.1 */
opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */
}

Для IE 5.5 и выше - прозрачность задается числом от 0 до 100, для остальных браузеров - числом от 0.0 до 1.0 (чем больше число, тем более непрозрачным будет элемент).

Внимательно читаем об особенностях использования с Internet Explorer

1. Фильтр можно применять лишь к элементу с установленным свойством height, или width, или position со значением absolute, или writingMode со значением tb-rl, или с contentEditable установленным в true.
2. Если при включенном методе сглаживания экранных шрифтов ClearType прозрачность применяется к элементу с текстом, текст визуально искажается. Для того чтобы исправить положение, для IE нужно задать фоновый цвет (CSS свойство background-color) для элемента к которому применяется прозрачность.

запись создана: 12.05.2007 в 01:14

@темы: @дневники, Дизайн, CSS