0
(0)
Примерное время на чтение статьи: 3 минуты
  1. Главная
  2. /
  3. Создание сайта
  4. /
  5. Figma — один из инструментов создания сайта

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

1.Создание сайта — это трудоемкий процесс. Можно выделить три этапа создания сайта:

  • Планирование
  • Дизайн сайта
  • Разработка макета

Планирование в свою очередь также можно разделить на подразделы:

  1. Создание идеи
  2. Разработка структуры проекта
  3. Проработка макета проекта

Разработали структуру проекта ( Определили тему и направление, проработали нужный материал для публикаций, продумали разделы для размещения материала).

Проработали макет проекта (создали набросок на бумаге структуры будущего сайта, расположили блоки, определились с графикой и другими элементами дизайна).

Теперь можно приступать к подробной прорисовке и расположению всех элементов сайта и представить как будет выглядеть будущий сайт. И в этом нам поможет Figma — графический редактор.

2. Определение Figma

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

И так, что же дает нам Figma по своему функционалу. И как выглядит изнутри графический помощник.

3. Для чего же нужна Figma.

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

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

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

Возможно вам будет интересно узнать как заказать разработку сайта под ключ.

так выглядит главная страница сайта
на мобильной версии

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

4. Модульная сетка это вертикальное разделение страниц на равные колонки при разработке дизайна макета.

Модульная сетка может делить страницу на 12, 16 и 24 колонки. Все зависит от того, как и каким образом будут располагаться элементы макета на страницах будущего сайта.

макет будущего сайта с прорисовкой расположенных деталей и вертикальной модульной сеткой.

Конечно на макете обозначено только примерное расположение элементов, текстов и изображений (правки вносились еще несколько раз). И в итоге, перед переносом макета на Tilda, мы можем увидеть что получается.

Для протопита сайта, были пободраны: 1. Цветовые решения; 2. Этапы работ также прописаны; 3. Разработана цветовая палитра для фотостудий. Вся работа по созданию прототипа велась согласно Структуре (техническому заданию).

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

Бонусом  при создании сайта для заказчика может стать покупка доменного имени сайта и годовая оплата хостинга.

И результат не заставит себя ждать. Работа над сайтом завершена. Сайт адаптирован под все версии (компьютер, планшет, мобильный телефон).

Так выглядит завершенный сайт для фотостудии «Leonardo» в Москве

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

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 0 / 5. Количество оценок: 0

Оценок пока нет. Поставьте оценку первым.