О применении мозга в дизайне

Здравствуйте, мои дорогие любители дизайна. Это снова я, снова с новой (ух ты:-) ) писаниной. Восхотелось мне чего-нибудь сегодня покритиковать. Благо и претендент удачный нашелся.
Но покритиковать не просто так, а конструктивно. Предложить свое. Чтобы знали, что хозяин блога не только тявкать исподтишка и плевать на спину может (это, кстати, очень просто), а может предложить еще что-то свое.
Итак, претендент. Чтобы было понятно, о чем конкретно я веду речь - ниже будет маленькая иллюстрация (увеличивающаяся по клику):


Что мы тут, уважаемые граждане, видим? Мрак и ужас мы тут видим, помноженные еще на два мрака и ужаса. Причем, что интересно - технически грамотно (см. исходный код) выполненные мрак и ужас. Даже без таблиц.

Есть некая идея: грамотный мерчандайзинг - это очень сложно (тонкий намек в виде паззла), но мы совсем недорого возьмем решение этой проблемы на себя, и все у вас будет в лучшем виде. Это вот была идея.

А дальше начинается полная, простите, годзилла. Злая и некормленная:
- шрифты. О, эти болдовые газетные шрифты... как они меня успели достать в свое время!
- цвета. Сине-зеленая тоска.
- качество графики. За гранью бобра и козла.
- кадрирование фото. За той же самой гранью. Не надо так кадрировать фото. Я не верю, что женская грудь с бейджем символизирует собой "мерчандайзовый аудит". Вот не верю и все. А обучение мерчандайзингу в полях...
- заголовки подразделов. Граждане, имейте совесть. У меня зрение стопроцентное, и то прочитывал с пятого раза. А у кого не стопроцентное?
- форма кусочков паззла нефункциональна. Это видно глазу, и сразу понимаешь - что нет, не справятся ребята со своей задачей. Такие кусочки не состыковать.

И ведь этот сайт должен продавать.

Короче, решил я действовать в рамках той же идеи. С паззлами. Получилось так:


В общем, я не говорю, что это идеально и суперзашибенно (будь у меня реальный заказчик - я бы долго обсуждал с ним внешний вид пиктограмм, а также сделал бы два-три варианта фона), но в целом:
- сплэшскрин приобрел более яркий и прикольный (жена подсказала - гламурный) вид;
- пиктограммки оживили страницу (и позволили избавиться от фото вообще, ибо кадрирование в таких сложных рамках - полный аллес гемахт);
- появляющиеся при ховере названия разделов реализуются легко (одним лишь CSS), а то, что они появляются и исчезают позволяет избавиться от лишней "замусоренности" страницы.

Вот как-то так. Вынимательно слушаю комментаторов.

PS: Там еще есть флешь-версия сайта, это отдельная и весьма грустная песня, которую я как-нибудь тоже перепою на новый лад.
-----------------------------------------------------

Хостинг изображений - radikal.ru

Еще порция простоты и изящества

Простое и кроссбраузерное решение для создания резинового блока с фиксированными отступами:

<head>
<style>
body
{
padding:0;
margin: 0;
}
</style>
</head>
<body>
<div style="position: absolute; left: 100px; right: 100px; height:100%; background:#f00; min-width: 300px; overflow: auto;"></div>
</body>

Прошу обратить внимание, что задание position:absolute; делает div потомком уже не body, а непосрдественно окна браузера.
-----------------------------------------------------

Хостинг изображений - radikal.ru

Голосовалка...

...для оценки ядрености хвотографических карточек. Применяется цветовое кодирование: 1 - красный, 5 - зеленый. Между ними - переходы. Запросто реализуется на js, особенно, если онклики привязать к чекбоксам, или радиобаттонам, а сами их засунуть в инвизибльный div. Можыд кому идея пригодицца.


-----------------------------------------------------

Хостинг изображений - radikal.ru

Из карты мира....

...C помощью одного лишь только Фотошопа мы превращаем карту мира в завлекательный баннер:



"Радикал-ГЕО – бесплатный интерактивный сервис для привязки любой информации к точному месту на географической карте: интересы и предпочтения пользователей, места работы, отдыха, общения.

С помощью сервиса можно создать объект: нанести на карту свою «точку» – отметить место и создать его описание – название, тексты, фотографии и рисунки, темы для обсуждения на форумах, ссылки на страницы блогов."

Пиарю на правах дизайнера проекта:-)

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

Как любит говорить ст. оу. Гоблин, это, догадливые вы мои жадные дети, реклама фотошопа и карты мира.
-----------------------------------------------------

Хостинг изображений - radikal.ru

"Намертво приколочено к центру"

По адресу http://www.wpdfd.com/editorial/thebox/deadcentre4.html лежит хороший пример того, как div можно намертво приколотить к центру экрана. Решение кроссбраузерное. Таблицы все больше уходят в небытие:-)

Если же сайт у нас с динамическим содержанием, то для помещения блока по центру надо использовать вычисленное значение его ширины и высоты, деленное на "2". Скажем, ASP позволяет в прописывать в стилевых таблицах имена переменных в качестве числового значения. И там же совершать с ними некие арифметические действия.
-----------------------------------------------------

Хостинг изображений - imageshack.us

Спецификация CSS2 в переводе на русский

если кому интересно, лежит здесь
-----------------------------------------------------

Хостинг изображений - imageshack.us

CSS и верстка

Подкинули мне тут задачку с подвохом. Типа, сделай так:

Для тех, кто по жизни в носу ковыряет - поясняю. Задача сделать два div-блока, да так, чтобы один перекрывал другой. Я подмал-подумал, да и выдал кросс-браузерную резину:
CSS:

body {
padding: 0px;
margin: 0px;
}

#corn {
position: relative;
float: right;
width: 200px;
height: 100px;
background: #00ffff;
margin-right: -50px;
margin-top: -50px;
z-index: 100:
}

#main {
position: relative;
width: 90%;
height: 450px;
background: #00ff00;
margin: 50px;
z-index: 1;
}

HTML:

<body>
<div id="main">
<div id="corn">
</div>
</div>
</body>

Фишка в том, что элемент считается родительским для другого элемента в том случае, если его позиция отлична от static:-)
-----------------------------------------------------

Хостинг изображений - imageshack.us

web. Садистское.

Как же порой хочется приложить создателей IE6 головой о стену. Верстаю. Резину. На div'ax. Везде все нормально, кроме IE. Даже маковские Camino с Safari все правильно отображают. А вот IE парсит страницу черт-те знает как. Одна из основных головных болей - непонимание "ослом" отрицательных отступов. Сугубо из-за этого придется страницы сайта сохранять с расширением *.php и в таком виде заливать на хостинг. Ибо для многотысячной толпы пользователей IE6 придется подсовывать другую стилевую таблицу. Специально под "осла" заточенную. А на JavaScript переключатель писать тоже не очень правильно - он почти у всех по умолчанию запрещен. Поэтому надо, чтобы сервер до отправки страницы клиенту решил, какую стилевую таблицу ему подсунуть, чтобы все у всех выглядело одинаково.

Да, кстати. Конструкции вида:

voice-family: "\"}\"";

как-то уж очень по-индусски выглядят:-)
-----------------------------------------------------

Хостинг изображений - imageshack.us

Проклятая гидра распускает свои щупальца все дальше! Теперь и flash!

Прикрутил флэш-баннер вместо жипешки, для чего пришлось пустить под нож div header - не позволял флеш встрамить, собака. Либо текст, либо жипегу. Флеш - ни-ни. За такое самоуправство был утилизирован.

Дывитесь на новенький баннер (который в процессе моего знакомства с флешем будет обрастать новыми фичами:-) ). И голосуйте сердцем в опросе.
-----------------------------------------------------

Хостинг изображений - imageshack.us

Резиновому сайту - резиновые баннеры!

Сегодня я опубликую небольшой трючок, который позволит размещать в шапке сайта баннеры, ширина которых меняется вместе с разрешением экрана. Достигается это с помощью довольно простых средств, а эффект достаточно хорош. Надо только грамотно нарисовать баннер.
К примеру, у нас есть такой баннер:


Для того, чтобы сделать его резиновым, мы разрежем его вот так:






И сделаем "резину".
Если вы верстаете таблицами, листинг будет выглядеть так:

CSS:

td.tab {
background-color: #ff9a2f;
}

td.menu {
background-color: #ffffff;
}

th.logoheader {
margin 0px;
padding: 0px;
background : url(banner.jpg) no-repeat bottom;
background-color: #ffffff;
background-position: left;
height : 50px;}

HTML:

<body>
<table width="80%" height="50" border="0" cellpadding="5" cellspacing="0">
<tr>
<th colspan="2" class="logoheader"><img src="logo.jpg" align="right"></th>
</tr>
<tr>
<td class="tab">Апельси́н (от нидерл. appelsina – «китайское яблоко») — плод апельсинного дерева (Citrus sinensis), родом из Китая. Гибрид, полученный ещё в древности, по видимому смешением мандарина (Citrus reticulata) c помелом (Citrus maxima). Дерево привезено португальцами в Европу и растёт теперь хорошо по всему побережью Средиземного моря, а также в Центральной Америке.

Довольно высокое дерево, относится к семейству Рутовые (Rutaceae) и к его подсемейству Цитрусовые(Citroideae). Цельные многолетние листья апельсина соединяются со своими крылатыми черешками посредством промежуточного широкого сочленения. Белые цветы сидят по 6, кистями и состоят из 5-раздельного малораскрывающегося околоцветника с толстыми долями, множества тычинок и одиночной свободной, или «верхней», завязью (известные «fleurs d’orange»).</td>
<td class="menu">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
<li>link5</li>
</ul>
</td>
</tr>
</table>
</body>

Если вы верстаете DIV'ами, листинг приобретет такой вид:

CSS:

body {
margin:9px 9px 0 9px;
padding:0;
background:#FFF;
}

#main {
background-color: #ff9a2f;
width: 80%;
}


#banner {
position: relative;
margin 0px;
padding: 0px;
background: url(banner.jpg) no-repeat;
background-color: #ffffff;
background-position: left ;
height : 50px;
}

#text {
position: relative;
float: left;
width: 80%;
background-color: #ff9a2f;
padding: 5px;
}

#menu {
position: relative;
float: right;
}

HTML:

<body>
<div id="main">
<div id="banner">
<div id="logo">
<img src="logo.jpg" align="right">
</div>
</div>
<div id="text">
Апельси?н (от нидерл. appelsina – «китайское яблоко») — плод апельсинного дерева (Citrus sinensis), родом из Китая. Гибрид, полученный ещё в древности, по видимому смешением мандарина (Citrus reticulata) c помелом (Citrus maxima). Дерево привезено португальцами в Европу и растёт теперь хорошо по всему побережью Средиземного моря, а также в Центральной Америке.

Довольно высокое дерево, относится к семейству Рутовые (Rutaceae) и к его подсемейству Цитрусовые(Citroideae). Цельные многолетние листья апельсина соединяются со своими крылатыми черешками посредством промежуточного широкого сочленения. Белые цветы сидят по 6, кистями и состоят из 5-раздельного малораскрывающегося околоцветника с толстыми долями, множества тычинок и одиночной свободной, или «верхней», завязью (известные «fleurs d’orange»).

</div>
<div id="menu">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
<li>link5</li>
</ul>
</div>
</body>

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

В помощь фотожоперу - рисуем иконки

На выходных я решил внести в блог немного креатива. Одним баннером в шапку блога решено было не ограничиваться, и продолжить беснования дальше. Сегодня у нас - туториал по отрисовке иконки электрической почты для сайта.

Вот такой:


Для начала - создадим новый файл, размером 128*128 пикселей. С помощью направляющих (направляющую можно "стащить" с боковой, или верхней линейки документа с помощью зажатой левой кнопки мыши) расчертим квадрат:


Затем, нарисуем по направляющим путь (Path1):


С помощью Edit->Transform->Perspective построим нужную нам перспективу отображения конверта:


Нарисуем новый путь, который будет отвечать за внутреннюю часть конверта (Path2):


Преобразуем пути в выделения и зальем нужными цветами:


Скопируем слой, и, полностью залив его черным, немного сдвинем относительно основного, чтобы придать заготовке конверта объем:


Преобразуем Path2 в выделение (как это сделать, рассказано тут) и наложим в режиме Multiple небольшой градиент. А также, нарисуем линию сгиба:


Нарисуем тень от самого конверта внутри (на ней установлен крестик курсора):

Как это можно сделать, я предлагаю вам догадаться самим :-)

Сейчас мы будем придавать объем самому конверту. Нарисуем новый путь:


Конвертируем его в выделение и зальем градиентом:


Проделаем ту же операцию для нижней части конверта:


Дорисуем линии склейки:


Теперь приступим к рисованию печати. Для этого нарисуем круглое выделение, и зальем его цветом:


Нанесем на печать блики и тени:


Добавим еще один градиент в режиме Multiply на верхний уголок конверта:


Поставим на печать значок электрической почты. И немного подкорректируем его перспективу:


Зальем фон изображения цветом бэкграунда сайта. Затем, склеим все слои (Ctrl+Shift+E). Скопируем изображение, и, с помощью команды Edit->Transform->Flip Vertical зеркально отобразим по вертикали. Подгоним края двух конвертов:


На слой с перевернутым конвертом наожим маску (иконка наложения маски на картинке подчеркнута красным), и зальем маску градиентом:


Все, иконка готова.
Надеюсь, всем понравилось.

Хостинг изображений - imageshack.us

Про ссылки и браузеры

Читаю вот статьи по юзабилити сайтов - и мучит меня один вопрос: все, как один, оптимизаторы и юзабилитисты утверждают, что все, все ссылки на странице (и внешние, и внутренние) должны открываться в том же самом окне (сейчас уже корректнее и актуальнее говорить: "в той же самой вкладке"), в котором открыт сам сайт.
Сам я люблю открывать все ссылки в новой фоновой вкладке. В Опере это просто - тырц колесиком на ссылку, и она открывается в новой фоновой вкладке. Причем, прелесть Оперы в том, что после закрытия вкладки активной становится не предыдущая вкладка, а последняя активная.

Вот и стало мне инетесно, что думает по этому поводу всемогущий vox populi. Решил опрос новый завести. Посмотрите, проголосуйте.