Великий Стив Джобс
, чье имя сегодня не сходит с уст как поклонников продукции Apple
, так и ее противников, стал новатором, настоящим революционером, изменившим мир персональных компьютеров и телекоммуникаций к лучшему. Созданные им устройства считаются культовыми, а логотип в виде надкушенного яблока - легендарным. Поэтому неудивительно, что дизайнеры и изобретатели по всему миру вдохновляются "яблочным лого" и создают самые разные устройства и аксессуары в этом стиле, украшают яблоками свои тела и прически, не говоря уже о миллионах юмористических iШтук в стиле Apple logo
. Сегодняшний обзор посвящен самым интересным решениям, способным порадовать любого Apple-фаната.
Разумеется, первые в нашем списке - гаджеты, выполненные хоть и не по образу и подобию iPhone или iPad, но в виде знаменитого "яблочного" логотипа. Здесь и усыпанные стразами флешки в виде Apple logo, и деревянные колонки в виде маленьких яблочек, и даже зарядное устройство для Apple-техники в виде все того же надкушенного фрукта.
Украшения в виде логотипа Apple
Чтобы порадовать девушек, фанаток iPhone и iPad, не обязательно дарить им чехлы или аксессуары для любимой техники. Можно обойтись украшениями и аксессуарами для самой девушки. Индустрия, производящая разнообразные вещи в Apple-style, позаботилась о том, чтобы в ассортименте были серьги и кулоны, браслеты и брошки в виде знаменитого яблока с надкушенным боком.
Кстати, эта индустрия позаботилась и о мужских аксессуарах в Apple-style.
Мебель в виде логотипа Apple
Впрочем, настоящему Apple-фану мало украсить себя и свою девушку соответствующими аксессуарами. В квартиру тоже нужно добавить "яблочной" эстетики. Как вам нравится, к примеру, этот стол? На нем будет отлично смотреться какой-нибудь MacBook или iPad.
Еда в виде логотипа Apple
Ну и, разумеется, "съедобный" логотип фанаты просто обязаны были обыграть в продуктовом ключе! Трудно представить себе лого, более подходящее для того, чтобы выпекать торты и пирожные, кексы и пудинги в его форме. Отличный подарок Apple-фану ко дню рождения, дню свадьбы, да и в любой другой, непраздничный день.
Дизайнерский креатив на тему Apple
Сногсшибательной популярности, которой пользуется продукция , можно только позавидовать. Хотя, можно ею вдохновляться, чтобы творить свое собственное творчество, взяв за основу знаменитый логотип в виде надкушенного яблочка. Ну или же стать юмористическим подражателем, выдумывая всевозможные фейковые iШтуки, вроде тех, которые представлены в этом разделе.Apple logo в современном искусстве
Продолжая тему дизайнерского креатива с логотипом компании Apple, нельзя не вспомнить о необычных произведениях искусства, чье вдохновение связано с яблоками. Так, к примеру, в Японии ученые придумали, как выращивать яблоки с "татуировками" в виде логотипа 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, Nike или L’Oreal, потому что ваш собственный будет ничуть не хуже. Итак, вот несколько рекомендаций по созданию солидного, профессионального сайта.
Большие бренды постоянно обновляют и дорабатывают свои сайты. Команды опытных дизайнеров и разработчиков трудятся над тем, чтобы сделать необычный и современный ресурс, вызывающий у людей любопытство и желание как следует все рассмотреть.
Да, это очень дорого, но есть и бесплатные варианты, например, Wix. Наш редактор создан специально для того, чтобы вы смогли сделать симпатичный сайт для любого вида деятельности и добавить на него какой-нибудь модный эффект, например, параллакс-прокрутку или видео в качестве фона. Можно сделать актуальную «длинную» страницу и дополнить ее элементами «плоского» дизайна*.
Думаем, на данном этапе вам не помешает походить по сайтам для дизайнеров и хорошенько вдохновиться. Наши рекомендации: журнал Web Inspiration , блог Lopart и дизайн-журнал Дежурка ; если английский язык для вас не помеха, читайте Vandelay Design , Smashing Magazine и Webdesign Depot .
*Не понимаете, что означают все эти слова? Значит, вам нужно прочитать нашу .
У больших компаний узнаваемый фирменный стиль и очень четкое позиционирование. Они используют строго определенные шрифты, цвета и слоганы. Вы безошибочно узнаете красный логотип «Кока-Колы», будь он на сайте, бутылках или рекламных щитах, развешанных вдоль улицы.
Ну и что, что ваша компания не такая большая, как «Кока-Кола»? Это не означает, что вам не нужно заниматься брендингом. Продуманный фирменный стиль - это важно. Благодаря ему люди смогут быстро опознать ваш продукт, а там уже рукой подать до покупки. Поэтому нарисуйте симпатичный логотип, придумайте слоган, выберите фирменные шрифты, цвета и оформите страницы в соцсетях соответствующим образом. Больше советов - в нашей статье о том, .
Лучше меньшеМы понимаем, что вы хотите подробно рассказать о вашем продукте и бизнесе, но не советуем перегружать сайт и утомлять посетителей. Сайт, очень плохо грузится, с трудом читается и отталкивает посетителей. Лучшее - враг хорошего, поэтому вам нужно научиться вовремя останавливаться.
Давайте подумаем, что можно убрать с вашего сайта. Если тексты пестрят техническими и профессиональными терминами - избавьтесь от них. Думаете, посетителям правда нужно знать детальную биографию всех ваших сотрудников? Маловероятно. Кое-что, конечно, сократить не получится, например, подробное описание товаров или услуг, но это нормально, эта информация - полезная. Ее даже стоит перенести туда, где она точно не останется незамеченной. А все, что замедляет процесс покупки, можно удалить без малейшего сожаления.
Теперь посмотрим на дизайн. Сократите количество цветов до трех или четырех, уберите все лишние картинки и обратите внимание на типографику. Не забывайте оставлять побольше свободного пространства, также известного как «воздух». Когда на сайте много «воздуха», люди замечают все критично важные элементы, например, необходимые для того, чтобы подталкивать посетителей к покупке, подписке, регистрации и т.д.
Покажите продукт на главной страницеХотите увеличить количество заказов? Значит, сделайте так, чтобы люди сразу видели ваш продукт. Посмотрите на сайты известных брендов. Видите, они размещают товары не только на странице покупок, но и на главной, чтобы люди наверняка их заметили. Если у вас , и вы думаете о том, как поднять продажи - смело копируйте этот прием.
Разумеется, фотографии товаров должны быть большими и очень качественными. Не забывайте, что дело происходит в онлайн-магазине, где ничего нельзя потрогать и померить, поэтому люди принимают решение о покупке, глядя на картинку. Если у вас нет денег на профессионального фотографа, прочитайте нашу статью о том, . Немного практики - и все получится! И не забывайте про возможности нашего редактора, Вы можете добавить на сайт приложение , чтобы клиент смог увеличить изображение интересующей вещи и хорошенько ее рассмотреть.
Думаем, вам доводилось попадать на плохо продуманный сайт и растерянно метаться туда-сюда в поисках нужной страницы. Как правило, из таких мест мы уходим с пустыми руками и желанием больше никогда не возвращаться. А всему виной - непродуманная навигация. Не повторяйте эту ошибку и делайте так, чтобы посетителю было все понятно с первых же секунд.
Если вас все время спрашивают об одном и том же, сделайте страницу с ответами на часто задаваемые вопросы. Можете воспользоваться приложением Wix FAQ . Его плюс в том, что люди получают нужную им информацию, а вы при этом не отвлекаетесь от других дел.
Хотите показать, что ваша компания - отзывчивая и дружелюбная? Добавьте приложение «Живой чат Tidio », чтобы отвечать на вопросы в реальном времени. Можно установить его на смартфон и не сидеть целый день за компьютером, а ходить по делам и быть при этом на связи.
Покажите, что люди вам доверяютХорошо, что вы стараетесь быть на связи и вовремя отвечать на вопросы, однако этого недостаточно, чтобы выстроить доверительные отношения с клиентами. Для этого нужно снова поработать над сайтом. Сделайте отдельный раздел с историей компании, расскажите о том, кто вы такой, во что верите и что считаете важным. Слишком много информации ни к чему: текст должен быть коротким, искренним и понятным. В интернете довольно сложно показать, что вы за человек, но мы думаем, что такая страница отлично справится с этой задачей.
Веб-дизайн в стиле Apple развивался и эволюционировал на протяжении нескольких лет, начиная с 1996 года. Как следует из названия, идея дизайна принадлежит корпорации Apple: в таком стиле оформлялся сайт и интерфейсы продуктов. Дизайн сайта в стиле Apple приобрел широкую популярность благодаря минималистичности и акцентуации внимания пользователя на конкретном продукте.
Характерные особенности дизайна сайта в стиле AppleВ стиле Apple - идеальный способ презентовать товар или услугу. Такой стиль часто используют при оформлении интернет-магазинов, промо-сайтов, посвященных любому виду продукции: от обучающих курсов до продажи недвижимости.
Вот так выглядит дизайн в стиле Apple для сайтов, посвященных программному обеспечению:
- Jumsoft http://www.jumsoft.com/money/
- Versionsapp https://versionsapp.com/
Для оформления этих сайтов использованы характерные цвета стиля - серый, черный, белый. Благодаря этому навигационное меню практически незаметно. Внимание пользователя приковано к продукту, презентованному ярким, красочным изображением. С помощью контрастов выделены кнопки для скачивания, покупки. Контент подан кратко, структурировано, в сопровождении иконок и изображений. Дизайн объемный, присутствуют зеркальные эффекты, тень.
Не подойдет Apple-стиль для информационных порталов, блогов, портфолио, а также сайтов, посвященных творчеству.
Здравствуйте, уважаемые читатели 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.: Такое простое меню сможет сделать каждый, но если вам нужен по настоящему крутой сайт с красивыми эффектами, то могу порекомендовать вам одну из лучших веб студий Украины . Ребята смогут сделать вам действительно уникальный дизайн, выполнить поисковую оптимизацию и раскрутить ваш сайт!
Значение слова неудачный
Обзор Samsung Galaxy A7 (2017): не боится воды и экономии Стоит ли покупать samsung a7
Делаем бэкап прошивки на андроиде
Как настроить файл подкачки?
Установка режима совместимости в Windows