Articles

UX Article

Put on a happy CMS face: Storyblok's facial coding experiment reveals how AI is sparking joy 

matt-garrepy

The holidays are right around the corner, and if the newest version of <a href="https://www.drupal.org/" target="_blank" rel="noopener">Drupal</a> is on your wish list, you’re in for a treat.
December will usher in the highly anticipated launch of Drupal 10, the open source CMS platform’s first release since 2020. Many industry experts have been preparing for months, and at CMS Critic, we had an opportunity to hear from <a href="https://pantheon.io/" target="_blank" rel="noopener">Pantheon</a> and several digital agencies about the upcoming release—and what has them excited.
<h2>Improvements for PHP, Symfony, and JavaScript</h2>
“We can’t wait to work with a new and refined version of Drupal that bakes in upgraded versions for PHP, Symfony and uses more modern Javascript,” said <a href="https://www.linkedin.com/in/markwestuk/" target="_blank" rel="noopener">Mark West</a>, engineering manager with TPXimpact. “This will all make it even easier to develop large complex websites. Additionally, there are lots of improvements for admins and users too. These include a better authoring experience using CKEditor 5 and UX improvements in the new Claro admin theme.”
West, along with <a href="https://www.linkedin.com/in/volker-baisch-17a0b52/" target="_blank" rel="noopener">Volker Baisch</a>, managing director of the BitBase Group, were each happy to see the changes made to jQuery through the update.
“Reducing reliance on jQuery will make a big difference—jQuery was great at the time, but these days, it represents a bit of a hurdle to adopting modern Javascript like React.”
Baisch agreed. “For developers, the upgrade to PHP 8.2 and the removal of jQuery are major steps towards improved performance—even if it comes here and there with some additional work,” he said. “And the seamless upgrade from version 9 to 10 is a great relief.”
<h2>Evolving website UX and digital experiences</h2>
In addition to applauding specific, updated features that accompany the release, some experts looked even more broadly for what the future might look like for Drupal sites.
“This new Drupal version should enhance Drupal’s significant influence on the future of the web,” said <a href="https://www.linkedin.com/in/alexandra-garcia-domenech-02921573/?originalSubdomain=es" target="_blank" rel="noopener">Alexandra García Domenech</a>, manager CMS with Hiberus Digital Business. “Upcoming new features will take Drupal’s usability and adoption to a whole new level. Currently [Drupal] is used by 1 in 30 websites in the world, and our goal is to significantly increase this number. With Drupal 10, the transition from just a CMS to an Open Source Digital Experience Platform (DXP) will be very close to completion and will allow digital agencies to create better sites quickly.”
West also expressed excitement over Drupal’s enhancements for accessibility and internationalization.
“The support for better accessibility and internationalization will be very useful in the future, along with paving a path forward as a headless CMS taking an API first approach with better GraphQL support.”
<h2>A fond farewell to Internet Explorer</h2>
There’s no question that Internet Explorer—Microsoft’s legacy web browser—has been a thorn in the side of many SaaS platforms from an interoperability perspective. As Microsoft Edge supplants the retiring property, many platforms like Drupal are leaving it behind.
<a href="https://www.linkedin.com/in/scottlmassey/" target="_blank" rel="noopener">Scott Massey</a>, managing director of international markets at Pantheon, thinks this update to Drupal 10 is a noteworthy move for the CMS, one that will pay dividends around efficiency and performance.
“Removing support for Internet Explorer might not sound like the biggest change, but it will free up time spent working on legacy tech,” Massey said. “Because it does not have to look at backward compatibility with IE, Drupal 10 will require less time spent on outdated browsers.”
<h2>What’s next for Drupal?</h2>
While Drupal 10 is still fresh from the beta launchpad, Massey is already looking ahead—and sharing what he would like to see in the next release.
“I’d like a first-time user to have better choices in the look of their site from the start,” Massey said. “The theme marketplace has become inscrutable, and it’s a subtle barrier to entry for organizations who might choose Drupal for a proof of concept or a small site. I am hoping the project browser makes it easier for those new to Drupal to get a site launched first—then discover the amazing possibilities over time.”
Domenech echoed that sentiment. “For a newcomer to the Drupal community, it is often difficult to choose between a number of modules offering similar functionality. Another area for improvement would be a more intuitive rating system than the current one.”
<h2>Unwrapping a new release for the holidays</h2>
The anticipation for the new release is obvious, but experts also called attention to Drupal’s longstanding commitment to being an effective CMS authority.
“For me, Drupal remains one of the most powerful tools for organizations, not because of any particular new features (which are all well and good, keep them coming!), but because of its core data model,” Massey said. “I believe ‘the journey is the destination,’ and I have seen Drupal implementations that have helped companies better understand their organizational structure, data, content, and the interactions between all three. It is an unexpected and transformative by-product of carefully rethinking the CMS as the hub of how people communicate internally and externally. It’s part of the magic of Drupal that’s kept me around for over a decade now.”
With new features and enhanced functionality on the way, it is easy to see why users think Drupal 10 will make this a “December to remember.” We’ll be watching to see how Patheon and digital agencies around the globe leverage Drupal’s next wave of capabilities in 2023 and beyond, particularly as composable solutions continue to gain ground across the market.
<h2>About Pantheon</h2>
Pantheon is the platform for extraordinary websites, running sites in the cloud for customers including Stitch Fix, Okta, Home Depot, Pernod Ricard, and The Barack Obama Foundation. Modern organizations choose Pantheon to empower their digital teams to continuously optimize and innovate to deliver more engaging digital experiences. Using Pantheon’s WebOps platform, developers, marketers, and IT are empowered to work together to develop, test, and release website changes quickly and reliably, knowing their sites will remain stable and secure – even during the biggest traffic spikes.

What Do Industry Experts Expect for the Drupal 10 Launch? Here’s What They Told Us

mk-patterson

UXPin Merge Review: Sync Your Design Libraries with React Components in Git

cms-critic-staff

UXPin and Merge logos against a highway with merge sign

If you asked today’s web designers which wireframing or prototyping tool is best, you’re likely to get a few different answers. Well, maybe more than a few.As you might have guessed, there are plenty of choices out there: free tools, SaaS apps, and even some that aren’t purpose-built for the job (think <a target="_blank" href="https://www.microsoft.com/en-us/microsoft-365/powerpoint">PowerPoint</a>). With so many options to choose from, it may prove challenging to find a single tool that meets your needs.While most platforms offer similar features, few bring the entire design process into a unified experience. That’s where UXPin is changing the game. In this review, we’ll explore the benefits of their all-in-one wireframing and prototyping tool, which offers some slick, integrated capabilities – and is designed to work across every device.<h3>Wireframing and prototyping: what’s the difference?</h3>Building a website or mobile app without wireframes is like building a house without blueprints. Wireframes save significant time in the design process and help bring ideas and concepts into laser focus.But what exactly is a wireframe? Quite simply, it’s a low-fidelity “skeleton” of a website. Wireframes show the general layout of web pages, the elements on those pages, and the size and placement of those elements. Since it is meant to convey a website’s architecture, it is intentionally devoid of any colors or graphics.Wireframes are lightweight and fast to produce, allowing for ample design thinking, lean UX development, and iterative feedback. A lot of designers still start their wireframing on paper, sketching out digital components and entities in the most analog way.Prototypes, on the other hand, are medium-to-high fidelity views of a website or application. They offer more detail, showcasing visual elements such as colors, graphics, and font types. In essence, a prototype is a preview of what a working website or mobile application will look like to a user.<h3>A brief history of wireframes and prototypes</h3>Wireframes and prototypes have certainly been around the block. Wireframing has its roots in magazine mockups for galleys and layouts, while prototyping evolved from software product development with visual UI requirements – and a need for rapid testing and feedback.While wireframes are elemental in nature – using simple shapes and objects to detail the flow and structure – designers have often relied on different tools when moving into prototyping. The first ones emerged in the 1980s with <a target="_blank" href="https://www.adobe.com/products/illustrator.html">Adobe Illustrator</a>, <a target="_blank" href="https://www.adobe.com/products/photoshop.html">Photoshop</a>, and <a target="_blank" href="https://www.microsoft.com/en-us/microsoft-365/visio/flowchart-software/">Microsoft Visio</a>.But it wasn’t until IBM introduced RAD (Rapid Application Development) in the 90s that the concept of minimum viable prototypes (MVPs) took off – and so did the focus on design experience. By the early 2000s, <a target="_blank" href="https://www.omnigroup.com/omnigraffle/">Omnigraffle</a>, <a target="_blank" href="https://www.gliffy.com/">Gliffy</a>, and <a target="_blank" href="https://balsamiq.com/">Balsamiq</a> were changing the way designers think about wireframing and prototyping by giving them more options to choose from. By 2010, UXPin and other solutions were hitting the market. The rest, as they say, is history.<h3>What is UXPin?</h3>UXPin is a comprehensive cloud-based design prototyping tool that works on any operating system. It brings developers and designers together even if they use Mac and Windows – because UXPin is fully powered by the cloud.With UXPin, you can move seamlessly through every phase of your project – from low-fidelity wireframes to high-fidelity prototypes – with access to rich features like interactive elements and animations. In addition, UXPin allows you to add conditional interactions, variables, and expressions to get your prototypes closer to real, coded apps.One of the best things about UXPin is that it's designed with both individual designers and teams in mind. It's flexible enough for a freelancer working on their own – or a squad collaborating to develop new products or experiences. UXPin offers some dynamite capabilities for enterprise customers to manage their teams and libraries with advanced permissions, making it an awesome platform for an ecosystem of users.<h3>Features</h3>Components<img src="https://cmscritic.com/ms-content/uploads/2023/08/uxpin-components.jpg" />Components save you plenty of time by minimizing repetitive and tedious work – allowing you to reuse existing parts across your designs. A button, a footer, an icon, or even a cell in a table can be a Component. UXPin comes with a handy library of pre-made components, but it also allows you to create your own components. You can also share them across your projects through UXPin’s Design System Libraries.Built-in Design Libraries<img src="https://cmscritic.com/ms-content/uploads/2023/08/uxpin-expressions.jpg" />Apart from your own libraries, UXPin offers built-in iOS, Material Design, Bootstrap, Foundation, and User Flows libraries – each with interactive elements, colors, text styles, and icons.Design system libraries are the place for shared design patterns (such as colors, text styles, assets, and Components) that allow teams to build high quality, consistent prototypes. This empowers users to save time while keeping projects steadily on-brand. With DS libraries, you can also create a fully-documented Design System.Data For a lot of designers, Lorem Ipsum is still a go-to placeholder for text. Still, for some projects, Latin copy isn't preferable – even at the mockup stage.Another great feature of UXPin is that enables users to add real content to their wireframes and prototypes using the <a target="_blank" href="https://www.uxpin.com/studio/blog/replace-lorem-ipsum-with-real-data/">Data</a> feature. Upload JSON, CSV or URLs and demo a prototype that's even closer to the finished product. If you're early in the process and want to use filler for placement, UXPin also has a database of placeholder components, from mock names to dummy credit card numbers.One other notable feature is stock photography. Most platforms don't provide direct access to image libraries, which can be essential to developing a finished prototype. UXPin lets you upload photos directly from their partner, <a target="_blank" href="https://unsplash.com/">Unsplash</a>. This integration may seem like a small thing, but it can accelerate the entire design process from idea to execution by enabling users to work fluidly in a single, unified platform.<img src="https://cmscritic.com/ms-content/uploads/2023/08/uxoin-unsplash-integration.gif" />Make Your Designs Interactive Once you build the static version of your prototype, you can use states to add interactive elements such as text fields, checkboxes, and radio buttons.In UXPin, each element can have several states with a different set of properties and interactions. For example, you’ll be able to create a single button that has a default, hover, active and disabled state – and then switch between these states once a specific action is triggered. States also let you build complex components like drop-down menus or navigations.For each state, you can determine an alternative set of properties. In the case of a button, it could be a different fill and content. The important fact is that you’ll still have the same elements, just with various styling options.<img src="https://cmscritic.com/ms-content/uploads/2023/08/uxpin-element-states.gif" />Import from Sketch One cool feature of UXPin is its ability to import from <a target="_blank" href="https://www.sketch.com/">Sketch</a>, which is an incredibly popular design tool. It seems like the UXPin team really understands the value that other applications play in the design ecosystem, and they’ve made it easier to build meaningful connections.Importing designs from Sketch to UXPin is just a simple drag-and-drop. UXPin keeps all of your layers intact, so you can pick up exactly where you left off and turn them into fully interactive online prototypes.Easy Collaboration UXPin is a cloud-based tool that works on any operating system – so you and your teammates can collaborate in real-time. As we've already mentioned, it effectively "unites" designers and developers, even if they use Mac and Windows systems. You can even take your collaboration to the next level with in-app commenting, allowing you to tag your teammates in comments and keep them in the loop when you're working on the same prototype.You can also make the most of your collaborative design process and invite your team, stakeholders, and reviewers to work with you. It's incredibly simple to set their permissions via User Management and control what they can see and do.Preview Designs on Mobile With the UXPin Mirror app, you can effortlessly preview your prototypes on mobile devices to see how they look and behave. As you make changes in the editor, the prototype on your mobile device will update on the fly.Another nifty feature: you can download the UXPin app from <a target="_blank" href="https://play.google.com/store/apps/details?id=com.uxpin.mirror">Google Play</a> or <a target="_blank" href="https://itunes.apple.com/us/app/uxpin-mirror/id1446596008?ls=1&amp;mt=8">App Store</a> and see exactly how your designs look on mobile devices.<img src="https://cmscritic.com/ms-content/uploads/2023/08/uxpin-preview.png" /><h3>Pricing</h3><img src="https://cmscritic.com/ms-content/uploads/2023/08/uxpin-pricing-annual.jpg" />UXPin offers two types of pricing: monthly and annual. There are four tiers:Basic Plan Get everything you’ll need for wireframing and prototyping, including animations, interactions, and states. Basic also offers:<ul><li>Version history for saving iterations of your designs and retrieving them at will.</li><li>Export function for moving your designs to PDF, PNG, and HTML.</li><li>Stakeholder approval for sharing your prototypes with your team or customers, gathering feedback, and obtaining the all-important "OK" to proceed.</li></ul><img src="https://cmscritic.com/ms-content/uploads/2023/08/uxpin-custom-workflows.png" /><ul><li>Comments and assignments for keeping your team and stakeholders connected around feedback and assigning specific tasks.</li><li>Password-protected views for securing your prototypes with a password.</li></ul>The Basic Plan is $24 per month but offers a discounted rate of $13 per month with an annual plan.Advanced Everything from the Basic plan, plus:<ul><li>Contextual documentation to set up guidelines or leave notes – and pin them to specific elements on your prototype.</li><li>Conditional logic for setting rules around custom interactions.</li><li>Expressions, which use Javascript to create computational components like shopping carts or validate user inputs such as emails.</li><li>Variables that dynamically update text elements, capture data from inputs, or store user preferences for later use on your prototype.</li></ul>The Advanced Plan is $39 per month. But like the Basic Plan, it offers a discounted rate of $29 per month with an annual plan.Professional Everything from the Advanced Plan, plus:<ul><li>Design systems: package your design, code, and other elements to create reusable Components and style guides.</li><li>Roles &amp; permissions: define what team members can do and what projects they have access to. Each team member has one role – “creator”, “manager”, “owner”, or “collaborator” – and you can control the state and privileges.</li><li>Priority support: get help when you need it via email, phone, or Zoom.</li><li>Advanced security: trust that anything you design is securely encrypted and fully backed-up by UXPin.</li></ul>The Professional Plan is $89 per month with a discount to $69 per month with an annual plan.Enterprise UXPin’s Enterprise plan is perfect for large organizations with dedicated design teams and product development squads. Used by Fortune 500 companies, Enterprise provides unlimited users, unlimited design systems, and advanced security – all of which allows you to facilitate the design process at scale.The Enterprise Plan has custom pricing based on the size and needs of your organization.<h3>Conclusion</h3>UXPin really earns the “UX” part of its name by focusing on the user experience. It’s the perfect blend of features for both wireframing and prototyping, and it brings team collaboration to the next level by working across platforms and operating systems. It definitely feels like an enterprise-grade product, but it’s also a solid tool for freelancers with its affordable Basic Plan.If you’re curious how UXPin stacks up against their competition, check out their “tale of the tape” comparison on their website. They proudly display how they rate against other similar platforms such as Figma, Invision, Framer, Adobe XD, Sketch, Axure, Balsamiq, Zeplin, Marvel App, and Proto.io. They even provide a <a target="_blank" href="https://get.uxpin.com/uxpin-vs-sketch/">checklist of differences</a>.One of the biggest advantages of UXPin is that it’s cloud-based. This allows users to design, prototype, and test ideas together – whenever, wherever. This is a big advantage over Sketch (for example), which only works on macOS. Someone using a Windows system can’t use Sketch, nor do they have access to files sent by other team members using it. Still, with Sketch being such a popular design tool, UXPin lets you import Sketch files and templates directly into their app – so you can get the best of both worlds.There is one con with UXPin: as a SaaS product, you’re on the hook to pay in perpetuity. With tools like Sketch, you only pay for the product once and renew when you’d like to upgrade. Your files belong to you – and aren’t locked into a third-party system. But what if you want to cancel your UXPin subscription? Well, if you want to maintain your libraries and components, you’ll need to “park your account” and keep an active profile. That costs $5 per month and only lets you preview your projects or export them. You can reactivate at any time, but it might be worth considering when you decide to sign up.If you’d like to see some examples of projects done with UXPin, they have a prototype showcase: <a target="_blank" href="https://showcase.uxpin.com/">https://showcase.uxpin.com/</a>You can also <a target="_blank" href="https://www.uxpin.com/sign-up">try UXPin for free</a> for 14 days without a credit card. You’ll be limited to 2 projects, but it’s still a great way to take it for a test drive and experience it yourself as a user.<h3>About UXPin</h3><a target="_blank" href="https://www.uxpin.com/">UXPin</a> is a design platform that for building mockups and wireframes, interactive prototypes, UX document creation, and collaborating with both design and development teams. Features include variables, conditional interactions, expressions, interactive states, and a data generator integrated with Unsplash to get free stock photos directly in UXPin.Unlike in other image-based design tools, anything you create in UXPin is based on html, css and js code. Since it's the same technology developers will work with, their code will match your design perfectly.Why code-based design? Since 2010, UXPin has been on a mission to enable the best user experiences by merging design and engineering into one world of better, faster product development.

UXPin Review: Elevate Design with All-in-one Prototyping and Wireframing

paris-tuzun

Best Video Experience

Give your audience the best video experience

#000000

Explore a wide range of informative articles on UX, insights, and industry updates. Stay informed and ahead of the curve with our diverse collection of news and posts covering the latest trends and developments in the industry

News

Put on a happy CMS face: Storyblok's facial coding experiment reveals how AI is sparking joy

What Do Industry Experts Expect for the Drupal 10 Launch? Here’s What They Told Us

UXPin Merge Review: Sync Your Design Libraries with React Components in Git

UXPin Review: Elevate Design with All-in-one Prototyping and Wireframing

Give your audience the best video experience