Принцип веб дизайна при котором неоднократно используется: Теория дизайна сайта для веб-разработчиков.

Теория дизайна сайта для веб-разработчиков.

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

Теория дизайна и веб-разработка

Попытка предложить хорошую креативную разработку может показаться легкой тому, кто посещал школу дизайна, но не 90% веб-разработчиков, никогда не ходивших на дизайнерские курсы или в школу и возникающих в основном либо из разработчиков, либо, как правило, из недизайнерской среды. Вопрос остается открытым… что на самом деле определяет хороший веб-дизайн? Только талант? Человек, владеющий неким «особенным» зрением, которому известно, что сработает, а что не? Или за всем этим имеется логический и научный подход, который может привести дизайнеров, критиков и даже клиентов к идее отличного дизайна.

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

Принцип гештальта

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

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

Посмотрите на это изображение…

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

Теперь попробуем увидеть, что в действительности детали не имеют никакого значения; посмотрите на эти два примера:

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

Черная птичка в верхнем левом углу смотрит в обратную сторону

Мужчина слева в другой сомбреро (шляпе)

Палочка мужчины перевернута и немного темнее

Камни тротуара внизу справа на втором изображении больше

Женщина смотрит в обратном направлении

Здесь эти различия на самом деле никак не повлияли на общий вид изображения… давайте рассмотрим другой простой пример:

Это две версии автомобиля Volkswagen Beetle, модели 1937 и 1973гг, и, несмотря на некоторые значительные изменения деталей облика за более чем 4 десятилетия, по существу дизайн остается одним и тем же. Это происходит из-за принципа работы нашего мозга, мы видим цельные картины и определяем общую форму гораздо быстрее и легче, чем видим или замечаем изменения в деталях.

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

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

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

Попросите кого угодно нарисовать Биг Бен, или Эйфелеву башню, или пирамиды Гизы… они все сойдутся на общем очертании каждой достопримечательности, потому что хотя мы можем увидеть их по-разному (вживую, на фото, в кино, в путеводителе …и т.д.), мы все видим одно и тот же определяющее очертание.

Приложение принципа целостности к работе над веб-дизайном

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

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

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

Ладно, давайте взглянем на некоторые идеи и их силуэты:

Обычно при следовании проверенному и в основном подобному квадрату дизайну (как в 4 нижних разметках в примерах), итогом будет обыкновенный дизайн, ничего особо креативного. Всегда пробуйте экспериментировать с «содержащей оболочкой» своих замыслов. Попытайтесь развернуть блок на несколько градусов или обрезать и изменить один из углов… все это внесет в вашу идею уникальность и творчества.

Всегда следует начинать с контейнера, или общей структурной оболочки дизайна; забудьте пока о деталях и отдельных компонентах.

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

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

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

Автор: Ahmed Hussam

Источник: //webdesign.tutsplus.com/

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

E-mail: [email protected]

P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

Смотреть видео

Особенности web-дизайна

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

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

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

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

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

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

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

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

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

Логотип используется для идентификации корпоративного стиля. Логотип может существенно увеличить узнаваемость бренда или торговой марки. Маркеры списков используются для привлечения внимания посетителей к узловым точкам документов. Также часто используются для разделения параграфов и абзацев в документе.

Титульная графика (мастхед) предоставляет посетителям информацию по web-ресурсу. Также улучшает визуальное восприятие.

Разделительные линии обычно используются для разделения текстов и облегчения их восприятия.

Фоновые рисунки улучшают внешний вид страниц. Наиболее часто используется горизонтальная двухцветная полоска.

Графический заголовок позволяет использовать независящие от установленных на клиентском компьютере шрифты.

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

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

В частности, дизайнерские фирмы выкладывают примеры графических работ — так называемый «портфолио». Иллюстрации также могут служить пониманию разделов сайта. Сжимание же графических файлов не должно снижать качества изображения.
Всем, кто занимается web-дизайном, а также менеджерам и руководителям проектов я хочу порекомендовать прочитать книгу Дмитрия Кирсанова «Основы веб-дизайна». Это, пожалуй, самая сильная публикация по основам графики, шрифтологии и искусству Web-дизайна.

Статьи по теме

• После того, как основная бизнес-идея сформирована, определены продукты и услуги, которые компания будет продвигать на рынке, возникает н…

  2019-01-30

• Может это и звучит как-то странно, но марвеловские супергерои могут не только скрасить наш досуг своими приключениями, но и дать нам нес…

  2015-05-11

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

  2014-06-05

• Прежде чем приступить к продвижению сайта в сети Интернет, необходимо позаботиться об отсутствии в нем ошибок, связанных с неправильно…

  2011-12-27

• Если вы решили создать логотип, то нужно подумать о том, где он может использоваться. Существует пять факторов, которые определяют наско…

  2011-12-27

• Сегодня интернет стал реальной бизнес-средой, и позиция сайта компании в результатах поискового запроса оказывает значительное вли…

  2011-04-13

• Нам часто задают один и тот же вопрос, — какой смысл платить нам за установку шаблона, если полно варезников, где все шаблоны можно скача…

  2011-04-13

• Лирическое отступление: Темплейты для сайта (сториборды, вайрфреймы) — спроектированные проволочные схемы страниц сайта. Темплейты пок…

  2011-04-07

• Данный набор статей является почти полным каталогом методов и приёмов, которые используются в дизайне программных систем вообще и веб-…

  2011-04-07

• При проектировании стандартных элементов веб-сайта посмотрите, как это сделано на других веб-сайтах, и не изобретайте велосипед. Меньше…

  2011-04-07

• Самое модное сейчас в дизайне — шрифты. Их в работе должно быть как можно больше. Неважно, ЧТО вы этими шрифтами пишете, главное — раск…

  2011-04-07

• Поток безопасного оформления сайтов, не оставляет после их просмотра никаких переживаний, кроме безысходности. Несмотря на все огранич…

  2011-03-29

• Сегодня наш выпуск посвящён не дизайну или дизайнерам, а тому, с кем они имеют дело — заказчикам. Заказчики делятся на несколько групп. Т…

  2011-03-29

• Инструментарий Для написания HTML и создания графики хороший инструментарий просто необходим. Вам понадобится хороший HTML-редактор, гра…

  2011-03-28

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

  ..

  2011-03-28

Тесты по дисциплине «Основы дизайна и компьютерной верстки» | Тест на тему:

№	Вопрос	Эталон ответа	Р
1	Выберите правильный вариант ответа: белое (пустое) пространство, со всех сторон окруженное элементами страницы (текстом или фотографиями) называется а) Основным б) Замкнутым в) Открытым	б	1
2	Ответьте, о каком принципе дизайна идет речь? Используйте этот принцип, чтобы избежать расположения на странице одинаковых элементов. Если эти элементы: шрифт, цвет, размер, толщина штриха, контур, пробелы и т. д. — не означают одно и то же, их следует оформлять по-разному.	Контраст	1
3	Установите соответствие между типом шрифта и его изображением 1) Современный стиль        а) Goodbye! 2) Декоративный шрифт    б) Goodbye! 3) Старый стиль                  в) Goodbye!	1-в, 2-б, 3-а	3
4	Установите соответствие: Имеют ли строчные уквы в приведенных ниже примерах: А) тонкие горизонталные засечки Б) засечки с наклоном В) отсутствие засечек Г) толстые горизонтальные засечки 1) Music! 2) Music! 3) Music! 4) Music!	1-в, 2-а, 3-б, 4-г	4
5	Выберите образцы, на которых шрифты создают Конфликт: 1) СКАЗКА «Красная шапочка»  2) Гадкий Утенок 3) 4)  Алиса в стране чудес	1, 4	2
6	Укажите верно ли, что если один шрифт – высокий и тонкий, то другой должен быть низким и насыщенным.	да	1
7	Ответьте, верно ли утверждение? Шрифты надо скомбинировать так, чтобы их сочетание было очень привлекательным, пусть даже абсолютно нечитаемым.	неверно	1
8	Выберите несколько правильных ответов: К основным принципам дизайна относятся: 1) Повтор 2) Контраст 3) Выравнивание 4) Структура 5) Размер 6) Приближение	1, 2, 3, 6	4
9	Установите соответствие между видом цветовой схемы и изображением 1)      а) аналоговая  схема 2)       б) монохромная схема 3)         в) триада	1-в, 2-а, 3-б	3
10	Вставьте пропущенные  слова: Классическим кругом из 12 цветов считается круг Иттена. Основу его составляют цвета: красный, … и …, второстепенные – …, фиолетовый и …, а остальные цвета образуются путем смешивания.	Желтый Синий Оранжевый Зеленый	4
11	Укажите, верно ли утверждение, что нужно подчеркивать значимость одного типографского элемента при помощи жирного шрифта, а другого – при помощи крупного кегля.	неверно	1
	Итого:		25

9 основных принципов адаптивного веб-дизайна

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

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

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

Эти два противоположных подхода могут отлично дополнять друг друга, если применять их осознанно. Разумеется, их конкретное применение должно определяться контентом:

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

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

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

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

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

Использовать для отображения контента всю ширину экрана без остатка – отличная идея, если мы имеем дело с экраном смартфона. Но если использовать аналогичным образом широкий экран монитора, контент просто перестанет восприниматься. Здесь нам на помощь приходит CSS-атрибут ‘max-width’.

Например, если мы задаём ширину блока контента в 100%, а максимальную ширину – в 1000 пикселей, то мы можем быть уверены, что контент будет занимать весь экран, но не выйдет за предел в 1000 пикселей по ширине:

Имея на странице слишком много объектов с относительным позиционированием, сложно добиться их правильного расположения друг относительно друга.

Но можно поместить группу элементов в блок-контейнер, и в дальнейшем управлять позицией и размером контейнера. Этот приём также упрощает работу с элементами, имеющими абсолютные размеры, например, логотипами и кнопками:

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

Наиболее простым считается первый способ, и он получил широкое распространение среди дизайнеров под названием “Mobile First”. Приступая к работе, прикиньте, какой из методов предпочтительнее для вас и для контента вашего сайта:

Хотите использовать на вашем сайте крутую типографику? Используйте встраиваемые шрифты. Но учтите, что каждая гарнитура, загружаемая из Сети, увеличивает время загрузки страницы. Шрифты, уже имеющиеся на устройстве клиента, загружаются мгновенно, зато их внешний вид и соответствие дизайнерскому замыслу может оставлять желать лучшего:

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

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

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

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

Данная публикация представляет собой перевод статьи «9 basic principles of responsive web design» , подготовленной дружной командой проекта Интернет-технологии.ру

Принципы доступности | Инициатива веб-доступности (WAI)

Резюме

На этой странице представлены некоторые требования к веб-доступности для веб-сайтов, веб-приложений, браузеров и других инструментов. Он содержит ссылки на международные стандарты W3C Web Accessibility Initiative (WAI) и на истории пользователей Интернета.

Примечание: Это не полный список всех требований доступности.

Содержание страницы

Стандарты веб-доступности

Доступность

в Интернете зависит от нескольких компонентов, которые работают вместе.Некоторые из них включают:

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

Подробнее о стандартах веб-доступности

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

Дополнительные сведения см. В разделе «Основные компоненты веб-доступности».

Стандарты

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

W3C Web Accessibility Initiative (WAI) предоставляет набор руководящих принципов, которые признаны во всем мире в качестве стандарта веб-доступности. К ним относятся:

Существует также спецификация WAI для доступных полнофункциональных интернет-приложений (WAI-ARIA) , которые включают динамический контент и расширенные элементы управления пользовательским интерфейсом, разработанные с помощью Ajax, JavaScript и связанных веб-технологий.

Воспринимаемая информация и пользовательский интерфейс

Текстовые альтернативы для нетекстового содержимого

Текстовые альтернативы являются эквивалентами нетекстового содержимого.Примеры включают:

• Краткие эквиваленты изображений, включая значки, кнопки и графику
• Описание данных, представленных на диаграммах, диаграммах и иллюстрациях
• Краткое описание нетекстового содержимого, такого как аудио и видео файлы
• Ярлыки для элементов управления формы, ввода и других компонентов пользовательского интерфейса

Альтернативные тексты передают цель изображения или функции, чтобы обеспечить эквивалентное взаимодействие с пользователем. Например, подходящей текстовой альтернативой для кнопки поиска будет « search », а не « увеличительная линза ».

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

Требования доступности, связанные с текстовыми альтернативами (ссылки на технические условия)

Истории, связанные с альтернативами текста

Субтитры и другие альтернативы для мультимедиа

Людям, которые не могут слышать аудио или видеть видео, нужны альтернативы. Примеры включают:

• Текстовые расшифровки и подписи для аудиоконтента, например записи радиоинтервью
• Аудиоописание, которое представляет собой повествование для описания важных визуальных деталей в видео
• Перевод аудиоконтента на язык жестов, включая соответствующие слуховые ощущения

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

Требования к доступности мультимедиа (ссылки на технические условия)

Мультимедийные истории

Контент может быть представлен по-разному

Чтобы пользователи могли изменять представление контента, необходимо, чтобы:

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

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

Требования доступности, связанные с адаптируемостью (ссылки на технические условия)

Истории, связанные с адаптируемостью

Контент легче видеть и слышать

Отличительный контент легче увидеть и услышать.Такой контент включает:

• Цвет не используется как единственный способ передачи информации или идентификации контента
• Комбинации цветов переднего плана и фона по умолчанию обеспечивают достаточный контраст
• Когда пользователи изменяют размер текста до 400% или изменяют интервал между текстом, информация не теряется
• Перекомпоновка текста в маленьких окнах («видовых экранах») и когда пользователи увеличивают текст
• Размер изображения текста можно изменить, заменить его фактическим текстом или по возможности не использовать его
• Пользователи могут приостанавливать, останавливать или регулировать громкость звука, воспроизводимого на веб-сайте
• Фоновый звук слабый или его можно отключить, чтобы избежать помех или отвлечения внимания

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

Требования доступности, связанные с различимостью (ссылки на техническую спецификацию)

Истории, связанные с различимостью

Оперативный пользовательский интерфейс и навигация

Функциональность доступна с клавиатуры

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

Доступность клавиатуры включает:

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

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

Требования доступности, связанные с доступностью клавиатуры (ссылки на технические характеристики)

Истории, связанные с доступностью клавиатуры

У пользователей достаточно времени, чтобы читать и использовать контент

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

Примеры предоставления достаточного времени включают предоставление механизмов для:

• Остановить, продлить или отрегулировать временные ограничения, кроме случаев, когда необходимо
• Приостановить, остановить или скрыть перемещение, мигание или прокрутку содержимого
• Отложить или подавить прерывания, кроме случаев, когда необходимо
• Повторно аутентифицироваться по истечении сеанса без потери данных

Принципы веб-дизайна

Основная аудитория нужно интересы технологический уровень аудитории компьютерное оборудование (специальное программное обеспечение, доступная память, скорость / мгц) Назначение для сайта личный прибыльный бизнес некоммерческая организация образовательный развлечения Расположение участка коммерческий интернет-провайдер (ISP) сервер учебного заведения сервер организации персональный сервер Типы содержания текст графика видео апплеты звук формы или опросы для заполнения пользователями (некоторые серверы не вмещают формы). Информация размещена на «домашней» странице сообщение «кто мы?» или «кто я?» заявление о миссии или цели контактная информация * уведомление об обновлении уведомление об авторских правах отказ от ответственности (например: хотя мы стараемся сохранить информация актуальная, часть информации может быть не самой актуальной. ИЛИ «Этот список не означает одобрение одного или нескольких продуктов.») * Если сайт для бизнеса или организации, важно указать адрес, номер телефона и адрес электронной почты. Если сайт является личным сайтом, раскрытие адрес или номер телефона не сообщаются из-за проблем с конфиденциальностью. Контент (ключ к хорошему сайту): должно соответствовать цели должно быть хорошо организовано необходимо проверить орфографию следует соблюдать правильный английский (или соответствующий язык). Некоторые сайты содержат информацию на нескольких языках, в зависимости от возможных аудиторий. должна быть актуальная информация должен соответствовать аудитории Уровень веб-технологий, наиболее подходящий назначение: Минималистичный стиль — в основном текст, мало или совсем нет графика (быстрая загрузка, не требует много памяти или высокого уровня графическая карта) Середина дороги стиль — немного графики для добавить элемент дизайна или стиля, который дополняет информацию, но не отвлекает от основного назначения (все равно легко загружается, может быть больше привлекательно чем минимализм Стиль хай-тек — много графики, анимации, java-апплеты, «художественный» текст, видеоклипы и т. д.(может подойти для аудитории tekkies с высококлассным оборудованием, но может потерять среднюю аудиторию ожидание загрузки изображений или нечеткая попытка перехода по ссылкам обозначены как таковые). Стиль, который наилучшим образом соответствует цели профессиональный научный случайный подходит для детей ориентированный на подростков художественный Дизайн страницы — последовательность, ясность, пользовательский дружелюбие: Добавьте ссылку «вернуться домой» Используйте единый шаблон на каждой странице Создайте единую цветовую схему (с ограниченным цветовой вкус) Убедитесь, что между фон и текст Избегайте слишком большого шрифта КРИЧИТ * Избегайте слишком мелкого шрифта это трудно читать * Разместите важную информацию рядом с верхом По возможности избегайте длинных списков ссылок. Разделите списки на более мелкие части и предоставьте внутренние теги Предоставьте оглавление (со ссылками найти информацию в длинном списке) Организуйте свой материал так, чтобы слишком много прокрутки найти контент * Пользователь может переопределить ваши шрифты установив размер и стиль шрифта своего браузера. разрешение: Стандартное разрешение экрана 800 (ширина) на 600 (высота).Если вы проектируете с более высоким разрешением, пользователь может нужно прокручивать назад и вперед или вверх и вниз, чтобы просмотреть весь контент. Графика: .jpg формат изображения (формат сжатого файла для качественных изображений — фотографии). Работая над фотографиями, сохранить в формате .tiff или в программе по умолчанию до окончательного качества и размера достигается, затем сохраните в формате .jpg. Это сохраняет качество изображения. .формат изображения gif (для графических файлов, кнопок, картинки не фотографического качества). Качество не ухудшается при работе с файлами .gif. анимированные файлы .gif (используйте с осторожностью. Подходит ли анимация к теме или отвлекает от вашей основной цели? флэш-анимация (укажите параметр «выключить» для вспышки). Слишком много «наворотов» может быть подавляющим. Дополняет ли флэш сайт? Или это там, чтобы сказать: «Посмотри, что я могу» делать? « [Включите теги HEIGHT и WIDTH, чтобы уменьшить нагрузку время для графики.Не изменяйте размер изображений, просто меняя размер теги. Это увеличивает время загрузки.] Цвета фона и текста: Узорчатый фон создает «шум», мешает читать текст. Обеспечьте достаточный контраст между фоном и текст Ограничьте цвета шрифта — «Горячие» цвета (например, ярко-розовый и оранжевый) в целом менее профессиональны для бизнеса места.(Если бизнес — это «горячая» графика, то предостережение вероятно, не применимо.) Основные цвета (красный, синий, зеленый) могут подойти лучше всего. для сайтов, ориентированных на детей. Черный фон может дать «резкий край» на сайт или сделать его «мрачным» или контркультурным. Использование рамок (не в пользу): Добавить в закладки Трудно ориентироваться в Трудно понять, в каком ты кадре для печати содержимого. Поисковые системы не всегда могут индексировать их содержимое. Соблюдать доступность для инвалидов руководство : Альянс за доступ к технологиям: Интернет Доступность http://www.ataccess.org/rresources/webaccess.html Попробуйте свой сайт в разных браузерах и разные версии браузеров. Netscape и Internet Explorer, для Например, отображать одну и ту же страницу по-разному. Что защищено правилами авторского права на WWW Все — Уникальный основной дизайн веб-страницы и его содержимое, включая: ссылки исходный текст графика аудио видео html и другие уникальные последовательности языков разметки Список веб-сайтов, составленный физическим лицом или организация и все другие уникальные элементы, составляющие оригинал характер материала. При создании веб-страницы вы МОЖЕТЕ : Ссылки на другие веб-сайты. [Однако некоторые люди и организации предъявляют особые требования к размещению ссылок на их веб-сайты материал. Внимательно проверьте сайт, чтобы найти такие ограничения. Это мудро спросить разрешения. Вам нужно указать источник, как это требуется в исследовательская работа при цитировании или перефразировании материалов из других источников. Количество цитат ограничено.] Используйте бесплатную графику на своей веб-странице.Если графика не рекламируется как «бесплатная», ее нельзя копировать без разрешение. При создании веб-страницы вы можете несет ответственность, если вы : Поместите содержимое другого человека или организации веб-сайт на вашей веб-странице Скопируйте и вставьте информацию из разных Интернет-источники для создания «своего» документа. [Вы МОЖЕТЕ процитировать или перефразировать ограниченные суммы, если вы даете кредит первоисточнику и местоположению источника.Тот же принцип, конечно же, применим к печатным источникам. ] Копировать и вставлять чужие списки ресурсов на своей веб-странице Копируйте и вставляйте логотипы, значки и другую графику с других веб-сайтов на вашу веб-страницу, если это явно не рекламируется как «бесплатно», и вы следуете рекомендациям исходного источника по размещению материалов. Некоторые организации рады позволить вам использовать их логотипы, с разрешения — это бесплатная реклама.Но они хотят чтобы знать, кто его использует. Лучше всего уведомить источник, которому вы хочу связать. Источник может не одобрять все сайты, которые хотят использовать их логотип. Защитите свою конфиденциальность и репутацию онлайн : Не разглашайте личную информацию о себе или другие. Не сообщайте номера домашнего телефона или дома адреса. То, на что вы ссылаетесь, помогает определить, кто вы и что представляет ваша организация. Избегайте преувеличенных заявлений при продвижении продукта или организации. Укажите источники информации. Соблюдайте правила авторского права. Используйте оригинальную графику или бесплатную графику или клипарт.

% PDF-1.4 % 6 0 obj > endobj xref 6 77 0000000016 00000 н. 0000002150 00000 н. 0000002263 00000 н. 0000002809 00000 н. 0000002947 00000 н. 0000003204 00000 н. 0000003820 00000 н. 0000004045 00000 н. 0000004220 00000 н. 0000004437 00000 н. 0000004698 00000 н. 0000007070 00000 п. 0000009172 00000 н. 0000009308 00000 п. 0000009448 00000 н. 0000009660 00000 н. 0000012584 00000 п. 0000015645 00000 п. 0000018770 00000 п. 0000021677 00000 п. 0000024197 00000 п. 0000026097 00000 п. 0000026208 00000 п. 0000026321 00000 п. 0000026432 00000 п. 0000026501 00000 п. 0000026580 00000 п. 0000033294 00000 п. 0000033574 00000 п. 0000033849 00000 п. 0000033874 00000 п. 0000034257 00000 п. 0000034326 00000 п. 0000034405 00000 п. 0000040918 00000 п. 0000041199 00000 п. 0000041472 00000 п. 0000041497 00000 п. 0000041880 00000 п. 0000041949 00000 п. 0000042028 00000 п. 0000048347 00000 п. 0000048637 00000 п. 0000048905 00000 н. 0000048930 00000 н. 0000049304 00000 п. 0000049487 00000 п. 0000052433 00000 п. 0000052805 00000 п. 0000053210 00000 п. 0000053474 00000 п. 0000056937 00000 п. 0000057391 00000 п. 0000057913 00000 п. 0000058023 00000 п. 0000059901 00000 н. 0000060216 00000 п. 0000060581 00000 п. 0000060667 00000 п. 0000061096 00000 п. 0000061364 00000 п. 0000061681 00000 п. 0000061793 00000 п. 0000062836 00000 п. 0000063127 00000 п. 0000063497 00000 п. 0000063621 00000 п. 0000065610 00000 п. 0000065946 00000 п. 0000066353 00000 п. 0000066489 00000 н. 0000067865 00000 п. 0000068214 00000 п. 0000137313 00000 н. 0000161260 00000 н. 0000161323 00000 н. 0000001836 00000 н. трейлер ] / Назад 217723 >> startxref 0 %% EOF 82 0 объект > поток hb«b«tr ‘* `c I% $ q / (f`dddiqePejv>; xdX2xt1! W; ib 7u9 * p>` am; Ckl4_«Đ | ZBKbŅQt1 bVI`q

Принципы работы с приоритетами.

Арнольд: Передний план — это средство организации текста, которое привлекает внимание читателя к определенным частям текста и устанавливает семантически релевантные отношения между элементами одного или разных уровней. Общие функции переднего плана: 1) установить иерархию значений и элементов в тексте, то есть они выдвигают наиболее важные части текста. 2) обеспечивают целостность текста и в то же время разбивают его на несколько частей и устанавливают границы между частями и между текстом и его компонентами.3) упростить процесс декодирования, организовав информацию в таком порядке, чтобы читатель мог расшифровать даже элементы, которые он раньше не знал. 4) создают эстетический контекст и выполняют множество важных функций, одна из которых — выразительность. Выразительность — это такая особенность текста или его части, которая передает сообщение с высокой интенсивностью и, как следствие, создает эмоциональную и логическую интенсивность. Основные типы переднего плана: 1) Конвергенция — это концентрация SD в одном месте, которые выполняют одну и ту же стилистическую функцию. Когда SD взаимодействуют, они делают одно другое более заметным, и сигнал, который они передают, не может остаться незамеченным. Компоненты конвергенции могут быть разными (параллельные конструкции, повторы, неологизмы, метафоры и т. Д.). Изобилие помогает предотвратить недопонимание читателем сути текста в случае конвергенции. Благодаря изобилию читатель может предсказать следующий компонент из-за его связи с предыдущими компонентами. 2) Связка — это появление похожих элементов в одинаковых позициях, что делает текст целостным.Понятие помогает раскрыть характер и сущность единства формы и содержания художественного текста. Сходство элементов может быть фонетическим, структурным или семантическим. Сходство позиций может иметь синтаксический характер и основываться на положении элемента в речевой цепочке или структуре стихотворения. Структурное сходство выражается морфологическими конструкциями и синтаксическим параллелизмом, семантическое сходство — использованием синонимов, антонимов и гипонимов. 3) Неоправданное ожидание (обманутое ожидание) ?? — это тип переднего плана, который предполагает, что благодаря непрерывности речи читатель может предсказать следующий компонент, а когда появляется компонент с низкой вероятностью, он нарушает непрерывность и сильно влияет на читателя.Неожиданное ожидание можно выразить контрастом. На лексическом уровне это могут быть архаичные слова, неологизмы, перифразис и оксюморон. Гальперин: -.

Этот термин впервые использовал человек по имени Ян Мулкановски. Кстати, на передний план понимаются факторы отклонения от языковых и литературных норм. Само по себе отклонение — это деавтоматизация знакомого лингвистического и литературного образца. Это означает, что есть определенные слова, которые мы используем каждый день как будто автоматически. Тогда передний план будет менять направление i.е. деавтоматизировать такие автоматические слова, например Университет

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

Следует отметить, что существует две формы переднего плана. Их:

1) Отклонение переднего плана,

2) Передний план без отклонений

Не отклоняющийся тип переднего плана — это структура, которая приобретает заметное значение в тексте в результате использования определенного аспекта языка.Пример — это такой систематический повторяющийся / или преобладающий способ, который привлекает внимание читателя; Доктор Фатунси — вождь с львиным сердцем, доктор Фатунси — упорный боец, который никогда не расстраивается, пока не будет достигнута победа, доктор Фатунси, доктор Фатунси .