Чужие мысли

Использование паттернов в web-дизайне

An Introduction to Using Patterns in Web Designs
Автор: Ryan Singer
Источник: 37signals

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

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

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

Шаг 1. Составьте список бит

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

Вот список бит, из которых состоит страница «Моя учетная запись» в моем последнем проекте:

1. Информация о компании;
2. Страховая информация о компании;
3. Информация о текущем пользователе;
4. Другие пользователи той же компании;
5. Контактная информация;
6. Тарифный план;
7. Ссылка для изменения настроек поиска;
8. Дата создания учетной записи;
9. Люди редко смотрят или редактируют страховую информацию;
10. Любой пользователь может изменить любую информацию, кроме информации другого пользователя;
11. Наиболее вероятным действием является изменение пароля;
12. Люди могут прийти сюда, чтобы изменить настройки поиска (которые на самом деле меняются на другой странице);

Шаг 2. Выясните, как биты соотносятся друг с другом

Некоторые биты влияют друг на друга (например, 7 и 12), другие довольно независимы (1 и 9). Некоторые биты будут лучше работать в связке с другими, некоторые могут работать автономно. Разделите биты на группы с учетом того, как они влияют друг на друга (не отталкивайтесь от какой-либо концепции или графической идеи).

• A: 1, 10
• B: 2, 9, 10
• C: 3, 10, 11
• D: 4, 10
• E: 5
• F: 6, 10
• G: 7, 12
• H: 8

Давайте рассмотрим для примера C:

• (3) Информация о текущем пользователе
• (10) Любой пользователь может изменить любую информацию, кроме информации другого пользователя
• (11) Наиболее вероятным действием является изменение пароля

Пароль (11) является частью информации пользователя (3), которая может быть отредактирована (10).

Шаг 3. Расставьте приоритеты

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

Нет необходимости точно высчитывать приоритеты, достаточно разделить элементы на группы по важности:

• Самое главное – C, A, G, E
• Необходимо – B, D, F
• Желательно иметь – H

Шаг 4. Разработайте дизайн каждого элемента

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

Эскиз C:

Эскиз A:

Эскиз G:

Эскиз E:

Эскиз B (схематически показано, что информация будет показываться при клике на ссылку с помощью JavaScript):

Эскиз D (для каждого пользователя):

Эскиз F:

Эскиз H:

Шаг 5. Соедините части вместе

После того, как созданы эскизы всех элементов, необходимо соединить их вместе. Я выделяю две фазы. Сначала делается каркас:

Затем в каркас подставляются готовые эскизы элементов:

Шаг 6. Воплотите макет в реальность

Когда вы будете создавать реальную вещь, вы можете заметить, что некоторые вещи, казавшиеся приемлемыми на бумаге, на экране не смотрятся. В окончательном варианте я перенес блоки E, F, H из левой колонки в правую (это произошло безболезненно, так как все блоки независимы).

• 02.09.2007
• Категории: Переводы
• Комментарии: 5

---