Glimpse
And if you're a new user of my site (welcome by the way! 🥰), here is a glimpse of what my site looks like before this version.
Anix from Abubaker Saeed on Vimeo.
Before I begin...
I'll share more details about the "Anix" design system in the future. In the meantime a little about the design, this article more likely contains more about why I made certain decisions, regarding design and UX, whether it's from a developer, designer, or user perspective, rather than how and what about components.
In-page navigation
The first thing that I'd like to talk about is the in-page navigation component. If you didn't already turn on the enhancement option in preference, open the preference by clicking the preference button that's inside the header and turn on the enhancement option (which is by default turned off) from the modal. Once done, close the modal and scroll up to the top of the page. You'll see the in-page navigation component there (it's my favorite component). It's similar to table-of-contents but isn't exact, the component is there to improve the site accessibility and give users ease while navigating through the site.
I have this idea... since forever, the first design wasn't the same as the new one, it was extremely simple. The first prototype was only giving the user to jump through areas that are inside the main element and the styling was inline/inline-block rather than block. New and improved design for the component along with header and footer links really make the component more useful and beautiful — And yup, the header and footer aren't just texts but actual links, users can click on them to jump on those elements.
For the user, the footer link would be useful as it contains a lot of other navigation links that are not inside the header element however you'll be wondering why I've included the header link especially when its position is fixed on the left side, the user who's using a mouse to navigate the site doesn't need that but the person who's using a keyboard to navigate needed that. I don't want the user to press shift+tab five times from in-page navigation just to reach the home page link or any other link that he wants to reach that is inside the header.
The topic is actually huge, despite the component look simple but it isn't; I'll explain this topic in detail in the future. The last thing that I want to say about this is that it's pretty much useful for every type of user; a user using a mouse, a user using a keyboard, a user using a touch device (tab, mobile, or any other touch-screen device) and a user using screen readers to navigate. I personally love it and I use it as well. So if you're using a large-screen device switch to your small-screen device and see it for yourself, you're gonna love it! and if you're on a small-screen device, switch to a large-screen device. I'm 100% sure that everyone is going to find it useful and going to love it!
One last thing and this is mainly for users using a keyboard or screen readers, if the enhancement option is turned on and you're on the top level of the site (body element), if you press the tab key the first link you'll be focused on to will be skip to in-page navigation link and if pressed/entered it'll send you to the in-page navigation component.
If the user wants to jump to the main element press the tab key again (from the first link) and this time you'll be focused to skip to main content link and if pressed/entered it'll take you to the main content. If the enhancement option is turned off, you'll only see/get skip to main content link. From my research, I think this method is more accurate and makes more sense, approved by me for the "Anix" design system. The component isn't part of the main element and it exists outside of it; So, the user who has pressed the skip to main content link will skip this component as well. Again, more in-depth details in the future — and yup the component idea is originally mine 😊
Night theme and accessibility
About the design, yes I've kept it simple on purpose because I love the simplicity and I want to keep the design system simple and the result of it is that many people loved it. Although, I must say, keeping it simple is harder than making it complex (Phew). I didn't add many animations, however, the ones that I've added cover all of that. For the night theme, I want to go for something different than dark/gray-ish color schemes, that's why my night theme is blue-ish color; it's actually nature-inspired — and if you know me you already know that I love nature and without a second thought I've decided to go with nature-inspired colors. 😁
For accessibility, I want the UI and UX to be usable to everyone from the start; Colors are accessible and everyone can explore without anything preventing them, using the technology/device they're using.
Not many people will get aware of this — unless I told them — except the person who visits the site with javascript turned off, but if you visit the site with javascript turned off, you still would be able to explore the site — not in the same way but the experience would be similar, only some options are limited and required javascript. 🤗
Future plans
For some past months, I've been thinking and questioning myself where this project is going? — Two years ago, when I've decided to have an online website about myself I've only wanted a simple website but as I increase my online presence more by appearing on social networks (Twitter, CodePen, Dribbble, & GitHub) I start to expand my website even more and made it into completely new UI where it has its own concepts and specifications. I'll be honest when I wanted to start, there are only 4 pages I have in my mind but later it grows to 12 pages and on each page, there is a different component according to the need and for some reason, I've decided to make it IE-compatible (Yeah, it wasn't easy especially when you know modern CSS yet you decided to use old tricks and techniques to make it browser compatible).
If you've seen and explored my previous version of the site — which is now the "Anix" design system, you'd be aware of the design page and design window/modal. I've almost built my own Dribbble on my site where I show every design of mine in both a modal/window and on individual design pages.
The nice thing about those is that unlike Dribbble my components are accessible and fast; the techniques and how I've structured them already made them amazing and If I had added PWA (Progressive Web App) support to my site it'd going to be blazing fast experience. It was like a whole different application on my site and I had planned to write an article about it — sharing techniques & stuff — however because now I've made the UI into a design system I won't be doing that.
What's next? I've made a decision to make it a CSS framework/library — now that I know it's something for others to use that only means I've to work on it even more and properly (documentation, examples, etc) which required my full focus and more time. As a solo designer and developer, it's a little too much for me to handle, and so, I'm going to pause this project at the moment — and will resume it in the future.
Conclusion
There's actually a lot more to talk about, and I'm very much excited about it but I can't do that at the moment due to other priorities — though planning to do it in the future — As behind every component, there's a story, which I want to share in detail with the world. 🌏
Stay tuned!