Web designer что это за программа

Содержание

Профессия «Веб-дизайнер» — плюсы и минусы специальности, где учиться

Несмотря на то, что первые интернет-страницы появились ещё в начале 90–х, профессия веб-дизайнера в современном понимании довольно молода — 2006–2007 годы считаются моментом перерождения веб-дизайна и началом так называемой эпохи Web 2.0. Дизайн страниц претерпел изменения, которые связывают с массовым распространением смартфонов и переходом к интерактивности интернета, когда пользователи стали авторами и соавторами контента.

И сегодня не многим до конца понятно, что делает этот специалист. Что это за профессия и чем занимается веб-дизайнер — рассказываем в этой статье.

Содержание статьи скрыть

Кто такой веб-дизайнер и чем занимается

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

HTML5 баннер в Google Web Designer

Заказчик описывает особенности продукта и компании и целевую аудиторию и формулирует цели веб-сервиса, а веб-дизайнер предлагает способы реализовать эти цели. На этом этапе дизайнер составляет для себя понимание задачи, а заказчик — представление о конечном результате.

Затем веб-дизайнер продумывает логику и структуру страницы. Для этого он проектирует сценарии взаимодействия пользователя с веб-сервисом и исходя из этого определяет необходимые элементы страницы и располагает их в оптимальном порядке. При этом web-дизайнер стремится максимально упростить навигацию и взаимодействие с интерфейсом, привлечь внимание пользователя, донести ему сообщение заказчика и побудить его к целевому действию.

Далее дизайнер отрисовывает один или несколько прототипов — визуальных схем сайта. Прототип нужен для того, чтобы продемонстрировать заказчику, как будут расположены блоки контента. Этот шаг часто недооценивают, но он поможет окончательно расставить все точки над i и сэкономит время.

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

Готовый макет веб-дизайнер передаёт верстальщику и фронтенд-разработчику и продолжает работать с ними в команде, при необходимости внося изменения. Опытный веб-дизайнер, который знает HTML, CSS и JavaScript, может перевести проект в полноценный рабочий продукт самостоятельно.

Ежедневные советы от диджитал-наставника Checkroi прямо в твоем телеграме!
Подписывайся на канал
Подписаться

Востребованность профессии «Веб-дизайнер»

Востребованность услуг веб-дизайнера стабильно высока. На момент написания статьи на hh.ru по запросу «web designer» нашлось 5773 вакансий. Вакансии свежие — половина из них опубликована не раньше недели назад:

Веб дизайнер — что за профессия | GeekBrains

А за сутки на сайте разместили 882 вакансии:

Так как web-дизайнер может работать и удалённо, он не ограничен пределами России. Если учесть вакансии из Татарстана, Беларуси, Украины и других стран, прибавится ещё порядка 1000 вакансий — и это только на одном сайте.

График и формат работы веб-дизайнера

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

Соотношение вакансий с разными типами занятости выглядит так:

офис — часто, больше 50%;
удалёнка — реже, около 30%,
гибкий график — менее 10%,
полный день — чаще всего, 75%,
проект — редко: всего 43 предложения на hh.ru и ещё 22 на Behance.

Зарплата веб-дизайнера

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

Рассмотрим доход дизайнера в штате компании. Зарплата новоиспечённых дизайнеров без опыта начинается от 30 000 руб. Дизайнерам с двухлетним опытом предлагают зарплату от 65 000 руб., а потолок чаще всего — около 100 000 руб. С опытом в 3 года можно рассчитывать на оклад не меньше 100 000 руб. Уровень зарплат в столице и регионах при этом отличается незначительно.

У специалистов на фрилансе проектов может быть несколько. Здесь тоже всё зависит от опыта и навыков, но острее ощущается необходимость в дополнительных умениях: коммуницировать с заказчиком и презентовать себя, организовывать себя и своё время и др.

Плюсы и минусы профессии «Веб-дизайнер»

Резюмируем всё, что узнали о работе веб-дизайнера и перечислим плюсы и минусы профессии.

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

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

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

Навыки, необходимые для веб-дизайнера

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

знать теорию дизайна — сочетания цветов, типографику и др.;
уметь продумывать UI/UX — проектировать пользовательский опыт;
владеть профессиональными программами — графическими редакторами Adobe Photoshop, Corel DRAW и Adobe Illustrator, органайзерами и планировщиками задач вроде Trello и Notion и специальными программами для подбора цвета и создания анимации: Colormania, Adobe Flash и GIF Animator;

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

Личностные характеристики веб-дизайнера

Профессиональный успех зависит ещё и от личных качеств специалиста, пригодятся следующие:

развитое воображение — чтобы представлять и оценивать результат заранее;
любознательность — чтобы пробовать новые нестандартные способы решения задач;
внимательность — чтобы концентрироваться на задаче, не отвлекаясь на соцсети, развлечения и др.;
усидчивость — чтобы не сбивать концентрацию слишком частыми перекурами и перерывами на кофе;
коммуникабельность — чтобы чётко доносить свои идеи и аргументы коллегам и заказчику;
аналитические способности — чтобы выявлять причинно-следственные связи и устранять слабые места в рабочих процессах;
ответственность — чтобы вовремя делать работу и не подводить коллег и заказчика.

Как стать веб-дизайнером

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

Когда примете твёрдое решение стать веб-дизайнером, не теряйте время и идите учиться. Есть варианты обучения в государственных и частных вузах — если у вас есть минимум 4 года в запасе и возможность учиться очно.

Оптимальный способ обучиться профессии — выбрать онлайн-курс. Уже через несколько месяцев вы сможете создавать простые макеты сайтов и прототипы интерфейсов на заказ — самые короткие курсы длятся 3–4 месяца. Вне зависимости от срока обучения у вас появятся практические навыки и портфолио, которым вы сможете их продемонстрировать заказчикам или работодателю.

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

Вот несколько коротких программ для быстрого старта.

Курс «Дизайн сайтов на Tilda» от Skillbox

За 4 месяца вы научитесь создавать сайты из готовых блоков и шаблонов в конструкторе Tilda. Вы разберётесь в возможностях конструктора и сможете решать разные задачи заказчиков: нужен ли им интернет-магазин, новостной сайт или блог. Вы узнаете, как кастомизировать шаблоны и добавить анимацию, подключить CRM-систему и аналитику и адаптировать вёрстку под экран мобильного.

Срок обучения: 4 месяца
Стоимость: 24 500 ₽

Профессия «Веб-дизайнер» от Contented

Вы научитесь делать сайты с нуля: непохожие на остальные, точно подходящие под задачи клиента и особенности его целевой аудитории. Вы узнаете, как проектировать пользовательский опыт, создавать 3D-элементы интерфейса и разрабатывать интерактивные прототипы для презентации заказчику. Вы пройдёте практику на кейсах от партнёра курса Mail.ru, добавите в портфолио 5 проектов и пройдёте удалённую стажировку во время дипломного проекта по реальному брифу.

Срок обучения: 5 месяцев
Стоимость: 66 000 ₽

Есть и более длительные комплексные программы с глубоким погружением в профессию.

Профессия «Веб-дизайнер» от GeekBrains

Вы разберётесь в веб-дизайне и концепции MVP, научитесь исследовать целевого пользователя и проектировать его опыт и сможете создавать дизайн-концепции сайтов и уникальные графические элементы. Вы прокачаете софт-скилы, работая в команде с маркетологами и разработчиками, войдёте в профессиональное сообщество и сможете посещать закрытые офлайн-мероприятия. Вы отточите теорию на практике и добавите в портфолио 5 проектов по реальным кейсам от Mail.ru и «Яндекса».

Срок обучения: 10 месяцев
Стоимость: 99 500 ₽

Профессия «Веб-дизайнер» от Skillbox

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

Срок обучения: 2 года
Стоимость: 208 800 ₽

Как и куда развиваться в профессии

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

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

Коротко о главном

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

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

Не знаете с чего начать?

Получите персональный список курсов, пройдя бесплатный тест по карьере

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

Google Web Designer: пошаговая инструкция по созданию HTML5 баннеров

Google Web Designer — это бесплатный софт для веб-дизайнеров, позволяющая создавать баннеры и страницы в стандарте HTML5 и CSS3.

Что такое HTML5 баннеры?

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

Объявления будут правильно отображаться в любых браузерах и выглядят идентично на всех типах устройств;
Большие возможности рекламных интеграций. Например, можно добавить кнопки с социальными сетями или создавать движение, для того, чтобы выделиться среди конкурентов и привлечь внимание пользователей;
Относительно небольшой вес, что позволяет ему грузиться быстро и не упускать показы.

Пример HTML5 баннера (из пошаговой инструкции)

Шаблоны в Google Web Designer

При создании баннера будет предложено:

Создать файл с нуля;
Использовать шаблон.

Среди доступных шаблонов:

Динамический ремаркетинг. Один из самых популярных шаблонов для показа сразу нескольких предложений (товаров или услуг). Например, можно показывать туры, недвижимость, автомобили, товары, авиабилеты и многое другое;
App Install. Поможет при создании креатива для рекламы мобильного предложения;
Banner for Display. Специальный формат, который может быть размещен на каждом сайте;
Баннер для Google Ads и AdMob. Универсальный формат, легко продвигающийся среди мобильных устройств.
Data Driven. Показывает по очереди преимущества бренда;
Demonstration. Баннер с интерактивными элементами, например, вывод текста при наведении;
Expandable. Показывает один большой баннер и несколько маленьких, позволяя продвигать связные товары/услуги;
Floating. Редкий формат, показывающийся только на ПК;
In-stream video. Показ видео вместо баннера, что становится достаточно популярным;
Interstitial
Lightbox. Универсальный формат, способный использовать видео, карты и картинки для продвижения товаров и услуг;
Parallax. Создает красивую иллюзию сразу нескольких слоев и обладает быстрой скоростью загрузки;
Rising star. Редкий формат для компьютеров, создающий интерактивный эффект.

После того, как основной макет выбран, каждому пользователю предоставляется возможность выбрать из любого формата.

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

При нажатии на кнопку «Предпросмотр» появляется возможность подобрать другой размер для данного шаблона и при необходимости открыть пример в браузере (например, Google Chrome).

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

Инструкция по созданию баннеров HTML5 в Google Web Designer

В качестве примера создадим баннер для двух инструментов Netpeak:

Мы будем использоваться баннер 300*600 пикселей, для чего потребуется в блоке «Свойства» изменить соответствующие поля.

После в блоке «Библиотека объектов» загрузим все составные части для нашего проекта это:

Задний фон;
Логотип Netpeak Software;
Логотип Netpeak Spider;
Логотип Netpeak Checker;
Лого Netpeak.

Для этого кликаем правой клавишей мыши и выбираем «Добавить объект».

После загружаем все необходимые части.

Далее расставляем составные части по нужным местам (при необходимости изменяя их размеры, через «Свойства»).

Добавляем текст к баннеру через панель инструментов.

В итоге получаем такой баннер.

Теперь потребуется расставить кнопки для перенаправления на нужные страницы, для чего кликаем правой клавишей мыши на нужный объект и выбираем «Добавить событие».

В блоке «Действие» выбираем «Переход».

Здесь только 1 пункт – «gwd-ad».

Теперь в URL ставим ссылку на нужную страницу.

Все готово и проводим аналогичную операцию со всеми элементами в проекте.

Следующий этап — это создание анимации, для чего используем временную шкалу ниже.

Для примера мы будем использовать упрощенный редактор, но также можно перейти в расширенный при помощи нажатия на соответствующую клавишу.

Расставляем объекты на странице так, как они будут появляться во время анимации.

Далее нажимая на «+» мы копируем исходный кадр и получаем его полную копию, делаем в ней изменения и копируем его и делаем изменение дальше.

Так проводим работу со всеми кадрами пока картинка не будет собрана полностью.

После этого проверяем баннер нажимая на кнопку «Воспроизведение».

Теперь осталось только сохранить баннер кликнув в правом-верхнем углу на «Файл»-«Сохранить как ZIP-файл».

Пример полученного баннера:

Подписывайтесь на наш канал в Яндекс.Дзен

Подписывайтесь на наши социальные сети

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

Что такое Google Web Designer

Приложение Google Web Designer предназначено только для коммерческого использования.

Создание онлайн-рекламы и видео

Google Web Designer – это веб-приложение, с помощью которого можно создавать объявления, изображения, видеоролики и другие виды онлайн-контента в формате HTML5 для вашего бизнеса. В приложении есть как визуальный редактор, так и редактор кода. Режим просмотра макета позволяет создавать контент с помощью инструментов рисования, добавлять текст и трехмерные объекты, а также анимировать всё это на временной шкале.

Написание кода

В режиме просмотра кода можно создавать файлы CSS, JavaScript и XML. Подсветка синтаксиса и функция автозаполнения облегчают работу и помогают снизить количество ошибок.

Добавление медиа и интерактивных функций

В Google Web Designer есть ряд компонентов, с помощью которых можно добавлять галереи изображений, карты, визуальные эффекты и другие функции на сайты и в объявления. Кроме того, вы можете настраивать события так, чтобы они запускались после определенных действий пользователя или в заданное время. В видеообъявлениях также можно редактировать видео- и аудиоклипы.

Дополнительные инструменты

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

Это бесплатно

Скачивать и использовать Google Web Designer, чтобы создавать контент для бизнеса, можно бесплатно.

Источник: support.google.com

Google Web Designer

Google Web Designer — программа для создания баннеров и web-страниц, ориентированных на интерактивность со зрителем и на показ анимации. Конечный результат сохраняется в «формате» HTML5, а именно, в набор html, js, css файлов и контентных файлов изображений, видео, аудио.
Интерфейс программы спроектирован так, чтобы в ней мог работать человек без знания языков программирования, форматирования и разметки. Тем не менее, если пользователь знаком с Javascript, CSS и HTML то он сможет создавать сложные функциональные веб приложения.

Интерфейс

С интерфейсом программы познакомьтесь из интерактивной презентации: Полный экран

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

Принцип работы

Объекты страницы. На рабочем холсте, размер которого задан при создании проекта, можно размещать различные объекты: фигуры, картинки, тексты, видео. Параметры выделенного объекта можно менять на панели «Свойства». Параметры объектов можно изменять во времени, то есть, анимировать.

Для этого нужно воспользоваться временной шкалой — расставить на ней ключевые кадры и в каждом кадре задать значение анимированного параметра. От кадра к кадру значение будет меняться плавно согласно кривой выбранного типа анимации.

Аудио тоже размещается на холсте, но на результирующей html странице не отображается. На аудио можно задавать какие-то действия типа старт, стоп, пауза.

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

Код. Пользователь, разбирающийся в HTML, CSS и Javascript может открыть код и вносить изменения прямо в нем. Кнопка [Код] находится вверху справа. Потом вернуться снова к визуальному редактору можно по соседней кнопке [Макет].

Просмотр и публикация. Текущий результат быстро просмотреть в браузере можно по кнопке [Предпросмотр]. А по кнопке [Опубликовать] вы сделаете результирующую сборку проекта в веб приложение.

Анимация. В вашем результирующем баннере/приложении объекты могут передвигаться, вращаться, менять прозрачность по расписанию или по событию. На шкале времени происходит работа по анимированию объектов по расписанию. Принцип заключается в расстановке кличевых кадров и в каждом таком кадре назначаются свойства того или иного, или сразу нескольких, параметров.

После этого в промежутке между кадрами значение свойства будет меняться. Чтобы задать тип изменений (который по умолчанию lianer) — кликните на полоску между ключевыми кадрами и выберите интерполяцию.

События. Это могут быть клик по объекту мыши, наведение курсора на объект, загрузка страницы. На событие можно повесить действие, которое будет происходить с любым другим объектом или с ним самим. Этим делом в результирующем баннере/приложении будет заниматься Javascript и CSS, но пользователь GWD может без знания данных технологий в конструкторе событий все настроить сам.

3D в Google Web Designer

Программа предоставляет удобный инструментарий для управления css параметрами, отвечающих за трехмерность. Причем каждый из этих параметров можно анимировать и создать, например, такой 3d кубик, как вы видите слева. В этом примере шесть плоских картинок трансформированы в 3d пространстве для образования куба и объеденены в группу, для которой задана анимация вращения вокруг осей X,Y и Z.

У выделенного объекта на панели «Свойства» под плашкой «Преобразование, вращение и масштаб» вы увидите параметры X, Y и Z для перемещения в трехмерном пространстве и для вращения вокруг этих осей. Также под этой плашкой вы увидите радиобаттоны «Коррекция» и «Абсолютное значение». Если с «Абсолютным значением» все ясно — это значения, отсчитываемые от центра композиции, то про «Коррекцию» стоит сказать, что это настройка изменения значения относительно текущего состояния в тот момент времени, который обозначен ползунком на шкале времени. Если вы отметите радиобаттон «Коррекция», то все параметры будут выставлены в 0. Изменив значение какого-то параметра, вы автоматически создадите новый ключевой кадр для вашего объекта и они примет новое абсолютное значение параметра.

Более грубое и быстрое изменение значений 3d параметров возможно с помощью инструментов и — при выборе их на панели слева вы сможете мышкой вращать или передвигать выделенный объект в трехмерном пространстве.

Есть еще один 3d инструмент . Он служит для свободного вращения всей сцены. НО только для просмотра, на абсолютные значения это никак не влияет. Инструмент полезен для контроля того, как все у вас может выглядеть в трехмерности. Чтобы после применения этого инструмента вернуть сцену в первоначальное состояние надо на этой кнопке совершить двойной клик.

Компонент «Галерея»

Google Web Designer предлагает воспользоваться готовыми миниприложениями в виде компонентов, которые можно перетаскивать на холст мышкой из одноименной панели. Я освоил компонент «Перелистываемая галерея» и он мне понравился. Слева вы видите рекламный баннер на основе этого типа галереи.

После перетаскивание этого компонента на холст надо в его свойствах найти параметр «Изображения» и кликнуть по иконе в этом поле. Откроется окно, в котором по ссылке [Выбрать изображения] добавьте нужные картинки для будущего пролистывания в галерее. Ваши картинки смогут пролистываться как по клику, так и с помощью навигационной панели, вывод которой также есть в свойствах

Я же захотел создать собственные кнопки навигации влево/вправо. Столкнулся с невозможностью после крайнего правого состояния галереи переместиться в один клик на первое изображение. Пришлось применять небольшой скрипт на Javascript, который я повесил на событие клика по правой кнопке:

gwd.Loop1 = function(event) < ++myCount; if (myCount == mySum) < gwd.actions.gwdSwipegallery.goToFrame(«gwd-swipegallery_1», 1, «slide»); myCount = 0; >else < gwd.actions.gwdSwipegallery.goForwards(«gwd-swipegallery_1»); >; >;
Счетчик слайдов и общее количество слайдов я объявил заранее через интерфейс кода:
var myCount = 0; // счетчик var mySum = 8; // общее кол-во слайдов

Скачивание и помощь

Скачать Google Web Designer с официального сайта. Есть 32bit версия и 64bit для Windows. Есть сборки под Linux и Mac OS. Программа официально бесплатная. Небольшой нюанс заключается в том, для запуска и работы программа требует подключения к интернету.

Как избежать такой зависимости я не разбирался.

❓ Развернутая справка по работе с программой на сайте разработчика на русском.
❓ Описание компонентов GWD — для чего и как выглядят в работе.
❓ API компонентов GWD — свойства, события и методы. Для продвинутых пользователей.
Канал Google Web Designer на YouTube, на английском

Знакомство с Google Web Designer направленность ролика — на работающих с контекстной рекламой Google AdWords, на русском

Источник: www.newart.ru