RSS-лента

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

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

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

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

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

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

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

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

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

dizain

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

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

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

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

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

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

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

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

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

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

vkladki

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

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

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

Заключение.

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

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

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

Авг
3

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

1000-мелочей

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

Июл
27

Как сделать мобильную версию wordpress

плагин WPTouch

Всем привет. Мобильная версия wordpress делается для того, чтобы сайт корректно показывался на различных мобильных устройствах. Не испортив дизайн, сделать ее очень просто, нужно использовать специальный плагин WPTouch. Использование именно этого плагина для создания мобильной версии сайта, советуют практически все вебмастера рунета. Да и количество скачиваний его на WordPress.org перевалило отметку более 5.5 миллионов все говорит именно за то что он лучший в этой сфере.

Май
27

Как сделать флеш баннер для сайта самому

Flash banner logo

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

Май
25

Как правильно оформить текст на странице сайта

правильное оформление текста html тегами

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

Май
14

Структура сайта. Как выстроить эффективную структуру сайта

плоская структура сайта

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

Май
11

Делаем слайдер для сайта html

слайдер

Всем привет. В этой статье я постараюсь разобрать тему слайдер для сайта html. Этот дизайн элемент сайтов, из роскоши практически перерос в стандартную необходимую повседневность. Слайдер для сайтов функционален, информативен, красив и прост в установке. Итак, что же называется слайдером?

Апр
25

Как выбрать фон для сайта

танк

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

вверх