For over two decades, I’ve been fortunate enough to work from home. No maddening commute and all the coffee I can handle. Sounds pretty cool, right?
And, even when a global pandemic sent the world scrambling to work remotely, things stayed relatively the same here (save for my child enrolling in online school). Being in a familiar environment, away from all the chaos, is a true blessing.
But even blessings have their downside. For all the benefits of working from home, there’s also a real sense of isolation. You may go days without leaving home or seeing anyone outside of those you live with. A public health crisis only serves to amplify the effect.
This is a heavy burden for freelance web designers. Life seems to consist mainly of work. It’s something many of us have learned to live with. But that doesn’t necessarily equate to thriving.
While there’s no easy fix, there are some ways to decrease the negative impacts of isolation. The following are tips for beating those stuck-in-your-home-office blues.
The Web Designer Toolbox
Unlimited Downloads: 1,000,000+ Web Templates, Themes, Plugins, Design Assets, and much more!
Find Comfort in Nature
You don’t need to live on the edge of an enchanted forest to enjoy the outdoors. Nature, or some form of it, is available to just about all of us.
For instance, I live in a small town. We have some lovely parks to visit. But even if I can’t get to the park, I still enjoy the natural elements in my own back yard. I’ve set up some bird feeders and enjoy watching the cardinals, finches and chickadees peck away. They are calming and sometimes even comical. I spend a lot of time enjoying them – particularly in the warmer months.
Wherever you happen to be in the world, admire the nature right outside your window. Maybe birds aren’t your thing – that’s OK. You could find comfort in watching squirrels climb the trees or telephone poles. Even caring for a houseplant or two can be effective.
Most importantly, get outside for at least a few minutes each day. Grab some natural light and feel the breeze against your face. These things are both good for you and free – so take advantage!
Participate in the Design and Development Communities
We humans are social beings. And, even though in-person interactions are difficult to come by, there are still opportunities to connect with others. This is especially so within the web design and development communities.
Social media is still buzzing with activity, if not more so than before. There are some great Facebook pages and groups that cater to specific tools like WordPress or even languages such as CSS. Twitter has plenty of relevant hashtags, such as #WebDesign and #WebDev, among others. They are great ways to expand your knowledge and get to know some cool people.
Virtual events are also becoming quite common. Several in-person meetups have switched to Zoom during the pandemic. It seems like there are always online get-togethers being held, so be on the lookout for ones that are of interest to you.
None of this fully replaces the fun of being out amongst the crowds. But you can get creative. Participating in a virtual event from a place that isn’t your office (your living room, back yard, etc.) can at least make it feel like you’re out and about.
Take Time Off
Working from home often brings with it the temptation to put in extra hours. With such easy access to your office, spending some nights and weekends at your desk can seem like a positive. It helps you cross some tasks off of your to-do list – reassuring in its own right.
Doing this once in a while is fine. But spend too many hours working and you risk becoming overwhelmed. Both your body and mind can suffer the consequences. Suddenly, it becomes harder to focus and sit still. Continuing to grind out those hours only makes it worse.
Taking some time off may be just what you need. Even if it’s not a traditional vacation, the mere fact that you are away from the office is beneficial. Whether the distance is ten feet or a hundred miles, it’s worth doing.
If your situation prevents you from taking in the tourist sites, there’s still plenty to do at home. Tackle an improvement project you’ve been putting off or take the dog for a walk.
And, for goodness sake, turn off your email! The constant buzz of new notifications is pretty much the opposite of relaxation. Let your clients know that you’ll be unavailable, then chill out as best you can.
Find Little Ways to Break Free from Isolation
Being (mostly) confined to your home office can really take its toll on your well-being. Therefore, it’s vital to try and stay connected to the world around you.
Spend time in nature to clear your head. Participate in personal and professional communities to reinforce a sense of belonging. And take some time off to refresh your creative spirit.
None of these things may be as profound as, say, going to a packed concert or travelling to your favorite vacation spot. But they can add up to make a positive difference in your life.
The post Dealing with the Isolation of Freelance Life appeared first on Speckyboy Design Magazine.
Icons are among the most versatile tools in a web designer’s arsenal. They can be used as attention-grabbing visuals just about anywhere on a website or app. Whether they’re alerting users of a flash sale or a new social media notification, they usually get the point across.
Thus, utilizing icons in a site’s navigation seems like a natural fit. Visually, it sure makes sense. But doing it well does require some careful planning.
With accessibility being such a key concern, extra steps need to be taken when icons aren’t accompanied by text. Context is also vital. While it may be obvious that the little house icon takes you to the home page, other concepts aren’t so easy to convey.
Today, we’ll share 8 unique CSS and JavaScript code snippets that bring icons to navigation. Along the way, we’ll point out some elements that make them stand out – for better or worse.
The Web Designer Toolbox
Unlimited Downloads: 1,000,000+ Web Templates, Themes, Plugins, Design Assets, and much more!
Sliding on Through
This navigation is attractive, makes great use of the allotted space and keeps accessibility in mind. Click on an icon and you’ll witness a slick “sliding” effect that highlights the icon and displays accompanying text (which is also available to screen readers). Also note that the total width of the container never grows or shrinks – it’s beautifully consistent.
See the Pen Sliding Icon Menu by Steve Gardner
Sweet Gooey Tabs
The included “gooey” navigation effect on this tabbed menu is both fun and intuitive. Combined with clean icons, descriptive text and bold coloring, it would be perfect for a mobile or web app. That said, it might be most effective in small doses. Larger menus could become a little, well, overwhelming and sticky.
See the Pen TAB Gooey Icon Navigation Menu Concept
Why Not Change the Whole Screen?
Sure, there are some similarities with the previous example. But this gooey menu kicks it up an extra notch, thanks to its background color-changing effect with each selection. The animated icons also “draw” upon click, making for a more exciting user experience. The only thing missing here is accessibility, but that could be resolved with some screen reader text.
See the Pen Animated Tab Bar by abxlfazl khxrshidi
Vertical Icons with Context
A vertical navigation bar offers a means to create highly-visual navigation that doesn’t take up too much space. But icons alone aren’t enough. Usually, it makes sense to expand the menu in some way. This particular CSS-only example uses a hover effect to display the menu item’s title. It’s neat, clean and intuitive.
See the Pen Vertical Icon Navigation Menu by Saxon Chuang
Enter the Dark Mode
Dark design seems to become more popular every day. And this icon navigation bar is a perfect compliment. Click on one of those noir icons and they’ll turn a bright white with a snazzy red underline. The menu uses jQuery to create a smooth animation. Again, you’ll want to add your own accessibility features here.
See the Pen Simple Icon Navigation by Ganesh Chikhalikar
Push Buttons
If you’re looking for a dead-simple navigation with some super-cool animation, you’ll want to stop right here. This icon-based menu was built for a kiosk and you can definitely see that inspiration. But an industrious designer could add some text here and utilize this snippet for a microsite or landing page.
See the Pen SVG Kiosk Icon Menu by Chris Gannon
Expandable Vertical Navigation
Here’s another icon-based vertical menu that does a great job of staying out of the way. But what if you need more context? Click or tap on the hamburger icon on the upper left of the screen to expand the menu, which includes a search field. There’s more that could be done here, such as expanding each individual menu item with a click or hover. But it’s neat nonetheless.
See the Pen Google Nexus Menu by Ahmed Elhanony
Form a Semi-Circle
This circular layout could make for an interesting utility menu. It takes up limited space and can be neatly tucked away into a corner. Perfect for allowing users to access a few key account functions, for example.
See the Pen Circular Icon Navigation by Mark Little
Iconic Choices for Your Menus
The snippets above offer a little something for everyone. They feature different space requirements, interactions and, despite their simple looks, underlying complexity. Each could be the perfect fit for your particular project.
We hope you enjoyed the variety of styles shown here. If you’re looking for even more icon-based navigation, check out our CodePen Collection.
The post 8 Examples of Icon-Based Navigation, Enhanced with CSS and JavaScript appeared first on Speckyboy Design Magazine.
