xmoonlight

Постройте "дерево" принятия решений для создания образа того, что нужно спроектировать под нужную тематику сайта:
1. Тип мира:
---1.1 Реальный мир
---1.2 Нереальный мир

2. Тип общего оформления:
---2.1 Блочный - Плоский/Flat
---2.2 Блочный - Слои/Material
---2.3 Сцена - Сказочный
---2.4 Сцена - Футуристический
....
....

3.1 Внешний вид
Время года:
3.1.1 Зима
3.1.2 Лето
3.1.3 Осень
3.1.4 Весна

3.2 Внутренний вид
Пластик
Металл
Дерево
....

4. Цветовая гамма
....
5. Текстура и блоки
5.1 Типы блоков
5.2 Типы текстур в блоках
5.3 Типы оформления блоков
5.4 3D-элементы: оконтовки, выпуклости/вогнутости, изгибы и т.д.
....

И далее - уже размещение по сетке и UI/UX.

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

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

Это нужно тестить!

Формат манипуляции сознанием посетителя при поглощении им информации с визуального интерфейса.

Всего в меру и качественно:
1. Дизайн,
2. UI/UX,
3. Корректная HTML5-разметка,
4. Скорость по Google Speed insights 90-100 (у этой страницы: 65-69).
5. Что-то работающее "вживую" для демонстрации ваших достижений.

Это всё должно быть в едином стиле и логике предоставления информации: "монолит".

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

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

Помер Ваш мозг.

Хотите делать качественно - делайте так, чтобы было всё однозначно и понятно с первого взгляда (0.5-3 сек).

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

Прочитайте про: цветовые сочетания, тематическое оформление, вертикальный ритм, типографику.

И всё это - я дал полностью бесплатно!

Выводы - делайте сами.

Требование 1 - все точки разделены на 2 группы

Делаем 2 блока разделённых свободным пространством.

Требование 2 - каждая точка из группы 1 имеет 2 типа визуальных свойств, которых нет в группе 2

1-я группа содержит 7 точек.
1-я группа:
Оформление для всех точек группы: круглые, с тенью, с обводкой чёрным.
Цвета (оформление сохраняем!): сначала 3 белых, чёрная, 3 серых.

2-я группа - 3 точки: серые, круглые

Требование 3 - весь ряд имеет одну точку акцента

10-я точка - салатовым.

Требование 4 - все точки в группе 2 имеют 3 уровня иерархии

размер: 1x, 3x, 2x с выравниванием по нижнему краю.

Требование 5 - горизонтальное деление (ось х) всего ряда должно быть асимметричным

(вроде как уже сделали?... в п.4)

PS: похоже на визуальное отображение шагов какого-то теста(/анкеты/"карусели" с фотками/слайды/etc.) с 2-мя кнопками и с текущим шагом (блок из 3-х элементов в конце), например: "Назад" 25 "Далее" (назад/далее - стрелками, например)
В общем, что-то такое имеется ввиду, кмк...

По первому слайду скажу.

Простое правило для блока с заголовком:
1. Или шрифт заголовка: болд+акцент и отделение тонкой стильной горизонтальной линией цвета акцента от основного контента, не доходящей до краёв блока.
2. Или шрифт заголовка: болд+бэкграунд блока и фон заголовка: акцент. Фон "касается" всех трёх сторон карточки - как-бы прямоугольная заливка области надписи заголовка.

Оформление периметра блока для стилизации под тематику сайта:
обводка, "уголки", "лепестки"(типа табов и т.п.) и прочее - уже по вкусу, но придерживаясь прямого (п.1) или инверсного (п.2) акцента.

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

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

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

WYSIWYG-редактор и к нему пишем свой css-шаблон для представления текста в поле редактирования (или ищем готовый для данного редактора и скачиваем).
Самые популярные: TinyMCE и CKEditor.

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

Почему многие дизайнеры делают ОГРОМНЫМИ элементы дизайна?

Это НЕ дизайнеры.
Это те, кто не хочет работать качественно (их меньше 50%) или те, кто хочет, но не может из-за недостатка знаний и опыта в веб-дизайне (а таких - больше 50%).

(всё на белом фоне)
1. Круговой таймер (5/8 площади ширины)
2. Над центром (внутри круга таймера): чёрно-жёлтые шашки (почти на всю верхнюю половину).
3. Под центром (внутри круга таймера): надпись: "Подача Такси за 1 минуту!" (почти на всю нижнюю половину)
4. Под таймером, уже чуть мельче, но чтобы вблизи легко читалось: "Подадим такси к этой стойке за одну минуту сразу же после заказа."
5. Кнопка - жёлтая, круглая, с шашками по периметру окружности и в самом центре таймера (где ось вращения стрелок, обычно) и на ней надпись ЗАКАЗАТЬ ТАКСИ (слова друг под другом, "такси" - чуть мельче)

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

https://www.rainmeter.net/

Скрин(ы):