Требования к дизайн-макетам сайтов | Студия Флаг
Маша Радионова
Опубликовано: 17 Апр 2018
Вернуться в блогБыстрее и дешевле работать с правильно собранными дизайн-макетами, поэтому мы подготовили требования, которые помогут дизайнеру сделать макеты удобными для верстки, соответственно сэкономить время и деньги.
Основное
- Важно. Исходник в Figma (предпочтительно) или в фотошопе (psd).
- У всех слоев должны быть человеко-понятные имена и каждый элемент должен находиться в отдельном слое.
- Организовывать слои по папкам, делать человеко-понятную структуру (например, Header).
- Удалять все ненужное, если оно нигде не используется, а не просто скрывать слои.
- Дизайн страницы должен быть с максимально реальным наполнением, то есть все тексты и картинки должны быть реальными и настоящими.
- Если данных нет или они не в полном объеме, то необходимо прикидывать что будет, если текста будет больше/меньше, больше/меньше элементов или картинки будут не того формата (соотношения длина/ширина).
- Типизируйте все объекты на макете. Если это заголовок Open Sans 1.2em, то пусть он везде будет Open Sans 1.2em. Аналогично поступите с кнопками, абзацами, интерлиньяжем и отступами. Мы не говорим, что всё должно выглядеть одинаково — нет. Вы должны понимать, что чем больше у вас типизированных объектов, тем проще верстальщику с ними работать.
- Оставляйте комментарии для элементов, поведение которых сложно передать статическим изображением.
- Макет .psd не должен весить больше 100 Мб.
Сетка, размеры, ширина контента
- Ширина макета (не контентной области) должна быть 1920px или 2560px.
- Минимальная ширина контентной (информационной) области — 1240 px (для десктопа).
- Максимальная высота для области контента (если блоки сайта делаются экранами) 700 px, включая отступы.
Изображения и иконки
- Изображения в фигме выносить на отдельный слой и сверху накладывать эффекты, чтобы можно было экспортировать исходник изображения.
- Стараться не делать больших растровых изображений, они утяжеляют страницу.
- Изображения, которые можно сделать в векторе — делать в векторе.
- Иконки должны быть в векторном формате (svg).
Адаптив и ретина
- Если требуется адаптивная (респонсивная) верстка, нужны макеты для реперных точек и комментарии по поведению верстки между этими точками, например:
— 320—480px
— 480—1024px
— 1024—2520px - Для ретины всё просто: все, что можно — делаем в svg, если для изображения такой возможности нет — нужны иконки и картинки в два раза больше чем они есть. Зашить в исходники большие картинки сразу. Например, если в макете иконка у кнопки 100х100 пикселей, то нам ее необходимо предоставить 200х200 пикселей под ретину.
Styleguide или UI KIT
- Нарисовать активные состояния элементов (меню, кнопки, поля форм и тд):
— hover (наведение)
— focus/active (клик)
— preloader (для ajax-кнопок) - Нарисовать как будут выглядеть стандартные элементы форматирования текста: параграф, абзац, заголовки с 1 по 4 уровень, маркированный список, нумерованный список, подчеркнутый текст (ссылка), жирный, курсив и др.
- Обязательно изобразить все всплывающие окна, прелоадеры, всплывающие меню, информационные сообщения, валидации в формах и прочие эффекты.
- Параметр прозрачности задавать только для тех элементов страницы, которые действительно должны быть частично прозрачными. Не использовать параметр прозрачности для задания цвета заливки элементов, которые должны быть непрозрачными на странице.
Тексты и шрифты
- Использовать «безопасные» шрифты предустановленные в Windows, подробнее тут. При необходимости использовать нестандартные, указывать запасные безопасные.
- Если используются кастомные шрифты — сократить их количество и количество начертаний до минимально необходимого.
- Сглаживание шрифтов всегда должно быть отключено.
- Шрифты можно выбрать на сайте. Их можно с легкостью использовать и подключать на сайтах.
- Шрифт должен быть бесплатным или должна быть приобретена лицензия на его использование.
Их можно с легкостью использовать и подключать на сайтах.Комплект для верстки
- Макет в фигме
- Шрифты
- favicon в формате .svg
Будем рады вашим комментариям и вопросам!
Последние записи блога
Please enable JavaScript to view the comments powered by Disqus.
Делаем грамотный макет сайта / Sandbox / Habr
Вместо вступления
Любой макет создается с учетом определенных технических требований. Для макетов печатных материалов и макетов для сайтов они совершено разные. Многие начинающие дизайнеры не учитывают это и начинают творить, что душе угодно.Тезисы
Сначала я изложу основные тезисы.
Многие из них претендуют на труды небезызвестного персонажа по кличке K. O., но тем не менее, не все об этом знают.- Верстают в программах для верстки
- Правильно создайте документ
- Используйте сетку
- Используйте функционал шаблонизирования
- Учитывайте не статичность сайтов
- Вы работаете с рыбой, реальные тексты будут другие
- Подготовите материалы для верстки
Верстают в программах для верстки
Я часто слышу о том, что дизайн пытаются делать в photoshop’e.Мне сложно понять откуда взялась эта тенденция. Во всех профильных вузах (ну на сколько я знаю) раскладывают все верно:
- Для дизайна есть InDesign (ну или QuarkXPress).
- Для рисования есть Illustrator (ну или CorelDRAW).
- Для редактирования фотографий есть Photoshop. (ну Gimp и еще миллион программ). Ну и только в веб-дизайне он еще используется для сохранения картинок.
Одна из моих теорий на этот счет, это незнание заказчика. Думаю, что все рисуется в photoshop’e заказчик говорит «Мне нужен макет в psd, завтра в 6:34 и что бы от него пахло настоящим дизайном».
Не бойтесь объяснить заказчику, что макеты делаются не в photoshop’e и завтра ровно в 6:34 он получит макет в PDF.
Правильно создайте документ
При создании документа многие не читают диалог и сразу жмут «ОК». Но тут есть что настроить. Пример верной настройки:Назначение: Web — Это переведет все размеры в пиксели. В вебе мы работает с ними и только с ними, никаких «подвинь на 1 сантиметр».
Ах и да, ширина должна быть кратной двум.
Один раз я встретил сайт шириной 1227 пикселя.Про сетку я расскажу в следующем разделе, ее всегда можно поменять в Layout->Margins and columns.
Хинт: многие даже опытные дизайнеры не знают, что высоту (впрочем как и ширину) можно выставлять индивидуально для каждой страницы внизу закладки pages самый первый значек. Когда презентуешь макет в PDF длиннющие белые хвосты внизу страницах незачем.
Используйте сетку
Что бы макет выглядел хорошо, все элементы должны быть систематизированы. Тут речь не только о сайтах, но и о любых макетах в принципе.Сетка это основа любого макета. От нее и пляшут. Поэтому ее выбор очень важен. Но я не буду тут расписывать ее «графические» свойства. Для нас важны технические требования.
1 — margin, 2 — ширина колонки, 3 — gutter, 4 — стандартный отступ
Все размеры сетки должны быть целочисленными и желательно кратными двум.Вот список параметров:
- Ширина макета
- Ширина внешних отступов (margin)
- Число колонок
- Отступы между колонками (Gutter)
Ширина макета = margin*2 + x*Число колонок + gutter*(Число колонок-1)Например для документа созданного выше в примере это будет
960 = 10*2 + х*6 + 14*5х = 145 х (ширина колонки) получилась целочисленной, значит все в порядке, если нет, поменяйте отступы.
И еще один момент, бывают макеты, где margin нулевые. И вам говорят «а зачем они, все отлично смотрится без них». Да это утверждение верно для компьютеров, где еще всяко будет пустое место на экране, но на мобильных устройствах сайт будет шириной ровно в экран и прилипший к краю шрифт будет смотреться ужасно.
Так же на забудьте указать, как я называю его «стандартный отступ». Не нужен будет ломать голову какой отступ делать. Разумеется отступ может быть и двойным. А так же вертикальный отступ может отличаться от горизонтального.
И не забывайте собственно использовать сетку, все элементы крепите по ней.
Дизайнеру в общем то без разницы где стоит элемент, но программист крепит элементы именно к сетке, так что для него крайне важно, что бы элементы никуда из нее не выползали.
Используйте функционал шаблонизирования
На сайтах различные элементы интерфейса и самое главное общий шаблон остается одинаковым на всех страницах.Поэтому его надо хранить в master pages.
Вопросов «а какая из этих страниц верный макет» больше не будет.Тоже самое касается и цветов. Все цвета используем только через swatches. Это позволит не плодить кучу цветов и менять их везде одним кликом.
Учитывайте не статичность сайтов
В отличии от печатной продукции, сайт это динамический объект. Не забывайте в макетах создавать элементы в разных стадиях (например просто ссылка, ссылка на которую навели, активная ссылка).Вы работаете с рыбой, реальные тексты будут другие
У многих дизайнеров которые раньше работали с печатной продукцией остались привычки обращать внимание на мелочи форматирования текста.Я имею в виду такие вещи, как отсутствие коротких слов в конце строки или использование переноса только в одном определенном длинном слове.
У вас статический контент, вы можете контролировать каждую букву и каждый пробел в отдельности.
Конечно это правильно и явный признак профессионализма, когда речь идет например о журнале, но в сайте вы не сможете контролировать пользовательский контент.
Так что не забывайте указывать максимально возможную длину для заголовков и тому подобные вещи.
Подготовите материалы для верстки
Прежде всего спросите frontend программиста, какие элементы ему понадобиться в картинках.Многие опытные дизайнеры уже знают, что это окошко программист нарисует border-radius’ом с box-shadow (я не говорю, что нужно знать названия свойств, просто со временем откладывается, что многие даже достаточно сложные фигуры и эффекты рисуются на css)
Но если вы новичок в этом дело спросите конкретно «что надо?».
Немного о сохранении картинок.
Все надо сохранять не просто через save в photoshope, а через save for web.
Небольшие элементы, элементы требующие прозрачность или содержащие шрифты сохраняем в png-24.
Графику, картинки и фоны jpeg. Следите за размером файла делайте максимально маленькими, пока визуально не сильно видно отличие.
Предоставьте список используемых цветов в HEX формате.
На забудьте дать все шрифты используемые в макете.
И наконец обсудите с программистом все устно, это полезно всем.
Как изменить размер изображений для Интернета в Photoshop
Изменение размера изображений для Интернета и социальных сетей
с помощью Photoshop
Следующим шагом будет загрузка изображений в онлайн-портфолио или социальные сети. Частью этого процесса является изменение размера изображений для Интернета.
Здесь я отвечаю на самые распространенные вопросы, касающиеся изменения размера изображений, и рассказываю о простых шагах по изменению размера изображений в Photoshop (а также в других популярных программах для редактирования фотографий). Я рассказываю об этом более подробно в нашем «Подготовке изображений для веб-класса», но это лишь основные шаги.
Какого размера должны быть изображения для Интернета
Поскольку размеры файлов постоянно увеличиваются с развитием технологий (некоторые изображения, которые я снимаю на свой Hasselblad H6, могут превышать 600 МБ), часто возникает необходимость уменьшить размер файлов.
В этом посте я расскажу, как я изменяю размер и уменьшаю размер файлов своих изображений специально для использования на моем веб-сайте и в социальных сетях.
Термины «размер изображения» и «размер файла» легко спутать, но важно понимать разницу.
Размер изображения: Размер файла относится к размерам изображения (ширине и высоте) и измеряется в пикселях, дюймах или сантиметрах.
Размер файла: Это относится к объему места, которое изображение занимает на вашем компьютере, жестком диске или карте памяти. Измеряется в килобайтах (КБ), мегабайтах (МБ) или гигабайтах (ГБ).
Независимо от того, какое программное обеспечение вы используете для изменения размера изображений, есть несколько ключевых моментов, которые вам необходимо настроить, чтобы изменить размер изображения и файла. Ниже приведены ключевые моменты, которые необходимо учитывать при уменьшении размера файла изображения:
Формат файла: Большинство веб-сайтов и платформ социальных сетей принимают файлы JPEG, PNG или GIF, хотя я предпочитаю JPEG.
Новый формат веб-изображений — WebP. Этот формат можно преобразовать с помощью подключаемого модуля веб-сайта или сети доставки контента из загружаемых вами изображений JPEG.
Размер файла: Рекомендуемый размер изображения для использования в Интернете составляет от 1000 до 2500 пикселей (по самому длинному краю), а рекомендуемый размер файла не превышает 500 КБ. Имейте в виду, где будет использоваться изображение и в контейнер какого размера оно будет помещено. Если изображение будет просматриваться на дисплее Retina, его размер должен быть увеличен в два раза по сравнению с размером контейнера. Это поможет вам определить размер вашего изображения. Добавление слишком больших изображений может негативно сказаться на скорости загрузки вашего сайта.
Разрешение: DPI и PPI не влияют на отображение изображения в Интернете, они важны только при печати изображений.
Цветовой профиль: Я рекомендую придерживаться цветового пространства sRGB для использования изображений в Интернете.
Я делюсь своими точными размерами изображения и рассказываю вам о том, как найти правильный баланс между качеством изображения и размером файла в этом классе «Подготовка ваших изображений для веб-постобработки».
Изменение размера изображений для Интернета
Как изменить размер изображения в Photoshop
Подготовить изображение для Интернета в Photoshop можно всего за несколько простых шагов.
1. Размер изображения
Для начала вам нужно изменить размер изображения. Для этого перейдите в Изображение > Размер изображения. После того, как вы изменили ширину, высоту, разрешение и настройки передискретизации (вы можете увидеть новый размер изображения в верхней части диалогового окна), нажмите «ОК».
2. Экспорт
После изменения размера изображения выберите «Файл» > «Экспорт». Здесь вы можете выбрать либо Экспортировать как или Сохранить для Интернета (предыдущая версия) .
Существует два варианта экспорта изображений в Photoshop: «Экспортировать как» или «Сохранить для Интернета».
ПРИМЕЧАНИЕ. Многие пользователи, возможно, уже знакомы с методом «Сохранить для Интернета», но Adobe также представила функцию «Экспортировать как» в Photoshop CC 2015. новая опция «Экспортировать как» имеет несколько дополнительных функций).
Здесь я объясню, как изменить размер файлов с помощью функции «Экспортировать как» (хотя в этом видео я объясню как «Экспортировать как», так и «Сохранить для Интернета»).
Начните с выбора формата (PNG, JPG или GIF). Далее выберите качество изображения. Чем выше качество, тем больше размер файла. Здесь вам нужно будет решить, хотите ли вы отдать предпочтение уменьшенному размеру файла или более высокому качеству изображения, и найти баланс между ними.
Исходное изображение с качеством 100.
Качество изменено до 10, появляются полосы и снижается общее качество.
Если вы пропустили первый шаг, вы также можете изменить размеры вашего изображения и настройки повторной выборки здесь. Экспортировать как также позволяет вам настроить «Размер холста» вашего изображения (это то, что вы не можете сделать с Сохранить для Интернета ). Затем вы можете выбрать, следует ли встраивать метаданные изображения и какое цветовое пространство вам нужно.
После того, как вы изменили соответствующие настройки, все, что осталось сделать, это нажать Экспорт , выберите, куда вы хотите сохранить изображение, и нажмите «Сохранить».
Помните, что вы можете использовать окно предварительного просмотра, чтобы увидеть, как каждая настройка влияет на изображение в целом. Это может быть особенно полезно при настройке качества. Вы также можете увидеть размер изображения в левой части диалогового окна (вместе с типом файла и размерами изображения). Он обновляется по мере внесения изменений и очень полезен, если вы хотите уменьшить размер файла изображения до определенного размера.
Также стоит отметить, что этот процесс можно автоматизировать с помощью действий.
Как изменить размер изображения в Lightroom
После внесения необходимых изменений в изображение, которое вы хотите загрузить, выберите «Файл» > «Экспорт». Это откроет ваши изображения в окне экспорта, где вы увидите пользовательские параметры, аналогичные тем, что есть в Photoshop.
Экспорт изображений с помощью Lightroom аналогичен процессу в Photoshop.
Ранее при экспорте изображений в Lightroom открывалось новое диалоговое окно (показано выше), в котором можно было указать ряд настроек, в том числе: местоположение экспорта, имя файла, настройки файла, размер изображения, выходную резкость, метаданные, водяные знаки и пост- обработка. Стоит отметить, что эти функции экспорта по-прежнему доступны, если вы используете Lightroom Classic. В более новых версиях Lightroom функция экспорта намного проще.
Чтобы экспортировать изображение, выберите «Файл» > «Экспорт».
Откроется новое окно, в котором можно выбрать тип файла, размеры и качество. Вы также можете выбрать дополнительные параметры, в том числе метаданные, именование файлов, резкость вывода и цветовое пространство. После внесения необходимых изменений нажмите «Экспорт фото», выберите место назначения, в котором вы хотите сохранить изображение, и нажмите «Экспорт».
Если вы изменяете размер изображения до определенного размера, вы можете увидеть размер выходного файла в левом нижнем углу окна (показано ниже).
Как изменить размер изображений с помощью других программ
Как изменить размер изображений в Luminar
Luminar — это популярный инструмент редактирования для фотографов, который, в отличие от программного обеспечения Adobe, доступен за разовую плату. Разработанный Skylum, Luminar представляет собой смесь Photoshop и Lightroom, позволяя вам работать со слоями и масками, а также предлагая ряд фильтров и предустановленных настроек.
Чтобы изменить размер изображения, выберите «Файл» > «Экспорт».
Откроется диалоговое окно, в котором вы можете назвать свое изображение и выбрать место назначения файла. Затем вы можете выбрать резкость «Низкая», «Средняя» или «Высокая» (или «Нет»). Чтобы изменить размер изображения, выберите параметр, который вы хотите изменить, из Измените размер раскрывающегося меню и введите новые размеры соответственно. Затем выберите желаемое цветовое пространство , формат и качество . После этого нажмите «Сохранить».
Экспорт изображений в Luminar.
Функции экспорта Luminar позволяют изменять размер и повышать резкость.
Как изменить размер изображений в GIMP
GIMP — это бесплатное программное обеспечение для редактирования фотографий с открытым исходным кодом, которое многие считают хорошей альтернативой Photoshop или Lightroom для тех, кто хочет внести коррективы в свои изображения. Хотя он не предлагает столько функций, сколько Photoshop, он предлагает впечатляющий набор инструментов (хотя и требует крутой кривой обучения).
Для начала выберите Изображение > Масштаб изображения. Здесь вы можете изменить ширину и высоту изображения. После этого нажмите «Масштаб». Затем перейдите в «Файл» > «Экспортировать как». Откроется диалоговое окно «Экспорт изображения». Здесь вы можете указать, какое имя файла вы хотите использовать и где вы хотите его сохранить. Вы также можете выбрать формат файла, нажав «Выбрать тип файла». Затем нажмите «Экспорт». Это вызовет еще одно диалоговое окно, в котором, в зависимости от формата вашего файла, вы сможете настроить такие параметры, как качество изображения и метаданные, которые вы хотите включить. Чтобы закончить, нажмите «Экспорт».
GIMP — еще одна бесплатная альтернатива Photoshop или Lightroom, позволяющая изменять размер изображений.
Это лишь некоторые из программ, которые вы можете использовать для подготовки изображений для публикации в Интернете. Конечно, вы также можете использовать программное обеспечение для редактирования вашей камеры (большинство производителей камер предлагают бесплатное программное обеспечение для редактирования фотографий, которое будет предлагать базовые функции для этого), если у вас нет доступа к этим другим программам.
Независимо от того, какой из них вы используете, главное помнить, что нужно найти правильный баланс между размером файла и качеством.
Если вы хотите изменить размер изображения для печати, вы можете найти методы, которые я использую для улучшения качества воспроизведения, в этом видео.
© Визуальное образование. Все права защищены. Никакой контент на этой странице не может быть использован или передан третьим лицам.
Рекомендуемый контент
Чтобы узнать больше о Photoshop и Lightroom, посетите наш раздел «Постобработка». Там вы найдете ряд занятий, охватывающих все: от понимания цифровых изображений до практических примеров ретуши от начала до конца.
Adobe Photoshop. Какую ширину в пикселях должен использовать дизайнер для PSD, учитывая ширину веб-сайта в пикселях?
спросил
Изменено 7 лет, 6 месяцев назад
Просмотрено 2к раз
Какую ширину в пикселях должен использовать дизайнер для PSD, учитывая ширину веб-сайта в пикселях? (например, мне нужен дизайн для веб-сайта шириной 1920 пикселей.
Какое разрешение должен использовать дизайнер в фотошопе?)
Я веб-разработчик, и я всегда получаю от дизайнеров PSD-файлы нелепых произвольных размеров. Например, я только что получил PSD (для одной страницы веб-сайта), размер которого превышает гигабайт, размер / разрешение изображения составляет 5616 пикселей на 3744 пикселей. Это очень усложняет задачу, потому что мне приходится изменять размер практически каждого элемента дизайна. Я понятия не имею, почему и как дизайнер решил работать в этом разрешении.
Лично я бы спроектировал в 2 раза больше окончательного разрешения веб-сайта, поэтому у меня есть изображения Retina. 3
Я рекомендую оставить 72 dpi и целевую ширину 1920, чтобы установить шаблон макета, вы всегда можете заменить веб-изображения позже через CMS или даже вручную. Погоня за дисплеями Retina в файле макета даст вам огромные (500-700 МБ и выше) PSD, и в этом просто нет необходимости.
ваша ширина должна быть в порядке при 1920px и 72dpi.