cordeie

Дизайн

Опубликовано: 11 Февраль 2010 Автор: cordeie

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

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

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

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

Суть вот в чем: Шаблон, любой, имеет в своей основе картинки, из которых все и состоит. Изменив картинки, мы так ли иначе изменим дизайн. Мы просто берем картинку из шаблона, открываем ее в редакторе, также открываем и ту картинку, которой ее собираемся заменить, и смотрим, насколько они сопоставимы друг с другом. Вот что я имею ввиду:

Картинка которую изменяем – основной цвет черный, фон белый

Картинка которой заменяем – основной цвет зеленый, фон черный.

Сделать что-то тут можно, но это будет трудно, и может получится некрасиво. Нужно что бы фон был бесцветным (форматы .png,  .gif) или что бы они совпадали. Если в твоем случае все ок, то просто берешь, и вырезаешь вторую картинку(плохой дизайн), в первой(хороший дизайн), и заменяешь ее. Получится, что ты таким образом перенес один элемент. Их (элементов) может быть несколько, нужно заранее знать, удастся ли такое провернуть со всеми, иначе затея изначально не имеет смысла.

Таким образом можно изменить практически все, в зависимости конечно от общей сложности дизайна. Например сменить фон, вид таблиц, блоков, логотип, иконку (favicon) не проще простого. Для этого не нужно даже редактировать CSS шаблона, ведь все пропорции будут теми же, просто изменятся сами картинки. Для работы, я использую обычный Paint.NET  3.5.3 мне его вполне достаточно.

В любом случае, менять придется:

Логотип

Самый простой способ, просто написать текст (название сайта) в Paint. Сохранить как рисунок, желательно желательно в форматах .png и .gif, т.к они позволяют использовать бесцветный фон, что необходимо если фон, на котором размещен логотип, не имеет одного какого-то определенного цвета, и подобрать его трудно. Если фон все-таки именно такой, непонятного цвета и подобрать его в Paint невозможно, а картинка логотипа не бесцветная, то нужно найти (обычно либо index.php, index.html или header.php, header.html) строчку отвечающую за вывод картинки, и изменить там расширение файла на .png, после чего создать логотип без фона.

favicon.ico

Это обычная картинка, как правило не больше 16х16 пикселей.  Создать ее можно просто изменив расширение любой картинки соответствующего размера на .ico при этом картинка может изначально иметь любое расширение. Для некоторых движков, например для DLE, помимо этого нужно вставить в исходный код шаблона тег, отвечающий за вывод favicon.

Тег для DLE:

<link rel=”shortcut icon” href=”{THEME}/images/favicon.ico” />

Или так, если вариант выше почему-то не сработал:

<link rel=”icon” href=”{THEME}/images/favicon.ico” type=”image/x-icon”>
<link rel=”shortcut icon” href=”{THEME}/images/favicon.ico” type=”image/x-icon”>
<link href=”favicon.ico” rel=”shortcut icon”>

Код прописывается в main.tpl  перед тегом <head> а саму favicon.ico нужно положить в директорию /твоя тема/images/

Переходим наконец к контенту.