Веб-дизайн *

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

Если у статьи в Википедии есть версии на других языках, то этот список показывается в боковом меню (интервики-ссылки). Имя языка в этом списке записывается на самом этом языке (в англоязычной литературе используется термин «autonym»).

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

Первоначально эта проблема решалась с помощью системных шрифтов, доступных на устройстве читателя. Если шрифта не было, пользователь вместо названия языка видел набор квадратиков (▯▯▯▯▯▯▯▯▯, ▯▯▯ — ▯▯▯▯▯ ▯ ▯▯▯▯▯ ▯▯▯▯▯▯▯▯). Такие квадратики часто называют «тофу». Для решения этой проблемы (не только для списка языков, но и для показа в самих статьях) было создано расширение MediaWiki Universal Language Selector (ULS), которое предоставляло набор шрифтов для показа всех языков, использующихся на странице.

Это помогло гарантировать корректный показ языка, но взамен принесло другую проблему: резко увеличившийся размер страниц, которые начали грузиться много медленее, чем до начала использования ULS. В качестве полумеры, для обеспечения нормальной скорости загрузки, веб-шрифты перестали использоваться для показа интервики-ссылок.

Добрый день,

Вышла 4-ая версия бесплатного набора шрифтов Font-Awesome. Изменился дизайн сайта, добавился кроме всего прочего знак рубля, но самое главное — изменились имена классов у иконок. Сейчас нужно везде использовать тэг <i> и вместо префикса icon используется префикс fa.
fa-camera-retro

Примеры использования

Снова делюсь с вами подборкой интересных сайтов и ресурсов, чтобы к концу недели отвлечься от рабочего процесса. В этот раз будет много браузерного 3D и сайтов о типографике.

*Whoision — официальное название сервиса, с налетом еле заметной иронии.

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

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

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

Итак, хроника рабочего процесса со слов участников. В конце — ссылка на сам сервис, для нетерпеливых.

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



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

Уже конец недели и пора плавно переходить к режиму «Safe mode». Поэтому делюсь с вами подборкой интересных сайтов и ресурсов, чтобы к концу дня отвлечься от рабочего процесса.

В марте 2012 года Гай Подъярны (Guy Podjarny) провел тест, в ходе которого сравнивалась продуктивность работы сотен новых адаптивных сайтов на устройствах с четырьмя различными разрешениями экранов. Получившиеся результаты были весьма разочаровывающими.

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

Компания Google выложила в свободный доступ программу Google Web Designer (бета): HTML-редактор кода со встроенным графическим редактором для создания рекламных баннеров.

Привет, Хабр.

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

Оговорюсь: я «слепой» на жёлтый и красный цвета (голубой и синий являются заменой соответственно), а людей с похожим отклонением не встречал (к сожалению).

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

Итак: пользовательский интерфейс…. Что же это такое? Думаю, немаловажная составляющая успешного продукта. Именно то, насколько пользователям будет комфортно работать с тем или иным приложением, определяет дальнейшую судьбу, собственно, приложения и, вероятно, финансового (или не финансового) состояния разработчика.

Здравствуй, дорогое хабросообщество! Пару дней назад ночью меня посетила одна очень интересная мысль, а именно: как сделать интернет доступнее для слабовидящих и людей, страдающих нарушением цветовосприятия (дальтоников). О том, как можем помочь им Мы (разработчики, дизайнеры, UI/UX специалисты) и создатели браузеров, можно узнать под катом. Так, возможно, выглядит Хабрахабр для некоторых из нас.



А как видишь Хабрахабр ты, {userName}?

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

Запуск Behance состоялся в 2006 году, проект является крупнейшим сообществом и источником вдохновения для людей творческих профессий. В 2012 году компания Adobe купила Behance и произвела тесную интеграцию платформы со своим сервисом Creative Cloud.

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

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

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

Web-дизайн находится в постоянном движении: с каждым годом он развивается и видоизменяется под воздействием всевозможных факторов, обрастая новыми интересными инструментами и оставляя позади все старое и неактуальное. Нынешний год можно охарактеризовать тем, что одной из причин развития дизайна становится все большее распространение мобильных устройств и планшетов, появление HTML 5. Но давайте подробнее остановимся на тенденциях web-дизайна в 2013 году.

Всем привет, сегодня вышло обновление ХабраРедизайнера до версии 0.1.5.
Как и раньше, я потихоньку допиливаю дизайн и наращиваю функционал расширения.

Кратко

Исправлена куча ошибок, улучшена верстка, добавлены полезные ссылки, настройки и новый функционал.

Не многие знают, что такой известный инструмент прототипирования как Axure обзавелся новой версией, Axure 7 beta. И бета эта открытая, каждый может скачать и попробовать все новинки программы.
Нововведений действительно много, начиная от внешнего оформления, и заканчивая наконец появившимися тенями для элементов!

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

Согласно правилам типографики, контент страницы хорошо читается, если в строке от 45 до 75 символов. При разработке адаптивного дизайна это сложно реализовать только лишь с помощью Media Queries. Появился jQuery плагин FlowType, который помогает добиться такого соотношения при любом размере экрана и ширине окна.

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

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

Книга «Основы стиля в типографике» (The Elements of Typographic Style), которую стоит рекомендовать всем начинающим дизайнерам, начинается со слов:

Типографика существует, чтобы отдавать должное содержанию.

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

Правильное сочетания букв позволяет максимально ярко передать настроение текста. А лучше всего это умеют делать дизайнеры логотипов!

Пожалуй, самый популярный логотип, который демонстрирует «владение буквами» — это логотип FedEx, разработанный Линдоном Лидером (Lindon Leader). На первый взгляд, это обычное применение Futura Bold. Однако если присмотреться, видно, как были изменены буквы «E» и «x», чтобы образовалась стрелка: