Руководство веб-дизайнера по стилизации плитки

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

01. Что содержат плитки стиля?

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

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



02. Когда использовать плитки стилей

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

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

03. Как выглядят стилизованные плитки?

Плитка в стиле Washinton Examiner 1

Изображение любезно предоставлено Phase2 Technology

Плитка в стиле Washinton Examiner 2

Изображение любезно предоставлено Phase2 Technology

Плитка в стиле Washinton Examiner 3

Изображение любезно предоставлено Phase2 Technology

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

как рисовать пастелью для начинающих

Ознакомьтесь с приведенными выше примерами из Phase2 Technology, созданными во время работы над новым веб-сайтом для сайта кампании Washington Examiner 2012.

04. Как успешно использовать плитку стиля

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

Слушай своего клиента

Плитка стиля 1

Изображение предоставлено https://twitter.com/heyitsgarrett

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

Если это поможет, вы можете создать анкету для своих клиентов перед первой встречей по проекту. Если вы изо всех сил пытаетесь понять, какие вопросы следует задать клиенту, StyleTil.es на веб-сайте представлены некоторые полезные ресурсы, в том числе из Энди Ратледж и Ким Каллен .

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

Что художник использовал в качестве вдохновения, чтобы нарисовать изображение выше?

Используйте структуру дизайна для интерпретации брифа

Плитка стиля 2

Изображение предоставлено https://twitter.com/heyitsgarrett

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

Определите визуальный язык

Плитка стиля 3

Изображение предоставлено https://twitter.com/heyitsgarrett

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

Веб-сайт styletil.es, созданный Самантой Уоррен, предоставляет вам удобный шаблон PSD для скачать и используйте в качестве отправной точки для вывода ваших плиток стиля.

Итерировать, пока не будет согласован стиль

Плитка стиля 4

Изображение предоставлено https://twitter.com/heyitsgarrett

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

жесткий чехол macbook pro 15 retina

05. Должны ли стилизованные плитки заменять макеты?

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

Вместо того, чтобы создавать макеты в начале дизайн-проекта, создавайте стилизованные плитки, утверждает Саманта Уоррен.

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

С точки зрения клиента, макет представляет собой законченное дизайнерское решение, но поскольку они часто впервые видят вашу интерпретацию брифа дизайна, понятно, что они идентифицируют элементы, которые им нравятся, и элементы, которые им не нравятся. Это также естественный вывод, что полученная вами обратная связь побудит вас объединить разрозненные элементы из различных макетов, что приведет к тому, что Саманта Уоррен называет Решение 'Franken-comp' .

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

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

06. Где узнать больше

Слова : Сэм Хэмптон-Смит

Так? Прочтите это!

Что вы думаете? Будете ли вы использовать стилистические плитки или придерживаетесь традиционных макетов страниц? Сообщите нам свое мнение в комментариях ниже ...