Черно белый сайт: Подборка черно-белых сайтов и интернет магазинов

9 примеров черно-белого дизайна — Блог Mobios School

17.02.2021

Новости школы

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

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

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

Примеры таких сайтов:

• pandamonk
• northstreetcreative
• aristidebenoist

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

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

Примеры таких сайтов:

• blackm-officiel
• zacherynielson
• brickvest

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

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

Еще примеры черно-белых сайтов:

• madeofmillions
• raleigh
• huna

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

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

Например, добавить на фон темные изображения с определенным содержимым: с изображением листьев деревьев или фона ночного города. Идей много. Главное, быть креативным.

Топ-5 бесплатных сайтов для автоматической раскраски черно-белых фотографий

КОШКА /казань

Казань: инструкция по применениюНовости Казани и РТ

Эдуард Зинатуллин15 февраля, 2020

361 463

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

Colourise.sg

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

Сайт: colourise.sg
Стоимость: бесплатно, без ограничений.

Компьютерное зрение от Mail.ru

В рамках акции «Бессмертный полк» почтовый сервис Mail.ru запустил проект по раскраске старых фотографий наших бабушек и дедушек, прошедших через Великую Отечественную войну. Технология распознавания лиц и объектов на базе машинного обучения сначала реставрирует снимок, удаляя разрывы, пятна и царапины, а потом раскрашивает. Изначально проект запускался для колоризации портретов, но иногда превосходно раскрашивает архитектурные и природные ландшафты. Подсказка, если вы загружаете черно-белый снимок без повреждений, сохраняйте вариант без «реставрации», которая скрадывает мелкие детали.

Сайт: 9may.mail.ru
Стоимость: бесплатно, без ограничений.

MyHeritage

Платформа MyHeritage приобрела технологию автоматического раскрашивания фотографий по лицензии DeOldify — продукта, созданного экспертами в области «глубокого обучения» Джейсоном Энтиком и Даной Келли, которые совершенствовали свою разработку на протяжении двух лет. Разработчики изобрели оригинальный подход к раскрашиванию чёрно-белых фотографий с использованием алгоритмов машинного обучения, который отличается исключительным вниманием к мелким деталям. Снимок в шапке материала раскрашен именно этим алгоритмом.

Сайт: myheritage.com/incolor
Стоимость: несколько снимков после регистрации бесплатно (с ватермаркой), потом по платной подписке.

Раскраски от Артемия Лебедева

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

Сайт: color.artlebedev.ru
Стоимость: бесплатно, без ограничений.

Algorithmia.com

Сервис Colorification Colorified Image, созданный Ричардом Чжаном, Филиппом Изолой и Алексеем А. Эфросом, работает на алгоритме компьютерного зрения, который обучался на миллионе изображений из набора данных Imagenet (и продолжает учиться, в том числе и на ваших снимках). Этот сайт удобен тем, что не обязательно загружать на него фото для раскраски, можно вставить URL изображения из Интернета. Если результат вам понравится, можете скачать полученный результат.

Сайт: demos.algorithmia.com
Стоимость: бесплатно, без ограничений, но накладывается ватермарка сервиса.

В заключение

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

Рекомендуем: Топ-5 бесплатных сервисов, которые при помощи нейросетей улучшают фотографии

ПОДПИШИСЬ НА НАШИ ВИДЕОИСТОРИИ В YOUTUBE

Back to top button

20 прекрасных примеров черно-белых веб-сайтов

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

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

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

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

• ГТ Циркон

• Из любви к хлебу

• Oto Nove Swiss – Париж

• Двао

• Левон Аронян

• Универсальный Санс

• Джейкоб Фредериксен

• Танган

• Манк: Разрушитель

• Пленки 20/20

• Aēsop – ароматические свечи

• Музей Инсел Хомбройх

• Отряд Агентства

• Обмен шрифтами

• Сэм Годдард

• Центр философских технологий

• Женские лица

• ОТК Студия

• Особенности Longshot

• Лена Ситникова

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

• Фотопортфолио Темный

• Портфолио скульптора

• Техническое агентство

• Нефтяная промышленность

• Модельное агентство

GT Zirkon

Веб-сайт GT Zirkon является доказательством того, что сочетание черного и белого — отличный выбор для демонстрации красоты шрифтов. И хотя цветовая палитра на сайте минимальна, креативность команды, которая ее разработала, полная противоположность. Домашняя страница заполнена потрясающими анимированными GIF-файлами, которые захватывающим образом демонстрируют шрифт и его характеристики. Например, процесс разработки шрифта представлен в виде анимированного GIF-файла, который выглядит как упрощенная версия Photoshop. На нем показано, как Тобиас Рехштайнер, дизайнер шрифтов, манипулировал буквами, пока не получил окончательный вид шрифта GT Zirkon. Жирные и курсивные версии шрифта также представлены с использованием GIF-файлов. Первый вводится через ряд букв, показывающих разницу между толстыми и тонкими штрихами. Последний изображается с помощью анимированного транспортира — буквы наклоняются под углом 13°, и как только стрелка достигает этого числа, буквы наклоняются вправо. На всем сайте, но особенно в верхней части главной страницы, вы также заметите группу из обрисовывал в общих чертах переплетающиеся гипнотические струны, которые дико прорастали по всему контенту. Вы можете остановить их в любое время, нажав кнопку «Остановить рост». Если вы позволите им свободно расти, они будут образовывать химические соединения, а также различные трехмерные геометрические фигуры, в том числе то, что выглядит как драгоценные камни (дополняет название шрифта).

«Ради любви к хлебу»

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

Oto Nove Swiss — Париж

Oto Nove Swiss — это музыкальный фестиваль, который был организован в лондонском кафе Oto, но в 2020 году он проходил в Париже. Веб-сайт, созданный для этого случая, минимален, но запоминающийся. Только два цвета — белый (фон) и черный (контент), но умный выбор типографики и интересное навигационное меню делают его интересным для изучения. Что касается шрифтов, то сочетание тонкого моноширинного шрифта и крупного полужирного шрифта без засечек выглядит динамично и привлекает внимание зрителя. Меню расположено в дальней правой части экрана с вертикальными разделами, которые всегда видны. Как только вы нажмете на них, они займут весь экран. Вы также можете воспроизводить фрагменты песен артистов, участвовавших в фестивале, что делает веб-сайт более захватывающим и интересным для аудитории.

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

Левон Аронян

Левон Аронян — один из лучших гроссмейстеров мира. Дизайн его главного веб-сайта соответствует его профессии — четкий белый фон перемежается тонкими черными линиями, напоминающими шахматную доску . Когда вы прокручиваете домашнюю страницу вниз, трехмерная шахматная фигура составляет вам компанию. Фигура перемещается по клетчатому полотну, создавая забавное впечатление, но также направляя ваше внимание на значимые элементы на странице. Фигурка тоже белого цвета со светло-серыми краями. Что интересно в его внешнем виде, так это то, что черная типографика отражается от его поверхности. Сайт заполнен большими черными шрифтами без засечек и с засечками, которые расположены как горизонтально, так и вертикально по всему экрану, создавая захватывающий типографский опыт для зрителей. Возможно, самая привлекательная страница из всех — это страница «Веселье». Этот макет содержит информацию о некоторых интересах Левона. Есть 3D-иконки, представляющие его хобби и пристрастия, такие как музыка, книги, фильмы и т. д. Все они окрашены в разные оттенки, но благодаря белому фону сайт ни на секунду не переходит в цветовую перегрузку. Вместо этого контент удобен для глаз, независимо от его красочности. Этот веб-сайт может показаться простым на первый взгляд, но его дизайн, вдохновленный шахматами, иммерсивные анимационные эффекты и красивые визуальные эффекты делают его привлекательным для изучения.

Universal Sans

Universal Sans — это веб-сайт, на котором можно создавать и загружать собственные шрифты без засечек. На некоторых других веб-сайтах, связанных с типографикой, мы могли видеть, насколько хорошо черный текст выглядит на белом фоне, но этот пример демонстрирует, насколько эффективна комбинация двух цветов, даже если вы их инвертируете. Если цветовая схема сайта по умолчанию кажется вам слишком мощной, у вас есть возможность инвертировать цвета с помощью переключателя цветов. Какой бы вариант из двух вы ни выбрали, одно можно сказать наверняка — в обоих сценариях шрифт Universal Sans является звездой сайта, как и должно быть по праву. Чтобы настроить шрифт по своему вкусу, необходимо выполнить несколько шагов. Инструкции отображаются в правой части экрана. Различные размеры и вес шрифта, а также вертикальное и горизонтальное размещение текста делают этот веб-сайт приятным для просмотра, а классные параметры настройки делают его интересным для изучения и использования.

Черно-белые темы

View Collection

Манон

Тема «Портфолио и агентство»

Джейкоб Фредериксен

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

Танган

Находясь в Нанте, Танган — это место, куда можно отправиться, если вы хотите сбалансировать свою физическую или эмоциональную энергию. Вам помогут сделать это тремя методами – рефлексологией стоп, массажем Абхьянга и физиосканированием. Философия студии и три метода потрясающе представлены на увлекательном веб-сайте Tangan. Переходы от одного раздела к другому отмечаются изменением цвета фона, при этом на главной странице попеременно используются черный и белый фоны. Монохромные фотографии усиливают художественную привлекательность сайта , в то время как рекомендуемые видеоролики перенесут вас в опытные руки профессионалов Tangan. Веб-сайт наполнен элементами, которые делают его интересным для просмотра, например, горизонтально расположенный анимированный текст, который проходит от одной стороны экрана к другой, напоминая зрителям об услугах, предлагаемых студией. Существует также раздел с разделенным экраном, который подробно знакомит посетителей с услугами, с текстовым описанием слева и сопровождающими изображениями справа. Остальная часть сайта не менее привлекательна, а поразительное сочетание черных и белых элементов привлекает безраздельное внимание зрителя.

Манк: Разрушение

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

20/20 Films

20/20 Films — кинокомпания с красивым кинематографическим веб-сайтом. Особенно бросается в глаза домашняя страница. Элегантный золотой логотип компании размещен на фоне художественного полноэкранного черно-белого изображения с жутким, слегка вытянутым лицом. Сильный контраст между ними, а также искажение изображения и его монохроматический характер подчеркивают абстрактность и цвет логотипа, давая зрителям представление о том, на что похожа остальная часть сайта. На большинстве страниц фон преимущественно белый . Но на некоторых макетах, таких как «Реклама» и «Фото 20/20», экран разделен на две части, причем одна часть окрашена в черный цвет, а другая — в белый . Независимо от оттенка фона, представленные черно-белые изображения остаются неизменными. Макет «Фильмы» выглядит как рекламный щит кинотеатра, на котором повсюду расклеены анонсы фильмов. Поверхность белого фона на этой странице кажется поцарапанной и поврежденной, и эта маленькая деталь прекрасно дополняет кинематографическую привлекательность сайта . Страница «Журнал» содержит множество ярких изображений, но независимо от того, сколько цветов на этом макете, страница не выглядит слишком насыщенной из-за нейтральности белого фона.

Aēsop – Ароматические свечи

Коллекция ароматических свечей Aēsop была вдохновлена ​​древней астрономией, поэтому продукты названы в честь знаменитых астрономов – Птолемея, Аганиса и Каллиппа. Вступительный раздел предлагает зрителям очень приятные звуковые и визуальные впечатления, демонстрируя корабль, который пытается ориентироваться в бурных водах, полагаясь исключительно на звезды и маяк. Падающие звезды падают с неба, кто-то ловит одну из них, и свет звезды превращается в свечу. Это кинематографическое и захватывающее введение в коллекцию полностью монохромное и включает в себя захватывающую дух пиксельную графику Мэттиса Довье. После просмотра вступительного ролика (рекомендуем не пропускать его, так как он просто поразителен), вы сможете перемещаться по морскому миру и исследовать все представленные коллекции свечей, нажимая на маяк, чайку и т. д. Внутренние страницы эстетически отличаются с открывающей части. Они выглядят довольно элегантно и содержат цветные фотографии, которые красиво знакомят вас с проектом и продуктами.

Museum Insel Hombroich

Museum Insel Hombroich — музей, расположенный в городе Нойс, Германия, спроектированный художником Эрвином Херихом. Это прекрасное место объединяет искусство, природу и архитектуру, а внешний вид сайта отражает простоту и четкость его внешнего вида. Монохромные визуальные эффекты размещены на белом фоне, а подробности о каждой выставке отображаются под фотографиями. Когда вы наводите указатель мыши на избранные изображения, они становятся цветными. В левой части страницы также есть некоторый текст, включая ссылки меню. Шрифт, используемый на всем сайте, был вдохновлен Эрвином Херихом, художником, спроектировавшим музей. Его скульптуры известны резкими, чистыми и точными линиями, а шрифт был разработан, чтобы отражать внешний вид работ Хериха. Художественное использование черно-белого цвета, великолепные изображения, а также внешний вид и расположение типографики делают этот сайт похожим на цифровой журнал.

Squad Agency

Первое, что бросается в глаза на веб-сайте Squad Agency, — это толстый и массивный белый шрифт. Длина прописного логотипа без засечек в левой части экрана соответствует длине изображения справа. Логотип фиксируется, а изображения меняются, знакомя зрителей с некоторыми моделями Squad. Вместе эти два элемента создают электрическое вступление. Продолжая прокручивать домашнюю страницу, вы увидите много текста и, по-видимому, не так много изображений. Однако тяжелая белая типографика выделяется на черном фоне. Жирный шрифт используется на сайте в различных размерах и стилях, что делает текстовое содержимое привлекательным и достаточно интересным само по себе. Но когда вы наводите курсор на названия моделей, их изображения появляются в окне просмотра. Изображения преимущественно черно-белые, что дополняет эстетику сайта. Образ кажется почти деликатным по сравнению с массивностью шрифта Druk, и кажется, что они идеально уравновешивают друг друга.

Fontshare

Fontshare — это веб-сайт, созданный компанией Indian Type Foundry. На Fontshare ITF бесплатно делится своими высококачественными шрифтами с пользователями, делая их доступными для тех, кто ищет великолепную типографику. Веб-сайт разработан в минималистском стиле, который подчеркивает красоту шрифтов, удерживая внимание зрителя на отображаемых буквах. На экране только два цвета — черный и белый. Контраст между белым фоном и черным шрифтом обеспечивает хорошую видимость каждой детали каждой буквы. Также есть много линий сетки, разделяющих все шрифты, пункты меню и все разделы сайта друг от друга. Сайт включает в себя несколько интересных функций, таких как возможность изменения стиля и размера букв на месте. Таким образом, вы можете проверить, соответствует ли тот или иной шрифт всем вашим требованиям. Более того, вы можете ввести текст самостоятельно и посмотреть, как каждый шрифт выглядит в действии. И хотя на сайте много элементов, интерфейс не кажется перегруженным. Белый фон немного смягчает все, обеспечивая четкий и приятный просмотр для всех, кто посещает сайт.

Сэм Годдард

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

Центр философских технологий

Центр философских технологий — это инициатива Университета штата Аризона, которая собирает экспертов из всех слоев общества для анализа и обсуждения всех вопросов философии, дизайна и технологий. Веб-сайт CPT отражает обширность этих трех областей, а также их взаимосвязанность. Это сразу указано в верхней части главной страницы, где размещен плавающий логотип. Буквы «CPT» непрерывно перемещаются между скобками — символ, часто используемый не только для дополнительного пояснения, но и для создания связи между элементами. Скрытое меню белое, но при наведении курсора на ссылки появляется прозрачная светло-серая пелена, закрывающая меню. Курсор мыши имеет форму черного круга, но когда вы помещаете его на интерактивные элементы, он расширяется, принимая форму прямоугольника с закругленными краями. Сайт украшен красивый и тонкий бело-серый градиент. Вы можете увидеть его на фоне, а также на большинстве графических элементов. Переход от одного цвета к другому также можно было наблюдать как символ непрерывного перехода между, казалось бы, несвязанными полями. Все разделы сайта представлены на главной странице в виде градиентных квадратов с едва различимыми краями, что еще раз говорит о том, насколько взаимосвязаны дизайн, философия и технологии. При наведении края квадратов становятся яркими, как будто освещаются белым светодиодом, контрастируя с тонкостью окружающих градиентов.

Женские лица

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

OTK Studio

OTK Studio — студия дизайна и технологий Оливера Томаса Кляйна. Дизайн сайта немного необычен, весь контент размещен всего в одном разделе. Экран разделен на две части: слева вы можете увидеть список проектов, над которыми работал Кляйн, а справа вы можете изучить визуальные эффекты, представляющие каждый проект. Крупная типографика, черно-белое содержимое и урезанный дизайн создают легкую бруталистскую атмосферу. Чтобы указать тип работы, которую он проделал над каждым проектом, Клейн выбрал крошечные цветные круги, каждый цвет которых символизировал определенное действие (например, художественное направление, дизайн и т. д.). Он поместил их рядом с названием каждого бренда, с которым он работал. Поскольку шрифт полностью выполнен в черном цвете, яркие цвета кругов еще больше выделяются на белом фоне. При наведении названия брендов становятся ярко-синими. И когда вы нажимаете на них, на экране появляется краткое описание того, что Кляйн сделал в проекте, вместе с избранными изображениями слева. Содержание красиво организовано, информативно, но лаконично. Этот веб-сайт поразительно демонстрирует творчество Кляйна, знакомя зрителей с его гением запоминающимся и аутентичным способом.

Longshot Features

Longshot Features — производственная компания, основанная Джо Талботом и Джимми Фоллсом. Веб-сайт производит сильное первое впечатление на посетителей благодаря черно-белому рисунку Mattis Dovier . Используя горизонтальную прокрутку, вы перемещаетесь по серии из анимированных пиксельных персонажей, которые заманивают вас в удивительный мир фильмов компании. Дизайн сайта напоминает фильм нуар , он выглядит одновременно классическим и современным благодаря интересному анимированному контенту. Каждый представленный персонаж представляет один из фильмов Лонгшота — по щелчку вы получите доступ к отдельным страницам проекта, которые содержат изображения в цвете. Веб-сайт также позволяет пользователям проигрывать музыку, написанную Джо Талботом, что подчеркивает особый характер сайта.

Лена Ситникова

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

Заключительные слова

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

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

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

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

Примеры макетов веб-сайтов для вдохновения

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

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

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

НЕОГРАНИЧЕННАЯ ЗАГРУЗКА: более 50 миллионов надстроек и дизайнерских ресурсов типографика с интервалами. Это определенно не является нормой для макета веб-сайта, поскольку в нем нет определенной сетки или статических элементов.

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

This Also

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

Сибирь

Еще одна творческая студия Siberia.io разделяет свой интерфейс на белые и черные фоновые участки. Цвета текста чередуются между белым и черным для сохранения контраста.

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

The Intercept

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

В целом этот стиль дизайна создает ощущение надежности и профессионализма. Мне очень нравится The Intercept за ее содержание, но дизайн также невероятен, что делает чтение легким.

Global Post

Global Post — еще один отличный новостной сайт с похожим черно-белым дизайном. Новости занимают центральное место, а цвета сведены к абсолютному минимуму.

Макет основан на нескольких цветах подсветки в оттенках красного, но 95% макета — чисто белый и черный. Это типично для новостных сайтов, которые хотят сохранить фокус.

Furlined

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

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

Великое недовольство

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

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

Сид Ли

На сайте Сида Ли представлен странный набор фотографий и контента в виде сетки. Он управляется темным фоном, что придает макету более индивидуальный вид.

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

Блаженное осознание

Blissful Aware — это сайт, управляемый дизайнером Джошем Лейном. Это должен быть личный сайт, где он может поделиться своим мнением по интересным темам.

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

3 Сент-Джеймс Стрит

Вот интересное место для 3 St James’ Square, здания в центре Лондона. Это относительно простой макет с использованием более темного фона в сочетании с более светлым фоном и высокой контрастностью текста. Это также один из немногих сайтов, которые я видел с использованием домена верхнего уровня .london .

Fader

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

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

The New York Times

Напротив, вот сайт, о котором должен знать каждый. The New York Times издается уже более 100 лет и продолжает оставаться надежным источником основных новостей. Их сайт может показаться пресным, но он делает все правильно с точки зрения содержания.

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

Master Grinding

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

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

Абдузеедо

В популярном дизайнерском блоге Abduzeedo недавно был изменен дизайн темного текста на простом белом фоне. Столбцы слились в невидимые направляющие для макета.

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

70percentpure

Стефани Дюваль — независимый журналист родом из Бельгии. Сайт 70percentpure — это ее личный веб-сайт/блог, где она демонстрирует свои писательские и фотоработы.

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

JR & Associée

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

Kineda

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

Лия Хаггар

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

Лекции DO

Лекции DO представляют собой серию семинаров и лекций, записанных и опубликованных в Интернете. На сайте размещены эти видеоролики и связанный с ними контент для заинтересованных читателей.

Это очень чистый макет с миниатюрами фотографий и четкой типографикой. Все фотографии черно-белые, чтобы сохранить соответствие цветовой гамме.

Журнал GOOD

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

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

Wired

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

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

Бриттани Эстер

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

Village

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

Forsman & Bodenfors

Forsman & Bodenfors — независимое креативное агентство из Швеции. Их сайт проявляет большой интерес к типографике с большими жирными заголовками и сочетанием текста в верхнем и нижнем регистре.

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

Нью-Йорк Мэг

NY Mag использует такой же макет, как и NYT. Несколько колонок, короткие фрагменты заголовков и короткие эскизы, разбросанные по всей странице.