Что нужно для веб дизайна

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

Осмотрите макет

Зачем. Чтобы потом не отвлекаться от вёрстки.

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

Отметьте крупные смысловые блоки и разделы. Посмотрите на страницу и выделите крупные смысловые блоки. Базовая структура любого макета состоит из трех основных тегов:

• — шапка сайта, одинаковая на всех страницах.
• — уникальный контент;
• — подвал, одинаковый на всех страницах.

Теперь ищем смысловые разделы внутри этих блоков. Поможет схема:

Как стать веб-дизайнером. С чего начать?

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

На этом этапе отметьте:

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

Настройте редактор кода и проект

Установите редактор Visual Studio Code (или любой другой), если ещё этого не сделали, и плагин editorconfig. Он помогает разным разработчикам писать код в проекте в одном стиле.

Структура проекта. Создайте папку и положите туда файл index.html, папку css с файлами style.css и normalize.css, а также папки для картинок и шрифтов. Получится так:

Разметка

Рабочую среду подготовили, приступаем к разметке.

1. Создаём разметку страницы в файле index.html. Изображения пока не подключаем — этим займемся на этапе работы с графикой;
2. Далее, в файле при помощи нужных тегов: прописываете весь текст, расставляете все ссылки и кнопки. Нужен только HTML-код, стили пока делать не нужно.
3. Теперь определим ! DOCTYPE, укажем язык содержимого, кодировку и заголовок страницы во вкладке браузера.

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

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

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

Веб дизайнер — с чего начать и как стать. Основы веб-дизайна с нуля

Определить, какие теги использовать, можно методом исключения:

• Получилось найти самый подходящий смысловой тег — использовать его.
• Для потоковых контейнеров — .
• Для мелких фразовых элементов (слово или фраза) — .

Разметка в редакторе кода выглядит так:

А так проект выглядит в браузере:

Базовая стилизация

Начинается самое интересное — работа с внешним видом. Прописываем в style.css базовые стили. Для крупных блоков пока ничего не делаем.

Этапы базовой стилизации

• Добавление классов в разметку;
• Подключение нестандартных шрифтов (локально или из сервиса);
• Подключение normalize.css (по желанию);
• Указываем параметры шрифта — название, размер, цвет, жирность;
• Указываем высоту строки;
• Описание фоновых параметров (фоновый цвет);
• Описание состояний интерактивных элементов, которые описаны в стайлгайде. На этом этапе задавайте только текстовые параметры и параметры фона;
• Все цвета вынесены в кастомные свойства в селектор :root.

Пример проекта с базовой стилизацией:

Работа с графикой

Экспортируйте всю графику из макета в Figma и подключите её в разметке.

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

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

project | – css | – fonts | – img | [ваши картинки] | favicon.ico | index.html | catalog.html

Подключите контентные изображения в разметке. Фоновые и декоративные изображения пока подключать не нужно.

При подключении изображений используйте относительные адреса, обязательно укажите размер картинки без пикселей, а также alt. Например, так:

Подключите к проекту фавиконки. favicon.ico размером 32×32 положите в корень проекта и подключите в , остальные версии фавиконок делать не обязательно.

Пример проекта в котором подключена графика:

Построение сетки

Построение сеток производится в общем стилевом файле style.css.

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

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

1. C помощью свойства background-color c разными цветами для разных блоков;
2. С помощью свойства outline (для удобства также можно использовать разные цвета).
3. Свойство border лучше не использовать, так как оно влияет на ширину блока и может что-нибудь сломать.

Пример проекта, где уже добавлены сетки:

Добавление декоративных элементов

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

Пример готового проекта, где добавлены декоративные элементы:

Всё почти готово, осталась пара шагов.

Адаптивные сетки и декоративные элементы

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

Адаптивная графика

Ура! Мы и дошли до последнего пункта работы над проектом. Что нам осталось сделать?

1. Подключаем в разметке и стилях адаптивные изображения для разных девайсов и экранов с разной плотностью пикселей;
2. В HTML используем элемент picture , с помощью которого подключаем картинки для разных разрешений экрана, для экранов с разной плотностью пикселей, а также webp-варианты картинок для поддерживающих браузеров;
3. В CSS подключаем картинки для экранов с двухкратной плотностью пикселей и для разных разрешений с помощью медиа-выражений.

Пример готового проекта, где настроена адаптивная графика:

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

Следующие шаги:

• Шаблон простого сайта на HTML
• Шаблон HTML-формы
• Основы дизайна для верстальщиков
• Как добавить изображение на страницу
• Частые ошибки в HTML-коде

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

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

Трясём пароль с помощью CSS

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

Вот что получится в итоге:

• 7 сентября 2023

Как сделать тёмную тему на сайте

Без лишних слов создадим простой переключатель для светлой и темной темы с использованием HTML, CSS и JavaScript. Нам понадобятся три файла — index.html , styles.css и script.js .

HTML

Основная разметка страницы — заголовок, абзац текста, список и текст в рамке.

CSS (styles.css):

Здесь задаём цвета для светлой и тёмной темы, а ещё минимальную стилизацию текста и блока с рамкой.

body < font-family: Arial, sans-serif; transition: background-color 0.3s ease; >body.light-theme < background-color: #ffffff; color: #000000; >body.dark-theme < background-color: #121212; color: #ffffff; >.boxed-text

JavaScript (script.js)

Этот код нужен, чтобы переключать тему при нажатии на кнопку:

document.getElementById(‘themeToggle’).addEventListener(‘click’, function() < const currentTheme = document.body.className; if (currentTheme === ‘light-theme’) < document.body.className = ‘dark-theme’; >else < document.body.className = ‘light-theme’; >>);

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

• 29 августа 2023

4 способа центрировать текст в CSS

Центрирование элементов на веб-странице — это одна из наиболее распространенных задач, с которой мы сталкиваемся при работе с макетами. И хотя центрирование текста по горизонтали довольно простое ( text-align: center; и делов-то), вертикальное центрирование может быть немного сложнее. Давайте рассмотрим несколько методов.

Метод 1: Flexbox

Flexbox — это один из самых простых и эффективных способов центрирования.

Заворачиваем текст в с классом center-both :

Центрированный текст

.center-both

Метод 2: CSS Grid

HTML такой же, как в предыдущем примере. В CSS включаем гриды и используем свойство place-items со значением center :

.center-both

Метод 3: позиционирование и Transform

Этот метод немного старомодный и работает не идеально. Здесь у div устанавливается relative позиция. А

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

.center-both < position: relative; >.center-both p

HTML остается таким же. Вот что получается:

Плохой метод: использование line-height

Если у вас однострочный текст, вы можете установить line-height , равный высоте родительского элемента.

.center-both < line-height: 200px; /* Пример высоты */ text-align: center; >

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

Если вам интересно узнать больше о каждом из этих методов, рекомендуем посмотреть документацию по Flexbox на MDN или документацию по CSS Grid на MDN, а ещё пройти курсы в HTML Academy.

• 28 августа 2023

Как скруглить рамку. CSS-свойство border-radius

CSS-свойство border-radius помогает скруглить углы элемента. Оно особенно полезно для стилизации кнопок, форм, карточек товаров и других элементов сайта.

• 28 июля 2023

CSS-свойство contain

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

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

⭐ CSS-свойство contain определяет, как элемент должен взаимодействовать с другими элементами внутри контейнера.

Синтаксис

.container

• 14 июля 2023

Как задать позицию и размер элемента. CSS-свойство inset

CSS-свойство inset задаёт позицию и размер элемента на странице. Это комбинация четырёх отдельных свойств: top , right , bottom и left , которые определяют отступы от верхнего, правого, нижнего и левого края элемента.

Синтаксис

.element

• 13 июля 2023

Как перекрыть один элемент другим. CSS-свойство z-index

z-index определяет порядок наложения элементов в трёхмерном пространстве на веб-странице. Свойство управляет тем, как элементы перекрывают друг друга, если они имеют позиционирование, отличное от значения static .

Синтаксис

.my-element

• 10 июля 2023

Как верстать и оформлять цитаты

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

• 22 июня 2023

Окей, ChatGPT, сделай мне кнопку

Чатгпт, все разработчики и дизайнеры в отпуске. Сделай мне кнопку на CSS, чтобы все сразу купили профессию «Фронтенд-разработчик»

Конечно, я могу помочь с созданием кнопки на CSS и HTML! Вот пример кода, который создаст стильную кнопку:

Я попросил кнопку, а не ссылку. И что это за шрифт вообще? Давай поинтереснее какой-то

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

Можно текст не такой длинный? И добавь красненького, этот недостаточно продающий

Окей, я сократил текст кнопки и изменил цвет фона на красный оттенок. Размер шрифта был увеличен до 20 пикселей для лучшей видимости. При наведении на кнопку цвет фона становится ещё более ярким красным.

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

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

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

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

Ты издеваешься? Я хочу красную кнопку и чтобы анимация была премиальной

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

Ты бы ещё эмодзи с трактором добавил

Конечно! Вот обновленный код с красной кнопкой, премиальной анимацией и эмодзи с трактором:

Я не это имел в виду. Сделай мне обычную нормальную кнопку с текстом «Купить», так, чтобы не стыдно было

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

Не, кнопка всё равно не работает. Придётся обычную ставить.

• 21 июня 2023

Как использовать свойство object-fit

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

В тех ситуациях, когда картинка не соответствует размеру бокса, но её нужно вставить, рекомендуется использовать object-fit . Он определяет, как элемент реагирует на размеры своего бокса. object-fit предназначается для замещаемых элементов — , , , .

С помощью object-fit можно обрезать встроенное изображение и определить, как оно будет сжиматься и растягиваться.

• 15 июня 2023

Источник: htmlacademy.ru

Веб-дизайн: с чего начать обучение?

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

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

Веб-дизайн представляет собой довольно широкое поле знаний.

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

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

Мой опыт обучения

Решив начать обучение веб-дизайну, я также был поражен разнообразием инструментов и способов это сделать. Какую программу использовать для изучения, Dreamweaver или Photoshop? Или, может, сначала стоит начать с изучения кодирования и научиться Javascript, HTML и CSS? Правда заключается в том, что существует множество ресурсов для изучения веб-дизайна самостоятельно. Поэтому многим сложно сделать выбор, с чего начать?

Почему необходимо начинать обучение веб-дизайну с HTML и CSS?

Большинство сайтов (думаю 99%) созданы на языке HTML. Чтобы убедиться в этом, зайдите на ваш любимый сайт и нажмите “Ctrl+U”. Вы видите в тексте

, , и так далее? Это все называется тегами HTML. Не волнуйтесь, что вы не знаете их.

Пройдет немного времени и во всем разберетесь.

HTML – это каркас или структура почти любого современного сайта. А как на счет CSS? CSS на самом деле передает этой структуре некий стиль. Без использования CSS сайты выглядят ужасно. Чтобы по-настоящему понять и изучить веб-дизайн, необходим знать эти два несложных языка.

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

Кроме того, не волнуйтесь, это не имеет ничего общего с реальными языками программирования, такими как PHP, Javascript или C++. Это совершенно разные вселенные. Изучение HTML и CSS по сравнению с этими языками, это как научиться ездить на велосипеде по сравнению с полетом самолета. Вы же умеете ездить на велосипеде? Тогда скорее всего и HTML с CSS осилите!

Как же начать изучение HTML и CSS?

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

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

Ознакомьтесь с основами Photoshop

После того, как вы разберетесь с HTML и CSS, необходимо переходить собственно к обучения основам веб-дизайна. А именно к изучению программ, с помощью которых происходит проектирование (дизайн) веб-сайтов. Существует несколько программных комплексов, используемых для этого. Главным из них является Adobe Photoshop.

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

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

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

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

Источник: pt-blog.ru