Дизайн по аналогии

Часто клиент может выразить свои пожелания, только сравнивая желаемый ресурс с уже существующими. Это может касаться как самой концепции ресурса — «MySpace, но для сектора B2B», так и некоторых деталей — «Логин должен быть таким же как на Gmail».

Это свойственно не только дизайну, если человек не очень хорошо знает язык, на котором говорит, то вместо прямого указания на предмет, можно услышать причудливые и многословные описания. В спецификациях составленных клиентами часто можно встретить забавные описания, когда они хотят сказать «база данных зарегистрированных пользователей с отчетами X, Y и Z» или «JavaScript меню, которое деградирует в отформатированные с помощью CSS списки».

Аналогии и сравнения отличный способ придать четкий облик расплывчатым концепциям и пожеланиям. ... Читать дальше »

Вопросы на которые нужно ответить перед редизайном

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

1. Какова цель редизайна?

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

2. Вы хотите внести небольшие изменения или переделать все?

Очевидно что средства и время затрачиваемые на работу будут в значительной степени зависеть от того ... Читать дальше »

23 важных вывода из результатов eye-tracking исследований

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

1. Текст привлекает внимание прежде чем графика.
   Несмотря на то, что вы можете думать иначе, пользователь в первую очередь обращает внимание на текст². Большинство пользователей приходят на сайт в поисках информации, а не изображений, п ... Читать дальше »

100% Easy-2-Read

Oliver Reichenstein, 6 мая 2007

Большинство сайтов переполнены мелким текстом, который больно читать. Почему? Нет никаких причин для втискивания всей информации на одном экране, это просто глупая коллективная ошибка, которая берет начало во времена, когда мониторы были очень маленькими.

Не говорите нам, что можно настроить размер шрифта

Мы не хотим изменять настройки браузера каждый раз, когда заходим на сайт!

Не говорите нам, что заполненная страница лучше смотрится

Перегруженные сайты выглядят ужасно. Заполнение страницы под завязку не способствует юзабилити. Вы нагружаете нас хламом только из-за своей лени. Мы хотим, чтобы вы подумали и выбрали только то, что действительно важно, никто не хочет делать работу за&nbs ... Читать дальше »

Элементы веб-типографики

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

Совет 1: Не ограничивайте себя в выборе размера шрифта

Поначалу мы были ограничены 7 размерами шрифта, которые задавались через тег <font>, к счастью, сейчас CSS дает нам гораздо лучший контроль над шрифтом.

... Читать дальше »

Учитесь писать

Призываю всех дизайнеров: учитесь писать!

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

Сейчас очень модно, говорить «маркетинг это убеждение» или «дизайн передает идеи», но как это может быть правдой, если дизайнеры практически пренебрегают работой с текстом?

Впечатления пользователя это не только визуальный дизайн.

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

Давайте посмотрим на всеми любимый пр ... Читать дальше »

Читабельность

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

1. Не используйте слишком много различных размеров шрифта¹
2. Используйте рубленые шрифты для основного текста²
3. Не используйте много различных гарнитур³
4. Акценты⁴
5. Выравнивание⁵
6. Контраст⁶
7. Использование прописных букв⁷
8. Пространство⁸
9. Размеры текстовых блоков⁹

Не используйте слишком много различ ... Читать дальше »

Оформление гиперссылок

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

Правила

1. Текстовые гиперссылки должны хорошо выделяться на фоне остального текста.
2. Наведение мышки на ссылку должно вызывать эффект подсветки.
3. Текст ссылки должен быть, по возможности коротким, но достаточно длинным, чтобы четко описать следующее:
• куда вы попадете.
• что увидите
• что произойдет
4. Гиперссылки на различные документы должны четко различаться.
5. Гиперссылки вызывающие неожиданные для пользователя действия должны об этом предупреждать, например:
< ... Читать дальше »

9 советов по оформлению текста для веб

Redd Horrocks, 15 февраля 2009

95% пользователей не читают 80% вашего контента, к таким выводам пришли разработчики CWsites¹. Статистика как видите не самая хорошая. Как же улучшать восприятие контента, донести его до как можно большего числа пользователей?

1. Разбивайте текст на небольшие параграфы

Чтобы упростить чтение, разбивайте большие блоки текста на параграфы. За компьютером читатель редко концентрируется исключительно на тексте, обычно, параллельно работает IM клиент, открыты блоги, кричат дети. Если текст разбит на параграфы, читате ... Читать дальше »

Совместимость сайтов с IE8

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

Пару дней назад довелось посетить сайт с замечательным буллитом в меню разделов, после нескольких безрезультатных попыток, развернуть это дерево, я понял, что никогда не нужно использовать этот маркер для простых списков. Не прошло и пары дней как я снова попался на эту неоднозначность, причем сайт назывался «Usability Body of Knowledge», хорошо хоть в этот раз я уже ожидал подвоха.

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

Пользовательские поля в WordPress

В продолжение статьи Custom Fields Hacks For WordPress¹ хочу поделиться своим опытом использования пользовательских полей поста.

Автор и оригинал поста

Не секрет, что на сайте в основном опубликованы переводы статей, чтобы удобно указать автора и дать ссылку на оригинал я использую дополнительные поля author и original.

Работа с этими полями выделена в плагин dfmAuthorOriginal.php

Автора подменяем с помощью фильтра:

add_filter
		... 
		
			Читать дальше »
		
	

Разгоняем jQuery. Часть 1

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

Кеширование

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

Цепочка вызовов:

$('#id-of-element').attr('data-value', 'data-for-element'
		... 
		
			Читать дальше »
		
	

Делаем компактные формы более доступными

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

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

Обычно для этого нужно присвоить атрибуту value элемента input значение имени поля. Использую немного JavaScript и серверных скриптов можно гарантировать, что пользователь не подтвердит форму со значениями «Логин» и «Пароль». Чтобы скрыть пароль от посторонних глаз, в поле для его ввода символы заменяются на звездочки и точки, и это не позволяет нам помес ... Читать дальше »

Делаем компактные формы более доступными

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

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

Обычно для этого нужно присвоить атрибуту value элемента input значение имени поля. Использую немного JavaScript и серверных скриптов можно гарантировать, что пользователь не подтвердит форму со значениями «Логин» и «Пароль». Чтобы скрыть пароль от посторонних глаз, в поле для его ввода символы заменяются на звездочки и точки, и это не позволяет нам помес ... Читать дальше »

5 юзабилити кошмаров на каждый день

Евгений, 12 августа 2009

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

1. Прозрачный фон до загрузки картинки

Пример тут не самый подходящий, но специально искать не хотелось.

Т ... Читать дальше »

5 полезных утилит

Евгений, 24 августа 2009

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

Alax.Info NTFS Links¹

Упрощает создание жестких² и символических³ NTFS ссылок, которые во многих случаях предпочтительней ярлыков.

... Читать дальше »