Перевод статьи Smashing Magazine Creative And Innovative Navigation Designs.

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

Toybox

Навигация на сайте всегда должна быть под рукой, но в то же время не мешать пользователю. На сайте Toybox именно такое решение: навигация проста, но в тоже время хорошо заметна. Когда панель меню скрыта, страница акцентирует внимание посетителя на контенте, т.к. отсутствуют отвлекающие блоки. Горизонтальная навигация также проста и удобна.

Сегодня очень популярны облачные сервисы, и на kickstarter'е появился проект домашнего облачного хранилища — Plug, который собрал уже более $600 тысяч (Необходимые $69 тысяч проект собрал всего за пять дней). Самые дешевые места по $59 закончились, но остались по $79.

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

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

2. Если письмо не требует ответа или какой-то реакции, отправляйте его в архив. Пустая папка «Входящие» — это прекрасно. Используйте inbox в качестве списка To Do.

3. Не используйте одновременно несколько программ/приложений. Закончили с соцсетями — закройте окно. Проверили почту — закройте ее. Не нужно серфить в интернете — закройте браузер. Даже фоном ничего не оставляйте. Несколько задач одновременно отвлекают и мешают сконцентрироваться на чем-то одном.

Команда GitHub запустила новый проект — Choose A License, который поможет выбрать нужную Open Source лицензию для вашего проекта. На главной странице кратко представлены самые популярные — MIT License, Apache License и GPL.

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

Ускорение набора текста с помощью добавления спецсимволов

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

В заметке собраны сайты с обучающими материалами для веб-дизайнеров и веб-разработчиков. Старался не повторяться с постом 27+ ресурсов для онлайн-обучения хабраюзера nicolausYes.

Academic Earth

Множество бесплатных лекций, в том числе от известных университетов (Гарвард, MIT, Стенфорд и др.).

В этой статье очень подробно описано пошаговое создание адаптивного меню для сайта с несколькими вариантами компоновки элементов (в зависимости от размера экрана девайса). Для поддержки retina-экранов используется иконочный шрифт.



Демо / Скачать исходники

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

История

Фильмы 30-и-более летней давности трудно сегодня воспринимать всерьез, т.к. большинство систем будущего выглядело в лучшем случае так («Чужой», 1979):

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



Существует много объяснений такого поведения: лень, равнодушие, отвлекающие внешкольные факторы и т.д. Но если спросите меня, то я назову более глубокую причину: незнание математики заставляет чувствовать себя глупо. А это неприятно.

Новые полезные штуки для веб-дизайнеров за июнь 2013. Остальные подборки доступны по тегу "новое для веб-дизайнера"

Инструменты

Red Pen — сервис позволяет легко получать обратную связь на свои работы в формате PNG: после загрузки картинки любой пользователь может оставлять свои комментарии к файлу

В подборке инструменты, плагины и другие полезности, облегчающие работу с Twitter Bootstrap. Предыдущая подборка.

Инструменты

Bootstraptor — подборка большого количества бесплатных и премиум тем, в том числе Starter Kit, на основе Bootstrap.

DivShot — отличный новый инструмент для работы с Twitter Bootstrap. С помощью него создавать прототипы интерфейсов с использованием популярного CSS-фреймворка стало до безобразия просто.

Новые полезные штуки для веб-дизайнеров за первую половину декабря 2012. Прошлый месяц: ноябрь. Во все подобные топики буду добавлять тег "новое для веб-дизайнера"

Сервисы и инструменты

Weavly — бесплатный онлайн-сервис для удобного создания роликов из видео, аудио и gif-картинок.

One-div.com — необычный сервис, где собраны почти 60 иконок, реализованных с помощью CSS. В HTML используется один div (отсюда и название):

<div class="histogram"> </div>

При создании колонок обычно приходится применять специальные 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:

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

Сервисы и инструменты

Photo Raster — новый мощный графический редактор онлайн.

Онлайн-сервисы становятся все популярнее, постепенно усложняя функционал и улучшая интерфейсы. В этой подборке представлены онлайн-инструменты для кодеров.

Cloud9

«Это Google Docs, только для кода» — так говорят о проекте. Облачный сервис вырос из Mozilla Bespin. Основные фишки: SSH, drag-and-drop и возможность разработки оффлайн.