How to create a new widget(s)?

Available widget designs you can find here to build on, adapt to your local solution and/or take inspiration from: Media Library

For a new design, start by filling in the usual Agency Form like you would do for any other design request. To help the designers understand the widget(s) you need, please try to be as explanatory as possible, providing:

• Context: The copy which is next to the visual (so that the designer understands the context and relation to the copy)
• Information about the solution or the functionality you want to show
• Actual visuals of the software (if you have them) and mark the area or functionalities you’d like to present in the widget(s). Or use drawings made by you or examples from competitors
• If you have already selected a certain people image out of the library, please share as well.
• Add anything that can help the team understand your request as best as possible.             

Example of a briefing to create a widget:

Design Brief: Widget Design

Project Title: Widget Design for [Solution Name/Block]

Objective: Create a visually appealing widget that enhances user engagement and functionality on our platform.

Copy appearing next to visual: Include the copy which will be placed next to the image with widget.

Visuals: Please refer to the attached screenshots of our current software interface for context. If unavailable, use examples from competitors like [Competitor Name] to illustrate the desired style.

Functionality Overview: The widget should display real-time data on [specific functionality or solution]. It should be intuitive, scalable, and integrate seamlessly with existing UI components.

People Image: If a specific image from our library is selected, provide it separately for integration purposes.

Additional Notes: Focus on a clean design that aligns with our brand guidelines. Use contrasting colours for readability and ensure mobile responsiveness.

Briefing examples of Visuals

Existing widgets

We have already prepared some widget designs in Figma. If you would like to change the language of the displayed text or any other detail, please also fill in the Agency Form. In this form, please provide details of which widget you would like to have translated into your local language and any other modifications required.

Examples Mysdworx

Hero image:

Content block: