Это мой первый серьезный перевод, основанный на статье из Information Architects. Помимо общего великолепия этой теории, она также позволит моим читателям понять, чем я руководствовался при редизайне этого сайта. Всем очень советую уделить время на чтение и жду в комментариях.
Большинство сайтов наполнены текстом мелкого размера, который читать без боли нельзя. Почему? Нет никакой причины вдавливать столько информации на один экран. Это просто глупая коллективная ошибка, которая берет начало с тех лет, когда экраны были очень-очень маленькими. Так вот...
Экран против журнала: 100% — это НЕ много. Фото — Вилсон Майнер.
Не говорите нам настраивать размер шрифта
Мы не хотим менять настройки браузера каждый раз при посещении сайта!
Не говорите нам, что заполненные страницы лучше смотрятся
Переполненные сайты не выглядят хорошо — они выглядят мерзко. Забрасывание страниц различным мусором никогда еще не улучшало юзабилити. Это лень, которая заставляет вас бросаться всеми видами контента в нас (пользователей). Мы хотим, чтобы вы думали и изначально выбирали, что важно, а что нет. Мы не хотим делать эту работу за вас.
Не говорите нам, что прокрутка плоха
Потому что тогда все сайты плохи. Нет ничего плохого в прокрутке. Совсем ничего. Так же как нет ничего плохого в переворачивании страниц в книгах.
Не говорите нам, что текст не важен
95% от того, что принято считать веб-дизайном — это типографика.
Не говорите нам одеть очки
Лучше перестаньте лизать экран, откиньтесь на спинку кресла и продолжайте читать в расслабленном положении.
Пять простых правил
1. Стандартный размер шрифта для длинных текстов
Тот размер, что вы видите на сайте http://informationarchitects.jp/100e2r/ не большой. Это то, что браузеры отображают по умолчанию. Это размер, который браузеры должны были отображать.
Мы не хотим кликать нажимать на кнопки «больше» или «меньше», и мы не хотим менять наши настройки. Мы хотим читать с ходу. Мы хотим, чтобы вы подстраивались под наши настройки, а не наоборот.
Изначально, гораздо сложнее создать хорошую разметку с большим текстом, но эта сложность поможет вам сделать дизайн сайта проще и чище. Забить сайт информацией не сложно, но сделать результат простым и удобным в использовании — да. Поначалу, вы будете шокированы, насколько большим является текст по умолчанию. Но спустя денек, вы не захотите видеть ничего меньше чем 100% в качестве размера для основного текста. Он кажется большим на первый взгляд, но после того, как вы его используете, вы быстро поймете, почему производители браузеров выбрали этот размер по умолчанию.
2. Активное использование пустого пространства
Дайте вашему тексту дышать. Использование пустого пространства — не прихоть дизайнера. Это не дело вкуса.
Джозеф Мюллер-Брокманн, Модульные системы в верстке.
Наличие воздуха вокруг текста уменьшает уровень стресса, давая возможность легче сфокусироваться на главном. Нет нужды заполнять все окно. Преимущества пустого пространства — не сторонний эффект. Это логическое следствие функционального дизайна. Кто сказал, что сайт должен быть переполнен объектами?
Пожалуйста, убедитесь, что ширина строки (ширина колонки, столбца) не очень велика, и что вы оставили места слева и справа, чтобы глазу было легко читать текст. Мы не хотим настраивать ни размер текста, ни размер окна. Когда мы открываем сайт, мы хотим просто начать читать. Ширина колонки, которая растягивается — это хорошо. Никогда не заканчивающиеся строки текста — нет.
Хороший Нильсон — Плохой Нильсон
«Король Юзабилити» недавно добавил белого пространства и максимальную ширину столбца в своих статьях (на скриншоте слева). Старая разметка тянулась до 100% (на скриншоте справа). Немного больше места между строками и можно праздновать!
Простое правило: 7-11 слов на строку; для тянущихся дизайнов, при 100% размере шрифта — 50% на ширину колонки (относительно размера окна) — отличный эталон для большинства разрешений экрана.
3. Дружественный к читателю интерлиньяж
Вот, что говорит специалист по чтению:
Интерлиньяж, установленный в HTML по умолчанию, слишком мал. Если вы увеличите его, то текст станет более читабельным. 140% — хороший ориентир.
4. Отчетливый контраст цвета
Это даже не нужно говорить. Но если вы до сих пор верите, что можно использовать одну из этих комбинаций:
1. светло-серый текст на еще более светло-сером фоне
2. «серебряный» текст на снежно-белом фоне
3. серый текст на желтом фоне
4. желтый текст на красном фоне.
5. зеленый текст на красном фоне, и так далее...
... то вы не веб-дизайнер, а просто «дизайнер с точкой зрения» (смысл этой метафоры не очень ясен, следует читать статью по ссылке, — прим. переводчика). Если же вы настаиваете на том, что вы веб-дизайнер, тогда вам должно быть известно, что никто никогда не узнает то, что вы хотите сказать, если не сможет это прочитать. Так что отбросьте этот нонсенс и дайте нам увидеть то, что вы печатаете. На заметку: для экранного дизайна слишком сильный контраст (чисто черный на белом) не идеальный вариант, так как текст начинает рябить. Хорошее начало: #333 на #fff.
5. Никакого текста картинками
Мы хотим иметь возможность искать текст, копировать текст, сохранять текст, играть с курсором и выделять текст во время чтения. Текст картинкой смотрится красиво, но красиво — это не суть веба. Его суть в коммуникации и информации, и информация должна быть читабельна и удобна, и маштабируема, и цитируема, и отправляема.
Если вы не можете сделать так, чтобы веб-сайт смотрелся красиво без текста в картинках, то, боюсь, что вам придется начать снова с нуля. ■
Комментарии:
Иван
й
abasovMike
Спасибо, почистил. Сейчас, заодно цитатки в комментах оформлю.
weiss
придется
Статья неплохая, но всё, что здесь написано, можно выразить проще:
1. Размером шрифта ставьте 100%;
2. Интерлиньяж ставьте 140%;
3. Следите за контрастностью текста на странице;
3. Больше свободного пространства.
Или еще проще:
Не давите на пользователя теснотой и не насилуйте его глаза.
abasovMike
Выразить-то можно. Убедить попробуй...
MaxL_uCoz
ОМГ.....
no comments
mas1k
В целом согласен.
Статья будет полезна тем, кто только начинает заниматься дизайном.
А вот исправить тех, кто пишет желтым по красному врядли получится.(
abasovMike
Ну как же для начинающих, если эта концепция противоречит всему, что делают 90% профессионалов?
almlex
>Простое правило: 7-11 слов на строку
Только нужно понимать, что слова в русском тексте получаются шире. Из-за широких букв вроде «ж, ш, щ, м, ы, ю», в то время как в английском есть сильно более узкие буквы: «j, i, l».
abasovMike
Да, конечно, но я уже адаптировал перевод, сбросив по три слова от тех, что были в оригинале – 10–15.
Maksim Rusak
На строку от 55 до 85 символов можно свалить, при этом интерлиньяж сильно зависит от длины строки: короче строка, меньше интерлиньяж.
А так, правила хороши, только в самом начале работы. Советую почитать Яна Чихольда в издательстве «ИЗДАЛ». Полезно для того, чтобы понять, что такое текст, разметка текста ;-)
P.S. Запрещать bb-коды нехорошо :-\
abasovMike
Спасибо, интересная мысль. Загляну сейчас туда.
P.S. Это не я, это какой-то баг. Настройки правильно стоят, а оно не работает...
Duck4Fuck
Статья хороша, оссобенно понравился пункт - "Мы хотим иметь возможность искать текст, копировать текст, сохранять текст, играть с курсором и выделять текст во время чтения." Как раз в это время я выделял текст, для более удобного мне чтения.
Спасибо, некоторые пункты я открыл впервые.
Zeppter
Trailmaster
Та ладно, желтый на густо-красном с отливом в кирпичный - это из любимой палитры американских кодеров времен ДОС (там еще темный сине-голубой третьим цветом). Нормально смотрится :)))
Матвей
Сделаю таое расстояние между строчками у себя в блоге:)
B@rmaley.e><e
Спасибо за заботу, Майк, но я и так знаю, какое сегодня число.
abasovMike
Поправил. спс
RipperMan
Рома
Спасибо! Прикольная статья!
Dron
От вашего дизайна глаза быстро устают.
B-Rozzy
Довольно-таки интересная и полезная статья для начинающим веб-дизайнеров.
Мни никогда не нравились сайты насыщенные поп-андерми,яркой рекламой,или что еще хуже,когда нажимаешь на любой контент или же пустое пространство,переводит на порно сайты...
Жутко...
Будьте оригинальными.
alextekkk
Крутэбэл )))
Очень и очень полезная инфа - большое спс )))
AlexPS
nibach
Отличный перевод! Очень помогло!
Фант
А вот хотелось бы получить от Вас ценные рекомендации касательно моего сайта!!
http://eu7lt.ucoz.ru/
Фант
ЭЭЭЭЭЭЭЭээээээээээээээээээээ..... Молчим-сс.......
Oleg
Новые автомобили концепт кары авто мото http://avtomoto.ucoz.ru/ вот что можно сделать с ucoz
я
backlinks
They offer how to get backlinks seo inc <a href=http://xrumerservice.org>backlink service</a> how to get backlinks Take care. Jay
wassup abasov.net admin found your site via search engine but it was hard to find and I see you could have more visitors because there are not so many comments yet. I have found site which offer to dramatically increase traffic to your blog http://xrumerservice.org they claim they managed to get close to 1000 visitors/day using their services you could also get lot more targeted traffic from search engines as you have now. I used their services and got significantly more visitors to my site. Hope this helps
dramappeace
Earn up to $3500/month just by taking simple surveys online!
I tried one of those online survey sites about 4 months ago that
say all you have to do is spend a couple of minutes filling out
some surveys and you will be making hundreds a day..... YEAH RIGHT, I didn't make anything.
I joined 7 of these stupid websites and I actually tried filling
out a couple of surveys on each site and they took forever then at
the end they wanted me to buy things or I couldn't complete the
survey.
These are complete scams so be aware!!! I couldn't believe they
were even allowed to sell such bogus products.
Then about 2 weeks ago I was watching the news and they had some
vice presidents and marketing managers of some major multi million
dollar companies talking about a site that they personally work
with to pay consumers for their opinion, A site that actually just
wants the "average Joe's" honest opinion on products and services
and is willing to pay big money to get them. for more information
clik here: http://take-survey-and-get-money.info
WaymnEnlarm
Yes, that’s right. We’ll pay you $25 when you sign up with us today!
We have an instant $25 market research survey you can take as soon as you join.
http://get-money-for-your-opinion.info
Imagine companies paying you just to get your opinion about whether or not
you like their products sound too good to be true? It isn’t.
Thousands of companies are hiring people right now to do just that!
There are opportunities worldwide, so it doesn’t even matter what country you’re from.
When you join today, you’ll have THOUSANDS of surveys at your fingertips paying anywhere from $25-$50.
You can take these online from home, on vacation or anywhere you have an internet connection.’
Now is a better time than ever to get started! Take advantage of the instant $25 survey today!
Click Below To Get Started Now:
http://get-money-for-your-opinion.info
Looking forward to working with you.
Regards,
Jenny Adams
backlink service
Get up to 100000 forum backlinks with our backlinks service & massive targeted traffic Get amazing online web traffic using best backlink service today. We are able post your marketing post up to 100’000 forums worldwide, get thousands of backlinks and incredible targeted web traffic in very short time. Most affordable and most powerful service for web traffic and backlinks in the world!!!! Your post will be published up to 100000 forums worldwide your website or blog will get instant traffic and massive increase in seo rankings just after few days or weeks so your site will get targeted long term traffic from search engines. Order now: <a href=http://xrumerservice.org>backlinks</a>