Тривиальные задачи по вёрстке
4 min
Максим Литвиненко @maxlitvinenko
Дизайнер • Предприниматель
Корзина в современном интернет-магазине
3 min
Здравствуйте, хочу написать цикл статей про юзабилити веб-интерфейсов, и начну, как не странно, с корзины покупок.В этой статье я постараюсь рассмотреть как выглядит большинство корзин сейчас, разобрать их преимущества и недостатки, а так же попробую сотворить нечто более современное и удобное.
Предупреждаю сразу — пишу я впервые, так что многое может быть изложено далеко не лучшим образом.
Итак, начнем!
Незнакомая знакомая платежная система.
3 min
Думаю, что каждый из вас знаком с платежными терминалами QIWI (КИВИ), которых по всей России установлено уже более 70 000.
Однако думаю, что далеко не каждый знает, что скрывается за средней кнопкой указанных выше платежных терминалов:
Однако думаю, что далеко не каждый знает, что скрывается за средней кнопкой указанных выше платежных терминалов:
Модальность за рамками диалоговых окон
3 min
Translation
Статью написал jagoterr. Если эта статья наберет +50 то автор получит инвайт на Хабрахабр.
Аза не так давно опубликовал заметку о модальных оверлеях (Здесь и далее по тексту используется именно такой перевод слова overlay, наименее “русский”, но зато не искажающий сути данного понятия). О тех самых диалоговых окошках, которые внезапно выскакивают и блокируют то, что находится позади них. Вы полностью свободны в своих действиях в рамках модального окна, но вы не можете использовать ни один “перекрытый” им элемент до тех пор, пока это окно не исчезнет.
Обычно, когда мы говорим о модальных окнах, мы говорим именно о диалогах, таких как на приведённом ниже фрагменте приложения Google Documents. Критика Аза относится как раз к модальным окнам такого рода. После того, как вы открыли диалог поиска/замены, вы не можете кликнуть мышью нигде, кроме как внутри этого диалога. Это означает, что вы не можете пролистать документ, находящийся под диалогом, или скопировать слово из документа и вставить его в строку поиска, не закрывая диалог.
Аза не так давно опубликовал заметку о модальных оверлеях (Здесь и далее по тексту используется именно такой перевод слова overlay, наименее “русский”, но зато не искажающий сути данного понятия). О тех самых диалоговых окошках, которые внезапно выскакивают и блокируют то, что находится позади них. Вы полностью свободны в своих действиях в рамках модального окна, но вы не можете использовать ни один “перекрытый” им элемент до тех пор, пока это окно не исчезнет.
Обычно, когда мы говорим о модальных окнах, мы говорим именно о диалогах, таких как на приведённом ниже фрагменте приложения Google Documents. Критика Аза относится как раз к модальным окнам такого рода. После того, как вы открыли диалог поиска/замены, вы не можете кликнуть мышью нигде, кроме как внутри этого диалога. Это означает, что вы не можете пролистать документ, находящийся под диалогом, или скопировать слово из документа и вставить его в строку поиска, не закрывая диалог.
Fugue обновился! 1.2.5 от 19.01.09
1 min
Fugue Icons 1.2.5
Да-да, теперь это не "1000 замечательных иконок для веб страниц" а целых 1,263 иконок. Многие иконки были перерисованы и много добавилось новых. Появились такие востребованные иконки как user или иконки элементов интерфейса: «button, checkbox, slider» и т.д. В общем обновление шикарное, хотя до сих пор нету таких иконок как cut, copy и paste. Иконки по прежнему распространяются по лицензии Creative Commons Attribution 3.0 license а для вопросов: «Зачем кнопка purchase?» читаем это.
Прямая ссылка — 4,9Мб
Набор разработчика 7,6Мб
Пред просмотр — 1980px × 2263px 1,4Мб
Сайт
P.S. Предыдущий пост был написан давно и я решил написать новый чтобы привлечь внимание этому сету, а не использовал UPD.
UPD: Фугия снова обновилась. Теперь версия 1.2.5, вот изменения:
- Обновлена <application_table>
- Обновлена <document_excel_table> и <document_table>
- Добавлена <door_open>
- Добавлена <feed_document>
- Обновлена <folder_open_table>
- Обновлена <inbox_table>
- Обновлена <mail_open_table>
- Добавлена <server*>
- Обновлена <table*> and <tables*>
- Добавлена <traffic_light*>
Следите за обновлениями топика
Наш сайт
1 min
О, боги! Наконец-то у нас появился нормальный корпоративный сайт. Теперь по адресу thematicmedia.ru вместо одинокого логотипа можно обнаружить одинокий html-документ, наполненный смыслом. Это вторая версия сайта. Первая безвозвратно утеряна. Её никто не видел. Практически никто. Мы потеряли не только готовый сайт (нарисованный нашими друзьями из Turbomilk), сверстанный и запрограммированный, но и бэкап с последней версией. Как так вышло? Лучше не спрашивайте.
Как наладить производство в Китае?
1 min
Я придумал недорогое и очень нужное (хоть и нишевое) устройство — вариацию на тему USB-клавиатуры.
У меня есть трёхмерная модель, построенная в AutoCAD, рендеры и описание того, что я хочу получить. Дело за малым — превратить модель в тысячу готовых девайсов в красивых коробках.
Если вы каким-либо образом были связаны с аутсорс-производством техники в Китае, поделитесь, пожалуйста, опытом. Меня интересуют все стадии, начиная от поиска завода (на alibaba.com их тысячи) до получения сертификатов и доставки.
Заранее спасибо. Я верю, что не обязательно быть Артемием Л., чтобы выпустить устройство своей мечты.
UPD: Целевая аудитория — не айтишники. Не ждите yet another happy hacking keyboard.
У меня есть трёхмерная модель, построенная в AutoCAD, рендеры и описание того, что я хочу получить. Дело за малым — превратить модель в тысячу готовых девайсов в красивых коробках.
Если вы каким-либо образом были связаны с аутсорс-производством техники в Китае, поделитесь, пожалуйста, опытом. Меня интересуют все стадии, начиная от поиска завода (на alibaba.com их тысячи) до получения сертификатов и доставки.
Заранее спасибо. Я верю, что не обязательно быть Артемием Л., чтобы выпустить устройство своей мечты.
UPD: Целевая аудитория — не айтишники. Не ждите yet another happy hacking keyboard.
Единая система клавиатурных сокращений для меню View в программах Photoshop, Illustrator и Indesign
1 min
Волей судьбы и здравого смысла (я так думаю) с недавних пор я помимо Фотошопа и Иллюстратора стал активно юзать Индизайн (для проектирования интерфейсов и дизайна сайтов), а еще я временами открываю Флэш и Афтер Эффектс от того же производителя, что заставило меня запоминать кучу разных клавиатурных сокращений.
Хотелось бы чтобы во всех, часто используемых мной программах, на палитры (а в идеале на одинаковые действия) были навешаны одинаковые клавиши, что уже давно сделано на системные действия. Я решил начать хотя бы с палитр, потому-что дома приходиться работать на Макбуке — «прошечке», а у него разрешение не ахти какое, часто нужно включать и отключать палитры, чтобы комфортно работать. Да и склонен я к минимализму, на экране должно быть то, что нужно в данный момент (да, я такой).
Ну что же, вот мои шорткаты на частоиспользуемые палитры:
Хотелось бы чтобы во всех, часто используемых мной программах, на палитры (а в идеале на одинаковые действия) были навешаны одинаковые клавиши, что уже давно сделано на системные действия. Я решил начать хотя бы с палитр, потому-что дома приходиться работать на Макбуке — «прошечке», а у него разрешение не ахти какое, часто нужно включать и отключать палитры, чтобы комфортно работать. Да и склонен я к минимализму, на экране должно быть то, что нужно в данный момент (да, я такой).
Ну что же, вот мои шорткаты на частоиспользуемые палитры:
Кассовый аппарат Intel знает кто вы такой и чего вы хотите
2 min
Скорее всего вопрос: «Знаете ли вы, кто я такой?» не принесет совершенно никакого успеха в любом магазине, если только вы не относитесь к категории людей, лица которых очень часто показывают по телевизору (или может быть у вас есть свой видеоблог с комментариями). Даже в эти трудные времена большинство розничных продавцов не готовы поменять не только морально, но и экономически устаревшие стратегии ведения бизнеса. Компания Intel, как один из крупнейших инноваторов мира, планирует сдвинуть корабль с мели с помощью концепта кассового аппарата, который не только знает кто вы такой, но и что вам нужно.
Прототип, который был представлен публике в понедельник на National Retail Federation Show в Нью-Йорке нацелен на изменение стиля, с которым до недавнего времени совершались покупки. Теперь в силу вступают рекомендации, в лучших традициях онлайн-магазинов.
Критерии 100% читаемости сайтов
5 min
Translation
Перевод статьи Oliver Reichenstein «The 100% Easy-2-Read Standard».
Большинство сайтов доверху наполнены мелким текстом, который больно читать. Но зачем? Нет причины вжимать так много информации в экран. Это глупая коллективная ошибка, которая относится к временам когда экраны были действительно маленькими. Так что…
Большинство сайтов доверху наполнены мелким текстом, который больно читать. Но зачем? Нет причины вжимать так много информации в экран. Это глупая коллективная ошибка, которая относится к временам когда экраны были действительно маленькими. Так что…
Экран и журнал: 100%-размер шрифта — это не много. Фотограф: Wilson Miner.
Не заставляйте нас изменять размер шрифта
Мы не хотим изменять настройки браузера каждый раз когда посещаем новый сайт!
Правильная «резина»
3 min
Задачей этой статьи является систематизация знаний о том, как правильно растягивать сайт для различных разрешений экрана.
Статьи: В поисках альтернативы Basecamp: обзор WorkSection
4 min
Translation
Мы с коллегами уже много лет используем Basecamp — веб-сервис для организации рабочего взаимодействия по проектам, разработанный компанией 37signals. Трудно переоценить значение этого сервиса для нашей работы — ведь наши клиенты разбросаны по всему миру, и всё общение с ними происходит в онлайне.
Среди небольших сервисных IT-компаний, подобных нашей, Basecamp стал практически стандартом де-факто. С одной стороны, это очень удобно: новые пользователи, только что приглашенные в наш уютный Extranet, уже умеют в нём ориентироваться. С другой стороны, мы всё чаще чувствуем, что Basecamp нам жмёт. Ничего удивительного: нельзя угодить всем, и парни из 37signals это отлично понимают, и даже не пытаются угодить именно нам.
Не смягчая краски, могу сказать, что некоторые особенности Basecamp’а попросту бесят. Чего стоит только… впрочем, нет, не буду вдаваться сейчас в подробности. О чём я хотел сказать, собственно? Мы неспешно ищем альтернативу Basecamp’у. И здесь, в нашем блоге, мы будем рассказывать о ходе поисков.
Плавающая контентная область сайта.
5 min
Приветствую Хабр.
По мотивам cайта, сделанного сами знаете кем :)
В свое время увидел, такой эффект – слева сайта находятся ссылки, при клике на которые контентная область сайта плавно перемещается к указанному идентификатору. Эффект запомнился — решил повторить.
Для реализации плавного перемещения взял JQuery.
По мотивам cайта, сделанного сами знаете кем :)
В свое время увидел, такой эффект – слева сайта находятся ссылки, при клике на которые контентная область сайта плавно перемещается к указанному идентификатору. Эффект запомнился — решил повторить.
Для реализации плавного перемещения взял JQuery.
Какой бриф лучше?
4 min
У большинства веб-студий, равно как и у других творческо-ориентированных компаний (например у рекламных агентств, архитектурных бюро) общение с клиентом начинается с брифа. В этой статье мы разберемся, нужен ли бриф на предварительном этапе общения с клиентом, и если нужен, то какой его вид является оптимальным для плодотворного общения между сторонами.
Быстрая перекраска вещей на сайте
2 min
Существуют моменты когда необходимо предоставить пользователям выбор цвета какой либо вещи. Есть несколько способов выхода из этой ситуации.
Здесь я покажу очень простой и незамысловатый способ быстрой перекраски, на примере iPod Shuffle.
Контрол-навигация
2 min
Нельзя не заметить, что в рунете всё бóльшую популярность набирает т. н. контрол-навигация: перемещение по страницам одного уровня с помощью сочетаний Ctrl + ← и Ctrl + →. Некоторые товарищи даже неуютно себя чувствуют, когда попадают на сайт, не поддерживающий листание страниц с клавиатуры.
Почему эта функциональность до сих пор не реализована в самих браузерах?
Почему эта функциональность до сих пор не реализована в самих браузерах?
Разработка макетов: а давайте в этот раз не будем спрашивать уборщицу?
4 min
Мало кому приходит в голову указывать программистам, как писать код (хотя некоторые умудряются указывать даже проектировщикам баз данных), но уж показать дизайнеру как нужно рисовать — прямо очередь выстраивается.
Это происходит потому, что все «специалисты» знают: дизайн — это красивая картинка.
Дизайн лишь на 20% искусство, на 80% — это точная наука. И вы будете удивлены, когда узнаете, из чего на самом деле состоит каждая картинка.
Это происходит потому, что все «специалисты» знают: дизайн — это красивая картинка.
Дизайн лишь на 20% искусство, на 80% — это точная наука. И вы будете удивлены, когда узнаете, из чего на самом деле состоит каждая картинка.
Методичка по работе с клиентами. Для начинающих менеджеров веб-студий
6 min
(2008 год, письмо старшего менеджера веб-студии — младшему)
( профи вряд ли найдут что-то новое, молодым будет интересно)
Привет. Вот краткая инструкция, основанная на личном опыте. Так сказать, курс молодого бойца.
наша задача — заработать как можно больше денег, при минимальных телодвижениях.
обычно есть следующие варианты
( профи вряд ли найдут что-то новое, молодым будет интересно)
Привет. Вот краткая инструкция, основанная на личном опыте. Так сказать, курс молодого бойца.
наша задача — заработать как можно больше денег, при минимальных телодвижениях.
Итак, получили письмо от клиента
обычно есть следующие варианты
- клиент явно перспективный и обратился «выборочно» именно к нам — есть большая вероятность, что переговоры будут удачными — тогда лучше сразу набивать стрелку и устанавливать личный контакт и все выяснять на месте. Хотя, границы бюджета лучше выяснить в любом случае.
- клиент интересный, но многое неясно из его письма ( нет ТЗ, нет бюджета, он написал в несколько студий, сайт потенциально сложный, сайт неинтересный и тд. ). Тут важно прислать ему БРИФ на заполнение, выяснить сроки и бюджет. Согласовать бюджет сроки — уже потом встречаться в случае, если все устраивает.
- Письмо подозрительно короткое и не «пахнет интересом». Например, «нужен обувной интернет-магазин, сколько стоит? Как быстро сделаете? Виталий» — тут вряд-ли чтото выгорит + вероятно это пробивон по ценам от конкурентов.
В этом случае — цену говорим в полтора раза дето дороже, интересуемся «укладываемся ли мы в их бюджет» в положительном случае — можно встречаться. Иначе — скорее всего трата времени.
Предпроектная документация: что это и почему она так важна?
4 min
Среди моих знакомых нет ни одного, кто любил бы писать технические задания или что-то вроде этого. Чертить на салфетках планы захвата вселенной, собирать лэйауты из разноцветных стикеров, шлифовать концепцию в голове и на словах – это все любят и умеют делать, а вот сесть и как следует записать…
Меня, например, любой шаблон серьезного документа погружает в глубочайшую тупку.
У моих знакомых очень много хороших идей, но с таким подходом, слава богу, что дело редко доходит до производства. Почему? Плохо продуманные проекты редко бывают успешными. Либо команда по уши вязнет в тех работах, которые не были видны в начале, либо получается кривоватый, плохо приспособленный к жизни гоблин. Плохо масштабируемый к тому же.
Меня, например, любой шаблон серьезного документа погружает в глубочайшую тупку.
У моих знакомых очень много хороших идей, но с таким подходом, слава богу, что дело редко доходит до производства. Почему? Плохо продуманные проекты редко бывают успешными. Либо команда по уши вязнет в тех работах, которые не были видны в начале, либо получается кривоватый, плохо приспособленный к жизни гоблин. Плохо масштабируемый к тому же.
Глава 3. Оживляем страницу с jQuery
8 min
Очередная глава из книги «jQuery in Action» (авторы Bear Bibeault и Yehuda Katz). Прежде всего извиняюсь перед читателями за столь большой промежуток между публикациями глав. Но все-таки я это сделал, чему, конечно же, рад. Надеюсь, что и вы тоже не останетесь равнодушными. Итак, продалжаем.