I am currently developing a web application that enables users to input content and then send it out to their phones. Everything is working smoothly, but I am facing an issue with the logo design. The logo in question is displayed as follows:
On the left side, there is a separate button with a different link, which is why we are cautious about the logo link covering it up.
Initially, my thought was to apply a border-radius to soften the sharp angle at the bottom. However, when using a border-radius of: 0 0 75px 75px, the result was not quite what I expected:
When increasing the angles to 0 0 100px 100px, there was no noticeable difference:
Making adjustments to one corner affected the opposite corner, leading me to implement the following solution since there is no link on the right side:
Although there is still a slight gap on the left side, it is a significant improvement. Nevertheless, having a large link on the right could potentially disturb the user experience due to the unexpected presence of a link in that location.
This prompted us to leverage image maps and implement the following strategy:
While this method worked to some extent, there remained a dead space above the red link in the bottom-left corner of the image. As a workaround, we decided to assign a different link to that particular area. Allow me to demonstrate:
The issue resurfaced when users scrolled through the page. With the logo (and header) being fixed while the navigation remained mobile, the following challenge emerged:
Utilizing jQuery, we aim to monitor the scrolling distance, identify the corresponding navigation item, and adjust the respective section of the image map accordingly. However, this approach may seem overly complex.
(Moreover, considering that different users have unique navigational experiences...)
Do you happen to know of a more optimal solution? Or should I proceed with image maps and jquery link alterations?
Thank you for your insights!
Edit: To illustrate the mentioned "dead space," please refer to the provided image below:
In spite of implementing an image map surrounding the shield, the square corners of the shield render certain areas unlinked. While creating another image map for those specific regions could address the unlinkable aspect, the scrolling nature of the navigation causes discrepancies with the linked areas. Applying a border-radius to the image map might resolve the issue partially, but we have explored alternative avenues.
I hope this clarifies the query!