Обновленный дизайн сайта Apple.com

Друзья, я снова приветствую вас на своем блоге! Недавно в сети опубликовали новость, что представители Apple.com решили обновить свой собственный сайт, сделав её более современным. И вот, что можно отметить из увиденного.

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

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

Массивные фотографии и графика

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

Как и многие сайты, Apple.com представляет большие изображения от края до края.

Похоже, Apple предпочитает использовать такие изображения больше, чем текст.

Например, в разделе Apple Watch одно из изображений делает накладной текст нечитаемым. Картинка показывает обнимающуюся и целующуюся пару. Два ярких светлых источника на фотографии размывают слово Notifications и ссылку ниже.

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

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

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

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

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

Apple удается быстро доносить большие изображения до зрителя. Например, картинка музыкального героя на сайте весит около 195 кб. В среднем понадобится 239 миллисекунд , чтобы загрузить её через широкополосное соединение посетителя сайта.

Продуманная мобильная оптимизация

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

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

Тем не менее, даже в этой мобильно-ориентированной среде, Apple.com выделяется.

Хорошим примером является лендинг-страница iPad. Если прокрутить немного вниз, вы найдете пару промо-разделов: iPad для образования и для бизнеса.

При просмотре с ноутбука или стационарного компьютера эти разделы имеют большое изображение с ссылками.

Созданный адаптивным, Apple.com показывает некоторые названия и ссылки сверху изображений на больших экранах и снизу изображения на маленьких экранах.

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

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

Целенаправленный параллакс прокрутки

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

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

Можно даже посчитать ненужным использование параллакс-скроллинга на лендинг-странице Music. Но в остальных местах Apple использует прокрутку параллакса с некой целью.

Стартовая страница iMac Retina 5K дисплеем продвигает другое огромное изображение. Оно заполняет ваш экран.

Стартовая страница iMac такая же, как и на сайте Apple.com

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

Прокрутка перемещает изображение. Вы видите намного больше.

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

Параллакс работает. Изображение отодвигается от краев экрана. Появляется чувство глубины.

Дальнейшее прокручивание колеса открывает то, что изображение показано на моноблоке iMac.

В этом случае, техника помогла представить ценность продукта.

В данном случае, техника параллакс-скроллинга помогла обратить внимание пользователя на продукт.

Полезные видео

Mac, iPad, iPhone являются схожими продуктами. Покупатели много знают о них. Они знают, как эти продукты выглядят, неплохо знают, как они работают. Даже как они влияют на ежедневную рутину.

Apple Watch – более новый продукт. Он, конечно, не лишен обсуждений в прессе или рекламного развития, но он менее известен.

Чтобы описать Apple Watch, новый Apple.com включает несколько отличных видео. Эти обучающие видео показывают покупателям, как работает данный продукт. В конце концов, видео помогают покупателям решить, хотят ли они купить один из продуктов.

Видео маркетинг – это не изобретение компании Apple. Но на их новом сайте, компания показывает отличный пример такого маркетинга.

Apple.com использует видео описание продуктов для пользователей, мало знакомых с этой техникой

Прокрутка обязательна

Новоиспеченный Apple.com также поддерживает к большему количеству прокрутки.

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

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

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

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

На этом завершаю свою статью. Надеюсь, она оказалась для вас полезной и содержательной.

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

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

До новых встреч, друзья!