Делаем грамотный макет сайта / Habr
Вместо вступления
Любой макет создается с учетом определенных технических требований. Для макетов печатных материалов и макетов для сайтов они совершено разные. Многие начинающие дизайнеры не учитывают это и начинают творить, что душе угодно.
В этой статье я напишу как сделать все грамотно (и укажу частые ошибки), что повысит производительность у дизайнера и снимет головные боли frontend программиста.
Тезисы
Сначала я изложу основные тезисы. Многие из них претендуют на труды небезызвестного персонажа по кличке K. O., но тем не менее, не все об этом знают.
- Верстают в программах для верстки
- Правильно создайте документ
- Используйте сетку
- Используйте функционал шаблонизирования
- Учитывайте не статичность сайтов
- Вы работаете с рыбой, реальные тексты будут другие
- Подготовите материалы для верстки
Верстают в программах для верстки
Я часто слышу о том, что дизайн пытаются делать в photoshop’e.
Мне сложно понять откуда взялась эта тенденция. Во всех профильных вузах (ну на сколько я знаю) раскладывают все верно:
- Для дизайна есть InDesign (ну или QuarkXPress).
- Для рисования есть Illustrator (ну или CorelDRAW).
- Для редактирования фотографий есть Photoshop. (ну Gimp и еще миллион программ). Ну и только в веб-дизайне он еще используется для сохранения картинок.
Одна из моих теорий на этот счет, это незнание заказчика. Думаю, что все рисуется в photoshop’e заказчик говорит «Мне нужен макет в psd, завтра в 6:34 и что бы от него пахло настоящим дизайном».
Правильно создайте документ
При создании документа многие не читают диалог и сразу жмут «ОК». Но тут есть что настроить. Пример верной настройки:
Назначение: Web — Это переведет все размеры в пиксели.
В вебе мы работает с ними и только с ними, никаких «подвинь на 1 сантиметр».
Размер страницы: 960 это стандартный размер. Если не уверены и в первый раз делаете веб-дизайн берите, не думайте. Но конечно он может быть любым. Главное правильно не забывать о том, что полоса прокрутки съест ширину, так что не берите ширину абсолютно равную какому нибудь разрешению экрана, берите немного меньше.
Про сетку я расскажу в следующем разделе, ее всегда можно поменять в 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 формате.
На забудьте дать все шрифты используемые в макете.
И наконец обсудите с программистом все устно, это полезно всем.
Требования к дизайн-макетам web-страниц для верстки или делаем идеальный psd-макет
«Я не делаю брак, я не принимаю брак, я не передаю брак»
В очень редких случаях, может случиться так, что мы возьмем на дальнейшую разработку проект с уже реализованным дизайном. Но такая практика предполагает дополнительные трудовые затраты.
Если макеты создаются в студии, то разработчик может легко уточнить у менеджера проекта или дизайнера любые вопросы, например, что конкретно имелось в виду в техническом задании, или же как в представлении дизайнера должен выглядеть итог работы. Но если заказчик уже начал с кем-то проект, а затем пришел к нашему специалисту, наладить такую коммуникацию будет невозможно.
- Макет должен быть представлен в формате (.psd). В противном случае сайт будет отличаться от макета.
- Строго необходимо цветовое пространство RGB. Именно оно используется по умолчанию в web. CMYK подходит для полиграфии, а не для web.
- Единицами измерения должны быть пиксели, а не сантиметры, миллиметры и другие меры длины . Указания значений не должны быть дробными!
- Все слои одного логического элемента должны быть в одной папке (например, модуль авторизации).
- Слои ни в коем случае не должны быть склеены.
- Векторные элементы должны быть векторными элементами: иконки, стрелки и т.д. Допускаются элементы shape и smart-объекты с ai-элементами.
- Выравнивание слоев – строго по “Rulers”. Их необходимо оставлять в макете.
- “Rulers” должны быть выровнены строго с точностью до одного пикселя. Полпикселя не допустимы.
- Необходимо группировать слои по папкам (смысловым блокам) с осмысленными названиями, а не «Группа 3 copy». То же самое касается всех слоев (шапка, контент, подвал и т.п.).Придерживаемся иерархии «сверху вниз» и «слева направо».
- В случае фиксированного шаблона необходимо четкое соответствие ширины макета утвержденной минимальной ширине сайта.
- Для адаптивного сайта должны быть макеты или элементы для 640px – 960px – 1200px – 1600px.
- При разработке дизайна «под разрешение» обязательно отрисовывать в разрешение окна браузера, а не монитора (при 1024 ширина браузера 1000).
- В дизайне должны быть «служебные страницы» (404).
Текстовое содержимое.
Четкие размеры и отступы:- Необходимо использовать «родные» направляющие photoshop или готовые модульные сетки, чтобы точно определить расположение элемента на странице.
- Нужно осознанно выбирать пропорции и размеры объектов и делать их кратными 10, например, 1000px, а не 998px.
- Размер шрифта должен быть без дробей. Никогда не нужно растягивать шрифт принудительно.
- Не допускается растрирование текста или размещение его в smart-объекте.
- Используемые шрифты, за исключением Tahoma, Arial, Verdana, Times New Roman, Courier, необходимо прикладывать к передаваемым материалам. Передаваемые шрифты должны быть только форматов ttf и otf.
- Допустимо и даже приветствуется использование свободных кириллических шрифтов от Google web fonts.
- Все текстовые элементы должны быть сглажены методом “Windows LCD”.
- Необходимо описать поведение ссылок в дизайне («неактивная», «при наведении», «посещенная») в меню / модуле, то же самое касается ссылок, отличающихся от дефолтного стиля (например, ссылки в меню, pathway и т. д.)
д.)Самое главное – дизайнер должен быть верстальщиком, быть в состоянии самостоятельно сверстать то, что нарисовал (пусть и не быстро, не на 100% валидно).
Графические фишки:
- Фон должны быть повторяющимся, текстурированные фоны без логики повтора не принимаются.
- Все слои должны быть в нормальном режиме наложения (normal). Не допускается наличие слоев в других режимах, как то multiply, overlay и т.д.
- Необходимо использовать минимум элементов, что потребуют создания графических файлов png-24 (полупрозрачность etc).
- Обязательно должна присутствовать favicon.ico для сайта. Не нужно забывать про favicon для Apple.
- Векторные мелкие элементы должны быть отрисованы согласно однопиксельной сетке.
- Настоятельно рекомендуется выстраивать отступы между элементами, чьи значения кратны 10, в отдельных случаях – кратны 5.
Исходные материалы макета
- Макет в формате PSD
- Шрифты
- Исходные изображения
Важно прикрепить в отдельную папку все изображения в исходном качестве и дополнительные материалы, которые используются в макете.
Все нестандартные шрифты копируются в ту же папку. У верстальщика может не быть необходимого вам красивого шрифта. И на его поиски уйдет много времени.
Давайте пояснения к элементам, которые могут вызвать вопросы. Если есть особые задумки, которые не так просто показать на макете, то запишите их в отдельный текстовый файл. К тому моменту, когда верстальщик доберется к этому элементу макета, вы и сами можете забыть, чего хотели, и придется вновь тратить время на то, чтобы вспомнить идею и объяснить ее верстальщику.
23.04.2018 Заказчику 17497 Автор: Команда Peppers Digital Вебмастер Процесс
Как создать мобильный веб-сайт в Photoshop
Хорошо, в этом мы собирались рассмотреть мобильный дизайн и, вероятно, самая важная часть мобильного сайта, вероятно, это навигация, то, как вы перемещаетесь.
Из-за ограниченного пространства у вас не может быть наших больших меню, которые есть на нашем рабочем столе. Знать, какой из них выбрать, может быть сложно; действительно хороший сайт — это сайт exisweb.net. Это невероятно длинная ссылка, поэтому используйте ссылку на экране сейчас, чтобы перейти и найти все различные полезные ссылки повсюду, сейчас у меня не будет возможности просмотреть их, потому что существует так много разных способов рассмотрения мобильных меню, но давайте посмотрим в основных группах.
Вот этот, у нас есть эта штука, которая называется гамбургер, или навигационный бутерброд, или три горизонтальные линии, называйте это как хотите. Вот эта штука щелкает, и весь сайт смещается вправо, и появляется это меню. Здесь есть еще один вариант, когда они складываются, вы можете увидеть здесь представление для рабочего стола, но когда дело доходит до мобильных устройств, они складываются в виде больших кнопок друг над другом. Где еще какие? Вот этот мне нравится просто бургер сам по себе, когда он щелкает, из него появляется выпадающее меню.
Есть много разных вариантов, посмотрите этот сайт, есть из чего выбрать, все они похожи на вкусы. Важно решить, будете ли вы делать гамбургер или нет.
Итак, потрясный журнал, мы смотрели это ранее, посмотрите это. Если я сверну это, они решат, что бургеров нет, у них есть это меню слов, и это совершенно круто, но вы можете видеть в моем хромированном плагине, они использовал бургер. Многие делают, многие нет. Это может быть причуда, я думаю, что она, вероятно, останется, как новая хорошая иконка для мобильных меню. Итак, давайте построим один.
Итак, что мы собирались сделать, так это начать с мобильного сайта, поэтому собирались начать создание нескольких его частей, перетаскивание частей на рабочий стол, а затем перестроить меню. Итак, с чего я хочу начать, так это с навигации и блока героя. Итак, я выбрал оба из них, удерживая команду и щелкая по ним обоим или управляя на ПК. Что я собираюсь сделать, так это щелкнуть, удерживать и перетаскивать, но, удерживая нажатой клавишу Alt, сначала щелкнуть, удерживать и перетащить, переместить его, расположить по центру, вот здесь.
Выровняйте его, и вы заметите, что все они переместились в мою мобильную версию. Итак, я собираюсь увеличить масштаб, там много работы, чтобы исправить это, поэтому я собираюсь немного увеличить масштаб. И что я хочу сделать, так это то, что мне придется использовать это, поэтому я собираюсь перейти к моему навигационному блоку и принести свой собственный логотип ноутбука, который я собираюсь переместить, не могу его видеть, потому что он на этой стороне здесь, но я знаю, что если я зажму Shift, перетащу его, он будет двигаться по идеальной линии. Идеальный. Моя коробка героя должна немного подняться, милая. Принесите свой собственный ноутбук будет там. Я собираюсь переместить его по центру. И эта навигация исчезнет, потому что сервисы просто не подходят, поэтому я собираюсь ее отключить, я нарисую свои три горизонтальные линии. Это очень просто, просто используйте инструмент «Прямоугольник», убедитесь, что для заливки выбран белый цвет, я собираюсь установить для обводки значение «Нет», и я буду рисовать.
Вы также можете сделать это с помощью инструмента «Линия», если хотите. Я считаю, что достаточно просто использовать инструмент прямоугольника, чтобы они выглядели как линии. Это немного велико, поэтому я собираюсь увеличить масштаб. Вы обнаружите, что если вы милы и близки, когда работаете над этим, с ним становится немного легче работать. Если я нахожусь далеко и перетаскиваю эти маленькие линии, они, кажется, ломаются, но это намного проще, когда мы находимся близко. Поэтому я собираюсь удерживать нажатой клавишу Alt и рисовать свой бургер. Вы можете видеть здесь, как мой смарт-гид говорит мне, что он соответствует расстоянию от верхнего до нижнего. Отлично, теперь этот бургер довольно большой, поэтому я выберу их все, трансформирую и немного уменьшу, возможно, сделаю их немного короче.
Итак, это мое мобильное бургер-меню, здорово, что мне нравится делать, когда нажимается эта кнопка, мне нравится накладывать все это здесь на новый тег div, который появляется. Итак, я воспользуюсь инструментом «Прямоугольник» и нарисую хороший большой прямоугольник для своего меню, положу его внутрь и задам ему цвет.
Я собираюсь использовать фиолетовый цвет и немного прозрачности, нет причин, по которым вам это нужно. Просто выглядит круто, поэтому я собираюсь уменьшить его до 90%, просто чтобы вы немного осознавали и видели что-то позади, чтобы, когда он скользит вниз, вы знали, что он потенциально может быть сдвинут обратно вверх, а это не так. новая страница. Итак, давайте посмотрим на то, как сделать некоторые имена, поэтому давайте поместим мой собственный ноутбук в меню навигации, и это будет навигация по боксу. Что я собираюсь сделать, так это запустить второй, и он будет называться «мобильное выпадающее меню». И я собираюсь держать все отдельно, поэтому я возьму свой инструмент прямоугольника, вот и все, и положу его туда. Я возьму с собой этих трех парней, а эти ребята — мое бургер-меню. Что я собираюсь сделать, так это сгруппировать их вместе или связать их. Самый простой способ сделать это — щелкнуть их правой кнопкой мыши и преобразовать в то, что называется смарт-объектом. Я собираюсь переименовать его и назвать его меню гамбургеров, и я собираюсь переместить его в раскрывающийся список.
Большой.
Теперь у меня есть это, у меня есть это, у меня есть это. Что я собираюсь сделать сейчас, так это отключить свое меню гамбургеров, поэтому у меня будет два, так что это меню гамбургеров неактивно, и у меня будет второй, который будет моим гамбургером. меню активно, потому что я хочу сделать то, что я сделал на этом сайте здесь. Там, где я уменьшил это, мы уменьшимся, это то, что я сделал на своем новозеландском сайте, где у меня есть свой бургер, и я нажимаю на него, и есть маленький крестик, чтобы знать, что вы можете щелкнуть по нему и закрыть его потом . Итак, давайте вернемся к этому, хорошо, чтобы создать его, я мог бы использовать несколько разных трюков, самый простой способ получить идеальный крест — это щелкнуть один раз, получить плюс. Я не использую х, потому что х этого не делают, они выглядят как х, они не похожи на крест. Поэтому то, что я хочу, это плюс на его стороне. Так что я собираюсь использовать плюс, некоторые шрифты не очень хорошо смотрятся при использовании этой техники, потому что они довольно стилизованы плюсами, так что Arial регулярный отлично подходит для этого, и я хочу его преобразовать.
Итак, я собираюсь использовать свою команду t или управление t на компьютере. Я собираюсь повернуть его, скажем, на 45 градусов.
То, что вы найдете, это то, что вы можете применить, это похоже на хороший хороший крест. Я собираюсь немного увеличить масштаб. Control T, сделай его немного больше, чтобы соответствовать моему навигационному гамбургеру, круто! И это будет, я скопирую это, я вставлю это сюда. Он будет активным. Итак, что произойдет, так это то, что они отключатся, они будут переключаться между собой. На самом деле, что я мог бы сделать, чтобы сделать это более понятным для веб-дизайнера, так это то, что я собираюсь поместить меню гамбургеров в настоящую навигацию, чтобы, когда люди включают и выключают это, оно было сзади, а эти ребята впереди.
Следующее, что мне нужно сделать, это добавить текст, поэтому я возьму свой инструмент ввода, щелкну и перетащу поле, и я собираюсь ввести свой бит, так что это будет услуги Я буду писать в шапке, я буду делать портфолио, я буду делать команду, и я буду делать контакт.
Я собираюсь выделить их все, выбрать шрифт, перетащив его вниз. Я собираюсь использовать свой Roboto, я собираюсь использовать Roboto light. Теперь то, что вы хотите сделать, это убедиться, что между этими словами достаточно места, вы не хотите, чтобы люди щелкали одно, а затем ненароком щелкали другое, поэтому хороший интервал между строками — это здорово. Мины получили его по умолчанию, потому что я уже играл с ним. Если вы возьмете свой инструмент ввода и выберете все, что вы хотите найти, давайте щелкнем этот значок здесь, поднимем панель вашего персонажа, эту опцию здесь. У вас, вероятно, установлено значение auto, равное 28, оно, вероятно, будет около 30 с точки зрения межстрочного интервала, я собираюсь увеличить свой примерно до 60. В зависимости от размера шрифта, который вы используете, какой тип шрифта , тебе решать. Теперь это сработает для меня, на самом деле, может быть, немного больше, до 70, просто чтобы между ними был хороший большой промежуток, чтобы большие толстые пальцы могли легко нажимать на них.
Это будет мой раскрывающийся список навигации, и я собираюсь масштабировать его. Прекрасно, так что это будет моя раскрывающаяся навигация, теперь мне нужно просмотреть и перенести все, что я делал на рабочем столе, и заставить их работать на мобильных устройствах, и я сделаю это в следующем видео.
adobe photoshop — Макеты для сайта на 30% больше. Может ли проблема быть связана с dpi?
Я создал несколько макетов для всего веб-сайта с разрешением 150 точек на дюйм. Я отправил макет разработчику, и когда я получил сайт обратно, это было ужасно.
Шрифты были очень большими. Изображения тоже. Размеры на 30% больше, чем я разработал.
Друг сказал мне, что это связано с dpi. Теперь мне нужно переделать весь сайт, чтобы разработчик мог переделать свою работу.
Есть ли у кого-нибудь решение, чтобы я мог автоматически адаптировать созданный макет к реальным размерам?
- Adobe-Photoshop
- веб-дизайн
- dpi
10
Проблема в том, что вы не имеете четкого представления о том, как определять элементы для веб-страниц.
Вам нужно определить всю свою работу в пикселях.
Шрифты были очень большими. Изображения тоже. Размеры на 30% больше, чем я разработал.
Вот один пример. Вы хотели использовать PPI от 150 до 72, что удвоило бы размер, но вы говорите, что размер больше на 30%, а не на 100%.
Ваш друг в чем-то не прав. PPI не имеет значения для экранов.
В Photoshop вам просто нужно определить свой проект в пикселях.
Приложение:
При экспорте чего-либо в Illustrator возникает проблема Диалоговое окно Doom .
При подготовке документа в пикселях ресурсы необходимо экспортировать с исходным разрешением. В этом случае назначенное родное разрешение составляет… 72 PPI.
Эти 72 PPI не имеют значения… кроме иллюстратора, так что ваш друг прав, если вы работали в иллюстраторе.
1
Похоже, вы создаете документ Photoshop с неправильным разрешением.
