Создание вайрфреймов сайтов: визуальное руководство по проектированию структуры, навигации и интерфейса. Прототипирование для веб и мобильных приложений.
Visual guide that represents the skeletal framework of a website
Макет сайта (wireframe), также известный как схема страницы или чертёж экрана, — это визуальное руководство, представляющее собой каркасную структуру веб-сайта. Термин «wireframe» заимствован из других областей, где каркас используется для отображения трёхмерной формы и объёма. Обычно в макете отсутствует типографский стиль, цвет или графика, поскольку основное внимание уделяется функциональности, поведению и приоритетности контента. Макеты также используются для прототипирования мобильных сайтов, компьютерных приложений или других продуктов с экранным интерфейсом, предполагающих взаимодействие человека с компьютером.
A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. The term wireframe is taken from other fields that use a skeletal framework to represent 3 dimensional shape and volume. The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content. Wireframes are also utilized for the prototyping of mobile sites, computer applications, or other screen based products that involve human computer interaction.
Элементы проволочных рамок
Скелетный план веб-сайта можно разделить на три компонента: информационная архитектура, дизайн навигации и дизайн интерфейса. Макет страницы объединяет эти компоненты, а вайрфрейминг отображает взаимосвязь между ними.
The skeleton plan of a website can be broken down into three components: information design, navigation design, and interface design. Page layout is where these components come together, while wireframing is what depicts the relationship between these components.
Информационный дизайн
Информационный дизайн — это представление информации, её размещение и расстановка приоритетов, способствующие пониманию. Информационный дизайн является областью дизайна пользовательского опыта, предназначенной для эффективного отображения информации с целью обеспечения ясной коммуникации. Для веб-сайтов информационные элементы должны быть организованы таким образом, чтобы соответствовать целям и задачам пользователя.
Information design is the presentation—placement and prioritization of information in a way that facilitates understanding. Information design is an area of user experience design, meant to display information effectively for clear communication. For websites, information elements should be arranged in a way that reflects the goals and tasks of the user.
Конструкция навигации
Навигационная система предоставляет набор элементов интерфейса, позволяющих пользователю переходить между страницами веб-сайта. Дизайн навигации должен отражать взаимосвязь между содержащимися в ней ссылками, чтобы пользователи понимали доступные им варианты навигации по сайту. Часто веб-сайты содержат несколько навигационных систем, таких как глобальная, локальная, вспомогательная, контекстная и сервисная навигация.
The navigation system provides a set of screen elements that allow the user to move page to page through the website. The navigation design should communicate the relationship between the links it contains so that users understand the options they have for navigating the site. Often, websites contain multiple navigation systems, such as a global navigation, local navigation, supplementary navigation, contextual navigation, and courtesy navigation.
Конструкция интерфейса
Дизайн пользовательского интерфейса включает выбор и расположение элементов интерфейса для обеспечения взаимодействия пользователей с функциональностью системы. Цель – максимально повысить удобство использования и эффективность. К распространенным элементам дизайна интерфейса относятся кнопки действий, текстовые поля, флажки, переключатели и выпадающие списки.
User interface design includes selecting and arranging interface elements to enable users to interact with the functionality of the system. The goal is to facilitate usability and efficiency as much as possible. Common elements found in interface design are action buttons, text fields, check boxes, radio buttons and drop down menus.