Архив Галактики

Строим сайт по модным современным тенденциям веб-дизайна

rat's blog / 17.11.2015

В этом году в седьмых классах я взялась за подготовку аж тридцати ученических проектов. Проекты – индивидуальные, объединенные общей темой: «Вода». Уже с первых занятий со школьниками стало ясно, что нужно эти темы как-то упорядочить, собрать вместе; разместить все фотографии на одном сервисе. Встал вопрос,- на каком? Хотелось, чтобы фотографии просматривались быстро, чтобы сайт выглядел современно и ярко. Тут я вспомнила летний конкурс Галактики, на котором обратила внимание на проект о ромашке от Наталь_я , размещенный на сервисе «Тильда». Мне тогда понравилась простота работы этого сайта, возможность размещения крупных картинок. А тут ещё подоспела рассылка с полезными советами по веб-дизайну «Лучшие направления веб-дизайна в 2015 году».

В общем, решила я сделать сайт по проектной деятельности школьников на сервисе "Тильда", пользуясь инструкциями сервиса и советами веб-дизайнеров. Один из советов гласил, что лучше применять минимализм и простоту во всём. Эта модная концепция помогает сосредоточить внимание посетителей только на самых главных вещах на сайте. Поскольку тема ученических проектов была о воде, нашла фотографию Обского Моря, сделанную ещё летом, и расположила её фоновым изображением. Большое фоновое изображение – это модная «фишка», которая очень популярна сейчас. Использование фоновых изображений на первом экране — это яркая возможность графически отразить суть сайта. Достаточно разместить красивое емкое изображение фоном и написать заголовок крупными буквами, как пользователю сразу становится ясно, о чём этот сайт. Главное, чтобы фоновое изображение не отвлекало внимание на отдельные детали, на нём изображенные.



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

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

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

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



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

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