{"id":2795,"date":"2021-01-25T17:07:48","date_gmt":"2021-01-25T17:07:48","guid":{"rendered":"http:\/\/desres20.netornot.at\/?p=2795"},"modified":"2021-07-08T15:10:56","modified_gmt":"2021-07-08T15:10:56","slug":"process-for-vr-ui-design","status":"publish","type":"post","link":"http:\/\/desres20.netornot.at\/?p=2795","title":{"rendered":"Process for VR UI design"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

While most designers have figured out their workflow for designing mobile apps, processes for designing VR interfaces are yet to be defined. When the first VR app design project came through our door, the logical first step was for us to devise a process.<\/p>\n\n\n\n

Traditional workflows, new territory<\/h2>\n\n\n\n

Interface-based VR apps work according to the same basic dynamic as traditional apps: Users interact with an interface that helps them navigate pages. We\u2019re simplifying here, but just keep this in mind for now.<\/p>\n\n\n\n

Given the similarity to traditional apps, the tried-and-tested mobile app workflows that designers have spent years refining won\u2019t go to waste and can be used to craft VR UIs.<\/p>\n\n\n\n

1. Wireframes<\/h2>\n\n\n\n

Go through rapid iterations, defining the interactions and general layout.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

2. Visual design<\/h2>\n\n\n\n

At this stage, the features and interactions have been approved. Brand guidelines are now applied to the wireframes, and a beautiful interface is crafted.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

3. Blueprint<\/h2>\n\n\n\n

Here, we\u2019ll organize screens into flows, drawing links between screens and describing the interactions for each screen. We call this the app\u2019s blueprint, and it will be used as the main reference for developers working on the project.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Tools<\/h2>\n\n\n\n

Before we get started with the walkthrough, here are the tools we\u2019ll need:<\/p>\n\n\n\n