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

Ответ 1

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

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

Изображения

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

(X) HTML и CSS

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

Общий дизайн

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

Ответ 2

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

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

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

Ответ 3

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

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

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

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

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

Ответ 4

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

1. Печать является статической, веб-интерфейс является интерактивным.

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

2. Все неясно.

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

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

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

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

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

Ответ 5

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

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

Ответ 6

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

Ответ 7

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

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

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

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

Ответ 8

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

Особенно, когда один браузер находится в Windows, а другой - на Mac или Linux и т.д.

Ответ 9

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

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

Ответ 10

Книга Джеффри Зельдмана "Взятие вашего таланта в Интернет" специально нацелена на вопрос, который вы задали. Это было несколько лет... не уверен, есть ли 2-е или 3-е издание. Проверьте это.

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