Русский / English

На работу в Google приняли 200 козлов

четверг, 7 мая 2009 23:36 by tunnel

Как сообщает Infoxна этот раз Google обратила внимание на бензиновые газонокосилки, постоянно работающие на территории штаб–квартиры компании в Mountain View. Разработчики признались, что готовы отказаться от шумных устройств, загрязняющих выхлопами атмосферу, в пользу более экологичного метода стрижки травы.

Заботу о травяном покрове территории у офисов Google возьмут на себя домашние животные, а точнее — козлы. Компания California Grazing выделит 200 животных для сельскохозяйственных нужд известной IT–корпорации. Целую неделю бородатые работники будут гулять на лужайках, поедая траву, удобряя землю и просто развлекая своим видом сотрудников Google. За порядком в стаде будет следить специально подготовленная овчарка Jen.

 На работу в Google приняли 200 козлов

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

Известная организация по защите прав животных PETA (People for the Ethical Treatment of Animals, "Люди за этичное обращение с животными") уже успела одобрить действия Google, отмечает Infox. "Ничего плохого в использовании козлов нет, ведь они, по сути, занимаются тем, что им нравится: пасутся на свежем воздухе, щиплют траву и удобряют почву. Это один из редких случаев, когда человек использует в своих целях животных без нанесения им какого–либо вреда".

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

Текущий рейтинг: 4.6 (5 голосов)

  • Currently 4,6/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

70 прекрасных примеров инфографики

среда, 29 апреля 2009 00:09 by tunnel



































Оценок нет

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Twitter поглотит мир: число пользователей увеличилось до 19 миллионов

суббота, 25 апреля 2009 01:14 by tunnel
image
Путь к мировому доминированию продолжается быстрыми темпами. Сегодня утром comScore опубликовала свой глобальный номер за март 2009 года. Исходя из этих данных число посетителей сайта во всем мире в марте увеличилось на 95% — с 9.8 миллионов до 19.1. Для сравнения в США 9.3 миллионов посетителей.

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

Если твиттер будет развиваться такими темпами то уже к лету число пользователей может достичь 50 миллионов.

Оценок нет

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

O3D — 3D графика в браузере от Google

четверг, 23 апреля 2009 00:33 by tunnel


Google открывает доступ к O3D API. O3D — это самостоятельный (не часть Chromium проекта) opensource API, позволяющий создавать интерактивные 3D приложения, работающие в браузере. Плагин для браузера доступен для Windows, Mac и Linux пользователей.

Примеры приложений.

Оценок нет

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Наша Russia на Silverlight – RuTube сделал площадку Smooth Streaming

четверг, 23 апреля 2009 00:28 by tunnel

20 апреля на конференции ReMIX09 мыанонсировали тестовую площадку крупнейшего российского видеохостингаRuTube технологии Smooth Streaming. Данная технология позволяет динамически в реальном времени менять качество картинки в зависимости от скорости Интернет-канала и загруженности центрального процессора у пользователя.

Финальная версия Smooth Streaming вышла буквально вчера, он является бесплатным дополнением к веб-серверу IIS7, который входит в Windows Server 2008, Windows Vista и Windows 7. Клиентом является плеер на Silverlight 2

Прямо сейчас вы можете зайти по адресу http://silverlight.rutube.ru и увидеть это все в действии. На странице собран набор роликов разной направленности и разного качества.

Более детально описание Smooth Streaming и методы его развертывания у себя на локальном компьютере можно увидеть в моем онлайн-докладе.

Отдельно хочется отметить, что это является по сути вторым в мире тестированием данной технологии после канадского CTV. Также уже несколько месяцев работает специальный сайт SmoothHD, на котором можно увидеть в действии Smooth Streaming.

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

Update: просьба указывать браузеры и системы. На Win7 пробовал на IE8, FF3, Chrome. На Mac тоже должно работать

Update2: попробуйте перетаскивать ползунок в разные участки роликов

Оценок нет

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

oogle стал отображать профили пользователей в поисковой выдаче

четверг, 23 апреля 2009 00:25 by tunnel
Google запускает проект Google Me на территории США. Суть его в том, что при запросе, состящий из имени и фамилии, под результатами поисковой выдачи будут показываться личные карточки пользователей со ссылкой на полный профиль.

image

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

image

Для примера — профиль Тима О'Релли.

Оценок нет

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Почему Ларри Эллисон так стремился купить MySQL?

четверг, 23 апреля 2009 00:24 by tunnel
Когда Ларри Эллисон, директор Oracle, объявил в понедельник о покупке компании Sun, он ни словом не обмолвился о MySQL, своём конкуренте на рынке малых СУБД. Именно этот сегмент остаётся непокрытым в продуктовой линейке Oracle. Все хорошо помнят, как страстно Ларри Эллисон жаждал завладеть этой шведской компанией три года назад. В течение всего 2006 года Ларри Эллисон неоднократно предлагал выкупить MySQL, но трое друзей-шведов, основателей MySQL, неизменно отвергали его предложение от «империи зла», взлёт которой произошёл благодаря сотрудничеству с ЦРУ, после чего MySQL в итоге продалась Sun.

Теперь же мечта Эллисона сбылась, и он даже не говорит, что купил Sun только ради MySQL.

В свете всех известных фактов очень странно смотрятся размышления некоторых аналитиков о том, что MySQL не является конкурентом Oracle. Это слишком узкий взгляд на вещи, потому что не принимаются в расчёт долговременные планы Эллисона, а также перспективы развития самой MySQL (например, в версии 5.4 этой СУБД уже появилась поддержка 16-процессорных серверов x86, а по некоторым тестам производительность выросла на 40000%).

Кстати, по странной случайности выход MySQL 5.4 был запланирован на 21 апреля, но за день до этого произошла сделка с Oracle.

Оценок нет

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Что такое качество в веб-дизайне: примеры и рекомендации. Часть 2

воскресенье, 19 апреля 2009 00:29 by tunnel

03. Хорошо продуманная типографика


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

Примеры хорошо продуманной типографики


Большие и красивые заголовки на сайте The Netsetter

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

quality_10

Интерлиньяж и разрядка в тексте

Сайт Viget является очень красивым примером того, как важна типографика в веб-дизайне. На примере, приведенном ниже (взято из их портфолио), видно, как использование более крупного шрифта помогает создать свободное пространство. Даже при тонком, хрупком шрифте, который здесь используется, вы можете видеть, сколько пространства создается в этой области страницы. В самом деле, эта шрифтовая гарнитура очень изящна, и это отличный выбор. Еще одна вещь, которая бросается здесь в глаза — это внимание к высоте строки (интерлиньяжу). Расстояние между строками было увеличено по сравнению со значением по умолчанию, чтобы создать больше свободного пространства и сделать текст более удобочитаемым. Эту хитрость вы можете использовать в своей следующей работе.

quality_11

Web Design Ledger — шрифты под настроение

Найти подходящий шрифт можно методом проб и ошибок, а можно выбрать шрифт на основании разных настроений, которые шрифты помогают привнести в дизайн страницы. Например, ресурс Web Design Ledger, обладая довольно невзрачным ретро-дизайном, при этом создает ощущение открытости и современности, так что выбор шрифта, вызывающего сходные эмоции, может стать залогом успеха сайта. Дизайнер Генри Джонс (Henry Jones) выбрал для заголовков популярный переходный шрифт с засечками Georgia, который очень хорошо соответствует «потертому» виду сайта. Современное звучание сайту придает еще один шрифт, в корне отличный от шрифта заголовков — основное содержание страницы напечатано шрифтом Helvetica, гарнитурой без засечек с очень плавными и открытыми очертаниями. Выбор гарнитуры в этом примере был очень разумным и, по сути, помог задать настроение всего сайта. quality_12

Краткий список требований по типографике в веб-дизайне

Определить хорошую типографику в веб-дизайне будет проще, если посмотреть на некоторые примеры (см. выше). Но чем же эти примеры так хороши и на что вам следует ориентироваться в типографике для своего следующего веб-сайта??
  • Текст читается? 
    Не бойтесь придавать заголовкам крупное и жирное начертание.
  • А вы подумали о разрядке?
    Хорошая разрядка сильно улучшает читаемость текста.
  • Соответствуют ли ваши шрифты настроению? 
    Убедитесь, что шрифт дополняет дизайнерскую идею.

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

04. Организация элементов


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

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

Дизайн коммерческого сайта: 37 signals

Глядя на популярный сайт 37 signals, легко заметить, что их продукция продается так хорошо неспроста. Создатели сайта сделали все возможное, чтобы вы увидели, что они продают, и помочь вам принять решение о покупке. Тут есть все, что требуется от сайта, предназначенного для продаж.

На картинке примера видно, что сайт обладает 4 ключевыми характеристиками, которые делают его идеальным для совершения покупок. Внимание привлекает первая деталь: они сделали очень темный блок с кратким содержанием и крупными заголовками, набранными жирным кеглем. Затем, они возбуждаютинтерес покупателя, перечисляя некоторые преимущества каждого продукта с симпатичной иллюстрацией. Следующая деталь — это желание купить, и оно подкрепляется цитатами и признаниями, даже приводится несколько видеороликов из серии «Нашим покупателям есть что сказать». И последняя характеристика — это динамичность. На сайте 37Signals имеются разные динамические компоненты, и приятно, пролистывая довольно длинную страницу, увидеть, что внизу есть несколько динамических элементов.

quality_13

Дизайн ради содержимого (блог): Well Medicated

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

Содержимое должно быть главной или одной из главных вещей, которые есть в блоге. В данном примере симпатичный розовый заголовок в жирном начертании привлекает внимание прямо к контенту. Тут есть хорошего размера картинка для предварительного просмотра и добрых 2/3 абзаца текста, за которым следует ссылка «Читать дальше». Также имеется стандартная информация о том, когда и кем была сделана запись. По мне, это один из самых лучших примеров того, что я назвал бы качественным «дизайном ради содержимого». Внимание может быть привлечено ко всему, что вызывает интерес, здесь в фокусе находятся приятные крупные иконки оформления подписки, которые помогают пользователям следить за записями в вашем блоге. Кроме того, это несомненно увеличит количество подписчиков, так что этот прием работает на двух уровнях. Очень просто призвать пользователей просматривать другие разделы блога — для этого можно использовать все, от вкладки «недавние записи» или вывода популярных тем в боковое меню до организации выпадающих меню или простых и эффективных списков. Это легко осуществимо, но очень эффективно, особенно в блоге. Блоги обычно касаются личных вопросов, поэтому дать посетителям возможность связаться с вами различными способами будет очень полезно и поощрит людей узнать вас поближе и посетить ваш блог снова. 

quality_14

Советы по организации вашего контента


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

Текущий рейтинг: 4.7 (3 голосов)

  • Currently 4,666667/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Платформа Amazon S3: подарок для стартапа

суббота, 18 апреля 2009 18:10 by tunnel
Дон Макаскилл (Don MacAskill), основатель и директор «вебдванольного» фотосервиса SmugMug, готовит презентацию об Amazon Simple Storage Service. Этот человек, пожалуй, как никто другой знает все преимущества и недостатки платформы распределенного хостинга S3, потому что он там один из самых крупных клиентов. Сама компания Amazon постоянно приводит SmugMug как пример того рода интернет-стартапов, для которых она и создала инфраструктурную платформу.

Каждый пользователь фотосервиса SmugMug получает неограниченное дисковое пространство для хранения фотографий, так что компания оплачивает услуги S3 на круглую сумму. Дон Макаскилл опубликовал в своем блоге ряд текстов, где подробно рассказывает о функционале Amazon S3 и о пользе для бизнеса.

Amazon S3: священный Грааль

Amazon + два парня + $0 = следующий YouTube

Amazon S3: покажи мне деньги

Amazon S3: простои, торможения и проблемы

Онлайновый фотосервис SmugMug перешел на хостинг S3 в июле 2006 г. К этому моменту стартап уже, кстати, начал приносить прибыль, но все равно искал способы сокращения издержек. Дисковое хранилище разрослось до 64 млн фотографий, причем объемы пользовательских данных стремительно росли: приходилось тратить по $40К в месяц на покупку новых дисковых массивов Apple Xserve RAID (они сейчас используются повсеместно, и eBay, и Oracle используют Xserve RAID) и серверов (закупались самые дешевые). Использование S3 представлялось идеальным вариантом для экономии.

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


К моменту перехода на S3 у SmugMug уже была собственная недорогая инфраструктура хранения данных на стандартных серверах, но платформа S3 все равно оказалась дешевле. Вместо того, чтобы платить за покупку и аренду серверов (плюс зарплата техническому персоналу, оплата услуг интернет-провайдера и прочие расходы), они начали платить $0,15/гигабайт в месяц. Экономия настолько велика, что журнал BusinessWeek в ноябре 2006 г. написал большую статью про S3 и даже вынес на обложку этот «подарок для интернет-стратапов» (на фото справа).

Подключение к платформе S3 оказалось на удивление простым. Дон Макаскилл начал писать интерфейс в понедельник — а уже в пятницу все замечательно работало. Он также подключил программные интерфейсы SmugMug APIк программным интерфейсам Amazon. Подгрузка данных с серверов Amazon была почти такой же быстрой, как и подгрузка с собственных серверов, так что обычный посетитель сайта не мог заметить никакой разницы.

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

 

Основатель стартапа SmugMug, правда, с горечью признается, что теперь у его бизнеса могут появиться новые конкуренты. Например, для стартапа, который предлагает пользователям неограниченный хостинг данных (фотографии, видео и т.д.) теперь не нужны большие инвестиции, не нужно арендовать дата-центры и покупать серверы (даже Sun Fire X4500, лучший сервер для Веб 2.0, не понадобится). По предварительным расчетам, благодаря переходу на платформу S3 компания SmugMug экономит около $50К в месяц.

Расчеты за семь месяцев с июля по ноябрь 2006 г. показали, что только на покупку нового оборудования компания бы потратила $418К, и еще $5К на хостинг. Вместо этого компания воспользовалась услугами S3, заплатив за семь месяцев всего $84К, то есть чистая экономия составила $339К. Это не считая налогов, которые компания бы заплатила, если бы сама покупала серверы. Дополнительная прибыль идет от продажи старых серверов и жестких дисков, которые теперь стали не нужны (объем данных на своих серверах сократился в 20 раз).

Впрочем, есть и проблемы. Инфраструктура S3 периодически дает сбои. С апреля 2006 г. по февраль 2007 г. такое происходило четыре раза. Дважды отключался коммутатор, так что система была недоступна 15–30 минут (при этом «падал» и главный сайт Amazon.com), один раз серверы S3 не справлялись с резко возросшей посещаемостью сайта SmugMug, а еще один раз проблемы возникли из-за неправильной настройки ПО на серверах SmugMug.

Оценок нет

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Что такое качество в веб-дизайне: примеры и рекомендации. Часть 1

суббота, 18 апреля 2009 00:55 by tunnel
Несколько выдающихся примеров и рекомендаций по созданию качественного дизайна веб-страницы или блога

quality

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

Чтобы объяснить, как я понимаю качество в дизайне веб-сайтов, я собрал несколько рекомендаций и примеров.

01. Расстояние между объектами на странице


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

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

Примеры удачного расположения элементов


Отличное расположение элементов на сайте Good.is

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

quality_1

Очень удачные расстояния между элементами на сайте Digital Mash

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

quality_2

Масса свободного места на сайте Creatica Daily

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

quality_5

Много пространства на сайте Postbox

Если взглянуть на сайт Postbox повнимательнее, можно заметить, какие отступы тут сделаны по краям — на самом деле они по 60 пикселей. Казалось бы, это многовато, но в действии выглядит просто отлично.

quality_3

Неправильные расстояния между объектами


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

Пример недостаточных расстояний между объектами

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

Пример плохого расстояния между элементами

Советы по правильному расположению объектов


Решение о том, сколько свободного места использовать на странице, приходится принимать заново в каждом конкретном случае. Поэтому нужно тренировать глазомер, чтобы уметь определять корректное расстояние, необходимое вокруг каждого элемента, и использовать это знание в дизайне. Это нелегко, но приходит с практикой.
  • Использование в дизайне сетки с направляющими линиями
    Использование сетки определенно помогает понять всю важность расстояний между объектами.
  • Пытаться снова и снова
    Методом проб и ошибок вы сможете определить, какими должны быть отступы.
  • Свободное пространство — не значит потраченное впустую 
    Если у вас на странице есть пустое пространство, вовсе необязательно, что его нужно заполнять.
  • Лучше меньше, да лучше
    Чем пытаться вместить на страницу побольше, сделайте на ней поменьше содержания, добавьте свободного места и размещайте только жизненно важную информацию.


02. Совершенство до последнего пикселя


Когда дизайн «довели до ума», это видно сразу. Иногда все зависит от мельчайших деталей, которых многие могут даже не заметить. «Совершенством до последнего пикселя» я называю метод, когда пристальное внимание уделяется линиям, краям и границам. Можно вставить просто линию, а можно добавить небольшие детали, будь то легкие градиенты, простая тень шириной в 1 пиксель или блик — и ваша работа действительно будет выделяться. Некоторые дизайнеры, известные таким подходом: Коллис Таед (Collis Ta'eed), Дэвид Леггетт (David Leggett) и Вольфганг Бартелме (Wolfgang Bartelme).

Примеры «совершенства до пикселя»


Внимание к деталям на сайте Envato

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

quality_6

Внимание к деталям на сайте Tutorial9.net

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

quality_7

Совершенные до пикселя кнопки и разделители на сайте RedBrick Health

Красивая панель навигации, созданная Райаном Шерфом (Ryan Scherf) — это еще один пример использования пиксельного совершенства для создания качественного веб-дизайна. У розовой кнопки сделан 1-пиксельный блик, а разделительные линии между ссылками проработаны так же качественно и детально: как вы можете видеть, вместо того, чтобы использовать просто серые линии-разделители, Райан добавил вниз 1-пиксельные блики, чтобы все не выглядело плоским и двумерным.

quality_8

Пиксельное совершенство не чуждо и гранжу: сайт AvalonStar

А вот прекрасный AvalonStar: безбашенный блог, оформленный в стиле гранж. Но даже в неопрятном гранжевом дизайне блики шириной в 1 пиксель выглядят эффектно. Если вы посмотрите на Пример 1, вы увидите, как градиентная тень используется на коричневой верхней панели, а у расположенного ниже зеленого блока, имеется 1-пиксельный блик сверху. Из-за сочетания темного тона вверху и блика шириной в 1 пиксель блоки выглядят слегка блестящими.

quality_9

Советы по совершенству деталей в дизайне


Здесь главное — практика. Как вы могли видеть в примерах, такая простая вещь, как высветленная линия шириной 1 пиксель может добавить стиля и глубины вашим работам, вам не нужно прибегать к умопомрачительным объемным деталям и градиентам, чтобы создать впечатление чего-то действительно объемного.
  • Внимание к мелким деталям 
    Мелкие детали, дополняющие содержание страницы — ключ к успеху.
  • Мыслите в пикселях 
    Границы, градиенты, линии, тени и т.п. не должны быть огромными, чтобы производить должный эффект.
  • До и После 
    Сравнивайте результаты своей работы: как выглядит страница до и после применения различных эффектов. Тогда вы сможете увидеть, насколько они действенны.

Оценок нет

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5