20_web-design_rules
Обращаю ваше внимание, что эти правила относятся именно к веб-дизайну!

1. Учитывайте возможности HTML-вёрстки

НЕ делайте того, чего не смог бы потом реализовать верстальщик. И, хотя современные методы позволяют в HTML-вёрстке добиться практически любых результатов, следует всегда помнить о том, что вы создаёте сайт, а не рекламный постер. Ваша задумка должна без трудностей и проблем несовместимости переносится в код, который можно будет с одинаковым результатом отобразить на любых системах. (отсюда вывод: занимаетесь веб-дизайном – изучите HTML и CSS и не сводите программистов с ума!)

2. Стандартная кнопка = input type=button

НЕ используйте подмену стандартных элементов форм изображениями-скриншотами аналогичных элементов из вашей операционной системы. Поверьте, насильно внедрённая вами кнопка в духе Windows 98 вряд ли понравится пользователям MacOS.

3. Текст должен легко читаться

НЕ мельчите текст. Кегли меньше 9 pt использовать крайне не рекомендуется. Кегли 9 и 10 pt используйте только для незначительных блоков, сносок и подписей. Основной текст публикуйте кеглем не менее 11 pt.

Продолжать читать эту статью…

Рубрики: ,

placing_objects
Автор статьи Яна Франк (Miu Mau)
Я два раза по 4 года училась графике и дизайну в вузах, и проработала в области дизайна почти 20 лет. И, тем не менее, каждый раз, когда я начинаю делать какой-нибудь макет или располагать информацию в прямоугольнике будущего вебсайта, я первым делом раскладываю все ровныи рядами.

Вторым делом я восклицаю: «Почему я это сделала?»

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

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

Продолжать читать эту статью…

Рубрики: ,

font_match5
Как подобрать шрифт, подходящий к вашей графике? В логотипе ли или в любом другом оформлении. Как вы выбираете, чем руководствуетесь?
Мы относимся к шрифту как к чему-то, что читают. А на самом деле буквы шрифта — это графические изображения. А, Б, В — это линии, углы и изгибы — изображения, с которыми мы ассоциируем звук и смысл.
Вот почему шрифт так выразителен. В то время как сам алфавит представляет информацию, напечатанные слова могут казаться игривыми или серьезными, старомодными или современными, вызывающими доверие или недоверие. То, как написано послание, его начертание интерпретируется нашим мозгом как нечто сказанное с той или иной интонацией, с теми или иными чувствами. Забавное упражнение на эту тему: когда разговариваешь с человеком, мысленно представить, “каким шрифтом” он говорит. (развивает чувствительность.)

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

Продолжать читать эту статью…

Рубрики: ,

Статью перевела и составила Окорокова Валерия.

Учиться делать красивый веб-дизайн мы будем сегодня на примере сайта A List Apart. И речь пойдёт не об использовании графики и т.п., а об общем построении сайта – о его структуре, о пустом пространстве и конечно о типографике.

Так сложилось, что веб-типографика несколько отличается от привычной нам полиграфической. Все-таки Интернет представляет собой несколько иную среду, со своими сильными и слабыми сторонами. Попытка точно воспроизвести здесь типографику печатных изданий является довольно бессмысленным мероприятием. Уже отпечатанную страницу мы не в состоянии изменить , мы не можем контролировать ни размер шрифта, ни формат самого листа. В этом плане on-line пользователь имеет больше власти, больше влияния Он может изменить размер страницы (окна браузера), и даже изменять размер шрифта по умолчанию. Плюс ко всему следует упомянуть, что и разные браузеры обладают разными возможностями работы с веб-страницами, а также и мониторы бываю разных размеров и с разным разрешением экрана. И, в итоге, мы понимаем, что к обычной печатной странице и веб-странице применимы различные требования. Однако, несмотря на эти различия, критерии оценки удачной типографики распространяются на обе эти среды.

Ну что ж, давайте перейдем непосредственно к сайту A List Apart.

Главная страница
alistapart1

Продолжать читать эту статью…

Рубрики: ,

Эту статью я размещаю здесь, потому что в ней наглядно демонстрируются особенности работы нашего зрения. В оригинале статьи речь идет о геометрических шрифтах и ошибках, совершаемых их неопытными создателями.
Не верь глазам своим.

Здесь буквы — не более чем иллюстрация; но вот как влияют на буквы оптические закономерности.

opti4eskie_zakoni
Буквы этой надписи стоят прямо.

opti4eskie_zakoni
Овалы одинакового размера в разном контексте кажутся разными; а теперь обратите внимание на размер точки над i и после слова:

opti4eskie_zakoni

Продолжать читать эту статью…

Рубрики:

1. Феличи Джеймс. «Типографика: шрифт, верстка, дизайн»
2. Чихольд Ян. «Облик книги. Избранные статьи о книжном оформлении»
3. Кричевский В.Г. «Типографика в терминах и образах»
4. Рудер Эмиль. «Типографика»
5. Шпикерман Эрик. «О шрифте»
6. Брингхерст Роберт. «Основы стиля в типографике»
7. Гордон Юрий. «Книга про буквы от А до Я»
8. Королькова Александра. «Живая типографика»
9. Лаптев Владимир. «Модульные сетки. Проектирование многополосных изданий»
10. Серов Сергей. «Конспект-программа лекций по авторскому курсу «Проектная концептуалистика»
11. www.kak.ru — сайт журнала «Как». Страничка «Серов — как»
12. www.paratype.ru — Справочник, журнал, описания готовых шрифтов
13. www.ilovetypography.com — блог о типографике (английский)

Источник:
Рекомендуемая литература к курсу типографики, МХПИ

Вам есть что сюда добавить?


Рубрики: ,

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

Теперь речь у нас пойдет об удобочитаемости. Что же за волшебство делает большие объёмы текста столь приятными глазу?
В “Правилах удобочитаемости ч.1″ мы поговорим о выборе шрифта.

Небольшой ликбез для начала

Элементы шрифта

Продолжать читать эту статью…

Рубрики:

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

A List Apart

Продолжать читать эту статью…

Рубрики: ,

Типографика в сети за последнюю пару десятилетий прошла огромный путь. Нынешние браузеры не только отображают картинки (!), но даже дают нам возможность превратить свои веб-страницы в настоящие шедевры типографики!

ТИПОГРАФИКА — художественная графика, использующая полиграфические средства и оформительские элементы: линейки, орнаменты, знаки и, главное, наборные шрифты. Т. решает задачи оптимального восприятия текста читателем.

И разговор в этой статье пойдёт не о том, как правильно выбрать шрифт. Тем более, что выбор шрифтов для сети невелик и стандартизирован: Arial, Book Antiqua, Century Gothic, Comic Sans MS, Courier New, Franklin Gothic Medium, Georgia, Impact, Lucida Console, Lucida Sans Unicode, Microsoft Sans Serif, Palatino Linotype, Sylfaen, Tahoma, Times New Roman, Trebuchet MS, Verdana, Webdings, Wingdings.

Сегодня мы поговорим о веб-типографике в кулинарных понятиях: как о рецепте, состоящем из четырёх основных ингредиентов. Если вы когда-нибудь готовили суфле, вы знаете, как важен рецепт. Следуйте этому рецепту, и ваша типографика поднимется как… пожалуй хватит кулинарных метафор, давайте готовить:

Продолжать читать эту статью…

Рубрики: ,