Home Page v.3
Я благодарен всем, кто потратил свое время и откликнулся по предыдущим вариантам дизайна. Всегда с пониманием отношусь к конструктивной критике, тем более когда сам сомневаюсь в результате.

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

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

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

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

Hero-image
Меню гамбургер в раскрытом виде:
Сразу отмечу: все блоки под шапкой опциональны, имеют три колонки, их можно менять местами, можно в них отображать что-то иное, более важное или актуальное. Если в шапке мы расположили базовые опции по созданию и выбору курсов, то ниже обьясняем преимущества каждой из ролей.
Инфоблок №1
В процессе работы, я выпиваю за день шесть ложек растворимого кофе и восемь пакетиков черного чая...
Как я уже писал ранее, в этом блоке целесообразно отображать последние события, связанные с работой портала, обновлениями и новыми курсами.

Инфоблок №2
Этот блок для целевого действия. Я его для примера сделал, как фильтр по языкам. Блок не имеет колоночной структуры и занимает по ширине всю область контента. В нашем случае это 1200 пикселей.
Баннер
Из подвала убрал дублирование навигации и разместил пример использования монохромного логотипа.
Подвал
Конечно я не мог не помахать лишний раз кисточкой - живенько смотрится ручная работа наряду с рукописным шрифтом. Желательно еще и мордашки пооптимистичнее, но это нужно провести фотосессию, либо из клипарта взять заученные, стандартные улыбки.

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


С уважением,
Дмитрий
Ссылка на прототип домашней страницы:
Home Page v.2
learn without tension
Обоснование
Во втором варианте я полностью поменял цветовую схему. Это обусловлено выбором нового варианта логотипа. Идея показалась мне интересной и симпатичной: реально требуется brain tension, чтобы понять)) Знаки транскрипции явно указывают на процесс изучения языка)) Да, в нем есть мелкие детали, но, тем не менее, он легко читается в уменьшенных вариантах. В конце концов, можно сделать упрощенный вариант для размеров меньше 32 пикселей, оставив "rain" и "ten".
Фрукты я сьел, но оставил от них яркую летнюю палитру:
Логотип и цветовая гамма:
Шрифты:
Было замечание по поводу того, что Open Sans плохо читается. Это странно. Из истории данного семейства:
Семейство свободных шрифтов, разработанных Стивом Мэттисоном по заказу Google. По данным Google, шрифт был спроектирован с «прямым штрихом, открытыми формами и нейтральной, но дружественной внешностью» и «оптимизирован для удобочитаемости при печати, в веб- и мобильных интерфейсах».
Тем не менее, шрифтов тысячи и всегда можно выбрать тот, который устроит всех. Поменять шрифт времени особо не занимает. В новой версии портала я использую шрифт Roboto.
Фоновое изображение:
Картинку всегда можно сделать любую. Я накидал предметов и скорректировал композицию, чтобы она выглядела живенько и более менее отражала учебный бардачок на столе. Единственное, что мне не удалось побороть — это потеря качества при вставке в Тильду. Видимо, у них в движке заложено максимальное сжатие для быстрой загрузки. Это тоже странно, учитывая существующие возможности Интернета и скорости загрузки изображений. Оригинал снят в высокой резолюции и сжат до оптимального размера, позволяющего быстро загружать картинку на сайт даже на медленном интернете. Количество предметов и их расположение всегда можно поменять и сделать новую заставку.
Структура страницы:
Чтобы визуально сильно не разделять верхние элементы навигации от блока с заставкой, я положил их на полупрозрачный фон.
Заставка, слоган и целевые элементы

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

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

Визуально второй информационный блок продолжает предыдущий за счёт трехколоночной линейности. В нем можно отображать новости портала, новые курсы, новые статьи и методички. По поводу трехмерки в элементах дизайна, я добавил тени. Отработка нажатий и эффектов уже реализована в существующей версии, поэтому здесь я не стал тратить на это время.
Header (Логотип и меню)
В собранном виде все это выглядит так:
Для профиля пользователя используется выпадающее меню, как это уже реализовано в существующей версии сайта. Можно туда иконок напихать (я не стал с этим заморачиваться, чтобы не тратить времени). Наличие непрочитанных уведомлений обозначается оранжевым кружком на аватаре.
Макет адаптирован под мобильные устройства и планшет
Portal Home Page
Логотип BrainTension
3 версия
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
BrainTension Portal
Home Page v.1
Языки, особенно иностранные, — это всегда увлекательно, красиво и похоже на приключение Алисы в Зазеркалье. Все должно быть солнечно, сочно, ярко, сладко, тепло, творчески и где-то неожиданно.

Погода встала знойным солнцепёком, сидеть дома и тушиться в собственном соку было невыносимо, поэтому вынес камеру, пых, ноут, тетради, ручки, фрукты и колу на пленэр. Фотосессия на солнце — испытание для любого фотографа. Либо контровый свет, либо пересвет, либо все в тени. Без пыха (вспышки) никак.

Отснял немного, но достаточно, чтобы можно было обойтись без стоковых фото:
Очень хотелось сделать главную страницу лаконичной, но при этом яркой, "вкусной" и позитивной. Совсем не хотелось использовать привычные офисные элементы в банальном антураже . Скучно и совсем не вкусно.
Process
& Justification
Устав от жары и тяжести камеры, я лег, уперев взгляд в небо. В небе тоже есть жизнь. Чайка парила и чистила лапку, самолеты пролетали в жаркие страны и пандемию.

Я охотник — прицелился и в коллекцию.
Отобрал несколько вариантов:
Ширина рабочей области под контент составляет 1200px. В заголовке высотой 100 пикселей расположены логотип и пять базовых элементов интерфейса: переключение раскладки, поиск, помощь, вход в систему и главное меню в виде "гамбургера" — привычно, интуитивно и консистентно. Заголовок имеет ширину 100% от окна браузера.

Баннер также растянут на 100% ширины экрана, он вмещает в себя кнопки целевого действия, надписи или иную полезную информацию. Картинки грузятся быстро, т.к. весят от 500 до 700 Кб. За баннером следует информационный или любой другой блок, в зависимости от задачи. Можно и без него, но без него плохо, т.к. визуально просится какой-то переход к основным "шлюзам" главной страницы: "Мои курсы" и "Каталог курсов" (но только не горизонтальная линия).



При изменении размеров окна браузера или резолюции, картинка масштабируется.

Ниже представлено раскрытое меню "Гамбургер"
Другие варианты фоновой картинки:
UI/UX design
Посмотреть макет вживую можно здесь:
Логотип BrainTension
2 версия
Лого состоит из двух частей. Подразумевается возможность использовать только знак без названия. Я имею в виду "мозг" на плашке и первая буква "В" из вариантов 1-3
1
2
3
4
5
6
7
8
9
Логотип BrainTension
1 версия
1
2
3
4
5
6
7
8
9
10
11
12
Лого состоит из двух частей. Подразумевается возможность использовать только знак без названия.