{"id":3824,"url":"\/distributions\/3824\/click?bit=1&hash=a0d33ab5520cacbcd921c07a49fc8ac5b78623b57936b992ce15c804b99210d4","title":"\u041a\u0430\u043a\u0443\u044e \u0440\u0435\u043a\u043b\u0430\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u0434\u0430\u0442\u044c \u043d\u0430 DTF \u0438 \u043a\u0442\u043e \u0435\u0451 \u0443\u0432\u0438\u0434\u0438\u0442","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"75ec9ef4-cad0-549d-bbed-1482dc44e8ee","isPaidAndBannersEnabled":false}
Офтоп
Илья Брегман

Сделал макет сайта DTF в Figma, чтобы сообщество могло легко предлагать свои идеи по дизайну и его цветовой гамме

Предисловие

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

Но вернёмся к теме поста. Я часто видел предложения по тёмной теме ДТФ, но почти всегда это переделанный HTML/CSS страницы, а для того, чтобы в коде страницы что-то делать, нужно иметь определённый уровень вовлечённости в Frontend разработку, который есть не у всех. Поэтому я решил скопировать сайт в Figma и поместить все цвета в стили, благодаря чему теперь можно быстро менять цветовую гамму. Ниже покажу как.

Как это работает

1) Сначала перейдите по ссылке ниже (она направит вас на файл с макетом) и скопируйте файл (кнопка duplicate). Если попросит регистрацию, то войдите через аккаунт Гугла, это быстро.

2) Перед вами откроется следующая картинка. Красная стрелочка указывает на место, в котором собраны все цвета макета в стилях

3) Увидели список стилей? щёлкните по значку справа от нужного стиля, и вуаля, перед вами цвет, заданный стилю. Изменяйте его на любой по вашему желанию :)

Послесловие

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

Если хотите, подписывайтесь на ныне санкционный инстик:

@project_or_design

0
53 комментария
Написать комментарий...
PTRS-41

Предлагай не предлагай все равно получишь хуй.

Ответить
Развернуть ветку
deepo

гуй

Ответить
Развернуть ветку
1 комментарий
genius

Элистратов перелогинься

Ответить
Развернуть ветку
mir 24

Нужно вместо дтф поставить в макете это,многие и разницы не заметят

Ответить
Развернуть ветку
Никита Борисов

Фигму какую-то

Ответить
Развернуть ветку
Denver

Плагин для хрома Dark reader решает очень быстро проблему темной темы. А то ждать будете вечность.

Ответить
Развернуть ветку
Denys Shpitalnyi

База, к тому же работает на все сайты.

Ответить
Развернуть ветку
pahaboo

ты йобаный гений, спасибо чувак!

Ответить
Развернуть ветку
Tentacle Tenticals

В сравнении с Mid.Lizard, Dark Reader сосямба.

Ответить
Развернуть ветку
1 комментарий
Vandgory

Болотный зеленый цвет в темной теме это прям такая выблядантская херня.
Можно же так сделать:

Ответить
Развернуть ветку
Vandgory

И вообще зачем это? Никто их комитета не будет переделыать сайт все равно.

Ответить
Развернуть ветку
Антон Прошин

А можно, чтобы не только цвет, но и новости/события какие я хочу, чтоб были?
Суть такова..

Ответить
Развернуть ветку
Территориальный корабль
Ответить
Развернуть ветку
Yowq qwoY

Артемий Лебедев залогинься

Ответить
Развернуть ветку
Ебатели чугуна

темные штуки все портят

Ответить
Развернуть ветку
1 комментарий
Skyimp

О, рыбак!

Ответить
Развернуть ветку
Народный крюк

Самое хуевое что можно сделать в дизайне интерфейсов - использоваеть ебучий лорем импсум

Ответить
Развернуть ветку
5 комментариев
Огурец Лолинов

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

Ответить
Развернуть ветку
Dominic Tarretor

Ой

Ответить
Развернуть ветку
Deny
Ответить
Развернуть ветку
Никита Беспалов

Дневная тема - дженерик трендовый светлый ака "че за хабрахабр". И ночная - в теплых тонах(так комфортнее в темноте), с неуместной голубизной на логотипе и иконках для сохранения аутентичного цветового кода.

Ответить
Развернуть ветку
Территориальный корабль

медуза какаято

Ответить
Развернуть ветку
No More Natum
Изменяйте его на любой по вашему желанию
Ответить
Развернуть ветку
Зеленый Грузчик

Чувство удовлетворения

Ответить
Развернуть ветку
Антон Голубничий

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

Ответить
Развернуть ветку
Черный Плащ

Критиковать - много ума не надо, вот сами бы, что то сделали...

Ответить
Развернуть ветку
Ilya Medvedev

Не вижу чето шапки на пол старницы с рекламой!

Ответить
Развернуть ветку
Традиционный Мурод

А ее и нет.

Ответить
Развернуть ветку
Ангельская пыль

Но ведь инструменты разработчика в браузере удобнее и быстрее, только не совсем удобное сохранение.

Ответить
Развернуть ветку
Tentacle Tenticals

Инструменты идеальны для создания (даже несмотря на наличие крайне прекрасного "Live editor for CSS..." расширения) css. Ещё лучше, когда открепляешь окно инструментов, и закрепляешь его поверх окон (так оно не режет часть места на экране, и глаза не мозолит если надо временно скрыть).
Для встраивания уже созданного css, уже можно брать всякие Styler и т.п.

Сохранять изменения, сделанные в инструментах как по мне не надо, достаточно просто выделить код, и скопипастить в файлик/Styler/и т.п.

Ответить
Развернуть ветку
Winterfire Sunday

Ого, у тебя на 19 пальцев больше, чем у работников ОАО ДТП и ты можешь что-то делать похожее на вменяемый проект.
Тут так не принято

Ответить
Развернуть ветку
TiredNPC

"Как это работает"
Это не работает /close

Ответить
Развернуть ветку
Денис Денисов
Сделал макет сайта DTF в Figma

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

Ответить
Развернуть ветку
Coaeval

Иконки вытягиваются через inspect > network > обновить страницу > отсортировать загруженное по формату и будут все загруженные .svg и все, что угодно

Ответить
Развернуть ветку
Возможный спрей

И?

Ответить
Развернуть ветку
Аккаунт заморожен

Комментарий недоступен

Ответить
Развернуть ветку
Neatherial

Надеюсь темная тема будет именно в таких цветах а не богомерзком контрасном черном

Ответить
Развернуть ветку
ihazpaws

Это щас бесплатно работать надо?

Ответить
Развернуть ветку
Ivan A

Проверь проект на контрастность и доступность. Сейчас у тебя цвета сливаются в кашу. Это можно сделать плагином или любым сайтом "Contrast Checker". В добавок, у тебя отсутствуют акцентные цвета из-за чего все смотрится монотонно и глазу не за что зацепиться.

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

Ответить
Развернуть ветку
WannaBe2D

Ну и где ты раньше был когда я все в соляново делал

Ответить
Развернуть ветку
Yes, Your Grace

Жаль смысла в этом ноль. И я, и другие уже и макеты рисовали, и цвета предлагали, и всё на свете. Не делают и всё тут.

Ответить
Развернуть ветку
AitoKatami

Цветовая гамма замечательная и так.

Ответить
Развернуть ветку
hoser

@Дмитрий Пан делал тёмную тему для DTF

Ответить
Развернуть ветку
Андрей Орешкин

Идет четвертый месяц 2022 года. Илья Брегман пытается объяснить, как работают цветовые стили в Figma.

Ответить
Развернуть ветку
Виктор LVL90DRU1D Газманов

попробовал замутить покрас (мой дизайн закончился на Windows Forms)

Ответить
Развернуть ветку
Читать все 53 комментария
null