@дневники: yanajy - Обратная сторона дизайна : Дневники@Diary.ru : LiveRSS feed directory

<! >

Цветовое оформление комментариев.

Мысль о том, как можно разнообразить блоки комментариев. Идея простая. У каждого юзера есть своя аватарка. В качестве фона для блока автоматически выбирается наиболее часто встречающийся на аватарке светлый цвет, а в качестве цвета текста - тёмный. Т.о. Каждый юзер будет идентифицироваться не только по никнейму и аватарке, но и по цвету его блока.Естественно, в остальном дизайн блоков можно делать как угодно.Подводные камни.1. Обязательно нужно ограничивать цвета до минимальной и максимальной яркости и насыщенности, чтобы было всегда читаемо и не особо рябило в глазах. 2. По умолчанию, например, делать текст цветом #333, а фон - #ссс

14:54:25 17.07.2009

Про творческий беспорядок.

Этот пост не рекомендуется к просмотру тем, кто ищет что-то полезноеНедавно я обратил внимание на рабочие столы своих коллег по работе. Удивительно, но у них там... порядок. Мой же стол выглядит почти так:Вот я и задумался....Как же так получается, что имея примерно одинаковое количество вещей на столе у меня постоянно бардак, а у коллег всё аккуратно сложено? Гипотетический ответ пришёл сам собой: дело в том, что порядок - это когда всё лежит на своих местах.Отсюда и решение проблемы: нужно продавать (можно сразу в комплекте с мебелью) специальные маркеры, которыми можно рисовать на столах, а потом безболезненно стирать. Тогда можно начертить себе сетку. Можно группировать элементы рабочего стола, и т.д.Мой стол мог бы выглядеть так:Дальше, можно в комплекте с мебелью продавать плёнки с разметкой где и что должно быть. Можно эту разметку делать тонкой, вписывать в дизайн мебели... Короче, делать красиво.Ещё дальше. Такую разметку (штампуемую в промышленном масштабе) можно продумать эргономически и по фен-шую.

19:04:10 16.07.2009

Блоки комментариев на css без изображений.

Собственно, ничего принципиально нового или фантастического. Просто способ сделать такие вот стильные блоки без использования изображений:Думаю, это много кому может пригодиться. У меня, например, есть несколько проектов, на которых этот способ было бы целесообразно использовать.Код html:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"><head><title>title</title><link rel="stylesheet" type="text/css" href="/comments.css" /></head><body><h3>Летят как-то Петька с Василь Иванычем в самолёте</h3> <p class="name">Вассиль Иваныч</p> <div class="lt"><</div> <div class="line"></div> <p class="comments">Петька!!! Приборы!!!!</p> <div style="clear: both;"></div> <p class="name">Петька</p> <div class="lt"><</div> <div class="line"></div> <p class="comments">Триста сорок пять!!!!</p> <div style="clear: both;"></div> <p class="name">Вассиль Иваныч</p> <div class="lt"><</div> <div class="line"></div> <p class="comments">Что «триста сорок пять»!??</p> <div style="clear: both;"></div> <p class="name">Петька</p> <div class="lt"><</div> <div class="line"></div> <p class="comments">А что, б%%%ь, «приборы»!?</p> </body></html>Код css:* { font: normal 12px arial;}.name { float: left; width: 150px; display: block; text-align: right; padding-top: 8px; clear: both;}.comments { float: left; width: 30%; border: 2px solid red; padding: 10px 15px;}.line { height: 14px; width: 2px; float: left; position: relative; left: 2px; background: #fff; top: 23px; //top: 13px;}.lt { float: left; position: relative; left: 8px; top: 11px; //top: 1px; font: normal 28px verdana; z-index: 5; color: red;}Само собой разумеется, код можно оптимизировать и совершенствовать. Тут показан только сам принцип.

10:41:57 15.07.2009

Contenter: навигация по сайтам

Многие сайты имеют плохую навигацию. В случае, если сайт, на который вы пришли — именно такой сайт, вам может помочь навигатор Contenter.Идея родилась в процессе обсуждения PreScroll-а и заключается в следующем.Плагин Contenter сканирует html-код страницы, выдирая из неё заголовки разных уровней (h1..h6), и выстраивает в своём окошке. В итоге получается дерево заголовков, по которому можно удобно переходить на разные части страницы.Поскольку не на всех сайтах заголовки используются по назначению, или не используются вообще — как вариант — можно строить дерево в зависимости от размера шрифта элементов дизайна.Ещё одной функцией плагина может быть автоматическое построение карты сайта. В карте могут выводиться title-ы и/или заголовки первого уровня на страницах. Также можно выводить краткие описания или ключевые слова. Можно сделать возможность самому выбирать, что выводить.Дизайн добавить по вкусу.

14:10:05 8.07.2009

Идея дизайна сайтов: PreScroll

PreScroll© — улучшаем юзабильность scrollbar-аТак уж вышло, что существуют сайты-сосиски. Это такие сайты, на которых нужно долго и упорно крутить колёсико мышки, чтобы добраться до конца страницы. При этом не всегда удобно пользоваться стандартными способами прокрутки страницы (колёсико мышки, стрелочки, Page Up, Page Down). Вот как выглядит это в браузере:В этом случае хотелось бы более наглядно видеть, в каком месте страницы находишься, что есть выше и что — ниже.Моя идея улучшения навигации по странице-сосиске заключается в следующем.На сайте делается PreScroll — гибрид prewiewer-а и scrolling-а. Принцип действия совмещает возможности Навигатора в Photoshop-е и обычного scrollbar-а.PreScroll выполняется в виде миниатюры скриншота страницы, красной рамкой обводится видимая область страницы. Прокрутку можно выполнять с помощью всё тех же стандартных способов и мышки.Таким образом, PreScroll усиливает связь визуального и кинестетического на сайте, что значительно улучшает юзабильность сайта. Намного приятнее «схватить» и «потащить» саму страницу (или её миниатюру), чем абстрактную хренотень. И намного красивее это смотрится :-)Вот как это может выглядеть:Новый скроллбар можно реализовывать как на самих сайтах средствами css и явассриpт, так и в виде плагина к браузерам. Естественно, дизайнерское оформление может быть абсолютно любым.запись создана: 02.07.2009 в 12:48

18:44:38 6.07.2009

Новое слово графического дизайна: псевдоанимация

Если верить маркетологам, то суть рекламы полностью вписывается в систему AIDA, которая описывает следующую модель поведения жертвы:1. Attention (внимание)2. Interest (интерес)3. Desire (желание)4. Action (действие)Таким образом, первое, что должна сделать реклама — это привлечь внимание. Для этого есть много способов, и для каждого направления дизайна способы эти разные. Тем не менее, многие способы используются настолько часто, что уже не выполняют свою роль. Согласитесь, никто не удивится, увидев в журнале красочную фотографию или ярко оформленный текст. Так уж вышло, что как только что-то становится привычным, реакция на это практически исчезает. Именно поэтому для привлечения внимания нужны новые способы.Этот пост открывает совершенно новый, нигде пока что не использующийся метод привлечения внимания — псевдоанимацию. И речь не идёт о анимированном GIF-e или Flash-е (которые, кстати говоря уже приелись). Сегодня я вообще не затрону тему интернета.Псевдоанимацию в рекламных целях рекомендуется использовать дизайнерам, работающим с полиграфией.Представьте, открываете вы журнал, а там на картинке что-то шевелится :-) Думаю, это определённо привлечёт ваше внимание. Правда ведь? ;-)Для того, чтобы добиться эффекта движения есть несколько путей. Например, вставить «электронную бумагу». Или даже простую оптическую «переключалку» (помните, были такие календарики, на которых менялась картинка в зависимости от угла наклона?). Но это, безусловно, достаточно сложно в реализации.К счастью для дизайнеров, человеческая психика устроена таким образом, что физическая составляющая совершенно не обязательна для достижения эффекта движения. Мозг сам может создать себе любую галлюцинацию. Особенно креативным чувством в этом смысле является зрение. На этом-то мы и сыграем.Итак, что же такое «псевдоанимация»? Это визуальная иллюзия, создающая эффект движения. Например, рекламу дисков для настольных пил можно оформить при помощи знаменитого эффекта кофейных зёрен. Тогда кажется, что диски вращаются (что с ними и должно происходить). Тот же эффект можно применять в рекламе часов, автомобильных шин, велосипедов и т.д. Хорошо, если эффект будет дублировать реальное движение объекта.Таким образом, имея несколько принципов иллюзий в запасе, можно генерировать псевдоанимацию для чего угодно. Псевдоанимацию рекомендуется использовать там, где она будет выглядеть необычно (на рекламных щитах, в газетах и журналах, на листовках и каталогах и т.д.). Дизайн такой рекламы гарантированно привлечёт внимание жертвы. P.S. В охоте за вниманием не стоит забывать, что в системе AIDA есть ещё три пункта.Всем спасибо — все свободны :-)

18:22:45 2.07.2009

«А возможно ли сделать...»

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

11:39:47 2.07.2009