RSS-лента

Лучшие CMS интернета бесплатно для создания сайта

Дизайн сайта, технологии своими руками

веб дизайн сайта

Дизайн сайта – это первое с чем сталкивается клиент при просмотре вашего портфолио. Именно по дизайну сайта оценивается уровень вашей работы, и компании в целом.

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

Дизайн сайта и Юзабилити

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

Дизайн начальной страницы сайта

Начальная страница должна как можно быстрее и яснее ответить на следующие четыре вопроса, возникающие в моей голове, когда я захожу на новый сайт:

dizain

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

Роль навигации в дизайне сайта

Когда мы находимся на каком-то сайте, мы постоянно про себя оцениваем разработку дизайна сайта: «Эти ребята действительно хорошо все сделали?». И наша оценка является основным фактором, определяющим наше отношение к сайту. От нее зависит, придем ли мы на этот сайт еще раз или нет. Естественно, что тщательно разработанная навигация — это одна из возможностей, чтобы произвести благоприятное впечатление на пользователя.

Логотип в дизайне сайта

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

Последнее время появилась практика использовать логотип сайта в качестве кнопки для перехода к начальной странице. На мой взгляд, эту ценную идею стоит взять на вооружение всем.

Правильное размещение формы поиска в дизайне сайта

Имейте в виду, что большой процент пользователей, впервые посетив сайт, сразу начинает разыскивать в дизайне сайта что-нибудь, напоминающее окно поиска. Учитывая потенциальные возможности поиска, а также то, что многие люди предпочитают больше использовать окно поиска, чем переходить со страницы на страницу, имеет смысл расположить форму поиска в самом видном месте на сайте т.е в верхней части сайта. Однако хорошо продумайте опции ограничения области поиска (например,«только в текущем разделе»), а также опции расширения запроса (например, уточнения по названию, имени автора, номеру тома, наименованию продукта). Хорошо организован в этом плане поиск от Яндекс.

Вкладки и табы в дизайне сайта

Разработчики дизайна всегда стремятся сделать свои страницы визуально более привлекательными, но не в ущерб скорости загрузки страниц. Грамотно разработанные вкладки и табы делают страницы красивее и интереснее и при этом не увеличивают общий объем страниц. На мой взгляд, вкладки являются превосходным навигационным устройством для больших сайтов. Для того чтобы вкладки хорошо работали и создавали нужный дизайн эффект, их графика должна создавать визуальную иллюзию того, что активная вкладка находится впереди других вкладок. Именно это свойство — даже больше, чем внешнее подобие, — вызывает ощущение того, что это вкладка.

vkladki

Если ни одна из вкладок не оказывается уже выбранной в момент, когда я захожу на сайт, то нужное воздействие вкладок теряется в первые же секунды.

Название страницы в дизайне сайта

Каждая страница должна иметь название и также название страницы должно быть заметным. Разработка дизайна позиции, размера, цвета и шрифта названия должны ясно показывать, что это заглавие для всей страницы в целом. Поэтому, в большинстве случаев, текст названия страницы будет иметь самый большой размер.

Заключение.

Если эта страница грамотно разработана, то после того как у вас прояснится в глазах, вы сможете без всяких затруднений ответить на следующие вопросы:

  • Что это за сайт? (Логотип сайта)
  • На какой странице я нахожусь? (Название страницы)
  • Какие главные разделы на этом сайте? (Разделы)
  • Какие опции есть на этом уровне? (Локальная навигация)
  • Где именно я нахожусь в общей структуре сайта?(Указатели «Вы находитесь здесь»)
  • Каким образом осуществляется поиск

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

Apr
21

Эффектные табы для сайта

Всем привет. Табы можно использовать как для переключения отдельных статей, содержащих огромное количество информации, так и для помещения в них отдельно блока с новостями, категориями, подписками в общем всего, что вздумается. Сегодняшняя наша с вами задача: сделать модель табов работающую на скрипте JQuery и которая может использоваться абсолютно на любом сайте будь это WordPress, Joomla, или другая любая известная Вам CMS или на самом обычном сайте построенном на HTML.

Apr
16

Делаем ТОП комментаторов для сайта на php

Всем привет. Комментарии на блоге – это некий показатель заинтересованности читателя, к данной тематике контента и хороший показатель, того насколько живой блог в интернет сообществе. И соответственно, чем больше комментарий к постам, тем лучше для развития ресурса.

Самый распространенный способ привлечения комментаторов на блог – это сделать его dofollow. То есть оставить ссылку на автора комментария открытой к индексированию. Но, есть и более интересный способ привлечь комментаторов на блог – установить в сайдбаре виджет топ комментаторов.

Mar
1

Делаем красивое облако тегов (меток) в wordpress

Всем привет. Сегодня мы с вами будем красиво оформлять при помощи стилей оформления CSS3 метки (облако тегов). Метки — используются на сайтах для группировки записей по какому-то признаку и предназначены для удобства нахождения информации пользователем на блоге. Для вывода всех меток в WordPress используется виджет: облако меток.

Dec
26

Редизайн — проект преобразования сайта

Всем привет. Итак, что же представляет собой редизайн? Это совокупность методов, позволяющая трансформировать внешний облик сайта, его функциональность и глубинную суть. Как правило, таких изменений требуют коррективы рекламной политики или общая модификация целей проекта. Главные требования, предъявляемые к интерпретаторам, — сжатые сроки, высокое качество, безусловная выгода для заказчика.

Dec
21

Как в друпал добавить кнопку твиттера

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

Dec
7

Облако тегов для WordPress

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

Nov
9

Постраничная навигация php без использования плагина

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

вверх