Как проще всего сделать свой сайт

Как работать в Фигме (Figma): создаём макет сайта с нуля

В этой публикации мы познакомимся с самой удобной (на мой взгляд) программой для создания прототипов, макетов интерфейса и дизайна — Фигмой (Figma).

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

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

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

Задание: редизайн страницы сайта Тинькофф

Предлагаю попробовать сделать дизайн (скопировать дизайн) страницы сайта Тинькофф, посвящённый их дебетовой карте Tinkoff Black.

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

Создаём фрейм в Фигме и настраиваем сетку

Итак, приступим! Первое, что я сделала — зашла на страницу сайта Тинькофф и сделала скриншот. Это нужно, чтобы постоянно не возвращаться к веб-ресурсу, и референс всегда был перед глазами.

Как создать свой сайт

  1. Сделав скриншот, перетащите его с рабочего стола на рабочую область (серое поле) Фигмы.
  2. Далее нужно создать фрейм (рабочий слой). Для этого нажмите на инструмент Frame (горячая клавиша F) и мышкой нарисуйте на экране прямоугольник.

Вы можете настроить высоту и ширину фрейма в Фигме на глаз, используя ваш референс (Фигма подскажет, когда размеры совпадут). Или сделать это вручную.

Справа вы увидите меню. В полях W (ширина) и H (высота) введите нужные параметры. В нашем референсе ширина получилась 1440 px, высота — 1184 px.

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

Как работать в Фигме: настраиваем сетку

Автоматически в Фигме включается сетка в виде клеточки 10х10 px. С нашим референсом удобнее будет использовать сетку из колонок и строк. Создадим такую сетку.

  1. Начнём с колонок. Нажмите на строку с сеткой, и у вас откроется дополнительное меню. Повторите настройки со скриншота:
    Colums, Count (количество) — 12, Margin (внешние отступы) — 160, Gutter (отступы между колонками) — 10.

На нашем референсе мы видим, что у страницы достаточно большие отступы — 160 px. Это нужно для того, чтобы страница была адаптирована и под экраны с меньшим размером. Не только под мониторы ПК, но и под экраны маленьких ноутбуков, планшетов.

Сетка готова. Можно рисовать!

Как отключить возрастное ограничение на Яндекс Станции

ПРАВИЛЬНАЯ техника верхнего моста в русском бильярде

Вы можете в любое время отключить видимость сетки с помощью сочетания клавиш: Shift + ctrl + 4 (на Windows сочетание клавиш может немного отличаться). Включить видимость сетки можно этой же командой.

Рисуем прототип

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

  1. Возьмём инструмент рисования прямоугольников Rectangle. Он находится в верхнем меню или вызывается горячей клавишей R.
  2. Дальше всё просто: рисуем прямоугольники с помощью мыши, растягивая их по фрейму.

Ориентируйтесь на референс и на сетку. Подобрать нужные габариты вам поможет сама Фигма.

  1. Выровняйте кнопку по горизонтальному центру. Это можно сделать вручную (когда вы будете перетаскивать, Фигма подскажет, где центр) или с помощью автоматического выравнивания по центру.

На примере центральной кнопки, рассмотрим подробнее работу некоторых разделов бокового меню Фигмы, с которыми мы уже работали:

  • самая верхняя строка позволяет выравнивать элемент по краям или по центру фрейма в горизонтальной и вертикальной плоскостях;
  • чуть ниже знакомое меню с настройкой высоты и ширины, тут же можно настроить поворот элемента (иконка с градусами), скругления углов и точное положение элемента на фрейме (X и Y).

Вот такой прототип у меня получился. Я убрала сетку с помощью сочетания клавиш: Shift + ctrl + 4.

Как работать в Фигме: рисуем прототип

Работа с цветом в Фигма

Теперь давайте попробуем покрасить наши основные блоки в необходимые цвета. Это сделать также очень просто.

  1. Первый блок меню у нас светло серого оттенка. Чтобы задать нашему макету такой цвет, нажмите на нужный элемент.
  2. В боковом меню в разделе Fill тапните по строке с цветом. Откроется дополнительное меню.
  3. Возьмите из него инструмент пипетка и тапните по тому цвету на референсе, в который вы хотите покрасить ваш элемент.
  1. Также поступаем со следующими блоками.
  1. Мы видим, что второй блок в шапке сайта не просто окрашен в белый цвет, у него есть тень. Давайте нарисуем тень с помощью инструментов Фигмы. Нажмите на нужный элемент.
  2. Нажмите на «+» в разделе Effects.
  3. Тапните по строке Drop Shadow. Откроется дополнительное меню.
  4. Повторите настройки со скриншота. Смещение по оси Х — 0, по оси Y — 4. Blur — 10 и прозрачность — 10%.
Как музыку из вк перекинуть в Яндекс музыку через телефон

Мы подобрали тень, похожую на ту, что изображена в нашем референсе.

  1. Теперь посмотрим на наш баннер. Мы видим, что он не просто тёмно-серый. У него есть небольшой градиент. Чтобы повторить такой же градиент, окрасьте баннер в тёмно-серый (также берём пипетку и красим в цвет соответствующего блока с референса).
  2. В разделе Fill нажимаем на «+» и щёлкаем по новой строке. Вверху вы увидите панель работы с цветом. С помощью неё и инструмента Liner вы можете создать эффект градиента.

Добавляем картинки

На нашем референсе мы видим логотип, а также изображение карты Tinkoff Black на главном баннере. Самый простой способ добавить их в наш макет — сделать скриншоты с сайта и перетащить их в рабочую область (как мы делали в начале с референсом).

Как работать в Фигме

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

  • меню бургер (иконка в верхнем левом углу) — File — Place image;
  • плагин Unsplash и др.

Работа с кнопками

Теперь я расскажу вам, как сделать кнопки. На сайте Тинькофф мы видим, что некоторые кнопки цветные (как добавить цвет элементу, мы теперь знаем), а некоторые прозрачные. У всех кнопок есть небольшое скругление.

Остальные кнопки, я уверена, теперь вы сможете нарисовать сами. Единственное, обратим внимание на кнопки «Классические»/«Премиальные».

Они скруглены только с внешних сторон. Это можно сделать следующим образом:

  • поставьте два элемента рядом вплотную (обводка одного элемента должна заходить на обводку другого);
  • рядом с инструментом настройки скруглений нажмите кнопку Independent Corners — откроется дополнительное меню, где вы сможете задать скругление каждой стороны элемента отдельно.

Работа с текстом

Перейдём к текстовым элементам. В первую очередь нам нужно узнать шрифт, который использован на сайте Тинькофф. Для этого я использую плагин Fonts Ninja в браузере Chrome.

Как работать в Фигме: работа с текстом

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

Зайдём в код страницы сайта. Там обычно предлагаются альтернативные шрифты — используются в случае отсутствия/невозможности отображения основных. Нажмите в Chrome по странице сайта правой кнопкой мыши — Посмотреть код. Найдите в коде строку font.

Как работать в Фигме: работа с текстом

Итак, мы видим возможные шрифты и даже их размер. Давайте возьмём шрифт Roboto.

  1. Включите инструмент текст (буква T на вкладке в верхнем меню).
  2. Кликните мышкой по тому месту, куда хотите его вставить.
  3. Наберите необходимую фразу.
  4. Справа в меню вы увидите настройки, которые можно производить с текстом: шрифт, размер, выравнивание и другие.
  5. Поместите текст по центру кнопки. Можно сделать это вручную с помощью мыши (Фигма подскажет, где центр). Или можно нажать на кнопку, затем, зажав shift, нажать на текст и в боковом меню сверху выбрать выравнивание по центру по горизонтали и вертикали.
  6. В строке Fill назначьте тексту нужный цвет.
Как найти ютуб в Яндексе

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

Как работать в Фигме (Figma): создаём макет сайта с нуля

  1. Теперь увеличим трекинг. Это также делается в разделе Text, как вы можете видеть на скриншоте.

Вот, что у нас получилось в итоге:

Как работать в Фигме: работа с текстом

Рисуем иконки

Единственный элемент, который мы ещё не научились создавать — иконки. Мы видим на референсе жёлтую иконку с 0 возле надписи «Предпочтения по карте», иконки соцсетей и иконку с английским флагом.

  1. Возьмите инструмент Ellipse. Он находится под инструментом Rectangle. Можно включить рисование кругов также с помощью горячей клавиши О.
  2. Нарисуйте возле надписи круг 15 х 15 px. Покрасьте его в нужный цвет (как работать с размером и цветом элементов, мы уже знаем).
  1. Напишите на элементе 0 с помощью инструмента Text.
  1. Иконку с британским флагом создаём по тому же принципу с помощью круга. Нарисуйте круг 30 х 30 px.
  2. Подберите необходимую картинку с британским флагом и скопируйте её в буфер обмена.
  3. Нажмите на круг, а затем с помощью команды cmd + V (на Windows, вероятно, ctrl + V) вставьте изображение.

Есть и другие способы добавить изображение в элемент. Например, можно взять изображение с помощью меню бургер (иконка в верхнем левом углу) — File — Place image и добавить его в круг, тапнув по нему.

Как работать в Фигме: иконки

Добавляем иконки с помощью плагинов Фигма

Не обязательно прорисовывать все иконки вручную. Другие уже позаботились об этом и загрузили свои иконки в специальные плагины. Чтобы воспользоваться ими, нужно сначала установить плагин.

  1. Перейдите на главную страницу Фигмы (конка фигмы в самом верху).

Как работать в Фигме: добавляем плагин

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

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

Как работать в Фигме: добавляем иконку с помощью плагина

Итак, вот, что у меня вышло в итоге:

Как работать в Фигме

Ма научились делать с вами все необходимые элементы, которые понадобятся для создания копии странички сайта Тинькофф: кнопки, блоки, иконки, текст и т.д.

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

Также будет круто, если вы поделитесь результатом своей работы в комментариях

Источник

10 бесплатных онлайн-конструкторов форм для сбора заявок

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

Можно ли отправить заявление в фссп по электронной почте

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

Ознакомьтесь с некоторыми из самых популярных и универсальных вариантов ниже.

Google Forms: быстрый и универсальный

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

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

Wufoo: шаблоны форм для всех

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

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

JotForm: самый простой в использовании конструктор форм

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

EmailMeForm: профессиональные формы для вашего бизнеса

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

Typeform: Разговорный и великолепно разработанный

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

Какие еще сайты кроме алиэкспресс

FormSite: отлично подходит для обработки платежей

FormSite — это хорошая альтернатива, если вы серьезно относитесь к использованию вашей формы для сбора не только важной пользовательской информации, но и платежей. Его функция оформления заказа позволяет вам совершать платежные транзакции через PayPal и Authorize.net, в качестве альтернативы принимать кредитные карты и чеки. Вы можете создать свою форму в соответствии с вашим стилем, добавить несколько страниц, встроить форму на свой сайт, вычислить значения или оценки с использованием полей и многое другое.

Cognito Forms: лучшие функции бесплатной формы

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

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

123ContactForm: получите полный контроль над своей формой

123ContactForm стремится предоставлять наиболее удобные веб-и мобильные формы, которые можно автоматизировать и использовать для обработки платежей. Вы можете использовать его простой инструмент перетаскивания, чтобы вставить поле в форму, выбрать электронное письмо с уведомлением и опубликовать форму в любом месте онлайн.Формы можно интегрировать и автоматизировать с другими популярными сервисами, такими как Salesforce, MailChimp или Google Drive, а платежи можно принимать через PayPal, Authorize.net или Stripe.

Ninja Forms: идеально подходит для WordPress сайтов

Если вы пользуетесь веб-сайтом WordPress и хотите встроить формы в свои веб-страницы, то вам стоит попробовать Ninja Forms — бесплатный плагин для создания форм с перетаскиванием, созданный специально для пользователей WordPress.

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

Zoho: конструктор форм для бизнеса

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

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

Источник
Рейтинг
Загрузка ...