На сайте Smashing Magazine выложены два новых полезных инструмента для мобильных разработчиков. Это набор заготовок для рисования набросков интерфейсов распространённых типов мобильных утсройств Outline и шаблоны для подбора размеров элементов тач-интерфейса с учётом разрешения и физического размера реальных устройств Tapsize. Оба набора предназначены для распечатки на бумаге.
User
Коллекция паттернов поведения для элементов отзывчивого веб-дизайна
1 min
29KДумаю любому современному дизайнеру или верстальщику рано или поздно в голову приходила мысль «А почему бы на этом проекте не использовать принципы отзывчивого веб-дизайна?». Пожалуй, сложно найти человека, который не слышал о responsive design в наше время, когда сёрфить веб могут с телефона, микроволновки и тапочек. Приступая к работе над подобным проектом, неплохо было бы иметь под рукой примеры возможного поведения лейаута и его отдельных элементов.
+47
Piecon — динамическая круговая диаграмма в фавиконе
1 min
5.3KКрошечная (2 килобайта в минифицированном виде) JavaScript-библиотека Piecon генерирует круговую диаграмму на месте фавикона. API предельно прост и состоит из трёх методов объекта Piecon.
+72
О сортировке контента на основе оценок пользователей
4 min
17KНаписать этот пост меня привлекла эта статья. Многие ее помнят по вот этой картинке.
Статья затрагивает правильную тему, однако с точки зрения математики и здравого смысла она в корне не верна.
Статья затрагивает правильную тему, однако с точки зрения математики и здравого смысла она в корне не верна.
+101
Как правильно сортировать контент на основе оценок пользователей
5 min
92KTranslation
В оригинале название звучит как «How Not To Sort By Average Rating». Я подумал, что дословный перевод «Как не сортировать по усреднённому рейтингу» будет малопонятен и хуже отражает содержание статьи.
Постановка проблемы
Вы занимаетесь веб программированием. У вас есть пользователи, которые оценивают контент на вашем сайте. Вы хотите разместить высоко оцененный контент наверху, а низко оцененный — внизу. Для этого на основе пользовательских оценок вам нужно вычислить некий «рейтинг».
Неправильное решение №1
Рейтинг= (Число положительных оценок) - (Число отрицательных оценок)
+388
UICloud: Самая большая база пользовательских интерфейсов
1 min
35KUICloud — это база бесплатных пользовательских интерфейсов с поисковой системой, рейтингом и каталогизатором в которой собрано все от исходников в формате PSD, до готовых решений на HTML, CSS или jQuery: формы, слайдеры, кнопки, календари, элементы и полноценные интерфейсы для мобильных и веб приложений. В проекте уже сейчас можно найти практически все что нужно для облегчения процесса разработки дизайнерам и разработчикам.
На данный момент в базе 23586 элементов и почти тысяча UI-сэтов включающие в себя готовые решения в едином стиле. Проект создан Британской студией Double-J Design целью проекта является создание самой обширной UI базы.
+159
Стремимся к минимализму (подборка сайтов, где можно черпать вдохновение)
1 min
33KНи для кого не секрет, что в настоящее время многие стремятся к минимализму в дизайне чего бы то ни было. Действительно, когда нет ничего лишнего, то повышается и восприимчивость информации. Но это все лирика. Сказано было это еще до меня и много. Предлагаю вашему вниманию подборку сайтов, посещение которых может направить ваши мысли по поводу разрабатываемого дизайна в нужное русло.
+100
Одно предложение, которое делает нас сильнее
2 min
93K Это мой самый короткий топик, суть которого в одном предложении. Часто именно с этого предложения начинается успешный стартап, бизнес и любое другое начинание.
Это шаблон описания сути вашей компании или проекта в одном предложении. Я открыл его для себя во время стажировки в США. Составив его, мы реально становимся сильнее. В последствии мне это помогло выбрать правильный курс, сфокусироваться и расставить приоритеты.
Это шаблон описания сути вашей компании или проекта в одном предложении. Я открыл его для себя во время стажировки в США. Составив его, мы реально становимся сильнее. В последствии мне это помогло выбрать правильный курс, сфокусироваться и расставить приоритеты.
+138
+293
Как распознать кракозябры?
1 min
429KВ комментариях к предыдущему посту про иероглифы сказали, что хорошо бы иметь такую же блок-схему для кракозябр.
Итак, вуаля!
За источник информации была взята статья из вики. В блок-схеме «UTF-16 → CP 866» означает, что исходная кодировка была «UTF-16», а распозналась она как «CP 866».
Как всегда — кликабельно. Исходник в .docx: здесь.
Итак, вуаля!
За источник информации была взята статья из вики. В блок-схеме «UTF-16 → CP 866» означает, что исходная кодировка была «UTF-16», а распозналась она как «CP 866».
Как всегда — кликабельно. Исходник в .docx: здесь.
+407
Как определить язык по виду иероглифов/закорючек?
1 min
192KВот, задался таким вопросом… С помощью гугл транслейта и такой-то матери, родилась такая блок-схемка:
картинка кликабельна
Кому нужен сорец (в .docx): тут
картинка кликабельна
Кому нужен сорец (в .docx): тут
+317
Как улучшить веб-формы
2 min
2.6KTranslation
Этот пост — перевод ответа на вопрос «Как сделать заполнение онлайн-форм весёлым (fun)» на сайте Quora.
Как бы нас не раздражали бесконечные формы на разных сайтах, полностью избавиться от них пока не получится. Так что всё, что нам остаётся — это постараться собрать информацию у пользователей, не отпугивая их.
Сейчас проверка данных обычно выглядит как наказание — если вы понимаете, о чём я. Вы заполняете форму, кликаете «ОК»… и получаете страшную надпись типа «ТЫ ЗАПОЛНИЛ ЭТО ПОЛЕ НЕПРАВИЛЬНО, ПРИДУРОК. ИДИ ИСПРАВЬ». Ну, может, конечно, придурком вас напрямую не называют, но ощущение остаётся именно такое. Чем дальше мы сможем от этого уйти, тем лучше.
Попробуйте «позитивную» проверку. То есть, вместо того, чтобы говорить пользователю, когда он ошибся, сообщайте ему о том, что он сделал правильно.
Мне очень нравится форма на этом сайте. Посмотрите — они сообщают пользователю, что он с чем-то справился сразу вместо того, чтобы пост-фактум известить его об ошибке:
www.junkmycar.com
Как бы нас не раздражали бесконечные формы на разных сайтах, полностью избавиться от них пока не получится. Так что всё, что нам остаётся — это постараться собрать информацию у пользователей, не отпугивая их.
Проверка данных
Сейчас проверка данных обычно выглядит как наказание — если вы понимаете, о чём я. Вы заполняете форму, кликаете «ОК»… и получаете страшную надпись типа «ТЫ ЗАПОЛНИЛ ЭТО ПОЛЕ НЕПРАВИЛЬНО, ПРИДУРОК. ИДИ ИСПРАВЬ». Ну, может, конечно, придурком вас напрямую не называют, но ощущение остаётся именно такое. Чем дальше мы сможем от этого уйти, тем лучше.
Попробуйте «позитивную» проверку. То есть, вместо того, чтобы говорить пользователю, когда он ошибся, сообщайте ему о том, что он сделал правильно.
Мне очень нравится форма на этом сайте. Посмотрите — они сообщают пользователю, что он с чем-то справился сразу вместо того, чтобы пост-фактум известить его об ошибке:
www.junkmycar.com
-1
Пять интересных эффектов при наведении с использованием нескольких фоновых изображений
6 min
22KTutorial
Translation
Сегодня мы рассмотрим все преимущества использования множественных фонов. Изучим базовые основы и создадим крутые эффекты при наведении с помощью CSS свойств
Ниже приведены пять различных примеров, которыми вы можете воспользоваться для создания собственных удивительных эффектов.
Посмотрим на то, что должно получиться в итоге. Подумайте, как можно реализовать эти эффекты чисто на одном CSS.
Демонстрация
hover
и transition
.Ниже приведены пять различных примеров, которыми вы можете воспользоваться для создания собственных удивительных эффектов.
Что должно получиться
Посмотрим на то, что должно получиться в итоге. Подумайте, как можно реализовать эти эффекты чисто на одном CSS.
Демонстрация
+69
20 заповедей дизайна пользовательского интерфейса
9 min
44KЭто перевод оригинальной статьи Principles of User Interface Design
— Пол Рэнд (Paul Rand)
Интерфейсы служат для обеспечения взаимодействия между людьми и окружающим миром. Они помогают нам прояснять, освещать, реализовывать и наблюдать взаимосвязи; они могут объединять и разъединять нас, влиять на наши ожидания; а кроме того, они дают нам доступ к различным услугам. Не стоит принимать процесс разработки интерфейса за искусство в чистом виде, а сам интерфейс — за некий арт-объект. Интерфейсы призваны выполнять определенные функции, и эффективность их работы можно измерить. Но и к одним только утилитарным вопросам роль интерфейсов не сводится. Действительно хорошие интерфейсы способны вдохновлять, пробуждать, окутывать тайной и укреплять наши отношения с окружающим миром.
«Быть дизайнером — значит не просто собирать разрозненные элементы воедино, упорядочивать их или как-то изменять. Тут нужно и создавать некую ценность, и придавать смысл, и освещать, и упрощать, и трансформировать, и облагораживать, и сгущать краски, и убеждать, и даже в какой-то мере развлекать».
— Пол Рэнд (Paul Rand)
1. Обязанность интерфейса — обеспечение взаимодействия
Интерфейсы служат для обеспечения взаимодействия между людьми и окружающим миром. Они помогают нам прояснять, освещать, реализовывать и наблюдать взаимосвязи; они могут объединять и разъединять нас, влиять на наши ожидания; а кроме того, они дают нам доступ к различным услугам. Не стоит принимать процесс разработки интерфейса за искусство в чистом виде, а сам интерфейс — за некий арт-объект. Интерфейсы призваны выполнять определенные функции, и эффективность их работы можно измерить. Но и к одним только утилитарным вопросам роль интерфейсов не сводится. Действительно хорошие интерфейсы способны вдохновлять, пробуждать, окутывать тайной и укреплять наши отношения с окружающим миром.
+63
Новый паттерн UI — боковая навигация
7 min
50KTranslation
Занимаюсь редизайном приложения 10tracks для Android, и решил позаимствовать красивый интерфейсный ход старших братьев — Facebook и других. На эту тему нашлась хорошая статья, переводом которой спешу поделиться с вами. Между тем эта статья — больше платформа для дискуссии, чем нерушимые устоявишеся правила.
За последний год интерфейс Android улучшался с феноменальной скоростью (я подобрал небольшую галерею приложений, которые мне нравятся в Google+). Много изменений являлись лишь косметическими (тема Holo в ICS, шрифт Roboto, и т.д.). Мы не увидели больших качественных изменений в принципах проектирования интерфейсов. Но, возможно, как раз сейчас происходит одно такое.
Почти одновременно несколько приложений внедрили у себя боковую навигацию как в приложении Facebook. Сначала мы увидели, как она используется в новом дизайне Spotify, а затем почти сразу решение переняли Evernote. Не прошло и года, в новом дизайне приложения Google+ представили аналогичный паттерн.
За последний год интерфейс Android улучшался с феноменальной скоростью (я подобрал небольшую галерею приложений, которые мне нравятся в Google+). Много изменений являлись лишь косметическими (тема Holo в ICS, шрифт Roboto, и т.д.). Мы не увидели больших качественных изменений в принципах проектирования интерфейсов. Но, возможно, как раз сейчас происходит одно такое.
Почти одновременно несколько приложений внедрили у себя боковую навигацию как в приложении Facebook. Сначала мы увидели, как она используется в новом дизайне Spotify, а затем почти сразу решение переняли Evernote. Не прошло и года, в новом дизайне приложения Google+ представили аналогичный паттерн.
+75
Valve: как я здесь оказался, на что это похоже и чем я здесь занимаюсь
14 min
64KTranslation
Автор оригинальной статьи — Майкл Эбраш, человек и пароход. Для тех, кому лень изучать википедию, отмечу, что это программист с более чем 30-летним стажем работы, который в свое время помог Кармаку сделать Quake, разработал GDI для Windows NT, приложил руку к созданию первых двух версий Xbox, а сейчас работает в R&D-отделе компании Valve.
В своей заметке он вспоминает, как зарождалась индустрия 3D-игр вообще и Valve в частности, рассказывает про свой опыт работы в различных корпорациях, приоткрывает завесу внутренней кухни Valve и ищет новых сотрудников. Статья большая, и я посчитал ее достаточно интересной для того, чтобы перевести на хабр.
Всё началось с Лавины*.
Если бы я не прочел её и не влюбился в идею Метавселенной, если бы она не заставила меня представить, насколько распределенная 3D сеть близка к воплощению в жизнь, если бы я не подумал я могу сделать это и, что более важно, я хочу сделать это, я бы никогда не встал на путь, который в конечном счете привел меня в Valve.
В 1994 году я уже несколько лет как работал на Microsoft. Однажды вечером, когда моя дочка рассматривала книги в магазине Little Professor в Sammamish Plateau, мне посчастливилось заметить Лавину на полке. Я взял книжку, прочитал первые страницы, решил купить и в итоге проглотил её за день. Параллельно я начал задумываться о том, что 80 процентов описанного в ней осуществимо прямо сейчас, и мне захотелось реализовать это сильнее, чем когда-либо вообще хотелось сделать что-то с компьютером — я всю жизнь читал научную фантастику, и вдруг мне выпал шанс превратить её в реальность. Так я попытался начать в Microsoft проект по созданию технологии сетевого 3D.
В своей заметке он вспоминает, как зарождалась индустрия 3D-игр вообще и Valve в частности, рассказывает про свой опыт работы в различных корпорациях, приоткрывает завесу внутренней кухни Valve и ищет новых сотрудников. Статья большая, и я посчитал ее достаточно интересной для того, чтобы перевести на хабр.
Всё началось с Лавины*.
Если бы я не прочел её и не влюбился в идею Метавселенной, если бы она не заставила меня представить, насколько распределенная 3D сеть близка к воплощению в жизнь, если бы я не подумал я могу сделать это и, что более важно, я хочу сделать это, я бы никогда не встал на путь, который в конечном счете привел меня в Valve.
В 1994 году я уже несколько лет как работал на Microsoft. Однажды вечером, когда моя дочка рассматривала книги в магазине Little Professor в Sammamish Plateau, мне посчастливилось заметить Лавину на полке. Я взял книжку, прочитал первые страницы, решил купить и в итоге проглотил её за день. Параллельно я начал задумываться о том, что 80 процентов описанного в ней осуществимо прямо сейчас, и мне захотелось реализовать это сильнее, чем когда-либо вообще хотелось сделать что-то с компьютером — я всю жизнь читал научную фантастику, и вдруг мне выпал шанс превратить её в реальность. Так я попытался начать в Microsoft проект по созданию технологии сетевого 3D.
+218
Записи с летней школы по Metro-дизайну
1 min
15KДрузья, как вы, наверняка, знаете, буквально в прошедшие выходные (13-14 июля) мы проводили летнюю школу по Metro-дизайну для Windows Phone и Windows 8. Рады сообщить, что записи лекций уже доступны на TechDays!
+24
Истории про проектирование приложений для Windows 8
3 min
10KНаши коллеги, ведущие блог Создание Windows 8 и пополняющие руководства по проектированию и разработке приложений для Windows 8 на MSDN, за последнее время выложили несколько интересных историй как по проектированию наших собственных приложений, так и по проектированию приложений для популярных сценариев. Ниже вы найдете подборку ссылок на эти истории.
+24
Как я делал дизайн для «клона Хабра»
4 min
2.4KКак многие уже догадались из названия, речь пойдет о движке LiveStreet, а вернее о базовом шаблоне Synio, который включается в сборку CMS, и автором которого мне повезло стать.
Сегодня я хотел бы рассказать о процессе его создания и о том, что удалось воплотить.
+97
User Experience и модель Кано
5 min
32KTranslation
Впервые мне довелось столкнуться с моделью Кано при работе над улучшением системы регистрации пассажиров аэропорта Каструп в Копенгагене. Данная модель была разработана профессором Нориаки Кано в 80-х годах; с ее помощью можно анализировать удовлетворенность потребителей (customer experience, CX) от использования продуктов либо услуг. Полученные результаты помогают осуществлять более продуманные инвестиции в развитие продукции и, следовательно, повышение удовлетворенности потребителей.
+32
Information
- Rating
- Does not participate
- Registered
- Activity