Красивый слайдер в стиле Apple. Что такое «в стиле Apple»? Определим градиент, разделитель и стиль при наведении мыши с помощью операций

Многие клиенты, описывая свои пожелания относительно будущего сайта, выражаются ёмко: «Хотим что-то в стиле Apple!». По их мнению, такой ответ должен дать исполнителю исчерпывающую информацию, сходу расставить все точки над «i» и исключить какую-либо неоднозначность. Но на деле всё, конечно, сложнее. Ведь впечатлить человека в стилистике Apple может что угодно — презентация нового планшета, простая белая коробка iPhone или сам сайт Apple. И ведь самое обидное, вполне вероятно, говоря «сделайте в стиле Apple», сам клиент попросту не знает, что это значит на самом деле. Как же быть несчастному исполнителю, который, возможно, просто не догадывается, чего от него в итоге ждут?

Попробуем разобраться!

Принцип Apple

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

«Ну, сэкономили на копирайтинге — мы же не тексты продаем, а телефон», — подумает большинство.

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

Второй важно особенностью продукции Apple является элегантная простота. Она у Apple играет очень важную роль.

«Почему мы считаем, что простота — это хорошо? Потому что когда мы имеем дело с предметами, нам важно чувствовать, что мы управляем ими».

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

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

Подходы

Фотографии и иллюстрации

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

Та самая магия фотографий. По словам некоторых — «обычный брусок со скругленными углами», но на таких фотографиях он вызывает восхищение.

Воздушность и чистота

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

Шрифты

На сайте Apple используется всего две гарнитуры Adobe Myriad для заголовков и стандартный шрифт системы MacOS X — Lucida Grande. Обе гарнитуры — строгие и современные рубленые шрифты, которые только поддерживают общий минималистичный стиль. Что характерно, стремление к высокому качеству присутствует и здесь — из-за желания, чтобы большие заголовки на сайте выглядели гарантированно красиво в любых условиях, Apple использует для надписей изображения, а не текст.

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

Скругленные углы

Также на сайте присутствуют знаменитые (куда уж без них!) скругленные углы. Они буквально повсюду! Чего греха таить — иногда кажется, что iPhone был придуман только для того, чтобы продолжить традицию использования скругленных уголков.

Скругленные уголки везде — в корпусе телефона, иконках приложений и даже на кнопке «Home».

Эффекты

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

Главное меню на сайте Apple. Дань уважения знаменитому стилю Aqua — после отставки Скотта Форстолла минимализм все больше преобладает на скеоморфизмом и карамельными эффектами.

Контент

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

Современные эффекты

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

И это все?

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

Недостаточная проработка всего лишь одного из этапов моментально разрушит хрупкую магию «стиля Apple».

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

Яблоковский дизайн всегда был весьма популярен среди моих клиентов. Когда дело доходит до оформления, мне часто говорят: «нужен простой дизайн со светло-серым фоном» и приводят в пример apple.com

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

Итак выкладываю кнопки на чистом CSS:

Apple-button { cursor : pointer ; padding : 3px 10px; text-decoration : none ; color : #fff ; font-size : 13px; text-shadow : 0 -1px 1px rgba(0 , 0 , 0 , .3) ; background-image :-webkit-linear- gradient(#52A8E8 , #377 AD0 #377 AD0 , #52A8E8 ) ; background-image : -o-linear-gradient(rgb (82 , 168 , 232 ) , rgb (55 , 122 , 208 ) ) ; background-color : #52A8E8 ; -moz-border-radius : 23px; -webkit-border-radius : 23px; border-radius : 23px; border : 1px solid #205 59A ; box-shadow : 0 1px 2px rgba(0 , 0 , 0 , .5) , inset 0 1px 0 rgba(255 , 255 , 255 , .3) ; } .apple-button :hover , .apple-button :focus { background-image :-webkit-linear- gradient(#54A1D8 , #196 7CA ) ; background-image :-moz-linear- gradient(0 % 100 % 90deg, #196 7CA , #54A1D8 ) ; background-image : -o-linear-gradient(rgb (84 , 161 , 216 ) , rgb (25 , 103 , 202 ) ) ; background-color : #52A8E8 ; box-shadow: 0 1px 0 rgba(255 , 255 , 255 , .6) , inset 0 1px 0 rgba(255 , 255 , 255 , .3) ; } .apple-button :active { background-color : #2D7CD1 ; box-shadow : 0 1px 1px rgba(255 , 255 , 255 , .5) , inset 0 2px 5px rgba(0 , 0 , 100 , .5) ; }

Демо: живой пример (попробуйте навести на него курсор и понажимать)

Пару слов о кроссбраузерности. Так как мы использовали CSS-свойство gradient, то могут возникнуть некоторые проблемы при отображении в старых версиях браузера Opera, ну и box-shadow — это свойство CSS 3.

Миша

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

Сам же я впервые познакомился с WordPress в 2009 году. Организатор . Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce - . Я и моя команда сделаем вам всё на лучшем уровне.

Вступление

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

В этом уроке мы сделаем галерею - слайдшоу "а ля" Apple. Примерно такая же используется на сайте Apple для представления продуктов компании. Для создания нам не понадобится PHP или база данных.

ШАГ 1 - XHTML

Давайте подробнее взглянем на XHTML разметку:

Идея очень проста - существует два главных контейнера DIV - один с id=”menu” содержит миниатюры, второй “slides” содержит непосредственно слайды.

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

Вы также можете вставлять любой HTML-код. К примеру, Вы можете сделать определенный слайд ссылкой в виде картинке.

Очень важно, чтобы у слайдов были прописаны высота и ширина - они используется jQuery для определения зоны прокрутки.

Также обратите внимание на элементы миниатюр LI. Первому присвоен класс fbar для отображения вертикальной разделяющей полосы. Другим элемента присвоен класс menuItem - и они используются в качестве кнопок управления слайдшоу.

Давайте перейдем к следующему шагу.

Шаг 2 - CSS

Давай взглянем на нашу таблицу стилей.

Body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{ /* Page reset */ margin:0px; padding:0px; } body{ /* Setting default text color, background and a font stack */ color:#444444; font-size:13px; background: #f2f2f2; font-family:Arial, Helvetica, sans-serif; } /* Gallery styles */ #gallery{ /* CSS3 Box Shadow */ -moz-box-shadow:0 0 3px #AAAAAA; -webkit-box-shadow:0 0 3px #AAAAAA; box-shadow:0 0 3px #AAAAAA; /* CSS3 Rounded Corners */ -moz-border-radius-bottomleft:4px; -webkit-border-bottom-left-radius:4px; border-bottom-left-radius:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px; border-bottom-right-radius:4px; border:1px solid white; background:url(img/panel.jpg) repeat-x bottom center #ffffff; /* The width of the gallery */ width:920px; overflow:hidden; } #slides{ /* This is the slide area */ height:400px; /* jQuery changes the width later on to the sum of the widths of all the slides. */ width:920px; overflow:hidden; } .slide{ float:left; } #menu{ /* This is the container for the thumbnails */ height:45px; } ul{ margin:0px; padding:0px; } li{ /* Every thumbnail is a li element */ width:60px; display:inline-block; list-style:none; height:45px; overflow:hidden; } li.inact:hover{ /* The inactive state, highlighted on mouse over */ background:url(img/pic_bg.png) repeat; } li.act,li.act:hover{ /* The active state of the thumb */ background:url(img/active_bg.png) no-repeat; } li.act a{ cursor:default; } .fbar{ /* The left-most vertical bar, next to the first thumbnail */ width:2px; background:url(img/divider.png) no-repeat right; } li a{ display:block; background:url(img/divider.png) no-repeat right; height:35px; padding-top:10px; } a img{ border:none; }

В этой таблице стилей мы использовали несколько CSS3-свойств:

* box-shadow, по углам галереи небольшая тень. Использование этого свойства - необходимо предоставить координаты X и Y (0 0 here), размывание (3px в нашем примере) и цвет тени;
* border-radius, круглые границы снизу галереи.

К сожалению, эти свойства работают только в Safari, Chrome и Firefox на данный момент.

Теперь пришло время магииjQuery.

ШАГ 3 - jQuery

Нам понадобится следующий код:

$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */

var totWidth=0;
var positions = new Array();

$("#slides .slide").each(function(i){
/* Loop through all the slides and store their accumulative widths in totWidth */
positions[i]= totWidth;
totWidth += $(this).width();

/* The positions array contains each slide"s commulutative offset from the left part of the container */

if(!$(this).width())
{
alert("Please, fill in width & height for all your images!");
return false;
}
});

$("#slides").width(totWidth);

/* Change the cotnainer div"s width to the exact width of all the slides combined */

$("#menu ul li a").click(function(e){

/* On a thumbnail click */
$("li.menuItem").removeClass("act").addClass("inact");
$(this).parent().addClass("act");

var pos = $(this).parent().prevAll(".menuItem").length;

$("#slides").stop().animate({marginLeft:-positions+"px"},450);
/* Start the sliding animation */

e.preventDefault();
/* Prevent the default action of the link */
});

$("#menu ul li.menuItem:first").addClass("act").siblings().addClass("inact");
/* On page load, mark the first thumbnail as active */
});

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

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

Всего 40 строк кода и наша слайдшоу - галерея готова!

Заключение

Всего три шага нам понадобилось для создания супер красивой галереи в стиле Apple. Она способна украсить любой сайт.

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

Не знаете, каким должен быть такой сайт? Не волнуйтесь, сейчас мы все объясним и расскажем, как действовать. Если вы воспользуетесь нашими советами, то вам больше не придется горестно вздыхать, глядя на сайты Apple, Nike или L’Oreal, потому что ваш собственный будет ничуть не хуже. Итак, вот несколько рекомендаций по созданию солидного, профессионального сайта.

Следите за трендами в веб-дизайне

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

Да, это очень дорого, но есть и бесплатные варианты, например, Wix. Наш редактор создан специально для того, чтобы вы смогли сделать симпатичный сайт для любого вида деятельности и добавить на него какой-нибудь модный эффект, например, параллакс-прокрутку или видео в качестве фона. Можно сделать актуальную «длинную» страницу и дополнить ее элементами «плоского» дизайна*.

Думаем, на данном этапе вам не помешает походить по сайтам для дизайнеров и хорошенько вдохновиться. Наши рекомендации: журнал Web Inspiration , блог Lopart и дизайн-журнал Дежурка ; если английский язык для вас не помеха, читайте Vandelay Design , Smashing Magazine и Webdesign Depot .

*Не понимаете, что означают все эти слова? Значит, вам нужно прочитать нашу .

Займитесь брендингом

У больших компаний узнаваемый фирменный стиль и очень четкое позиционирование. Они используют строго определенные шрифты, цвета и слоганы. Вы безошибочно узнаете красный логотип «Кока-Колы», будь он на сайте, бутылках или рекламных щитах, развешанных вдоль улицы.

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

Лучше меньше

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

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

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

Покажите продукт на главной странице

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

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

Сделайте хорошую навигацию

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

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

Хотите показать, что ваша компания - отзывчивая и дружелюбная? Добавьте приложение «Живой чат Tidio », чтобы отвечать на вопросы в реальном времени. Можно установить его на смартфон и не сидеть целый день за компьютером, а ходить по делам и быть при этом на связи.

Покажите, что люди вам доверяют

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

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

Сделайте мобильную версию сайта

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

Не забывайте про социальные сети

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

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

Готовы встать в один ряд с большими брендами? сами на Wix - это просто и бесплатно!