Веб-дизайн в стиле Apple развивался и эволюционировал на протяжении нескольких лет, начиная с 1996 года. Как следует из названия, идея дизайна принадлежит корпорации Apple: в таком стиле оформлялся сайт и интерфейсы продуктов. Дизайн сайта в стиле Apple приобрел широкую популярность благодаря минималистичности и акцентуации внимания пользователя на конкретном продукте.
Характерные особенности дизайна сайта в стиле Apple- Jumsoft http://www.jumsoft.com/money/
- Versionsapp https://versionsapp.com/
Здравствуйте, уважаемые читатели a! Веб-дизайн и веб-разработка очень быстро развиваются. Мы каждый день видим все больше и больше новинок, будь то приложения или новые сервисы, которые делают нашу жизнь в сети более продуктивной и удобной. А веб-дизайн это просто безграничное пространство, ограниченное только талантом и умениями «художника» (дизайнера). Так вот, поговорим же мы сегодня о LESS
— динамическом языке стилевой разметки, который упростит написание стилей CSS.
LESS – это надстройка над CSS. Это значит, что любой CSS код – это валидный LESS, но дополнительные элементы LESS не будут работать в простом CSS коде. Это замечательно, потому что существующий CSS уже является работоспособным LESS кодом, что уменьшает порог вхождения в новую технологию.
LESS добавляет много нужных динамических свойств в . Он вводит переменные, операции, элементы и примеси. Возможность писать таблицы стилей модульно избавит вас от многих хлопот.
LESS существенно облегчает написание стилей. Например, применяя примешивания (mixins), мы создаем что-то на подобии функций, которые могут принимать аргументы. Mixins — позволяют включать все свойства класса в другой класс путем простого включения имени класса как значение одного из свойств.
1 | Rounded-corners
(@radius
:
5px
)
{
|
А скомпилированный CSS будет выглядеть так:
1 | #header
{
|
Загружаем библиотеку prefix-free.js и подцепляем ее к index.html:
< script src= "prefix-free.js" type= "text/javascript" > |
На этом с подготовкой закончим и перейдем непосредственно к созданию меню в стиле Apple.com
Разметка HTMLРазметка меню довольно проста. Меню сделано на основе не упорядоченного списка. Открываем HTML-редактор и вставляем такой вот код:
1 |
В этом разделе мы начнем написание кода меню на LESS языке. Для тех, кто новичок в программировании, как в написание так и в синтаксисе LESS, не волнуйтесь, постараюсь разложить все по полочкам, чтобы было понятно. Возможно даже кому-то такой способ написания стилей для сайта понравится, ведь он действительно более продуктивный.
Давайте рассмотрим из каких составных частей будет состоять меню:
Как мы можем видеть на скриншоте выше, навигация Apple.com имеет следующие 6 основных частей:
- Используется тень;
- Граница;
- Разделитель между пунктами меню;
- Градиент для фона;
- Эффект затемнения при наведении мыши;
- Текст меню.
Использовать написанные стили можно двумя способами:
- Crunch
Важно:
при использовании первого способа чтобы подключение styles.less
происходило до подключения библиотеки less.js
! Также остается не забыть подключить prefix-free
.
Таким образом подключение стилей выглядит так:
1 |
|
Будем использовать 2 файла: config.less в нем определим все переменные, примешивания и тд., после чего импортируем его во второй (styles.less ) в котором уже сформируем стили для элементов меню.
Сейчас разберем код в config.less . Определим базовый цвет меню с помощью переменных. Переменная в LESS объявляется с помощью символа @ .
В приведенном выше коде я не включил префикс для box-shadow , библиотека prefix-free автоматически добавит его. Кроме того, цвет тени наследуется от цвета переменной @theme .
Определим стиль для границ меню используя mixins с параметромДля нашего меню понадобится граница с закругленными углами. Mixins с параметром — на самом деле имеет такую же функциональность как и простое примешивание, единственным отличием является то, что он также имеет изменяемый параметр.
1 | Border(@radius
:
3px
)
{
|
В приведенном выше примере, мы установили закругление по умолчанию @radius в 3 пикселя и, как мы уже говорили, это значение может быть изменено.
Определим градиент, разделитель и стиль при наведении мыши с помощью операцийВ LESS с помощью операций можно увеличивать, уменьшать, делить и умножать и значения и цвета свойств, давая возможность указывать сложные соотношения между свойствами, чтобы получить желаемый результат. Давайте взглянем на следующий код, который задает свойства для разделителя в меню:
1 | Divider
{
|
В приведенном выше примере мы вычитаем из переменной @theme цвет #111 , таким образом, левая часть разделителя будет немного темнее чем базовый цвет, а правая светлее. Вот такие манипуляции мы можем делать с HEX-цветом.
Для большей понятности манипуляций с цветом, давайте рассмотрим цветовую схему:
Максимальная темный цвет #000 (черный), а максимальный светлый цвет #FFF (белый) и базовый цвет #555 . Таким образом, если мы хотим получить цвет на три уровня темнее, то вычитаем #333 .
Теперь стили градиента:
1 | Gradient
{
|
Мы планируем использовать 2 цвета текста и цвета теней текста. Один вариант используется если фон меню будет светлым то цвет текста темный и наоборот.
Во-первых, если цвет текста на имеет яркость равную или больше чем 50%, то тень должна потемнеть, в данном случае принять цвет #000000 .
На этом этапе заканчиваем создание файла config.less и переходим к созданию файла styles.less
Импорт config.lessДавайте создадим файл с названием styles.less и первым делом прицепим к нему уже созданный config.less , следующим способом:
На данный момент результат нашей работы выглядит так.
Пока не очень привлекательно. Но все еще впереди.
Основной стиль для меню с вложенными правиламиВ LESS мы можем вкладывать стили какого-либо элемента, непосредственно в стиль родителя.Навигационные тег nav спецификация HTML5, который содержит все необходимые элементы для навигации. Вот его стили:
1 | nav {
|
Обратите внимание, что вместо того, чтобы писать кучу правил CSS, определили только высоту, ширину и отступы. В то время как границу и ее стиль, а также тень мы подцепляем с помощью примешивания (mixins), указываем имя класса .border
и .shadow
и к классу nav
добавляются правила этих классов, которые мы писали в файле config.less
.
1 | nav {
|
Однако в LESS наследование происходит иначе, пойму проще и логичней:
1 | nav {
|
Как видно на картинке, элементы списка li расположены вертикально, а нам надо чтобы они располагались горизонтально. Для этого зададим свойство display:inline;
1 | nav {
|
1 | nav {
|
В приведенном выше примере мы применяем шестнадцатеричный цвет #f2f2f2
, этот цвет имеет яркость более 50%, поэтому тень будет установлена автоматически черным цветом. Остальная часть кода я уверен, вполне очевидна.
li {
display
:
inline
;
a {
text-decoration
:
none
;
display
:
inline-block
;
float
:
left
;
width
:
156px
;
height
:
45px
;
text-align
:
center
;
line-height
:
300%
;
.divider;
.gradient;
}
}
li:
first-child
a {
border-left
:
none
;
}
li:
50px
auto
0
;
width
:
788px
;
height
:
45px
;
.border;
.shadow;
ul {
padding
:
0
;
margin
:
0
;
li {
display
:
inline
;
a {
text-decoration
:
none
;
display
:
inline-block
;
float
:
left
;
width
:
156px
;
height
:
45px
;
text-align
:
center
;
line-height
:
300%
;
.textcolor(#f2f2f2
)
;
// You can change this line
.divider;
.gradient;
&:
hover
{
.hovereffect;
}
}
}
li:
first-child
a {
border-left
:
none
;
}
li:
last-child
a {
border-right
:
none
;
}
}
}
Ну вот и все, написание apple.com на этом можно завершить. Остается решить каким способом мы будем присоединять написанные стили к веб-странице. Как я уже упоминал выше, использовать написанные стили можно двумя способами:
- подключить styles.less и библиотеку less.js ;
- либо скомпилировать styles.less в программе Crunch и уже присоединить к странице обычный styles.css
Конечно более второй вариант лучше, зачем присоединять 2 файла и выполнять двойную работу на стороне клиента, поэтому скомпилируем написанные стили LESS в обычный статический CSS.
Для этого надо нажать на большую кнопку Crunch It
! И сохранить обычный styles.css
На этом, урок завершаю.
P.S.: Такое простое меню сможет сделать каждый, но если вам нужен по настоящему крутой сайт с красивыми эффектами, то могу порекомендовать вам одну из лучших веб студий Украины . Ребята смогут сделать вам действительно уникальный дизайн, выполнить поисковую оптимизацию и раскрутить ваш сайт!
Многие клиенты, описывая свои пожелания относительно будущего сайта, выражаются ёмко: «Хотим что-то в стиле 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 - каждый продукт у них это результат работы команды дизайнеров. Сайт этой компании также всегда привлекал внимание.
В этом уроке мы сделаем галерею - слайдшоу "а ля" 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-культ не оставляет равнодушным никого, и стоит взглянуть правде в глаза: один из ключевых факторов популярности компании Apple - их уникальный дизайн. Книга «Designed by Apple in California» наглядно иллюстрирует, что дизайнеры относятся к своим продуктам как к искусству.
Купертино, Калифорния - 16 ноября компания Apple анонсировала релиз новой книги в твёрдом переплёте под названием «Designed by Apple in California». Два десятилетия инноваций в дизайне запечатлены на 450 фотографиях прошлых и нынешних продуктов компании, начиная с iMac (1998 г.) и заканчивая Apple Pencil (2015 г.). Книгу создавали 8 лет и посвятили её памяти Стива Джобса.
«Идея о создании чего-то важного для человечества мотивировала Стива с самого начала, эта мысль - наш идеал и цель, с которой Apple двигается в будущее», - утверждает Джони Айв.
«Designed by Apple in California» - результат тесного сотрудничества многих групп дизайнеров и специалистов совершенно разных сфер. Всех их объединяет надежда на то, что книга даст людям понимание, как и почему продукты Apple созданы и существуют. Все фотографии сделаны Эндрю Цукерманом в технике, описанной им как «нарочито скромный стиль». Снимки иллюстрируют детали процесса дизайна так же хорошо, как и сами готовые продукты.
Это книга о дизайне, но речь в ней идет не о самих дизайнерах, творческом процессе или развитии продукта. Она объективно отражает стиль, образ и идеологию дизайна Apple. Многие продукты выглядят настолько понятными, простыми и логичными, будто не имеют разумной альтернативы. Для каждого устройства продуман даже дизайн инструмента, которым он сделан.
«Как дизайнеры мы живем в будущем, любим то, что уже сделали, и помешаны на том, что сделать еще не успели»
«Одна из важнейших вещей, которые мы усвоили за 20 лет совместной работы - необходимость слушать друг друга, потому что самые яркие идеи зачастую подают те, кто говорит очень-очень тихо»
Книга «Designed by Apple in California» выпускается ограниченным тиражом в двух форматах: small (25,9 x 32,4 см) по цене $199 и large (33 x 40,6 см) за $299. Она отпечатана на специально изготовленной бумаге особой окраски с матовыми посеребрёнными краями. Продается эксклюзивно на сайте Apple.com в США, Австралии, Великобритании, Германии, Гонконге, Корее, Франции, Японии и Тайване, а также в некоторых магазинах Apple Store.
