Поэтому я создаю полностью адаптивный веб-сайт с целью использовать как можно меньше медиа-запросов и магических чисел. После нескольких попыток я обнаружил, что использование контента для создания макета — это, безусловно, лучший способ действий.
Мой клиент запросил слайд-шоу/карусель изображений, чтобы они были видны на главной странице и, возможно, на всех основных страницах. Я создал макет, который работает, и они довольны им. Вы можете просмотреть его здесь .
Теперь передо мной стоит новая задача: как создать привлекающее внимание слайд-шоу, отвечающее его среде и хорошо выглядящее? Позвольте мне расширить..
У меня мало ограничений, что в данном случае является скорее бременем, чем облегчением.
Итак, о чем я сейчас думаю и пытаюсь:
Используйте фоновое изображение с прямой ссылкой на тему и одну или две интересные и актуальные картинки в стиле клип-арта, которые можно перемещать в зависимости от размера экрана.
Затем позвольте тексту позиционироваться с помощью полей/отступов и медиа-запросов.
Во время этого редактирования я выбрал простой, безопасный и скучный вариант, используя широкие, очевидные фотографии.
Я ищу совета о том, какой подход следует использовать при создании графики, которая соответствует среде, на которой она отображается.
Оригинальные вопросы (не очень), относящиеся к этому:
Будет ли один цвет, простой градиент или очень гладкий фон лучше, чем повторяющийся узор или рисунок с деталями?
Как я могу создать повторяющийся шаблон, который работает и имеет отношение к теме и дизайну?
Если я использую плавающее изображение переднего плана, как вы думаете, оно должно выглядеть реалистично, а не клип-арт?
Лучшие темы для рассмотрения:
Любые сообщения в блогах, статьи или отчеты, относящиеся к этому, приветствуются и высоко ценятся.
Буквально сегодня утром в журнале Smashing была опубликована статья о фокусировке на части изображения при масштабировании для мобильных устройств: выбор решения для адаптивного изображения (прокрутите вниз до раздела «Проблема художественного направления»). С фотографией дороги на вашем веб-сайте вы должны убедиться, что при уменьшении масштаба отображается дорога, а не деревья, потому что дорога усиливает идею «Мы в пути».
Будет ли один цвет, простой градиент или очень гладкий фон лучше, чем повторяющийся узор или рисунок с деталями?
Это зависит от других элементов на странице. Если вы используете изображения переднего плана, придерживаясь одного цвета фона, который не конкурирует с фотографиями, это позволит глазу естественным образом сфокусироваться на изображениях переднего плана.
Как я могу создать повторяющийся шаблон, который работает и имеет отношение к теме и дизайну?
Повторяющийся рисунок коробки укрепил бы концепцию перемещения и хранения.
Если я использую плавающее изображение переднего плана, как вы думаете, оно должно выглядеть реалистично, а не клип-арт?
Клип-арт может быть сложным. Есть несколько хорошо разработанных векторных изображений и расторных иллюстраций, которые можно было бы квалифицировать как клип-арт, но все же они сделаны со вкусом. Если бы вы использовали его в формате SVG, он бы хорошо масштабировался на устройствах с дисплеем Retina. Просто убедитесь, что изображение, которое вы выбираете, хорошее и соответствует настроению, которое вы создаете. Я могу представить красивый рисунок коробок, который выглядел бы хорошо, но я также могу представить клип-арт плохого качества, который выглядел бы плохо. Если вы не уверены, фотографии обычно являются безопасным выбором.
С точки зрения дизайна (я знаю техническую сторону), какие условия я могу использовать, чтобы решить, как масштабировать текст вверх/вниз, чтобы при этом хорошо выглядеть? т.е. должен ли текст быть не больше определенного размера в зависимости от ширины его контейнера?
Для ваших трех горизонтальных блоков текста я бы увеличил их размер и дополнил так, чтобы у вас было 4-5 слов в строке. Когда вы переходите к мобильным размерам или очень узким окнам, я бы изменил отображение на блок, чтобы каждый блок текста занимал свою собственную строку.
Ознакомьтесь с этими статьями:
Какие изображения лучше всего подходят для фона с сильно различающейся шириной? Я предполагаю, что это изображения, которые имеют единственную точку интереса с некоторыми незначительными деталями в остальной части изображения.
Я согласен. Фотографии с фокусом на одной области, а остальная часть фона менее заметна или размыта (фотографы называют это размытие «боке»), будут здесь хорошо работать. Также обратитесь к фотографии дерева в статье журнала Smashing, на которую я ссылался выше.
Что наиболее важно учитывать в отношении нефиксированного/плавающего характера изображений и текста переднего плана? (пробелы, упаковка и что-нибудь еще?)
Изображения нужны для усиления текста. Текст является наиболее важным фактором, поэтому вы должны убедиться, что изображения размещены в качестве поддержки. Текст должен быть заметным, но не закрывать важную часть изображения.
Близость имеет ключевое значение. Текст должен располагаться близко к изображению и дальше от других изображений. Если у вас есть изображение 1 с текстом под ним, вы хотите, чтобы между изображением и вспомогательным текстом было меньше места, чем между этим текстом и следующим изображением. Например, допустим, у вас есть изображение 1 с текстом под ним, затем изображение 2 под ним и дополнительный текст под изображением 2. Вы хотите, чтобы между подписью к изображению 1 и верхней частью изображения 2 было больше пустого пространства, чем вы' d между изображением 1 и его заголовком.
Отличная книга на эту тему — The Non-Designer's Design Book.
Также ознакомьтесь с «Руководством разработчика Apple по принципам взаимодействия: принципы взаимодействия с пользователем ». Здесь много хороших вещей.
Варианты кажутся простыми.
background-size:свойство для динамического изменения любого фонового изображения.overflow: hidden;свойство, чтобы просто скрывать большие изображения в div при уменьшении ширины страницы. Это потребует от вас помнить, что видно при различной ширине страницы.Вопросы, которые вы задаете, несколько двусмысленны.... но....
Будет ли один цвет, простой градиент или очень гладкий фон лучше, чем повторяющийся узор или рисунок с деталями?
Сильно зависит от узора. Если это тонкий узор, который визуально не конкурирует с текстом над ним, то узор может работать. Я бы склонялся к сплошному цвету или тонкому градиенту. Простой цвет сделает текст более читаемым.
Как я могу создать повторяющийся шаблон, который работает и имеет отношение к теме и дизайну?
Это ваш звонок. Вы просите других разработать что-то для вас?
Если я использую плавающее изображение переднего плана, как вы думаете, оно должно выглядеть реалистично, а не клип-арт?
Опять же, это между вами и клиентом. «Настроение» или «послание», которое должен передать веб-сайт, будет определять стиль используемых изображений.
С точки зрения дизайна (я знаю техническую сторону), какие условия я могу использовать, чтобы решить, как масштабировать текст вверх/вниз, чтобы при этом хорошо выглядеть? т.е. должен ли текст быть не больше определенного размера в зависимости от ширины его контейнера?
Последовательность лучше всего подходит для дизайна. Постоянство создает впечатление стабильности. Если первый текстовый блок представляет собой одну строку текста, я бы попытался придерживаться одной строки текста для всех последующих текстовых блоков. Ширина может немного измениться, но перемещение от одной строки текста к нескольким строкам текста потребует перемещения элементов. Когда элементы двигаются, вы теряете чувство согласованности.
Используя CSS3 Media Queries, мы можем сделать изображения отзывчивыми.
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
Если вам нужно больше объяснений, перейдите по этой ссылке, http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries .
Эрик
Эрик