Верстки уроки: Уроки вёрстки с нуля? — Хабр Q&A

Уроки по теме «вёрстка» для начинающих

В каталоге хекслета найдено 61 урок по теме «вёрстка». Уроки по теме «вёрстка» есть в курсах: CSS: Адаптивность сайта, CSS: Вёрстка на Grid, CSS: Позиционирование элементов, Основы HTML, CSS и веб-дизайна, SASS: Основы работы, SASS: Программирование, CSS: Transform (трансформация объектов), HTML: Препроцессор Pug.

Урок «Знакомство с HTML»

В курсе «Основы HTML, CSS и веб-дизайна»

Познакомиться с HTML и попробовать его в деле.

Урок «Элементы, теги и атрибуты»

В курсе «Основы HTML, CSS и веб-дизайна»

Изучить простую идею HTML и структуру элементов страницы.

Урок «Размещение на GitHub Pages»

В курсе «Основы HTML, CSS и веб-дизайна»

Освежить память по теме хостинга и разместить статичную страницу бесплатно на GitHub Pages.

Урок «Chrome DevTools»

В курсе «Основы HTML, CSS и веб-дизайна»

Познакомиться с Developer Tools и веб-инспектором, удобным инструментом для анализа и редактирования страницы прямо в браузере.

Урок «Интеграция с соц. сетями и семантический веб»

В курсе «Основы HTML, CSS и веб-дизайна»

Рассмотреть инструменты разметки для лучшей интеграции с социальными сетями.

Урок «Верстальщик vs. веб-дизайнер»

В курсе «Основы HTML, CSS и веб-дизайна»

Познакомиться с курсом и рассмотреть специальности «верстальщик» и «веб-дизайнер» в контексте развития технологий.

Урок «div, span и display»

В курсе «Основы HTML, CSS и веб-дизайна»

Познакомиться с принципами, по которым элементы выводятся на страницу и получают определённый размер.

Урок «Структура страницы»

В курсе «Основы HTML, CSS и веб-дизайна»

Рассмотреть полную структуру целого HTML-документа, видимые и невидимые теги.

Урок «Каскад»

В курсе «Основы HTML, CSS и веб-дизайна»

Понять принцип, по которому стили собираются в один набор из разных источников.

Урок «Основы CSS»

В курсе «Основы HTML, CSS и веб-дизайна»

Научиться задавать оформление — стили — элементам HTML-страницы.

Урок «Правило близости»

В курсе «Основы HTML, CSS и веб-дизайна»

Рассмотреть один из базовых принципов дизайна: правило близости или grouping/proximity principle.

Урок «Фиксированное позиционирование»

В курсе «CSS: Позиционирование элементов»

Научиться позиционировать элемент относительно самого браузера

Урок «Относительное позиционирование»

В курсе «CSS: Позиционирование элементов»

Научиться использовать относительное позиционирование и узнать его особенности

Урок «Введение»

В курсе «CSS: Позиционирование элементов»

Узнать о курсе

Урок «Относительное и абсолютное позиционирование»

В курсе «CSS: Позиционирование элементов»

Узнать о связи абсолютного и относительного позиционирования. Научиться абсолютно позиционировать элемент относительно другого блока

Урок «Абсолютное позиционирование»

В курсе «CSS: Позиционирование элементов»

Узнать о том, как выдернуть элемент из нормального потока

Урок «Поток документа»

В курсе «CSS: Позиционирование элементов»

Узнать о том, как браузеры отображают HTML, что такое нормальный поток документа

Урок «Наложение элементов»

В курсе «CSS: Позиционирование элементов»

Узнать о наложении элементов, связи позиционирования и наложения

Урок «Плавающие элементы»

В курсе «CSS: Позиционирование элементов»

Узнать о плавающих элементах и их особенностях

Урок «Гибкие элементы»

В курсе «CSS: Адаптивность сайта»

Познакомится с вёрсткой с использованием процентов.

Урок «Медиазапросы»

В курсе «CSS: Адаптивность сайта»

Познакомиться с одним из самых мощных инструментов для создания адаптивных сайтов — Media Queries

Урок «Viewport»

В курсе «CSS: Адаптивность сайта»

Узнать о мета-теге viewport и как он помогает в адаптивности.

Урок «Проверка адаптивности сайта»

В курсе «CSS: Адаптивность сайта»

Узнать о том, как проверить ваш сайт на различных устройствах.

Урок «Flex»

В курсе «CSS: Адаптивность сайта»

Узнать о возможностях Flex при создании адаптивных макетов.

Урок «Медиазапросы и другие устройства»

В курсе «CSS: Адаптивность сайта»

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

Урок «Введение»

В курсе «CSS: Адаптивность сайта»

Узнать о курсе, посвящённом адаптивной вёрстке

Нашли 8 курсов по тегу «вёрстка»

CSS: Адаптивность сайта

вёрстка

CSS адаптивность

CSS Flex

Viewport

7 часов

Посмотреть

CSS: Вёрстка на Grid

вёрстка

CSS Grid

6 часов

Посмотреть

CSS: Позиционирование элементов

позиционирование

HTML-элементы

вёрстка

9 часов

Посмотреть

Основы HTML, CSS и веб-дизайна

вёрстка

Веб-дизайн

GitHub Pages

Developer Tools

5 часов

Посмотреть

SASS: Основы работы

вёрстка

Препроцессоры CSS

4 часа

Посмотреть

SASS: Программирование

Препроцессоры CSS

Функции SASS

7 часов

Посмотреть

CSS: Transform (трансформация объектов)

CSS Transforms

CSS перспектива

7 часов

Посмотреть

HTML: Препроцессор Pug

Миксины

Шаблонизатор

9 часов

Посмотреть

Вам могут быть интересны темы: CSS перспектива Веб-дизайн CSS Grid Viewport Шаблонизатор GitHub Pages CSS3 Миксины Developer Tools позиционирование Трёхмерные объекты HTML-элементы CSS адаптивность SCSS Расширение CSS Гибкие макеты Анимации CSS Transforms Функции SASS HTML HTML5 Препроцессоры CSS Media Queries Pug Циклы SASS SASS Сетки CSS Flex

теги и атрибуты в HTML — Tokar.

ua

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

Теги (tags, таги, тэги) — это ключевые слова, которые окружены угловыми скобками (< и >). Теги являются основой языка HTML. Структура тега всегда такова:

<tag>content</tag>

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

Теги, которые не требуют закрытия имеют такой вид:

<tag />

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

Теги не мы не увидим в браузере, но они являются основой вёрстки любого сайта. Задача тегов — “объяснить” браузеру, где какие размещать элементы, какими свойствами они должны обладать. Далее вы увидите, как писать код и поймёте, где и какие теги следует использовать.

Вот основные теги, которые определяют структуру документа:

Тег	Описание
<html>...</html>	Весь документ. Всё содержимое должно находиться внутри этого тега
<head>...</head>	Информация о документе
<title>...</title>	Заголовок страницы, он отображается в заголовке вкладки в браузере
<body>...</body>	Визуальное содержимое страницы, все видимые элементы должны находиться внутри этого тега
<h2>...</h2>	Заголовок, может меняться от h2, самого главного, до h6
<p>...</p>	Параграф текста

Атрибуты тегов

Свойства тегов называют “атрибутами”. Теги могут иметь один или множество атрибутов, а могут быть совсем без них.

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

Правильно:

<a href="...">...</a>

Неправильно:

<a>...</a href="...">

Атрибуты указываются парами в виде имени и значения: имя="значение". Например, вы можете добавить атрибут lang элементу <html>:

<html lang="en-US">

Эта строка читается так: у тега <html> есть атрибут lang, и его значение — en-US.

Гиперссылки и изображения

Для создания гиперссылки используется тег <a>, основным атрибутом для ссылки всегда служит атрибут

href, который указывает, какая страница откроется при клике на этой ссылке. Вот пример текстовой ссылки, то есть содержимое тега <a> в данном случае — текст:

<a href="http://tokar. ua">Уроки верстки сайтов</a>

У одного и того же элемента может быть множество атрибутов. Например, тег <img>, который отвечает за изображения:

<img src="img.jpg" alt="Alt text" title="Title">

Давайте разберёмся в этой строке: у элемента <img> есть такие атрибуты:

• src — источник изображения, адрес файла, который должен загрузиться;
• alt — альтернативный текст, он будет отображаться вместо изображения, если оно по каким-то причинам не загружено. Например: изображение ещё загружается, неправильно указан его адрес или пользователь использует текстовый режим браузера;
• title — заголовок (подсказка) изображения, появляется при наведении курсора на него. Может также использоваться для гиперссылок;
• width и height — ширина и высота изображения в пикселях, реже указывается в процентах: height="50%". Если мы не указываем размеры, то изображение отобразится со своими реальными шириной и высотой.

Как добавлять атрибуты

Правила написания атрибутов очень просты:

• значения всегда должны указываться в кавычках;
• используйте только одни и те же кавычки: если слева значения стоит одинарная или двойная кавычка (' и " соответственно), то справа должна быть такая же;
• используйте только строчные буквы для имён атрибутов (не касается значений).

Приведу одни из самых часто используемых атрибутов:

Атрибут	Описание
alt	альтернативный текст для изображения
class	класс или классы
href	адрес, куда указывает ссылка
id	идентификатор
src	источник, обычно для изображений
title	подсказка для изображения или ссылки
value	значение, часто используется в формах

Атрибуты class и id

Классы и идентификаторы — это атрибуты, которые называются class и id соответственно.  Они нужны, чтобы можно было выбирать элементы, к которым применять стили. Для выбора элементов по классу, идентификатору или имени тега используются селекторы.

Селекторами могут быть любые имена тегов, но в том случае, когда тегов много, их придётся часто повторять. Тогда верстальщику пригодятся классы и идентификаторы, чтобы отличать одни теги от других.

Атрибуты class и id используются, чтобы можно было применить стили только к указанным объектам, они необходимы для стилевого оформления страниц (это CSS, речь о нём пойдёт в следующих уроках и он ещё успеет вам надоесть), а также для скриптов на страницах.

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

Правильно:

<img src="img.jpg" alt="">

Неправильно:

<img src="img. jpg" alt="">

Классов может быть любое количество, они указываются через пробел в атрибуте class, для одного и того же объекта можно указать как только идентификатор, так и только классы, а также и то, и то.

Пример:

<p>Текст</p>

Для имён идентификаторов и классов используются одинаковые правила:

• только латинские буквы
  хорошо: class="class_01", плохо: class="класс_01";
• только нижний регистр
  хорошо: class="class_01", нежелательно:;
• первый символ — только буква
  хорошо: image_01, плохо: 01_image;

Атрибут alt — обязателен для изображений

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

<img src="... " alt="">

Нижний регистр для имён атрибутов

Как имена классов и id, так и имена тегов должны указываться в нижнем регистре.

Вообще HTML-теги регистронезависимы, то есть <P> для браузера равнозначен <p>. В спецификации HTML5 нет указаний о том, какой регистр необходимо использовать. Тем не менее, раньше использование прописных букв в именах тегов являлось ошибкой.

Правильно:

<p>Как хорошо, что вы больны не мной</p>

Неправильно:

<P>Как хорошо, что я больна не вами</P>

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

+++ Курсы верстки бесплатные > октябрь 2022 | онлайн рейтинг курсов бесплатные

с нуля с дипломом для подростков с трудоустройством для детей для школьников

73 курсов найдено

Начальный

11 часов

Онлайн

Интерактивные уроки HTML верстки от сообщества Хекслет, бесплатное обучение хтмл для начинающих 11 часов. .. Для стандартизации вывода текста внутри браузера был придуман стандарт HTML, описывающий правила оформления текстовых данных для корректного вывода. Этот курс посвящён азам HTML разметки, работы с типографикой, вывода медиа документов и работы с формами

Подробнее о курсе

Сертификат
Занятий	41
Часов	11
Тип обучения	Онлайн
Трансляция	Прямой эфир
Вступительный экзамен
Проверка домашнего задания
Дипломный проект
Помощь в трудоустройстве
Возрастная категория	для взрослых, для студентов
Уровень подготовки	Начальный

Чему вы научитесь на данном курсе?

• Основы разметки HTML
• Текст в HTML
• Медиаэлементы
• Структура HTML документа
• Формы
• Семантические элементы HTML5

Читать подробнее о программе курса

Начальный

2 часов

Онлайн

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

Подробнее о курсе

Сертификат
Занятий	10
Часов	2
Периодичность	каждый день
Тип обучения	Онлайн
Трансляция	Видеозапись
Вступительный экзамен
Проверка домашнего задания
Дипломный проект
Помощь в трудоустройстве
Возрастная категория	для взрослых, для студентов
Уровень подготовки	Начальный

Видео о курсе

Чему вы научитесь на данном курсе?

• адаптивное меню на чистом html css
• flexbox для каждого
• адаптивный макет
• CSS Grid простыми словами
• JavaScript подключаем
• Быстро на flexbox
• Flexbox блоки
• Адаптивность под экран iphone X
• Footer, заканчиваем сайт
• как загрузить сайт на хостинг

Читать подробнее о программе курса

Начальный

2 часов

Онлайн

Flexbox практика для тех кто хочет освоить верстку сайта с нуля на технологии flexbox. Здесь покажу на практических примерах как использовать свойства css flexbox и сделать что то наглядное для примера.

Подробнее о курсе

Сертификат
Занятий	13
Часов	2
Периодичность	каждый день
Тип обучения	Онлайн
Трансляция	Видеозапись
Вступительный экзамен
Проверка домашнего задания
Дипломный проект
Помощь в трудоустройстве
Возрастная категория	для взрослых, для студентов
Уровень подготовки	Начальный

Видео о курсе

Чему вы научитесь на данном курсе?

• Первая сетка
• Адаптивная верстка сайта. Макет.
• Верстка сайта адаптивно с flexbox 2.
• Делаем header и навигацию сайта
• Продолжаем, верстка SideBar сайта
• Верстка адаптивного слайдера
• Верстка галереи адаптивно
• Верстка постов блога
• Верстаем форму регистрации
• Верстка адаптивного макета сайта
• Делаем крутящийся Спиннер на чистом CSS Анимации
• Основы за 5 минут для новичков

Читать подробнее о программе курса

Начальный

2 часов

Онлайн

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

Подробнее о курсе

Сертификат
Занятий	8
Часов	2
Периодичность	каждый день
Тип обучения	Онлайн
Трансляция	Видеозапись
Вступительный экзамен
Проверка домашнего задания
Дипломный проект
Помощь в трудоустройстве
Возрастная категория	для взрослых, для студентов
Уровень подготовки	Начальный

Видео о курсе

Чему вы научитесь на данном курсе?

• Начало, шапка сайта.
• Верстка на Flexbox. Адаптивные изображения
• футер
• страница Projects
• делаем блог
• вставляем Google карты
• Контактная форма с нуля
• CSS Grid в действии. Конец проекта

Читать подробнее о программе курса

Начальный

2 часов

Онлайн

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

Подробнее о курсе

Сертификат
Занятий	9
Часов	2
Периодичность	каждый день
Тип обучения	Онлайн
Трансляция	Видеозапись
Вступительный экзамен
Проверка домашнего задания
Дипломный проект
Помощь в трудоустройстве
Возрастная категория	для взрослых, для студентов
Уровень подготовки	Начальный

Видео о курсе

Чему вы научитесь на данном курсе?

• Начинаем верстку. Введение
• Адаптивное меню
• Верстаем блоки
• Flexbox азы
• CSS Grid на практике
• компании и отзывы
• Галерея изображений
• Форма обратной связи
• Footer. Закончили сайт

Читать подробнее о программе курса

Начальный

2 часов

Онлайн

В данном мини-курсе показано, как сверстать полноценную HTML-страницу из макета, созданного в программе Figma. Курс будет полезен как новичкам в верстке, так и тем, у кого уже есть базовые знания по HTML и CSS, но при верстке полноценной страницы из макета Photoshop или Figma испытывают затруднения.

Подробнее о курсе

Сертификат
Занятий	10
Часов	2
Периодичность	каждый день
Тип обучения	Онлайн
Трансляция	Видеозапись
Вступительный экзамен
Проверка домашнего задания
Дипломный проект
Помощь в трудоустройстве
Возрастная категория	для взрослых, для студентов
Уровень подготовки	Начальный

Видео о курсе

Чему вы научитесь на данном курсе?

• Обзор проекта. Подготовка изображений
• HTML-разметка шапки сайта
• Стили CSS для шапки сайта
• HTML-разметка блока «Скачать приложение»
• CSS-стили для блока «Скачать приложение»
• HTML-разметка для основного контента
• CSS-стили для основного контента
• Верстка подвала страницы
• Адаптация страницы.

Читать подробнее о программе курса

Начальный

72 часов

Онлайн

Как сделать верстку сайта. Правильная верстка сайта. Респонсив. Верстка сайта из PSD с нуля…. В этом мастер-классе покажу как сделать отзывчивый (responsive) адаптив. Научимся делать правильную адаптивную вёрстку лендинга используя HTML(KIT) CSS(SCSS) БЭМ и JS(jQuery).

Подробнее о курсе

Сертификат
Занятий	20
Часов	72
Периодичность	каждый день
Тип обучения	Онлайн
Трансляция	Видеозапись
Вступительный экзамен
Проверка домашнего задания
Дипломный проект
Помощь в трудоустройстве
Возрастная категория	для взрослых, для студентов
Уровень подготовки	Начальный

Видео о курсе

Чему вы научитесь на данном курсе?

• Как сделать верстку сайта. Правильная верстка сайта. Респонсив.
• Верстка сайта из PSD с нуля. Как сделать верстку сайта.
• Верстка макета SKETCH с нуля и до конца. Как сделать верстку сайта.
• Верстка лендинга из PSD с нуля и до конца.
• Марафон по верстке.
• Адаптивная верстка интернет-магазина с нуля.
• Адаптивная HTML-верстка макета из Figma с подробным объяснением. Советы от профи. HTML SCSS GULP.
• Адаптивная верстка сайта с объяснением действий. Добавление товара в корзину, AJAX подгрузка из JSON
• Объяснение действий. HTML CSS

Читать подробнее о программе курса

Начальный

1 месяц

Онлайн

На курсе вы изучите основы верстки и веб-разработки за 7 дней с проверкой ДЗ и поддержкой личного наставника.

Подробнее о курсе

Сертификат
Занятий	7
Месяцев	1
Периодичность	каждый день
Тип обучения	Онлайн
Трансляция	Видеозапись
Вступительный экзамен
Проверка домашнего задания
Дипломный проект
Помощь в трудоустройстве
Возрастная категория	для взрослых, для студентов
Уровень подготовки	Начальный

Чему вы научитесь на данном курсе?

• Знакомство с HTML.
• Погружение в CSS.
• Верстка настоящего сайта.
• Адаптивность для сайта.

Читать подробнее о программе курса

Начальный

230 часов

Онлайн

Уроки Bootstrap на itProger ⚡ Обучение адаптивной верстки для начинающих с нуля ⚡ Как работать с Бутстрап… Видеокурс по изучению программы Blender 3D. В ходе курса будет работа с интерфейсом программы, а также моделирование 3D объектов через графический интерфейс Блендера.

Подробнее о курсе

Сертификат
Занятий	16
Часов	230
Тип обучения	Онлайн
Трансляция	Видеозапись
Вступительный экзамен
Проверка домашнего задания
Дипломный проект
Помощь в трудоустройстве
Возрастная категория	для взрослых, для студентов
Уровень подготовки	Начальный

Чему вы научитесь на данном курсе?

• Умение разрабатывать различные 3D объекты, а также их разукрашивать за счёт использования материалов.
• Создание несколько простых объектов, которые впоследствии экспортируем в игровой движок Unity, где в дальнейшем возможно их использовать для создания персонажей и игр.

Читать подробнее о программе курса

Начальный

15 часов

Онлайн

Курс адаптивная верстка сайта с нуля по макету из Figma нацелен на то чтобы научить вас создать верстку сайта с нуля. По макету из Figma я покажу шаг за шагом как создается адаптивная верстка сайта. Адаптивная верстка сайта это верстка заточенная под разные устройства такие как смартфоны и планшеты.

Подробнее о курсе

Сертификат
Занятий	19
Часов	15
Периодичность	каждый день
Тип обучения	Онлайн
Трансляция	Видеозапись
Вступительный экзамен
Проверка домашнего задания
Дипломный проект
Помощь в трудоустройстве
Возрастная категория	для взрослых, для студентов
Уровень подготовки	Начальный

Видео о курсе

Чему вы научитесь на данном курсе?

• Подготовка проекта
• Шрифты и шапка сайта
• Pixel Perfect
• CSS Grid и медиа запросы
• CSS Flexbox
• Ваш запрос
• CSS Grid и медиа запросы
• Верстаем портфолио на CSS Grid
• Верстка раздела с текстом
• Наши партнеры
• Отзывы
• Контакты
• Профессия верстальщик
• Интерактив
• Интерактивное меню сайта на Materialize

Читать подробнее о программе курса

Начальный

20 часов

Онлайн

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

Подробнее о курсе

Сертификат
Занятий	11
Часов	20
Тип обучения	Онлайн
Трансляция	Видеозапись
Вступительный экзамен
Проверка домашнего задания
Дипломный проект
Помощь в трудоустройстве
Возрастная категория	для взрослых, для студентов
Уровень подготовки	Начальный

Чему вы научитесь на данном курсе?

• HTML — язык разметки
• CSS — каскадная таблица стилей
• Основы верстки сайта
• Фиксированная верстка
• Резиновая верстка
• Photoshop — нарезка макета.

Читать подробнее о программе курса

Начальный

20 часов

Онлайн

БЕСПЛАТНЫЙ курс по верстке сайтов. Верстка сайтов с нуля. Выпуски будут выходить в виде уроков по HTML CSS JS.

Подробнее о курсе

Сертификат
Занятий	53
Часов	20
Периодичность	каждый день
Тип обучения	Онлайн
Трансляция	Видеозапись
Вступительный экзамен
Проверка домашнего задания
Дипломный проект
Помощь в трудоустройстве
Возрастная категория	для взрослых, для студентов
Уровень подготовки	Начальный

Видео о курсе

Чему вы научитесь на данном курсе?

• Как правильно учиться в IT — сфере. ТОП ошибок при обучении. Конкретный план обучения.
• HTML уроки.
• HTML теги. Тег DIV и другие.
• HTML теги для КОНТЕНТА.
• HTML теги форм. HTML input.
• CSS синтаксис. Обнуление CSS стилей.
• CSS Стили шрифта и текста. CSS font-size. CSS color, CSS text-shadow.
• Свойства блоков. CSS padding. CSS margin. CSS display.
• Свойства и стили оформления блоков. CSS opacity.
• CSS свойство BACKGROUND. Делаем фон для сайта
• CSS псевдоклассы. Псевдокласс HOVER и другие.
• CSS псевдоэлементы. Псевдоэлементы BEFORE и AFTER.
• CSS позиционирование (CSS position).
• Препроцессор SASS/SCSS за 38 минут. Что такое SASS, SCSS.
• Подключение шрифтов. Google Fonts. CSS font-face. Как подключить шрифты
• Методология БЭМ за 17 минут. Пример верстки по БЭМ методологии

Читать подробнее о программе курса

Начальный

146 часов

Онлайн

В этом плейлисте собираю всю базу знаний по html — верстке сайтов. Тут и теория и практические уроки туториалы. А так же обзоры и мануалы по программам и инструментам для верстки.

Подробнее о курсе

Сертификат
Занятий	140
Часов	146
Периодичность	каждый день
Тип обучения	Онлайн
Трансляция	Видеозапись
Вступительный экзамен
Проверка домашнего задания
Дипломный проект
Помощь в трудоустройстве
Возрастная категория	для взрослых, для студентов
Уровень подготовки	Начальный

Видео о курсе

Чему вы научитесь на данном курсе?

• Что такое ВЕРСТКА сайта? Как работает сайт? Что такое HTML CSS JS
• Sublime Text 3 настройка установка плагины
• Avocode для верстальщика // Как пользоваться Avocode 30 дней бесплатно
• Первый урок по HTML верстке. Уроки HTML CSS JS.
• HTML теги. Тег DIV и другие.
• HTML теги для КОНТЕНТА.
• HTML теги форм. HTML input.
• CSS синтаксис. Обнуление CSS стилей.
• CSS Стили шрифта и текста. CSS font-size. CSS color, CSS text-shadow.
• Свойства блоков. CSS padding. CSS margin. CSS display.
• Свойства и стили оформления блоков. CSS opacity.
• CSS свойство BACKGROUND. Делаем фон для сайта
• CSS псевдоклассы. Псевдокласс HOVER и другие.
• CSS псевдоэлементы. Псевдоэлементы BEFORE и AFTER.
• CSS позиционирование (CSS position).
• Prepros что это. Как пользоваться prepros

Читать подробнее о программе курса

Начальный

18 часов

Онлайн

БЕСПЛАТНЫЙ курс по верстке сайтов. Верстка сайтов с нуля. Выпуски будут выходить в виде уроков по HTML CSS JS. #обучение

Подробнее о курсе

Сертификат
Занятий	53
Часов	18
Периодичность	каждый день
Тип обучения	Онлайн
Трансляция	Видеозапись
Вступительный экзамен
Проверка домашнего задания
Дипломный проект
Помощь в трудоустройстве
Возрастная категория	для взрослых, для студентов
Уровень подготовки	Начальный

Видео о курсе

Чему вы научитесь на данном курсе?

• ПЛАН РАЗВИТИЯ ФРОНТЕНД РАЗРАБОТЧИКА. ЭФФЕКТИВНОЕ ОБУЧЕНИЕ HTML CSS JAVASCRIPT
• Как правильно учиться в IT — сфере. ТОП ошибок при обучении. Конкретный план обучения.
• HTML уроки. Первый урок по HTML верстке. Уроки HTML CSS JS. Урок №1
• HTML уроки. HTML теги. Тег DIV и другие. Уроки HTML CSS JS. Урок №2
• HTML уроки. HTML теги для КОНТЕНТА. Уроки HTML CSS JS. Урок №3
• HTML уроки. HTML теги форм. HTML input. Уроки HTML CSS JS. Урок №4
• CSS синтаксис. Обнуление CSS стилей. Уроки HTML CSS JS. Урок №5
• CSS Стили шрифта и текста. CSS font-size. CSS color, CSS text-shadow. Уроки HTML CSS JS. Урок №6
• Свойства блоков. CSS padding. CSS margin. CSS display. Уроки CSS HTML JS. Урок №7
• Свойства и стили оформления блоков. CSS opacity. Уроки HTML CSS JS. Урок №8
• CSS свойство BACKGROUND. Делаем фон для сайта // Уроки HTML CSS JS. Урок №9
• CSS псевдоклассы. Псевдокласс HOVER и другие. Уроки HTML CSS JS. Урок №10
• CSS псевдоэлементы. Псевдоэлементы BEFORE и AFTER. Уроки HTML CSS JS. Урок №11
• CSS позиционирование (CSS position). Уроки HTML CSS JS. Урок №12
• и т.д.

Читать подробнее о программе курса

Начальный

5 часов

Онлайн

Эффективное обучение HTML онлайн в режиме 24/7 — 65 видео уроков и заданий по верстке и веб программированию… С помощью видеокурса HTML и CSS вы научитесь верстать адаптивные HTML страницы. Вы самостоятельно создадите портал КиноМонстр с помощью уроков HTML и CSS, работающий как на компьютерах, так и на мобильных устройствах.

Подробнее о курсе

Сертификат
Занятий	11
Часов	5
Тип обучения	Онлайн
Трансляция	Видеозапись
Вступительный экзамен
Проверка домашнего задания
Дипломный проект
Помощь в трудоустройстве
Возрастная категория	для взрослых, для студентов
Уровень подготовки	Начальный

Чему вы научитесь на данном курсе?

• Основы верстки сайтов (html и css) Как пользоваться html-тэгами div, span, p, ul, li и другими Для чего нужен CSS (каскадные таблицы стилей) и узнаете о css-свойствах Как использовать css-свойства margin, position, padding, color, background и другие Что такое адаптивная верстка Как сделать верстку сайта Как пользоваться инструментами разработчика в браузере Google Chrome Что такое viewport и как его использовать Как создать раздел с комментариями на сайте Как встроить видео в html-страницу Как изменить верстку сайта в браузере Как связать html-страницы между собой Как сверстать меню на сайте

Читать подробнее о программе курса

Найдено курсы верстки в таких городах:

Киев Одесса Днепр Харьков Львов Запорожье Кривой Рог Николаев Винница Мариуполь Херсон Чернигов Черкассы Хмельницкий Черновцы Житомир Сумы Ровно Ивано-Франковск Каменское Кропивницкий Тернополь Кременчуг Луцк Белая Церковь Краматорск Мелитополь Ужгород Бердянск Никополь Бровары Павлоград Борисполь Обухов Васильков Буча Ирпень Мукачево Белгород-Днестровский Фастов Измаил Умань

Другие курсы:

Курсы с нуля Курсы с дипломом Курсы для подростков Курсы бесплатные Курсы с трудоустройством Курсы для детей Курсы для школьников

Вёрстка: видео уроки и вебинары для начинающих (бесплатно)

Вёрстка: видео уроки и вебинары для начинающих (бесплатно) — Skillbox

Все направления Программирование Дизайн Маркетинг Управление Игры Кино и Музыка Психология Общее развитие Другое

Поиск

• Вёрстка

Тематика

• Вёрстка
• Геймдизайн
• Рисование и иллюстрация
• 3D-моделирование
• 3D

Спикеры

• Олег Жуковский
• Александр Солодский
• Ярослав Бакланов
• Мария Шейкина
• Алексей Коновалов

Геймдизайн Рисование и иллюстрация 3D-моделирование 3D Кино Тестирование Игровые движки Разработка игр Unreal Engine 4 Unity 2D и 3D-графика Вёрстка PHP SQL Базы данных Machine Learning Python Визуализация данных Data Science Математика Работа с таблицами Backend-разработка Figma Аналитика Frontend-разработка Мобильные приложения Git Администрирование Веб-приложения Создание сайтов Фреймворки Java Алгоритмы и структуры данных Командная строка (Bash) iOS JavaScript Android Развитие продукта Планирование Финансы Soft Skills Сценарий CustDev Юнит-экономика Управление проектами Digital-агентства Лидогенерация HR Продажи Мотивация Оформление презентаций Предпринимательство Менеджмент Бизнес Коммьюнити Разработка концепции Стратегия CRM Конкурентный анализ Исследование аудитории Бренд UX/UI Фриланс Управление командами Прототипирование Продюсирование Performance-маркетинг ВКонтакте Работа с документами SMM SEO PR Трафик Таргетированная реклама Контент-маркетинг Контекстная реклама Дизайн среды Портфолио дизайнера Adobe Illustrator Дизайн-концепция Композиция и цвет Photoshop Дизайн интерьера Декорирование Ландшафтный дизайн Скетчинг Графический дизайн Веб-дизайн Создание музыки Обработка фотографий Ювелирный дизайн Монетизация Творчество Фотография Киберспорт Fashion-дизайн Спорт Саунд-дизайн Сторителлинг EdTech Теория музыки Сведение и мастеринг Ableton Live Adobe Premier Монтаж Avid Davinci Основы композиции Видео производство Работа с камерой Продюсирование видео Работа с блогерами Маркетинг игр Дизайн-документ Motion-дизайн Docker DevOps Linux Клипы After Effects Kotlin Анализ аудитории Продюсирование курсов Golang Искусственный интеллект 1C Swift Кросплатформенная разработка Kubernetes Дизайн мобильных приложений Создание сеттинга Flutter C# Дизайн-системы Информационная безопасность Abletone Selenium WebDriver 3D-анимация С++

5 вебинаров

• 02:07:18

  Web Scraping: парсим данные веб-сайтов с помощью Python

  29. 09.2022 3920

• 01:39:00

  Web Scraping: парсим данные веб-сайтов с помощью Python

  19.09.2022 4591

• 06:44:16

  Создание веб-сайта

  25.12.2021 5553

• 01:54:00

  Азы работы с данными в Power BI

  25.10.2021 6301

• 01:59:51

  Знакомимся с fullstack-разработкой

  25.10.2021 3369

• Бесплатный интенсив 6 ‒ 8 октября

  Востребованные профессии в цифровом дизайне: 10 лёгких точек входа

  Подробнее

• Бесплатный интенсив 6 ‒ 8 октября

  Как выбрать язык программирования и найти работу

  Подробнее

• Бесплатный интенсив 6 ‒ 8 октября

  Профессия Data Scientist: учимся обработке и анализу данных за 3 дня

  Подробнее

Видео курс HTML5 & CSS3 Стартовый.

Верстка с использованием Flexbox

• Главная >
• Каталог >
• HTML5 & CSS3 Стартовый >
• Верстка с использованием Flexbox

Для прохождения теста нужно авторизироваться

Войти Регистрация

×

Вы открыли доступ к тесту! Пройти тест

Для просмотра полной версии видеокурса, онлайн тестирования и получения доступа к дополнительным учебным материалам купите курс Купить курс

Для просмотра всех видеокурсов ITVDN, представленных в Каталоге, а также для получения доступа к учебным материалам и онлайн тестированию купите подписку Купить подписку

№1

Введение в HTML

0:31:13

Материалы урокаДомашние заданияТестирование

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

Читать дальше…

Типы элементов и атрибуты

0:28:51

Материалы урокаДомашние заданияТестирование

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

Читать дальше…

Введение в CSS

0:35:54

Материалы урокаДомашние заданияТестирование

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

Читать дальше…

Определение размеров блоков

0:34:24

Материалы урокаДомашние заданияТестирование

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

Читать дальше…

Работа с отступами, свойство margin

0:27:19

Материалы урокаДомашние заданияТестирование

В этом уроке вы познакомитесь с механикой работы внешних отступов у элементов. Узнаете, что такое проваливание (схлопывание) и в каких случаях оно присутствует. Будут также рассмотрены неявные отступы при работе с строчно-блочными элементами.

Читать дальше…

Работа с текстом и видимостью элементов

0:38:52

Материалы урокаДомашние заданияТестирование

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

Читать дальше…

Верстка с использованием Flexbox

0:28:25

Материалы урокаДомашние заданияТестирование

Целью занятия является разобрать основные принципы работы модуля Flexbox и научиться их использовать. Рассматривается возможность задавать гибкое расстояние между блоками и то, как определяются их размеры в некоторых случаях, а также поведение внешних отступов при использовании flexbox.

Читать дальше…

Комбинирование селекторов

0:35:59

Материалы урокаДомашние заданияТестирование

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

Читать дальше…

Работа с фоном, свойство background

0:30:36

Материалы урокаДомашние заданияТестирование

На занятии будут рассмотрены основные способы записи палитры цветов в свойствах, где указывается окрас. Будет рассмотрено в чем разница установки прозрачности элемента через opacity и rgba(). Рассматриваются случаи добавления картинок через css и размещение большого их количества на одном элементе.

Читать дальше…

Семантическая верстка

0:20:23

Материалы урокаДомашние заданияТестирование

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

Читать дальше…

Следующий курс:

JavaScript Стартовый

ПОКАЗАТЬ ВСЕ

ПОДРОБНЕЕ

ПОДРОБНЕЕ

ПОДРОБНЕЕ

ПОДРОБНЕЕ

Регистрация через

✖

или E-mail

Нажав на кнопку «Зарегистрироваться»,
Вы соглашаетесь с условиями использования.

Уже есть аккаунт

Получите курс бесплатно

✖

Вы выбрали курс для изучения
«»
Чтобы получить доступ к курсу, зарегистрируйтесь на сайте.

РЕГИСТРАЦИЯ

Спасибо за регистрацию

✖

Перейдите на почту и подтвердите Ваш аккаунт,
чтобы получить доступ ко всем
бесплатным урокам и вебинарам на сайте ITVDN.com

ПОДТВЕРДИТЬ ПОЧТУ НАЧАТЬ ОБУЧЕНИЕ

Спасибо за регистрацию

✖

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

НАЧАТЬ ОБУЧЕНИЕ

Подтверждение аккаунта

На Ваш номер телефона было отправлено смс с кодом активации аккаунта. Пожалуйста, введите код в поле ввода.

Отправить код еще раз

Изменить номер телефона

Ошибка

✖

Видео курс по вёрстке

Видео курс по вёрстке

Заказать

О курсе

Структурированный материал

Символическая цена

Пожизненный доступ

Практические задания

35 видео уроков (5 часов)

Просмотр со смартфона

Курс для тех, кто

Хочет научиться создавать сайты своими силами

Учится современным инструментам разработки

Еще не знает язык HTML и CSS, но хочет выучить

Хочет стать крутым мастером и зарабатывать деньги

Заказать

Программа курса

Модуль 1

(HTML)

Краткий обзор того, что мы будем изучать в данном видео курсе.

В этом уроке мы установим браузер Google Chrome и редактор кода VS Code.

Рассмотрим функции редактора VS Code и узнаем как с ним работать.

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

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

Научимся создавать списки на своем сайте.

В этом уроке мы рассмотри, как создавать таблицы на языке HTML.

В этом видео уроке мы узнаем, как работать с текстом.

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

Рассмотрим универсальные атрибуты, которые можно добавлять любому HTML тегу.

Научимся работать с RGB цветом и добавлять специальные символы на свой сайт.

Модуль 2

(CSS)

Рассмотрим основные CSS селекторы, узнаем что это такое и зачем они нужны.

Научимся работать с изображениями на языке CSS.

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

Разберемся, как изменять размеры элементов на странице с помощью CSS.

Научимся работать со шрифтами. Установим свой шрифт на сайт.

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

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

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

В этом уроке мы будем учиться создавать адаптивную сетку на CSS. Так же научимся работать с переменными и функцией calc. Узнаем, как создавать медиа-запросы, чтобы сделать адаптивную версию своего сайта для мобильных устройств. Научимся создавать макет с 12-колончатой сеткой в Photoshop, сравним нашу сетку с сеткой Bootstrap 5, а так же научимся её подключать и узнаем как проверять свой сайт на эмуляторе мобильных устроств прямо с браузера на ПК.

Задание для практики по теме ‘создание адаптивной сетки на CSS’.

Модуль 3

(Практика)

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

Домашнее задание для закрепления изученного материала в предыдущем уроке.

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

Домашнее задание для закрепления изученного материала в предыдущем уроке.

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

Домашнее задание для закрепления изученного материала в предыдущем уроке.

В этом уроке мы рассмотрим графический редактор Photoshop и научимся основным приемам, которые могут пригодиться верстальщику.

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

Домашнее задание для закрепления изученного материала в предыдущем уроке.

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

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

Об авторе

Исмаил Усеинов

Занимаюсь веб-разработкой с 2013 года.

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

Обучаю языкам HTML, CSS, JavaScript, PHP, работе с препроцессорами, сборщиками и системой контроля версий Git, а также многому другому из мира веб-технологий. Уже более тысячи моих учеников научились создавать сайты самостоятельно и зарабатывать на этом деньги.

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

Отзывы о курсе

Кристина Трибой

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

Мне есть с чем сравнить, т.к. начала обучение с 0 по книгам и другим источникам в интернете 6 месяцев назад и уроки на канале ITDoctor могу смело назвать лучшими для новичков. Пересмотрела уже почти все, они очень качественные, хорошо продуманные, не затянутые. Автор всегда на связи, отвечает на вопросы, помогает — просто фантастика! ITDoctor — это уже бренд! С чем Вас, Исмаил и поздравляю!

Курс по HTML & CSS

Обучающий курс по изучению языка гипертекстовой разметки HTML и каскадных таблиц стилей CSS от автора образовательного канала ITDoctor. Это практический видеокурс: в каждой главе теоретический материал будет закрепляться множеством наглядных примеров кода.

• 35 практических уроков
• Продолжительность 5 часов
• Готовые примеры кода
• Никаких ограничений по времени
• 7 домашних заданий

Купить

Курсы онлайн-обучения по компоновке и компоновке

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

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

Перейти к основному содержанию

• Лучший матч

  Количество просмотров

  Новейшие

• Новичок (149)

  Промежуточный (275)

• Курс (14)

  Видео (326)

  Путь обучения (4)

• < 10 минут (325)

  10 — 30 минут (3)

  30 — 60 мин (4)

  1 — 2 часа (4)

  2 — 3 часа (3)

  3+ часа (5)

• Индизайн (175)

  иллюстратор (37)

  Фотошоп (1)

1. Все темы
2. творческий
3. Графический дизайн

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

• 3 м

• 4 м

• 6м

• 6м

• 4 м

• 1м

• 2м

• 2 м

• 2м

• 1м

• 2ч 3м

• 5м

• 1м

• 5м

• 2м

• 6м

• 1ч 1м

• 3 м

• 3 м

• 3 м

Присоединяйся сейчас

Все уроки дизайна — Hack Design

Добро пожаловать

Hello World

Добро пожаловать в HackDesign! Урок 0 подготовит вас к урокам, которые вы начнете получать каждую неделю, и которые помогут вам повысить грамотность и мастерство дизайна. Взволнованный? На этой неделе это всего лишь одна ссылка. Это самый мощный дизайнерский ресурс, о котором я знаю лично, и я рад поделиться им с вами…

Прочитать урок 0

Уэллс Райли

Введение

Что такое дизайн? Почему это важно?

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

Прочитать урок 1

Уэллс Райли

Погружение в типографику

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

Прочитать урок 2

Керем Суер

Удивительная новая мобильная сеть

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

Прочитать урок 3

Люк Бирд

Знай свои инструменты

Меня всегда раздражала фраза «плохой рабочий всегда винит свои инструменты» — плохие инструменты снижают качество работы. Великие работники тоже винят свои инструменты! Если они не работают, их следует винить. Вы просто не сможете добиться наилучших результатов без потрясающих инструментов и навыков, позволяющих ими хорошо пользоваться. Отличные инструменты позволяют нам делать непрактичное и невозможное. Они дают нам сверхспособности…

Прочитать урок 4

Марк Эдвардс

Типографика

Типографика в дизайне продукта

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

Прочитать урок 5

Джаред Эронду

Изучение мира шрифтов

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

Прочитать урок 6

Саша Грайф

Адаптивная типографика в действии

Типографика всегда была основой дизайна и дизайна. коммуникация. Мы находимся в интересном моменте времени, когда нам дается ранее неизвестный объем контроля над нашей работой, но также и новый & страшные испытания, когда мы пытаемся адаптироваться к постоянно меняющемуся морю устройств и контекстов…

Прочитать урок 7

Джон Голд

Типографика на практике и куда двигаться дальше

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

Прочитать урок 8

Мойз Сайед

Опыт пользователя

Введение в дизайн взаимодействия с пользователем

Нашей отрасли потребовалось несколько лет, чтобы полностью понять, насколько важен пользовательский опыт (UX) для всего, что мы создаем. Теперь, когда мы можем измерить и подтвердить взаимосвязь между хорошим UX и успешными веб-сайтами, навыки UX пользуются большим спросом: PayScale показывает среднюю заработную плату около 41 000 долларов для веб-дизайнеров, 50 000 долларов для веб-разработчиков и 77 000 долларов для дизайнеров пользовательского интерфейса.

Прочитать урок 9

Дэн Замбонини

Инструменты быстрого прототипирования и передовой опыт

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

Прочитать урок 10

Джо Робинсон

Определение и расширение пользовательского опыта

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

Прочитать урок 11

Патрик Алгрим

Понимание пользователя в пользовательском опыте

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

Прочитать урок 12

Грейс Нг

Пользовательский интерфейс

Векторный дизайн интерфейса

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

Прочитать урок 13

Джефф Бродерик

Среда и механика иконографии

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

Прочитать урок 14

П. Дж. Онори

Обеспечение потока контента: внедрение адаптивного веб-дизайна

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

Прочитать урок 15

Каролина Щур

Дизайн пользовательского интерфейса с целью

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

Уверенность в цвете

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

Прочитать урок 17

Джоанн Чанг

Белое пространство: проектирование невидимого

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

Прочитать урок 18

Дэвид Кадавы

Достижение визуальной иерархии

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

Прочитать урок 19

Лиз Стательман

Решая, что хорошо: принципы дизайна

Дизайн (по своей природе) вещь субъективная. Это еще и командный вид спорта. При принятии дизайнерских решений о внешнем виде, ощущении или содержании часто возникают разногласия, и может возникнуть напряженность. Итак, как вы решаете, что «хорошо» для вашего продукта? Хороший дизайн получается, когда хороший пользовательский интерфейс сочетается с солидным фирменным стилем…

Прочитать урок 20

Кейт Раттер

Мобильный

Разработка вашего первого приложения для iPhone

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

Прочитать урок 21

Брайан Бенитес

Проектирование для мобильного Интернета

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

Прочитать урок 22

Джули Энн Хорват

Аналитика мобильных приложений не такая уж особенная

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

Прочитать урок 23

Кайл Уайлд

Использование значков в интерфейсах

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

Прочитать урок 24

Брент Джексон

Дизайн взаимодействия

Власть для людей — освоение дизайна, ориентированного на человека

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

Прочитать урок 25

Чад Маццола

Контентная стратегия для интерфейсов

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

Прочитать урок 26

Эми Тибодо

Креативное решение проблем и повседневный дизайн

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

Прочитать урок 27

Энди Хагерман

Эффективный дизайн поведения

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

Прочитать урок 28

Алекс Болдуин

Развитие сострадания

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

Прочитать урок 29

Уитни Хесс

Внешний вид

Проектирование с помощью кода

Некоторые дизайнеры боятся прикасаться к коду, а другие просто предпочитают другие инструменты…

Прочитать урок 30

Крис Ли

It’s All Just Systems Design

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

Прочитать урок 31

Ян Сторм Тейлор

Проектирование с использованием сеток

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

Прочитать урок 32

Реда Лемеден

Летние каникулы!

Надеемся, вам уже нравится Hack Design! Поскольку мы готовимся к завершению второй половины года, воспользуйтесь этой неделей, чтобы вернуться и закончить все уроки, которые вы еще не закончили. Если вы все догнали, идите! Попробуйте поработать над проектом на этой неделе и спроектируйте то, что вы не смогли бы сделать восемь месяцев назад…

Прочитать урок 33

Уэллс Райли

Дизайн продукта

Разработка качественных продуктов

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

Прочитать урок 34

Натан Манусос

Мелочи имеют значение

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

Прочитать урок 35

Кайл Брэггер

Разработка продуктов, формирующих привычки

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

Прочитать урок 36

Нир Эяль

Целостное руководство по проектированию продукта

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

Прочитать урок 37

Джозеф Хуан

Расширенный пользовательский интерфейс

Анимация, прямое манипулирование и обратная связь

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

Прочитать урок 38

Бен Тейлор

Человеческий элемент

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

Прочитать урок 39

Скотт Херфф

Необходимые средства для приручения дикого зверя. Продвижение прототипов с помощью Quartz Composer

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

Прочитать урок 40

Дэйв О Брайен

Прототипирование расширенных мобильных взаимодействий с помощью Framer

Поскольку движение и анимация становятся все более и более важными в дизайне пользовательского интерфейса, дизайнеры начали искать лучшие инструменты, которые помогут им добавить интерактивности в свою работу. Возможно, вы уже слышали об After Effects, Quartz Composer или Xcode раньше в этом контексте. ..

Прочитать урок 41

Cemre Güngör

Расширенный пользовательский интерфейс

Всеобъемлющий пользовательский опыт

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

Прочитать урок 42

Cat Noone

Дизайн своими ушами

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

Прочитать урок 43

Артур Бодолец

Завоюйте Интернет с помощью A/B-тестирования

Разработка веб-сайтов и создание продуктов для людей — увлекательная работа. Вы можете использовать креативность и навыки решения проблем для создания, в некоторых случаях, решений, меняющих мир. Однако самая захватывающая часть этого процесса — возможность проводить сеансы исследования пользователей и A/B-тесты, чтобы увидеть, как ваши клиенты на самом деле используют ваш продукт…

Создайте свое мобильное приложение для нескольких платформ

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

Читать урок 45

Никки Уилл

Контекст и последующие шаги

Начало карьеры в области дизайна

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

Прочитать урок 46

Жанна Хаган

Как получить свою первую работу в области дизайна без опыта

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

Прочитать урок 47

Девон Ко

Почему дизайн?

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

Прочитать урок 48

Алекс Болдуин

Vim как инструмент дизайна

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

Прочитать урок 49

Адам Морс

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

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

Прочитать урок 50

Тухин Кумар

Обратный дизайн: основы | Культ педагогики

---

Слушайте этот пост как подкаст:

При поддержке PowerSchool и ISTE U

---

Этот пост содержит партнерские ссылки Amazon. Когда вы совершаете покупку по этим ссылкам, Cult of Pedagogy получает небольшой процент от продаж без каких-либо дополнительных затрат для вас.

---

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

Чтение прошло более-менее нормально. Некоторые главы мы прочитывали в классе (я читал им, потом они молча читали), а другие дома. Некоторые студенты увлеклись романом так, как я и надеялся; другие, не очень. Как и ожидалось, некоторые отстали в книге, как и во всем заданном чтении.

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

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

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

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

Мне не нравится это признавать.

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

Все было бы совсем иначе, если бы я знал об обратном дизайне.

Когда учителя говорят друг с другом о предмете, который они преподают , они часто говорят что-то вроде этого:

«Какие романы ты читаешь в 8-м классе?»

«О, это будет прекрасно. Я могу использовать это, когда буду преподавать американскую революцию!»

«Я не думаю, что смогу это вместить; мы делаем лунные фазы в следующем месяце».  

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

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

Традиционное планирование против обратного планирования

Традиционный дизайн урока

В течение многих лет учителя планируют уроки и блоки обучения следующим образом:

Шаг 1: Определите тему или часть контента, которые необходимо осветить.

Шаг 2: Спланируйте последовательность уроков для обучения этому контенту.

Шаг 3: Создайте оценку для измерения обучения, которое должно было произойти на этих уроках.

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

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

Так что с ним не так? Ну, когда мы планируем таким образом, мы, скорее всего, включим контент и действия, которые имеют сомнительную ценность. Например, при обучении Американской революции, если наша цель состоит в том, чтобы просто «рассказать об Американской революции», мы можем использовать все, что имеет какое-либо отношение к этой теме: раскраску Бостонского чаепития, проект создания колониального флага. , или рабочий лист, где учащиеся расшифровывают такие слова, как минитмен, независимость, и Хэнкок.

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

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

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

Обратная конструкция

В своей книге «Понимание посредством дизайна», которая была первоначально опубликована в 1998 году, Грант Виггинс и Джей МакТай познакомили нас с обратным проектированием, подходом к планированию обучения, который начинается с конечной цели, а затем работает в обратном направлении. «Полная» версия исходного подхода Виггинса и МакТи довольно сложна, и ее реализация может занять много времени. Если вы готовы к этому, я рекомендую покопаться в их книге. Однако сейчас я просто поделюсь самой базовой версией обратного дизайна.

Вот шаги:

Шаг 1: Определите, что учащиеся должны знать и уметь к концу цикла обучения.

Шаг 2: Создайте оценку для измерения этого обучения.

Шаг 3: Спланируйте последовательность уроков, которые подготовят учащихся к успешной сдаче экзамена.

Разница в порядке существенна: Сначала спланируйте оценку , а затем спланируйте только те уроки, которые будут способствовать успешной сдаче этой оценки учащимся.

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

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

До и после: лунный цикл

Раньше, когда конечный продукт является тестом

В какой-то момент своей школьной карьеры ученики изучают фазы луны. Вот один довольно типичный способ научить этому: 

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

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

Следуя этому плану, учитель был бы вполне доволен тем, что он «раскрыл» тему лунных фаз. Но если мы посмотрим на Научные стандарты нового поколения (NGSS), то в стандарте, касающемся лунных фаз, говорится, что учащиеся 6-8 классов будут:

« Разработать и использовать модель системы Земля-Солнце-Луна для описания циклических моделей лунных фаз, затмений солнца и луны и времен года» (MS-ESS1-1).

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

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

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

Но не совсем. Попросить человека разработать модель — задача гораздо более высокого порядка, чем попросить его скопировать модель. Описывать системы и паттерны намного сложнее, чем выбрать правильное описание .

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

Именно это имели в виду авторы NGSS: «Любое образование, которое фокусируется преимущественно на подробных продуктах научного труда — фактах науки — без развития понимания того, как эти факты были установлены, или которое игнорирует многие важные приложения науки в мире искажает науку и маргинализирует важность техники». (Национальный исследовательский совет, 2012 г., стр. 43).

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

После, где конечным продуктом является модель и презентация

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

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

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

• Прямое обучение: Учащимся необходимо знать основы лунной системы. Запоминание не является целью, поэтому мы не оцениваем его, но студенты должны знать информацию достаточно хорошо, чтобы объяснять ее и использовать правильный словарный запас, чтобы мы могли сохранить лекцию или видео в соответствии с первоначальным планом. И если они немного поработают с информацией на каком-нибудь листе или с какой-нибудь онлайн-практикой, это нормально, но я бы не стал ставить баллы за эту работу. Если вам нужно мотивировать учащихся, потребуйте, чтобы они продемонстрировали мастерство (например, набрали не менее 80 % в матчевой игре с набором карточек Quizlet), прежде чем они смогут перейти к следующему шагу.
• Активная обработка с моделями: Затем дайте учащимся возможность поработать с моделью, чтобы они испытали цикл в действии. Это углубит их понимание системы Земля-Солнце-Луна, что лучше подготовит их к проведению собственных презентаций. Что-то вроде этой интерактивной модели из CK-12 позволяет учащимся манипулировать временем суток и положением луны, чтобы увидеть, как эти переменные меняют то, что мы видим в небе. Работая в группах, учащиеся могут использовать симулятор, чтобы отвечать на вопросы о внешнем виде Луны в зависимости от того, в какой фазе она находится и в какое время суток, а затем переходить к составлению и проверке прогнозов на основе этих переменных.
• Практика проведения презентаций: Если учащиеся собираются хорошо подготовиться к заключительной презентации, им необходимо попрактиковаться в объяснении лунного цикла своими словами. Используя существующую модель (например, интерактивную, упомянутую в предыдущем шаге), попросите учащихся объяснить лунные фазы, включая информацию о временах года и затмениях, партнеру или небольшой группе. Попросите партнеров по прослушиванию «тренировать» ведущего, если в их описании есть какие-либо неточности или неточности. Услышав, как их сверстники объясняют систему, а также попытавшись объяснить сами, они помогут им более свободно использовать язык лунного цикла.
• Разработка моделей: Теперь учащиеся приступают к разработке собственных моделей. В стандарте не указано, что это должна быть физическая модель, поэтому вы можете предложить учащимся выбор: модель вполне может быть сделана из пенопластовых шариков, но это также может быть нарисованная от руки диаграмма, презентация в виде слайд-шоу, анимационное видео. , детская книжка или даже короткая пародия, которую они представляют классу или записывают на видео. Многие из этих вариантов, например детская книга, включают в себя часть «презентации» вместе с моделью. Дайте учащимся время в классе для работы над этими моделями; это гарантирует, что они будут выполнять свою работу самостоятельно, и позволит вам дать обратную связь, если учащийся движется в неправильном направлении. Напоминайте им регулярно, что объяснение модели составляет почти половину их оценки, поэтому им следует рассмотреть возможность написания сценария, если их презентация будет «живой».
• Презентации моделей: Наконец, учащиеся представляют свои модели. Если у вас есть много студентов, предпочитающих «живую» презентацию, это может занять несколько уроков, что может быть довольно утомительным, поскольку предмет одинаков для всех. Чтобы сократить это общее время, учащиеся должны присутствовать перед всем классом только в том случае, если класс действительно участвует в модели (например, в какой-то пародии или симуляции). В противном случае студенты могут записывать свои презентации на видео или презентовать их один на один, пока их одноклассники работают над чем-то другим самостоятельно.

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

Некоторые вопросы по урокам

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

1. Что именно требуют ваши стандарты? Просят ли они учащихся запоминать и определять факты или просят их описывать, объяснять, анализировать или создавать? (Вероятно, последнее.)
2. Если последнее, , насколько точно ваши оценки соответствуют этим стандартам? Действительно ли они требуют от учащихся описания, объяснения, анализа или создания (что, вероятно, потребует от них написания, презентации или создания какого-либо продукта), или они просто просят их узнать, когда это делает кто-то другой в виде ответа на тесте с несколькими вариантами ответов?
3. Вам нужно скорректировать свои оценки , чтобы они больше соответствовали стандартам?
4. Если вы это сделаете, следующим шагом будет переработка уроков, которые привели к этой оценке. Влияет ли каждый урок на успех учащихся в этой оценке? Можно ли пропустить некоторые из ваших уроков, потому что они не связаны напрямую с оцениванием? Вам что-нибудь не хватает? Например, если ваша оценка требует, чтобы учащиеся писали академическим языком и подтверждали свои идеи доказательствами, вы должны включить несколько уроков, которые дадут учащимся возможность попрактиковаться в письме такого типа.
5. Наконец, будет ли оценка иметь большое значение в вашем журнале оценок? (Так и должно быть.) Уроки и действия, ведущие к окончательной оценке, предназначены для того, чтобы дать учащимся знакомство со знаниями и попрактиковаться с навыками, необходимыми для выполнения этой итоговой оценки; в идеале они вообще не должны получать оценок за эти действия. Если вам абсолютно необходимо поставить какие-то баллы, убедитесь, что окончательная оценка стоит намного больше, чем эти более мелкие задачи.

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

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

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

---

Артикул:

Национальный исследовательский совет (2012 г.). Структура естественнонаучного образования K-12: практика, сквозные концепции и основные идеи. Издательство национальных академий. https://doi.org/10.17226/13165.

---

Вернитесь, чтобы узнать больше.
Присоединяйтесь к нашему списку рассылки и еженедельно получайте советы, инструменты и идеи, которые сделают ваше обучение более эффективным и увлекательным. Вы получите доступ к нашей библиотеке бесплатных загрузок, доступной только для участников, включая электронный буклет 20 Ways to Cut Your Grading Time in Half , который помог тысячам учителей сэкономить время на выставлении оценок. Уже присоединились более 50 000 учителей — заходите.

Понимание дизайна | Центр обучения

Райан С. Боуэн

Версия для печати

Процитируйте это руководство: Bowen, R. S. (2017). Понимание через дизайн. Учебный центр Университета Вандербильта. Получено [todaysdate] с https://cft.vanderbilt.edu/understanding-by-design/.

• Обзор
• Преимущества использования обратной разработки
• Три этапа обратного замысла
• Шаблон обратного дизайна

Обзор

Understanding by Design — это книга, написанная Грантом Виггинсом и Джеем МакТайем, которая предлагает основу для разработки курсов и блоков контента под названием «Backward Design». Преподаватели, как правило, подходят к разработке курса в «прогрессивной манере», что означает, что они рассматривают учебную деятельность (как преподавать содержание), разрабатывают оценки своей учебной деятельности, а затем пытаются установить связи с учебными целями курса. Напротив, при подходе обратного проектирования преподаватели сначала рассматривают цели обучения курса. Эти цели обучения воплощают в себе знания и навыки, которые инструкторы хотят, чтобы их ученики усвоили после окончания курса. После того, как цели обучения установлены, второй этап включает в себя рассмотрение оценивания. Структура обратного проектирования предполагает, что преподаватели должны учитывать эти всеобъемлющие цели обучения и то, как студенты будут оцениваться, прежде чем решать, как преподавать контент. По этой причине обратный дизайн считается гораздо более преднамеренным подходом к разработке курса, чем традиционные методы проектирования.

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

 

Преимущества использования обратной конструкции

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

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

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

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

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

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

 

Три этапа обратного замысла

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

Первый этап

Первый этап — определение желаемых результатов:

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

Что участники должны услышать, прочитать, просмотреть, изучить или столкнуться иным образом?

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

Какими знаниями и навыками должны овладеть участники?

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

Какие большие идеи и важные идеи должны сохранить участники?

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

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

Второй этап

Второй этап – определение приемлемого доказательства:

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

1. Как я узнаю, достигли ли учащиеся желаемых результатов?
2. Что я приму в качестве доказательства понимания и мастерства учащихся?

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

• Курсовые работы.
• Викторины с короткими ответами.
• Вопросы со свободным ответом.
• Домашнее задание.
• Лабораторные проекты.
• Практические задачи.
• Групповые проекты.
• Среди многих других…

Третий этап

Третий этап – планирование учебных занятий и инструкций:

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

1. Какие вспомогательные знания (факты, концепции, принципы) и навыки (процессы, процедуры, стратегии) ​​потребуются учащимся для эффективной работы и достижения желаемых результатов?
2. Какие занятия помогут учащимся приобрести необходимые знания и навыки?
3. Чему нужно будет обучать и тренировать, и как лучше всего обучать в свете поставленных задач?
4. Какие материалы и ресурсы лучше всего подходят для достижения этих целей?

Используйте различные стратегии обучения, перечисленные ниже:

• Большое и/или групповое обсуждение
• Интерактивные лекции и обмен мнениями
• Перевернутый класс
• Совместное обучение (включая групповое и проектное обучение)
• Управляемое ведение заметок
• Управляемый запрос для решения проблем

Шаблон обратного дизайна

Здесь приведена ссылка на пустой шаблон обратного дизайна (https://jaymctighe. com/resources/), который называется UbD Template 2.0. Старую версию (версию 1.0) также можно загрузить с этого сайта, как и другие ресурсы, имеющие отношение к Understanding by Design. Шаблон проводит людей через этапы обратного проектирования. Однако, если вам нужен шаблон с описанием каждого раздела, см. таблицу ниже. Существует также ссылка на документ, содержащий шаблон с описанием, представленным ниже, и его можно скачать бесплатно.

Шаблон обратного проектирования с описаниями (нажмите на ссылку, чтобы перейти к шаблону с описаниями).

 

Каталожные номера

1. Образец, Марк. (2011). Обучение стойкому пониманию . Получено с http://www.chronicle.com/blogs/profhacker/teaching-for-enduring-understanding/35243.
2. Виггинс, Грант, и Мактай, Джей. (1998). Обратный дизайн. В Understanding by Design (стр. 13-34). АССД.

 

---

Это учебное пособие находится под лицензией Creative Commons Attribution-NonCommercial 4. 0 International License.

Уроки проектирования, ориентированного на человека, для науки о внедрении: улучшение реализации вмешательства, ориентированного на пациента 2019 декабрь;82 Дополнение 3(3):S230-S243.

doi: 10.1097/QAI.0000000000002216.

Лаура К Берес ¹ , Сандра Симбеза ² , Чарльз Б. Холмс ^{1 3} , Чанда Мвамба ² , Ньеква Мукамба ² , Анджали Шарма ² , Вирджиния Мунамунунгу ² , Моника Мвачанде ² , Комбатенде Сикомбе ² , Кэролин Болтон Мур ² , Аалоке Моди ⁴ , Айбюке Коюнджу ² , Катерина Христопулос ⁴ , Лазарь Джере ² , Джейк Прай ² , Питер Д. Эренкранц ⁵ , Эшвин Бадден ⁶ , Элвин Генг ⁴ , Изуканджи Сиказве ²

Принадлежности

• ¹ Департамент международного здравоохранения, Школа общественного здравоохранения Блумберга имени Джона Хопкинса, Балтимор, Мэриленд.
• ² Центр исследований инфекционных заболеваний в Замбии, Лусака, Замбия.
• ³ Джорджтаунский университет, Вашингтон, округ Колумбия.
• ⁴ Калифорнийский университет Сан-Франциско, Сан-Франциско, Калифорния.
• ⁵ Фонд Билла и Мелинды Гейтс, Сиэтл, Вашингтон.
• ⁶ D’EVA Consulting, Вашингтон, округ Колумбия.

• PMID: 31764259
• PMCID: PMC6880397
• DOI: 10.1097/QAI.0000000000002216

Бесплатная статья ЧВК

Обзор

Лаура К. Берес и др. J Приобретение иммунодефицитного синдрома. 2019

декабря

Бесплатная статья ЧВК

. 2019 декабрь;82 Дополнение 3(3):S230-S243.

doi: 10. 1097/QAI.0000000000002216.

Авторы

Лаура К. Берес ¹ , Сандра Симбеза ² , Чарльз Б. Холмс ^{1 3} , Чанда Мвамба ² , Ньеква Мукамба ² , Анджали Шарма ² , Вирджиния Мунамунунгу ² , Моника Мвачанде ² , Комбатенде Сикомбе ² , Кэролин Болтон Мур ² , Аалоке Моди ⁴ , Айбюке Коюнджу ² , Катерина Христопулос ⁴ , Лазарь Джере ² , Джейк Прай ² , Питер Д. Эренкранц ⁵ , Эшвин Бадден ⁶ , Элвин Генг ⁴ , Изуканджи Сиказве ²

Принадлежности

• ¹ Департамент международного здравоохранения, Школа общественного здравоохранения Блумберга имени Джона Хопкинса, Балтимор, Мэриленд.
• ² Центр исследований инфекционных заболеваний в Замбии, Лусака, Замбия.
• ³ Джорджтаунский университет, Вашингтон, округ Колумбия.
• ⁴ Калифорнийский университет Сан-Франциско, Сан-Франциско, Калифорния.
• ⁵ Фонд Билла и Мелинды Гейтс, Сиэтл, Вашингтон.
• ⁶ D’EVA Consulting, Вашингтон, округ Колумбия.

• PMID: 31764259
• PMCID: PMC6880397
• DOI: 10.1097/QAI.0000000000002216

Абстрактный

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

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

Полученные результаты: Обзор литературы выявил 13 статей (представляющих 7 исследований) об использовании HCD при ВИЧ. Во всех исследованиях были отмечены отличительные черты HCD, включая развитие эмпатии, запросы, управляемые пользователями, идеи и итеративное уточнение. HCD был применен к дизайну mHealth, управленческому вмешательству и доконтактной профилактике. Наше приложение HCD направлено на поведенческую цель предоставления услуг: изменение убеждений, отношения и практики медработников, ориентированных на пациента. Благодаря углубленному взаимодействию разработчика и пользователя наш подход HCD выявил конкретную поддержку и сопротивление PCC со стороны HCW, предлагая изменения вмешательства для улучшения осуществимости и приемлемости, а также соображения PCC, которые могли бы помочь в реализации в переносимых условиях.

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

Заявление о конфликте интересов

gov/pub-one»> P.D.E. работает в Фонде Билла и Мелинды Гейтс. C.B.H. работает консультантом Фонда Билла и Мелинды Гейтс. Остальные авторы не имеют конфликтов интересов, о которых следует сообщать.

Цифры

РИСУНОК 1.

Обзор повествовательной литературы Исследование HCD…

РИСУНОК 1.

Включение обзора повествовательной литературы в исследование HCD.

ФИГУРА 1.

Включение в исследование HCD обзора описательной литературы.

См. это изображение и информацию об авторских правах в PMC

Похожие статьи

• Использование дизайна, ориентированного на человека, для внедрения современной психологической науки: окупаемость ранних инвестиций.

  Lyon AR, Brewer SK, Areán PA. Лион А.Р. и соавт. Я психол. 2020 ноябрь;75(8):1067-1079. дои: 10.1037/amp0000652. Я психол. 2020. PMID: 33252945 Бесплатная статья ЧВК. Обзор.

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

  Гёттгенс И., Ортельт-Пригионе С. Гёттгенс I и др. JMIR Mhealth Uhealth. 2021 6 декабря; 9(12):e28102. дои: 10.2196/28102. JMIR Mhealth Uhealth. 2021. PMID: 34874893 Бесплатная статья ЧВК. Обзор.

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

  Фишер М. , Сафаейнили Н., Хаверфилд М.С., Браун-Джонсон К.Г., Зионц Д., Зульман Д.М. Фишер М. и соавт. J Gen Intern Med. 2021 апр; 36 (4): 1041-1048. doi: 10.1007/s11606-020-06451-4. Epub 2021 3 фев. J Gen Intern Med. 2021. PMID: 33537952 Бесплатная статья ЧВК. Обзор.

• Этнография и дизайн, ориентированный на пользователя, для информирования контекстно-ориентированной реализации.

  Хейнс Э.Р., Кирк М.А., Люкс Л., Смитерман А.Б., Пауэлл Б.Дж., Допп А., Стовер А.М., Биркен С.А. Хейнс Э.Р. и соавт. Трансл Бехав Мед. 2022 18 января;12(1):ibab077. doi: 10.1093/tbm/ibab077. Трансл Бехав Мед. 2022. PMID: 34223893 Бесплатная статья ЧВК.

• Исследование реализации, ориентированное на человека: новый подход к разработке и оценке стратегий реализации для укрепления сетей направлений для лечения гипертонии в западной Кении.

  Pillsbury MKM, Mwangi E, Andesia J, Njuguna B, Bloomfield GS, Chepchumba A, Kamano J, Mercer T, Miheso J, Pastakia SD, Pathak S, Thakkar A, Naanyu V, Akwanalo C, Vedanthan R. Пиллсбери МКМ и др. BMC Health Serv Res. 2021 3 сентября; 21 (1): 910. дои: 10.1186/s12913-021-06930-2. BMC Health Serv Res. 2021. PMID: 34479556 Бесплатная статья ЧВК. Клиническое испытание.

Посмотреть все похожие статьи

Цитируется

• Приступая к реализации (GTI)-Teach: семиэтапный подход к обучению основам науки о внедрении.

  Рогал С.С., Джонассен С., Эшкрафт Л., Фребургер Дж., Яковченко В., Кисловский Ю., Фарес А., Хершбергер Г., Гудрич Д.Э., Чинман М. Рогал С.С. и др. J Clin Transl Sci. 2022 17 июня; 6 (1): e100. doi: 10.1017/cts.2022.420. Электронная коллекция 2022. J Clin Transl Sci. 2022. PMID: 36106128 Бесплатная статья ЧВК.

• Интеграция обработки естественного языка и интерпретативного тематического анализа для получения ориентированного на человека понимания дизайна мобильного здравоохранения с ВИЧ: анализ проверки концепции.

  Скин С.Дж., Джонс С.С., Круз К.М., Хорват К.Дж. Скин С.Дж. и др. JMIR Hum Factors. 2022 г., 21 июля; 9(3):e37350. дои: 10.2196/37350. JMIR Hum Factors. 2022. PMID: 35862171 Бесплатная статья ЧВК.

• Канадские перспективы цифровой поддержки психического здоровья: результаты национального опроса, проведенного во время пандемии COVID-19.

  Шен Н., Кассам И., Чен С., Ма С., Ван В., Бопараи Н., Янкович Д., Струдвик Г. Шен Н. и др. Цифровое здоровье. 2022 22 мая; 8:20552076221102253. дои: 10.1177/20552076221102253. электронная коллекция 2022 янв-дек. Цифровое здоровье. 2022. PMID: 35646379 Бесплатная статья ЧВК.

• Ориентированный на человека дизайн для инноваций в области общественного здравоохранения: совместное проектирование многокомпонентного вмешательства для поддержки молодежи в рамках континуума помощи при ВИЧ в Мозамбике.

  Мукерджи Т.И., Зербе А., Фалькао Дж., Кэри С., Яккарино А., Колада Б., Олмедо Б., Шадвик С., Сингхал Х., Вайнштейн Л., Витале М., Де Гусмао Э.П., Абрамс Э.Дж. Мукерджи Т.И. и др. Научная практика Glob Health. 2022 29 апреля; 10 (2): e2100664. doi: 10.9745/GHSP-D-21-00664. Печать 2022 28 апреля. Научная практика Glob Health. 2022. PMID: 35487546 Бесплатная статья ЧВК. Клиническое испытание.

• Включение клиницистов в разработку и оценку клинических инструментов искусственного интеллекта: систематический обзор литературы.

  Тулк Джессо С., Келлихер А., Сангхави Х., Мартин Т., Хенриксон Паркер С. Тулк Джессо С. и др. Фронт Псих. 2022 7 апр; 13:830345. doi: 10.3389/fpsyg.2022.830345. Электронная коллекция 2022. Фронт Псих. 2022. PMID: 35465567 Бесплатная статья ЧВК.

Просмотреть все статьи «Цитируется по»

использованная литература

1. 1. ЮНЭЙДС. Мили, чтобы пройти: закрытие пробелов, разрушение барьеров, исправление несправедливости. Женева, Швейцария: ЮНЭЙДС; 2018.
2. 1. Эль-Садр В.М., Харриперсо К., Рабкин М. Достижение глобальных целей по борьбе с ВИЧ/СПИДом: то, что привело нас сюда, не приведет нас туда. ПЛОС Мед. 2017;14:e1002421. — ЧВК — пабмед
3. 1. ЮНЭЙДС. Ускорение: положить конец эпидемии СПИДа к 2030 году. Женева, Швейцария: ЮНЭЙДС; 2014.
4. 1. Генг EH, Холмс CB. Исследования по улучшению дифференцированных вмешательств по оказанию услуг в связи с ВИЧ: учиться учиться, как мы. ПЛОС Мед. 2019;16:e1002809. — ЧВК — пабмед
5. 1. Улетт К.Б., Уиллиг Дж.Х., Лин Х.И. и др. Терапевтические последствия своевременного включения и раннего удержания в системе помощи при ВИЧ. Уход за больными СПИДом ЗППП. 2009; 23:41–49. — ЧВК — пабмед

Типы публикаций

термины MeSH

Грантовая поддержка

• F31 Mh209378/MH/NIMH NIH HHS/США
• K24 AI134413/AI/NIAID NIH HHS/США
• T32 AI060530/AI/NIAID NIH HHS/США

дизайнов уроков, тем, шаблонов и загружаемых графических элементов на Dribbble

1. Посмотреть пользовательский интерфейс обучающего приложения

   Интерфейс обучающего приложения

2. Посмотреть заявку на онлайн-курс

   Заявка на онлайн-курс

3. Посмотреть приложение для изучения языков

   Приложение для изучения языков

4. Просмотр Школа Сов: уроки

   Школа сов: уроки

5. View It Education — Панель управления

   ИТ-образование — информационная панель

6. View LangnOs — образовательная платформа электронного обучения

   LangnOs — Образовательная платформа электронного обучения

7. Посмотреть приложение «Класс»

   Классное приложение

8. Посмотреть курс дизайна пользовательского интерфейса

   Курс дизайна пользовательского интерфейса

9. Посмотреть образование: мобильное приложение онлайн-курса 📚

   Образование: мобильное приложение онлайн-курса 📚

10. Посмотреть образование: мобильное приложение онлайн-курса 📚

    Образование: мобильное приложение онлайн-курса 📚

11. Посмотреть Муланг.

    No related posts.