Перейти к содержимому

Сервис обмена электронных валют


Юзабильность vs. Дизайн

#1 FordogeN

FordogeN
  • Пользователь
  • 1 414 сообщений
  • Репутация: 0
0

Отправлено 03 Декабрь 2008 - 04:38

Что такое дизайн, думаю объяснять не нужно. Что такое "юзабильность" - объясняю:
Это не по боюсь так выразиться "наука" о том, как делать удобные для использования дизайны.
Дизайн - не обязательно сайта! Это может быть журнал, игровой или программный интерфейс...
Но по скольку это форум ВЕБ-мастеров - речь пойдет о дизайне и юзабильности дизайна сайтов.

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

Приведу пример на своем сайте - www.livekeep.ru.
Изображение
В этой версии дизайна я использовал 3 основных цвета: белый, бирюзово-голубой, светло-желтый. Но в логотипе у меня так же присутствует зеленоватый цвет, если по листаете страницу - ниже ели-заметные светло-серые элементы дизайна.

Но обратите внимание - 3 основных цвета:
везде БЕЛЫЙ фон и СВЕТЛО-СЕРЫЕ элементы дизайна
Голубоватая шапка, все ссылки примерно того же цвета, категории в виде облака тегов - при наведении обретают синий фон.
И по всему сайту светло-желтое меню.

Можете по смотреть на сайт beon.ru - там преобладает белый цвет, и каждый блок выделен своим цветом, но при "многоцветности" сайт не теряет юзабильности.

Ладно, пора завязывать тему про цвета, поехали дальше!



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

Еще пару слов о навигации - в ней обязательно должен присутствовать пункт "О нас" или "О проекте" и на соответствующей странице должен быть соответствующий контент))) Это я упомянул затем, чтоб если появится тот, кто захочет разместить рекламу на сайте - он мог в этом разделе найти какие либо статистические или контактные данные, а так же на этой странице можно написать описание сайта с ключевиками!

По поводу контента - никогда не делайте фон и текст похожих цветов, не делайте ярких фонов и не ставьте в качестве фона картинки с четкими линиями которые контрастируют с фоном!

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

Не забывайте о том, что разные люди используют разные браузеры и сидят под разными разрешениями экрана - делайте "резиновые дизайне" т.е. не привязывайте элементы к определенным точкам. Не вставляйте изображения, которые шире чем 1024 пиксела, т.к. на данный момент 45% пользователей, в том числе я используют разрешение 1024*768. Не вставляйте чего либо, чтоб не было горизонтального скроллинга - это не допустимо!

Так же - не размещайте много всяких счетчиков и баннеров - много рекламы не нравится пользователям!

Пока что всё. Спрашивайте что интересует - отвечу! ;)

 

 

  • 0

Как настроить выдержку и диафрагму зеркального фотоаппарата



#2 Galeodor

Galeodor
  • Пользователь
  • 1 172 сообщений
  • Репутация: 2

Отправлено 03 Декабрь 2008 - 09:38

Молодец =)
  • 0

#3 FordogeN

FordogeN
    Topic Starter
  • Пользователь
  • 1 414 сообщений
  • Репутация: 0

Отправлено 03 Декабрь 2008 - 11:45

спасиб.. эт первая мной написанная статья ;)
  • 0

Как настроить выдержку и диафрагму зеркального фотоаппарата



#4 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 03 Декабрь 2008 - 20:36

Хотелось бы почитать про различные виды сетки в дизайне. Какие сейчас актуальны(не движковые), в чём их принципиальное различие.
  • 0

#5 FordogeN

FordogeN
    Topic Starter
  • Пользователь
  • 1 414 сообщений
  • Репутация: 0

Отправлено 03 Декабрь 2008 - 21:06

Ты имеешь ввиду разметку?
  • 0

Как настроить выдержку и диафрагму зеркального фотоаппарата



#6 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 03 Декабрь 2008 - 21:24

Нет именно сетка, вот на форуме сетка такая(рисунок рисовать лень):
сверху-вниз
1) Шапка
2) Пользовательская панель
3) навигация
4) Блок с топиком и сообщениями
5) Блок быстрого ответа
6) Блок надстроек
7) Низ страницы

Просто форум под данное описание не подходит.
Я имел ввиду различное креативное расположение контента на странице ;)
  • 0

#7 FordogeN

FordogeN
    Topic Starter
  • Пользователь
  • 1 414 сообщений
  • Репутация: 0

Отправлено 03 Декабрь 2008 - 21:32

ну это и есть разметка! По крайней мере я это так называю... ;)
  • 0

Как настроить выдержку и диафрагму зеркального фотоаппарата



#8 Gaia

Gaia
  • Пользователь
  • 20 сообщений
  • Репутация: 0

Отправлено 06 Декабрь 2008 - 11:35

но основные элементы - не должны выходить за рамки 3х цветов


В таком случае, как же быть, если надо оформлять текстовую часть? Например, заголовки выделять одним цветом, ссылки - другим, основной текст - третим, важные моменты - четвертым :)
  • 0

#9 FordogeN

FordogeN
    Topic Starter
  • Пользователь
  • 1 414 сообщений
  • Репутация: 0

Отправлено 06 Декабрь 2008 - 12:34

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


3 цвета, а у каждого цвета миллионы оттенков...
  • 0

Как настроить выдержку и диафрагму зеркального фотоаппарата



#10 Gaia

Gaia
  • Пользователь
  • 20 сообщений
  • Репутация: 0

Отправлено 06 Декабрь 2008 - 12:42

Ну, ведь не будем же оформлять текстовую часть, со всеми заголовками, ссылками, важными мометами одним цветом, просто с разными оттенками. Ссылки, вообще, должны быть не похожи не на один элемент текста, ведь так? :) Это уже 2 цвета (текст и ссылки).
Заголовки должны тоже отличаться от текста(хоть и не сильно, да, здесь согласен, оттенок). Но, ведь бывают ещё такие случаи, например в интернет магазинах, когда надо отделить товар и описание товара, но заголовок должен оставаться. Выделять его как заголовок?
  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru