We have reached a milestone! After months of our team working hard, the first stage of the Design Language System is ready. We are excited about the impact this initiative will have on Axway and our products for years to come.
This first stage will break ground on a collaborative unified design language across the product, by providing a UI Kit of visual components to assist in design creation the team expects to see improvements in UI accuracy, speed, and the delight of users.
View:
Design Language System… what is it?
A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.
Having a design language in place enables a team of designers, developers, and every other interdependent group in the digital ecosystem to create, recreate, modify or iterate on a product in a quick and cost-efficient manner.
This stage 1 release will prepare us to deliver our first pilot pages and begin to update the code library. The UX team will begin a process of constant improvement and testing with our users to ensure we meet experience needs as well as accessibility compliance.
The DLS includes the resources to create user interfaces consistent with the principles, design language, and best practices of the Axway brand.
Rather than focusing on pixels, developers can focus on application logic, while designers can focus on user experience, interactions, and flows.
Highlights
A series of foundational components have been created as well as updates to the vertical rhythm of the interface. With the foundational release, we looked to provide commonly used elements and provide the base for more complex organisms.
Some of the new highlights to look for are:
- Updated Brand Colors– Both the new Brand and Semantic colors have been added.
- Typography Style Library– Included in the kit are text styles from small to large to aid in deciding on the perfect text.
- Grid Templates– Check your design against many popular screen sizes to ensure maximum usability.
- Form Controls– Build and Manage forms with controls to meet all your data collection needs.
- Buttons– Multiple sizes and Icon placements mean we can finally stop redrawing the same rectangle over and over again!
Atomic Design
The philosophy of Atomic Design is at the core of our system. Of course, we have made modifications to match our toolset, but essentially by combining multiple components, we can make more complex components and patterns come to life. Essentially thinking of your components as building blocks to mix and combine into complex patterns.
If we look at a table component. It is comprised of multiple “atoms,” these atoms are elements such as the text style, color, and icons. When combined these “atoms” now form a “molecule,” this molecule is a table head component, perhaps you used a variant in the “icon” atom putting a delete icon or maybe you wanted a filter icon, these atoms work together to make variable components.
Combining multiple molecules such as table head + table cells creates an organism. This organism is now a complete table to be placed within a page template.
Well, that was over my head…
It’s a lot I know! that is why we are working towards a training series on practical usage. Remember we want to improve our common language spoken between brand, design, development not necessarily task everyone with design. My Product folks know how much it helps just to be able to put a quick “wireframe” down to articulate or test an idea, now this will allow us to visualize and get started on setting expectations.
What is in this release?
This release includes both a visual UI kit based in Adobe XD as well as documentation guiding you through the usage of the new components.
UI kit
The UI kit has been built within Adobe XD. Our purpose is to provide you with a unified design pattern that allows for rapid prototyping of pages and ideas by removing the design barrier.
Accessing Adobe XD
If you currently do not have access to Adobe or Adobe XD, please make a ticket requesting access to “Adobe Creative Cloud” to download Adobe CC & Adobe XD.
Accessing the Design Kit
As XD requires all linked assets to be shared via cloud documents, please contact us via the channels provided below to request access to these shared assets. To grant access, you must first have your Adobe CC account set up.
- Install Adobe XD
Once obtaining access to the Adobe Creative Cloud the easiest way to download Adobe XD is through the Creative Cloud desktop app — simply choose Install from the Apps tab. You can also download XD from the Adobe product page.
- Link the Kit
To access the latest components and libraries, you must link to the cloud documents sent to you with your access request. These are known in XD as “linked assets”. XD requires linked assets to come from the cloud, if you are unable to access due to network constraints, we can provide you with a workaround.
- Explore the Guidelines
Explore the Guidelines to learn the design patterns and principles that are at the heart of the Design System. These guidelines will be expanded in future versions to include an increased number of specifications as well as vanilla HTML & CSS examples.
Many components come with various communication options and semantic communication so be sure to check out the documentation of a component to find out how you might customize your needs.
Upon success, GitLab migration extensive documentation will be made available online through GitLab.
- Review Components
Review the Components section, to familiarize yourself with the existing components which you can incorporate into your designs. Due to XD limitations, it is best to utilize the search box found at the top of the Assets panel to quickly find specific components needed.
XD defaults to Spec mode preventing navigation, you may toggle the Navigation function within the right-hand menu via the “Spec” icon seen below. Once toggled navigation will be enabled.
- Practice, Practice, Practice
While we have removed as many barriers to design as possible, limitations always inspire workarounds. The more you use the kit and get practice placing, overriding, and understanding sizing you will find creating pages and A/B tests is a quick and fulfilling process. While you hone your skills to be shy to do your best and don’t feel you need pixel-perfect mock-ups as a Product Owner.
Getting Help
With any new workflow, we expect an adoption filled with questions. To address these questions, we have set up a series of channels to communicate with the UX team as well as a series of training sessions and recordings.
Next Steps
- Pilot Build w/ Vertex Team – In Process
- Code Samples
- Rollout Kickoffs
- Team Training – Starting the week of August 31st
Our next steps will be to complete a Pilot program within the Central team to run the new system from design to launch in the next quarter.
The outcome of this pilot will be used to revise visuals to match any code needs as well as refine usage methods so we may better match our diverse product.
Once refined through the upcoming sprints within Central, we will be ready to work with individual development and product teams to plan rollouts.
We do not expect to turn a switch and roll out in a sprint. Each team is unique, and workloads vary so we will be looking to customize the rollouts to match based on your feedback. Multiple pages are being created within the DLS from multiple service buckets to help serve as starters for teams when uplift begins helping decide upon a migration.
Learn more about Axway and its products today.