Techné is the name of the UI design guidelines for YaaS. And it defines the principles and components for mobile-first, user-centered UX design on YaaS. Techné design patterns focus on delivering an experience that reflects what we call “the consumerization of business user tooling.” It’s an ethos that says an experience designed for those working in any kind of development, administrative or “back office” type scenario should drop the utilitarian design mentality and embrace the same interactions, visualizations, and flows to accomplish their tasks as any consumer-facing experience.
Three important aspects of Techné
Techné is built on the premise of mobile first and responsive design. Today, mobile first has become a kind of design slogan, and for good reason. The growing mobile usage, highly diverse devices and different places and situations to interact with a website, service or application led to the situation that people began to worry that they were focusing on the wrong devices. With this in mind, Techné took a different approach to designing for mobile right from the start. Techné and the underlying Bootstrap is mobile first in the sense that the code starts by targeting smaller screens, and then increases components and grids for larger screens.
User-centered user experience design
Techné provides a consistent and holistic user experience for YaaS. By creating visually pleasing designs with a strong focus on ease-of-use, the experience is intuitive and simple across all devices. With its simple and plain interaction patterns, Techné provides a powerful and consistent look and feel across YaaS and its microservices.
Freedom of technology
Techné is NOT another UI framework. It’s not a MVC (Model-View-Controller) framework and does not prescribe a data-binding language. Techné gives developers the freedom to use the technology they’re most comfortable with. There’s no technology baked into our components and patterns. Techné is open-source and meant to be community-driven.
To find the latest code and build personal projects please visit https://github.com/SAP/techne .
Learn more about Techné’s design principles: https://techne.yaas.io/Guidelines.html#guidelines-design-principles
Basics and design elements of Techné
Techné’s responsive design approach makes the development easy by offering UI controls that automatically adjust to different form factors and interaction styles. The advantage of Techné’s responsive design approach is that apps can adjust to different screen sizes without requiring additional coding and maintenance efforts.
- Starter Pages
Components are the basic building blocks – such as labels, input fields, or buttons. They range from A as in Alerts to Z as in Zoom. Components can also include more abstract elements like color palettes, fonts and even more dynamic aspects of an interface like animations.
Here are examples for components
Patterns are groups of components which are bound together and are the smallest fundamental units of a compound. Patterns take on their own properties and serve as the backbone of the Techné design.
Here are example for patterns
Toolbar and one part is the pagination, mentioned before:
3. Starter Pages
Patterns give us some building blocks to work with, and we can now combine them together to form UIs for Yaas. The section ‘Starter Pages’ shows illustrative examples – groups of patterns joined together to form a relatively complex, distinct section of an interface for YaaS.
Here is an example for a Starter Page
Table and one part is the toolbar, mentioned before:
Learn more about the Techné’s Design Elements: https://techne.yaas.io/components/Alerts-Errors-Notifications.html
The personas of Techné
Techné focus on four persons
A consumer expects a unified experience across channels and devices; how they want it, where they want it, when they want it.
Our Marketers, Merchandisers, Product Managers and other Designer people
Our IT, Operations, Customer Service, Order Management people
The heart of YaaS. They need stability, community and tools that don’t get in their way
Learn more about the Techné’s Personas: https://techne.yaas.io/
Learn more about personas and what a persona is: https://experience.sap.com/basics/what-is-a-persona/
Techné and the interplay with UI5
Techné is also designed to be complementary to the UI5 component library and UX designers and UI developers can mix and match components from either library to achieve the experience needed for their target users. Techné is, however, the standard for YaaS.