Логотип Харківського економічного ліцею Приватний заклад Харківський економічний ліцейРозробка сайту

Дев’ять варіантів дизайну головної сторінки

Усі варіанти зібрані з однакових блоків: шапка, перший екран, три профілі, цифри, розділ про ліцей, кроки вступу, заклик записатися, підвал. Відрізняються шрифтами, композицією, кількістю повітря і способом подати фото.

RAL 1028 RAL 5010
Варіант 1

М’який і теплий

Пастельна гама: кремовий папір, піщані та блакитні підкладки замість темних блоків, один шрифт у всіх ролях, фотографії у теплому тоні без різких контрастів.

Сильні сторони
  • Найприязніший настрій: школа виглядає доброзичливою, а не офіційною
  • Пастельні підкладки розділяють розділи без різких переходів
Слабкі сторони
  • Низький контраст: важливі місця треба виділяти свідомо, інакше загубляться
  • Виглядає м’яко — якщо потрібен наголос на статусі закладу, варіанти 5 і 6 сильніші
Geologicaпастельний
Варіант 2

Спокійний і просторий

Багато вільного місця, тонкі лінії, дрібний акуратний шрифт і велике фото. Кольору майже немає — помаранчевий з’являється тричі на всю сторінку.

Сильні сторони
  • Найспокійніший вигляд: коли на сторінці мало всього, кожен елемент важить більше
  • Фотографія працює на повну, дизайн їй не заважає
Слабкі сторони
  • Повністю залежить від якості знімків — на слабких фото розсиплеться
  • Спокійний настрій: підлітка чіпляє менше, ніж варіанти 4 і 7
Tenor Sans + Spectralсвітлий
Варіант 3

Строгий і точний

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

Сильні сторони
  • Виглядає стримано й дорого, без зайвих прикрас
  • Таблиця параметрів дає батькам відповіді за десять секунд
Слабкі сторони
  • Стриманий до холоду — мало емоції
  • Дрібні технічні підписи вимагають акуратності при наповненні
IBM Plexсвітлий
Варіант 4

Виразний і зібраний

Великий щільний заголовок, жорсткі лінії між блоками, фото в синьому тоні. Помаранчевий — тонка смужка, підкреслення і кнопка.

Сильні сторони
  • Найкращий баланс: чіпляє підлітка і не відлякує батьків
  • Запам’ятовується з першого екрана, добре працює в рекламі набору
Слабкі сторони
  • Сторінка щільна: довгі тексти документів доведеться виносити окремо
  • Великий заголовок вимагає коротких і точних формулювань
Wix Madeforсвітлий + синій блок
Варіант 5

Наочний: цифри й таблиці

Показники, графік балів НМТ, таблиця навантаження, виноски. Один шрифт у всіх ролях — так роблять дорогі корпоративні видання.

Сильні сторони
  • Найсильніший аргумент для батьків: цифри замість обіцянок
  • Готовий каркас під майбутні розділи «Результати» і «Прозорість»
Слабкі сторони
  • Не працює без справжніх даних ліцею
  • Сухий: емоції та атмосфери закладу тут майже немає
Geologicaкремовий
Варіант 6

Класичний і солідний

Заголовки набрані шрифтом із засічками — таким, як у книжках. Розділи пронумеровані як глави, фото у синьому тоні. Синій тут не заливає екран, а тримає фотосмугу й фінальний блок.

Сильні сторони
  • Сайт виглядає частиною фірмового стилю, а не окремою сторінкою
  • Нумерація розділів як у книзі: зміст сприймається впорядкованим
Слабкі сторони
  • Книжкові заголовки додають віку — молодіжним його не назвеш
  • Фотографії обов’язкові: без них синій блок залишиться порожнім
Prata + Fira Sansсвітлий, синій блок
Варіант 7

Яскравий і молодіжний

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

Сильні сторони
  • Найгучніший варіант: добре працює в рекламі набору і в соцмережах
  • Легко доповнювати новими сторінками в тому самому стилі
Слабкі сторони
  • Гучність швидко втомлює на довгих текстах
  • Жорсткі рамки погано дружать з великими фотографіями
Rubik Mono One + Rubikсвітлий, два сині
Варіант 8

Динамічний, з великим шрифтом

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

Сильні сторони
  • Найсильніше перше враження: заголовок працює як афіша
  • Профілі-рядки легко доповнювати новими напрямами
Слабкі сторони
  • Дуже великий шрифт заголовків вимагає коротких формулювань
  • На мобільному перший екран доведеться перебудовувати
Unbounded + Onestсвітлий, темна смуга
Варіант 9

Простий і системний

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

Сильні сторони
  • Єдиний варіант, який не залежить від фотозйомки
  • Найлегше розширювати: сітка і правила вже задані під десятки сторінок
Слабкі сторони
  • Найменш емоційний з усіх варіантів
  • Геометрія замість фото робить сайт трохи безлюдним
Oswald + Golos Textсвітлий

Фотографії

Зараз стоять тимчасові знімки зі стоку. Їх потрібно замінити на фотографії ліцею — приміщень, кабінетів, учнів. Варіанти 1, 2 і 3 без цього втрачають найбільше: там фотографія несе основне навантаження.

Цифри

У варіанті 5 бали НМТ і години наведені як приклад — вони показують структуру розділу. Потрібні справжні дані ліцею.

Логотип

Використано наявний логотип ліцею. На жаль, він поганої якості: растрове зображення 232×232 пікселі, на сучасних екранах помітно милить, а збільшити його без втрат неможливо. Було б добре отримати оригінал у векторі — тоді логотип виглядатиме чітко і в шапці, і на великих розмірах, і в друку.