Привет! Меня зовут Оля, я ведущий дизайнер в Домклик. Ранее я работала в бигтехе (Сбер, Московская биржа).
Хочу поделиться с вами тем, что знаю лучше всего. Мой путь в IT начался с фронтенд-разработки. Я писала код, верстала макеты и часто «бомбила» на получаемые макеты: почему нельзя нарисовать так, чтобы это было реально реализовать без костылей?!
Позже я перешла в дизайн и построила карьеру в бигтехе, где работаю над сложными продуктами для миллионов пользователей. Я видела сотни портфолио, участвовала в найме и точно знаю, какие навыки сегодня требуются современному дизайнеру.
Я убеждена, что один из самых быстрых способов поднять общий уровень дизайна в нашей стране — дать дизайнерам базовое понимание того, как их работа живёт после передачи макетов в разработку. Поэтому я решила опубликовать этот цикл статей. Он не про то, как стать разработчиком, а про то, как дизайнеру научиться думать как разработчик. Мы разберём основы HTML и CSS. Моя цель — вооружить вас знаниями, чтобы ваши макеты стали не просто красивыми картинками, а понятным и чётким техническим заданием, которое приятно брать в работу.
Давайте вместе сделаем так, чтобы хороший дизайн перестал быть исключением, а стал нормой. Поехали!
Как сайт попадает в интернет?
Для начала немного основы: что такое сайт и как он оказывается в сети. Чтобы сайт стал доступен пользователям, ему нужно иметь уникальный адрес и место для хранения, так как код, картинки, видео и т.д. имеют размеры и должны где-то физически располагаться.
Чтобы пользователи могли найти ваш сайт, используются два ключевых понятия: хостинг и домен.
Хостинг (Hosting) — это хранилище данных. Здесь располагаются файлы и папки, содержащие разработанный код, шрифты и изображения.
Домен (Domain), или доменное имя — это уникальный адрес сайта, например, domclick.ru. Доменным именем здесь является domclick. При переходе по разным страницам сайта к домену добавляется дополнительный текст, например, /page-name. Это адрес пути до конкретной страницы, которая лежит на хостинге в папке.
Таким образом, чтобы сайт заработал, необходимо купить доменное имя и арендовать место на хостинге, куда затем будут загружены файлы.
Зачем дизайнеру знать основы вёрстки
Для дизайнера понимание основ вёрстки — не просто дополнительный навык, а мощный инструмент. Он позволяет создавать более реалистичные макеты, которые разработчики смогут воплотить быстрее и без лишних костылей, вести конструктивный диалог с командой и, в конечном итоге, лучше контролировать финальный результат своего труда.
Знание основ вёрстки помогает:
Создавать реализуемые макеты.
Дизайнер, не знакомый с техническими ограничениями веба, может создать макет, который будет крайне сложно или невозможно реализовать. Например, сложная анимация, которая будет «тормозить» на мобильных устройствах. Зная возможности CSS и JavaScript, дизайнер создаёт интерфейсы, которые не только красивы, но и технически реализуемы без костылей. Это экономит время и нервы всей команды.Глубоко понимать принципы адаптивности.
Адаптивный дизайн — это не просто «сжатие» макета под маленький экран. Это полное переосмысление компоновки элементов. Дизайнер, знающий основы CSS Grid и Flexbox, лучше понимает, как блоки ведут себя при изменении размера окна браузера. Он может проектировать макеты, которые изначально «дружелюбны» к разным разрешениям, а не просто рисовать несколько статичных версий для десктопа, планшета и телефона.Улучшать возможности прототипирования.
Современные инструменты для прототипирования (например, Figma) позволяют создавать очень детализированные кликабельные макеты. Однако иногда для демонстрации сложной логики или нестандартного взаимодействия требуется более «живой» прототип. Знание основ HTML и CSS позволяет дизайнеру быстро собрать работающий прототип прямо в браузере, чтобы проверить гипотезу или показать её заказчику.Понимание ограничений и возможностей браузера.
Браузеры по-разному отображают одни и те же элементы. Понимание того, как работает вёрстка, помогает дизайнеру предвидеть потенциальные проблемы с кроссбраузерностью и производительностью. Это позволяет создавать более стабильные и быстрые продукты.Понимать друг друга.
Знание азов вёрстки помогает избежать недопонимания и конфликтов при передаче макета. Вы начинаете общаться на одном языке, что значительно упрощает объяснение ваших идей.
Из чего состоит веб-страница
Веб-страница оживает благодаря двум основным языкам, которые работают в паре.
HTML (HyperText Markup Language)
Это язык разметки гипертекста, главной задачей которого является описание структуры страницы: что является заголовком, где расположен основной текст, какие есть списки, ссылки или изображения. HTML использует систему тегов (<tag>) для обозначения разных смысловых блоков. Представьте HTML как вордовский документ: пишется сверху вниз, можно выделить заголовки, вставить картинки и таблицы, но без выбора шрифтов, градиентов и без возможности комбинировать элементы.
Вот пример кода на HTML:
И его реализация:
Важно!
HTML не является языком программирования, несмотря на то что слово «язык» есть в аббревиатуре. Если упомянуть такое в кругу разработчиков, потом век не отмыться.
Как видите, голый HTML не позволяет сделать красиво, но он формирует всю структуру страницы. В следующих статьях мы поговорим о семантической разметке и о том, почему её важно учитывать.
CSS (Cascading Style Sheets)
Это каскадные таблицы стилей. Их задача — управлять внешним видом структурных элементов, созданных при помощи HTML. С помощью CSS мы задаём цвет фона, размер шрифта, отступы, расположение блоков и создаём сложные анимации. Именно CSS превращает наши скучные данные в задуманную красоту.
Так будет выглядеть наш HTML, если «приправить» его стилями:
Веб-дизайн рождается на стыке этих двух технологий. Дизайнер создаёт визуальную концепцию, а верстальщик переводит её на языки HTML и CSS.
В следующих частях мы подробно разберём каждый из этих языков, научимся применять их на практике, а также изучим, как сверять макет с реализацией в браузере, чтобы вы могли обоснованно придираться к каждому пикселю в вёрстке при проведении авторского надзора.
Ломакина Ольга
Продуктовый дизайнер в Домклик
🚀 Telegram-канал Домклик Дизайн
https://t.me/domclickdesign
