webew
Войти » Регистрация
 
HTML :: Дизайн

10 советов по улучшению дизайна сайта недизайнерами

24 июня 2008, 16:22
Вследствие частых обращений ко мне за парой советов «как улучшить дизайн сайта» я на примере Webew написал 10 правил, следуя которым недизайнер может сделать свой сайт приятнее для чтения посетителями.

1. В теории сайту логотип не нужен. Но мы живем в мире условностей, логотип это круто и он должен быть. Естественно, что хороший логотип даже дизайнер сайтов просто так не нарисует (совершенно другая специфика), поэтому отсюда правило: если некому нарисовать хороший логотип — логотип напишите (и сверстайте) обычным текстом.

2. Не озаглавливайте навигационный блок. Помимо того, что теги (метки) это не полноценный навигационный инструмент (на webew, конечно же, дерево разделов), так еще и блок озаглавлен. Кажется, в страшном сне нельзя представить себе сайт, в котором блок «Меню» будет озаглавлен: «Меню сайта» (ага, люди с особенной фантазией могут представить себе «Логотип:», «Слоган:», посмеяться и не делать так никогда)

3. Подчеркивайте все ссылки. Все, всегда, везде, без исключений. Редкие исключения допустимы только если вы до этого сделали 100 работающих сайтов с подчеркнутыми ссылками. И да, ссылки должны быть подчеркнутыми всегда. Удивительно идиотская мода убирать подчеркивание со ссылок при наведении, что противоречит логике: если текст — ссылка, то мы делаем его отличным от другого текста, а при наведении он перестает быть ссылкой?

4. Забудьте в вебе про Justify. Его при бумажной верстке-то чтобы использовать надо у мастеров лет 5 учиться и тратить на каждую строку минуты по 2, а на вебе он вообще недопустим.

6. Весь текст набирайте 14-ым ариалом (фотошоповская метрика), и делайте интерлиньяж ~1,4 пункта.

7. Подбирать цвета удивительно просто. Смотрите, делаете меню какого-то своего «фирменного» цвета (тыкайте в любой, главное, чтобы не ядовитый и достаточно контрастный был), наборный текст делайте черным (фон белым, конечно!), а ссылки делайте синими (#369 / #069) — это и привычно людям, и хорошо выделяет ссылку.

8. Если на своем сайте у вас есть input или textarea, не применяйте к ним стили, оставьте по умолчанию, тогда на разных системах у вас они будут выглядеть так, как естественно для пользователя, а не так, как «дизайнеру показалось красиво»

9. Говорите правду и следите за русским языком: Кому нужен заголовок раздела главного меню «Статьи с меткой „HTML“». Пишите проще и самую суть: «HTML». Да-да, это тоже дизайн (более того, именно это — дизайн).

10. Если есть исчисление некой величины (количество комментариев, в примере с WEBEW), то не указывайте того, чего нет: если комментариев пока нет, то не нужно писать «нет комментариев», достаточно не писать ничего.

Михаил Танский



PS: применив эти правила для Webew получим такой макет:

Webew new design

© Все права на данную статью принадлежат порталу webew.ru. Перепечатка в интернет-изданиях разрешается только с указанием автора и прямой ссылки на оригинальную статью. Перепечатка в печатных изданиях допускается только с разрешения редакции.
Добавить комментарий
Отображение комментариев: Древовидное | Плоское
NO USERPIC

rotor

Не со всем согласен, но для "недизайнеров" советы имеют право быть.

Пункт 4 зачем? Сами ведь используете.
24.06.2008, 19:13
Ответить

bur

Заметка написана сторонним дизайнером, который, в частности, критикует "недостатки" в оформлении webew. Также она может быть полезна простым читателям.
24.06.2008, 19:23
Ответить
NO USERPIC

isusibadi

Согласен,вполне неплохо)Спасибо.
14.07.2013, 17:21
Ответить
NO USERPIC

pepelsbey

> В теории сайту логотип не нужен

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

> Не озаглавливайте навигационный блок

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

> Подчеркивайте все ссылки

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

> Забудьте в вебе про Justify

Лучше «научитесь употреблять выключку по формату, но очень осторожно».

…какой-то странный top-10. Мне кажется, что категоричность сродни узколобости.
24.06.2008, 19:26
Ответить
NO USERPIC

tansky

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

>В какой теории? Сайт — это некое онлайн-средство массовой информации.
>Для того, чтобы не потеряться в куче других, для того, чтобы можно было упомянуть сайт всего одной иконкой
>и стало бы ясно о чём речь… сайту зачастую нужен логотип.
Для того, чтобы сайту не потеряться в куче других сайтов сходной тематики (компании в куче других компаний-конкурентов) сайту (компании) достаточно просто быть лучше всех. Логотип тут ни при чем. А при чем тут иконки — вообще не понимаю.

>Есть хорошая практика — озаглавливать каждый блок в вёрстке, но прятать это в браузерном CSS
Да-да, но я не про CSS

>Однако, эффективно выделять ссылки можно не только подчёркиванием,
>а ещё и фоном, цветом и т.п. параметрами.
Во-первых, ссылки цветом выделять нельзя, потому что на сайте вообще-то может быть более одного (черного, например), цвета. То же самое и с фоном. А выделять ссылки нужно для того, чтобы не наводя на текст курсор мышки человек сразу понимал, что это ссылка (чтобы понять это, можно зайти на сайт http://zhizn.ru/ и мысленно попробовать предугадать где там ссылка, а где нет, а потом проверить, сколько у вас ошибок). И да, подчеркивание ввели не случайно. В типографской традиции нету подчеркивания, как выразительного средства, поэтому подчеркиванию не с чем конфликтовать, в отличие от цветовых выделений (конечно, лучше комбинировать, а еще назначать ховеры и визитид).

>Лучше «научитесь употреблять выключку по формату, но очень осторожно».
В вебе Justify невозможен, увы.
25.06.2008, 20:27
Ответить
NO USERPIC

pepelsbey

> Во-первых, ссылки цветом выделять нельзя, потому что на сайте вообще-то
> может быть более одного (черного, например), цвета.


Ну что значит нельзя?! Всё можно, только с умом по ситуации. Если на сайте выбран один цвет для ссылок и он используется только для ссылок, то пользователю будет понятно куда кликать. Да хоть двойной красной рамкой вокруг слова, если это выглядит гармонично. Не выдумывайте аксиомы.

> можно зайти на сайт zhizn.ru

Некорректный пример. Там ссылки вообще никак не выделены, а дизайн рисовал какой-то идиот.

> В вебе Justify невозможен, увы.

Что значит невозможен?! Ну смешно, честное слово. Аргументируйте с примерами. А я возражу с примерами удачного употребления выключки по формату.

Вы в этой статье делаете очень опасные вещи — в жёсткой форме говорите «нельзя!», вместо того, чтобы рекомендовать поступать осторожно и пользоваться мозгом, а не сводом заповедей.
25.06.2008, 22:49
Ответить
NO USERPIC

ayavryk

>Вы в этой статье делаете очень опасные вещи — в жёсткой форме говорите «нельзя!»,
Правила техники безопасности должны быть именно такими. Если кто-то хочет сделать персональную страницу, но не обладает талантами дизайнера - все 10 правил работают отлично. Впрочем для начинающего или веб-дизйнера без опыта то же подойдет. ИМХО.
26.06.2008, 10:42
Ответить
NO USERPIC

antoxa

эээх...

со многим не согласен, покритикую...

> В теории сайту логотип не нужен. Но мы живем в мире условностей, логотип это круто и он должен быть. Естественно, что хороший логотип даже дизайнер сайтов просто так не нарисует (совершенно другая специфика), поэтому отсюда правило: если некому нарисовать хороший логотип — логотип напишите (и сверстайте) обычным текстом.
Если не можете - закажите - логотип нарисовать сейчас стоит 20 баксов. Я знаю примеры, когда логотипы придавали успешность сайту.

> Забудьте в вебе про Justify. Его при бумажной верстке-то чтобы использовать надо у мастеров лет 5 учиться и тратить на каждую строку минуты по 2, а на вебе он вообще недопустим.
justify имеет место на жизнь. не вижу причин от него отказываться...

> Весь текст набирайте 14-ым ариалом (фотошоповская метрика), и делайте интерлиньяж ~1,4 пункта.
ну почему же Verdana, Tahoma, 12px очень даже неплохо смотрится.

> Подбирать цвета удивительно просто. Смотрите, делаете меню какого-то своего «фирменного» цвета (тыкайте в любой, главное, чтобы не ядовитый и достаточно контрастный был), наборный текст делайте черным (фон белым, конечно!), а ссылки делайте синими (#369 / #069) — это и привычно людям, и хорошо выделяет ссылку.
http://www.webmascon.com/topics/colors/12a.asp

> Если на своем сайте у вас есть input или textarea, не применяйте к ним стили, оставьте по умолчанию, тогда на разных системах у вас они будут выглядеть так, как естественно для пользователя, а не так, как «дизайнеру показалось красиво»
а почему дизайнеру может обязательно показаться хуже чем по умолчанию?

Вместо того что бы придумывать подобные правила, обратитесь к дизайнеру...
Если не можете, то сделайте дизайн сами, но перед этим почитайте статьи, что пишут об этих вопросах дизайнеры...
25.06.2008, 14:57
Ответить
NO USERPIC

tansky

Мм, комментарий обнаруживает в вас человека, который крайне мало понимает в дизайне, уж не обижайтесь :-)
25.06.2008, 20:30
Ответить
NO USERPIC

antoxa

А прокомментировать слабо? Или вар на пустом месте?
25.06.2008, 20:46
Ответить
NO USERPIC

tentoys

Статья имеет право на жизнь, бесспорно. Для "недодизайнеров", как Вы сказали. Но мне кажутся вполне разумные комментарии. К примеру, согласен, что если шрифт, то Arial... тогда уже Verdana, или просто -- рубленые шрифты. Размеры 14, 12, мне кажется вобще неприменим, за исключением пиксельных дизайнов, почему б сразу не привести относительные величины?
28.06.2008, 21:51
Ответить
NO USERPIC

rgbeast

Использование относительных единицы кроме того требует стандарт WAI-WCAG, чекпоинт 3.4
29.06.2008, 04:19
Ответить
NO USERPIC

rgbeast

Спасибо за взгляд со стороны. Постараюсь описать свое мнение недизайнера.

1. Недостаток CSS-логотипа (кроме отсутствия узнаваемости) в том, что используемого шрифта наверняка нет в Linux или Mac, а кроме того крупные шрифты в некоторых дистрибутивах Linux отображаются крайне криво.

2. Если опустить слово "Метки" в заголовке раздела, то перестанет быть понятно, что это метки. На webew метки структурированы и выглядят не так, как традиционное облако меток, без заголовка их можно принять за меню сайта. Например, в ресторанах меню обычно озаглавлено и никого это не раздражает, да и на клетках с тигром часто пишут, что это "слон".

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

4. Субъективно, статьи с выравниванием по ширине читаются легче.

9. Слово статьи здесь не лишнее, так как есть еще и сообщения с меткой HTML. Опять же лучше всего объяснить что именно ждет пользователя. Возможно расположение статей и сообщений на странице не оптимально, но просто HTML будет недостаточным пояснением.

10. От этого старались избавиться. Осталось при перечислении сообщений ("0 ответов").

Для недизайнеров также будет полезны следующие советы:
A. Указывать альтернативный текст для всех рисунков
Б. Проверять html на валидность, с помощью валидатора W3C
27.06.2008, 03:42
Ответить
NO USERPIC

tansky

1. Недостаток CSS-логотипа (кроме отсутствия узнаваемости) в том, что используемого шрифта наверняка нет в Linux или Mac, а кроме того крупные шрифты в некоторых дистрибутивах Linux отображаются крайне криво.
Ошибочно мнение, что узнаваемость (особенно в вебе!) проекту дает нечто, что мы называем «логотипом», а не его окружение.

2. Если опустить слово "Метки" в заголовке раздела, то перестанет быть понятно, что это метки. На webew метки структурированы и выглядят не так, как традиционное облако меток, без заголовка их можно принять за меню сайта. Например, в ресторанах меню обычно озаглавлено и никого это не раздражает, да и на клетках с тигром часто пишут, что это "слон".
У нас с bur уже была дискуссия на тему этих самых меток на Вебью, подробно тут останавливаться не буду, но вот эти недометки в том виде, в котором они сейчас — это полный кошмар. Хоть там «Любимые авторучки:» напишите над ними, всё равно все будут считать, что это меню сайта и сходить с ума от отсутствия четкого пути на сайте (короче, по-другому надо сделать)

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

9. Слово статьи здесь не лишнее, так как есть еще и сообщения с меткой HTML. Опять же лучше всего объяснить что именно ждет пользователя. Возможно расположение статей и сообщений на странице не оптимально, но просто HTML будет недостаточным пояснением.
___

Для недизайнеров также будет полезны следующие советы:
A. Указывать альтернативный текст для всех рисунков
Б. Проверять html на валидность, с помощью валидатора W3C

А вот расскажите мне, почему типографские символы типа «, —, » и прочих невалидны?
17.09.2008, 10:11
Ответить
NO USERPIC

rgbeast

Интересная статья с обсуждением применимости justify: text-align: justify. Добро или зло?
04.07.2008, 22:32
Ответить
NO USERPIC

tansky

Там как раз разобрана главная проблема: в вебе невозможно влиять на ширину межсловных пробелов, поэтому никакого джастифая на вебе.
17.09.2008, 10:13
Ответить

Serg_pnz

Я вот тоже против выключки по ширине. Уже надоело, особенно убого смотрятся короткие строки на пару слов с переносами. Откройте тот же Паблиш в разделе новостей (бумажный вариант, раз уж мы заговорили о типографике)

Еще бы добавил от себя пункт:
11. Не больше 6-8 слов на строку.

Прим.: упаришься некоторые форумы читать, а широкоформатники нынче всё больше в моде.
14.07.2008, 23:46
Ответить
NO USERPIC

tansky

Еще бы добавил от себя пункт:
11. Не больше 6-8 слов на строку.

Мне кажется, это как раз для искушенных ;-)
17.09.2008, 10:14
Ответить

Serg_pnz

tansky, нормальные требования советского ГОСТа.
Старые книги в руках приятно держать, а в новых постоянно ошибки видишь - то то, то сё. Десяток подряд идущих переносов почему-то считается нормой %-/
А уж про пробельные коридоры (не помню как правильно называются) - так вообще молчу.
17.09.2008, 13:30
Ответить
NO USERPIC

tansky

Нет, вы меня неправильно поняли :-)
Это, конечно, правильно, но мы же даем простые советы непрофессионалам :-)
А тут — ух, еще и слова считать!
17.09.2008, 13:33
Ответить
NO USERPIC

nix

Добавил свои мысли у себя http://webpeppers.ru/1.htm
И вам и нам пиар ко всему прочему.

Кстати, писал перед чтением комментариев, чтобы не быть под их влиянием.
22.09.2008, 17:15
Ответить
NO USERPIC

zinpet

не совсем согласен со многими утвержддениями... рекомендуете делать сайт "под одну гребенку" верстка это своего рода способ самовыражения и сайт должен быть уникален... но в тоже время лаконичность и правильность расположения вещей должна присутствовать безусловно...
22.10.2008, 20:49
Ответить
Добавить комментарий
Отображение комментариев: Древовидное | Плоское
© 2007—2016 webew.ru, связаться: x собака webew.ru
Сайт использует Flede и соответствует стандартам WAI-WCAG 1.0 на уровне A.
Rambler's Top100

Реклама: