Верстка для начинающих: Блочная верстка сайта с нуля. Урок 1 | Блог фрилансера

, каждый с пронумерованными классами. Это все, что нам нужно, чтобы начать разметку с помощью CSS Grid Layout.

 
 Заголовок 
 
 Боковая панель 1 
 
 Основное содержание 
 
 Боковая панель 2 
 

Как определить макет сетки CSS

Мы используем свойство отображения ‘grid’ для определения контейнера сетки уровня блока или ‘inline-grid’ для сетки встроенного уровня.Значение ‘grid-gap’ определяет расстояние между столбцами и строками. Затем мы определяем количество столбцов в сетке, используя строку значений ширины столбцов.

.сетка {
 дисплей: сетка;
 сетка-пробел: 25 пикселей;
 сетка-шаблон-столбцы: 200 пикселей 350 пикселей автоматически;
 сетка-шаблон-строки: 25% 75%;
 маржа: 25 пикселей авто;
 ширина: 800 пикселей;
 высота: 600 пикселей;
}
/ * Простой стиль * /
.grid-area {
 семейство шрифтов: Helvetica Neue, Helvetica, Arial, без засечек;
 цвет фона: # c1d798;
 цвет: #fff;
 отступ: 50 пикселей 25 пикселей;
 выравнивание текста: центр;
} 

‘grid-gap’ и ‘grid-template-columns’ можно определить в пикселях (px), процентах (%) или гибкости (fr).Столбцы и строки также можно определить как «авто» или использовать вычисления. Определение ‘grid-template-rows’ не требуется для работы сетки, высота строки будет автоматически, если ничего не определено.

Как позиционировать элементы на макете сетки CSS

Положение элемента в сетке определяется присвоением ему значения grid-column и grid-row, например ячейка таблицы в верхнем левом углу всегда будет:

.grid-area-1 {
 сетка-столбец: 1;
 сетка-ряд: 1;
} 

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

.grid-area-1 {
 начало столбца сетки: 1;
 конец столбца сетки: 4;
 сетка-начало-строки: 1;
 конец ряда сетки: 2;
} 

Сокращенное обозначение:

.grid-area-1 {
 сетка-столбец: 1/4;
 сетка-ряд: 1/2;
} 

Или его можно сократить еще больше, используя вместо этого свойство grid-area:

площадь сетки: 1/1/1/4; 

В порядке значений: начало строки, начало столбца, конец строки, конец столбца.

Как назвать столбцы и строки макета сетки CSS

Столбцам и строкам можно дать имена, чтобы на них было легче ссылаться. Это делается для элементов контейнера сетки с помощью квадратных скобок при определении значений «grid-template-columns» или «grid-template-rows».

сетка-шаблон-столбцы: [col-1] 200px [col-2] 350px [col-3] auto [col-3-end];
сетка-шаблон-строки: [строка-1] 20% [строка-2] 80% [строка-2-конец]; 

Столбцы и строки по-прежнему могут упоминаться по номерам даже после их наименования.

Изменение порядка содержимого с помощью медиа-запросов

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

В этом примере сетка изменяется на одностолбцовый макет, а также перемещается основная область содержимого над первой боковой панелью:

@media only screen и (max-width: 800px) {
 .сетка {
 столбцы-шаблон-сетки: [col-1] 100% [col-1-end];
 сетка-шаблон-строки: [строка-1] авто [строка-2] 350 пикселей [строка-3] авто [строка-4] авто [строка-4-конец];
 ширина: 90%;
 }
 .grid-area-1 {
 сетка-столбец: col-1;
 сетка-ряд: ряд-1;
 }
 .grid-area-2 {
 сетка-столбец: col-1;
 сетка-ряд: ряд-3;
 }
 .grid-area-3 {
 сетка-столбец: col-1;
 сетка-ряд: ряд-2;
 }
 .gridarea-4 {
 сетка-столбец: col-1;
 сетка-ряд: ряд-4;
 }
} 

Пример макета

Если мы сложим все это вместе, у нас будет очень простой адаптивный макет страницы с использованием CSS Grid Layout.См. Пример ниже:

См. Макет сетки Pen CSS Grid от Тони Томаса (@medialoot) на CodePen.

Заключение

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

Поддержка браузера

является важным фактором при использовании любой новой технологии, поэтому обязательно проверьте, подходит ли она для использования в вашем конкретном проекте, прежде чем переходить к ней.На момент написания CSS Grid Layout можно было использовать с последними версиями Firefox, Chrome, Safari и Opera. Internet Explorer имеет только частичную поддержку, но, что более важно, вы также должны помнить, что, к сожалению, не все используют последние версии своих браузеров. Возможно, пройдет некоторое время, прежде чем CSS Grid Layout получит широкое распространение в Интернете.

Если вы хотите узнать больше о CSS Grid Layout, вот несколько отличных подробных ресурсов:

Веб-дизайн для начинающих: программирование в реальном мире в HTML и CSS

Вы можете начать новую карьеру в веб-разработке уже сегодня, изучив HTML и CSS.Вам не нужна степень по информатике или дорогостоящее программное обеспечение. Все, что вам нужно, — это компьютер, немного времени, много решимости и учитель, которому вы доверяете. Я обучал HTML и CSS бесчисленным сотрудникам и проводил тренинги для компаний из списка Fortune 100. Я тот учитель, которому можно доверять .

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

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

Летом 2020 года курс получил новый раздел, в котором мы размещаем наш веб-сайт в Интернете с помощью бесплатного сервиса GitHub Pages; это означает, что вы сможете поделиться ссылкой на то, что вы создали, со своими друзьями, семьей, коллегами и всем миром!

Я помог более чем 100 000 студентов и получил следующие отзывы:

«… фантастический курс… ясный, определенный и увлекательный.«

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

«… [Брэд] объяснил процесс. Не запоминать то или это, — объяснил он процесс. Если вы хотите пройти курс, чтобы понять основы создания веб-сайтов, не смотрите дальше ».

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

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

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

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

Дизайн блога для начинающих

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

Всем привет. Я Питер Флашнер, основатель и творческий диктатор Blog Studio. Я собираюсь провести вас через процесс, который мы проходим при разработке блога или другого веб-сайта. Это первая из двух частей. Когда мы закончим, у нас будет сверхгибкая тема WordPress, идеально подходящая для всех, кто хочет заработать на блоге.

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

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

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

Итак, без лишних слов, давайте создадим сайт. Вот что нам понадобится: карандаш, бумага и графический редактор (например, Photoshop, Illustrator, Freehand или GIMP).

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

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

Шаг 1. Определите цели сайта (что вы пытаетесь сделать? Как вы этого добьетесь)

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

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

Шаг 2. Определите свою аудиторию (кто они и откуда)

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

Шаг 3. Определите конкретные потребности (какие функции должен иметь сайт для достижения своих целей?)

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

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

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

Шаг 4. Нарисуйте каркасы (грубые наброски для экспериментов с размещением элементов и компоновкой)

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

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

Вот пример сайта Фреда на первых этапах разработки:

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

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

1. движение
2. размер
3. изображений
4. цвет
5. стиль текста (выбор шрифта, толщина шрифта)
6. позиция

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

Зная это, мы можем принимать решения по макету и стилю наших страниц, чтобы повысить шансы получения желаемого ответа (т. Е. Нажатия на объявление).

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

Шаг 5. Создайте доску настроения (набор изображений, цветов, шрифтов и т. Д., Которые дают вам ощущение, к которому вы стремитесь).

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

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

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

Вот пример из недавнего проекта:

Шаг 6: Визуальный дизайн

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

Одна огромная ошибка новичков в веб-дизайне — не оставлять достаточно места вокруг отдельных элементов. Это называется «белое пространство». Учтите, что он не обязательно должен быть белым! Скорее, термин относится просто к пустому пространству.

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

Завтра мы превратим нашу статическую графику в тему WordPress .

Прежде чем я уйду, вот где я сейчас нахожусь с сайтом Фреда:

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

Руководство по адаптивному веб-дизайну для начинающих [статья]

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

Бесплатная пробная версия Treehouse: Хотите узнать больше об адаптивном веб-дизайне? Попробуйте бесплатную пробную версию Treehouse.

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

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

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

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

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

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

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

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

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

Решетки для жидкости

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

Решетки

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

Чтобы вычислить пропорции для каждого элемента страницы, вы должны разделить целевой элемент по его контексту. В настоящее время лучший способ сделать это — сначала создать макет с высокой точностью в пиксельном редакторе изображений, таком как Photoshop.Имея в руках макет высокой точности, вы можете измерить элемент страницы и разделить его на всю ширину страницы. Например, если ваш макет имеет типичный размер, например 960 пикселей в поперечнике, то это будет ваше «контейнерное» значение. Затем предположим, что наш целевой элемент имеет произвольное значение, например 300 пикселей в ширину. Если мы умножим результат на 100, мы получим процентное значение 31,25%, которое мы можем применить к целевому элементу. Вот математика:

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

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

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

 @media screen и (min-width: 480px) {

  .содержание {
    плыть налево;
  }

  .social_icons {
    дисплей: нет
  }

  // и так далее...

} 

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

• 320 пикселей
• 480 пикселей
• 600 пикселей
• 768px
• 900px
• 1200 пикселей

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

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

Ресурсы

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

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

Бонус

Мы начинаем добавлять бесплатные видео на Youtube по адаптивному веб-дизайну, поэтому, если вы хотите узнать больше, вы можете подписаться на наш канал здесь: http://trhou.se/subscribe-treehouse-yt

Вот видео для начала:

Комментарии к статье закрыты.Ознакомьтесь с нашей обновленной статьей: Руководство по адаптивному веб-дизайну 2014 г.

---

Получите степень Techdegree Front End Web Development и станьте сертифицированным разработчиком.

Узнайте больше о программе Techdegree сегодня.

Веб-дизайн: руководство для начинающих

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

Шаг 1. Сопоставление сайта

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

–Википедия

Общие элементы домашней страницы

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

• Заголовок / главный раздел с призывом к действию
• Услуги / то, что вы предлагаете
• Почему вы уникальны
• Текстовое содержимое с ключевыми словами
• Социальное подтверждение и признание
• Связаться с отделом
• Заключительный призыв

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

Шаг 2. Создание каркасов или выбор макета темы

А теперь самое интересное — дизайн. Эта стадия создания не является окончательной. Важно помнить, что вы просто переносите свои идеи на бумагу. Не зацикливайтесь на этом. И помните, если вы новичок в веб-дизайне, проще придерживаться макета из 1–4 столбцов и избегать дублирования и технических разделов, пока вы не разберетесь в HTML / CSS. Например, в веб-дизайне часто используется изображение или элемент, плавающий / перекрывающий другой элемент в целях дизайна.Однако без знания HTML и CSS или шаблона со встроенными функциями это будет проблемой. Ознакомьтесь с этим примером каркасного дизайна для справки:

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

Шаг 3. Выберите хостинг / домен

Этот шаг, возможно, является одним из самых сложных в процессе разработки веб-сайта. Однако все не так сложно, как может показаться. Выберите хостинговую компанию, которая соответствует вашему ценовому диапазону, хранилищу и скорости, и подключите ее к своему конструктору веб-сайтов. С GoDaddy и WordPress у них есть встроенные функции для настройки вашей среды WordPress через свой веб-сайт. Хотя GoDaddy является одним из самых популярных и имеет несколько положительных и отрицательных качеств, компаниям может быть проще использовать его.Другие хостинговые компании, такие как Bluehost, HostGator и другие, могут иметь аналогичные функции. Но если у вас нет технических навыков для подключения вашего домена к вашему веб-сайту без мастера настройки, я бы предложил использовать тот, в котором этот процесс уже встроен.

Шаг 4. Выберите конструктор веб-сайтов

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

• WordPress : Вас интересует настраиваемый веб-сайт с бесконечными плагинами и функциями, которые позволяют делать все, что угодно, через функциональный интерфейс? Тогда WordPress может быть для вас.
• Squarespace : если вас меньше интересует настраиваемый веб-сайт, и вас интересует только создание целевых страниц из готовых шаблонов, добавление сообщений в блог и, возможно, наличие страниц подписки на информационный бюллетень и другие электронные письма , тогда вам подойдет Squarespace.
• Wix : Хотя Wix может показаться менее популярным вариантом, они известны своей простотой использования по сравнению с Squarespace. Как и Squarespace, они предлагают своего рода универсальный магазин. Они позволяют вам приобрести домен и выбрать дизайн своего веб-сайта в одном месте. Однако, как и Squarespace, им не хватает некоторых настраиваемых функций, которые предлагает CMS, такая как WordPress.
• Shopify : Это, вероятно, одно из самых популярных решений для электронной коммерции, когда дело касается веб-сайтов.Хотя в WordPress есть WooCommerce, где вы можете сделать то же самое в отношении управления SKU, корзинами и обработки платежей, Shopify предлагает гораздо более быстрое и гибкое решение для запуска интернет-магазина. Подобно Wix и Squarespace, Shopify может быть ограничен в вариантах дизайна; он позволяет вам выбрать один из готовых шаблонов, который гарантированно будет работать и реагировать на мобильные устройства, что очень важно.
• Pay a Professional : Наконец, вы также можете найти профессионала, который сделает все это за вас.Мы рекомендуем Vendasta, компанию по разработке веб-сайтов, которая создает очень качественные веб-сайты. Компании, занимающиеся дизайном веб-сайтов, обычно взимают почасовую оплату от 60 до 150 долларов в час. Будьте готовы предоставить контент для каждой страницы вашего сайта.

Шаг 4. Выберите тему своего веб-сайта

Может быть легко выбрать тему, которая покажется вам фантастической и привлекательной. Однако очень важно попытаться отложить в сторону себя и свое мнение и подумать о своем конечном пользователе или потенциальных клиентах и ​​своем бренде.Например, если вы техническая компания с менее технически продуманным дизайном / темой веб-сайта, ваши потенциальные клиенты могут не испытывать особой склонности отдавать вам свое доверие и деньги. Вам следует взглянуть на некоторых из своих конкурентов и увидеть, что они делают, но не копируйте их. Наконец, даже если вы выберете тему, аналогичную тем, которые работают в вашей отрасли, важно сделать что-то, что отличает вас от других. Учитывайте свои цвета, анимацию, графику, фотографии, макет страницы и другие визуальные элементы. Если вы ищете несколько тем WordPress, пользующихся высокими оценками и пользующимися доверием, вот несколько тем, которые можно найти на themeforest.com:

Шаг 5: Начало проектирования

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

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

Шаг 6: Бонусный раунд (SEO и ключевые слова)

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

1. При написании контента включите ключевые слова, по которым ваши клиенты могут найти вас в Интернете (например,г., телеком). Однако вы захотите выбрать ключевое слово, которое не является слишком конкурентоспособным в вашей отрасли, потому что гигантские компании уже доминировали над этими ключевыми словами. Вы можете искать ключевые слова с помощью этого инструмента здесь, чтобы найти наиболее подходящие для вас и вашей компании. Вы также должны быть осторожны, чтобы не включать ключевое слово более трех раз на данной странице, потому что это может противодействовать вашим усилиям по SEO, а Google снизит рейтинг вашего домена, думая, что вы пытаетесь воспользоваться системой.
2. Начните свой путь к содержанию. Вам нужно будет начать писать контент по некоторым из самых популярных и актуальных тем в вашей отрасли, и при этом убедитесь, что они содержательны и написаны хорошо. Это будет постепенно улучшать ваш рейтинг URL (рейтинг страницы) по мере того, как люди будут искать в Интернете и находить полезные сообщения в блогах, связанные с вашей отраслью.
3. Если вы хотите перейти на следующий уровень, вы также можете начать использовать рекламу Google, чтобы заявить о себе и привлечь трафик на определенные веб-страницы.

Заключение

Хорошо продуманный веб-сайт, адаптированный под мобильные устройства, в 2021 году и в обозримом будущем станет важной частью любого развития вашего бизнеса. В этом Простом пошаговом руководстве по веб-дизайну мы коснулись некоторых ключевых факторов, которые помогут вам и вашему бизнесу расти органически. Помните: имейте сильный и уникальный дизайн, используйте достаточное количество текста, используйте ключевые слова, соответствующие вашей отрасли, и не забывайте регулярно публиковать контент. По вопросам и / или консультациям по поводу вашего веб-сайта обращайтесь в marketing @ telarus.com или посетите telarus.com.

Учебное пособие по CSS Flexbox для начинающих

По мере развития веб-дизайна появлялись различные стандартные способы размещения элементов на веб-сайте. CSS flexbox — это относительно новый, но мощный способ создания макетов, с которым должен быть знаком каждый веб-разработчик и дизайнер.

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

Хорошо, нам есть о чем поговорить, и это будет немного технически, так что наденьте свои CSS-очки и приступим.

Что такое CSS Flexbox?

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

Конечно, технология размещения веб-компонентов на странице не нова. С самого начала Интернета веб-дизайнеры использовали разные способы размещения изображений, текста и другого контента там, где они хотели. Однако они либо не подходили для адаптивного дизайна (таблицы), никогда не предназначались для использования в качестве инструмента компоновки ( float ), не позволяли вам определять одинаковую высоту для элементов ( inline-block ) , или возникли другие проблемы.

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

Чем отличается Flexbox?

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

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

Если это трудно представить, вот схема (любезно предоставлена ​​W3.org), чтобы прояснить ситуацию:

Все еще не совсем уверены? Я не могу тебя винить. Поговорим об этом подробнее.

Основная концепция

Как уже упоминалось, flexbox — это целый модуль CSS, а не отдельное свойство. Следовательно, он поставляется с множеством собственных операторов, некоторые для родительского контейнера, некоторые для его дочерних элементов.

Чтобы понять, как они работают, важно, чтобы вы знали концепции и терминологию flexbox, которые показаны на изображении выше:

• главная ось — это ось, по которой размещаются элементы. Важно: он может быть как вертикальным, так и горизонтальным, в зависимости от свойства flex-direction .
• main-start , main-end — представляют начальную и конечную точки расположения элементов.
• основной размер — обозначает ширину или высоту гибких элементов в зависимости от направления главной оси.
• поперечная ось — Ось, перпендикулярная главной оси. Его направление также зависит от того, как определяется главная ось.
• cross-start , cross-end — Начало и направление, в котором будут заполнены гибкие линии.
• поперечный размер — обозначает другой размер гибких элементов, который не определяется основным размером .
• writing-mode — Позволяет переключать направление письма слева направо, справа налево или даже по вертикали.Работа над ним практически не поддерживается браузером или вообще не поддерживается, однако важно знать о некоторых свойствах, указанных ниже.

Как видите, Flexbox очень абстрактен и не совсем определен. Следовательно, большая часть приведенного ниже CSS зависит от вашей настройки.

Когда использовать Flexbox

Хотя вы можете использовать flexbox для создания целых веб-страниц, это не рекомендуемый вариант использования. Для более крупных макетов рассмотрите сетку (подробнее об этом в другой раз).Flexbox, с другой стороны, больше всего подходит для небольших макетов и приложений, таких как:

• меню навигации
• макеты карточек
• элементы мультимедиа
• веб-формы

Поддержка браузера

Flexbox

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

Доступные свойства CSS Flexbox

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

гибкое направление

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

Доступные объекты недвижимости:

• строка — По умолчанию.Располагает гибкие элементы слева направо, если вы не находитесь в среде справа налево из-за режима записи .
• row-reverse — размещает элементы по горизонтали, но в обратном порядке.
• столбец — То же, что строка , но вертикальный с элементами, расположенными сверху вниз.
• обратный столбец — Вы, наверное, догадались об этом. обратный столбец отображает элементы снизу вверх.

гибкая пленка

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

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

гибкий поток

Это сокращение для flex-direction и flex-wrap .Использование:

  .flex-container {
  дисплей: гибкий;
  flex-flow: перенос строк;
}  

Свойство flex-flow позволяет определять обе основные оси контейнера. Значение по умолчанию — row nowrap , применяются все возможные значения из двух свойств выше.

justify-content

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

• flex-start — значение по умолчанию. Элементы выравниваются по направлению к передней части flex-direction .
• flex-end — помещает элементы в конец flex-direction .
• start — Определяет начало режима записи как начальную точку.
• конец — перемещает элементы к концу режима записи .
• left — выравнивает гибкие элементы по левому краю контейнера.Если это не имеет смысла из-за flex-direction , он ведет себя как start .
• правый — То же, что левый , но для правого края.
• центр — элементы центрируются по горизонтали.
• space-between — равномерно распределяет элементы в контейнере. Первый — к началу, последний — к концу, с четным интервалом между ними (отсюда и название).
• space-around — Предметы размещаются равномерно с равным пространством вокруг них.Обратите внимание, что он ведет себя как margin или padding , где вы увеличиваете расстояние между элементами вдвое по сравнению с краями.
• с равномерным пространством — Элементы равномерно размещены внутри контейнера, но расстояние между ними и по направлению к краям контейнера одинаковое.

Имейте в виду, что поддержка браузером этих значений немного нестабильна. Например, пробел между не поддерживается в некоторых версиях Edge, а начало / конец / слева / справа еще не в Chrome.Самые безопасные значения: flex-start , flex-end и center .

align-items

Это свойство управляет выравниванием элементов по поперечной оси. Это эквивалент justify-content для главной оси . Вот доступные значения:

• stretch — значение по умолчанию, при котором элементы растягиваются до заполнения контейнера.
• flex-start , start , self-start — выравнивает гибкие элементы в начале поперечной оси. начало и самозапуск придерживаются flex-direction и режима записи соответственно.
• flex-end , end , self-end — То же, что и выше, но размещение элементов в конце поперечной оси.
• центр — элементы находятся в центре поперечной оси.
• baseline — выравнивает гибкие элементы по их базовым линиям.

Здесь тоже важно отметить поддержку браузером.

align-content

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

• stretch — значение по умолчанию. Линии растягиваются, чтобы занять все доступное пространство.
• flex-start , start — элементы выравниваются по началу контейнера. flex-start придерживается flex-direction , start до режима записи .
• flex-end , end — То же, что и flex-start и start , только элементы перемещаются в конец контейнера.
• center — Центрирует элементы по поперечной оси внутри контейнера.
• space-between — Равномерно распределяет гибкие линии внутри контейнера, причем первая строка размещается в ее начале, а последняя — в конце.
• space-around — Равномерное распределение с равномерным пространством вокруг каждой строки.
• с равномерным пространством — Равномерное распределение с равным пространством вокруг предметов.

заказать

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

Например, значение по умолчанию для всех гибких элементов — order: 0; . Если вы хотите переместить конкретный элемент в начало или конец строки, вы можете сделать это, присвоив ему значение, например, 1 или -1 .Это также работает через границы строк или столбцов, в отличие от row-reverse или column-reverse , которые меняют порядок каждой строки индивидуально.

Вот код для примера изображения выше:

  

 1 
 2 
 3 
 4 
  

гибкий рост

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

Пример: если для всех элементов установлено значение flex-grow: 1; все они равномерно распределены внутри своего контейнера. Однако, если один установлен на 1 , а другой на 3 , последний попытается занять три четверти доступного пространства.

термоусадочная

Аналогично flex-grow , но определяет способность элементов сокращаться по сравнению с другими элементами. Чем выше число, тем больше уменьшается размер предмета и наоборот.

гибкая основа

Определяет размер элемента по умолчанию (высота или ширина в зависимости от оси).Это может быть относительное значение, например 15% , или абсолютное значение, например 30px . Вот как я добился этого:

  

 1 
 2 
 3 
 4 
  

Другие возможные значения:

• auto — это значение по умолчанию.
• содержимое — Устанавливает размер в соответствии с содержимым элемента. Он еще не очень хорошо поддерживается, как и max-content , min-content и fit-content , которые также существуют.

гибкий

Сокращение для flex-grow , flex-shrink и flex-base вместе. Обязательным является только первый параметр, а значение по умолчанию — 0 1 auto .

  

 1 
 2 
 3 
 4 
  

Часто имеет смысл использовать это свойство вместо flex-grow , flex-shrink или flex-base по отдельности, поскольку оно применяет разумные значения к операторам, которые вы не используете.

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

выровнять себя

Это позволяет отменить выравнивание отдельных элементов. Он имеет те же значения, что и align-items .

Пример Flexbox: столбцы одинаковой высоты

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

  


 
 Столбец 1 
 
 Lorem ipsum dolor sit amet, conctetur adipiscing elit. 



 
 Столбец 2 
 
 Lorem ipsum dolor sit amet, conctetur adipiscing elit.Morbi interdum et ex a efficitur.
Nam consquat elementum tellus,
при varius lectus condimentum vulputate. 



 
 Столбец 3 
 
 Lorem ipsum dolor sit amet, conctetur adipiscing elit.
Morbi interdum et ex a efficitur. 

  

После этого добавьте к нему эту разметку CSS:

  .flex-container {
цвет фона: # aa278c;
радиус границы: 10 пикселей;
дисплей: гибкий;
нижнее поле: 10 пикселей;
}

.flex-container> div {
цвет фона: # F7941F;
граница: сплошная 1px;
радиус границы: 10 пикселей;
гибкость: 1;
размер шрифта: 20 пикселей;
семейство шрифтов: тахома;
высота строки: 40 пикселей;
маржа: 10 пикселей;
отступ: 16 пикселей;
ширина: 60 ​​пикселей;
}

.flex-container> div h3 {
выравнивание текста: центр;
}  

И вот результат:

Почему это работает? Что ж, единственная важная часть на самом деле заключается в том, что для гибкого контейнера установлено значение display: flex; , а его дочерние элементы — flex: 1; .Вся остальная разметка предназначена только для стилизации.

Как вы, возможно, помните, при этом устанавливаются flex-grow и flex-shrink и 1 и flex-base в auto . Как следствие, все элементы занимают одинаковое пространство внутри контейнера, и их первоначальный размер автоматически адаптируется к доступным размерам. Результат: простые колонны одинаковой высоты.

В двух словах о Flexbox

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

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

Вы раньше использовали CSS Flexbox? Что вам больше всего нравится / не нравится? Дайте нам знать в комментариях ниже!

Что такое UX-дизайн? (Бесплатный курс)

«Привет! 😎 Меня зовут Джефф, руководитель отдела дизайна в CareerFoundry, и я проведу вас через это первое руководство по UX-дизайну.Я проработал дизайнером UX семь славных лет, и мне нравится тот факт, что теперь я могу передать свои знания следующему поколению дизайнеров UX. Что мне больше всего нравится в UX-дизайне? Что ж, сначала посоветовавшись с пользователем, вы сэкономите массу времени. Я имею в виду, если бы ты мог спроектировать что-то правильно с первого раза, почему бы тебе этого не сделать? »

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

1. Посмотрите вводное видео в начале каждого урока
2. Прочтите сопроводительный текст
3. Выполнить практическое задание
4. Пройдите интерактивную викторину и переходите к следующему руководству

Итак, что мы будем делать сегодня?

В этом руководстве я собираюсь дать вам всестороннее введение в дизайн пользовательского опыта (UX).Мы рассмотрим, что такое UX-дизайн, и исследуем его историю. Затем мы рассмотрим несколько примеров хорошего и плохого UX. В заключение мы проведем небольшое практическое упражнение и интерактивную викторину. К концу этого урока у вас будет четкое представление о том, что такое UX-дизайн и почему он так важен. Готовый? Давайте начнем!

1. Что такое пользовательский интерфейс (UX)?
2. Что такое дизайн пользовательского опыта (UXD)?
3. Откуда появился UX-дизайн?
4. Как выглядит хороший и плохой UX?
5. Практическое упражнение: готовы ли вы начать думать как UX дизайнер?

ПССТ! Если у вас есть какие-либо вопросы об этом руководстве или о UX в целом, просто ответьте на одно из писем, сопровождающих этот курс.Один из наших замечательных консультантов по программе свяжется с вами в мгновение ока! Не получаете писем? Тогда подпишитесь на их получение!

1. Что такое пользовательский опыт (UX)?

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

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

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

Итак: UX — это все о взаимодействии или опыте пользователя с продуктом или услугой.Имея это в виду, перейдем ко второй части…

2. Что такое дизайн пользовательского опыта (UXD)?

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

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

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

3. Откуда взялся UX-дизайн?

Термин «UX» был впервые введен в употребление в 1990-х доктором Дональдом Норманом, инженером-электриком и специалистом в области когнитивных наук в Apple. Пионер дизайна, ориентированного на пользователя, Норман подчеркнул важность проектирования, основанного на потребностях и целях конечного пользователя. При этом он ввел термин «пользовательский опыт», который, по словам Нормана, предназначен для охвата «всех аспектов опыта человека с системой, от используемых материалов до самого взаимодействия (физического или цифрового), а также с интерфейсом, графикой и ориентацией.”

Если вы хотите узнать больше об истоках UX, ознакомьтесь с этой увлекательной историей UX-дизайна — точной временной шкалой.

Теперь мы знаем, что такое UX-дизайн и откуда он берется, пора применить полученные знания в контексте с некоторыми примерами из реальной жизни. К четвертой части!

4. Как выглядит хороший и плохой UX?

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

Хороший и плохой UX-дизайн: пример 1

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

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

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

Хороший и плохой UX-дизайн: пример 2

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

Имея это в виду, взгляните на каркасы ниже. Заметили примеры хорошего или плохого UX-дизайна?

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

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

Исправление плохого UX-дизайна

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

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

😎Про совет!

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

5.Практическое упражнение: готовы ли вы начать думать как UX-дизайнер?

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

Сосредоточьтесь на том, насколько легко или сложно вам пользоваться сайтом или приложением. Сможете ли вы найти то, что ищете? Легко ли тебе добиваться поставленных целей? Помните: ключ кроется в том, удовлетворяет ли веб-сайт или приложение потребностям пользователя — другими словами, ВАС! Запишите несколько мыслей о каждом веб-сайте и сохраните их где-нибудь, чтобы потом их было легко использовать.

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

Вот и все!

На этом наше первое руководство по UX-дизайну почти завершено. Перед тем как отправиться в путь, обязательно проверьте свои знания с помощью нашей интерактивной викторины. Увидимся в следующий раз!

.