Moving to Drupal 10
If you’re on Drupal 7, 8 or 9, you’ll need to upgrade to Drupal 10 at some stage to keep your website secure and up-to-date. See Drupal 7 End-of-Life (EOL) - 6 Options to Consider for more information.
Upgrading your site to Drupal 10 is also a good time to uplift other areas of your site, including your site’s visual design. This is where rapid prototyping comes in, as a common way to explore different design options. In fact, some form of rapid prototyping is an essential part of human-centred design.
In this insight, we look at rapid prototyping and how you can use for rapid prototyping in Drupal.
What is rapid prototyping?
Rapid prototyping involves quickly creating low-fidelity, low-cost web designs and layouts for testing and design iteration. This is in contrast to ‘normal’ prototyping, where more fully formed designs or functional features are generally built with more time and cost.
Rapid prototypes often streamline the website design process, helping to create short cycles of design-test-iterate in a user/human-centred design process.
Popular tools for traditional website rapid prototyping include , and .
UX prototyping and functional prototyping
User experience (UX) prototyping creates interactive low-fidelity or high-fidelity mock web pages that focus on the visual design and end user journey to find information and overall experience. Functional prototyping simulates the website functionality and focuses on the technical experience including information architecture and interactive features and elements.
The benefits of rapid prototyping
Rapid prototyping offers many benefits for web design and development. Some of the benefits include:
- Ability to quickly and easily iterate designs
- Ability to user test several designs without having to build the site
- Makes it easy to change/pivot the design direction before the build starts
- Enables easy collaboration
- Creates a better end user experience — for site visitors and content administrators
- Reduced costs — identify issues early and fix them before the website build
- Faster time-to-market
The drawbacks of traditional rapid prototyping
While tools like and can be powerful, they can also be time-consuming. Plus, once you’ve got your designs finalised in one of these tools, you then need to actually build the designs. The visual design and the functional Drupal build are distinctly separate exercises, with the design preceding the functional build.
The cost, time and pain of translating designs to build is often very high. And sometimes, once you start building, you discover what looks great in design is very difficult (and expensive) to bring to life in the website build.
Rapid UX and functional prototyping with CivicTheme
With , you can use the final built components in Drupal for rapid prototyping. allows you to quickly and easily create rapid prototypes, focusing on UX prototyping and/or functional prototyping, because every visual component in the atomic CivicTheme Figma is available out-of-the-box, pixel perfect with no coding required. This means high fidelity rapid functional prototypes can be built pixel perfect to visual designs, ready for launch. The result is faster testing and build times since the testing is done on final components, skipping the prototype-to-build step.
Of course any tweaks or enhancements can also be quickly identified as well. Since the testing is done on the exact component users interact with, not an approximation, higher fidelity feedback is received to make finer adjustments quickly.
is a design system and Drupal 10 ready theme with over 50 user interface (UI) components out-of-the-box. Part of the CivicTheme ecosystem is a Figma design . Figma and CivicTheme work together to provide a library of pre-configured components that allows you to assemble high fidelity UX, fast. The whole ecosystem is also open source, so you can do it yourself or use Salsa’s Figma to Drupal services. View the CivicTheme component library on
Design in Figma and build in Drupal/CivicTheme, knowing your designs can be quickly and easily reproduced in Drupal 10 CMS.
Next steps
Upgrading to Drupal 10 is an important step to keep your website secure and up-to-date. Upgrading to Drupal 10 also gives you an opportunity to explore new design ideas and uplift the user experience. One way to achieve this is through rapid prototyping. Rapid prototyping allows you to quickly create designs and layouts to test and refine before implementing them on your website.
With , you can create rapid prototypes directly from Figma to your CMS (Drupal), streamlining the design process and eliminating the need for extra development work. CivicTheme offers both UX and functional prototyping, so you can create designs/wireframes and simulate website functionality.