I'm the sort of person who sometimes takes on big projects and then becomes obsessed with them. The obsession helps with productivity, but things like taking breaks and eating can easily fall by the wayside if I'm not careful. My latest obsession is coming up with options for redesigning the homepage of the website I work for. A colleague and I are generating ideas over the next few weeks, so this is the very beginning of a longer process.
Talking about theoretical future websites is best done with examples to look at and play with. And I'm of the opinion that navigation should be front and center on a site with lots of content like ours. So I've been looking through long lists of menus, thinking that any site we make should be built around the right menu. I've identified a couple of favorites so far.
The first is essentially a css copy of the Mac OS Dock. I'm adapting this code to create a presentable menu to demonstrate the concept. I've got it working fine, but it glitches when the window is resized. The problem is likely a conflict between element padding and hover effects. If anyone wants a copy of the css, let me know in the comments.
If the Dock clone is my favorite option so far, this radial css menu is my second favorite. With the right images, this menu could make an excellent and understated portal to the rest of our site. I'm picturing it at the top of a long page, with some of its links going deeper into the site and some going to anchor links further down on the page.
I also like css Strange Nav, which displays menu hierarchies as a graph that unfolds. Ever since I did my news mapping project, I've been fantasizing about visual graph navigation for at least some of the website. But this might be one of things that I would love but other people might not like at all. And I have doubts about this menu's performance on mobile.
There's also something to be said for just going with a standard nav bar or hamburger that opens into a list of links. The only issue there is that most of the site contains a big horizontal dropdown menu, so having a different top nav bar setup on the home page might be too weird from a user perspective. Ideally, the transition from the home page to the rest of the site should be smooth or unnoticeable.
At this point I should probably note that I'm not a web designer or developer. Even so, I have strong preferences and opinions. Code should be terse yet readable, with few or no external dependencies. Global standards should make all font and color choices and color gradients should be avoided. Simple is better than complicated. Navigation should feel as intuitive as possible across devices.
One thing that's still sort of up in the air is what information the site will actually contain, so questions about how best to organize that info will have to wait. In the meantime, I'll be looking at endless lists of example sites, hoping to find the perfect thing to copy. As it's been over a year since I built my last website, I'll probably learn some new tricks even if I don't find the perfect thing.
Read my novels:
See my NFTs:
