Гид компьютерного мира - Информационный портал

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

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

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

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

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

К сожалению, сейчас Apple постепенно отказывается от этих идей. Их дизайнерские руководства по iOS и Mac OS X все еще включают в себя подобные концепции, однако внутри корпорации многие из них вообще не практикуются. Apple сбились со своего пути, и теперь, акцентируя внимание на стиле и внешнем виде, они действуют в ущерб ценностям, которые когда-то были их главным козырем в борьбе с конкуренцией.

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

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

Apple, вы всегда были лидерами. Почему сейчас вы действуете столь эгоцентрично? Но что еще важнее, почему Google следует всем вашим худшим примерам?

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

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

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

Сегодняшние iPhone’ы и iPad’ы представляют собой целый трактат по визуальной простоте. Прекрасные шрифты. Чистый макет, свободный от посторонних слов, символов или меню. И неважно, что многие люди не могут прочитать текст. Зато он красивый.

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

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

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

От отмены отказались. И знаете, что случилось? Поступило множество жалоб, поэтому они вернули данную функцию в несколько ином формате: все, что вам нужно было сделать, чтобы отменить действие, это сильно потрясти телефон или планшет. Тем не менее, отмена так и не была реализована универсально, и узнать о ней можно было, только встряхнув девайс. Более того, в случае несрабатывания функции пользователи не знали, в чем состоит проблема: в том, что гаджет трясли недостаточно сильно, или в том, что отмена не была предусмотрена для этой конкретной ситуации.

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

Apple размещают стрелку «назад» в некоторых местах, но в отличие от Android’а, где она доступна повсеместно, их кнопки «отменить» и «назад» внедряются на усмотрение разработчика. Далеко не все, включая и Apple, реализуют эти возможности.

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

«Яблочная» продукция красива и привлекательна! Именно поэтому, сталкиваясь со сложностями, ее пользователи склонны винить себя. Это хорошо для Apple, но абсолютно нечестно по отношению к клиентам.

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

Более привлекательный, но более сложный для использования

Чем может обернутся избежание правильной методологии дизайна? Более высокими затратами на обслуживание и поддержку. И в конечном итоге, «отступничеством» несчастных клиентов, которые могут в открытую восхвалять простой интерфейс Apple, но в то же время будут копить деньги на телефон другого бренда, в надежде на то, что им хватит ума распорядиться всеми его возможностями.

В данном случае, истории о бабушках и дедушках, которые не могли освоить компьютер, но теперь с легкостью пользуются такими технологическими девайсами, как планшеты, будут неуместны. Просто подумайте, в какой степени они освоили новые технологии? Да, жестовые устройства, планшеты и телефоны отличаются более низким порогом входа для изначального использования, но овладеть их продвинутыми функциями (к примеру, отправкой трех фотографий в одном email’e, форматированием определенного текста или комбинированием результатов нескольких разных операций) гораздо сложнее. Выполнять эти и многие другие действия на традиционных компьютерах можно намного проще и эффективнее.

Новое поколение программного обеспечения сделало гигантский скачок в сторону привлекательности и вычислительной мощности, и в то же время стало более сложным для использования.

Эта проблема не ограничивается компанией Apple. Google Maps также развиваются по такому же принципу и становятся все более запутанными с каждой итерацией. Тоже самое касается и Android’а. Операционная система Windows 8 от Microsoft отличается довольно грамотным дизайном для устройств, работающих на основе жестов, что решает множество описанных выше проблем, но она не может интегрировать другой стиль работы, необходимый для настольных компьютеров, которые предназначены для продуктивной работы.

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

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

Что пошло не так?

Один из партнеров Nielsen Norman Group, Брюс Тогназини (Bruce Tognazzini), работал со Стивом Джобсом (Steve Jobs) на заре Apple. Эксперт в области юзабилити (Donald Norman) присоединился к компании вскоре после того, как Джобс ушел, а затем покинул ее после возвращения Стива в 1996 году. Они не стали свидетелями перехода от простых для использования и понятных продуктов (когда Apple действительно могли похвастаться тем, что в инструкции не было необходимости) к нынешнем устройствам, которые не сопровождаются руководствами, но все же часто в них нуждаются.

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

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

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

В качестве альтернативы, один контроллер может иметь несколько скрытых функций, благодаря чему кнопка (или сенсорный экран) способна выполнять разные операции при одинарном, двойном или тройном нажатии, при касании одним, двумя или тремя пальцами. Или, возможно, при использовании заданного количества пальцев, заданное количество раз, в заданном направлении: просто откройте панель «Системные настройки» в Macintosh’e и изучите варианты выбора (и различия) в значениях касаний и жестов на мышке Apple или трекпаде.

Простой внешний вид может сделать управление более сложным, более произвольным, требующим запоминания и уязвимым к различным ошибкам. На самом деле в первые дни компьютеров Lisa и Macintosh компания Apple руководствовалась лозунгом «Никаких режимов» (No Modes). Единственный способ отказаться от модов заключается в использовании специальных контроллеров, каждый из которых должен всегда выполнять одну и ту же задачу.

Принцип режимов и компромисс между видимостью простоты и реальной простотой в действии обучаются на элементарных курсах по интерактивному дизайну. Но почему Apple не хотят применять эти знания?

Все современные компьютерные компании выпускают руководства по пользовательскому интерфейсу для своих девелоперов. Apple были первыми, кто создал такую инструкцию, и она служила прекрасным описанием для принципов хорошего, понятного дизайна. Самое раннее издание Apple Human Interface Guidelines было написано в 1978 году Брюсом Тогназини. К моменту его выхода 1987 года, а оно создавалось в течение двух лет (1985-1986), все ключевые принципы современных интерфейсов были инкорпорированы. Когда Стив Джобс вернулся в компанию в 1996 году, они все еще соблюдались.

Тот полный набор концепций Apple был результатом проекта Тогназини, который изучал основные принципы интерфейса их Macintosh’а. До этого они были известны лишь узкому кругу людей, занимающихся разработкой UI. Благодаря написанию данного руководства, готовить новых сотрудников стало намного проще, а количество девелоперов для продуктов Macintosh начало существенно расти.

При создании принципов команда в значительной степени полагалась на исследование, проведенное только что сформированным сообществом человеко-компьютерного взаимодействия (ЧКВ). Основное внимание уделялось работе Дональда Нормана и его студентов в Калифорнийском университете в Сан-Диего, которая публиковалась в докладах ЧКВ конференций в начале 1980-х и в книге под названием «Ориентированный на пользователя системный дизайн» (User Centered System Design), отредактированной Норманом и Стефеном Дрейпером (Stephen Draper) в 1986 году.

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

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

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

Это действительно хорошая идея. Вы должны проводить тесты с участием людей, которые представляют вашу ожидаемую покупательскую аудиторию, а не с несколькими коллегами, как предполагает Apple.

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

Эта таблица описывает эволюцию руководств по пользовательскому интерфейсу Apple с 1995 года до 2015. Поскольку жестовые устройства используют операционную систему iOS, принципы, касающиеся ее, расположены слева от гайдлайнов 2015 года для более традиционной OS X.

Как видите, воспринимаемая стабильность и безрежимность исчезли где-то после 2008 года. Снисходительность (forgiveness) и ментальные модели потерялись при переходе на iOS, вместе с оценкой явных и ожидаемых действий. See-and-Point («Смотри-и-Указывай») убрали из руководств по iOS в конце 2010 года, с появлением iOS 4. Еще в 1995 году эстетическая целостность (aesthetic integrity) была одним из наименее важных факторов, но в 2015 она имеет решающее значение. Наряду с этим, метафоры и пользовательское управление утратили несколько позиций и скатились вниз.

Недостающие принципы

Наиболее важными принципами, которые полностью или частично проигнорированы в iOS, являются ясность, фидбек, восстановление, согласованность и поощрение роста:

Ясность

Ясность, или возможность взглянуть на систему и мгновенно обнаружить все предложенные действия, всегда была ключевым элементом успеха дизайна Apple. На ранних этапах этот принцип был назван «see and point», так как все доступные операции были представлены в виде кнопок, иконок или пунктов меню, заметных для пользователя: вы видите действие, которое хотите совершить, наводите курсор на соответствующий объект и кликаете по нему один раз.

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

Фидбек

Фидбек и его «друг» предуправление (feedforward) позволяют человеку узнать, что произошло после выполненного действия или понять, что произойдет, если действие будет выбрано.

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

Восстановление

Ошибки случаются. Принцип восстановления гласит, что отменить операцию должно быть также легко, как и выполнить ее. Именуемый снисходительностью, он также исчез из нынешних руководств и размещенной выше таблицы. Восстановление было реализовано при помощи кнопки «отменить», которая была придумана в 1974 году в Xerox Corporation"s Palo Alto Research Center (PARC), вероятно, Уорреном Тейтельманом (Warren Teitelman). Как известно, компьютеры Lisa и Macintosh позаимствовали свои базовые структуры в ранних разработках PARC (Apple купили права у Xerox).

Команду отмены можно аннулировать с помощью кнопки «Повторить». Отмена и повтор помогают людям не только исправлять собственные просчеты, но и экспериментировать с новыми вещами более свободно.

Отмена позволяла пользователям восстанавливать контент, а кнопка «назад» представляла собой вспомогательную команду, за счет которой они могли вернуться к предыдущей локации навигационной системы. Оригинальные графические интерфейсы избавили людей от потребности в резервном копировании, исключив навигацию. Вместо этого до пользователей доносились все документы и инструменты. Браузеры и iOS являются пережитком ранних навигационных интерфейсов, где люди блуждали по лабиринту переходов, ведущих к модальным экранам.

Браузеры, поддерживающие навигационную систему Интернета, предоставляют кнопку «назад», чтобы пользователи могли возвращаться к пройденным этапам своего путешествия. В iOS такой обобщенный инструмент не предусмотрен, поэтому если вы, к примеру, случайно кликните по ссылке внутри приложения, она направит вас в Safari или на Youtube, или в любое другое место, не обеспечив вам никаких путей отхода. Кнопки «назад» и «вперед» должны быть стандартными в iOS, чтобы интерфейс прощал людям случайные переходы, а не наказывал их за это.

Согласованность

Большинство современных пользователей имеют несколько девайсов, но операции этих различных гаджетов часто пересекаются. Даже в пределах одного устройства Apple умудрились нарушить согласованность: поверните iPhone, и макет клавиатуры изменится, поверните iPad, и иконки на главном экране перестроятся непредсказуемым образом.

Согласованность все еще числится в руководствах, но этот принцип практически не соблюдается. Magic Mouse работает не так, как трекпад, а его управление в свою очередь отличается от жестов, применяемых в iPhone или планшете. Почему? Такие противоречия обычно прослеживаются, когда дизайнеры работают в изоляции, не обмениваясь идеями со своими коллегами.

Поощрение роста

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

Значительная часть маркетинговых компаний Apple осуществляется через сайт apple.com.
В настоящий момент по рейтингу Alexa этот сайт находится на 38 месте по популярности, рядом с такими гигантами, как BBC и Google.

Сайт Apple заработал себе репутацию «чистого и привлекательного». Благодаря этой репутации другие сайты стали равняться на apple.com. Стиль Apple одинаков для всей продукции компании, начиная от упаковки для iPad и заканчивая виджетами для боковой панели.

Путешествие во времени
Давайте посмотрим как apple.com выглядел раньше.

Лучше меньше да лучше
Самой большой особенностью дизайна сайта Apple является его минимализм. Дизайнеры сохраняют его с помощью больших площадей белого пространства, чтоб сосредоточить внимание на содержимом.

Главная страница обычно имеет большую фотографию актуального продукта, слоган и несколько ссылок на другие статьи. Например, сейчас на сайте большая фотография iPad 2.

Такой дизайн не перегружает Вас информацией. Предполагается, что Вы сами выберете, то, что Вам будет интересно, в отличии от сайта компании Microsoft.

Организация информации
Есть некоторые разделы сайта, где просто необходимо предоставить много информации. Ее разделение по страницам было бы неудобно для пользователей. Но и здесь все кажется чисто и просто благодаря правильной сетке.

Сейчас на странице iPod’а в верхней части большие сменяющиеся фотографии главного продукта. Ниже оно разделяется на 3 дополнительных девайса, которые, в свою очередь, разделяются еще на 6 частей, создавая строгую иерархию.

Такой эффект пирамиды можно наблюдать на всем сайте Apple.

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

Анимация и интерактивность с помощью новых стандартов 
Как Вы знаете, Apple является борцом за новые стандарты, такие как HTML5. Их сайт подтверждает это, демонстрируя несколько интерактивных разработок без использования Flash.
«Мы также знаем, что причиной краха Mac’а №1 является Flash»

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

Примеры сайтов, вдохновленных Apple.

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

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

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

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

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

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

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

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

Лучшие статьи по теме