бесплатное обучение онлайн, 11 уроков
Бесплатный курс
29807 студентов 1743 сообщения
Последнее обновление: 05 декабря 2022
Включено в курс
11 уроков (видео и/или текст)
1 упражнение в тренажере
18 проверочных тестов
Дополнительные материалы
Помощь в «Обсуждениях»
Чему вы научитесь
- Создавать базовую разметку HTML-документа.
- Подключать стили для страницы.
- Использовать возможности веб-инспектора Chrome DevTools.
- Публиковать свой сайт в интернете на хостинге GitHub Pages.
- Использовать базовые концепции веб-дизайна.
Описание
Для разработки современных интерфейсов и страниц незаменимыми инструментами являются HTML и CSS. Вместе с пониманием основ веб-дизайна они позволяют создавать красочные и удобные для пользователя макеты. Для разработчика так же важно обладать навыками работы с веб-инспекторами, уметь публиковать страницы в интернете и интегрировать их с социальными сетями.
Всё вместе это помогает вывести сайт на новый уровень, предоставляя пользователю множество возможностей для взаимодействия. В этом курсе вы шаг за шагом изучите базовые возможности HTML, CSS и веб-дизайна, а так же сверстаете свою первую страницу.
HTML5 CSS3 Developer Tools Веб-дизайн GitHub Pages вёрстка
Программа курса
Продолжительность 5 часов
Верстальщик vs. веб-дизайнер
Познакомиться с курсом и рассмотреть специальности «верстальщик» и «веб-дизайнер» в контексте развития технологий.
теория
Знакомство с HTML
Познакомиться с HTML и попробовать его в деле.
теория
тесты
Элементы, теги и атрибуты
Изучить простую идею HTML и структуру элементов страницы.
теория
тесты
Структура страницы
Рассмотреть полную структуру целого HTML-документа, видимые и невидимые теги.
теория
тесты
Основы CSS
Научиться задавать оформление — стили — элементам HTML-страницы.
теория
тесты
Chrome DevTools
Познакомиться с Developer Tools и веб-инспектором, удобным инструментом для анализа и редактирования страницы прямо в браузере.
теория
Каскад
Понять принцип, по которому стили собираются в один набор из разных источников.
теория
тесты
div, span и display
Познакомиться с принципами, по которым элементы выводятся на страницу и получают определённый размер.
теория
Правило близости
Рассмотреть один из базовых принципов дизайна: правило близости или grouping/proximity principle.
теория
упражнение
Размещение на GitHub Pages
Освежить память по теме хостинга и разместить статичную страницу бесплатно на GitHub Pages.
теория
Интеграция с соц. сетями и семантический веб
Рассмотреть инструменты разметки для лучшей интеграции с социальными сетями.
теория
Формат обучения
jackplazma05 декабря 2020
какой же кайф слушать Рахима, особенно после его подкаста 🙂
kvinvi28 августа 2018
Немного сложновато слушать, когда Вы порой делаете паузы чуть ли не после каждого слова.
.
А в целом все замечательно, спасибо)
Вика Пыльнова14 июня 2018
огромное спасибо за курс
Максим Торбург03 февраля 2018
Очень забавные резюме местами попадаются 🙂
Основы web-дизайна. С чего начинается web-дизайн?
Как театр начинается с вешалки, так и web-дизайн начинается с определения целей и задач будущего сайта. Зачем нужен сайт? На какую аудиторию рассчитан? Каких результатов позволит добиться?
Ответы на эти и подобные вопросы и должны лечь в формирование основы web-дизайна проекта. Под термином «web-дизайн» принято понимать совокупность работ по разработке логической структуры и художественного оформления веб-страниц. Задачей web-дизайна является обеспечение удобной подачи информации пользователю сайта или web-приложения, удовлетворение эстетического вкуса аудитории.
Современный web-дизайн начинается с разделения оформления и содержания.
Благодаря таком подходу вносить изменения в содержание сайта, не затрагивая его дизайн, или же изменять дизайн, не изменяя содержание, стало намного легче. Во многом этому способствуют современные системы управления контентом – CMS.
Основы web-дизайна закладываются на этапе разработки технического задания – документа, описывающего требования относительно визуального представления и структуры сайта. В техническом задании также зачастую описываются пожелания касательно программной реализации сайта.
После разработки и утверждения техзадания начинается этап разработки дизайна. И первое, что необходимо сделать – это создать модульную сетку. Модульная сетка описывает расположение элементов на страницах сайта.
Модульная сетка любой web-страницы содержит, как минимум, два блока: для основного теста сайта и для меню. Если на странице нужны дополнительные элементы, например, еще одно меню, «подвал» («footer») или «хедер» («header»), то модульная сетка разбивается еще на несколько блоков.
Размеры блоков модульной сетки подбираются индивидуально и могут быть какими угодно. Однако следует учитывать, что согласно требованиям юзабилити, появление горизонтальной полосы прокрутки при просмотре страницы недопустимо – это негативно сказывается на восприятии сайта посетителями. Поэтому в совокупности ширина блоков не должна превышать максимальной ширины экранов представителей целевой аудитории сайта.
В блоке «хедер» принято указывать название сайта, которое может быть выбрано в соответствии с названием компании или именем автора, а также при необходимости логотип сайта. Основной блок меню в европейских сайтах традиционно расположен слева, в соответствии с направлением письменности (слева-направо). Также основное меню может быть расположено сверху, под «хедером».
Если сайт рассчитан для просмотра на экранах с разным разрешением, то web-дизайн, как правило, выполняется «резиновым» или же центрируется по горизонтали.
Когда информационная модель будущего сайта готова, можно приниматься за художественную часть web-дизайна.
Различают шаблон главной и шаблоны типовых страниц сайта. Шаблон главной страницы оформляется, как правило, более «затейливо», а шаблоны остальных страниц сайта лишь поддерживают основную идею.
Разработанный в графическом редакторе шаблон верстается в html-файл. При помощи тэгов языка html и таблиц стилей css задаются все необходимые параметры страницы: размещение элементов, цвет и размеры шрифтов, цвет фона и т.д.
Работа над шаблоном требует обязательного теста на кросс-браузерность, т.е. на совместимость с различными браузерами и их версиями. Разные браузеры могут по-разному интерпретировать код html, поэтому такое тестирование необходимо, чтобы избежать возможного «развала» дизайна.
Протестированный и полностью готовый к работе дизайн сайта «прикрепляется» к функциональной «канве», созданной веб-программистами.
В случае использования CMS, разработанные шаблоны «закачиваются» в соответствующую папку на сервере – и все, сайт готов для наполнения.
Теги:
основы web-дизайна, веб-дизайн, web-дизайн, дизайн сайтов
9 Принципы хорошего веб-дизайна
Эффективный дизайн веб-сайта должен выполнять свою намеченную функцию, передавая свое конкретное сообщение и одновременно привлекая посетителя. Несколько факторов, таких как согласованность, цвета, типографика, изображения, простота и функциональность, способствуют хорошему дизайну веб-сайта.
При разработке веб-сайта существует множество ключевых факторов, влияющих на его восприятие. Хорошо разработанный веб-сайт может помочь завоевать доверие и побудить посетителей к действию. Чтобы создать отличный пользовательский опыт, необходимо убедиться, что дизайн вашего веб-сайта оптимизирован для удобства использования (форма и эстетика) и насколько прост в использовании (функциональность).
Ниже приведены некоторые рекомендации, которые помогут вам при рассмотрении вашего следующего веб-проекта.
1. НАЗНАЧЕНИЕ ВЕБ-САЙТА
Ваш веб-сайт должен соответствовать потребностям пользователя. Наличие простого четкого намерения на всех страницах поможет пользователю взаимодействовать с тем, что вы предлагаете. Какова цель вашего веб-сайта? Вы делитесь практической информацией, такой как «Как направлять»? Это развлекательный веб-сайт, такой как спортивное освещение, или вы продаете продукт пользователю? У веб-сайтов может быть много разных целей, но есть основные цели, общие для всех веб-сайтов;
- Описание опыта
- Создание репутации
- Генерация потенциальных клиентов
- Продажи и послепродажное обслуживание
2. ПРОСТОТА
Простота
Простота вашего веб-сайта — лучший способ для пользователей и простота. Ниже приведены способы достижения простоты с помощью дизайна.
Цвет
Цвет способен передавать сообщения и вызывать эмоциональные реакции. Поиск цветовой палитры, которая подходит вашему бренду, позволит вам влиять на поведение ваших клиентов по отношению к вашему бренду.
Ограничьте выбор цвета менее чем 5 цветами. Дополнительные цвета работают очень хорошо. Приятные цветовые сочетания повышают вовлеченность клиентов и заставляют пользователя чувствовать себя хорошо.
Типографика играет важную роль на вашем сайте. Он привлекает внимание и работает как визуальная интерпретация голоса бренда. Шрифты должны быть разборчивыми и использовать на веб-сайте не более 3 разных шрифтов.
Образы
Образы — это все визуальные аспекты, используемые в коммуникациях. Это включает в себя фотографии, иллюстрации, видео и все формы графики. Все изображения должны быть выразительными, отражать дух компании и служить воплощением индивидуальности бренда. Большая часть первоначальной информации, которую мы потребляем на веб-сайтах, является визуальной, и для первого впечатления важно, чтобы использовались высококачественные изображения, чтобы сформировать у посетителей впечатление о профессионализме и доверии.
3. НАВИГАЦИЯ
Навигация — это система навигации, используемая на веб-сайтах, где посетители взаимодействуют и находят то, что ищут.
Навигация по сайту является ключом к удержанию посетителей. Если навигация по сайту сбивает с толку, посетители сдадутся и найдут то, что им нужно, в другом месте. Важно, чтобы навигация была простой, интуитивно понятной и единообразной на каждой странице.
4. F-ОБРАЗНОЕ ЧТЕНИЕ ШАБЛОНА
F-образный шаблон — наиболее распространенный способ, которым посетители просматривают текст на веб-сайте. Исследования с отслеживанием взгляда показали, что большая часть того, что люди видят, находится в верхней и левой частях экрана. Раскладка в форме буквы F имитирует нашу естественную схему чтения на Западе (слева направо и сверху вниз). Эффективно разработанный веб-сайт будет работать с естественной схемой просмотра страницы читателем.
5. ВИЗУАЛЬНАЯ ИЕРАРХИЯ
Визуальная иерархия – это расположение элементов в порядке их важности. Это делается либо по размеру, цвету, изображениям, контрасту, типографике, пробелам, текстуре и стилю. Одна из наиболее важных функций визуальной иерархии — установить фокус; это показывает посетителям, где находится самая важная информация.
6. СОДЕРЖАНИЕ
Эффективный веб-сайт сочетает в себе отличный дизайн и отличное содержание. Используя привлекательный язык, отличный контент может привлечь посетителей и повлиять на них, превратив их в клиентов.
7. МАКЕТ НА ОСНОВЕ СЕТКИ
Сетки помогают структурировать дизайн и упорядочивать содержимое. Сетка помогает выравнивать элементы на странице и содержать ее в чистоте. Макет на основе сетки упорядочивает контент в виде чистой жесткой сетки с колонками и разделами, которые выстраиваются в линию и выглядят сбалансированными и наводят порядок, что приводит к эстетически приятному веб-сайту.
8. ВРЕМЯ ЗАГРУЗКИ
Ожидание загрузки веб-сайта приведет к потере посетителей. Почти половина веб-посетителей ожидают, что сайт загрузится за 2 секунды или меньше, и они потенциально покинут сайт, который не загружается, в течение 3 секунд. Оптимизация размеров изображений поможет быстрее загрузить ваш сайт.
9.
ПОДДЕРЖКА МОБИЛЬНЫХ УСТРОЙСТВВсе больше людей используют свои телефоны или другие устройства для просмотра веб-страниц. Важно рассмотреть возможность создания вашего веб-сайта с адаптивным макетом, чтобы ваш веб-сайт мог адаптироваться к различным экранам.
Наша команда вдохнет жизнь в ваш веб-сайт и расскажет вашу историю. Мы — «семейная» команда творческих практиков в области дизайна, маркетинга и технологий. Свяжитесь с нами, чтобы узнать больше.
Услуги веб-дизайна, ориентированные на результат
Убедитесь, что ваш следующий веб-сайт ориентирован на рост – Привлечение большего количества посетителей и повышение конверсии
Основы веб-дизайна | Библиотека веб-дизайна
Основы веб-дизайна — стр. 1
Вы новичок в веб-дизайне? Изучение нового навыка может быть ошеломляющим, особенно если вы не знаете, с чего начать. Мы предлагаем вам начать изучение веб-дизайна с азов.
В этой категории вы найдете все, что вам нужно знать, чтобы начать создавать идеальный веб-сайт.
Никто не расскажет вам эти истины о UX-дизайне
В этой статье мы рассмотрим каждый из этих компонентов, чтобы вы могли понять, что делает UX-дизайн таким уникальным по сравнению с другими дисциплинами, и как вы можете применять их методы в своих проектах.
подробнее
в Разное
Что такое разработка пользовательских веб-приложений?
Хотите знать, что такое разработка веб-приложений на заказ? Узнайте все, что вам нужно знать об этом процессе, от основ до более сложных концепций.
подробнее
в Основы веб-дизайна
5 главных трендов интерактивного UX-дизайна, которые нужно держать в поле зрения в 2023 году
Искусственный интеллект, эффекты наведения и дизайнеры активно используют новые навигационные шаблоны для создания увлекательных маршрутов для клиентов и узнаваемых изображений бренда. Это то, к чему вы стремитесь? Продолжайте читать, чтобы узнать больше об интерактивных тенденциях UX, которые станут частью дизайна вашего веб-сайта в 2023 году.
подробнее
в Основы веб-дизайна
Большое влияние участников исследования на разработку сильного дизайна веб-сайта
Начало нового веб-проекта всегда неорганизованно, сбивает с толку и разочаровывает.
Но есть одна вещь, которая помогает решить любой вопрос, возникающий в ходе проекта веб-сайта: понимание аудитории вашего веб-сайта. План UX-тестирования дает ценную информацию, если набираются соответствующие предметы исследования UX. Исследователи пользовательского опыта должны попытаться найти подходящих участников.
подробнее
в Основы веб-дизайна
5 удивительных тенденций веб-дизайна WordPress, которым нужно следовать в 2023 году
Ваш сайт всегда будет казаться современным, так как платформа постоянно пополняется новыми функциями и трендами. В этой статье мы обсудим тенденции веб-дизайна WordPress, которые сделают ваш сайт популярным в 2023 году.0003
подробнее
в Удобство использования веб-сайта
Как сделать так, чтобы ваш сайт продаж выглядел привлекательно: 5 советов
Вы изо всех сил пытаетесь придумать отличный дизайн, который поразит ваших посетителей? Не знаете, с чего начать? Ниже приведены пять советов, которые помогут вам понять, как сделать ваш сайт привлекательным, увеличить продажи и улучшить ваш бизнес!
подробнее
в Удобство использования веб-сайта
Как оптимизировать изображения для WordPress, чтобы повысить скорость сайта
Неоптимизированные изображения могут иметь ряд негативных последствий для вашего сайта WordPress, и в результате вы можете потерять трафик и доход.
В этой статье мы подробно обсудим, как оптимизировать изображения для WordPress.
подробнее
в Работа в веб-разработке
Как оптимизировать рабочий процесс веб-дизайнера-фрилансера
Веб-дизайнеры обычно работают из дома, но оставаться продуктивным во время фриланса сложно. Так как же оптимизировать рабочий процесс?
подробнее
в Работа в веб-разработке
Как выбрать компанию по веб-разработке для вашего проекта приложения?
Выбор правильной компании, занимающейся веб-разработкой, имеет решающее значение для успеха вашего проекта приложения.