Как вы создаете макет/изображение дизайна веб-сайта клиента?

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

• Создавайте макеты в Photoshop или подобном программном обеспечении, а затем воссоздавайте их вручную в HTML/CSS;

• Создавайте дизайн прямо в HTML/CSS.

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

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

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

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

Как вы делаете макеты дизайна клиента для обзора

Мои 2 цента за предыдущий вопрос: как вы представляете каркасы и дизайны для длинного одностраничного веб-сайта?

Можно ли извлечь какие-либо свойства HTML/CSS из макета страницы веб-сайта, сделанного в Photoshop или Illustrator?

Да, некоторые свойства можно извлечь из Photoshop... плохие. Позволь мне объяснить.

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

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

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

Создаются ли они в Illustrator/Photoshop, а затем извлекаются изображения для использования на новом сайте?

Просто некоторые элементы, вроде логотипов, нужного размера для кадрирования фото.

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

Для тех, кто наткнулся на это сегодня в поисках вариантов, AdobeXD или Sketch намного превосходят макеты Photoshop, поскольку их можно сделать на стороне клиента и интерактивными.

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

Adobe Comp — это мобильное приложение, в котором вы можете создавать макеты на телефоне (без версии для ПК) и экспортировать экраны в виде изображений. Их можно поместить в приложение Marvel, где можно быстро добавить ссылки между экранами, сделав их интерактивными для мобильных демоверсий.

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

Использование Sketch или Illustrator ограничивает дизайнеров в создании проектов, которые действительно поддерживают веб-технологии.

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

Я присоединюсь к обоим предыдущим ответам, вы определенно хотите иметь плавный переход между дизайном и разработкой. Один из вариантов — следовать стандартному шаблону PSD с 12 сетками, чтобы создать макет, а затем подтвердить его с помощью инструмента соответствия кода, такого как https://www.oss-usa.com/web-preflight?promo=web-preflight . Другой вариант — взять что-то вроде адаптивного шаблона WordPress и использовать его в качестве сетки макета в Photoshop.

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

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

Кроме того, проверьте Edge Reflow .
РЕДАКТИРОВАТЬ: Судя по всему, они уничтожили этот проект вместе с Edge Code (хотя не знаю, почему; Code должен был уйти, потому что он конкурировал с Adobe Brackets, но единственная альтернатива Adobe для Reflow — это Dreamweaver, ужасная программа, которая должна умереть).

Можно ли извлечь какие-либо свойства HTML/CSS из макета страницы веб-сайта, сделанного в Photoshop или Illustrator?

Текстовый редактор Adobe Brackets имеет подключаемый модуль по умолчанию под названием PSD-Extract , который можно использовать для создания правил CSS из PSD-файла. Он не будет выполнять за вас всю работу по кодированию, но он генерирует относительно чистый и современный код (в отличие от плохого/устаревшего программного обеспечения, такого как dreamweaver, которое будет генерировать действительно неприятный код).

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

Я рекомендую вам вообще не создавать макет всего веб-сайта. Это приводит только к непониманию и разочарованию. Особенно при создании адаптивного веб-сайта, что, очевидно, требуется сегодня.

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

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

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

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

В конце этого сеанса я обычно отправляю им по электронной почте PDF-файл каждой страницы веб-сайта. У меня есть AppleScript, который делает это автоматически.

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

Как правило, одна из карт волнует клиента больше, чем другие, и именно ее он и хочет. Нет второго раунда дизайна. Логотип, конечно же, экспортируется в формате SVG, и мы помещаем его в верхнюю строку адаптивной сетки на веб-сайте. (Я использую Skeleton , который очень прост и удобен.) Стили текста и цветовая схема из пробной версии, конечно же, помещены в CSS веб-сайта. У вас нет этого шага воссоздания макета страницы в стиле печати, потому что в адаптивном дизайне нет макета страницы в стиле печати. В основном у вас есть один столбец блоков на телефоне, который может расширяться до 2 или 3 столбцов (или столько, сколько вы хотите) на большом экране. Вы не устанавливаете размер текста на основе вкуса, вы устанавливаете его на основе того, что можно прочитать на каждом устройстве.

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

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

Основываясь на их содержании, я мог бы предложить сделать анимацию, добавить несколько стоковых фотографий, создать несколько блоков призыва к действию для важных страниц (которые идут во второй столбец на больших экранах и появляются внизу прокрутки на телефоне). .) Энергия дизайна уходит на создание/улучшение актуального контента на реальном веб-сайте. Мы еще задолго до запуска, и все же мы работаем так же, как могли бы работать после запуска, чтобы улучшить веб-сайт. Энергии тратится совсем немного. Вместо того, чтобы показывать им макеты воображаемых элементов веб-сайта, которые они могут захотеть или не захотеть, мы смотрим на их реальное содержание и говорим: мы можем направить пользователей на эти 3 важные страницы с помощью набора из 3 описательных встроенных кнопок. Или: мы можем сделать эту фотогалерею в виде большого иммерсивного слайд-шоу, которое запускается автоматически, а также предлагает кнопки «вперед» и «назад». Или же:

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

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

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

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

В прошлом у меня был клиент, выражавший разочарование тем, что запущенный сайт выглядит точно так же, как макет, который они видели за несколько недель до этого. [Звук сводит с ума.] Это ключевой момент: вы должны понимать, что клиент не графический дизайнер, не веб-разработчик и может даже не делать никаких документов регулярно. Вы не можете обязательно показать им lorem ipsum и ожидать, что они получат от этого что-то хорошее. Вы не можете показать им макет, который выглядит как страница 8,5x11, а затем удивиться, когда они будут разочарованы, увидев только верхнюю часть этой страницы в веб-браузере на своем компьютере. Но если вы покажете им необработанный кусок мрамора и скажете: «Теперь мы собираемся вылепить из него что-то индивидуальное для вас, исходя из ваших потребностей и требований», — это, по моему опыту, вызовет у них большее возбуждение, чем макеты с lorem ipsum.