Основы компьютерного дизайна презентация

интерфейсов образовательных продуктов

целей, которые поставлены перед вами.

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

Композиция - это определенное сочетание частей изображения (соотношение их размеров - пропорции, цветов, фактур и т.д.)

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

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

со свойствами движения (автомобиль, бегущий человек, летящий мяч):
При этом постарайтесь учесть следующие три момента:
объект должен быть связан с содержанием и другими объектами,
должно быть свободное место для продолжения движения, чтобы объекты не столкнулись «лбами»,
постарайтесь подчеркнуть направление движения другими элементами — один как бы утаскивает за собой все остальные.

происходит, любая линия подразумевает движение.
Если, например, линии подвешены «в воздухе» и у них нет преград, то движение взгляда вдоль них ускоряется:

Если один конец свободен, а другой привязан к статическому объекту, то контраст сильнее, а ускорение еще больше:

Если один конец в виде стрелы, то возникает ощущение неудержимости движения:

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

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

диагональные, круговые или их сочетания. Каждое из этих направлений имеет свой особый выразительный смысл.
"Горизонтальное" - подчёркивает тяжесть, протяженность пространства и его ширину.
"Вертикальное" является полной противоположностью "горизонтальному" и выражает лёгкость, высоту и глубину.
Точка пересечения горизонтали и вертикали предстает особо акцентированным местом. Оба эти направления носят плоскостной характер и при одновременном использовании создают чувство равновесия, прочности и материальной устойчивости.
"Диагональные" направления создают движение и развивают пространство картины в глубину.

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

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

между человеком и машиной.

Общее требование к интерфейсу выразил американский специалист по эргономике интерфейсов Стив Круг (Steve Krug) в заголовке своей замечательной книги «Не заставляйте меня думать».

размещения информации и элементов управления.

человеку, когда с ним встречаемся впервые? Правильно, говорим «здравствуйте!» и сообщаем цель визита. Следовательно, в левом верхнем углу должен быть расположен логотип (вместо здравствуйте), или верхний уровень иерархии элементов интерфейса (вместо цели визита). Также там может располагаться актуальная на текущий момент информация (например, время, оставшееся для прохождения теста, или личные данные тестируемого).

Куда следует взгляд далее? Далее он следует практически горизонтально по всей ширине экрана, но устает и, не доходя до конца, скользит вниз зигзагообразно.

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

охватывать все категории материала страницы и давать информацию о содержании следующих уровней.

  Принцип четвертый. Включайте контактные телефоны, адрес почтовый и электронный на главной странице. А также не забывайте указывать авторские права и ссылки на использованные источники

текст;
Подписи к рисункам.

Одним из ключевых моментов в представлении информации - это использование опорных элементов - коротких частей текста, которые дают краткое содержание материала.

она легко делилась на разделы. Содержание текста должно состоять из 5-6 разделов, длиной не более 600 слов каждый с 3-4 выделенными ссылками.

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

Теоретически буква может рассматриваться отвлеченно, независимо от других, но свое подлинное звучание она приобретает только в связи с другими. Практически буква – часть алфавита, которому она принадлежит, или часть композиции, в которой она участвует.

либо усилий, не нуждается в доказательствах.

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

Это в еще большей мере относится к изолированным строкам – к заголовкам, рубрикам, логотипу.

эффекта. Часто относительно мелкий шрифт (например 11 пунктов) создает ощущение большей доверительности и важности информации.

и «человечные», возможно, потому, что их начертание подражает образу человеческого лица.

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

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

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

абзацы, для разделения (разделов) лучше оставить свободную строку.

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

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

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

делайте синим цветом, предупреждения лучше делать красным, цвет основного текста должен быть тоже определён однозначно.
Контрастность: цвета фона и основного текста должны быть контрастными. Чем контрастнее, тем удобнее будет читать текст. На тёмном фоне лучше всего использовать белый или жёлтый цвета, голубой читается сложнее, можно и зелёный использовать. По статистике светлый фон лучше тёмного.

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

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

Синий: Мир, спокойствие, устойчивость, гармония, объединение, доверие, истина, консерватизм, безопасность, чистота, порядок, лояльность, небо, вода, холод, торможение нервной системы (понижается давление, замедляется дыхание и пульс). Покой, удовлетворение, пассивность., технология, депрессия, подавитель аппетита.

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

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

Серый: Безопасность, надежность, интеллект, степенный, скромность, достоинство, завершенность, твердый, консерватор, практический, старость, печаль, сверление

и удобство.

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

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

Фиолетовый: цвет интеллекта, духовности, также ассоциируется с инфантильностью и внушаемостью.

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