Когда речь заходит о флеше, то очень часто это подразумевает использование большого количества рисунков, анимации, видео, и звуковых эффектов. Как результат: в большинстве случаев загрузка флеш контента занимает достаточно длительное время и требует достаточного терпения от пользователя. Безусловно, пользователи об этом осведомлены и зачастую стойко ожидают, пока загрузка флеш сайта завершится. Однако для того чтобы рассчитывать на терпение пользователя, флеш-дизайнеры должны проинформировать посетителей сайта о том, сколько собственно терпения понадобится. Если это не сделать, то у последних не будет отправной точки для оценки того, сколько времени нужно и соответственно они могут закрыть браузер думая, что сайт попросту не работает.  
Флеш-прелоадеры как раз и призваны решать такие проблемы. Большинство дизайнеров информируют посетителей о состоянии загрузки путем заполнения определенной части сайта цветом, показом растущей полосы, счетчиков или простыми процентами степени загрузки сайта на экране. Однако, прелоадеры не обязаны быть скучными. Очень часто дизайнеры используют нестандартные приемы для того, чтобы привлечь внимание посетителя к сайту. Поэтому прелоадеры часто совпадают с общим дизайном сайта и работают в качестве небольшой рекламной заставки.

 
Важно информировать посетителей о том, что происходит. Сайт ff0000, например рассказывает о том, какие модули загружаются на сайте в это время. Но хотят ли об этом знать сами посетители? Интересная реализация, но показ процента загрузки лучше подошёл бы для таких целей .  
В данной статье вы увидите примеры креативных флеш-прелоадеров, которые могут служить в качестве источников вдохновения для ваших проектов сделанных во флеше. Обратите внимание на то, что в некоторых случаях вам придется смотреть очень внимательно для того, чтобы обнаружить сам прелоадер. В зависимости от нагрузки сервера и вашей скорости соединения прелоадер может появиться и исчезнуть достаточно быстро. В большинстве случаев это не является недостатком — ну, по крайней мере, не должно им быть :).  
Данная подборка прелоадеров не является окончательной и бесповоротной, и не претендует на звание лучшей; ее основная цель это показать вам некоторые идеи по созданию собственных флеш-прелоадеров, когда вам это понадобится — не стесняйтесь поделиться свом любимым прелоадером в комментариях к данной статье.

1. Заполнение цветом прелоадера.

Зачастую дизайнеры интегрируют прелоадер непосредственно в контент самого сайта. Чем больше данных загружено, тем разноцветнее становится сайт. Иногда одиночные элементы дизайна показываются первыми на странице загрузки. Так как привлечение внимания — это их главная задача, они часто выглядят привлекательно, вычурно или шокирующе.

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

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

На сайте Bernstein Rein площадь страницы заполняется точками.

На Today Headlines in Photos в качестве прелоадера используется нечто вроде водомерной трубки. Уровень воды повышается по мере загрузки.

Вне всякого сомнения, отсюда вы так быстро не уйдете.

А здесь заполняется буква “C”.

Этот прелоадер растет вертикально: Section Seven

2. Использование печатного оформления текста.

Очень изящный прелоадер с большими цифрами.

Рекламное агенство Victory-S.A. использует логотипы работ представленных в портфолио и большие цифры.

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

По-настоящему большие буквы. Да, очевидно, “печатное оформление – это реально крутая вещь”. По крайней мере, об этом говорит само название сайта.

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

3. Фигурки и мультяшки в прелоадерах.

Большой круглый прелоадер на сайте Spanish bakery.

Пока вы ждете, вы можете поиграть с этой забавной собачкой.

На бесконечном сайте Orange пчелы собирают мед…

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

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

Ну, а прелоадер у Макса Шамана малость страшноват, зато необычно выглядит. Именно поэтому данный прелоадер с маком и иглами присутствует в данной статье.

На сайте Mouse n Brush в качестве прелоадера выступает черепашка. С другой стороны сайт грузится весьма быстро.

4. Использование метафор в прелоадерах.

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

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

Дизайнерское агентство питается привлечь внимание посетителей при помощи ярких цветов, сообщения и … огнетушителя.

Заполняется бокал с пивом: сайт на самом деле относится к производству шведского пива.

Дизайнеры из студии Парк соорудили два устройства для сайта Инстинкт. Непонятно что измеряющих. :)

Загрузка в виде инъекции. Разумеется, прелоадер полностью подходит к содержанию сайта — (не очень) страшному кино “Gothika”.

По мере загрузки страницы, количество букв “i” в тексте “file is diiiis big” уменьшается. Возможно, вам захочется дальше развить эту идею, конечно, с более привлекательным визуальным рядом.

Этот прелоадер является частью сплеш-страницы: Farm

Color in Motion — спасибо за ваше терпение.

Здесь используется некий древний механизм.

А этот летает по экрану.

На сайте Previsuals прелоадер имитирует вертолет.

Термометр на стартовой странице онлайн магазина

Топливо заливается, подождите немного, пожалуйста.

5. Простые и хорошо оформленные индикаторы загрузки.

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

Не все индикаторы загрузки такие скромные как этот.

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

Дизайн индикатора идеально подходит к общему дизайну сайта.

Простой, но визуально привлекательный.

Этот индикатор тоже простой, но он соответствует теме сайта.

Здесь индикатор загрузки растет по диагонали.

Сообщение и сердца на E.G.G.

6. Экспериментальные решения

Вам не кажется это знакомым?

Этот прелоадер висит на резинке.

А на этом показываются километровые столбики.

Флеш прелоадер на сайте промо сайте Хонды показывает множество всяких действий. Когда кликаешь на буквы, то дюжина анимированных человечков начинает строить слово “Honda”на экране.

А тут цифры прыгают по всему экрану.

Загрузка начинается с заблюренного видео.

Круглый прелоадер из Ирана: Mohammad Rahimi

Анимированные орнаменты из Бразилии.

Официальный сайт фильма “Однажды в Мексике” показывает детали пистолета, которые собираются вместе.

Рукописный текст на office:mac.

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

Автор – smashingmagazine



Комментарии