5.0 0.5 5 17

Как создать макет?

Оксана Логунова
Оксана Логунова
23 января 2013
2873
Оцените:
Как создать макет?

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

Типы макетов сайтов

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

Резиновые

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

Фиксированные

Само название макета характеризует его суть. Основа структуры является строго определенной. Фиксируется финальное разрешение, зачастую в пикселях. Среднее значение: 960 – 1000. Это – один из наиболее ранних видов макетов, ориентированный на определенное расширение мониторов, которое на сегодняшний день не всегда используется. Поэтому это довольно сложный и неудобный способ создания прототипа сайта, так как усложняет работу со скриптами.

Эластичные

В отличие от аналогичного «резинового» макета, данный может изменять размеры основных полей и всех элементов пропорционально. Задавая основными величинами так называемые «относительные единицы», можно добиться эффекта масштабирования. Тогда размер изменит и контент самого сайта.

Адаптивные

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

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

Как создать макет правильно

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

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

Онлайн-проекты для создания макетов

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

  • Pencil Project. Это продукт от Firefox, напрямую связанный с браузером. Обладает невероятным функционалом. Создать макет не составит труда, так как программа поддерживает импорт файлов и различных форматов HTML.
  • Photoshare. Это достаточно портативная программа, позволяющая создавать макеты практически любой сложности. Набором функций не отличается от себе подобных, при этом имеет очень удобный и простой интерфейс.
  • Mockingbird. Это наиболее распространенный инструмент проектирования сайтов. Позволяет вносить изменения прямо в основу макета и сразу видеть наработки. Имеет коммьюнити, что позволяет видеть идеи других.
  • Hot Gloo. Это наиболее полная программа для создания макетов. Невероятное количество функций, включая изменения в основе структуры и свойств объектов. Легко меняет расположение элементов макета с возможностью сохранения исходника. Это платный софт, для пользования которым будет необходимо заплатить до 48$ в месяц.
  • Balsamiq Mockups. Это продукт от студии Adobe. Именно благодаря этому программа разработана на различных операционных системах и прекрасно работает помимо всех версий Windows в Linux и MAC OS. Это наиболее подходящий инструмент для вебмастеров, так как в альтернативных ОС работает большее количество разработчиков. Полученный макет сохраняется в любом подходящем формате.
  • Creately. Практически единственный инструмент с русскоязычным интерфейсом. Такой вариант программы является бесплатным и, к сожалению, имеет наименьшее количество полезных функций. Но вполне подходит для обозначения основы макета, на базе которой можно работать с помощью других инструментов или дорабатывать «вручную».
  • MockFlow - это наилучший на сегодняшний день инструмент для создания прототипов сайта. Программа оснащена разнообразными шаблонами, что в отличие от других, позволяет уменьшить время создания структуры. Готовые позиции многих элементов имеют большое разнообразие, плюс огромное количество полезных функций. Софт имеет две версии: бесплатную и платную. Платная стоит 5$ в месяц и открывает еще ряд расширенных функций. Макеты сохраняются в различных форматах и имеют функцию импорта.

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

Подписывайтесь на наши группы в социальных сетях - смешные статьи, картинки и факты!