UI Online: make your digital or paper mockups user-friendly

UI Online, the template for building online mockups as a team

Do you want to create a webpage or a website? First of all, you need to start by building a mockup, and the UI Online template is the ideal way to do this. As a team, use all the visual features of Board, Klaxoon’s whiteboard. Effectively design every part of your website mockup in one place, whether your team is meeting in person or working remotely, before moving on to production.

Depending on what you want to display and the messages you want to convey, the template lets you work as a team. Start by defining the website architecture:

• Structure
• Content
• Positioning of components, etc. 

Then, by determining the main features, fine-tune the texts, visuals, videos, and call-to-action buttons, discussing live or asynchronously on Klaxoon’s whiteboard. The mockup evolves at the team’s pace.

The UI Online template is extremely useful for building website architecture, or for application design. It can also be used to build other types of visuals like newspapers, newsletters, promotional leaflets, or any other paper materials.

Why create an online UI-friendly mockup before starting production?

When it comes to user interfaces (UI), online wireframing is essential. A wireframe outlines the structure or framework of a website. This functional mockup represents the future interface of your mobile applications, websites, and software; in other words, the UI design.

Thanks to Klaxoon’s highly scalable whiteboard and the option to import any type of content, you can easily build a website mockup as a team. This will help you visualize the page layout, the information architecture, the user journeys, and the essential features. The aim is to validate the user interface and user experience concepts, before passing the project on to the developers.

You can use your online mockup to optimize an interface design with functional specifications. Show the tool’s future interface, full-scale, to stakeholders and thus agree on the website or mobile app before development and identify any errors or problems.

It makes teamwork easy and because it’s online, it can be shared with everyone, at any time. Designing a mockup, even for a paper-based project, will save you time and money. It’s quick to produce, cost-effective in terms of resources, and flexible. Finally, it reduces negative feedback in the development or launch phase.

How to make a mockup with Klaxoon’s UI Online template

Prepare the Board with the project description or name, date, and version if applicable. Invite your team members to the whiteboard and get started!

Now you can start co-creating your mockup. First, determine the page structure by choosing where you will place text blocks, visuals, etc. and what size they will be. Use the Tool Box area, and then jump into the box below. You can organize and change the size of blocks however you want, and copy and paste them to create as many pages as you need. The color key helps you to clearly see and sort the ideas you send to the whiteboard.

Then, either in a sync-up meeting or with everyone working at their own pace, discuss the construction. Give your feedback in red ideas, and use Poll Questions to easily make decisions together. Everyone can see the answers on the Board, even if you’re working asynchronously. 

To make things easier, you can use the emoticons in the toolbox (“Page approved”, “Nearly there”, “No agreement”) to see at a glance whether the page is validated by the team.

When the structure is ready, invite the team members responsible for the content to continue building your mockup. Use the same communication tools, such as the Question tool to ask people questions directly if you need their feedback quickly. Your production gradually takes shape in front of your eyes thanks to your teamwork!