Черно белые сайты – Чёрно-белые сайты

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

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

Эти черно-белые темы и веб-сайты выделяются своей простотой и элегантностью.

6 примеров правильного использования пустого пространства в веб-дизайне

Содержание

• 1 Inverto WP
• 2 Foreal
• 3 Black&White
• 4 Black & White
• 5 Alinti
• 6 Raven
• 7 Pen and Paper
• 8 ALBIST
• 9 Melrose
• 10 Fuse Design
• 11 Zofia Chylak
• 12 TH=SUM
• 13 A Book of Beards
• 14 Incredible Types
• 15 Crush Studio
• 16 Dumbo Townhouses
• 17 Guido Frascadore – Analyst and Developer for the creative industries
• 18 Blobfolio
• 19 Francesco Prisco / Graphic & Web Designer
• 20 Omina Romana
  • 20.1 ЭТО ИНТЕРЕСНО!

Inverto WP

Foreal

Black&White

Black & White

Alinti

Raven

Pen and Paper

ALBIST

Melrose

Fuse Design

Zofia Chylak

TH=SUM

A Book of Beards

Incredible Types

Crush Studio

Dumbo Townhouses

Guido Frascadore – Analyst and Developer for the creative industries

Blobfolio

Francesco Prisco / Graphic & Web Designer

Omina Romana

ЭТО ИНТЕРЕСНО!

pt-blog.ru

Свежие черно-белые сайты

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

feudi.it

mstq.io

clapat.ro

litiguard.eu

andrewaden.com

ajax.systems

luciekoldova.com

wearewanaka.com

caroselling.it

mauditepoutinefilm.ca

wellingtonequestrianagency.com

refresh-studio.com

katrinastumbos.com

clapat.ro

schwarz-bild.de

yournamesaves.org

convicts.nyc

tedxportland.com

jem-paris.com

quantagroup.co.uk

Автор подборки — Дежурка

Смотрите также:

• Крутые светлые оттенки в веб-дизайне
• Буйство красок в веб-дизайне
• Темный веб-дизайн

www.dejurka.ru

Стильные сайты в черно-белых цветах

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

onemore.tv 

etchsalon.com

boat-mag.com 

danielspatzek.com 

roytheunissen.com 

letters-inc.jp 

matzemachtdesign.de

antoinevidal.fr 

theppd.com 

jilljillstuart.com 

stylepit.com 

cincodesign.com 

johnballmusic.com

backerbang.no

boylen.com.au

blank.io

levivanveluw.com

irregularnoise.com 

trafficlight.se 

teresa.premiumcoding.com

eup.volkswagen.no 

urbandesignprize.org

murmure.me 

Автор подборки — Дежурка

Смотрите также:

• Монохромные сайты
• Мрачный веб-дизайн
• Сайты в классных цветовых гаммах

www.dejurka.ru

50 монохромных образцов дизайна web-сайтов / Habr

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

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

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

Голубой

Пурпурный

Красный

Оранжевый

Коричневый

Зеленый

Черный, белый и градиент серого

habr.com

Потрясающий черно-белый веб-дизайн в деталях / WAYUP

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

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

Черно-белый дизайн всегда был и остается довольно популярным в любой сфере (интерьеры, искусство, веб). Особенность такой популярности в том, что и в веб-дизайне, и в дизайне интерьеров происходит из года в год переход к более минималистическим стилям, в которых преобладают белый фон и черные элементы. Зачастую даже вдохновение для одного удобно черпать из другого. Но как вы увидите из этого материала, существует множество потрясающих черно-белых дизайнерских интернет-проектов, которые просто стоит изучить поближе и обратить внимание на интересные детали. Возможно, их стоит называть даже «изюминками».

И вот с чего начнем.

Черно-белое и цветность

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

Проекты: pandamonk, northstreetcreative, epbih, aristidebenoist, levitan-eng отлично демонстрируют эту идею. На страницах разбросаны цветные элементы, изображения, выделения пунктов меню, но при этом сам брендинг, основа дизайна, создана в черном и белом или очень светло-кремовом оттенке.

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

Роскошь черного

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

Обратимся к вариантам: blackm-officiel, zacherynielson, blkout, brickvest, где черный цвет доминирует, но не поглощает собой все прочие цвета.  Фон и изображения используют богатый черный с большим количеством синеватых оттенков, серых, желтых и голубых. Это современное сочетание, оригинальное в истинно черно-белом  варианте выглядит визуально более привлекательным. Хотя такая палитра вполне может использоваться в любой тематике сайта, в любом графическом исполнении. Цветовая схема универсальна, а оттенки цветности придают ей больше раскованности.

Белый в приоритете

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

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

Без вторичности цветов

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

Вот примеры printworkslondon, kurppahosk, orely, leeroy, bscmp, scalzodesign, что обладают черно-белой палитрой, хотя изображения и допускаются цветными. Но при этом эффект потрясающий, поскольку черное и белое доминирует, расставляет акценты и придает серьезности и брутальности проекту, бренду, контенту.

Дополняя анимацией

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

Но…

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

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

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

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

Выразительность

Черно-белый дизайн имеет некоторое чувство определенности, обладает характером по своей природе. Такой дизайн ощущается пользователями более остро, более четко воспринимается, более серьезно, чем прочие вариации без акцента на черно-белое сочетание.

Взглянем на dogstudio, conceptbillmack, mirandabikeparts, cocoon и задержим внимание, возможно,… и невольно. Но мы дизайнеры, поэтому суть таких вариантов в том, чтобы подчеркнуть акцент (опять же) и создать еще больше выразительности для тех элементов, что используются в дизайне.

Каждый фон, дополнительные изображения (портрет, песик, фотографии людей, предметов и пр.) – от них трудно отвести взгляд.  Чем эффектнее сама фотография, тем сильнее она притягивает внимание человека. Песик с алыми глазами, портрет счастливого скульптора с добрым взглядом, произведения искусства, кофейные заросли и обилие листвы – на это трудно не смотреть и еще труднее удержаться от рассматривания. Белый текст что-то сообщает пользователям. Но он рядом с центральной частью, хотя немного, но попадает в поле зрения пользователя.

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

Без искусства

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

Например, violet, creativity-class, brunoferdinand, sansbureau, orely по-разному представляют вариант черно-белого дизайна без художественных работ в оформлении. Множественные тени, переходы, легкие диагональные линии или чередование черного и белого, абстракции и россыпь точек создают, с одной стороны, законченность визуализации, с другой, отлично справляются с заменой привычных всем фотографиям в фоне.

При этом акцент остается на основном контенте, а узор добавляет и графичности, и строгости одновременно.

Завершение

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

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

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

wayup.in