Меню

Как настроить макет страницы



Изменение макета страницы

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

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

Изменение размера слайда

На вкладке «Конструктор» в группе «Настроить» справа нажмите кнопку «Размер слайда».

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

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

Нажмите кнопку ОК.

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

Примечание: При выборе варианта «Развернуть» часть содержимого может выйти за границы печатного поля.

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

Изменение ориентации слайдов

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

Примечание: Изменить ориентацию можно только для всей презентации.

На вкладке Дизайн в группе Настроить нажмите кнопку Размер слайда.

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

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

Примечание: Вы также можете сменить ориентацию заметок, раздаточных материалов и структуры.

Нажмите кнопку ОК.

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

Примечание: При выборе варианта «Развернуть» часть содержимого может выйти за границы слайда.

Источник

Как сделать макет сайта, чтобы упростить жизнь дизайнеру и разработчику

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

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

Что такое макет для сайта?

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

Чтобы прояснить термины макет, Wireframe и прототип, представьте, что они являются шагами к конечному продукту.

Макет в процессе разработки продукта

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

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

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

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

Макет для сайта, зачем он нужен?

Конечно, когда вы разрабатываете продукт, у вас в любом случае будет Wireframe . Прототип — это по желанию, однако макет веб-дизайна должен создаваться в обязательном порядке. Для чего? Давайте зададимся следующим вопросом — как создать макет сайта и получить преимущества, которые он дает дизайнерам и владельцам продукта.

Разработка макета сайта — преимущества

С помощью макета дизайна сайта дизайнеры могут:

Обнаружить возможные проблемы на раннем этапе

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

Читайте также:  Как настроить параметры загрузки windows 10

Предложить варианты на выбор

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

Легко донести свое видение до клиента

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

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

Привлечение инвесторов

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

Макет в качестве руководства

Когда клиент видит страницу сайта « Макет будущего продукта », и, если она ему нравится, он понимает, как будет функционировать весь продукт. Теперь это его точка отсчета, поэтому нет необходимости изменять и добавлять что-либо.

Простое внесение изменений

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Создание макета сайта — какие шаги нужно продумать

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

Читайте также:  Как настроить часы casio aq 190w

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

Стиль

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

Логотип

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

Структура

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

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

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

Выбор макета

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

Типичные ошибки при создании макета веб-страницы

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

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

Ошибка макета — слишком много элементов

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

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

Ошибка макета — неправильные цвета

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

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

Ошибка макета — нечитаемый текст

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

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

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

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

Однако, после того как вы это сделаете, подумайте, действительно ли вам нужны все использованные элементы? Является ли логотип компании заметным? Легко ли читается текст? Работает ли дизайн на разных устройствах с разным разрешением так, как вам нужно?

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

Источник

Макет сайта: как сделать дизайн и передать исходники верстальщику

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

Читайте также:  Хуавей y8p как настроить бесконтактную оплату

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

Зачем приводить всё в порядок

Создание сайта — трудоёмкий процесс, потому что надо не только продумать его логику и разработать стиль, но ещё сверстать и запрограммировать страницу.

Иногда дизайнер рисует хороший макет, а после вёрстки качество заметно падает:

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

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

Пишет про дизайн в Skillbox. Рисует макеты и верстает страницы для клиентов.

Для чего нужен макет

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

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

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

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

Правила создания макета

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

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

Обычные ошибки дизайнера:

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

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

1. Договоритесь о формате файлов

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

Популярный редактор — Adobe Photoshop. Это универсальный инструмент для работы с любой графикой: фотографы обрабатывают там снимки, иллюстраторы занимаются рисунками, а веб-дизайнеры делают макеты. Файл, в который сохраняется макет в Photoshop, имеет расширение .psd. Его отправляют разработчикам как PSD-макет для сайта.

Photoshop — универсальный редактор, и поэтому его довольно непросто освоить. Чтобы не тратить много времени на изучение функций, можно использовать новое поколение программ, предназначенных специально для веб-дизайна: Adobe XD, Figma, Sketch.

Некоторые дизайнеры рисуют макеты в других редакторах. Кто-то пользуется Adobe Illustrator или Adobe InDesign.

Перед тем как выбрать программу для создания макетов, поговорите с верстальщиком. Удобно ли ему будет пользоваться Photoshop или лучше нарисовать всё в Sketch? Или он пользуется Zeplin, поэтому неважно, в какой программе вы рисуете?

2. Следуйте требованиям интерактивного дизайна

Создавайте макет по правилам. Это упростит работу над внешним видом и облегчит процесс вёрстки.

  • Выберите цветовую модель RGB перед созданием макета. Это стандарт для мониторов и экранов.
  • Пользуйтесь сеткой, чтобы выравнивать контент внутри макета.
  • Не увеличивайте маленькие картинки.
  • Изменяйте размер изображений с зажатой клавишей Shift, чтобы сохранять пропорции.
  • Если нужен наклонный или жирный текст, выбирайте одно из начертаний шрифта. Не пользуйтесь псевдостилями, чтобы изменить внешний вид букв в Photoshop и других редакторах.

3. Избавляйтесь от дробных расстояний

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

4. Наведите порядок в слоях и артбордах

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

Чтобы создать порядок в слоях:

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

Источник