RSS-лента

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

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

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

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

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

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

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

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

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

dizain

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

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

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

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

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

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

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

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

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

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

vkladki

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

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

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

Заключение.

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

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

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

Apr
6

Популярные социальные кнопки. Кнопки социальных сетей для сайта

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

Mar
28

Плавное увеличение картинки миниатюры записи при наведении курсора

Всем привет. Недавно, бродив по сети я наткнулся на один очень интересный CSS эффект — плавное увеличение изображения при наведении курсора. И задумался, а где у себя на блоге можно его использовать? Конечно же в рубриках записей, для увеличения картинок миниатюр записей.  И сегодня я вам расскажу как я этого добился.

Mar
14

Красивый CSS эффект затемнения

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

Mar
2

Делаем красивый футер сайта

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

Feb
14

Делаем стрелку вверх на JQuery и CSS

Добрый день, уважаемые читатели блога «Золотой серфер». Сегодня мы с вами займемся установкой кнопки, которая поднимает страницу вверх. Как правило, такие стрелки вверх создаются при помощи скриптов JQuery, а для оформления и места расположения стрелки используется CSS. По-моему самое удобное место кнопки в правом нижнем углу, там мы ее сейчас и будем делать.

Feb
13

CSS эффекты при наведении

Всем привет. Сегодня мы рассмотрим, очень интересные эффекты CSS которые можно реализовать при оформлении дизайна сайта.  Эффекты очень красивые и могут быть использованы к примеру в качестве галереи изображений или аватарки в комментариях.

Jan
22

Изображения wordpress с водяным знаком — Watermark.

Всем привет сегодня я расскажу, как сделать на своем блоге WordPress изображения с водяным знаком — Watermark. Лично я не  использую водяные знаки на блоге, даже если это уникальные изображения, которые нарисовал сам. Однако многие веб-мастеры на фото-блогах (и не только) не чувствуют себя защищенными, если их картинки не защищены, каким-нибудь опознавательным знаком подтверждающим, что данное изображение — это их творение и собственность.

вверх