Многие WEB мастера, рано или поздно, решаются сделать персональную страничку, блог. Блог – зеркало души, разума его владельца. На блоге, мы стараемся публиковать то, что интересно именно нам, делится впечатлениями, причем бескорыстно 
(Сателлиты не в счет ). Конечно, дизайн вашего блога так, же должен быть соответствующий, те прекрасный, стабильный и удобный (юзабилити, как нынче модно выражаться). Но как же сделать подобный? Поручить это дело дизайнеру – не то, а сделать дизайн из ничего, никогда не занимаясь подобным – сложно.
Выход просто. Нужно содрать идеи с других блогов 
. Ничего плохого в этом нету, не все родились дизайнерами. Возможно вы бы пришли к подобным плодам, но опыта у вас нету. Все что нравится вам – ваше, и не важно, кто это первый придумал.
Смысл данной статьи в том, чтобы показать вам пару-тройку примеров красивых дизайнов. Действительно красивых, удобных, стабильных и без лишней ненужной графики. Кстати, такие блоги отлично индексируются в поисковых системах, а их красота и удобность заставляют вернуться читателя на блог еще. Читать полностью »
Наверное, вы заметили, что на данном блоге, после клика по ссылке, она отмечается галочкой.
Это сделано для того, чтобы пользователь знал, какие статьи он читал, по каким ссылкам в статье он уже следовал. Сделано это конечно же не для SEO, не для повышения кликабельности по ссылкам, а всего-лишь для повышения комфортабельности и полезности чтения блога/сайта.
Сделать подобное чудо очень просто, даже не придется писать никаких JS скриптов, нужно только правильно описать ссылку с селектором visited. И так, применяем мод для WP по-порядку:
- Заливаем нашу картинку (галочку) в папку images активной WP темы, которая будет отображаться слева возле посещенных ссылок. Если у вас нету своей галочки, можете взять мою здесь.
- Открываем файл главного CSS стиля, в моем случае это type.css, и редактируем/добавляем стиль для a:visted и для a:active (чтобы стиль применялся сразу после клика по ссылке) так:
a:visited, a:active {
background: url(путь к папке с темой/images/visited.gif) 0% 52% no-repeat;
padding-left: 10px;
margin-left: 3px;
} - Если вы хотите, чтобы ссылки выделялись только в постах или только в сайдбаре, задайте class или id.
- При использовании данного мода, может проявится и баг, точнее выделение ссылки не там, где надо, а именно в ссылке-изображении. Чтобы профиксить данную проблему допишите в ваш стиль следующее:
a img:visited, a img:active {
background-image: none !important;
}
Все! Теперь ваши посещенные ссылки на сайте обрели логический вид.
Наверное не секрет, что процесс создания дизайна состоит из двух главных частей: верстка, подключение креатива – подбор цветовой палитры, добавление графики, эффектов навигации в виде различных дополнительных JS скриптов.
Самым важным в процессе создания дизайна считается таки подбор палитры цветов. Многие думают, что все-таки позиционирование блоков, те верстка является самой главной частью – нет, это ошибочное мнение, верстка является всего-на-всего фундаментом для создания дизайна. Почему? – А все просто! Как вы подберете графику не зная, какой цвет будет на вашем сайте, в каких тоннах он будет? Как вы сможете представить расположение блоков, если не будете знать в каких частях гамма темнеет, а в каких светлеет? Верстку можно корректировать в любой момент, а вот цветовую палитру в готовом дизайне очень сложно переделывать.
Для примера рассмотрим данный блог. Это самый удачный пример, который я могу привести. Именно так, потому, что вы можете наблюдать за процессом создания дизайна ибо он делается с нуля прямо в интернете. Что делалось вначале? Вы все помните, что сначала дизайн был ужасен, негармоничный, блоки сдвигались, перемещались, раздвигались, а цвета не менялись, и эти цвета портили весь дизайн. При верстке, я использовал стандартные цвета: red, blue, green, black, white, которые очень тяжело подружить. А я и не пытался. Так задумано, когда в головне ты имеешь четкую картинку дизайна, не нужно сразу бросаться верстать со своей цветовой палитрой! Так намного тяжелее ибо бежишь исправлять цвет, а верстка так и стоит не тронутая.
После создания верстки, так сказать фундамента – изменяем стандартные цвета на свои. Лучше всего подобрать 5 основных цветов, градиент – от светлого до темного. Потом нужно определится, какой блок будет светлее, а какой темнее. В примере, можно заметить, что body имеет самый темный тон background-color, а article и aside самые светлые. Затем нужно определится насчет ссылок – будут ли они повторять цветовые атрибуты body или все-же другого элемента верстки. Я сделал a:link самым темным элементом, еще темнее самого body. Представлял я себе так: body это тот же черный, что и в a:link, но он «под стеклом», а a:link уже за ним, вот и вышел эффект «прозрения». Визуально получается все очень красиво если продумать все по теории. Именно теория для начала, а потом уже будем показывать свое ИМХО. Так, же нужно определится с hover эффектами. Здесь уже и нужно показать свое ИМХО, ибо для hover сложно подобрать цвет.
Если вы начинаете делать дизайн для сайта – начинайте с верстки, а уж потом придумывайте цветовую гамму, а точнее подбирайте. Если с фантазией никак – профессия дизайнера вам не подходит, но если вы такой-же упертый, как IE6 – тогда используйте сервисы подбора палитры, к примеру вот этот .