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.
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!
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.
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.
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.
A C/C++ compiler suite from NVIDIA, offering support for parallel computing that use NVIDA GPUs, and full C++17 support, has been added to the Free C/C++ Compilers page. (C and C++ are popular programming languages used by many to write computer programs.)
Latest PEAR Releases:
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.
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
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
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
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
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
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
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
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
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.
People say to “never judge a book by its cover,” but people will most certainly judge your website by its design. If you don’t have a clean, modern, and practical design, your audience will bounce from your site and visit a competitor’s instead.
Your website’s design sets the first impression, so you want to make it a good one. As a business-to-business (B2B) company, it’s even more critical — you’re appealing to multiple decision-makers, and making one bad impression can potentially derail a sale.
To set you on the right track, check out these seven B2B website design tips with examples to guide you in the right direction!
P.S. Want to get the latest tips for marketing your B2B business online? Join 150,000+ marketers by subscribing to our email newsletter!
We don't just want to tell you about the beautiful work we do. We've built over
WE WANT TO SHOW YOU
1000
Websites in industries like yours
First on our list of B2B web design tips is creating a consistent design that fits your brand. When you craft your website’s design, you want it to reflect your brand. Your website is often the first glimpse people get of your brand, so you want them to get to know you as soon as they enter your site.
To help you create a homogenous B2B website design, you need to create a style guide. A style guide helps you set a consistent look and feel for your website. It also ensures that no matter who works on your website, your design looks the same.
When you craft your style guide, you’ll want to establish:
By establishing your style guide, you can build a consistent image of your brand throughout your site.
To help you get inspiration, check out Adamo. Adamo is a prime B2B website example of establishing a style guide and consistently using it throughout your site. They have a blue, gray, and white style that greets you as soon as you enter their website.
When you visit different pages on their site, you can see the design carries throughout the site.
So, no matter what page you visit, you get a consistent brand look and feel. It’s a great example of how you can build brand consistency across the board to help you build brand recognition for your business.
The best B2B websites utilize whitespace. Whitespace is negative or blank space on your site that helps keep your site looking clean and organized.
You don’t want to overload your site with pictures, videos, and text. It makes your site look cluttered and difficult to read. Whitespace reduces clutter and makes it easier for your audience to focus on the most critical information.
Even though the name includes the color white, your whitespace does not have to be that color! It can be whatever color you use in your scheme — the important part is that it’s just blank space and nothing else!
For this B2B website example, let’s look at Ultimaker. Ultimaker utilizes whitespace throughout their site to allow people to focus on their text and images.
As you continue to scroll through their site, you can see they have a lot of negative space on their website. It makes it easy for you to focus on the information they have in each section.
So, if you want to utilize whitespace effectively, take a note from Ultimaker’s playbook!
Another critical component of B2B website design is easy to use navigation. When people visit your site, they want to find information fast. If they struggle to find information, they’ll bounce from your site and visit a competitor’s site instead.
As a B2B business, you have a long sales cycle. Decision-makers will keep coming back to your site to find more information and learn about your company. If your navigation isn’t organized, these decision-makers won’t want to come back and learn more.
So, when you craft your website’s design, focus on creating easy-to-use navigation. First, start by using broad headings like “Products,” “Services,” and “About Us.” Then create subcategories beneath these broad headings to help keep your navigation organized.
By organizing your navigation, you’ll make it easy for people to browse your site and find the information they need.
Zendesk is an excellent B2B website example for navigation. When you visit their site, you can see broad headings at the top of the page that guide you to the information you need.
When you hover over each of their navigation headings, you can find more subheadings beneath each one.
Zendesk’s navigation is simple, clean, and effective for helping people find information fast.
When you do B2B web design, you want people who visit your site to act. Whether it’s to sign up for your emails, get a demo, or download gated content, you’re ultimately looking for decision-makers to take the next step towards converting consistently.
Without calls to action (CTAs), though, these leads may not know how to take the next step.
CTA buttons are critical to guiding your audience. These buttons tell visitors how to proceed if they’re ready to move forward.
When you craft CTA buttons for your site, the first thing you want to do is make sure your buttons stand out. If people can’t see them, they won’t click on them. Your buttons should match your color scheme while still standing out on the page.
Second, make sure your CTA buttons are descriptive. If a button says, “Click here,” it doesn’t really tell your audience what happens when they click. A button that says, “Download your free guide,” on the other hand, is descriptive and tells users what to expect.
If you need inspiration for CTA buttons, look at Packlane. Packlane uses great CTAs throughout their site. As soon as you enter their site, you’re greeted by a descriptive CTA that states, “Choose Your Style.”
As you scroll down the page, you’re greeted by more CTAs that guide you to the different types of boxes the company offers. As you hover over each CTA, it changes colors, creating a fun interactive element for people browsing their site.
Use these CTAs as inspiration when crafting yours!
There’s more to web design than just beautiful colors, seamless navigation, and clickable CTA buttons. While design is a critical component of your website, your site’s information is just as necessary.
Website copywriting is critical to keeping leads on your site. A beautiful design won’t mean anything if the information on your site is lackluster or not helpful.
One of the most critical pieces of information on your site is your value proposition. The value proposition is what your business offers to people and how your product or service will help them. For B2B businesses, this is incredibly important since you’re appealing to multiple decision-makers.
You want to place your value proposition in your homepage design, so your audience sees it immediately and knows the value of investing in your business. You can use eye-catching graphics or visuals to draw your audience to this part of your homepage.
When you write your value proposition, think about what your audience wants from you. What is going to convince them that your solution is the best solution? Whether it’s fast turnaround, customization, or pricing, you need to highlight what matters most to your audience.
One of the best B2B websites that highlights value proposition immediately is Batterii. As soon as you enter their homepage, you’re greeted with a section highlighting the value of using their software.
They highlight each perk and focus on how it helps their clients. So, for example, they mention how their software enables people to connect globally. So, if a global shipping company, for example, needs that feature, they can immediately see it on Batterii’s homepage.
Batterii does a great job of highlighting their software while also showing the value of investing in their software. It’s an excellent example of how you can craft your business’s value proposition to convince decision-makers that your business is the best option.
The best B2B websites utilize visuals to draw people into the site. Visuals play a critical role in engaging your audience on your site and getting them to interact on your pages.
You can use numerous types of visuals on your site, including:
You can share visuals of your products, team, and more. Try to use original photos and stray from stock images — it will make your site feel more authentic and personable.
One of the best B2B websites that highlights the use of visuals is Acme. This industrial automation company uses visuals that change as you highlight different product offerings on their site.
They also use icons for their categories to add another interesting visual touch to their website.
Your B2B website design is critical to helping your business grow online. Having a beautiful design will help your business stand out from the crowd. If you aren’t sure where to start with your B2B website design, WebFX can help.
We have an award-winning team of designers that can help you craft the perfect website. We know how to create sites that drive results. In the past five years alone, we’ve driven over $2.4 billion in sales and over 6.3 million leads for our clients.
Ready to start designing your website? Contact us online or call us today at 888-601-5359 to speak with a strategist about our web design services!
The post 7 B2B Web Design Tips to Craft an Eye-Catching Website appeared first on WebFX Blog.
