RSS-лента

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

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

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

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

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

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

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

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

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

dizain

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

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

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

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

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

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

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

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

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

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

vkladki

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

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

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

Заключение.

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

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

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

Ноя
5

Оптимизация рубрик wordpress и вывод их описания.

оптимизация

Всем привет. Сегодня мы поговорим об оптимизации рубрик в WordPress. Эта оптимизация, нужна для достижения двух целей – уход от шаблонности и непосредственно оптимизация рубрик для поисковых систем.

Ноя
4

Красивое оформление кода на сайте — плагин Crayon Syntax Highlighter

cryon

Всем привет. Давненько, хотел написать статью про вордпресс плагин Crayon Syntax Highlighter — это скрипт, который помогает сделать код на вашем сайте более «читабельным» выделяя ключевые слова цветом, и добавляя нумерацию строк и делая еще многое другое.

Сен
29

reCaptcha — хорошая защита от спама

reCapcha_logo

Всем привет. Многие из вас видели такую капчу. Это не удивительно, ведь еe используют сейчас многие крупные ресурсы и движки. К примеру reCapcha используется при регистрации новых пользователей в Invision Power Board, livejournal и т.д. В общем не в последних конторах.

Как свидетельствуют копирайты проект reCapcha развивается институтом Кагнеги, а использовать ее, можно полностью бесплатно, правда нужна регистрация в системе.

Сен
27

Как сделать карту сайта

карта сайта

Всем привет. В этой статье я расскажу, как сделать карту сайта html для блога на отдельной странице вида http://youblog.com/sitemap/. Конечно только в том случае когда включен ЧПУ, если отключен, то ссылка на карту сайта будет иметь не такой красивый вид.

Сен
15

Два плагина рейтинга постов WP-PostRatings и WP-PostViews

рейтинг_2

Всем привет. Надеюсь, что у всех хорошее настроение. Так как мы сегодня рассмотрим два визуальных плагина рейтингов постов для wordpress WP-PostRatings и WP-PostViews. Какой же из них более интересен и функционален, и самое главное почему? На все эти вопросы, мы очень скоро узнаем ответы, и сделаем выбор в пользу одного из них.

Авг
24

Делаем вертикальное меню аккордеон

аккордеон меню

Добрый день уважаемые пользователи и гости блога «Золотой серфер». В сегодняшней статье мы рассмотрим создание вертикального меню — аккордеон с использованием специального jQuery скрипта и стилевого оформления на CSS3. Если Вы еще не сталкивались с таким элементом на сайте, то это обязательно рано или поздно  произойдет. На самом деле, это очень простая и красивая структура содержимого, которая требует небольшого скрипта для функционирования. Аккордеон, как правило, используется для организации дополнительной информации спрятанной в подпункте меню.

Июн
16

Ротатор баннеров на JQuery в сайдбаре

ротатор баннеров

Всем привет, сегодня мы займемся с вами созданием ротатора баннеров при помощи скрипта JQuery, и разместим его в сайдбаре нашего сайта. Но, для начала давайте определимся со всеми понятиями и формулировками.

вверх