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

Еcли пробовать работать без него (а я пробовал, каюсь), то схемы, скетчи и прочие наброски утверждаются без проблем и без особого внимания к деталям. Наблюдается полная неактивность заказчика до момента презентации макета. И тогда уже начинается креатив с перестановкой блоков, размерами, цветовыми экспериментами и идеями, переворачивающими все с ног на голову.

Поэтому, без ТЗ никак, если важны нервы и время.

Но, как показывает практика, ТЗ для фрилансера клиенты больше ленятся заполнять, нежели при работе с вебстудией. Объясняется это, примерно, так: «Эй. У меня сейчас нет времени. Я тебе и так о многом написал, посмотри в истории переписки. Если что, задавай вопросы. Потом обсудим твой вариант.»

Но это всё частные проблемы, теперь (ниже) мысль поста.

В сети полно примеров различных ТЗ на разные типы сайтов (например). Но, бегло пробежавшись в них, я не нашел одного, как мне кажется, актуального вопроса, который я недавно добавил в своё техническое задание, где-то между пунктами с описанием модулей и размерами рекламных баннеров. А именно:

«Есть ли у вашей компании корпоративные аккаунты, группы в соцсетях? (twitter.com, facebook.com, vkontakte.ru и т. д.)».

Не принципиально знать об этом заранее? Для блогов, возможно, да. Туда не трудно добавить новый виджет. Но что делать, если клиент приходит со своим макетом сайта компании (скорее, своей картинкой-на-стену за ***$) с free-lance.ru и просит добавить иконки в такое произведение при верстке?

В итоге, то «облачков не видно», то красивый рендер «теряется». Получается, что уже можно добавить только в «пустые места», но не туда, где виджет действительно будет уместен.

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

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

P.S.: В процессе написания поста наткнулся на интересный сервис TZGen — сервис автоматического создания технического задания на разработку веб-сайта. Поле заполнения полей формы можно бесплатно скачать PDF-версию своего техзадания на дизайн сайта.

Постовой:

Скачайте без регистрации красивые кисти для photoshop. naikom.ru/blog — блог о дизайне сайтов.

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Спорное оформление вкладок и кнопок
2. Чем заменить Welcome?
3. Прокачиваем шаблоны от 960.gs

Гостевой пост от Анны Быстровой, автора блога sprosonok.ru посвящённого урокам и теории пиксель-арта. (Поэтому не удивляйтесь, что текст написан от женского лица :)

Знаете, как это бывает, когда в поисках нужной информации натыкаешься на один интересный сайт, слабо связанный с темой поиска, потом на другой, не связанный совершенно. В конце концов, напрочь забываешь, с чего все началось и что ты, собственно говоря, искал =) Так было и со мной. Как обычно, в поисках какой-то нужной информации я наткнулась на интересные аватарки, они были нарисованы в стиле пиксельной графики. Я была поражена этим стилем и пиксельными аватарками (например, такими)

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

Оказывается, пиксельная графика (пиксел-арт или Pixel Art) — это вид компьютерного дизайна, при котором изображение рисуют на экране монитора при помощи растрового графического редактора с использованием простейших инструментов — карандаша и ластика, т. е. каждый пиксель дизайнер рисует ВРУЧНУЮ! Причем желательно использовать 16 цветов палитры.

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

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

Чем же интересен Pixel Art, что он получил такой толчок в развитии в последние годы? Причин несколько: скорее всего одна из них то, что огромное количество людей выросло, играя в эти самые Суперденди и Сегу в детстве, и при виде графики тех времен на них накатывает ностальгия. Также немаловажный момент — научиться рисовать несложные рисунки может человек, даже не имеющий способностей в изобразительном искусстве, а уроков по этой теме в сети хватает. Например, здесь один из них. Подогревает интерес к пиксельной графике и то, что с каждым днем появляется все больше настоящих шедевров — энтузиасты этого направления рисуют целые картины, отличительной особенностью которых является огромное количество мелких деталей.

Одна из самых известных студий в сфере пиксельного дизайна, студия eBoy, создала свое видение известных мегаполисов, на данном рисунке изображен Токио, согласитесь, неправда ли завораживает? (Картинка кликабельна.)

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

Мое мнение — я сомневаюсь, что пиксельная графика исчезнет совершенно, вполне вероятно мода на данный вид дизайна и пройдет в скором будущем, однако останутся как минимум энтузиасты, такой себе андеграунд. Также вполне возможно пиксел-арт просто-напросто перерастет в вид искусства, все-таки, довольно интересные картины получаются при использовании данного вида дизайна. Но не будем раньше времени хоронить пиксельную графику, один раз в своей статье это сделал небезызвестный Артемий Лебедев после появления true color, а это было в далеком 2001 году.

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. В поисках вдохновения: Pixel Art

Какими должны быть визитки у веб-дизайнера? Этим вопросом я озадачился недавно, когда рисовал свои собственные. Такими же, как у всех? Или обязательно чтобы побольше красок и графики? Дизайнерские же, креатив должен взрывать.

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

Основными требованиями к визиткам были прямая ассоциация с вебом, или чтобы человек не задавал лишних вопросов, получая визитку в руки (в случае, если он не совсем в теме).

Модный нынче hand-made, зелёные завитушки и гранжевый стиль сразу же были отставлены в сторону, так как это идеи перенесённые из жизни на экран, а хотелось наоборот. Минимализм тоже не прошёл отборочный тур.

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

А решение, как обычно, лежало на поверхности долгое время, мозолило глаза — такое модное, всем знакомое (кто же его не крутил просто так, играя?) и часто используемое на блогах анимированное 3D-облако тегов. Просто, и раскрыло тему на 100%.

А дальше уже никому не интересные технические моменты и рождение формы посредством иллюстратора.

Результат:

Уже проверено. Работает.

* * *

Интересное в блогах:

Редизайн Байнета — новый социально-сетевой проект для дизайнеров. Инвестируем в блог или как потратить 100$. Всё крутится и летает на CSS3.

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Отчёт по эксперименту с CSS-галереями
2. Психология пользователей и оптимизация изображений для веб
3. Новый пункт в ТЗ

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

Достаточно открыть практически любой сайт обычной компании, и первое, что бросится в глаза на главной странице — это заголовок: «Добро пожаловать на сайт компании „Маленькая Но Очень Гордая Межгалактическая Корпорация“». Примерно так. Плюс, многие (продвинутые), еще ставят восклицательные знаки. Чтобы «эффектнее» было, наверное…

Если заглянуть в результаты поиска, то мы увидим примерно такое положение дел — google, yandex.

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

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

Зато однозначно можно сказать кто виноват: дизайнеры, веб-студии, маркетологи и контент-менеджеры. Клиент в последнюю очередь. Именно исполнители не объяснили, не захотели объяснить (или сами не знали :) всей важности первого впечатления от сайта, имиджа или влияния заголовка на главной на ту же поисковую оптимизацию.

Теперь вопрос для владельцев сайтов: чем непривлекателен такой заголовок для главной страницы — «Компания „Маленькая Но Очень Гордая Межгалактическая Корпорация“ — основной поставщик антигравитационных двигателей для кораблей класса „линкор“ за пределами Солнечной системы»?

Ведь очевидно, что для посетителей он намного информативнее и полезней, чем стандартное унылое шаблонное приветствие. Так почему не создать настроение на самом главном заголовке вашего сайта? Или желание «сделать как у всех» именно то, что нужно индивидуальности позиционирования каждой компании?

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

* * *

Интересное в сети:

Как заставить посетителей подписаться на RSS. Эффект liquid image — потрясная штуковина на JavaScript. Тест на узнаваемость для логотипа.

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Новый пункт в ТЗ
2. Спорное оформление вкладок и кнопок
3. Элементы входных страниц

Есть один вопрос, поиском ответа на который я занимаюсь уже некоторое время: «Стоит ли подчеркивать ссылки, когда они стилизованы под меню-закладки или кнопки?» То есть, тот самый текст, который пишется на элементах управления.

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

Ход мыслей

Чтобы всем стало понятно, о чём идёт речь, небольшой пример оформления кнопки.

Моё мнение — подчёркнутый текст вызывает ощущение, что текст и фон на кнопке не единый элемент. Неподчёркнутые ссылки, в этом плане, смотрятся более цельно, а не как текстовая ссылка с фоном-подложкой.

И, как это часто бывает, одни неправильные решения влекут за собой другие:

1. часто не соблюдаются принципы нескольких состояний для кнопки (фона): обычное, при наведении и активное (как в примере с неправильной кнопкой). Они просто отсутствуют.

2. область реагирования значительно меньше чем размер элемента:

В принципе, всё что описано выше, также относится и к оформлению меню-закладок. В них тоже часто встречаются точно такие же ошибки.

Кроме того, у вкладок ещё может быть одно состояние — открытая, указывающая на текущую страницу.

Надуманная проблема?

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

Ну а это первое, что попалось мне на глаза:

Пример оформления закладок на сайте sape.ru

Пример оформления закладок на сайте nytimes.com

Открытый вопрос

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

А ваше мнение?

* * *

Сканер блогов:

Маленькая сага про кавычки «ёлочкой». Продвижение сайтов, часть 5-я.

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Кроссбраузерное выравнивание кнопок-изображений в формах
2. Прокачиваем шаблоны от 960.gs
3. Психология пользователей и оптимизация изображений для веб

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

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

Почему-то, даже само понятие «доступность» (accessibility) вызывает у дизайнеров и разработчиков ассоциации с дополнительными затратами времени и сил при создании сайта. Хотя в реалиях, это всего лишь правило не применять в дизайне цвета близкие по насыщенности и контрасту.

По статистике, нарушение цветовосприятия наблюдается до 8% от всего населения у мужчин и до 0,5% у женщин, а это довольна значительная чать людей (и пользователей), которым дизайнер может усложнить жизнь.

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

Изображения взяты с сайта richmondeye.com.

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

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

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

Для тех, кому интересно узнать о проблеме ещё, неплохая подборка статей о дальтонизме и веб-дизайне есть на сайте antula.ru (меню статей слева).

Немного рассуждений

Теперь давайте подробнее остановимся на том, должен ли бизнес-проект учитывать таких пользователей. За примером далеко ходить не нужно — возьмём «единственный» белорусский портал tut.by с посещаемостью около 400 000 человек в сутки.

8,5% от 400 000 — это 34 000 посетителей с изменённым цветовосприятием в сутки. Да, я взял проценты по максимуму, хотя на деле эта цифра может оказаться значительно меньше. Будем теоретиками-максималистами.

Простая задача — чтение новостей на портале. Например этой новости. Из пяти неконтрастных ссылок (это я уж сужу по себе), только три из них подчёркнуты. Следовательно, неподчёркнутые линки имеют шансы быть просто незамеченными 34 000 пользователей. Не всеми конечно, но пусть даже половиной из них — 17 000. Если бы это была контекстная реклама, можно было бы считать уже совсем не теоретические убытки.

И таких примеров на самом деле масса, можно найти на многих порталах. Просто первое, что попалось мне на глаза.

Вывод только один: пренебрежение общепринятыми стандартами может не совсем удачно сказываться на ведении электронного бизнеса.

* * *

Сканер блогов:

5 идей полезных WordPress плагинов. Может и у вас какая-нибудь идейка завалялась? 13 выпуск блог-шоу с полезными материалами по продвижению сайтов. 15 отличных альтернатив расширениям Firefox для решения регулярных SEO-задач.

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Дизайн 911: обзор стартапа
2. Элементы входных страниц
3. Психология пользователей и оптимизация изображений для веб

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

Для начала, если вы не представляете себе что это такое, посетите сайт-пионер и законодатель бескликовой моды dontclick.it и получите по пальцам наберитесь впечатлений.

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

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

Позитив

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

Негатив

• Непривычно. Первое впечатление о сайтах, которое можно даже назвать неудобно, хотя затратив на интерфейс одного из них минут 10 можно отлично приспособиться и сориентироваться в работе.
• На сайте появляются «запретные зоны», попадание в которые курсором грозит нежелательными событиями.
• Постоянное преследование курсора (конкретно в этих двух случаях) может не только радовать, но и раздражать.

Сложные впечатления

Несмотря на то, что путешествие по этим сайтам было непривычно-увлекательным, у меня постоянно появлялись предупреждения из-за кликов (привычка :). Были и случайные переходы по страницам, из-за того, что случайно не туда попадал или не успевал отреагировать на

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

Сейчас есть еще много спорных моментов, как должны вести себя ссылки в тексте, должна ли быть задержка на события, как должны реагировать формы на фокус и его потерю. Еще один жёсткий момент — постоянный вывод предупреждений при клике. Это раздражает.

Единственный закрепившийся в сознании элемент — стрелка, которая появляется при наведении на функциональный элементы, для подтверждения выполнения действия.

Ещё, недавно натолкнулся на анонс будущего бескликового сайта dontclick.ru, тестовые элементы управления которого реализованы уже на JavaScript. Протестируйте, это интересно.

Все подходы не новые, их описание можно найти на том же dontclick.it, но есть надежда на то, что будущий проект избавится от чрезмерных графических наворотов и будет возможность протестировать бескликовый сайт с более привычной структурой и внешним видом. Подождём, перед тем как выносить окончательный приговор.

Во всяком случае, новый сайт обещает быть интересным.

А пока хотелось бы пообщаться с вами в комментариях по поводу применимости и перспектив бескликовой технологии в веб.

* * *

Сканер блогов:

Очередной «позитивный разгром» блога от Сергея М. Хотите обзор своего блога? Заказывайте! 10 SEO-плагинов для Firefox. Прототипирование в XHTML. Плюсы и минусы.

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Дизайн 911: обзор стартапа
2. Участвую в конкурсе WebHiTech!
3. Устаревшие приёмы в веб-дизайне

На мысль поэкспериментировать со способом оптимизации изображений для сети, натолкнул отчёт моих коллег по работе, побывавших на usability-семинаре Джеффа Джонсона в рамках конференции UserExperience '08.

Наверное, многие замечали, что изображения на страницах грузятся по-разному. Одни загружаются построчно, и создаётся впечатление что они грузятся сверху-вниз. Другие же грузятся сразу полным размером, но в «размытом» состоянии и постепенно детализируются.

Первый вариант получается, когда изображения просто сохраняются, а второй, когда при сохранении используется «прогрессивная развёртка». Какой способ сохранения лучше?

Эксперимент

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

Ссылки: тест1 и тест2.

Результаты, которые я получил разослав ссылки своим подопытным кроликам друзьям и коллегам:

• первый вариант — 9 человек;
• второй вариант — 1 человек;
• никакой вариант — 2 человека (буржуи на толстых каналах, у которых картинки грузились предательски быстро);
• «задолбал ты со своими опытами!» — 2 человека.

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

Военная тайна

Теперь раскрою секрет: оба изображения загружались одинаковое время, так как (в идеальных условиях) ваша скорость соединения была постоянной, а размер обеих картинок один и тот же — 290,8 KB. В первом случае изображение было сохранено с прогрессивной развёрткой, во втором — без.

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

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

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

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

Как

Теперь о мелочах, как сохранять.

Для этого достаточно просто поставить по галочке в диалоговом окне Save For Web & Devices в Photoshop для каждого формата:

Диалоговое окно при сохранении в формат JPEG.

Это для JPEG. Для форматов GIF и PNG есть аналог прогрессивной развёртки — чересстрочная развёртка, которая, по сути, даёт тот же результат.

Диалоговое окно при сохранении в формат GIF.

Диалоговое окно при сохранении в формат PNG.

Вроде бы полезная мелочь, о которой должны знать все, кто хоть раз открывал в самоучителе по Photoshop главу «Оптимизация изображений для Web». Но тем не менее не все используют. Да и я тоже, не всегда.

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

Что? Где? Когда?

Собственно, когда стоит и когда не стоит использовать.

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

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

Минусом может послужить то, что развёртка слегка увеличивает размер изображения, но я не заметил существенной разницы. Да и «быстрая» загрузка компенсирует пару лишних килобайт.

* * *

Сканер блогов:

Мужское и женское usability-начало на примере сайта Билайн :) Учитывайте пользователей с ограниченными возможностями при создании сайта.

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Автоматизация рутинной работы в Photoshop
2. Секреты Photoshop для мастеров, часть 2
3. Спорное оформление вкладок и кнопок

Не важно, занимаетесь ли вы проектированием пользовательских интерфейсов, разумных пылесосов-интеллектуалов или пластиковой мебели в футуристическом стиле. Есть некоторые правила, которым в идеальном варианте должен соответствовать любой дизайн.

Это не check-лист разработчика и не свод правил по разработке дизайна, просто несколько умных мыслей которые стоит принять во внимание. Составлял список не я, я нашёл его на сайте Университета Северной Каролины.

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

Принципы

1. Равенство в использовании

Дизайн должен быть предназначен для использования людьми с разными физическими возможностями.

• Обеспечьте равные условия использования продукта для всех потребителей, всегда, когда это возможно, если невозможно создайте эквивалент.
• Избегайте выделения какой-либо группы пользователей или навешивания ярлыков.
• Неприкосновенность личной жизни, безопасность и надежность должны быть доступны всем пользователям.
• Делайте дизайн привлекательным для всех потребителей.

2. Гибкость в использовании

Дизайн должен соответствовать множеству разнообразных индивидуальных предпочтений и способностей.

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

3. Простой и интуитивно понятный дизайн

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

• Устраните ненужную сложность.
• Согласуйте дизайн с пользовательскими ожиданиями и интуицией.
• Учитывайте различные уровни грамотности и языковых знаний.
• Располагайте информацию с учетом её важности.
• Обеспечьте эффективные подсказки и ответную реакцию во время и после выполнения задачи.

4. Легко воспринимаемая информация

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

• Используйте различные способы (визуальные, вербальные, осязательные) для многократного представления важной информации.
• Отделяйте главную информацию от второстепенной.
• Самая важная информация должна быть представлена максимально понятно.
• Отделяйте элементы так, чтобы их можно было легко описать (облегчите процесс понимания инструкций и указаний).
• Обеспечьте совместимость с различными технологиями и средствами, которые используют люди с ограниченными возможностями.

5. Допустимость ошибки

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

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

6. Низкое физическое усилие

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

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

7. Размер и пространство для доступа и использования

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

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

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

Ещё раз напомню, источник здесь, перевод свободный, мысли мои.

* * *

Сканер блогов:

Как сберечь здоровье работая дома. Usability-презентация Юрия Ветрова с WUD-2008.

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Смена дизайна по временам года
2. 111 CSS-галерей и сайтов для раскрутки дизайна
3. Спорное оформление вкладок и кнопок

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

Насколько удачны эти подходы к дизайну, судить вам. Я же хочу поделиться несколькими ссылками из закладок на довольно интересные примеры сайтов в 3D-стиле.

Для наглядности и некоторой классификации, сгруппирую их по общим признакам.

3D элементы

Этот пункт скорее нужен для полноты описания, чем для реальных примеров. Сейчас с псевдо 3D элементами можно столкнуться практически на каждом сайте: вебдванольные объёмные кнопки, иконки, стикеры (плюс блики, тени и отражения) всё ещё популярны и нескоро уступят место другим модным тенденциям. Здесь я даже обойдусь без ссылок на примеры, почти:

Чистый стиль Web 2.0 на сайтe apple.com.

Подобные сайты вы без труда можете найти в любой из CSS-галерей.

Но все эти блики, тени и наложения лишь слегка имитируют трёхмерность на страницах, не особо влияя на наше представление о плоском пространстве в мониторе.

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

Банка с живительным цитрусовым напитком с сайта citrus-seo.com.

Тридэшная птичка-колибри с сайта colibri-cms.cz.

На мой взгляд, современно и довольно интересно.

3D навигация

Особенно смелые экспериментаторы уходят гораздо дальше простой псевдотрёхмерности и объёмных рисунков. Достаточно вспомнить про плагин wp-cumulus или посмотреть меню Neumont University:

Внешний вид плагина wp-cumulus для WordPress.

Навигационное меню на сайте neumont.edu.

Простое анимированное масштабирование элементов и изменение z-index, добавляет интересные эффекты и оживляет сайт.

3D дизайн

К 3D дизайну я отнесу сайты с интересными приёмами в макетах, нестандартными направлениями плоскостей, иллюзии трёхмерности... В общем, смотрите сами:

Сайт basilgloo.com.

Нестандартный дизайн acko.net.

В дизайне такого типа главная, конечно же, идея и ещё умение показать плоский контент в связке с изометрической проекцией. Жаль что подобные сайты встречаются очень редко.

3D madness

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

3D трансформации сайта bestiario.org.

Весёлые зверушки(?) на дереве ecodazoo.com.

Город будущего от plazmalab.com.

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

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

* * *

Сканер блогов:

Плюсы в сокращении с работы. Как подтолкнуть посетителя к регистрации? Обзор CMS Made Simple. Антикризисное письмо :)

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Устаревшие приёмы в веб-дизайне