X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Юзабильность vs. Дизайн
FordogeN
FordogeN
Topic Starter сообщение 3.12.2008, 5:38; Ответить: FordogeN
Сообщение #1


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

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

Приведу пример на своем сайте - www.livekeep.ru.
[img]http://www.ii4.ru/images/270079like.jpg[/img]
В этой версии дизайна я использовал 3 основных цвета: белый, бирюзово-голубой, светло-желтый. Но в логотипе у меня так же присутствует зеленоватый цвет, если по листаете страницу - ниже ели-заметные светло-серые элементы дизайна.

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

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

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



На сайте, с любой его внутренней страницы должна быть прямая ссылка на главную и не желательно чтоб на странице на которой мы находимся - была ссылка на эту же страницу. А еще - навигация должна быть построена таким образом, чтоб к примеру если посетитель отошел сделать кофейку и вернулся назад - мог сразу понять, на какой странице он находится - это можно изобразить, как выделение нужного пункта меню цветом или использовать вот такую вспомогательную навигацию:
[img]http://www.ii4.ru/images/190975nav.jpg[/img]
Так же можно использовать в качестве выхода из этой ситуации титлы страниц и заголовки.

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

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

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

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

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

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


--------------------


Поблагодарили: (4)
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Galeodor
Galeodor
сообщение 3.12.2008, 10:38; Ответить: Galeodor
Сообщение #2


Молодец =)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
FordogeN
FordogeN
Topic Starter сообщение 3.12.2008, 12:45; Ответить: FordogeN
Сообщение #3


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


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZiTosS
ZiTosS
сообщение 3.12.2008, 21:36; Ответить: ZiTosS
Сообщение #4


Хотелось бы почитать про различные виды сетки в дизайне. Какие сейчас актуальны(не движковые), в чём их принципиальное различие.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
FordogeN
FordogeN
Topic Starter сообщение 3.12.2008, 22:06; Ответить: FordogeN
Сообщение #5


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


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZiTosS
ZiTosS
сообщение 3.12.2008, 22:24; Ответить: ZiTosS
Сообщение #6


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

Просто форум под данное описание не подходит.
Я имел ввиду различное креативное расположение контента на странице ;)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
FordogeN
FordogeN
Topic Starter сообщение 3.12.2008, 22:32; Ответить: FordogeN
Сообщение #7


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


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Gaia
Gaia
сообщение 6.12.2008, 12:35; Ответить: Gaia
Сообщение #8


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


В таком случае, как же быть, если надо оформлять текстовую часть? Например, заголовки выделять одним цветом, ссылки - другим, основной текст - третим, важные моменты - четвертым :)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
FordogeN
FordogeN
Topic Starter сообщение 6.12.2008, 13:34; Ответить: FordogeN
Сообщение #9


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


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


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Gaia
Gaia
сообщение 6.12.2008, 13:42; Ответить: Gaia
Сообщение #10


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


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Делаю полностью уникальный дизайн для сайтов!
46 AlexDIZ 93439 26.3.2024, 20:03
автор: AlexDIZ
Открытая тема (нет новых ответов) PRO дизайн: для маркетплейсов и соц. сетей, разработка сайтов, логотипов и иллюстраций!
26 OlgaMcField 7606 11.3.2024, 10:13
автор: OlgaMcField
Открытая тема (нет новых ответов) Дизайн сайтов и прочей графики
3 sapernik 4524 4.2.2024, 17:34
автор: Vikbit
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыКачественный современный дизайн сайтов, логотипов, печатной продукции. Верстка.
26 zaiko 17159 30.1.2024, 18:10
автор: zaiko
Открытая тема (нет новых ответов) СОЗДАНИЕ : / САЙтЫ / ЛЕНДЫ / БОТЫ ТГ / ВАЙТЫ / КРЕО / СОФТЫ / ДИЗАЙН [PHP, JS, HTML/CSS] и другое
5 CULA 3289 19.12.2023, 18:55
автор: CULA


 



RSS Текстовая версия Сейчас: 28.3.2024, 15:04
Дизайн