Slider как у apple

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

Эффекты блочного раскрытия

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

15 полезных .htaccess сниппета для сайта на WordPress

Если вы хотите существенно повысить уровень безопасности вашего сайта на WordPress, то вам не избежать конфигурации файла .htaccess. Это позволит не только уберечься от целого ряда хакерских атак, но и организовать перенаправления, а также решить задачи связанные с кэшем.

20 бесплатных тем для WordPress в стиле Material Design

Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.

20 сайтов с креативным MouseOver эффектом

Эффекты на то и существуют чтобы впечатлять наших посетителей. В этой подборке собрано несколько десятков ресурсов, чьи создатели очень постарались впечатлить своих посетителей.

45+ бесплатных материалов для веб дизайнеров за август 2016

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

Бесплатка: PSD шабон Modus Versus

Вашему вниманию предлагаем PSD шаблон с множеством элементов.

Источник

Кому нужен лендинг как у Apple, и как его сделать?

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

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

Так бы это все и осталось в планах, но тут звезды сошлись. Сначала мы придумали набор для Амперки, который нравится самим. Это идеальный продукт для такого сайта. Я в отдельной статье написал, как мы его делали. А потом наступил карантин, текущие проекты затормозились, запуск новых отложился на неопределенный срок. Появилась свободная команда. Мы поработали два месяца и сделали промо-сайт Cyber Bug.

Или кому нужен лендинг как у Apple, если ты не Apple? Мы начали этот проект для себя, чтобы отработать технологии. В процессе работы я подумал, какому бизнесу это может быть нужно.

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

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

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

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

Мы сделали черновую модель и анимации в Cinema 4D и потом собрали в After Effects прототип сайта. AE — это программа для видеоэффектов, собирать там сайт непривычно, зато получается не унылый прототип, а классная видео-история.

Сначала хотели собрать верстку в Webflow. Но быстро поняли, что такой сайт с кучей графики мы там если и соберем, то точно не настроим так как надо, и перешли на ручную разработку. Было два технически сложных момента — привязка к скроллу и загрузка графики большого размера.

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

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

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

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

Решили эту проблему так. Мы перестали считать все на своих компах и отправляли сцены на просчет на облачную рендер-ферму. Да, это дополнительные расходы, но время стоило дороже. Стоимость ошибки заметно упала, стало можно поэкспериментировать с настройками материалов и освещение.

Когда мы разобрались с графикой и подготовили чистовые секвенции начали разбираться с версткой. Чтобы верстать было удобно мы, конечно, перенесли экраны из AE в Figma. Но на первом варианте сайта увидели проблемы с адаптивностью, пришлось вернуться в Webflow, сверстать там экраны, проверить адаптивность и уже в виде кода отдать программисту.

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

Источник

Выступления и презентации в стиле Apple: на примере WWDC20

К нам часто приходят клиенты с запросом «Хотим в стиле Apple», и теперь на один такой запрос станет больше – он будет касаться презентаций для онлайн-конференций. Сооснователь студии дизайна информации VisualMethod сделала подробный разбор, на каких элементах строился сценарий вводного дня #WWDC20. Разбор состоит из трех блоков: цель, контент и дизайн. Полезен всем, кто делает презентации и выступает публично.

Иллюстрация VisualMethod

Меня зовут Виктория. Я сооснователь студии дизайна информации VisualMethod и тренер по публичным выступлениям. Мне всегда интересно смотреть презентации крупных компаний и анализировать их сценарии. 22 июня на #WWDC20 компания #Apple не только представила свои обновленные продукты, но и задала тренд публичных выступлений в новом формате.

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

Разберем презентацию Apple от начала до конца

Подготовка любой презентации или выступления начинается не с запуска программы #PowerPoint и даже не с запуска #KeyNote Она начинается с ответов на вопросы на бумажном или электронном листе. Если говорить языком маркетинга, нужно заполнить план коммуникаций.

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

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

Давайте предположим, как могли звучать ответы на эти вопросы у Apple, исходя из того, что озвучивали спикеры с экранов всех форматов на #WWDC20.

1. Цель. Что зритель должен знать, думать или делать после WWDC20?

Здесь все, на первый взгляд, очевидно — зритель после презентации должен отдавать предпочтение продукции Apple. Значит ли это просто покупку очередного гаджета? В этом году Apple расширила границы и призвала не просто голосовать рублем в магазине, а пустить себя в жизнь человека на 100%.

Интересный жест – занять место зрителя

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

Поэтому если сформулировать цель кратко, то она прозвучит примерно: жить с Apple.

2. Аудитория. Кто должен совершить целевое действие после WWDC20?

Хотя всемирная конференция Apple и обозначена как мероприятие для разработчиков, на деле это PR-событие, и вторая (если не первая) его аудитория – пресса, блогеры и общественные институты. Именно поэтому CEO компании Tim Cook начал Всемирную конференцию разработчиков с мнения о событиях, которые в настоящее время влияют на мир: движения Black Lives Matter и всемирной эпидемии коронавируса.

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

«Настало время стремиться к достижению цели, чтобы построить будущее, которое соответствует нашим идеалам равенства», — отметил Кук и сообщил об инициативе Apple по расовому равенству и справедливости и инвестициях в эту активность в 100 миллионов долларов.

Обратите внимание на символы позади Кука — все они со смыслом о важных событиях в обществе.

Чуть позже Кук поблагодарил работников здравоохранения всего мира за их усилия по борьбе с коронавирусом и сообщил о том, что продукты Apple оказали глубокое влияние в этой ситуации и помогли «оставаться на связи с семьей и друзьями, выполнять свою работу, выражать свои творческие способности и развлекаться, а также развлекать других».

Смотрите, два супер-важных повода и два аргумента в пользу Apple. Вот она — работа с репутацией. И эта работа нацелена не на разработчиков. Акции Apple также выросли во время основного доклада и закрылись на 2,6% до 358,87 долл. Это является признаком того, что инвесторы были довольны новостями о программном обеспечении и компании.

Что касается «виновников торжества» — разработчиков, то давайте разберем детальнее, какие сообщения были адресованы непосредственно им.

3. Сообщение. Какие аргументы и контент?

Ключевые сообщения для инвесторов и СМИ мы разобрали в блоке выше — они про социальную ответственность и «экосистемность» Apple. Что же компания хотела сообщить разработчикам?

Первое — новые обновления. Повторять вышедшие на VC.RU и Хабре отчеты не буду, там все подробно расписано. Интересное сообщение было о том, что мероприятие бесплатное и без регистрации, раньше Apple продавала доступ на очные конференции. Напомню, сообщество разработчиков Apple около 23 миллионов человек, и в очном формате собрать всех нереально. В онлайн — пожалуйста, но и из этого сделан отдельный инфоповод. Неплохо.

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

Сообщение — это не только слова, а еще интонация и внешний вид того, кто говорит. Это тоже часть коммуникационной стратегии и называется Tone of voice (ToV), то, с какой интонацией и в каком стиле говорят спикеры бренда и звучат сообщения от имени компании.

«Заметили, сколько раз в разных формах спикеры конференции сказали слово «великолепный»? Еще более волшебный, восхитительный, невероятный. Фанаты инфо стиля наверняка были в шоке. Так вот это и есть стиль бренда. Вы можете увидеть его же на сайте компании. Если бы они сказали «мы лучшие» один раз — это звучало бы как хвастовство. Но если восхищенные прилагательные звучат в каждом предложении — это воспринимается как естественный стиль компании», — отмечает Виктория Рындина.

Еще один прием — не говорить, что было плохо, а стало хорошо. В Apple говорят: «стало еще лучше», «работать еще проще и удобнее», «эта функция еще более незаменимая». Вот это «еще более» убирает проблему с вопросом «а что, раньше было плохо» и не дает аудитории разочаровываться.

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

Ценности Apple

Финальные наблюдения в этом блоке. У Apple есть прописанные ценности – на сайте, в материалах о компании. Ценности нужны в том числе для имиджа, чтобы создавалось цельное представление о компании, но они работают, если подтверждаются примерами. Поэтому в каждом программном выступлении и на мероприятиях представители Apple называют свои ценности и то, как они воплощены в жизнь. Это об универсальном доступе, окружающей среде, конфиденциальности. Заметили, как эти ценности были «вшиты» в выступления спикеров? Обычно это самая скучная часть, и у Apple этот блок тоже был затянут и спокоен так, что хотелось взять в руки iPhone, но при многократном повторении все же работает прекрасно, создавая нужное впечатление о компании.

4. Канал. Откуда аудитория получит сообщение?

Формат конференции из года в год менялся только в деталях. В этом году для компании была очевидная, но и сложная задача — провести крупнейшую конференцию в мире онлайн. Удержать внимание в течение двух часов без живого контакта с аудиторией. Впервые не было зрителей, аплодисментов и возгласов.

Блогеры и авторы статей отметили перемещение камеры из театра в офис, я зафиксировала для себя важный нюанс с представлением продуктов Apple там, где они используются — на рабочем месте, в спортивном зале, гараже, квартире. Это погружает в нужную атмосферу. Единственное, что не смогли показать – это перемещение по городу, но вместо этого был симпатичный ролик в 3D.

«Тайная» лаборатория Apple тоже была среди локаций

«Особенно классно было увидеть много всякой внутрянки кампуса Apple, которую вообще нигде не посмотришь», — написал после конференции один из зрителей.

Мне презентация понравилась, она была довольно динамичной, хотя и осталось послевкусие искусственности. Вероятнее всего, конференция была в записи, а ту самую «искусственность» создавали бегающие по тексту на рире глаза спикеров, склейки переходов локации. Сам сценарий был продуман до мелочей. Давайте разберем несколько нюансов.

Как провести конференцию в два часа и удержать внимание зрителей. С помощью смены локаций, спикеров и визуальных инструментов.

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

Логика выступлений — строго по цели

Сделать заявление компании о важных событиях в мире. Это нужно, чтобы обозначить позицию компании и задать тон.
Подстроиться под аудиторию и привлечь внимание. Презентацию начали с простых изменений, которые интересны всем зрителям. Например, виджетов. Организация приложений была «зудящей» проблемой, о которой часто писали на форумах. Решение простое, охват аудитории максимальный, тема вызывает доверие и затягивает.
В середине конференции дали новые продукты, которые еще недостаточно популярны – это подписки на ТВ и прочие электронно-развлекательные продукты. Тизер Foundation|Apple TV+ разбудил немного заснувшую аудиторию и дал возможность отдохнуть от спикеров.
В конце конференции поставили самые важные анонсы, например, о постепенном отказе использования чипов Intel. Это давняя уловка — ставить в конце самое интересное, чтобы удержать внимание зрителей до конца.
Кук отпустил аудиторию чуть раньше, чем закончились 2 часа. Это хороший прием, чтобы оставить ощущение недосказанности и заинтересовать зрителя подумать о том, что он услышал и заставить действовать.

Все вместе было собрано с помощью красивого монтажа.

О дизайне скажу отдельно

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

Текст на слайдах

Презентации Apple в целом всегда были сделаны с минимумом текстовой информации. К сожалению, большинство презентаций, которые мы видим в России, все еще содержат базовую ошибку — большое количество текста на слайдах. Это допустимо только в презентациях для чтения. В презентациях для выступлений слова могут и должны появляться преимущественно в роли отдельных самостоятельных объектов — взаимодействующих друг с другом, обозначающих действия и понятия, а не поясняющих их.

На конференции #WWDC20 текст появлялся либо для того, чтобы обозначить продукты компании, либо представлен цитатой, которую спикер зачитывал. Это правильно, потому что человек в один момент может либо читать, либо слушать.

Текст – это отдельный объект на слайде, если спикер зачитывает текст, то его нет в кадре.

Анимация

Это тренд в дизайне презентаций 2020 года, и он останется с нами и дальше. Что отличало анимацию в презентации Apple? Естественность. Текст, иконки, объекты появлялись ровно так, как мы ожидаем этого «в жизни», а точнее, как мы привыкли это видеть на своих экранах – в приложениях и на сайтах. Возьмите этот пункт во внимания, работая в PowerPoint. Анимация снова в моде, но она должна быть ненавязчивой.

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

Градиент

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

Прозрачные плашки

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

3D-модели

Их Apple демонстрирует в эмодзи, видеоролике, в иконках и других дизайн-элементах презентации. Такой стиль оформления все еще на пике популярности и по прогнозам в дизайн-сообществе продержится еще пару лет.

5. Активация. Конференция закончилась — что дальше делать?

В этой статья я сделала обзор только первого дня мероприятия, потому что для тренировки навыков публичных выступлений и разработки презентаций он самый показательный. Apple же продолжила встречи с разработчиками в разных форматах и в последующие дни. Первую реакцию аудитории мы уже увидели — инвесторы отреагировали и акции компании выросли, СМИ и блогеры написали тысячи публикаций, разработчики активно обсуждают каждую новинку. Думаю, целевые задачи по действиям в компании выполнены.

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

Что касается самого контента презентации, то мне показались полезными разговорник от Сири, транскрибирование текста после ввода стилусом и та самая организация иконок приложений, которую показали на старте.

Источник

Slider как у apple

Slider

Настройка Slider

Контент Slider

Поведение Slider

Внешний вид слайдера

Изображения минимального и максимального значения

Оттенок цвета

Изображения полосы и ползунка