As a designer, sometimes there are small details that bother me to the point where I need to address them. This time it was the Dradis logo that fell victim to my designer eye for details. A little while ago, I noticed something was amiss with the logo’s 3D perspective. When we started using the logo as the favicon, I noticed that one side appeared to be significantly narrower than the other.
Additionally, the logo’s current style doesn’t scale well. When the logo is significantly scaled-down we lose the outlines which cause the extruded sides to blend into the top face, skewing the design.
Let’s dissect the logo to investigate and fix the perspective and symmetry problems. While we’re at it, let’s also address the scaling issue.
Jumping right into it, let’s take a look at the current logo:
In order to get a better understanding of what is going on with the symmetry, let’s get rid of the ring and isolate just the face of the “A”:
Next, let’s add some guides for alignment and straighten it out so we can see if the top and bottom are level:
It is already evident that the top of the “A” isn’t quite level. Let’s zoom in to see how askew it really is:
That’s pretty significant if we are going to be using this for a 3D object. Let’s remember this for later when we look at the X-axis perspective.
Now let’s check out the bottom of the “A”:
The bottom right looks spot on.
How about the bottom left?
It’s slightly off but it’s minimal (you might have to click the above image to enlarge it in order to see the misalignment).
Now let’s fill in the missing sections to restore the original shape of the “A” before it was cut out by the ring.
Looking at the A in this state reveals that it’s quite inconsistent. Let’s use Adobe Illustrator’s trusty measure tool to take some measurements:
Look at it! Just look at it! 😭
All of these measurements should be the same. Let’s keep this in mind for later when we talk about the Y-axis perspective.
Additionally, let’s check the inner bottom angles of the “A”:
Oh boy, these angles being uneven means the top of the “A” is off-center and lopsided as if the top was pushed towards the right:
In order to fix the symmetry of this shape, we’ll need to make the measurements isometric and equal out those bottom angles. But for now, let’s take a peek at the 3D perspective problems.
This is the logo again reset to its original state:
Looking closely it’s evident that the 3D extrusion is not realistic nor consistent. Let’s dive in deeper, I’ll try to illustrate what I’m talking about.
First, let’s start with the X-axis. I’ve added some gridlines that the top and bottom edges of the A should line up with:
We can already start to see some problems here. Going back to those alignment issues we discovered above, we can see how that top edge not being level is affecting the alignment of the shape with the X-axis gridline.
The bottom left of the “A” was only slightly off level but now it’s clear how that minor misalignment also caused an issue with the 3D extrusion.
Let’s move on to the Y-axis:
Similar to the X-axis, we can see some issues here with the Y-axis:
The “A” should be aligned to these gridlines but it’s not as a result of those uneven measurements and angles we discovered earlier.
Finally, let’s take a gander at the z-axis:
😲 – shocked 🤯 – mindblown 😭 – crying
This is all wrong. Let me explain:
The extrusion of the left leg’s base doesn’t make sense with how it’s skewed in. The right leg of the “A” appears to be bent down from the left leg along the Y-axis causing a huge deviation from the Z-axis gridlines. This is the main reason for the “3D-ness” not looking realistic.
I took some time to recreate the Dradis logo using Adobe Illustrator. I corrected all the perspective and symmetry issues with the current logo design by making those uneven measurements and angles equal.
Then I used Illustrator’s 3D tools to make the 3D extrusion and adjust the perspective angle.
I was also able to solve the scaling issue by removing the outlines from the logo and adding shaded colors to the extrusion.
Additionally, I ensured the ring was aligned to the same perspective angle as the “A” to make it look and feel right as one cohesive logo with 2 distinct elements.
The keen observer may say “but the new logo doesn’t align with the Z-axis described above!”:
And they would be right! I like the perspective where we see the flying A’s extrusion on the inner parts of the legs. If we wanted to correct the logo using the original Z-axis angle we would end up with this perspective:
I ended up changing the Z-axis angle to maintain the previous perspective:
Here is the logo again showing the adjusted Z-axis angle:
And to be thorough – here are the X and Y gridlines showing how the updated logo is nice and tidy.
The below shows a comparison of the previous and updated logo designs.
Left: Original logo Center: Updated logo with corrected perspective Right: Updated logo with shaded extrusion
Finally, here is the before and after of the favicon.
Now, the designer in me can rest easy knowing the logo has a realistic 3D extrusion and perfect symmetry.
On March 2nd, 2020, we released Tylium, a new layout for Dradis projects replacing the long-lived Snowcrash layout. Let’s go into some of the details of the work that went into designing Tylium.
I’m 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.
First, let’s 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 v1.9. 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.
My goal was to make the app look more modern and to update it to Bootstrap 4. But what does more modern 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’t 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.
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) 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.
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.
Using my design tool of choice, Adobe Xd, 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 link, so users could easily navigate back to the initial view they are greeted with when they opened the project.
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’s 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.
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’t 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’t 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.
For better user experience, I wanted the sidebar and navbar to always be visible regardless of the height and width of the view. This meant that only the view content would be scrollable. In order to keep a visual consistency throughout the layout, I used the changes I made to the dashboard to set the tone for all the other views.
At this point, I had a decent base for all views in the app but one major component that still needed work. Many of the views utilize a secondary sidebar that lists view-specific collections of items like, attachment uploads and import options. In design, we want the secondary sidebar to flow nicely with the main sidebar. I achieved this flow by making the secondary sidebar background color the same as the main sidebar active item background color. This would give the active sidebar item and the secondary sidebar a visual connection. The views that use a secondary-sidebar needed to match the rest of the app by having the view content sections neatly presented in panels. This meant that sections like Comments, Subscriptions, and so on got their own panel.
With the Bootstrap migration completed and out of the way, I was able to start coding the layout changes I’d designed in Adobe Xd. I implemented the design in roughly the same order as I designed it. I started with the sidebar and navbar, then moved to the main content areas of all views without a secondary-sidebar. I added the panel changes to each section of the views and adjusted things like header styles and font-sizes while utilized SASS variables for easy switching of colors between CE and Pro editions.
Last but not least, I worked on the secondary sidebar and adjusted all the view files that utilized this sidebar and updated panel styles, panel headers, page headers, etc . While coding the secondary-sidebar I quickly realized that it could be taller than the view content itself depending on the collection of items rendered within it. This would cause the view content to be unnecessarily scrollable. To solve this, I locked the secondary sidebar height to match the height of the browser window and made it scroll independently of the main view content. This would also be a more natural behavior in situations where both the secondary sidebar and view content have enough height that they both need to scroll vertically.
Another challenge I ran into was caused by a bug where the Bootstrap 4 modals appeared under the modal backdrop rendering all modals useless. After many hours of digging through the code, scratching my head, and growing new strands of grey hair, I turned to StackOverflow. It turns out this is a known Bootstrap 4 issue and the best way to solve it is to render all modals as direct children of the <body> tag. This required a refactor of the way we rendered modals in views.
At this point, the layout had come together nicely and everything was working as expected. Any bugs and quirks that came up along the way were resolved. Just as I was feeling good about it, all kinds of specs in the test suite were failing. I dove into the specs and updated what I knew needed updating based on the layout changes and Bootstrap migration but I noticed I wasn’t getting consistent failures. Some specs would fail sometimes and those same specs would pass other times. I had our developers, Aaron and Brian, step in to take a look. After many hours of debugging and researching, they finally realized the problem had to do with the sidebar toggle animation. The test suite was expecting the sidebar to be opened instantly so it could continue to go through the testing steps but the milliseconds of animation caused the test suite to intermittently break causing failures at different points. Ultimately, the solution was to disable animations for the test suite and all was well.
The last piece of the puzzle was to clean up all that old CSS. I ended up restructuring the CSS using a modified version of the SMACSS methodology. While tediously combing through each stylesheet, I removed unused, redundant, and unnecessary CSS. I was able to further reduce the amount of CSS by improving specificity.
Fun fact: Implementing Tylium modified 290 files and reduced the app’s code by 1871 lines.
Tylium was finally ready for release. Pleasantly, the new look was generally well-received and as more and more users started to use the updated version of Dradis, we started to get more constructive feedback. Both our internal team and our users realized that the auto-collapsing toolbar created a workflow issue in cases where users needed to frequently switch nodes or manually add many new nodes. I set out to fix this hindrance by eliminating the need to click the sidebar in order to create/navigate nodes. After discussing a few options with the team, the decision was made to have users toggle the sidebar manually. To enable users to keep working regardless of the state of the sidebar, I removed the overlay that faded out the rest of the view. This allowed users to chose if they would like to have the sidebar open or closed and we implemented some logic to remember the sidebar state so users wouldn’t have to toggle it each time they returned to a project. This also helped with seamless navigation between views.
Overall, the new layout improved the app by:
Increasing screen real-estate by 18-20%
Updating Bootstrap’s version from the historic 2.3.2 to a more current 4.3.1
Improving accessibility by updating the text colors to meet at least Level AA of WCAG 2.0 standards.
Providing users with an app that has a modern look and feel while also increasing their productivity
This entire endeavor started in Oct 2019 with very early rough sketches and spanned about 6 months until it was finally publicly released in March 2020. Huge thanks to the entire team for their help and input throughout the entire process. ✌️