Speckyboy Design Magazine - Web Design News, Resources & Inspiration
Speckyboy Design Magazine offers insightful tutorials, time-saving techniques, fresh and useful resources and inspirational art, covering web design and development, graphic design, advertising, mobile applications and even, the occasional Lego post.
Web designers have gotten used to turning errors into opportunities. It’s no secret that the common, most widely occurring (and surprisingly recognizable) HTTP status code 404, aka “Not Found,” was forced by developers to bring benefits to the project. In the past it scared away users, destroyed the overall impression and was a nightmare for developers. Everyone wanted it to disappear once and for all.
Today, it is an essential detail of a website. WordPress even has a specifically assigned template for it. The “404 page” is an integral element of user experience. In the majority of cases, it has not only a beautiful design but also a theme that is aimed to contribute to the entire aesthetic of a website.
The Web Designer Toolbox Unlimited Downloads: 500,000+ Web Templates, Themes, Plugins & Design Assets
Along with the well-thought-out design, interactions and even animations, it includes useful links and getaways that help lost users to get back on track. However, the “404” error in web design is like Hipsters in real world: They still catch our eye with their dorky glasses, “vintage” shirts and beards but they are nothing new to us. As for the “403” error, that’s a different story. It’s not as popular as its next of kin, but still, it occurs and not once in a blue moon.
Just for background, HTTP status code 403, aka “403 Forbidden”, means that you do not have permission to access the page. Reasons can vary, starting with inappropriate folder permissions and ending with a banal requirement of login credentials. Nevertheless, the rule of thumb dictates that any error is an opportunity to effect improvements. So why not turn the dummy “403 page” into a place that will serve the same duty as the “404 page”?
Let’s consider a dozen splendid takes on this type of error. They not only serve as a source of inspiration but also a source of ready-to-use solutions.
You Shall Not Pass
“You shall not pass” – was said once by one of the most powerful white-bearded wizards in the fictional world (I hope all the fans of Dumbledore forgive me for this). The final phrase of Gandalf the Grey (note Grey, not White) perfectly fits into the context here. And Noah Rodenbeek, A van Hagen and Jhey show this in practice. Their code snippets are impregnated with a spirit and charm of “The Hobbit” novel. While the first two artists re-created Gandalf with his staff, the latter just hinted at the scene, yet quite successfully.
If the motifs from fictional novels featured above are not enough for you, then you should set your eyes on this code snippet from Yasio. Surprise-surprise, he got his inspiration from George R. R. Martin’s series of fantasy novels. He has come up with a work called HODOR 403. I believe for the majority out there this solution is self-explanatory. For the rest, I recommend switching to HBO and seeing for yourself why this fictional character goes perfectly well with this type of an error.
Use of Illustration and Animation
Other solutions in our list were guided by the notion that “403” symbolizes a forbidden area so that animated and static CSS illustrations were recreated namely with this idea in mind.
Error 403 – Forbidden by Aimie depicts a classic scene from the fairy tale. The animated bats, witch’s house, bare trees and creepy typography that are featured in the hours of darkness certainly do the trick here.
403 Forbidden by Dylan and 403 Forbidden by Visual Composer have some unique medieval allure. “Close the Gates”: The projects evoke namely these associations. The first one features the classic wooden guard gate door that closes before your very eyes; the second one also goes for a guard gate topic and depicts a mechanism with cogs and chains that reveals the forbidden sign.
Arturo Wibawa’s vision of the forbidden area is presented via marvelous, highly-detailed and even partially animated CSS illustration of the famous Chinese ‘The Purple Forbidden City,’ aka Palace Museum nowadays.
It’s Watching You
403 Forbidden Page by Mariana is marked by a whimsical monster-like character that, thanks to direction-aware effect, follows your mouse cursor everywhere. It recreates a feeling of being watched all the time. It also imitates a fancy fairy guard that does not allow moving forward. The project feels fun in spite of the “menacing” look of the mascot.
Gabriele Corti also offers a vision of a “403” error page. His “Persistence is a key” project depicts an entire process of initially denying access and granting it after the right user action. The right actions imply inserting a key into a keyhole Nevertheless, you can always use this concept as a base for some advanced actions like inputting login and password.
Keeping it Simple
403 by lsgrrd is an oversimplified take on a “403 Page” that certainly has a right to exist. It is minimal but straight to the point. It has a certain digital quality that oozes techno vibe inherent to the computer sphere. The blinking cursor at the end in tandem with the digital typography produces a fantastic effect. The solution is clean, elegant and straightforward.
Are You on the List?
We are going to end our collection with the project made by Cassidy Williams. Unlike the majority featured here, this solution is a metaphor from the real world that illustrates the typical situation in any popular nightclub. The bouncer is the heart and soul of this code snippet. The character was even partially animated to make everything look lifelike.
Another Opportunity to Engage Users
Truth be told, “403 Error” is not as widespread as “404 Error”, nor is it as popular and recognizable. Nevertheless, it still exists and occurs time after time. That creates a hole in a website that can break the entire user experience. So, seize the opportunity and turn it into a valid part of the project. It will undoubtedly win over some new visitors and will prevent you from losing the old ones.
If you’re not a full-on expert just yet, you’re not alone. And there’s no reason to worry. There are plenty of great opportunities to learn. Some are completely free – perfect for the budget-conscious developer.
We took a trip around the internet to find some top resources for learning React. There’s something here for everyone, from beginners to those looking to dive even deeper into the library.
This official tutorial is aimed at absolute beginners (though they do recommend that you have at least some HTML and JS background). In it, you’ll go through the process of creating an interactive tic-tac-toe game. The guide is fairly quick to complete and provides plenty of help along the way. It’s a perfect introduction to the concepts of building a React app.
Need to learn the basics in a hurry? Per Harald Borgen’s guide will take you through the very basics in short order. These are the building blocks you’ll need to take things further. And, once you’re ready to move on, check out Per’s free “Building a chat app with React” course.
Codeacademy’s React course offers a look at JSX, components and how to interact with them. You’ll find that both some basic and advanced concepts are covered. Note that the actual lessons here are free (you just need to sign up for an account). However, there are some “Pro” portions that take you through real-world projects and quizzes.
Instructor Wes Bos offers two levels of premium React video courses. There is a total of 29 videos available, depending on which package you purchase. Either way, students receive free lifetime updates that will cover new techniques as they become available.
This free course is meant for intermediate learners who have at least some knowledge of how React works. During the course, you’ll build three unique components from scratch. Plus, there are lessons regarding data retrieval and localStorage.
One of the more confusing aspects of React is that there are so many companion libraries. When starting out, trying to absorb it all can really lead to frustration. So, this free course includes nothing but React. And it’s entirely browser-based, meaning there are no further tools to install.
KIRUPA offers a versatile free course that includes both video and text-based tutorials. So, no matter how you prefer to learn, you have a method for doing so. It covers all the basics, along with some more advanced use cases.
This compilation of 8 React courses from Treehouse will take you through pretty much every aspect of the library. Start off with the React Basics course and work your way through to Building Applications with React and Redux. In all, it’s 10 hours of course material. These courses do require a paid Treehouse membership, however.
A Variety of Learning Avenues
React is a vast library, but the resources above provide you with plenty of choices. You can learn as much as you want and do so in a manner that is the most comfortable.
If you just need to know enough to get by, choose one of the super-fast tutorials. However, if you want to become an expert developer, there are more in-depth offerings as well. Choose the path that makes the most sense for you and your goals.
Either way, congratulations on furthering your education and best of luck!
Textures and patterns have long been a part of web design. Whether used as a subtle background or as a focal point of our content, they help to set the tone for our creations.
But thanks to ever-evolving web technologies, we can use textures and patterns to even greater effect. They no longer have to be confined to static display. Now, they can be combined with motion and shading techniques to produce some mind-blowing graphical features.
We have put together a collection of some highly-creative code snippets that use classic assets in new and exciting ways. Enjoy, and be sure not to operate any heavy machinery for a few minutes after viewing! Your eyes may play some tricks on you.
Big Torus, Little Code
Is That a Petri Dish?
Beyond the beautiful detail of this “circle packing” animation, there could be very useful real-world adaptations. This could be used, say, to demonstrate how bacteria grows or to re-create a pointillistic painting. Regardless, it’s quite mesmerizing to watch.
Textures still make for great backgrounds. And this night sky full of glowing (and occasional shooting) stars shows that special effects don’t have to be overbearing. You can create something that has movement while maintaining usability.
Dynamic Disco Ball
This one is quite interesting. It uses reflection mapping with Three.js to create a disco-ball like surface that changes as you move your cursor. Moving up and down results in a change to the smoothing, while sideways movement increases the “bumpiness” of the texture.
Feed the Tree
That’s a Lot of Dots
At first, this example could be mistaken for footage of a cosmic event. In reality, it’s a script that uses WebGL2 to create transform feedback particles. There are 500,000 color-shifting particles here that react to your cursor movement. If this is indeed happening in space, we’d better take cover.
Back to Math
Let us not even try to explain the concept of a Logarithm. Just know that, in animated form, it is quite compelling to watch. A colorful, shape-shifting texture gives off an incredibly retro vibe. As a bonus, clicking on the animation will create a new effect.
If this doesn’t bring a smile to your face, you might do better studying the mystery math above. With spinning shapes layered on top of an ever-changing background, there is a lot going on here. While probably not a great fit for a page background, it certainly would bring focus to a banner or hero area.
A Pattern of Change
The examples above have taken something basic (a shape, a pattern, etc.) and transformed it into something else completely. These snippets are colorful, interactive and compelling.
It just goes to show what the right mix of coding knowledge and creativity can achieve.
There is still great value in capturing email addresses through your website. Keeping users informed of new content and promotions helps to build brand loyalty. When you think about it, this is one of the key methods for turning visitors into customers.
Doing this within WordPress has often required a piecemeal approach. For example, you might need to install separate plugins to handle signup forms, event triggers and integration with a mailing list provider. It can take a lot of effort to keep everything running smoothly.
MailOptin changes this dynamic. It combines lead generation and email automation capabilities – all in one incredible WordPress plugin. That means no more worries about making multiple pieces work together. With MailOptin, you have the complete solution.
Let’s take a look at what MailOptin does and how it can benefit your business.
Grow Your Email List: Efficiently and Intelligently
Don’t settle for plugins that offer only generic options. With MailOptin’s lead generation features, you can build your list in a highly-customized fashion. It provides the perfect fit for your site and your goals.
Build Attention-Getting Forms
MailOptin’s form builder provides powerful options and a familiar interface. It uses the WordPress Customizer, making the entire process remarkably simple.
What’s more, you can choose from a number of highly-effective implementations. Use lightboxes, slide-ins, widgets or embedded forms to capture leads in a way that suits your audience. And, choose from over 30 custom CSS3 animation effects to draw attention.
Once you have the perfect form, you can display it based on a number of criteria. Forms can be triggered based on user scrolling, time spent on your site, pageviews, referrals and more. MailOptin can even detect ad blocking software and offer up custom content.
Don’t want to bother visitors when they first hit your site? The exit intent feature detects when a user is about to leave your website and will display a signup form before they leave.
Receive Actionable Data
With Google Analytics integration, you can easily measure the results of your lead-generation efforts. All of the relevant data you need is helpfully displayed within WordPress. To dive in even deeper, use the built-in A/B split testing tool to see which versions of your forms make the most impact.
Plus, MailOptin’s LeadBank feature offers a treasure trove of user information. It provides you with crucial data, such as lead referrer, along with the time and place of each conversion.
Integrate with Top Providers
MailOptin has been built to enable easy integration with the top email marketing and CRM providers. Connect your site with services like MailChimp, Constant Contact, Campaign Monitor, AWeber and more.
Automate and Streamline Your Mailings
Finding the time to create and send mailings to your list can be difficult. That’s why MailOptin includes features that automate the entire process. You’ll be able to keep subscribers engaged and informed by sending email automatically or based on trigger events.
Create Custom Email Templates
MailOptin’s email builder lets you quickly craft custom email templates that match your brand. Best of all, everything is built within the WordPress Customizer. This means that you’ll have a stunning template in just minutes.
Send Automatically or by Event Triggers
One of the true killer features of MailOptin is the ability to send emails based on the criteria you set. For instance, you can send out a mailing whenever a new post is published on your website. You can send them to your full list or custom segments that consist of users, roles, categories, tags and more.
If you’d prefer mailings to go out at regular intervals, the scheduling feature is for you. Choose to send newsletters out on a daily, weekly or monthly basis. With MailOptin, you’re in complete control.
Send Through Your Mailing List Provider
You read that right. MailOptin connects with your mailing list or CRM provider to send messages via their servers. You get the reliability of using your provider’s service with the convenience of setting everything up within WordPress.
As an example, MailChimp users can connect their account to their website using MailOptin’s integration. When a mailing is sent, you’ll see a record of it within your MailChimp account. It’s all fully-integrated.
Get Started with MailOptin
The days of using multiple tools to manage your email marketing needs are over. With MailOptin, you have access to everything you need right inside of your WordPress website. This plugin has you completely covered.
Install MailOptin Lite for free today and start taking control of your email. Looking for even more power? You’ll also want to check out MailOptin Premium, which offers the full-suite of outstanding features.
Email marketing doesn’t need to be so complicated. MailOptin streamlines your workflow and helps you achieve your goals.