На мой взгляд успешный блог это: хороший контент, дизайн и раскрутка и продуманная структура. Сегодня я бы хотел поговорить именно о дизайне ваших блогов, о тех моментах, которые мы часто упускаем. Я выделил для себя 8 обязательных пунктов дизайна блога, которые обязательно должны быть соблюдены:
1. Favicon (Фавикон). Многие думают какую роль может играть крошечная картинка 16 × 16 пикселей? А вы знали, что эти 16 пикселей могут очень хорошо дополнять ваш фирменный стиль, ведь когда у пользователя открыто много вкладок, то он видит только заголовки сайтов и фавиконки. Если ваш читатель поместит ваш сайт в закладки, то он его не потеряет, так как он будет выделяться своей фавиконкой, поэтому фавикон должен быть обязательной частью дизайна сайта. Это может быть один маленький шаг для вас, но это будет один гигантский скачок для вашего блога.
Чтобы создать фавиконку, вы можете воспользоваться любым графическим редактором, после чего преобразовать рисунок в фавиконку с помощью фавикон генератора.
После создания фавиконки, закачайте её в корень вашего блога и пропишите в вашей теме в рамках кода <head></head> (header.php) следующий код – <link rel=”shortcut icon” href=”http://www.yoursite.com/favicon.ico”>
Если вы не можете придумать себе фавиконку, то вы можете поискать вдохновения здесь.
2. Используйте градиенты, текстуры и тени, а так же 1 пиксельные линии. С помощью этих элементов вы сможете добавить вашему блогу элегантности и сделать его поистине запоминающимся. Потратьте время и сделайте ваш блог таким, чтобы первое впечатление он всегда оставлял только положительное. Не забывайте – первое впечатление самое важное.
Полезные ресурсы: Более 5000 градиентов для фотошопа , Текстуры для вашего сайта , Отличная подборка текстур для вашего блога.
3. Не бойтесь оставлять пробелы в дизайне блога. Лично я постоянно останавливаю себя на мысли, что мне кажется дизайн слишком размашистым и имеет много пустого места, а на самом деле это выглядит минималистично и многим нравится. Так же дополнительные пробелы исключают награмождённость и помогают выделить содержимое сайта.
4. Используйте несколько колонок в дизайне. Редко удаётся реализовать полную функциональность в одну колонку, поэтому разносите сайт на несколько колонок, так будет удобнее для пользователей сайта.
5. Не используйте неизвестные шрифты, сделайте шрифт максимально понятный для ваших читателей. По дизайну и типографике рекомендую к прочтению это и это.
6. Сделайте дизайн для тегов списков, нумерации, цитат. Эти небольшие дополнения добавят живости в ваш текст. Про дизайн цитат можете почитать на хабре.
7. Уделите внимание дизайну блоку комментариев и форме комментирования, желательно выделить ответы автора, так как большинство посетителей ищет именно их. Если вы используете отображение трекбеков, то их нужно выносить за список комментариев, чтобы не было каши из трекбеков и комментариев. Ниже я привёл несколько примеров хорошего оформления комментариев.
8. Используйте иконки в дизайне. Самое главное чтобы иконки хорошо вписывались в дизайн и не нарушали его общую концепцию. Найти подходящую иконку не сложно, так как в Интернете есть тысячи разнообразных иконок на любую тематику. В идеале конечно разработать ряд иконок именно под ваш блог. Так же обязательно прописывайте к иконкам путь куда они ведут, так как ваши читатели должны знать, что их ждёт за симпатичной картинкой. Так же иконки придают понятность многим элементам сайта, что несомненно является большим плюсом.
Полезные ресурсы: Сервис поиска иконок , 75 качественных подборок иконок.
Решил попробовать новый формат вывода первой картинки поста, как вам?
Оставь комментарий к этой статье и попади в топ комментаторов.
веб дизайн
Loading ...
Нормально, а то бывает что если выводить картинку слева то текст не совсем ровно лежит.
Ответить
| 08.10 в 08:56
Хорошо, учту.
Ответить
“Решил попробовать новый формат вывода первой картинки поста, как вам?”
ИМХО рамка у картинки немного толстая, а так гуд.
Ответить
| 08.10 в 08:57
Это 3 пикселя, думаешь до 1 или 2 поставить?
Ответить
Дизайн – лицо сайта. К сожалению много еще где вижу выравнивание текста постов left. Неужели нельзя залезть в стиль и изменить 1 строчку…. если уж шаблон был (C)перт.
Не так давно один человек попросил сайт накидать простенький. Надо было видеть его глаза, когда он увидел favicon с лого своей фирмы. Он считал что такие иконки только по великому блату и за большие деньги
Ответить
| 08.10 в 09:19
Согласен, многие заказчики даже не представляют, что можно сделать за приемлемые деньги хороший сайт с качественным дизайном.
Ответить
Прошу прощения, но структура сайта среди важных вещей как-то не отмечена. Мне кажется, зря… Ведь если нет структуры, любой сайт и блог даже с хорошим дизайном может превратиться в неуспешный! Когда все проекты автор мешает в одно целое, создаётся ощущение мусорного ведра (хотя по дизайну ведро может быть очеееень симпатичным).
Ответить
| 08.10 в 09:23
Верное замечание, дополнил.
Ответить
>Найти подходящую иконку не сложно
Ну не скажи. Как то пытался найти подходящие иконки твиттера и rss для своего блога (чтобы были в одинаковом стиле и вписывались в дизайн).В итоге ничего подходящего не нашел и пришлось рисовать самому.
ИМХО, проще самому сделать такую, как надо, чем искать.
Ответить
Солидарен с [m.k] ^^
Ответить
Не согласен. Коллекций иконок полно. Подобрать проблем думаю не составит. Ну в крайнем случае вон на глобатора сходите. Пара уроков фотошопа, и самому можно простенько, но со скусом иконку состряпать.
Ответить
Насчет вписывания в дизайн иконок популярных сервисов: сейчас полно вариантов таких иконок. Остается только скачать и в фотошопе цвета поменять, дело одной минуты.
Ответить
Иконка это, что, картиночка перед твоим блогом или сайтом на странице поисковика!? Если да! То огромное Вам спасибо! А то я, пока что “чайник” в этих делах. И вот уже сколько времени не могу сообразить как ее сделать! Теперь беду выбирать! А то, как то ни так! Практически у всех есть, а у меня нет! Да и самому искать на много легче! Спасибо Вам, еще раз!!
Ответить
| 19.10 в 15:44
Эта картинка называется Favicon
Ответить
Пузат, дорогой, в ОПЕРЕ твой блог имеет ужасный вид (глянь здесь скриншот: img.skitch.com/20091031-ts1t1aesnrup4a8qm8wfnr1346.jpg)
Часть комментариев отображается нормально, часть нечитаема практически, ибо куда-то исчез фон.
Дальше, странно работает поиск: ввожу ПОЛНОЕ название поста (например, “День 31: Правильный обмен ссылками” или просто “Правильный обмен ссылками”), мне сообщают, что ничего не найдено
Дальше, невозможно избавиться от выделения, который сделал Поиск! Обновляю страницу – один хрен торчат жёлтые, фиолетовые, зелёные краски
Ответить
| 01.11 в 15:50
1. Какая версия Оперы у вас?
2. С поиском вообще беда в wordpress, стандартный плохо ищет по словоформам, а доработанные плагины плохо ищут по длинным фразам.
3. Выделение искомых слов убрал.
Ответить
Ага… отправила камент (причём процесс отправки отображался где-то на уровне подвала, почти невидный на пёстром фоне), он не появился сразу. Перезагрузила страницу – на место встал бекграунд, появился мой камент, но выделение цветом, которое сделал Поиск, осталось…
Ответить
Пузат, версия Оперы – 9.54.
Сейчас, зайдя по ссылке из почтовика), увидела, наконец, страницу нормально. То ли ты что-то сделала, то ли глюк с бекраундом возникает, если заходить к тебе по ссылке из поисковиков (а именно так я зашла вчера).
А ты не хочешь заюзать Поиск от Гугла? Я поставила его себе – отлично ищет по чему хочешь…
Ответить
| 02.11 в 11:09
Бекграунд конечно покручу, но пока не могу ничего найти. А вот по поводу поиска от Google точно, нет, так как он там рекламные объявления суёт, а мне это не надо.
Ответить
Да! А почему камент не появляется сразу? Приходится перезагружать страницу, чтобы увидеть его.
Если не перезагрузить и начать писать сразу следующий камент (как я делаю сейчас), то при попытке отправить Опера выдаёт такое окошко:
————————
Sorry, there was an error. JavaScript and Cookies are required in order to post a comment.
Status: JavaScript is currently disabled.
Please be sure JavaScript and Cookies are enabled in your browser. Then, please hit the back button on your browser, and try posting your comment again. (You may need to reload the page)
If you feel you have received this message in error (for example if JavaScript and Cookies are in fact enabled and you have tried to post several times), there is most likely a technical problem (could be a plugin conflict or misconfiguration). Please contact the author of this blog, and let them know they need to look into it.
——————————
Сейчас попытаюсь отправить с сохранением оформления, так, я вижу это сообщение в Опере (бог весть, какие у тебя тут html теги работают, а какие нет…)
Ответить
| 02.11 в 11:12
Это отключенный Javascript в вашем браузере даёт ошибку.
Ответить
Аха, теги скушались (а я обрамляла их
... а чем надо?). Короче, все теги, которыми обрамлялось сообщение (, и тыды) были видны.К слову, ява с куками у меня всегда включены.
Ответить
| 02.11 в 11:12
Хм, тогда странно, буду разбираться, скорее всего дело в плагинах.
Ответить
Дизайн – это хорошо. Но, функциональность должна быть проверена от и до. У некоторых блогеров просто на блоге не получается оставить комментарий, а он потом удивляется – “ЧТо такое, никто комменты не оставляет?”.
Ответить
Сочетаем приятный дизайн с юзабилити и получим хорошую картину.
Ответить
Общий вид сайта, его красота и юзабилити, правильность работы, отсутствие ошибок – всё это лицо сайта. Фавиконку очень желательно ставить. Например в выдаче Яндекса фавикон будет отображаться в строке выдачи и привлекать дополнительное внимание к сайту.
Ответить