ТИЛЬДОШНАЯ
Как стать веб-дизайнером. Пошаговый гид
Веб-дизайнер — это не тот, кто «сделает красиво». Дизайнер помогает бизнесу решать задачи. Управляет вниманием, чтобы пользователи читали важный текст. Формирует эмоции и восприятие от продукта. Думает о целевой аудитории, бизнес-процессах, продажах. Поэтому чтобы быть востребованным дизайнером, нужно базово разбираться в смежных областях: маркетинге, редактуре, веб-программировании.
Мы собрали темы и материалы, которые помогут вам ознакомиться с основами и наметить план обучения, чтобы быстро начать карьеру.

I. Фундаментальные принципы дизайна

Дизайн в вебе подчиняется правилам. Чтобы пользователю на сайте было комфортно и понятно, нужно изучить базовые принципы дизайна. Это поможет создавать аккуратный и полезный дизайн с чистого листа.
Типографика
Цвет
Графика
Композиция
Модульные сетки
Визуальная иерархия
Дизайн-задача
Поиск референсов
Референсы помогают найти идеи, на которые можно опереться во время разработки дизайна сайта.

Где искать референсы

— сайты конкурентов
— ресурсы с подборками:
awwwards.com
dribbble.com
httpster.net
land-book.com
savee.it
behance.net
cssdesignawards.com
Прототипирование

II. Основы маркетинга

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

III. Технический минимум для веб-дизайнера

Разберитесь с основными терминами веб-разработки. Это поможет понять, как и за счет чего сайты появляются и работают в интернете.
Домен
Что такое домен и как его получить — Журнал Код

Домен — это имя сайта в интернете: yandex.ru или thecode.media. Чаще всего говорят про домены первого и второго уровней.

Домен первого уровня (зона) обозначает страну или тематическое направление сайта. Примеры доменов первого уровня: .ru, .com, .рф, .media, .org. Правила разделения по странам соблюдать не обязательно: сайт из России может находиться в зоне .com, а албанский форум — в зоне .ru. А красивый домен .tk изначально создавался для малюсенького региона Токелау в Тихом океане, но использует его кто попало.

Домен второго уровня — основное имя сайта:

yandex.ru — домен второго уровня yandeх в зоне .ru
thecode.media — домен второго уровня thecode в зоне .media

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

президент.рф — дополнительный адрес сайта Кремля

С технической точки зрения домен — это запись в базе данных, которая сообщает компьютерам: «Если введён такой-то адрес — отправьте запрос на такой-то IP». И ещё это запись на компьютере, который обслуживает сайт: «если пришёл запрос с таким-то доменным именем, покажи ему такой-то сайт». Короче, домены — это просто записи в базе данных.
Хостинг
Зачем нужен хостинг — журнал Код

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

Для сайта на Тильде хостинг подключать не нужно — он уже включен в сервис.
Техническая информация о хостинге на Тильде
DNS
Как устроен интернет: адреса — журнал Код

DNS-сервер сообщает Интернету адрес вашего сайта. Если очень упрощённо, DNS — это здоровенная таблица, в которой написано: «Если надо отправить запрос на yandex.ru, тебе нужен адрес 77.88.55.88» — и так миллиард раз для каждого имени сайта в интернете.

Доменное имя можно арендовать и привязать к какому угодно IP-адресу; вы платите как бы за услугу внесения определённого имени в базу данных DNS;
Протоколы HTTP и HTTPS
Основы HTML, CSS, javascript
Изучить основы
Знакомство с HTML и CSS — бесплатный интерактивный курс HTML Academy
Знакомство с JavaScript, бесплатная первая глава — HTML Academy


Зачем вообще нужен HTML, CSS, JavaScript

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

Пример
<h1>Это заголовок</h1>
<p>Это текст</p>
<button>Это кнопка</button>
<!-- Картинка внутри контейнера DIV -->
<div>
" alt=''элемент img внутри контейнера DIV''>
</div>

В html можно размещать одни элементы внутри других. В этом примере div — родительский элемент для img, а img — дочерний элемент для div.

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

Пример
<p style="color: red;">Это красный текст</p>

JavaScript — это язык сценариев или скриптов (от анг. Script — «сценарий»). Помогает настроить поведение элементов при взаимодействии с ними. С помощью Javascript вы сможете передавать данные из форм на почту или другие приемщики, анимировать объекты, передавать события в системы аналитики, создавать тесты и опросы и даже писать целые игры. Javascript — полноценный язык программирования, который поддерживают браузеры.

Пример
<!-- Заменим цвет фона при клике --><script>
function changeColor(){
document.body.style.background = "#5A9C6E";
}
</script>
<button onclick="changeColor();">Нажмите, чтобы поменять цвет фона</button>

IV. Инструменты

Дизайнер может обойтись без верстальщика и программиста для простых проектов: лендингов, многостраничных сайтов, блогов, небольших магазинов. Здесь вам помогут инструменты последнего поколения. Мы выбираем Тильду.
Графический редактор Figma
Платформа для создания сайтов Tilda
Tilda. Инструкции по базовым функциям
Где искать ответы на воросы по Тильде
Сборник готовых ответов с поиском
Инструменты для профессиональных дизайнеров внутри Тильды
Создание интернет-магазина на Тильде
Встроенные сервисы внутри Тильды
Все эти знания вы сможете получить самостоятельно — в открытых источниках достаточно информации. Но если хотите сделать быстрый старт в карьере веб-дизайнера и сэкономить месяцы самостоятельных поисков, приходите на курс Tilda Start.

За 3 недели мы объясняем принципы веб-дизайна и учим использовать весь потенциал Тильды для создания сайтов. Все это под руководством профессиональных дизайнеров с мощной ежедневной обратной связью. Старт курса 18 мая.
Подробнее о курсе Tilda Start
Facebook
VK
Youtube
Instagram
Telegram
Следите за Тильдошной в социальных сетях
Made on
Tilda