Друзья, я снова приветствую вас на своем блоге! Недавно в сети опубликовали новость, что представители 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, отличается от того, что появляется на компьютере. Покупателям нужно прокручивать вниз, если хотят большего контента, и похоже, никто не возражает.
На этом завершаю свою статью. Надеюсь, она оказалась для вас полезной и содержательной.
Пишите комментарии, жмите на иконки социальных сетей, чтобы дать информацию своим подписчикам, которые будут благодарны вам за это.
И обязательно подписывайтесь на новости блога, чтобы не пропустить самого интересного.
До новых встреч, друзья!
Очень публичный дизайн
Поразительная тема
на сайте очень много интересного и полезного.