Частенько мне приходится слышать вопросы на тему рисования иконок. Методик их рисования большое множество. Кто-то рисует ручкой на стикере, а потом сканит и шопит. Кто-то пользуется Пэйнтером и планшетом, кто-то обходится исключительно вектором, а кто-то исключительно Фотошопом… Я привык рисовать иконки мышкой в Фотошопе, а планшет при этом выполняет чисто декоративную функцию на моем рабочем столе. Итак, веселый зоопарк.

Пошаговая инструкция:

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

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

Я предлагаю авторам, желающим повысить качество статьи, делать своеобразную «выжимку» — обобщение полезных по их мнению замечаний и дополнений, которые можно поместить внизу статьи. Это не потребует никаких изменений в дизайне сайта. Единственное, что неудобно – не получится отслеживать такие обновленные статьи.

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

Как пример, предлагаю вам свою пробу на этом топике — внизу статьи (к сожалению, не могу поставить ссылку на фрагмент — хабраредактор, похоже, ее обрезает).

Мнения по поводу идеи и оформления приветствуются. Спасибо за внимание.

Здравствуйте, хочу написать цикл статей про юзабилити веб-интерфейсов, и начну, как не странно, с корзины покупок.

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

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

Итак, начнем!

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

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

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

Как-то всегда обходил эту проблему стороной, а теперь надоело. Суть в том что при большом размере кнопки IE растягивает свой «батон» превращая его в какое-то страшнейшее убожество:



Особенно обратите внимание на прелестные артефакты прозрачности по углам.

Какие есть выходы из этой ситуации?

В W3Cast #3 Денис ( CurlyBrace) затронул тему использования styleguides, а у меня как раз уже была статья по этой теме. Поэтому я решил поделиться ей, чтобы показать наглядные примеры, демонстрирующих возможности «стилевых гидов».
«Стилевые гиды» — это свод правил и соглашений, предоставляющих разработчикам информацию о структуре кода и принятых правилах оформления. Чаще всего используется группой разработчиков, при совместном участии в проекте или же для самодисциплины при разработке кода.
Если проект большой, то он обрастает многочисленными файлами CSS с различными цветовыми схемами, типографикой и другими стилевыми установками. Чтобы избежать путаницы в структуре кода и не забыть что да как, нужно разрабатывать структурированный код, который впоследствии будет проще использовать, править и частично использовать в других проектах.

Однажды мне понадобилось сделать прозрачные боковые поля для одного дизайна. Я решил использовать прозрачность CSS.

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

Недавно я наткнулся на замечательную технику, позволяющую устранить эту проблему, ею я и хочу с вами любезно поделиться.

Перевод статьи Oliver Reichenstein «The 100% Easy-2-Read Standard».

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

Экран и журнал: 100%-размер шрифта — это не много. Фотограф: Wilson Miner.

Не заставляйте нас изменять размер шрифта

Мы не хотим изменять настройки браузера каждый раз когда посещаем новый сайт!

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

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

К делу

Внешне задумка выглядит так:

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

В предвестии новой 10-й версии браузера Opera, в одноимённом сообществе опять встал вопрос «курицы или яйца» в отношении основы современного интерфейса браузера — панели адресной строки и панели ввода адреса.
Итак, основные действующие лица: панель адресной строки, панель ввода адреса, и, собственно, сама страница. Что к чему крепится логически и технологически, что удобнее, что привычнее в использовании?
Мне, как пользователю браузера Opera с многолетним стажем, естественно, кажется привычней адресная строка с кнопками навигации внутри вкладки. Так же мне это кажется логичным со всех сторон, и, к тому же, я встречал эту модель не только в Опере, но и в таких программах как Adobe Dreamweaver:

Заглянем в прошлое

Не так давно в статьях раздела JavaScript были представлены широкой публике трекбары:



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

Не так давно на Хабре был опубликован сей труд: «Еще раз о трекбаре», в котором описывается простой скрипт для создания таких вот ползунков:


Благодаря откликам пользователей возможности первой версии скрипта были существенно расширены. Она выросла до v3.0, с одновременным обновлением статьи, описывающей новый функционал. Однако, некоторые изменения откладывались «на потом», т.к. требовали более серьезного вмешательства в код. И вот долгожданное «потом» настало и вышла четвертая версия JS-TrackBar.

Много уже написано на тему трекбаров, но в комментариях к прошлым хабратопикам кто-то интересовался трекбаром с двумя «ползунками», чтобы можно было смещать сразу весь диапазон (а не каждые ползунки по отдельности), ну и отдельно каждый ползунок, естественно (да еще и написанный изначально для работы с датами). Я свято клялся отыскать такую знатную вещь, ибо видел ее на днях, и вот только сейчас наткнулся на нее опять.
Позвольте вас познакомить — The sliding date-picker.


Посмотреть пример работы
Посетить страницу с описанием и скачать

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

Не заставляйте нас изменять размер шрифта

Мы не хотим постоянно менять настройки размера шрифта в браузере при посещении каждого нового сайта.

Не доказывайте нам, что переполненные страницы лучше выглядят

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

Не втирайте нам, что прокрутка страниц — это плохо

Потому что в таком случае все сайты плохие. В прокручивании веб-страницы нет ровным счётом ничего страшного. Ни-че-го. Так же, как нет ничего страшного в перелистывании страниц книги.

Не говорите нам, что текст не важен

95 % того, что обычно называют веб-дизайном, — это типографика.

Не требуйте, чтобы мы начали носить очки

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

Как можно понять из недвусмысленного заголовка выше — речь пойдет о том, чем мы пользуемся в глобальной сети всё больше и больше — комментированием уникальных (и не очень) материалов на разнообразных социальных (и опять же не очень) сервисах, сайтах, блогах, социальных сетях (социальные социальные сети — как звучит! Наверное есть где-то антисоциальные).

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