LESS CSS: Меню в стиле Apple. История фирменного дизайна в новой книге компании Apple Компилируем LESS в CSS

Яблоковский дизайн всегда был весьма популярен среди моих клиентов. Когда дело доходит до оформления, мне часто говорят: «нужен простой дизайн со светло-серым фоном» и приводят в пример 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 - их уникальный дизайн. Книга «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.

Вступление

Когда речь заходит о дизайне, существует одна компания, которую невозможно не вспомнить. Это компания 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 развивался и эволюционировал на протяжении нескольких лет, начиная с 1996 года. Как следует из названия, идея дизайна принадлежит корпорации Apple: в таком стиле оформлялся сайт и интерфейсы продуктов. Дизайн сайта в стиле Apple приобрел широкую популярность благодаря минималистичности и акцентуации внимания пользователя на конкретном продукте.

Характерные особенности дизайна сайта в стиле Apple

1. Строгая иерархия в композиции элементов. Основной приоритет – изображение продукта. Фотография высокого качества, четкая, крупная, размещается в центе страницы и окружается белым пространством. В лучших традициях минимализма.
2. Цветовая палитра, как правило, состоит из трех оттенков: черный, белый, серый. При этом, в отличие от плоского стиля, широко применяются градиенты, тени, способы передачи объема.
3. Характерные шрифты. Заголовки оформляются Adobe Myriad, обычный текст – Lucida Grande.
4. Контент. На главной странице сайта – минимум информации. Подробное описание вынесено на отдельные страницы. Отсутствует эффект перенасыщения. Пользователь сам выбирает информацию, которая его интересует.
5. Технические особенности. Apple-дизайн ориентирован на формат HTML 5, использование современных стандартов в дизайне. На официальном сайте Apple принципиально не используется Flash.

Для каких сайтов подходит?

• • Jumsoft http://www.jumsoft.com/money/
  • Versionsapp https://versionsapp.com/

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

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

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

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

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

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

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

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

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

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

Лучше меньше

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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