Сайты с темным фоном: Как и когда создавать сайт с черным фоном / Полезное / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY – Что лучше, черный фон сайта или белый? — Хабр Q&A

Содержание

Темный веб-дизайн. Читайте на Cossa.ru

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

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

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

Недавний опрос показал, что светлые темы оформления сайтов по душе основной части веб-серферов (47% опрошенных). Главная причина этого — читабельность. Большинству людей не нравится читать светлый текст на темном фоне, потому что «устают глаза», что делает опыт посещения таких сайтов не особенно приятным.

С другой стороны, 10% респондентов отметили, что им всегда больше нравились сайты с темным фоном, а еще 36% посчитали, что удачность или неудачность темной темы оформления напрямую зависит от типа самого сайта.

Так какой же ответ верный? Выбор субъективен.

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

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

Больше свободного пространства

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

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

Шаблон Black Estate часто встречается в сети. Уникальным его делает именно эффективное использование свободного пространства для выделения тех или иных элементов.

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

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

Идея здесь в том, что свободное пространство постепенно ведет пользователя к концу страницы.

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

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

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

Текстовое свободное пространство

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

Как и в дизайне вообще, улучшения читабельности темных сайтов можно добиться, увеличив пустое пространство путем регулировки размера параграфов, кернинга и высоты строки (leading).

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

Еще один способ улучшить читабельность текста при использовании темного фона — увеличение размера шрифта. Увеличение шрифта также означает большее количество свободного пространства на странице. Чем больше буквы, тем больше пустого места будет вокруг них и между ними.

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

Контрастность текста

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

Поиск наилучшей контрастности означает баланс «темноты» фона и «светлоты» текста.

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

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

Работа с шрифтами

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

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

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

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

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

Минимальные цветовые схемы

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

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

Старайтесь использовать один или два цвета. Чтобы добавить новый цвет, попробуйте темный фон.

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

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

Переключатель стилей

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

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

Для этого понадобится, собственно, два стиля — один для дефолтного темного шаблона, второй для альтернативного светлого.

По этому поводу есть отличный туториал на Site Point. Вместо использования «оранжевой», «голубой» и «белой» версий стилей, которые в нем упомянуты, просто возьмите «светлый» и «темный» стили.

Элегантный темный дизайн

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

Сайт Larissa Mee использует для фона простой шаблон в винтажном стиле, задавая тон элегантности. Другие причудливые особенности оформления придают дизайну оригинальности.

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

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

Сайт Depth Core обладает очень чистым дизайном с темным фоном, который добавляет стиля и класса. Кроме того, в дизайне чувствуется авторитетность. Подобная элегантность представляет работу из портфолио дизайнера как более ценный результат.

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

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

Но не только художественные работы могут выглядеть в более выгодном свете при использовании темного дизайна — это также касается и продуктов. Темный и «прилизанный» (sleek) дизайн, как Tapbots и подобные, помогает продемонстрировать тот факт, что продукт продается.

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

Креативный темный дизайн

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

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

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

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

Темный гранжевый дизайн, как Trozo, кажется, нарушает все возможные правила: загруженные текстуры, захламленный шаблон и широкий набор цветов оформления. И при всем при этом сайт отлично работает. Как такое возможно?

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

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

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

Это пустое пространство наиболее очевидно слева от логотипа сайта, на правой стороне страницы и под навигацией.

Даже между «Exhibit 01» и «Exhibit 02» больше свободного пространства, чем обычно можно встретить на подобных сайтах.

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

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

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

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

Заключение

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

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

Источник: Webdesigner Depot

Создаём красивый дизайн сайта с темным фоном и тонах

разработка дизайна сайта

От автора: из этого учебника мы узнаем, как разработать качественный дизайн веб-сайта в темных тонах в Adobe Photoshop. По мере прохождения учебного пособия по разработке сайта с темным фоном мы поработаем с простыми формами (прямоугольники, линии, стрелки и т.д.), эффектами слоя, шаблонами, импортированием и стилями параграфа, а также множеством других дизайнерских техник Photoshop’а, которые можно приспособить к дизайну интерфейсов своих вебсайтов.

Программа: Adobe Photoshop

Версия: CS4 (или выше)

Сложность: средняя

Примерное время выполнения: 2 часа

разработка дизайна сайта

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

Скачать исходники

Конечный продукт (что Вы получите)

разработка дизайна сайта

Об авторе

Джулиан Шанилло (Julian Chaniolleau), также известный как Devilcantburn, графический и веб-дизайнер на фрилансе. Он также является автором статей на ThemeForest, его «перу» принадлежат такие шаблоны, как 96Display или Stereoline, его работы можно посмотреть на devilcantburn.com.

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

Давайте примемся за работу!

Шаг 1. Определяем документ

Начните с создания в Photoshop’е нового документа размером 1200px x 1600px. Удостоверьтесь, что разрешение установлено на 72 pxs/дюйм, а фон определен белым. Нам нужно раскрыть фоновый слой так, чтобы можно было добавить эффекты слоя, щелкните по фону правой кнопкой мыши и выберите "Layer from Background" (Слой из фона). Потом вы можете снова переименовать layer в background..

Заполните фон цветом #101010.

Теперь создайте следующие направляющие (Menu (Меню) > View (Вид) > New guide (Новая направляющая)…) :

120px по вертикали

600px по вертикали

1080px по вертикали

У вас теперь есть границы и середина области интерфейса.

Шаг 2. Организуйте группы…

Для рабочего процесса очень важна организация – так что следующим шагом мы начнем создавать группы слоев (Layer Groups). Организованное начало важно по одной основной причине: большинство огромных проектов вебсайтов при завершении работы имеют сотни слоев, так что если не начать с умной организации, то легко потеряться, если вы не потратите некоторое время на группирование элементов в папки ("folders") и тщательное наименование всего и вся.

В панели слоев (Layers panel) щелкните на иконку для создания новой папки, дважды щелкните на название папки для его редактирования. Сделайте то же самое для всех папок.

разработка дизайна сайта

Нам нужны следующие основные папки для слоев:

Header (заголовок)

Slider (слайдер)

Main (основная часть)

Footer (нижний колонтитул)

разработка дизайна сайта

Шаг 3. Создайте заголовок

Выберите папку "header" в панели слоев. Затем выберите прямоугольник (rectangle tool) из области векторных форм (Vector Shapes) инструментального ящика:

разработка дизайна сайта

Начертите прямоугольник. Назовите его вроде "Top bar bg". Нажмите Ctrl+T или Cmd+T (для Mac) и установите его свойства на 1200px ширины на 10px высоты:

разработка дизайна сайта

Теперь добавим несколько тонких стилей; дважды щелкните на цветное контрольное изображение в панели слоев для установления цвета на #252525. Дважды щелкните на слой, чтобы установить эффекты слоя как здесь:

разработка дизайна сайта

Эта тонкая внутренняя тень ("inner shadow") добавит к низу прямоугольника эффект кромки – нам важно отделить его от остальной схемы заголовка.

Шаг 4. Создайте меню

Создайте в группе HEADER новую папку под именем "Top Menu".

Начертите новый прямоугольник. Назовите его типа "Top Menu bg". Нажмите Ctrl+T или Apple+T для установления свойств как в "Top bar bg", но с высотой 90px и 10px в осевой линии Y. Так, этот прямоугольник будет находиться в панели слоев прямо под слоем "Top nar bg".

разработка дизайна сайта

Создайте нужный вам текст пунктов меню. Я использую для создания меню шрифт "Droid Serif", но вы можете то, что хотите. Расположите его в 20px от правой направляющей линии.

разработка дизайна сайта

Я вставляю по 4 пробела ("spaces") (4 раза нажмите на клавишу пробела) между каждым пунктом и выбираю размер шрифта 18px.

Шаг 5. Разместите логотип

Создайте в группе HEADER над всеми группами новую папку с названием "Top Logo". Выберите ее и перейдите к Menu (Меню) > Files (Файлы) > Import (Импорт). Я включил в папку исходных данных образец логотипа под названием "logo_zombie.psd". Выберите его и расположите в 130px слева и 5px сверху.

Можете добавить к логотипу какие угодно новые эффекты стиля.

Шаг 6. Создайте слайдер

Выберите группу SLIDER, создайте прямоугольник как в Шаге 3, и установите свойства на 400px высоты и 100px в осевой линии Y.

Назовите его примерно "Gradient" и дважды щелкните на цветное контрольное изображение в панели слоев для определения цвета #77b400. Дважды щелкните на слой для установления эффектов слоя как здесь:

разработка дизайна сайта

Градиент от черного (#00000) с непрозрачностью 100% до черного с непрозрачностью 0

разработка дизайна сайта

Теперь у вас должен получиться эскиз вроде этого:

разработка дизайна сайта

Стратегия добавления теневого градиента ("shadow gradient") вместо использования фиксированных цветов очень важна, потому что позволит нам позднее легко менять цвета путем регулировки основного цвета прямоугольника.

Далее создайте новую папку с названием "slider_block". Создайте прямоугольник (как обычно, при помощи векторного инструмента Закругленный прямоугольник (U)), в этой группе под именем "Transparency".

разработка дизайна сайта

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

разработка дизайна сайта

Скопируйте слой "Transparency", удалите опции эффектов слоя и назовите его "picture area". Установите непрозрачность фона на 100% и уменьшите согласно этим значениям для создания эффекта многослойности:

разработка дизайна сайта

Шаг 7. Создайте управляющие элементы слайдера

Создайте новый документ 100px на 100px. Выберите из инструментария пользовательскую векторную фигуру Закругленный прямоугольник (U) и щелкните правой кнопкой мыши на документ, чтобы открыть список пользовательских векторных фигур. Чтобы создать стрелку, я начну с фигуры стрелки по умолчанию, а затем мы ее модифицируем под себя:

разработка дизайна сайта

Создайте фигуру шириной примерно 50px. Назовите слой "Arrow slider". Преобразуйте ее, как захотите… при помощи инструмента white arrow (A), вы можете приспособить векторные дорожки и сделать любую собственную стрелку…

разработка дизайна сайта

Наложите на слой эффекты при помощи этих параметров:

разработка дизайна сайта

Удалите фон этого документа и сохраните его как: ArrowSlider.psd в папке PSD.

Поместите стрелку в группу "slider_block". Чтобы сделать это: Menu (Меню) > File (Файл) > Import (Импорт)… Выберите ArrowSlider.psd и поместите его в любую, какую захотите, позицию рядом со слайдером.

разработка дизайна сайта

Скопируйте слой стрелки (Ctrl+J или Cmd+J) для создания стрелки слева и разместите его.

Используйте для вращения стрелки до нужного положения Menu (Меню) > Edit (Редактировать) > Transform (Трансформирование) > Rotate on horizontal axis (Повернуть по горизонтальной оси).

Шаг 8. Подсветите слайдер

Скройте группу "slider_block".

Создайте новый пустой слой и возьмите инструмент Выделение окружностью (Circle selection (M)) для создания окружности примерно в 200px.

Заполните ее белым цветом.

разработка дизайна сайта

Реализуйте выделение, затем используйте Filter (Фильтр) > Gaussian Blur (Размытие Гаусса) и установите на 50px.

разработка дизайна сайта

Установите слияние слоя на "overlay" (наложение) и передвиньте наверх слайдера.

Дважды скопируйте этот слой и разместите слои внизу областьи слайдера слева и справа…

разработка дизайна сайта

Шаг 9. Выделите слайдер

Скопируйте слой "gradient" и переименуйте в "dark bar". Уменьшите высоту до 20px и разместите внизу слоя "gradient".

разработка дизайна сайта

Измените цвет слоя на черный вместо цвета градиента и установите непрозрачность фона слоя на 60%.

Дважды щелкните, чтобы открыть опции эффектов слоя и создайте Отбросить тень (dropshadow) и Внутреннюю тень (innershadow), как здесь:

разработка дизайна сайта

разработка дизайна сайта

Сдвиньте слой вниз на 1px.

Теперь у вас между слайдером и черным фоном есть красиво выделенная линия.

разработка дизайна сайта

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

разработка дизайна сайта

Шаг 10. Заставьте слайдер парить над поверхностью!

Откройте файл background.jpg из папки с исходниками (из скачанных файлов) и перейдите к Menu (Меню) > Edit (Редактировать) > Define pattern (Задать шаблон)…. Затем закройте файл.

Теперь выберите слой фона, щелкните на него дважды, чтобы открыть опции эффектов слоя, и щелкните на таблицу шаблонов (Patterns). Выберите здесь новый, только что созданный фон.

Теперь сделайте выделение слоя прозрачности (Transparency) (Ctrl + щелчок или Cmd + щелчок на слой).

Создайте новый слой с названием "Shadow", поместите его под слой "Transparency".

Заполните его черным цветом и добавьте Размытие Гаусса (Gaussian Blur).

Menu (Меню) > Filters (Фильтры) > Blurs (Размытия) > Gaussian Blur (Размытие Гаусса)… и сделайте его длиной 20px.

Теперь преобразуйте его, чтобы смотрелось как отбрасываемая тень (dropshadow)….

разработка дизайна сайта

Снова используйте Menu (Меню) > Filters (Фильтры) > Blurs (Размытия) > Gaussian Blur (Размытие Гаусса)… но уже с длиной 5px.

И снова преобразуйте его, чтобы размер подходил под слой прозрачности (transparency)….

разработка дизайна сайта

Выберите слой "Shadow" и одновременно сделайте выделение слоя "Transparency" (Ctrl+ щелчок или Cmd+ щелчок на слой в панели слоев).

Теперь переверните выделение Ctrl+i или Cmd+i и щелкните на иконку для создания маски непрозрачности в слое "Shadow". Тень сейчас скрыта под областью прозрачности.

разработка дизайна сайта

Шаг 11. Улучшите логотип

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

Создайте под слоем логотипа новый пустой слой и назовите его "shadow logo". Сделайте выделение слоя логотипа и заполните слой "shadow logo" черным.

Добавьте Размытие Гаусса (Gaussian Blur) длиной 1,5px.

Трансформируйте его. Ctrl + T или Cmd + T, чтобы трансформировать, сдвиньте контрольную точку полностью влево и передвиньте правый идентификатор вниз на 20px…

разработка дизайна сайта

Теперь у вас имеется красивый эффект глубокой тени. Можете, если хотите, добавить еще эффектов к самому логотипу!

Шаг 12. Определите колонки

Теперь мы добавим дополнительные направляющие, чтобы создать 4 колонки, в которые планируется поместить остальной контент…

Создайте следующие направляющие (Menu (Меню)> View (Вид)> New guide (Новая направляющая)…) :

355px по вертикали

375px по вертикали

590px по вертикали l

610px по вертикали

825px по вертикали

845px по вертикали

У нас есть теперь 4 колонки по 215px каждая и по 20px между ними.

Шаг 13. Блок девиза

Импортируйте geek_zombie.png из папки с исходными данными и разместите его посредине первой колонки.

Создайте большую строку девиза с нужным вам текстом. Я использовал шрифт "Droid Serif" размером 30px и высотой строки 42pt. Конечно, вы можете пользоваться своей собственной разметкой текста

Начертите под девизом прямоугольник высотой 7px.

Импортируйте geek_zombie.png из папки с исходными данными и разместите его посредине первой колонки.

Создайте большую строку девиза с нужным вам текстом. Я использовал шрифт "Droid Serif" размером 30px и высотой строки 42pt. Конечно, вы можете пользоваться своей собственной разметкой текста

Начертите под девизом прямоугольник высотой 7px.

разработка дизайна сайта

Создайте на черном прямоугольнике эффекты слоя, как здесь:

разработка дизайна сайта

У вас получилась полоса с красивой фаской (эффектом объемности).

разработка дизайна сайта

Выберите 3 слоя (Зомби + Девиз + черная полоса) и нажмите Ctrl + G или Cmd + G, чтобы их сгруппировать. Переименуйте группу "Slogan". Обратите внимание, насколько организованными мы остаемся в процессе работы!

Шаг 14. Блок первой колонки

Возьмите инструмент Текст (Text) и создайте название. Я снова использую шрифт 30pt – заметьте, как он похож на девиз, чтобы оформление было схожим. Таким образом достигается последовательный, профессиональный облик всего дизайна.

Определите область текста примерно в 128px от заголовка и вставьте в нее маленький текст – "заполнитель". Я пользуюсь 13pt Arial, но вы можете взять любой, который вам нравится.

Скопируйте созданную нами ранее для девиза черную полосу и вставьте ее под текстом в 20px от низа текста.
Измените размер так, чтобы он заполнил первую колонку.

разработка дизайна сайта

Создайте при помощи векторной формы (Vector Shape (U) область рисунка 215 x 88px.

Скопируйте ее, переименуйте в "Tranparency_1col"и растяните в длину, чтобы получился блок 215 x 108px.

Нажмите Ctrl+, или Cmd+, чтобы сдвинуть слой в панели слоев вниз.

Выберите слой "Transparency" и скопируйте эффекты стиля, чтобы применить их к только что скопированному слою ("Tranparency_1col").

Теперь можно вставить в область рисунка свое изображение. Щелкните правой кнопкой мыши на изображение и выберите "Create clipping mask" (Создать отсекающую маску).

разработка дизайна сайта

Шаг 15. Создайте остальные колонки

Теперь можно скопировать первую колонку (группа слоя), а затем сдвинуть ее к второй колонке. Смените содержимое (изображение/текст) на нужное вам.

Сделайте то же самое для колонок 3 и 4…

разработка дизайна сайта

Шаг 16. Нижний колонтитул

Перейдите к Menu (Меню) > Image (Изображение) > Canvas size (Размер области) и отредактируйте размер области как тут:

разработка дизайна сайта

Начертите прямоугольник. Назовите его вроде "Footer bg". Нажмите Ctrl+T или Cmd+T (для Mac) и установите свойства на:

разработка дизайна сайта

Дважды щелкните на цветное контрольное изображение в панели слоев, чтобы установить цвет на #101010. Дважды щелкните на слой, чтобы установить эффекты слоя, как здесь:

разработка дизайна сайта

Выберите и скопируйте слои "dark bar" и "Gradient" из группы Slider.

Сгруппируйте слои и разместите их в панели слоев под "footer bg".

Передвиньте их вниз документа.

Измените размер, чтобы создать нужный стиль.

В своем примере я сделал слой градиента высотой 35px и слой "Dark bar" – высотой 8px …

Вставьте логотип вниз прямо в 20px от направляющей справа.

разработка дизайна сайта

Скопируйте пункты верхнего меню, чтобы вставить их в нижний колонтитул поверх слоя "footer bg".

Создайте строку copyright шрифтом Arial, 11pt, черного цвета.

разработка дизайна сайта

Скопируйте "footer bg" и уменьшите его высоту до 10px.

Сдвиньте его прямо на "footer bg". Так вы создадите для нижнего меню красивый эффект фаски.

разработка дизайна сайта

Готово! Создавайте собственные пользовательские версии!

разработка дизайна сайта

разработка дизайна сайта

разработка дизайна сайта

Заключение

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

киберсант-вебмастер

Автор: DevilCantBurn

Источник: http://webdesign.tutsplus.com/

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

E-mail: [email protected]

P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

разработка дизайна сайта

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее киберсант-вебмастер

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

Смотреть видео

Бесплатные CSS и xHTML шаблоны с тёмным дизайном для Ваших проектов

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

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

Ну а если Вы не любите тёмный дизайн, тогда рекомендую посмотреть прошлые подборки:

  • 20 свежих HTML шаблонов для Ваших будущих веб – проектов
  • Новые и бесплатные CSS, HTML5 шаблоны 2012 года
  • Скачать свежие CSS3 и HTML5 шаблоны для сайта

AGD Portfolio

Пример ι Скачать исходники

Шаблон BlueMasters

Пример ι Скачать исходники

Brightfolio

Пример ι Скачать исходники

Software

Пример ι Скачать исходники

Бесплатный шаблон Rogue

Пример ι Скачать исходники

SindromK

Пример ι Скачать исходники

Schizo Octopus

Пример ι Скачать исходники

ProFolio (PHP)

Пример ι Скачать исходники

Real Estate

Пример ι Скачать исходники

iPhone App

Пример ι Скачать исходники

Unite

Пример ι Скачать исходники

Car Club

Пример ι Скачать исходники

Dark Pro

Пример ι Скачать исходники

Line

Пример ι Скачать исходники

Basic HTML5

Пример ι Скачать исходники

Dark Portfolio

Пример ι Скачать исходники

O’No! Typography

Пример ι Скачать исходники

Car Repair

Пример ι Скачать исходники

iLuvType

Пример ι Скачать исходники

Dark

Пример ι Скачать исходники

AutoPortal

Пример ι Скачать исходники

15 интересных и стильных дизайнов сайтов в темных тонах | DesigNonstop

15 интересных и стильных дизайнов сайтов в темных тонах

2

15 стильных примеров дизайнов сайтовСегодняшняя стильная подборка посвящена сайтам, сделанным в темных тонах. Итак, первым встречайте 42 Angels с акцентированной голубой геометрией. Оригинальность дизайна Labubbly достигнута за счет нестандартной типографики и комбинации шрифтов. Для оформления Carbonads было использовано разноцветное вертикальное меню, которое ненавязчиво разбавило общую черноту сайта. У This Mans Life к находкам можно отнести текстурный задний фон, аутентичное меню и лого. В дизайне сайта Alien Bikes очень оригинально использованы детали велосипеда на темном фоне с желтыми акцентами. А в Riff Raff тон задает красивый малиново-красный цвет бокового элемента.

1. 42 Angels
Перейти на 42 Angels

2. Labubbly
Перейти на Labubbly

3. Carbonads
Перейти на Carbonads

4. This Mans Life
Перейти на This Mans Life

5. Ffff All Back
Перейти на Ffff All Back

6. Alien Bikes
Перейти на Alien Bikes

7. Riff Raff
Перейти на Riff Raff

8. Visual Box Site
Перейти на Visual Box Site

9. James Garner
Перейти на James Garner

10. Donq
Перейти на Donq

11. Cidesign
Перейти на Cidesign

12. Wo Pro
Перейти на Wo Pro

13. Cock Pit App
Перейти на Cock Pit App

14. Roggeund Pott
Перейти на Roggeund Pott

15. Cobra Creative
Перейти на Cobra Creative

Оцените, пожалуйста, статью!
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(0 голосов, в среднем: 0 из 5)

Темные сайты - часть 3

Подбор цветов сайта является одной из самых важных задач. Палитра может вызывать у посетителя определённые эмоции и устанавливать своеобразные правила использования и просмотра сайта. Веб сайты в тёмных тонах могут быть элегантными, с использованием нетрадиционных дизайнов, представлять модные тенденции и даже быть яркими и блестящими.  
Использование тёмного бекграунда дает возможность сосредоточить внимание на контенте, и делает более эффективным размещение на нем портфолио, галлерей с изображениями и подборок дизайнов.  
В этой статье вы сможете увидеть 42 примера тёмного дизайна. Некоторые из этих сайтов вы могли видеть в статьях посвящённых хедерам, некоторые в подборке о бекграунде, но у каждого из них есть свои отличия, а похожи они тем что во всех них преобладающими являются тёмные тона. Это третья часть подборок под названием “Тёмные сайты”, также вы сможете увидеть Тёмные сайты — часть 2 и 32 тёмных сайта.

Сайт axe choco сделан в шоколадных тонах

Сайт Starbucks Coffee At Home

Тёмный иллюстрированный сайт electricurrent

Креативный и необычный сайт Pikaboo

Российский сайт бренда befree

Тёмный дизайн сайта TAKE THE WALK

Тёмный природный дизайн Bird Malaysia

На сайте Elan Snowboards дизайн в серых тонах

Тёмный дизайн на сайте Eye Candy

Серый дизайн с ярким хедером на Mike Poss’ Rock Guitar Blog

Тёмный благородный фон на сайте butikludmila как нельзя лучше подчеркивает силуэты белых свадебных платьев

Сайт Nile Inside в тёмных тонах и стиле гранж

Чёрный сайт Batman The Dark Knight in 3D

Тёмный блестящий сайт glasshine посвященный необычным стаканам

Забавный сайт LaRedoute

Иллюстрации на тёмном фоне сайта BootB

Сайт графического дизайнера B.N. WEISS сделан в стиле ретро

Тёмный бекграунд с музыкальными элементами на Riffs Music Academy

Стильный тёмный сайт орехов Мачо

Тёмный беграунд в серую полоску на cyan

Креативный тёмный дизайн сайта Meet the BigMan

Сайт ресторана Twelve Restaurant & Lounge Bar в серых тонах

Тёмный дизайн сайта AdaptD с яркими элементами в ретро стиле

Хороший тёмный дизайн сайта Pixel Farm

Элегантный сайт R1 nanotek также сделан в тёмных тонах

Тёмный дизайн сайта радио Серебрянный дождь

Сайт веб-дизайнера Elliot Jay Stocks выполнен в тёмных тонах

Тёмный дизайн сайта коллектива состоящего из художников различных возрастов и стран depthCORE

Креативный сайт IDEO

Сайт 2Pitch посвящен компании графических дизайнеров и их работам

Дизайнерский сайт JUXT Interactive в тёмном гранжевом исполнении

Сайт Let It Bleed посвящен группе Rolling Stones

Ещё один сайт дизайнерской студии Level9 Design

Rabotilnica – сайт небольшой студии креативного дизайна

Сайт Hamish Macpherson интересен тем что вы сможете менять его цветовую гамму в пяти вариациях не изменяя контента

Сайт программиста выполненный в стиле гранж и коричневых тонах — Timothy van Sas

Сайт венгерского дизайнера в темно-коричневых тонах new {concept}

Серый сайт интузиаста и фотографа coda.coza

Иллюстрированный сайт Dead Metropolis Recordings

Сайт детективного фильма Mad Detective

Необычный тёмный сайт Wacom Pen Collective посвященный коллективу состоящему из графических дизайнеров, фотографов, 3D модельеров и многих других людей.

А на сайте Krista’s Creations можно найти весь латинский алфавит в виде множества креативных фотографий к каждой букве.

Автор — sixrevisions

Перевод и редактирование — Дежурка



Комментарии

Оставить ответ

Похожие статьи

Случайные статьи

Темный или светлый UI? Советы по выбору цветовой схемы для вашего интерфейса / Habr

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

Факторы, влияющие на выбор цветовой схемы


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

Читаемость и разборчивость


Эти термины непосредственно связаны с восприятием контента, представленного текстом. Читаемость определяет то, как легко люди могут читать слова, фразы и блоки текста. Разборчивость влияет на то, как быстро и естественно пользователи могут различать буквы в определенном шрифте.

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

Означает ли это, что интерфейсы со светлым фоном более читабельны? Не всегда. Один из известных гуру дизайна пользовательского опыта Джейкоб Нильсен сказал: «Используйте цвета с высоким контрастом между текстом и фоном. Для оптимальной четкости требуется черный текст на белом фоне (так называемый позитивный текст). Белый текст на черном фоне (негативный текст) почти так же хорош. Хотя коэффициент контрастности такой же, как и для положительного текста, инвертированная цветовая схема немного «остужает» людей и замедляет их чтение. Больше всего разборчивость страдает в цветных схемах, которые делают текст более легким, чем чистый черный, особенно если фон сделан более темным, чем чистый белый».

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

Однако некоторые научные исследования, относящиеся к 1980-м годам, показывают, что для больших объемов текста светлый фон представляется более эффективным выбором для большинства пользователей. Изучая работу рекламных носителей, Д.Бауэр и К.Р.Кавоний поделились своими исследованиями в статье «Улучшение удобочитаемости визуального отображения при помощи изменения контраста» (1980). В частности, они обнаружили, что участники были на 26% более точными при чтении текста, когда на светлом фоне фигурировали темные буквы.

Почему это так? Джейсон Харрисон из Sensor Perception and Interaction Research Group (Университет Британской Колумбии) объясняет это явление следующим образом. Люди с астигматизмом (которых, согласно различным статистическим данным, около 50% населения) чувствуют, что сложнее воспринимать белый текст на черном, чем черный текст на белом. Отчасти это связано с уровнем освещенности. С ярким дисплеем (на белом фоне) диафрагма закрывается немного больше, уменьшая эффект «деформированной» линзы. С темным дисплеем (черным фоном) радужная оболочка открывается, чтобы получать больше света, и деформация линзы создает гораздо более нечеткий фокус для глаза. Итак, основываясь на этом исследовании, если интерфейс представляет много текста и требует длительного чтения, то светлый фон более удобен для пользователя.

Доступность


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

Ясность


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

Отзывчивость


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

Окружение


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

Чеклист список для выбора цветовой схемы


Если учесть все выше описанные факторы, то мы можем предложить короткий контрольный список для выбора цветовой схемы мобильного интерфейса.
  1. Определите цель интерфейса. Определив основные точки использования интерфейса и возможности решения проблем пользователя, вы сделаете выбор цветовой схемы более обоснованным. Если пользовательский интерфейс является текстовым (блог, новостная платформа, электронный ридер и т.д.), светлый фон будет более эффективным выбором. Свет делает экран просторным, и становится легче сосредоточиться исключительно на содержании. С другой стороны, если интерфейс вращается вокруг изображений, а не текста, то цветовая схема с темным или ярким фоном может быть хорошим решением, поскольку цвета изображений будут ощущаться глубже.
  2. Проанализируйте свою целевую аудиторию. Определение и анализ целевой аудитории – это главное, что должен сделать дизайнер. Понимание того, кто является вашим потенциальным пользователем и что он хочет получить от сайта или приложения – это прочный фундамент для удобного, полезного и привлекательного интерфейса. Люди среднего возраста и пожилые люди предпочитают интерфейсы со светлой цветовой схемой, поскольку они находят ее более интуитивной и управляемой. Молодые люди часто считают  интерфейсы с темным фоном более оригинальными и стильными, что может быть способом привлечения целевых пользователей. Подростки и дети предпочитают интерфейсы, где используются яркие фоны и забавные детали. Выбор цвета, очевидно, зависит от характера функционирования интерфейса и контента. Но предпочтения целевой аудитории всегда являются хорошим ключом к решениям, ориентированным на пользователя.
  3. Изучите конкурентов. Еще один аспект, который следует иметь в виду, заключается в том, что ваш продукт не плавает в “синем океане”. Наоборот, он будет бороться за внимание пользователя в условиях сильной и динамически меняющейся конкуренции. Выбор цветовой схемы становится способом сделать приложение или веб-сайт отличающимся и привести к столь драгоценному первому взаимодействию со стороны пользователя. Время, затраченное на исследование существующих продуктов в сегменте, сэкономит вам время и силы, которые вы, в противном случае, потратите на редизайн неэффективных решений.
  4. Тестируйте, тестируйте, тестируйте. Описанные выше моменты убеждают в одной ключевой вещи: поскольку цвет относится к факторам, непосредственно влияющим на удобство использования и привлекательность интерфейса, каждое дизайнерское решение должно быть соответствующим образом проверено – в разных разрешениях, на разных экранах и в различных условиях. Тестирование позволит выявить сильные и слабые стороны цветовой схемы до того, как продукт выйдет на рынок, получит внимание  и потеряет шанс произвести первое впечатление.

Компромиссные решения


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

Как мы уже упоминали в обзоре тенденций UX-дизайна, это направление особенно популярно для интерфейсов с темным фоном. В нем реализуется подход к лучшей читаемости, который часто является вопросом обсуждения — создавая окна или пространства со светлым фоном для основных блоков с данными, дизайнеры решают проблему, добавляя элегантный контраст с экраном или страницей. Одним из случаев, когда такое решение было применено эффективно — приложение Watering Tracker, разработанное командой Tubik.

Предоставление пользователю возможности выбора цветовой схемы

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

Полезное чтение:


Как изменить цвет белого фона при загрузке страниц? — Хабр Q&A

Здравствуйте. Сперва небольшое вступление:
Я работаю в тускло освещённом помещении и, как следствие, не переношу яркие белые фоны. Поэтому я использую расширение Stylish https://addons.opera.com/ru/extensions/details/stylish/ . Это расширение позволяет устанавливать темы (тёмные в частности) на различных сайтах, которые добрые люди мира сего выкладывают и обновляют на сайте https://userstyles.org/ .
Сам пользуюсь Opera, но описанная далее проблема распространяется на все браузеры без исключения.

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

Шаги, чтобы воспроизвести проблему (это пример, не обязательно должны быть именно эти сайты):
1). Зайти на сайт https://translate.google.com/ , с заранее установленной на нём темой: https://userstyles.org/styles/134994/dark-google-t...
2). Далее перейти на сайт https://en.wikipedia.org/wiki/White , с заранее установленной на нём темой: https://userstyles.org/styles/42313/dark-wikipedia

Эта проблема также показана в этом видео: https://www.youtube.com/watch?v=HfJ_EwSTevI

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

Также замечу, что на некоторых сайтах цвет "прогрузочной" страницы изменён создателями сайта на тёмный (то есть проблема разрешима). И ещё то, что я находил решения этой проблемы, но не знал как их применить. Например вот: https://superuser.com/questions/580228/prevent-whi... . Даже если опустить тот факт, что это решение по-видимому больше не действует, я всё равно не знаю, что мне делать с этими кодами. Следование приведённым "инструкциям" меня ни к чему не приводило.

Я не могу найти решение этой проблемы уже очень долгое время. На всех форумах, на которых я писал ранее, ответа найдено не было. Я подозреваю, что проблема именно в том, что люди не понимали, что требуется сделать, в результате чего я и расписал этот вопрос так развёрнуто на этот раз.
Просьба к вам выключить свет/задёрнуть шторы в вашей комнате и выполнить пункты 1 и 2, чтобы на собственном опыте понять, насколько эта проблема может быть актуальна.
Заранее спасибо.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *