Как сделать макет сайта самостоятельно

Зачем нужен макет сайта

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

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

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

Макет во всем этом процессе помогает:

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

Графические редакторы

• DAZ 3D — 3D моделирование. Регистрируетесь и скачиваете дескопное приложение.
• Gimp – бесплатный аналог фотошопа. Позволяет настроить модульную сетку, создать направляющие, работать со слоями, добавлять эффекты и пр. Является неплохой бесплатной заменой фотошопу. Является расширяемым — можно скачать дополнительные плагины.
• Blender — 3D моделирование, анимация, рендеринг, звук, видео. Позволяет создавать игры. Быстро развивающийся редактор, очень популярен.
• Aviary – онлайн сервис редактирования фотографий. Много возможностей, в том числе «Эффект красных глаз», изменение размера и пр.
• Pixlr – онлайн редактор фотографий и редактор графики отдельно. Последний похож на фотошоп. Сохраняет на диск.
• BeFunky – онлайн сервис редактирования фотографий. Эффекты, рамки, графика, ретушь и многое другое. Есть русскоязычный интерфейс.
• Inkscape – полноценный редактор векторной графики с открытым исходным кодом. Поддерживает возможности формата SVG — работу с фигурами, контурами, текстом, векторизацией растровой графики и др. Кроме обработки векторных изображений, позволяет создать шаблон сайта и нарезать его – модульная сетка присутствует. Дает возможность рисовать фоны, баннеры, векторные логотипы и др.
• IconEdit2 – очень простая программа для рисования иконок. Имеет фильтры. Позволяет экспортировать изображение для Android и Apple. Можно настраивать глубину цвета, поворачивать и корректировать иконку. Поддерживает полупрозрачность, несколько изображений в один файл ICO и сглаживание во всех инструментах рисования.
• Falco GIF Animator — программа для создания покадровой анимации и анимированных иконок. На ресурсе можно скачать много разных программ.
• Krita – профессиональный десктопный редактор с открытым исходным кодом. Доступен для разных ОС.
• Boxy-SVG — редактор векторной графики, подобный Adobe Illustrator, Sketch и Inkscape.
• Photopos — многофункциональная программа, с функциями редактора фотографий, графического редактора и приложения для создания компьютерной графики.
• 5Dfly — бесплатное приложение пакетной обработки фотографий. Умеет создавать слайд-шоу под PowerPoint. Отдельно можно скачать конвертер в PDF.
• PaintStar — бесплатный редактор изображений. Интерфейс очень похож на Paint, но возможностей больше. Слои, например.
• PhotoScape – простой редактор фотографий. Имеет функции настройки яркости и цвета, баланс белого, коррекция подсветки, рамки, воздушные шары, мозаичный режим, добавление текста, рисование изображений, обрезка, фильтры, удаление эффекта красных глаз, расцветка, кисть, клон-марка, кисть эффекта и пр.
• Pablo — онлайн редактор, создающий изображения для социальных сетей. Можно загрузить изображение, посмотреть его для разных устройств, наложить эффект и и текст.
• Internet Marketing Ninjas – онлайн сервис для быстрой обрезки изображений. Очень удобно, если надо сделать быстро.
• Meme Generator — генератор мемов. Можно выбрать картинку, создать подпись или сгенерировать ее автоматически. Не скачивается, только публикуется в соцсетях.

Создание макета сайта: что стоит запомнить

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

Создание макета идет по следующим этапам:

1. Техзадание
2. Отрисовка блочной схемы — прототипа
3. Подбор цветов
4. Подбор шрифтов
5. Отрисовка макета
6. Гайд по макету для верстальщика

Каких ошибок стоит избегать, чтобы макет сайта получился красивым и его было легко сверстать:

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

Онлайн-конструктор сайтов и макетов страниц

Сервис называется imcreator.com.

1. 1.Перейдя на главную страницу сервиса, нажимаем на кнопку «Start building your site»

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

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

4. 4.Далее, вы можете его просмотреть в окне предпросмотра, где показана главная страница, цветовая схема, и ниже показаны все страницы, которые вы можете создавать при помощи данного макета.

5. 5.После того, как вы определились, нажимаем на зеленый карандашик с надписью «EDIT»

6. 6.Далее нам предлагается просмотреть обучающее видео. Вы можете его просмотреть и после этого нажить на кнопку «Start editing»
7. 7.А далее у нас откроется этот же макет с возможностью его редактирования.

Шаблоны веб-сайтов от Nicepage

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

Sketch

«Лёгкий» и компактный
Sketch занимает минимум места на диске, так как не использует собственные средства для отрисовки контента, а опирается на встроенные инструменты операционной системы. Этот принцип работы обеспечивает еще и высокую скорость запуска и открытия файлов.

Есть всё для дизайна интерфейсов

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

Свободная рабочая поверхность

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

Кросс-проектная интеграция

Площадкой предусмотрена возможность создания библиотек для передачи элементов между несколькими макетами Sketch.

Экспорт графики

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

Плагины

Варианты плагинов для Sketch покрывают практически все запросы. Они объединены в библиотеку, и пользователю достаточно скачать Sketch toolbox.

Интеграции

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

Сообщество

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

Недостатки:

• Реализован только как онлайн-программа для Mac OS, не имеет версии десктоп;
• Проект можно передать только команде в Sketch Cloud;
• Нет возможности создавать постоянные цветовые палитры;
• Отсутствует прямой редактор CSS кода;
• Нет встроенной системы комментариев;
• Стартовая цена $99. Действует ежегодное продление лицензии: поддержка обновлений действительна в течение года после покупки. Бесплатной версии программы нет, но есть возможность подключения 30-ти дневного пробного периода.
• Совместная работа доступна только в более дорогом тарифе.

Сохранение страницы сайта и загрузка на хостинг

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

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

1. 1.В правом верхнем углу нажимаем на зеленую кнопку «Publish».

2. 2.Регистрируемся в сервисе или авторизируемся если зарегистрированы.

3. 3.После заполнения формы регистрации вам предлагается сохранить данный проект под определенным именем. Вводим имя проекта и нажимаем на кнопку «Save».

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

Для этого переходим по этой ссылке:

И теперь мы можем сохранить созданную страницу на компьютер, а затем загрузить к себе на хостинг

Единственное, при сохранении нужно обратить внимание на некоторые моменты

Я буду сохранять страницу в браузере Opera, здесь сохранение происходит следующим образом:

1. 1.В меню «Файл» выбираем пункт «Страница» => «Сохранить как».
2. 2.В поле «Имя» у вас обязательно должно стоять на английском index. Иначе, если вы сохраните с каким-то другим не понятным названием, то при выгрузке данной страницы в папку с доменом, хостинг может ее не открыть.
3. 3.Тип файла выбираем «Страница полностью».
4. 4.Нажимаем «Сохранить».

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

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

Программы по работе с фото и видео для рекламы в сторис

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

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

Crello

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

Выбираете предустановленный вариант и переходите непосредственно в сам редактор

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

Еще немного о работе с макетами в Crello:

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

Доступно мобильное приложение для Андроид и Apple. Редактор интегрирован в SMMplanner.

Snappa

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

Поддерживает работу с популярными форматами изображений и видео

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

Но есть и минус, который может отпугнуть специалиста при выборе ПО: у Snappa нет русской версии. Но встроенный Google-переводчик решает эту проблему.

Canva

Популярные и востребованные SMM-щиками онлайн-сервис и приложение для телефона.

Доступны сотни макетов и множество графики для редактирования фото и видео

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

Так же как и Crello, удобно интегрирован в сервис постинга SMMplanner и выгодно дополняет его собственный редактор.

Kapwing

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

Не самый популярный и востребованный ресурс

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

• изменение размеров, угла поворота, скорости, звука;
• конвертация и кадрирование файлов;
• создание стоп-кадров из видео и наоборот, анимирование изображений;
• гибкое комбинирование аудио, текста, изображений;
• нестандартные готовые макеты и шаблоны.

Всем любителям командной работы Kapwing должен приглянуться – можно создать ссылку на проект и поделиться со всеми желающими.

Минус тоже есть, как и у большинства интересных решений: как и Snappa, сервис не имеет русской локализации.

Адаптивные шаблоны CMS и HTML

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

Описание

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

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

Сохранять целостность, которая достигается с помощью:

• линий, форм;
• проставленных в нужных местах, акцентов;
• размера;
• текстуры;
• целостности элементов.

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

На что обратить внимание при создании рекламных макетов для Инстаграма?

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

Но есть еще несколько моментов, про которые новичкам лучше не забывать.

Говорите с аудиторией на понятном языке

Кейсбук про сторителлинг и архетипы, да еще и лента с пакетом сторис – позволят любому эксперту вырасти в «хз» сколько раз

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

Текст должен быть читабельным

Уверены, что фигурный или вертикальный текст – действительно лучшее решение?

Казалось бы, простейший тезис, но как часто я сталкиваюсь с обратным. Если у вас есть максимум 15 секунд, то выбирайте не эффектность, а эффективность.

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

Даже банальное «Подробнее» будет более уместным

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

Не перегружайте макет

Вот если бы еще и четвертый раз написать про таргетированную рекламу, тогда бы точно было идеально…

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

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

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

Виды макетов

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

Такой макет называется с фиксированной шириной.

Он имеет определенный минус – у читателей с устройств, размер которых не соответствует  разрешению 600-800 пикселей, будут возникать проблемы с ознакомлением материала, размещенного на данном ресурсе. Однако, вы должны понимать, что в таком случае, посетители с компьютера будут довольны сайтом.

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

Если это вам не подходит, то попробуйте остановиться на адаптивном резиновом макете. Он отличается тем, что в настройках не задается ширина файла (можно просто поставить 100% и наслаждаться тем, что шаблон займет все выделяемое для него место). Учитывая этот факт, работать с таким макетом довольно сложно. Почему? Да потому, что мы люди, жадные до свободного места (нам хочется заполнить все пространство), а результатом этого становится перегруженность онлайн- ресурса.

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

InVision Studio

Studio — платформа от InVision для проектирования графических интерфейсов. Выпускалась как дополнение к Photoshop, но благодаря нескольких удачным фишкам пользователи уже давно знают её как самостоятельный сервис.

Анимация и интерактивные прототипы: именно функционал работы с анимацией и прототипами на заре сервиса помог ему выйти из статуса «дополнения» в отдельную площадку. В InVision дизайнер может анимировать статичные изображения без написания кода. А создание переходов в прототипе требует минимального количества настроек со стороны дизайнера.

Импорт скетч-файлов

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

Вложенные компоненты друг в друга:

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

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

Недостатки:

• Отсутствие онлайн-версии программы. Необходима установка декстопа как на Windows, так и на Mac OS;
• Отсутствие общих стилей;
• Отсутствие библиотеки компонентов для разных проектов;
• Не реализован многопользовательский режим, для командного редактирования проекта;
• Могут возникнуть проблемы с публикацией проекта, процесс идёт долго; при большом количестве элементов программа может «подтормаживать» или отключаться.
• В бесплатной версии есть возможность работы только над 1 проектом. Стоимость платных версий стартует с $15.

Флексбокс

Классика завтрашнего дня

Мы будем использовать флексбокс, чтобы создать раздел сайта «Бокс-офис«. Вот HTML-код:

<div id="boxoffice">
    <ul class="flex-container">
        <li class="item first">Cinderella: $67.9M</li>
        <li class="item second">Run All Night: $11.0M</li>
        <li class="item third">Kingsman: The Secret Service: $6.2M</li>
        <li class="item">Focus: $5.7M</li>
        <li class="item">Chappie: $5.7M</li>
        <li class="item">McFarland USA: $3.6M</li>
        <li class="item">The DUFF: $2.9M</li>
        <li class="item">American Sniper: $2.8M</li>
    </ul>
</div>

Вот CSS-код для контейнера “boxoffice”:

#boxoffice {
    width: 780px;
    height: 500px;
    background-image: url(../images/box_office_cropped.jpg);
    background-repeat: cover;
    border-radius: 5px;
    padding: 20px;
}

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

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

По умолчанию, главная ось горизонтальная, поэтому элементы будут растягиваться в ряд. Для изменения основной оси мы можем использовать свойство flex-direction. Оно может принимать следующие значения: row, row-reverse, column и column-reverse. Мы будем использовать значение column. Давайте также добавим свойство height. Для чего это нужно, вы поймете чуть позже:

flex-container {
    height: 300px;
    display: flex;
    flex-direction: column;
}

Вот как выглядит наш небольшой бокс-офис:

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

Флексбокс также дает возможность вносить изменения в содержимое без изменения HTML-файла. Например, если вы хотите поменять расположение элементов на противоположное, вы можете изменить значение flex-direction на columns-reverse. Это изменит направление флексбокса на противоположное. Но вам нужно будет также изменить порядок расположения элементов внутри контейнера.

Для этого мы используем свойство justify-content. Доступные для него значения: flex-start, flex-end, center, space-between и space-around. Для него нужно установить значение justify-content, которое эквивалентно flex-end.

Вот наш код:

.flex-container {
    height: 300px;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
}

И вот каким образом отразились эти изменения:

Также можно перемещать элементы вдоль поперечной оси. Для этого используется свойство align-items. Вы можете задать для него следующие значения: flex-start, flex-end, center, baseline или stretch.

Чтобы использовать его, добавьте свойство в селектор флексбокса:

.flex-container {
    align-items: flex-end;
}

Все элементы сместятся к правому краю:

Есть еще одно полезное свойство — flex-wrap. Представьте, что бокс-офис быстро увеличивается. Что произойдет, если он станет больше, чем контейнер? Ничего плохого, если вы используете свойство flex-wrap.

Попробуйте добавить следующий код:

.flex-container {
    height: 300px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

И вот, что в результате получится:

Как видите, элементы теперь укладываются в несколько столбцов. Значение по умолчанию для этого свойства – nowrap. При его применении элементы будут располагаться в один столбец (или строку — это зависит от значения flex-direction). Можно использовать значение wrap-reverse. Тогда элементы будут располагаться в обратном порядке.

Есть много полезных свойств. С их помощью вы можете изменять параметры каждого отдельно взятого элемента контейнера. Например, свойство order позволяет изменять порядок размещения элементов без необходимости вносить изменения в HTML-код.

Как создать макет (мокап) для презентации сайта?

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

Вы помните опыт Mcdonald’s? Братья Ричард и Морис Макдональды нарисовали на полу макет своей кухни, схематично обозначили порядок всех предметов и заставили своих сотрудников двигаться так, как будто они находятся на настоящей кухне. Таким образом, они смогли выявить оптимальную траекторию для каждого работника в соответствии с выполняемыми им задачами. Это был первый случай, когда дизайн помог сократить время приготовления пищи с 10 минут до 30 секунд.

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

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

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

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

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

После того, как эта информация будет собрана, команда разработчиков начнет планирование. Чем тщательнее они это сделают, тем лучше для процесса разработки. Хорошо продуманные макеты (мокапы) сайта уменьшают конечную стоимость разработки продукта.

На этом этапе команда должна ответить на вопрос о том, будет ли дизайн адаптивным, плоским или выполненным в стиле material?

Другой важный вопрос, который должен быть спланирован заранее — как будет выглядеть мобильная версия сайта. Какой контент будет отображаться на мобильном устройстве, а какой не будет?

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

Основные элементы разработки макета

Стиль

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

Логотип

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

Структура

Используйте сетку, чтобы сделать контент заметным и простым. Хорошо структурированную информацию воспринимать гораздо легче.

Элементы призыва к действию

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

Выбор макета

Современный дизайн предлагает три основных вида макетов для размещения важных элементов в соответствии с тем, как пользователь просматривает веб-страницу. Вы можете выбирать между Z-шаблоном, F-шаблоном и структурой диаграммы Гутенберга. Ваш выбор должен основываться на типе сайта, который вы создаете, а также вашем контенте.

Рецепт изготовления макета

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

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

Когда все готово, можно приступать к творчеству:

1. Создаете файл (web с определенными размерами).
2. Выстраиваете направляющие.
3. Выбираете фон (для начала я рекомендую сделать белым, а вот уже в конце – добавить красок).
4. Используйте линейку для разлиновки созданного пространства. Вот здесь-то вам и понадобится план будущего сайта.
5. Вставляйте логотип, иконки социальных сетей, заголовки меню и т.д. Только не забывайте работать аккуратно и периодически производить сохранение наработанного материала.
6. Любите свои идеи, фиксируйте их на бумаге и тогда вы сможете создать не только уникальный, но и полезный, красочный и многофункциональный ресурс.

Для тех, кто хочет создать блог, получить пошаговое руководство по созданию макета и научиться зарабатывать на своей детище, я советую записаться к Александру Борисову в «Школу блоггеров»

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

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

У вас остались вопросы по рассматриваемой теме? Задайте их мне, оставив комментарий под обзором. Если вы хотите поделиться полученными знаниями со своими коллегами, то можете смело кликать по клавишам социальных сетей, находящимися чуть ниже. Совершив всего пару кликов, вы заметите в своей ленте новостей ссылку на мой блог.

На этом все, буду рада встретиться с вами вновь, поэтому говорю вам: «До свидания, до новых встреч мой дорогой читатель».

Макеты на основе DIV-элементов

В течение долгого времени веб-дизайнеры используют элементы <div> для группировки элементов на странице (например, оформирующих шапку сайта, статьи, футер или боковую панель). Таким образом разработчики, как правило, помещают эти основные разделы страницы внутри элементов <div> и используют атрибуты class или id, чтобы указать назначение конкретной части страницы.

Ниже приведена визуализация макета с использованием тегов <div> для группировки элементов на странице:

<body>
<div id=»page»>
<div=»header»>

<div id=»sidebar»>
<div id=»content»>
<div id=»footer»>

Пример: Макет на основе DIV-элементов

• Результат
• HTML-код
• Попробуй сам »

Главное меню HTML Элементы HTML Атрибуты HTML Таблицы …	Основной контент…
Copyright 2017 wm-school.ru

Adobe XD

Многопользовательский режим работы

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

Режим совместного использования (Share mode) позволит вам передавать проект заинтересованным лицам, управляя правами доступа: есть функция защиты паролем. Использование артбордов будет легко отслеживать благодаря возможности уникальных имён для каждой ссылки.

Создание состояний

Для каждого элемента интерфейса теперь можно задать несколько вариативных состояний, рассчитанных на различные типы взаимодействия с пользователем (Hover, Pressed, Disabled ,Success.), благодаря этому дизайнеру не нужно прописывать несколько компонентов для разных сценариев, а включить варианты в набор состояний компонента.

Повтор сетки

Облегчить и ускорить работу над проектом поможет опция повтора сетки (активируется сочетанием Ctrl + r), позволяющая копировать группу объектов или целый слой.

Auto-animate

Auto-animate у Adobe XD отличается высокой скоростью и легкостью настройки, при этом еще нет возможности точного управления.

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

Плагины

Пользователи могут самостоятельно писать плагины для Adobe XD на JavaScript, HTML и CSS. Кроме того, многие плагины Sketch были перенесены разработчиками в Adobe XD.

Совместимость с другими инструментами

Adobe XD создан на открытой платформе и совместим со многими другими инструментамине только из Adobe CC.

Импорт Sketch

К функции импорта файлов из Sketch добавлена возможность конвертировать существующие библиотеки Sketch в облачные документы XD, чтобы интегрировать Sketch Libraries без конфликтов.

Недостатки

• Нет возможности тестировать прототипы на устройствах Android;
• Нет доступа к программе без подписки (платной) в Adobe Creative Cloud;
• Нет встроенного управления CSS кодом для передачи разработчикам;
• Недостаточно настроек при работе с текстом;
• Некоммерческая версия имеет жесткие ограничения: доступен только один активный общий проект, с которым взаимодействуют 1-2 редактора. Подключается одна активная общая ссылка.