• 4 минуты чтения

• Инструменты, Дизайн, Ресурсы, Контент-стратегия

• Поделись Твиттер, Линкедин

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

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

Дальнейшее чтение на SmashingMag:

• Оптимизация дизайна для быстрого тестирования прототипа
• Контент-первое прототипирование
• Прототипирование контента в адаптивном веб-дизайне
• Возрождение прототипов пользовательского интерфейса

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

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

Другим инструментом является Gremlins.js, библиотека тестирования обезьян, которая помогает вам проверить надежность веб-приложений, «выпустив на волю орду недисциплинированных гремлинов», т.е. она генерирует случайные строки данных и вводит их повсюду, чтобы проверить, как веб-сайт реагирует. . Если вы хотите провести более контролируемое тестирование, вы также можете использовать букмарклет Prefill Forms, который позволяет заранее определить набор шаблонов для отправки в формы для проверки его устойчивости.

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

Вы можете определить динамические переменные для своего контента и быстро «подключить» их, чтобы убедиться, что макет не сломается при изменении языка. Для Sketch вы также можете использовать плагины для создания контента, начиная от импорта финансовых данных и заканчивая случайными изображениями профилей пользователей. А если вы используете Photoshop, есть способы вставить содержимое в Photoshop из текстового файла. Кроме того, Craft — это бесплатный набор плагинов для Sketch и Photoshop, который также позволяет вам проектировать с использованием реальных данных.

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

(вф, см)