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

Специально для тех, кто делает первые шаги в настройке своего телефона/планшета, существует отличный сайт Mycolorscreen.com (странно, что о нем не упоминали на хабре), позволяющий посмотреть на примеры кастомизации других пользователей. Причем сайт изобилует не просто примерами, но и детальными рецептами того, как приготовить такой стол самому.



Под катом еще несколько примеров.

Бывший сотрудник компании Apple Джо Морено (Joe Moreno), проработавший там с 1998 по 2007 годы, рассказал занимательную историю, как долго дизайнеры решали проблему, какой стороной разместить яблоко на крышке ноутбука.


^{Кадр из старого фильма}

В последнее время на хабре активно обсуждают надобность прототипов, попробую внести свою ложку дегтя в этот вопрос.

Одни кричат – прототип зло, другие, вооружившись – молчи. Давайте поступим умнее, отойдем от споров и разберемся зачем вообще нужны эти самые прототипы?

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

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

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

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



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

Сравните полученный результат с оригинальным автопортретом:

С точки зрения пропускной способности канала, изображения — обжоры. В среднем, они занимают наибольший (62%) средний трафик сайтов и чаще всего их передача является узким местом. Загружаясь, изображения рвут страницу, расталкивая другие элементы вокруг и вызывая неуклюжую перерисовку (прим. перев.: от этого, конечно, можно избавиться определенной версткой, но тогда нужно хардкодить или ограничивать размеры картинок). Загрузка изображения на странице воспринимается или как «тик, тик, тик, тик, тик, готово», или же сначала вообще ничего нет, а потом внезапно «бум!» и оно появляется ниоткуда. Все понимают, что подразумевается под «тик, тик, готово» и «бум» и всех нас это немного раздражает, потому что мы чувствуем, сколько времени наших прелестных и коротких жизней потеряно в ожидании загрузки картинок.

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

^{Каждый квадрат размером 40х40 метров состоит из 100 элементов, 10 по горизонтали, 10 по вертикали. Общая длина — около 8 км}

Благодаря спутниковой фотосъёмке Земли у учёных появился новый инструмент для научных изысканий. В последние годы постоянно пополняется список научных открытий, сделанных с помощью Google Earth. Один из ведущих специалистов по так называемой «домашней археологии» — Амелия Спаравинья (Amelia Carolina Sparavigna) из Туринского политехнического института. С помощью open source программ она осуществляет автоматическую обработку тысяч изображений из отдалённых уголков Земли, куда ещё никогда не доходили научные экспедиции. Обычно это пустыни, труднодоступные горные районы или вообще территории с запрещённым доступом.

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

Основные рекомендации и ввод данных

• Стремитесь к краткости.
• Убедитесь, что в форме используется один язык (обороты, термины).
• Если на странице находится только форма и ничего кроме нее, то при загрузке страницы стоит ставить фокус на первое поле формы, это позволит сэкономить немного времени (страница поиска, входа, регистрации).
• Поддерживайте ясный путь заполнения формы.
• Избегайте вторичных действий, если это возможно.
• В противном случае четко разделяйте основное и дополнительные действия.
• Выравнивайте основное действие так же как и поля формы, это упрощает восприятие формы.
• Цветная подложка у главной кнопки сделает её более видимой.
• Отключайте кнопку «Отправить» после того как пользователь на нее нажал, это позволит избежать двойной отправки данных.
• Еще лучше — показывайте индикатор отправки.

Самая большая коллекция флагов: 2400 пиктограмм размерами 16×16, 24×24, 32×32, 48×48 и 64×64. Есть государственные флаги всех стран, плюс бонусы: Англия, Абхазия, Нагорный Карабах, Красный крест, Южная Осетия, Сомалиленд, флаг Марса, НАТО и проч.

Все иконки в двух вариантах: стандартный и глянцевый.

Скачать:
www.gosquared.com/download/pixels/flags.zip

Лицензия MIT (GPL-совместимая), разрешает использование иконок в коммерческих проектах.

В подборке сервисы, плагины, темы и другие полезности, облегчающие работу с Twitter Bootstrap.

Стилизация

BootSwatchr — быстрая стилизация Twitter Bootstrap.

jQuery-плагин для создания слайдера с очень красивым 3D-эффектом.



Посмотреть демонстрацию плагина, скачать исходники.

Наткнулся на очень простой в реализации, но интересный rollover-эффект для кнопок на CSS. Автор — некий японец ksk1015.



Демонстрация эффекта и процесс написания.

Обычные тени легко реализовать с помощью box-shadow или text-shadow. Но как быть, если необходимо сделать внутренние тени? В этой статье описывается, как сделать такие тени с помощью всего нескольких строчек кода.

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

Дизайн Windows 8 становится все популярнее в веб-дизайне, и вот всеми любимый фреймворк Twitter Bootstrap обзавелся Metro-дизайном — Bootmetro.

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

Привет уважаемое хабрасообщество, этот пост служит продолжением еще недавно активно обсуждаемой темы о социальных иконках [1] [2]. Мысль, которая пришла ко мне в голову после прочтения этих статей, привела к появлению нового вектора развития этой темы. Кстати о векторе, например бывает так, что дизайн разрабатываемого сайта или приложения имеет свою специфику и интегрировать стандартные иконки социальных сервисов без адаптации не представляется возможным. В таком случае мы берем в руки гугл и принимаемся за поиск нужных логотипов, для того чтобы создать подходящий набор иконок. Ах да я немного отвлекся, продолжим о векторе, чтобы не проделывать такие скучные действия, я собрал воедино несколько популярных иконок в векторе и теперь каждый желающий может сэкономить немного времени воспользовавшись им.

В предыдущей части мы рассмотрели три первых шага на пути проектирования приложения:

1. Определение целевой аудитории
2. Формулировка цели приложения
3. Отбор ключевых сценариев

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

Не могу не поделится с хабра сообществом этой потрясающей короткометражкой с шикарным переводом от Russia Today.

SIGHT / ВЗГЛЯД (РУССКИЙ ПЕРЕВОД)

Футуристический короткометражный фильм, созданный Эраном Май-Разом и Даниэлем Лазо. Выпускная работа, Академия искусств «Бецалель».

Контакты:

Daniel Lazo: duniol2 гаф gmail пиксель com
Eran May-raz: eranmayraz гаф gmail пиксель com
Hanan Revivo: hanan5712 гаф gmail пиксель com
Boaz Bachrach: hearfeel гаф gmail пиксель com

Краткий синопсис

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



Под катом примерно 1.1 Мб трафика.