Сейчас такое время, когда аккуратного современного дизайна уже недостаточно. Нынче нужна няшная верстка — будущее за микроанимашками. Вот несколько видороликов с презентациями моих дизайнов. Обратите внимание, как появляются элементы, как реагируют на курсор — вот это все и есть няшная верстка (лучше смотреть со звуком, а на youtube можно посмотреть на весь экран):
Как оказалось, не все заказчики скролят страницу дальше видео. А зря! Ведь там как раз-таки и лежат ссылочки на всякие готовые анимашки…
Мои идеи няшной верстки сайтов с моим дизайном:
А вот пример анимации карточной игры, для которой я делал дизайн интерфейса, и сайта для скачивания ее установщика
К сожалению, в дизайне такие эффекты не покажешь, да и есть большая вероятность испорченного телефона в цепочке: дизайнер > заказчик > верстальщик > заказчик > дизайнер. К тому же, лучше смотреть уже на готовые сверстанные разные эффекты, чтобы сразу представить, как оно будет реализовано.
Я собрал небольшую коллекцию, которая поможет оживить ваши сайты. Просто выбирайте понравившийся эффект и просите верстальщика добавить его себе на сайт.
- Кнопки #1
- Кнопки #2
- Ссылки #1
- Ссылки #2
- Кнопки с прогресс-баром #1
- Кнопки с прогресс-баром #2
- Иконки #1
- Иконки #2
- Поля ввода #1
- Поля ввода #2
- Всплывающие окна #1
- Всплывающие окна #2
- Анимированные заголовки
- Анимированные фоны
- Подписи у картинок
- Прелоадеры c прогресс-барами
- Анимация смены страниц
- Пагинация
- Фотографии #1
- Фотографии #2
- Фотографии #3
- Тултипы (подсказки)
- Уведомления
- Подборка разных эффектов
Во всех этих примерах уже готовый код, который надо будет немного изменить под новый дизайн: например, заменить цвет. Это уже сделает верстальщик. Подготовьте список понравившихся анимаций: «Хочу отсюда (ссылка) эффект № 12 для кнопок
Бывает, что подставить эффект на сайт это просто скопировать код и вставить его в стили своего сайта. А бывает, что вставляешь и ничего не работает, что-то конфликтует с уже существующими стилями. Поэтому часто добавить клевую микроанимашку не совсем минутное дело. Подробнее расскажут уже верстальщики.
Кстати, можно попросить их сделать две оценки: просто верстка с ховерами (наведениями на кнопки, ссылки) и отдельно за список анимашек. Так будет понятно во сколько обойдется няшная верстка. И если какая-то анимация потребует, скажем, 5 часов времени работы по ее внедрению, то вряд ли она стоит того и есть смысл поменять ее на более быстрый аналог, на подключение которого уйдет 5−15 минут.