Дизайнеры печатных изданий переходят в Интернет ... что им нужно знать?

Question

Я пытаюсь составить руководство для студентов, привыкших публиковать в печатных изданиях и изучающих веб-дизайн.

Некоторые очевидные вещи, которые веб-разработчики знают, но не знают:

• Вы не можете вращать графику в HTML
• Все объекты должны быть прямоугольными, круговой DIV не может быть
• Многие типографские эффекты в их репертуаре не могут быть достигнуты

Некоторые хитрости:

• Могут ли они иметь переменную непрозрачность? Ну да и нет.
• Могут ли они иметь закругленные углы? Может быть.

Некоторые вещи, которые не являются техническими трудностями, но являются проблемами:

• Размеры графических файлов: у меня есть ученик, который хочет иметь различный большой графический заголовок на каждой странице своего сайта; это не технически проблема, но это будет означать, что посетитель должен ждать загрузки новой графики каждый раз, когда они переходят
• Доступность: «почему бы просто не сделать все графическим, чтобы преодолеть ограничения HTML?»

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

Answer 1

веб не печатается

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

это все, что я могу думать прямо сейчас ...

Answer 2

Исходя из того, кто занимался как печатным дизайном, так и веб-дизайном (и, думаю, проделал приличную работу в обоих случаях), кажется, что у вас хорошее начало. Другие мысли:

• Darko Z упомянул об этом, но я думаю, что стоит подчеркнуть, что несовместимости браузера должны быть распознаны и устранены. В полиграфии есть стандартные форматы, такие как PDF, которые гарантируют, что вещи будут печататься так, как они выглядят в дизайне; кроме того, многие издатели будут напрямую принимать нативные форматы файлов самых популярных дизайнерских программ, таких как Adobe InDesign, Quark XPress, даже MS Word (для cheapskates ;-P). Дело в том, что дизайнеры печати привыкли к подходу «установи и забудь», когда они предполагают, что как только они разработают что-то определенным образом, оно останется разработанным. Тот факт, что существуют разные веб-браузеры, которые отображают одни и те же веб-страницы немного по-разному, вероятно, станет основной проблемой для людей, привыкших к миру печати. ​​

• Приложение к вышесказанному: шрифты. Вы не можете использовать (или, по крайней мере, не можете полагаться) необычные шрифты в веб-дизайне по понятным причинам.

• Необходимо эффективно использовать экранную недвижимость, поскольку ее количество ограничено. И я имею в виду действительно ограниченный - как бы вы ни старались, вы не можете написать HTML, который заставит чей-то монитор расширяться на 5 дюймов или поставить другой экран сзади ;-) Это не так, как в печати, где люди можно заглядывать назад и вперед между различными страницами книги. Чтение веб-страниц похоже на просмотр пергамента в бинокль; Вы должны создавать страницы с учетом этого ограниченного поля зрения.

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

Answer 3

Шрифты и текст

• Вы ограничены небольшим подмножеством шрифты
• Шрифты просматриваются в разных размерах
• Существует предел читабельности для того, как широкие абзацы должны растягиваться (в макет жидкости)
• Пишите для читателей всех типов - некоторые будет скользить, другие подробно прочитают

Изображения

• Сайты просматриваются на разных Разрешения и размеры экрана - Дизайн соответственно
• Для достижения прозрачного фона в IE6, используйте PNG8 с альфой (IE6 не поддерживать различные уровни прозрачность, это либо 100% прозрачный или непрозрачный)
• Использовать спрайты CSS
• Изображения не должны использоваться вместо текста
• Для изображений следует использовать тег img с смысловой ценностью и всем макетом изображения должны быть CSS-изображениями
• Каждый тег img должен иметь альт атрибут для проверки

(X) HTML и CSS

• Визуализация браузера сильно различается
• Проверка CSS и (X) HTML для большая вероятность того, что дизайн будет кросс-браузер дружественным
• Не использовать CSS-хаки
• Используйте правильную семантическую разметку
• Страницы должны работать без JavaScript включен
• Прочтите руководство Yahoo для производительность и использование YSlow
• Режим дизайна Dreamweaver не отражать, как страница будет отображаться в настоящие браузеры

Общий дизайн

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

Answer 4

Некоторые широкие точки:

1. Печать статическая, интернет интерактивный.

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

2. Все неопределенно.

Вы упоминаете типографику в своем ответе, возможно, стоит расширить ее, чтобы охватить все аспекты внешнего вида. Разнообразие доступных операционных систем и оборудования означает, что сложно определить, как ваша аудитория будет воспринимать ваш окончательный дизайн. Хотя некоторые вещи должны быть совместимы во всех браузерах, иногда это не стоит времени и усилий, необходимых для создания идеального пикселя во всех системах.

3. Узнайте о программировании.

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

4. Создание рабочих прототипов

Когда что-то статично, оно может быть разработано с использованием статического формата. Чтобы создать что-то интерактивное, например, веб-сайт, вы должны использовать движущиеся прототипы, представляющие тип поведения, которое будет иметь конечный дизайн. Вы можете использовать бумагу для этого, или более сложные макеты с использованием xhtml, css и javascript, или специальную программу для создания прототипов.

Answer 5

Многие из них - хорошие практические правила для дизайнеров печати, которые хотят научиться разметке HTML и написанию CSS. Но как веб-разработчик в прошлом, я часто просто брал шаблон дизайнера и писал для него HTML и CSS. Была ли эта задача простой или трудной, зависит от осведомленности дизайнера о возможностях CSS.

В частности, возникла одна болевая точка. Таким образом, для дизайнеров печати, переходящих в Интернет, следует запомнить одно правило абсолютного номера:

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

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

Answer 6

• Пользователь контролирует, как он хочет видеть контент в Интернете, а не вы. Ваш дизайн не будет выглядеть одинаково для всех людей, потому что некоторые люди могут сделать его другим специально .
• Экраны могут быть сколь угодно большими или маленькими
• Интернет интерактивен: удобство использования превосходит красоту
• Ваша страница будет читаться на машинах: убедитесь, что данные легко доступны с помощью сценариев, которые не могут читать изображения / большие объекты текста (также называемые «быть семантическими»)

Answer 7

Не забудьте сохранить файлы jpg в формате RGB, а не в формате CMYK. Я регулярно получаю jpgs, которые не отображаются на веб-сайте, и каждый раз потому, что они были сохранены в неверном формате из Photoshop.

Это станет меньшей проблемой, так как браузеры поддерживают больше форматов изображений, но, учитывая, что 20% + пользователей все еще используют IE6 для сайтов, которые мы разрабатываем, потребуется некоторое время, чтобы уйти.

Answer 8

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

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

Answer 9

Я недавно написал сообщение об этом в блоге - http://aloestudios.com/2008/08/dear-print-designer-doing-web-design/

Как и мой друг Марк - http://www.visual28.com/articles/tips-for-better-web-design

Answer 10

Данный цвет или шрифт будут отображаться по-разному в разных браузерах.

Особенно, если один браузер работает на Windows, а другой на Mac или Linux и т. Д.