{"id":1406,"date":"2020-08-04T09:00:18","date_gmt":"2020-08-04T07:00:18","guid":{"rendered":"https:\/\/dradisframework.com\/blog\/?p=1406"},"modified":"2020-08-03T21:28:19","modified_gmt":"2020-08-03T19:28:19","slug":"designing-developing-tylium","status":"publish","type":"post","link":"https:\/\/dradis.com\/blog\/2020\/08\/designing-developing-tylium\/","title":{"rendered":"Designing & Developing Tylium"},"content":{"rendered":"\n

On March 2nd, 2020, we released Tylium<\/a><\/em>, a new layout for Dradis projects replacing the long-lived Snowcrash layout. Let\u2019s go into some of the details of the work that went into designing Tylium.<\/p>\n\n\n\n

\"\"
Dashboard view of the new Tylium layout<\/figcaption><\/figure>\n\n\n\n

I\u2019m Matt Budz, the product designer for Dradis, I help create new Dradis features and re-design some of the older ones that need some TLC.<\/p>\n\n\n\n

First, let\u2019s start with some background. Snowcrash has been the layout for Dradis projects since 2013. Some users may remember way back when it was released as part of\u00a0v1.9<\/a>. It was a shiny new UI built using the now-ancient Bootstrap 2 with a handful of 3rd-party plugin stylesheets sprinkled on top. Many new features were added over the years, but the look and feel of the app became dated. <\/p>\n\n\n\n

<\/p>\n\n\n\n

\"\"
Dashboard view of the old Snowcrash layout<\/figcaption><\/figure>\n\n\n\n

My goal was to make the app look more modern and to update it to Bootstrap 4. But what does more modern<\/em> entail?

I wanted to retain the long-used brand colors for both Dradis CE and Pro editions and adjust the remaining color palette to improve color contrast while ensuring the changes wouldn\u2019t be too jarring for existing users.
Increasing on-screen real-estate was a priority during the redesign. Adjusting spacing and incorporating a collapsable sidebar that could move out of the way provided more space. Snowcrash had some inconsistent visual hierarchy, especially around header & paragraph text sizes. <\/p>\n\n\n\n

Some elements lacked visual cues to inform users that more information could be seen by scrolling. Additionally, Snowcrash had various cluttered views with a lot of information and action links that could be tucked away and accessed only when needed. I wanted to create an action menu (we call it the dots-menu<\/em>) that could be used for any resource in virtually any view. I wanted this to have a specific look so that users would be able to recognize that there is something more they can do when they see this menu – like adding, editing, moving, and so on. <\/p>\n\n\n\n

I embarked on this re-design journey knowing that I wanted to change the overall layout of the app but not completely re-design the individual partials that are rendered within the layout’s different views. I decided it would be best to work on those as the respective features got updated or other features got added. <\/p>\n\n\n\n

Using my design tool of choice, Adobe Xd<\/a>, I started on the main sidebar and the collapse\/expand functionality. I designed this so that the user would expand the sidebar and once they navigated by clicking the links in the sidebar or clicked off the sidebar, it would collapse out of the way. With the sidebar opened, the rest of the view became faded out to bring attention to the floating sidebar. This came with subtle animations for the sidebar width transition, navigation link position, as well as opacity transitions for the node tree and sidebar header. At this point, I also added the new-to-Tylium Dashboard<\/em> link, so users could easily navigate back to the initial view they are greeted with when they opened the project.<\/p>\n\n\n\n

\"\"
New sidebar style<\/figcaption><\/figure>\n\n\n\n

Next, I moved on to the top navbar. In Snowcrash it was becoming a bit full and offered very limited space for long project names as well as new nav items. It was also visually connected to the sidebar giving the illusion of a smaller workspace for everything else in the project. I wanted to completely separate the navbar from the sidebar so I moved away from using the edition color as the navbar\u2019s background color. In order to save some space, I changed the less-used nav links to round buttons with icons to reduce the total width they took up. I also re-designed the way the search button expanded and behaved to match the new round nav buttons.<\/p>\n\n\n\n

\"\"
Comparison of the old navbar (top) vs the new navbar (bottom)<\/figcaption><\/figure>\n\n\n\n

I worked on the sidebar and navbar while looking at the project dashboard, so naturally, I moved on to the main dashboard area next. I wanted to keep the panels the dashboard had in Snowcrash but with an updated look. Again, I didn\u2019t want to completely re-design any of the partials but I did update things along the way so they would be more cohesive with the new layout. The page heading and the panel headings had to become more distinguishable for one another so I increased the size of the page headers to ensure they wouldn\u2019t be lost with panel headers. I also noticed there was inconsistency with borders and dividers, both in terms of colors and usage. I ensured all borders and dividing lines got the same color and that they were used consistently regardless of the view for a better visual presentation. The panels got a subtle border with rounded corners along with matching underlines for the panel headers. Some other components that got a refresh were the list of issues and the list of recent activities. <\/p>\n\n\n\n