Анимированные логотипы в веб-дизайне

Логотип сервиса Shazam

Вы, возможно, уже видели тонко анимированный логотип Fubiz, который попал на их недавно запущенную новую версию сайта, или новый логотип CSS-Tricks, содержащий интересную пасхалку? Может быть, вы знакомы с незацикленно-анимированным новым логотипом на сайте David Stanfield? Как правило, анимация логотипов использовалась только в видео, но в последнее время мы можем наблюдать, как красиво и тонко анимированные логотипы компаний появляются на их сайтах, и используются там весьма эффективно.

Анимированный может быть GIF-анимацией, или создан с помощью CSS и SVG - не важно. Важно то, что анимированный логотип буквально заставляет вас обратить внимание на себя, и, следовательно, запомнить бренд. Также, анимация логотипа иногда может рассказать много о бренде, или о дизайнере, который его создал (если он, например, делал его для себя). На сайте дизайнера David Stanfield, например, анимация логотиа демонстрирует способность самого дизайнера сгенерировать интересную идею, спроектировать довольно сложную анимацию у простого элемента. А ведь на это, скорее всего, обратит внимание потенциальный клиент, который придет на его сайт.

Логотип компании Flight

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

Чего не стоит делать

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

  • Следите за размером файла. При высоком качестве изображения, старайтесть сделать его «вес» как можно меньше. Позаботьтесь о своих посетителях: если картинка будет долго загружаться, то пользователь просто не станет ждать конца загрузки и покинет ваш сайт.
  • Не перетягивайте внимание от информационной части к логотипу. Помните, что анимированное лого — это вишенка на торте, но не его основа. Сделайте его простым и привлекательным, но не раздражающе мелькающим.
  • Если на вашем сайте расположен анимированный логотип, то постарайтесь отказаться от анимации в других элементах сайта. Если динамических элементов будет слишком много, то это произведет впечатление хаоса на странице. Данная ситуация решается либо отказом от анимации в некоторых элементах структуры сайта, либо воспроизведением анимации элемента только по наведению курсора.

Анимированный логотип Calibre Club

Как применить анимацию в логотипе

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

Анимированные элементы применяются для показа различных свойств:

  • Процесс перехода
    Если у демонстрируемого предмета существует несколько положений или состояний: например закручивание гайки, включение лампы, поворот ключа в замке и так далее. Так посетитель увидит изменения собственными глазами, а не вообразит их.
  • Изображение трехмерных элементов
    Компьютерные мониторы дают лишь двумерное представление об объекте. Поэтому для отображения объемной модели предмета используется анимация, позволяющая представить элемент в разных проекциях. Не делайте скорость движения элемента слишком высокой, чтобы посетитель мог порассматривать его. Лучший вариант — это управляемая анимация, которая, однако, осуществляется только посредством Flash.
  • Привлечение внимания
    Даже с учетом высказанной нами критики, анимацию иногда все же стоит использовать для привлечения внимания, но с учетом некоторых «но». Так, логотип может мигать или выплывать из-за экрана, но лишь при первом попадании на страницу — незацикленная анимация.