Мы уже разобрали анатомию страницы (HTML) и её визуальное оформление (CSS) (1, 2, 3). Но как увидеть это всё вживую? Как понять, почему кнопка на сайте съехала на два пикселя ниже, чем в вашем макете?

Ответ прост — инструменты разработчика (Developer Tools, или сокращённо DevTools). Это встроенный во все современные браузеры набор утилит, который позволяет в реальном времени просматривать код, стили и структуру любой веб-страницы. Для дизайнера это не просто любопытная игрушка, а незаменимый инструмент для проведения авторского надзора.

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

В первых двух частях (1, 2) мы разобрали, зачем дизайнеру знать основы вёрстки, и поближе познакомились с языком разметки HTML. Сегодня давайте подбробнее обсудим, как из простой разметки рождается дизайн: поговорим о CSS.

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

Если CSS отвечает за то, как выглядит страница (цвета, шрифты, отступы), то HTML (HyperText Markup Language) отвечает за то, что на ней находится и какую смысловую роль играет каждый элемент. Это скелет вашего сайта.

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

Привет! Меня зовут Оля, я ведущий дизайнер в Домклик. Работала в бигтехе (Сбер, Московская биржа).

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