Баннер героя — адаптивный дизайн [закрыто]

Есть ли «лучший шаблон» для адаптивных баннеров?

Я вижу это повсюду:введите описание изображения здесь

... на самом деле, я не видел ничего другого на адаптивных веб-сайтах.

По сути, общей темой является выцветшее изображение за центрированным текстом.

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

Некоторые примеры: nest.com sofi.com apple.com

Что именно вы подразумеваете под «лучшим шаблоном», вы имеете в виду макет баннера?
есть ли что-то лучшее, что вы имеете в виду?
Да, макет
Это то, что люди делают... Что-то выглядит хорошо или что-то в этом роде, и они тоже хотят это использовать. Этот стиль только что стал популярным, и именно поэтому вы видите его повсюду. Давай... Я не буду звонить в полицию, если ты хочешь создать что-то оригинальное.
Я думаю, что это отвечает как на это, так и на все остальное: graphicdesign.stackexchange.com/questions/24757/… Нет «лучшего». То, что популярно в 2015 году, может полностью отличаться от того, что люди копируют в 2017 году.
Нет, «лучшего» шаблона не существует. Используйте то, что работает для ваших конкретных потребностей.

Ответы (3)

Отзывчивый «дизайн» по самой своей природе должен быть предельно минималистичным, чтобы элементы можно было легко перестраивать и перемещать.

Также справедливо сказать, что те, кто может сделать лучший адаптивный дизайн, (пока) совсем не заинтересованы в этом. Инструменты просто не готовы.

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

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

ПОЯСНЕНИЕ : Те, кто достаточно хорошо разбирается в коде, чтобы в значительной степени экспериментировать и исследовать среду, как правило, не склонны к визуальному дизайну и инстинктивно не способны к хорошему дизайну. И наоборот.

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

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

«А возможности кодирования и инстинктивного проектирования — почти взаимоисключающие свойства» = это совсем не так. Лучшие разработчики, которых я встречал, разбираются в визуальном дизайне и наоборот.
DA01, ты не можешь сказать, что это неправда "совсем", а потом сказать "лучшие разработчики, которых я встречал". А как насчет худших разработчиков, которых вы встречали? Может быть, @Confused получил балл (ну, по крайней мере, он/она получил мой +1!)
«Отзывчивый «дизайн» по самой своей природе должен быть чрезвычайно минималистичным» — нет, это не так.
Хочешь предоставить какие-то доказательства?
Отзывчивый дизайн имеет тенденцию быть минималистичным, потому что: а) он приобрел популярность, когда плоский дизайн был/был в моде, б) так намного, намного проще и в) он, как правило, реализуется командами дизайнеров, ориентированных на UX, которые склоняются к минимализму (каждый завитушка или декоративный элемент должны быть в состоянии доказать свою объективную полезность). Теоретически у вас мог бы быть дизайн, который был бы одновременно идеально отзывчивым и богато украшенным/сложным... но вы бы плыли против течения моды, технологий и процессов принятия решений большинства отзывчивых дизайнерских команд с небольшой пользой. . +1
Почему плоский дизайн снова стал популярным? Это не первый раз, когда популярны эстетические качества, известные в настоящее время как «плоский дизайн». То, что вы описываете, — это симптомы тренда, а не то, что привело его в действие.
Взаимоисключающие слова @go-me подразумевают, что нет визуальных дизайнеров, которые умеют программировать, и наоборот. Это просто неправда.
@confused тенденция плоского дизайна в первую очередь началась с Windows Phone, а не с отзывчивым веб-дизайном. Можно утверждать, что Интернет в целом стал минималистичным, независимо от RWD.
«Тенденция плоского дизайна в первую очередь началась с Windows Phone». Это заведомо неверно. Плоский дизайн был чрезвычайно популярен и был доминирующей тенденцией и парадигмой веб-дизайна задолго до того, как его начал использовать Windows Phone.
Ключ к ответу не кто, а почему и как он стал популярным. Подумайте об ограничениях CSS, и вы станете намного ближе к истокам возрождения минимализма.
@DA01 Не будем играть словами. Дизайн и программирование — две разные профессии, и, очевидно, именно это имел в виду Confused. Это становится темой, которая хорошо подошла бы для лингвистического форума; что значит "совсем", "всегда", "никогда", "почти"!
@confused, какие ограничения?
@go-me, это просто ложь. Это могут быть отдельные карьеры, но часто это не так. Я работаю и работал со многими, кто может спроектировать пользовательский интерфейс, а также создать его.
@ DA01, если вы серьезно думаете, что ограничений нет, или не знаете об исторических и существующих ограничениях CSS при веб-дизайне и разработке, то вы, вероятно, также наивны в отношении роста его использования и значения в веб-дизайне в начале и середине 00-х. . В этом случае нет смысла пытаться объяснить происхождение (как, почему, когда и где) того, что мы (в настоящее время) называем «плоским дизайном».
Я думаю, что основной проблемой этого ответа является чрезмерное упрощение. Вы утверждаете различные мнения, как будто они являются фактами без каких-либо доказательств. У человека нет причин быть менее талантливым в программировании, потому что он уже талантлив в дизайне. Это просто неправда.
И вдобавок к тому, что сказал Дом, вы слишком упрощаете две совершенно разные вещи. Определенная технология (CSS) и определенная тенденция визуального дизайна. Предполагать, что последнее происходит из-за первого, — это просто чрезмерное упрощение обеих тем.
Кодирование и разработка упрощены по сравнению с CSS. И нюансы английского языка тоже упрощены. Я не думаю, что «настоящие» кодеры оценят свои навыки по сравнению с настройкой CSS. Лично я слишком уважаю CSS, чтобы называть его «настоящим кодированием». Все поняли из первого предложения, что можно быть хорошим в обоих, но, очевидно, это две разные области; механик может быть хорошим маляром, у нас получилось, обратного никто не утверждает. Все эти комментарии не по теме и полны эгоизма! Тем не менее, никто не публикует новый ответ.

Если под «героическим баннером» (5) вы подразумеваете заголовок веб-сайта, то это в основном вопрос CSS и желания загружать одно и то же изображение для всех устройств; ваш пример выглядит как использование CSS, а не простой веб-баннер . Есть несколько причин, по которым разработчик может использовать один и тот же баннер героя для всех устройств, помимо того, что это быстрее реализовать (1, 2), но каждое устройство может легко иметь свой собственный баннер героя, и в этом случае не так много ограничений дизайна. Это вопрос возможности, времени/бюджета и приоритетов.

Но если вы имеете в виду раздел с CSS и HTML, например , причина в времени и бюджете, разработчики часто используют Bootstrap , а в других случаях некоторые из них предпочитают не использовать jquery для изменения размера своих галерей, например (1, 2).

Уже сейчас вы можете получить множество различных способов создания адаптивного макета. И в идеале дизайн не должен быть перегружен изображениями. (2) Это нормально, макет минималистичный и не содержит слишком много больших изображений; он загружается быстрее.

Просто потребуется больше пользовательского кода CSS для каждого устройства, если вы решите использовать другой способ реализации адаптивного дизайна, но «лучшего» способа не существует, и все можно сделать. И поскольку существуют такие решения, как Bootstrap, это хороший ярлык для использования, который уже имеет заранее определенные способы сделать контент «текучим»; lotof dev будет использовать его, потому что он экономит много времени, но многие веб-сайты также имеют похожий стиль. Важно то, что он хорошо подходит для каждого устройства, быстро загружается и, если возможно, выглядит красиво. Это также дает разработчикам преимущество в том, что им нужно управлять только одним содержимым веб-сайта.(3)

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

Вы, конечно, видите много веб-сайтов с другим адаптивным макетом.

Вот несколько примеров различных адаптивных макетов:

http://stephencaver.com/

http://foodsense.is/

http://www.bk.com/

http://www.timhortons.com

http://hogash-demos.com/kallyas_joomla/index.php?option=com_content&view=featured&Itemid=156

Некоторые ссылки:

(1) Эта стратегия представляет собой развитие предыдущей стратегии веб-дизайна, известной как «изящная деградация», когда дизайнеры создавали веб-страницы для новейших браузеров, которые также хорошо работали бы в более старых версиях программного обеспечения браузера. Предполагалось, что изящная деградация позволит странице «ухудшиться» или оставаться презентабельной, даже если определенные технологии, предполагаемые дизайном, отсутствовали, не раздражая пользователя такого старого программного обеспечения. К сожалению, обновление часто невозможно из-за политики ИТ-отдела, устаревшего оборудования и других причин (например, правительственных веб-сайтов). Позиция «просто обновите» также игнорирует преднамеренный выбор пользователя и существование множества браузерных платформ;, или где поддержка звука или цвета и ограниченный размер экрана , например, сильно отличаются от типичного графического настольного браузера.

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

(3) Джоди Резник, президент Trighton Interactive, заявил в интервью Forbes: «Адаптивные веб-сайты упрощают интернет-маркетинг и SEO. Вместо того чтобы разрабатывать и управлять контентом для нескольких веб-сайтов, компании с адаптивными сайтами могут использовать единый подход к управлению контентом, поскольку им нужно управлять только одним адаптивным сайтом.

(4) «Различные URL-адреса целевых страниц могут использоваться для разных платформ, или Ajax может использоваться для отображения различных вариантов рекламы на странице. Таблицы CSS допускают гибридные фиксированные + гибкие макеты».

(5) Главное изображение — это термин, используемый в веб-дизайне для обозначения определенного типа веб-баннера. Основное изображение — это большое изображение баннера, которое размещается на видном месте веб-страницы, как правило, спереди и по центру.

Изменить: добавлена ​​ссылка на баннер героя на случай, если элемент был неправильно назван в вопросе. Добавлено несколько ссылок из Википедии, которые уже были одобрены профессиональными разработчиками и цитируются эксперты по теме.

Bootstrap, безусловно, является наиболее распространенным адаптивным фреймворком сетки CSS (который, кстати, обычно требует jQuery, если вы хотите использовать JS, который идет с ним), но на самом деле это не решает конкретный вопрос о дизайне баннера.
Вопрос касается упоминания героя-баннера, но, откровенно говоря, баннер обычно представляет собой изображение... Не знаю, как для вас, но примеры и описание выглядят так, как будто кто-то сделал бы с CSS... включая меня. Bootstrap можно использовать с jquery или без него, я не понимаю, почему вы упоминаете об этом. Я, наверное, где-то забыл запятую, или, очевидно, я должен был использовать маркеры для ясности.

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

Баннер героя — адаптивный дизайн [закрыто]
СпросиСетьПолитика конфиденциальности1y, 0v