Много интересного и полезного может перенять дизайнер интерфейсов из sci-fi фильмов. В разные годы компьютерные системы в фильмах отражали представления и стереотипы о дизайне будущего, зачастую опережая появление прототипов схожих устройств.
История
Фильмы 30-и-более летней давности трудно сегодня воспринимать всерьез, т.к. большинство систем будущего выглядело в лучшем случае так («Чужой», 1979):
Я, как учитель математики нередко разочаровываюсь в учениках. Они прогуливают. Они ленятся. Они плачут, словно младенцы, если у них отнять калькуляторы. Но хуже всего то, чего они не делают. Не задают вопросов. Не записывают. Не исправляют тесты, даже если это может повысить их общий балл. Разве их не волнуют их неудачи в учебе?
Существует много объяснений такого поведения: лень, равнодушие, отвлекающие внешкольные факторы и т.д. Но если спросите меня, то я назову более глубокую причину: незнание математики заставляет чувствовать себя глупо. А это неприятно.
Новые полезные штуки для веб-дизайнеров за июнь 2013. Остальные подборки доступны по тегу "новое для веб-дизайнера"
Инструменты
Red Pen — сервис позволяет легко получать обратную связь на свои работы в формате PNG: после загрузки картинки любой пользователь может оставлять свои комментарии к файлу
DivShot — отличный новый инструмент для работы с Twitter Bootstrap. С помощью него создавать прототипы интерфейсов с использованием популярного CSS-фреймворка стало до безобразия просто.
Новые полезные штуки для веб-дизайнеров за первую половину декабря 2012. Прошлый месяц: ноябрь. Во все подобные топики буду добавлять тег "новое для веб-дизайнера"
Сервисы и инструменты
Weavly — бесплатный онлайн-сервис для удобного создания роликов из видео, аудио и gif-картинок.
При создании колонок обычно приходится применять специальные CSS-классы к первому и последнему элементу. В этой статье рассказано о небольшом трюке, который упрощает верстку колонок, а также делает их адаптивными.
Суть метода сводится к использованию псевдокласса nth-of-type: количество и ширина колонок меняется на экранах разных размеров (Демонстрация).
Недостатки использования классов для первого и последнего элементов
Применять классы .first и .last для колонок в каждой строке для корректного отображения очень утомительно, к тому же возникают проблемы при верстке адаптивно:
Полгода назад я делал перевод статьи на Хабре Подробно о свойстве float. В этот раз взглянем на него немного под другим углом. При разработке сайта мы часто используем float'ы для позиционирования некоторых блоков на странице, например сайдабара. Но так ли это необходимо?
Float не всегда удобен: например при верстке сетки с изображением. Иногда уместно применять inline-block, который имитирует поведение float'а.
Что такое inline-block?
Обычная структура блочного элемента:
Inline-block — это значение, которые можно назначить свойству display. Название происходит от некоторых характеристик как строчного, так и блочного элементов.
На сегодняшний день существует несколько техник адаптации изображений для просмотра на экранах любых размеров. Большинство из них сводится к простому масштабированию. В этой статье рассмотрим немного более хитрый способ — фокусирование на определенных точках.
Focal Point — это HTML/CSS фреймворк, представленный на GitHub, автор — Adam Bradley. Один из простых способов работы с адаптивными изображениями — это обрезание сторон, которые не помещаются на экране. Однако при этом можно случайно обрезать полезное пространство изображения. С помощью Focal Point можно указать важные точки фокуса картинки, которые не будут обрезаны:
На многих сайтах есть возможность отобразить версию страницы для печати, но всегда ли удобно ими пользоваться?
Основными проблемами при распечатке документа становится плохая типографика, наличие лишней информации (например, элементы интерфейса) и неправильные цвета. Для стилизации можно использовать правило @media:
Онлайн-сервисы становятся все популярнее, постепенно усложняя функционал и улучшая интерфейсы. В этой подборке представлены онлайн-инструменты для кодеров.
«Это Google Docs, только для кода» — так говорят о проекте. Облачный сервис вырос из Mozilla Bespin. Основные фишки: SSH, drag-and-drop и возможность разработки оффлайн.
Продолжаю серию топиков про SVG. Векторные SVG-элементы корректно отображаются в современных браузерах, но как реализовать поддержку в старых версиях? Разберемся с кроссбраузерностью векторной графики.
Применение веб-шрифтов становится все популярнее: согласно HTTP Archive, за последний год число сайтов, использующих дополнительные шрифты, выросло вдвое — с 6 до 12%.
Слабым местом веб-шрифтов является производительность, однако ситуация постепенно меняется в лучшую сторону: появляются более совершенные методы сжатия, улучшается поддержка браузерами, unicode, отдельные наборы шрифтов и т.д.
Чуть больше месяца назад на Хабре проходил конкурс от интернет-издания ToWave.ru, в котором предлагалось хабраюзерам высказывать идеи, замечания и предложения по развитию проекта. Призы были интересные — три планшета Samsung Galaxy Tab 2 7.0 P3110 8Gb, два планшета Samsung Galaxy S WiFi 5.0 8Gb и полезные книжки. Я, к сожалению, заметил конкурс только спустя несколько дней после старта, и большинство полезных идей и советов было уже высказано. Но, как говорится, лучше один раз увидеть, чем сто раз прочитать.
Интерфейс Хабра за все время существования не претерпел каких-то радикальных изменений, однако администрация постоянно улучшает удобство пользования сайтом, добавляя маленькие полезные фичи. Предлагаю список некоторых возможных улучшений и призываю хабровчан обсудить интерфейс Хабра в комментариях.
Создание фотогалереи для адаптивного дизайна — не самая простая задача. Следует учитывать отображение на экранах различной ширины, при этом не загружая слишком много графики на мобильных устройствах. Хорошее решение — Gamma Gallery, выглядит очень круто.
Использование CSS-спрайтов на сайте позволяет повысить производительность и грамотно организовать элементы интерфейса.
Sprite Sheet — это одно большое изображение мелких графических элементов сайта, например иконок или кнопок. И благодаря CSS можно отображать каждый элемент отдельно.
