The Grumpy Designer’s Ode to Troubleshooting

Over the years, I’ve had more than one client tell me that I have terrific job security. Why? Because something always breaks. And, even for a client who is pretty handy with their website, the need for someone to go in and troubleshoot will continue to be there.

There is certainly some truth to that logic. Hardly a day goes by where I don’t get a message regarding something that either doesn’t work at all or should work in a different way. Oh, and then there are those “little” requests that turn into a Pandora’s box full of trouble.

To put it simply: These days, nothing is simple.

A Complex Web

In recent years, it sure seems like the types of issues I deal with have become more difficult. This makes sense, as websites are ever more complex than they used to be.

Back when my specialty was building static HTML sites from scratch, there were only so many things that could go wrong. Maybe a link pointed to the wrong place or an HTML element wasn’t properly closed. Those were the good old days.

As soon as CSS, JavaScript and PHP became a part of my everyday existence, the party was over. Code can get complicated in a hurry. In addition, sites are dependent on so many things: APIs, libraries, frameworks, plugins, themes, etc. Each one of these items is another link in a chain that is fraught with peril. Something can go berserk at any time.

That makes diagnosing a problem even more difficult. For example, if your WordPress site has an issue, the steps for troubleshooting go something like this:

  • Switch to a default theme;
  • Deactivate all of your plugins;
  • One by one, re-activate each plugin and test for the issue;
  • Oh yeah, you better remember to do this all on a staging site;

Even on small websites, this is a very time-consuming process. And, even if you do happen to figure out the culprit, you then have another problem on your hands: What do you do with the offending theme or plugin?

I don’t know how many times I’ve found myself having to work as an intermediary between the authors of various themes and plugins. Once in a while, I’m fortunate enough to find a quick resolution. But so often, I’m stuck in a situation where I either have to tell my client that we can’t use a particular piece of software anymore or we just have to live with the issue. Not cool.

Coffee being poured into a mug.

The Odds of Improvement Are Slim

This grumpy designer doesn’t have a crystal ball that can see into the future. But my feeling is that websites aren’t going to revert to a simpler existence anytime soon.

Every day, it seems like another can’t-miss piece of code comes out that we want to implement into our projects. Sometimes it’s functionality, sometimes it’s vanity. Regardless, it adds another link to that chain.

The one possible exception here may be in static site generators such as GatsbyJS – at least on the front end. Linking it up with a WordPress back end still has some potential for time-consuming issues that need debugged.

That being said, the bottom line is that we are asking our websites to do more than ever before. As long as that trend continues, it stands to reason that web designers are going to spend more and more time in troubleshooting mode.

A messy pile of tools.

Adjusting to the New Reality

So, maybe we’ll just have to accept that this expanded complexity is another inconvenient truth of web design. The question is: What can we do about it?

I think the answer is in how we build and manage our workflow. For instance, charging more for certain features because we know they’ll require a lot of extra effort to make them work. Then, it may also be a matter of building time for these tasks into our daily schedule.

And maybe that last one is the most difficult part of all. Jumping into this rabbit hole of debugging code takes time away from the things I feel I should be doing. If I’m endlessly trying to fix something, there are naturally other projects I’m not able to work on in that moment.

Then there is the spontaneity of it. I’m not expecting to spend a large portion of my day on a problem that arises out of nowhere. Hence, all plans turn to dust at that point.

However, this is where experience can help. Because it seems like such a roadblock is inevitable, perhaps it’s worth building some extra padding into project deadlines. This provides some space to breathe and tackle whatever issues that rear their ugly heads.

Construction signs.

A Blessing and a Curse

When you look back at the history of web design, it’s pretty amazing to think about how the technology portion of things has changed. What used to take a team of highly-skilled developers are now just a few clicks away. Just about everything is within our reach. But with that power can come a whole lot of problems.

That means more time spent pouring over mountains of code or going back and forth with tech support. It’s just the price we have to pay for the ability to create highly-functional websites.

No, this doesn’t mean I like troubleshooting any more than I did before. But I also realize that it is becoming a larger portion of my daily grind. And all any of us can do is try to make the best of it.

The post The Grumpy Designer’s Ode to Troubleshooting appeared first on Speckyboy Design Magazine.


Weekly News for Designers № 512

Envato Elements

RegexGuide – A tool that takes the pain out of writing regular expressions.
RegexGuide

A tiny guide to Variable Color Fonts – Learn the secrets behind this promising new development in typography.
A tiny guide to Variable Color Fonts

Exploring the Beauty and Power of Volumetric Backgrounds in Web Design – Examples of how 3D animation can enhance web backgrounds.
Exploring the Beauty and Power of Volumetric Backgrounds in Web Design

Making Gooey Image Hover Effects with Three.js – Use this tutorial to create a compelling image reveal effect.
Making Gooey Image Hover Effects with Three.js

Arcade Game Typography reminds us of the best of 8 pixel monospaced fonts – A look at the fonts behind your favorite classic video games.
Arcade Game Typography reminds us of the best of 8 pixel monospaced fonts

Focus Overlay – A library for creating overlays on focused elements. Beautiful design and better accessibility.
Focus Overlay

Too Many Threads: A Scattered Approach to Coding – Why scouring the support threads for code isn’t always the best idea.
Too Many Threads: A Scattered Approach to Coding

An Illustrated Guide to Some Useful Command Line Tools – A resource for finding helpful add-ons to the command line.
An Illustrated Guide to Some Useful Command Line Tools

Free Abstract Tropical Patterns and Minimalistic Vectors – Bring the spirit of the tropics to your projects with these free vector graphics.
Free Abstract Tropical Patterns and Minimalistic Vectors

Accessible Drop Caps – Creating a drop cap that maintains accessibility may be more involved than you thought.
Accessible Drop Caps

Haptic UX — The Design Guide for Building Touch Experiences – Build experiences that leverage our sense of touch.
Haptic UX — The Design Guide for Building Touch Experiences

CSS variables, input[type=”color”] and form animations – A quick guide to creating a more interesting set of form elements.
CSS variables, input[type="color"] and form animations

The Future of Freelancing with WordPress – How Gutenberg, leadership and corporate influence may affect freelancers.
The Future of Freelancing with WordPress

Awesome Design Plugins – A resource for finding plugins for Figma, Sketch and Adobe XD.
Awesome Design Plugins

GitRoyalty – Add a paywall to your open source projects for subscribers via git.
GitRoyalty

Buy Me a Coffee – Help support content creators through this payment app.
Buy Me a Coffee

Meet Spectrum, Adobe’s design system – Have a look at Adobe’s new design system and download UI components.
Meet Spectrum, Adobe’s design system

Typography Resources – A curated directory of resources to buy, learn and acknowledge great typography.
Typography Resources

50 Free Animated Icon Set – Download a set of free animated icons, available in multiple formats and styles.
50 Free Animated Icon Set

The post Weekly News for Designers № 512 appeared first on Speckyboy Design Magazine.


Shining Examples of the Flashlight Effect Web Design Trend

2019 has already seen numerous tiny trends where the mouse cursor played first fiddle: mouse trails, repelling effects, interactive 3D globes and fantastic hover effects – to name a few. Playing with the canvas has become mainstream. Everyone wants to become a proud part of it and make a valuable contribution.

Indeed, HTML5 and modern experimental JavaScript libraries have opened enormous possibilities for web developers. And, it seems that we have finally moved from the stage of dipping the toe with occasional experiments to a stage of constant innovation.

The practice shows that artists keep both feet on the ground. They are eager to push the boundaries and test the limits of technology. Today we are going to examine another small trend.

We have already explored the outstanding X-Ray effect. Now, it is time to turn our gaze towards effects that mimic the flashlight. Both of these tricks let us see something that is hidden from the naked eye. However, while the first one feels techy and advanced, this one, on the contrary, feels simple and rustic.

It picks up our interest in a playful and unobtrusive way. Here, the mouse cursor reminds us of a wand that produces a flash of light to illuminate the surrounding area. It feels truly magical. Lumos Maxima, one of the popular incantations in Harry Potter universe, was skillfully imitated in the web expanses; and we are going to enjoy its digital incarnation. Let’s begin.

thePXA

ThePXA is a creative agency. It is only natural that the team wants to stand out from the crowd. Therefore, their website greets the audience with a unique welcome area. The entire screen is an interactive playground. It is dark with lots of particles that looks like a night sky with hundreds of snowflakes.

Here the mouse cursor is a flashlight with quite a big range. It efficiently illuminates elements of the interface, making them brighter. The trick triggers a sensation that you can peek inside and find something interesting in the darkest corners. Simple, but truly engaging.

Example of thePXA

Creative Nights

Creative Nights is another point in case. The website also has dark aesthetics; I’d even say almost noir. However, it does not feel ominous; it feels intricate and sophisticated. Much like the previous example, here the mouse cursor creates a halo around itself, highlighting a relatively large area.

Unlike thePXA where all the elements of the user interface are visible, here the scene is hidden behind the darkness. Only the mouse cursor turned into a flashlight is able to cut through and reveal what is there.

Note this trick is used to transform a regular carousel with portfolio pieces into an area of play. It interacts with users and ignites their interest on a subconscious level.

Example of Creative Nights

L2D

The effect plays nicely with 3D solutions as well. Consider L2D.

Here, you can see a hero area where a 3D experiment with canvas steals the show. It entertains online visitors as well as demonstrates the professionalism of the company.

While some may find it more than enough for producing an impression, the team has decided to reinforce the impact even more. They have transformed the mouse cursor into a flashlight that lightens all of the object’s faces. Smart and creative.

Example of L2D

Pygar

Pygar is an example where the flashlight effect meets the X-Ray effect, resulting in a thrilling outcome. It differs from the previously-mentioned in several ways:

  • First of all, the website has a light aesthetic with an almost white background.
  • Secondly, the mouse cursor is a huge blob that is smoothly and continuously morphing. Sometimes, it feels like it lives its own life.
  • Third, it shifts its color from purple to blue, continually drawing attention.
  • Fourth, it changes its size from small to large.
  • And finally, it illuminates text by painting it in various colors.

I bet it is something that Luna Lovegood would appreciate. Though, we also find it amazing.

Example of Pygar

Lusion

Much like in the previous example, the team behind Lusion has ditched the traditional white light beam and opted in favor of a colored one. Although it does not change its tone constantly, it still looks outstanding.

Here, the mouse cursor is a small red dot that reminds a bit of a laser pointer. Unlike its real-life analog, this one has a little halo that lightens the surrounding surface. It goes perfectly with the purplish environment. What’s more, it nicely co-opts with the interactive piece on the back, creating an intricate interplay.

Example of Lusion

We have already seen how the solution is used as a searchlight. Now, it is time to examine another way of implementing this trend.

Le Mirabeau Hotel / Once Upon a Time Mag

Le Mirabeau Hotel and Once Upon a Time Mag are two representative examples. Here, the solution is not loud, overwhelming, or attention-grabbing. It is a finishing touch that nicely completes the composition, as well as adds a subtle bit of interactivity to the project. Both cases feature a barely-perceptible flashlight effect. Yet it is here, and it certainly makes its contribution to the user experience.

In the case of Le Mirabeau Hotel, the mouse cursor just slightly lightens the background. In this way, the team has unobtrusively highlighted the magical wintery atmosphere that is presented in the pictures.

Example of Le Mirabeau Hotel

The team behind the website design of “Once upon a Time Mag” pulls the same trick. However, this time the mouse cursor gently reveals the edges of the surface, thereby showing its subtle volumetric nature.

Example of Once upon a Time Mag

Mynrd

Joel Maynard takes this trend not just seriously, but also literally. While in all the above examples, the mouse cursor feels like a wand whose end exudes light, here it has the shape of a classic flashlight.

In actuality, you are moving a torch across the surface. It is also a seeking game. The author invites you to take part in a small hunt. You need to find his works that are hidden throughout the homepage.

For those of you who are in no mood to search, there is a “magic word” that reveals everything in one click.

Example of Mynrd

Looking for the Light

It is safe to say that this is the year of the mouse cursor. It stands behind numerous outstanding solutions, findings and extravaganzas. They not only energize the interface with JavaScript magic, but also enrich the user experience with lovely surprises.

While the flashlight effect may sound a bit ordinary at first, it is certainly inspiring. And unlike the rest, it has a hint of mystery that naturally drums up the interest and encourages us to explore the project longer.

The post Shining Examples of the Flashlight Effect Web Design Trend appeared first on Speckyboy Design Magazine.


Bring Real-Time Google Search Results to Your App with serpstack Sponsored

Developing a successful SEO strategy requires a real commitment. Rankings for various keywords can fluctuate quite a bit, and it can be difficult to stay ahead of the game. After all, there’s only so much time in the day to monitor your site’s performance.

The sheer amount of work involved means doing this the old-fashioned way is becoming nearly impossible. Thus, it’s important to find efficiencies wherever you can. And one of the most effective ways to keep up is through the use of automation.

That’s where serpstack can make all the difference. It’s a real-time, JSON REST API that brings Google search results right to your door. This easy to use service provides you with the data you need to stay on top of SEO performance.

Let’s take a look at how it can make your job that much easier.

serpstack home page.

Accurate SERP Results and Scalable Performance

A big part of SEO is in knowing where to find value. What are the most valuable keywords? Conversely, which ones are proving to be ineffective?

serpstack makes the process of gathering this information a breeze. Take a look under the hood and see why everyone from SEO specialists to marketing professionals and content creators trust it to provide timely, accurate information.

Customized Results

Simply put, some data is just more relevant to your situation. With serpstack, you can tailor your automated search queries to match your needs. Scrape SERP data based on factors such as language, devices and locations.

Get Everything Google Has to Offer

Google lets you search a variety of data types and serpstack supports them all. In addition to standard web searches, you can also grab news, videos, images and shopping results. Whatever your niche, you’ll have the power to find what’s important to you.

Speed, Power and Security

serpstack has been built to work at scale and won’t place your requests in a queue. So, whether you have a hundred searches or a million, you can be confident that the API will maintain top performance throughout. Security is also a top priority, and serpstack uses bank-grade 256-bit SSL encryption to protect each and every request.

An example of serpstack API results.

Save Time and Avoid Problems

The more API calls you make, the more obstacles there are to deal with. serpstack’s powerful proxy network will automatically take on those challenges for you. It solves CAPTCHAs, offers global IP addresses and browser clusters so that you don’t have to. Just sit back and let them do the dirty work.

Compatible with Any Programming Language

serpstack’s API responses are available in both JSON and CSV formats. This allows for maximum compatibility, enabling you to use the language of your choice.

serpstack feature listing.

Get a Free serpstack API Key Today

Looking to boost your SEO strategy? You’ll need the right data to serve as your guide. With serpstack, you can start getting highly-customized, real-time Google search results in mere minutes.

Plus, with extensive documentation and a helpful support team, you’ll have the resources you need to achieve your goals. They’ll be there for you every step of the way.

Best of all, you can get started with serpstack for free. Grab your free API key today and take advantage of world-class SERP technology.

The post Bring Real-Time Google Search Results to Your App with serpstack <span class="sponsored_text">Sponsored</span> appeared first on Speckyboy Design Magazine.


Too Many Threads: A Scattered Approach to Coding

The internet is indeed a wonderful thing. You can get answers to virtually any question – some may even be true.

Web designers know this all too well, as we tend to search for guides on how to do all kinds of things. Maybe it’s a cool CSS effect we saw somewhere or how to connect with an API. Whatever coding challenge we face, we’re sure to find a number of examples and support threads that can help.

In theory, this is great. These resources are invaluable in terms of finding solutions for even the most complex issues. But for me, it has turned programming into a very scattered affair.

A Need for Speed

Here’s the situation. I know I have my own limitations as a programmer – and I’m okay with that. Maybe I’ve accomplished more than I thought I could in this area, but I’m still no expert.

Over the years, I’ve conditioned myself to search for easy solutions. Sometimes it’s a WordPress plugin or maybe a little script I found on GitHub. The hope is to either find a complete solution or at least a code snippet that requires only a few minor changes (well-commented by the author, of course) and move on with the rest of my project.

Once in a while, this actually works. But modern websites are getting more complex. They require a higher level of functionality and need to look good on every screen. Thus, finding exactly what I need has become harder.

Instead, I’m finding what appear to be mirages in the desert. It could be a Stack Overflow thread from a developer with a similar issue, or a blog tutorial. While it may look promising, there’s often some key element missing.

So, what do I do? I cut and paste code all over the place – making a mess and running around in a big old circle. Turns out I’m wasting time rather than saving it.

Blurry lights on a city street.

An Epiphany

The result of this method has been a bit of madness. Recently, it came to a head while trying to work with the Google Maps JavaScript API.

There are absolutely tons of threads regarding the things I needed to do (placing multiple markers on a map, for instance). Of course, none fit my situation perfectly. And, while I know some JavaScript, I wasn’t confident that I could write enough on my own to make it all work.

I ended up spending hours switching from one snippet to another with very little luck. Finally, it dawned on me that my approach was just not working. I was haphazardly trying to find a quick fix. And in the process, I was taking myself far away from any real answers.

This led me to try something different. Here’s what I did:

Erased the Mess

I had amassed quite a jumble of code, which I promptly deleted. Maybe that sounds drastic, but it wasn’t working anyway. A fresh start just seemed better at this point.

Wrote a List

Despite my attempts, I did not find a quick and easy solution. Part of the issue may have been that I hadn’t defined any clear description as to what I needed the script to do.

So, I typed up a surprisingly short list of what my Google Maps script had to accomplish. Within that, I set some milestones.

For example, the first thing on the list was to simply display a map on a page. No markers, no fancy options – just a map. The idea was to start small and take the rest one step at a time.

Slowed My Pace

There is a part of my personality that makes me crave ruthless efficiency at work. I feel like every second wasted is keeping me from the rest of my to-do list.

Coding doesn’t really work that way, however. Just like good design, it requires some trial and error. You need patience to do it right. And you don’t generally accomplish everything in one shot.

In that spirit, I slowed down physically and mentally. No more rushing about. I promised myself that I would avoid support thread hopping – at least until I had a firm idea of exactly what my sticking points were. For the most part, I stuck to it.

A crumpled piece of paper.

A Better Approach for Better Results

It’s amazing what hitting the reset button on a coding project can do. Starting over and slowly tackling one piece of the puzzle at a time led to a less stressful process. While I still hit some roadblocks, it was much easier to research and experiment with a single issue, as opposed to everything at once.

I think there’s a bigger lesson in the whole experience as well. Web design, like much of our culture, seems so focused on having answers delivered on demand. And since there are an endless amount of resources out there, it’s easy to fall into a trap of hoping that someone else can solve your challenges with cut-and-paste speed.

But those resources are there to lend a helping hand – not do our work for us. Looking at the Stack Overflows and CodePens of the world are a great place to get ideas and inspiration. But they can’t remove every single barrier. In the end, we still have to put in the time and effort to make things work.

In my case, I think part of the struggle was that I learned to do a Google search long before I knew any fundamentals of code. As a result, I ended up reversing the order of how to get things done. I looked for complete solutions first, instead of just searching for the particular problems I needed to solve.

Hopefully, I’ve learned my lesson. Because another challenge is undoubtedly right around the corner.

The post Too Many Threads: A Scattered Approach to Coding appeared first on Speckyboy Design Magazine.


Weekly News for Designers № 511

Firefox 70 — a bountiful release for all – A look at new features, including securely generated passwords.
Firefox 70 — a bountiful release for all

How Ultra-Thin Lines in Web Design Can Create an Impact – Prime examples that show the power of this design trend.
How Ultra-Thin Lines in Web Design Can Create an Impact

Designing accessible color systems – Learn how payment processor Stripe chose colors that improve contrast and legibility.
Designing accessible color systems

Making Tables Responsive With Minimal CSS – Common sense approaches to making tables work on small screens.
Making Tables Responsive With Minimal CSS

Ghost 3.0 – Look under the hood of this latest version of the headless CMS.
Ghost 3.0

TinaCMS – An open-source site editing toolkit for React-based frameworks, like Gatsby and Next.js.
TinaCMS

Accessible icon buttons with masks and SVG – Use this guide to create fully-accessible icons for your projects.
Accessible icon buttons with masks and SVG

Email Love – Find email resources and inspiration here.
Email Love

Font style matcher – A tool that helps minimize the discrepancy between a web font and its fallback.
Font style matcher

GitHub repository language overview – How? – If you’ve ever wondered how GitHub knows the languages a project is using, check this out.
GitHub repository language overview - How?

Gridsome – A Vue.js framework for creating modern websites.
Gridsome

The Five Inconvenient Truths of Web Design – How success and sanity come from embracing the things we learn from experience.
The Five Inconvenient Truths of Web Design

Open Doodles – Check out this free set of sketchy illustrations.
Open Doodles

Creating a custom focus style – Add an intuitive and accessible touch to your design elements.
Creating a custom focus style

10 Coded Animated Scenes for Halloween Design Inspiration – There are plenty of fun tricks and treats to be had with this collection.
10 Coded Animated Scenes for Halloween Design Inspiration

Good UX = Boring UI. Don’t Be Creative – Why creative solutions may just be getting in the way of UX.
Good UX = Boring UI. Don’t Be Creative

Gifski – A Mac app that turns your videos into high-quality animated GIFs.
Gifski

Creating Wild and Crazy Backgrounds with CSS & JavaScript – Put on your sunglasses and check out these ultra-loud backgrounds.
Creating Wild and Crazy Backgrounds with CSS & JavaScript

How to choose a font for a project – An example process for picking the right typography.
How to choose a font for a project

The post Weekly News for Designers № 511 appeared first on Speckyboy Design Magazine.


40 Examples of Clever Typography in Logo Design

Typography in logo design says a lot about your business. When used correctly, typography can add balance to your logo. It can also make your logo more memorable if you use nothing but typography as simple logos are often the ones that we easily remember.

When it comes to using typography or creating typography-based logos, there are a few things to keep in mind. For starters, you have to know the intended audience. Who is this brand trying to attract and what are their personal interests, preferences, and pain points?

Once you know who the audience is, you have to understand what feelings the logo should convey and how it should make them feel. Of course, you also have to be familiar with the visual basics and know which fonts would be better suited to convey a particular message.

For example, a brand that wants to present itself as traditional and reliable would do well with serif fonts in their logo. A brand that caters to a young audience, on the other hand, could use a sans-serif font. Another example is a high-end luxury brand that might use script fonts to convey elegance and luxury.

Another aspect of logo design that you should pay attention to is the use of color. For starters, limiting the choice of colors is the best way to ensure your logo looks professional. Then, you need to choose the color based on the message and feel that should be conveyed.

We’ve rounded our favorite logo examples that make use of clever typography with fantastic color and font selections. They also all make use of negative space to create an effective and memorable logo.

Codeshift Logo Design by Dalius Stuoka

Codeshift clever typography in logo design

Attach Logo Design by Paulius Kairevicius

Attach clever typography in logo design

Logo Creation Kit by Zeppelin Graphics

Logo Creation Kit clever typography in logo design

Vip1 Identity Project by Leo

Vip1 Identity Project clever typography in logo design

Extend Logotype by Vlado Paunović

Extend Logotype clever typography in logo design

Kingdom Wordmark Logo by Sumesh A K

Kingdom Wordmark clever typography in logo design

Gorillove by Vaneltia

Gorillove clever typography in logo design

Minimal Logos Vol.4 by Zeppelin Graphics

minimal clever typography in logo design

Heavy Logotype by Vlado Paunović

Heavy Logotype clever typography in logo design

Seolution.it by Mattia Moretto

Seolution clever typography in logo design

Rock Fries by Ahmed Creatives

 - clever typography in logo design

The Horse Club by Ahmed Creatives

 - clever typography in logo design

Bark And Sip Logo by Peter White

Bark And Sip clever typography in logo design

Hatchet Logo by Jordan Wilson

Hatchet clever typography in logo design

OpenBox by Alek Triptic

OpenBox clever typography in logo design

Watercolor Logo Templates by Switzergirl

Watercolor clever typography in logo design

Japan Logo by Ina Basholli

Japan clever typography in logo design

Sydney Logotype by Vlado Paunović

Sydney Logotype clever typography in logo design

Umbrella Wordmark by Jabir j3

Umbrella Wordmark clever typography in logo design

USB Logo by Piotr

usb clever typography in logo design

Check Logo by Ina Basholli

Check clever typography in logo design

Geometric Logo by Zeppelin Graphics

Geometric clever typography in logo design

Drop Logo by Ina Basholli

drop clever typography in logo design

Milk Logo by Sumesh A K

milk clever typography in logo design

Doctor Wordmark by Aditya

Doctor Wordmark clever typography in logo design

Perforation Logotype by Vlado Paunović

Perforation Logotype clever typography in logo design

My Indian Closet by Ancitis

My Indian Closet clever typography in logo design

Warning Logo by Ina Basholli

Warning clever typography in logo design

Minimal Geometric Logo Collection by Eightonesix Studios

Minimal Geometric Logo Collection clever typography in logo design

Dyslexia Logotype by Vlado Paunović

Dyslexia Logotype clever typography in logo design

Blind Wordmark by Sumesh A K

Blind Wordmark clever typography in logo design

Vintage Logo Collection by Orca Creative

Vintage Logo Collection clever typography in logo design

Smash Logo by Sumesh A K

Smash Logo clever typography in logo design

Disappear Logotype by Vlado Paunović

Disappear Logotype clever typography in logo design

Technology Logo Collection by Eightonesix Studios

Technology Logo Collection clever typography in logo design

Jankeš Beekeeping by fraGile

Beekeeping clever typography in logo design

CodeMaus by Mads Burcharth

 - clever typography in logo design

North by Sehban Ali Akbar

 - clever typography in logo design

Cleaver Logo by Sehban Ali Akbar

Cleaver clever typography in logo design

Mystery by Sehban Ali Akbar

Mystery clever typography in logo design

Jump Logo by Sehban Ali Akbar

jump clever typography in logo design

Handpicked Logo by Minimalexa Design

Handpicked Logo clever typography in logo design

3 Degrees by Minimalexa Design

3 Degrees  clever typography in logo design

The post 40 Examples of Clever Typography in Logo Design appeared first on Speckyboy Design Magazine.


The Future of Freelancing with WordPress

If you’ve paid much attention to the WordPress space in the past year, you may have noticed that it’s been a time of prolific change. Perhaps the most public of those changes was the integration of the new Gutenberg block editor. This, along with some other recent behind-the-scenes developments, have helped to usher in a turning point.

This affects the entire community. But today, I’m going to focus on a group near and dear to my own heart: Freelancers whose primary business is working with WordPress.

First, Some Background

During the past few years, we’ve been hearing about how WordPress is going to be increasingly powered by JavaScript. Of course, WordPress core, plugins and themes have already been utilizing it to various degrees. But Gutenberg has really brought the language to the forefront.

This, combined with concerns regarding the project’s leadership/governance, along with both acquisitions and funds raised by WordPress founder Matt Mullenweg’s company (Automattic), have piqued the interest of those of us who make a living with the open source CMS. There are questions about what all of this means to freelancers and the community at large.

It’s a very dense subject. If you want a more complete picture of what has been going on, I’d recommend this interview with WordPress entrepreneur Matt Medeiros. He and Brian Krogsgard dive into a lot of the issues at hand.

But for our purposes, let’s talk about how being a “WordPress freelancer” is evolving and the challenges that presents.

JavaScript code on a screen.

A Time of Transition

For those who build websites with WordPress, this moment seems like one of great possibilities mixed in with a lot of uncertainty. Gutenberg brings with it the ability to create more complex layouts than the Classic Editor. Yet, for some this might not be quite enough.

While the block editor can be expanded via building custom blocks or third-party plugins, it still lacks the fit and finish of an established page builder. And even though custom blocks are an exciting concept, they present a major barrier to entry for those of us who are not JavaScript experts.

True, we can get around this obstacle with plugins that do some of the heavy lifting for us. But to take full advantage of Gutenberg, it’s going to require the commitment of time and money to become educated. For a busy freelancer, this can be a challenge.

As for our clients, that’s another issue. A new editor means retraining clients to learn the nuances of Gutenberg – even as it continues to evolve. This is certainly an opportunity to increase revenue. But again, a solo entrepreneur or even a small team only has so much time for client education. Thus, there’s a real temptation to stick with the Classic Editor for a bit longer.

When it comes to building websites, it feels like we are at a crossroads. Figuring out the right path for both ourselves and our clients is both crucial and incredibly difficult. The decisions we make now are ones we will have to live with for years to come.

Where Is WordPress Headed?

Taking a look at the bigger picture, there is an existential conversation about the future of WordPress. Up until now, it felt like so much of the project’s direction was guided by a wonderfully diverse community. Dedicated volunteers, plugin and theme authors, designers, developers and everyday users have all had (to varying degrees) a stake in the future.

But as WordPress has grown to power over 30% of the web, there is concern that a larger corporate influence might be in the works. This is not necessarily a terrible thing, as it may in fact improve communication, stability and performance – things we can all benefit from.

Potential Pitfalls

That being said, it is also possible that larger investments from the corporate world takes WordPress in a direction we don’t recognize. For example, there may be pressure from an investor to sell its services through the Jetpack plugin, thus giving them an outsized influence and potentially quieting competitors.

I’m not saying this will happen, it’s just a theoretical situation. But at the heart of such conjecture is the open question of who is in charge of these decisions. Because, for instance, Automattic has received investment dollars from Company XYZ, does that tip the scales in their favor?

Again, this is not intended to vilify anyone or make accusations of bad intentions. However, it is a question that needs answered.

This could have a major impact on freelancers. For instance, someone who builds a plugin that integrates with a third-party service might lose revenue if a competing service is being promoted via an official channel (like Jetpack).

If that plugin goes by the wayside, it affects more than just its author. It goes all the way down the line to designers who are selling clients on a particular solution to help them achieve their goals.

Not only does it mean potentially switching providers, it also may make us think twice about using a product that doesn’t have an official level of endorsement. The market could shrink as a result.

Directional sign on a desolate road.

What Should Freelancers Do?

One certainty in web design is that things don’t stay the same for very long. The way we work, the tools we use and the expectations of clients are always changing.

Just as we went from hacking together table-based layouts to CSS floats to CSS Grid, we’ll also need to adapt to new methods for building with our favorite CMS.

For some, this may be asking an awful lot. Not everyone has the time to learn JavaScript “deeply” – nor does everyone necessarily want to. However, I’d still like to think that there is a place for them in the WordPress community.

We’re a resourceful bunch and always seem to invent new ways to ease that burden. Tools have already come out to help us bridge the gap and I’d expect that to continue.

As for the direction of WordPress itself, perhaps the best we can do is to be observant, open-minded and make sure our voices are heard. The hope is that, collectively, the project continues to benefit everyone from individuals all the way up to big corporations. That would seem to be in everyone’s best interest.

A microphone on a stage.

Room for Improvement

Finally, on a related note, I’d like to raise a couple of points where I think we can all get better.

First, it’s important to realize that not every decision is made as part of some nefarious plot. So often, we tend to assume the worst of people. We’ve seen this in some not-so-nice things being written of those who are working (as volunteers, mind you) on various projects related to WordPress core.

Second, communication needs to drastically improve. I tend to think that so much of the misunderstanding out there comes from a lack of real dialogue. The WordPress project needs a more user-friendly way to get information out there.

The Make WordPress Blog and Slack channels are great for hardcore developers – but it’s not necessarily built for the everyday user or web designer. This creates a bit of a bubble that seems to fuel a divide in the community.

Beyond those resources, perhaps a new user-centric resource could be built to better facilitate conversation. This would be a place, front-and-center, where anyone could go to learn the reasons behind the big decisions.

Questions could be answered and hopefully result in a better tone and mutual understanding. No, it won’t fix everything. But it would be a step in the right direction.

And it’s much needed. If freelancers are to continue to thrive as part of the WordPress community, it will be because they have a strong belief in the project and a firm understanding of where things are headed. They will use it because it is still the best choice for them and their clients.

In the end, anything we can do to keep this segment of the community healthy and successful is worth doing. The livelihood of WordPress and those who work with it are dependent upon our actions.

The post The Future of Freelancing with WordPress appeared first on Speckyboy Design Magazine.


Exploring the Beauty and Power of Volumetric Backgrounds in Web Design

Being ingenious products of designer creativity and remarkable development skills, digitally created animations have run the show several years in the row. Do you remember all of those scenes that can be explored in several dimensions? Well, it seems that the mainstream is not going to slow down nor fade away. Volumetric backgrounds are proof of that. It is a fresh wave that’s truly inspiring and increasingly techy.

As a rule, such animations are used to occupying the leading positions in web interfaces. However, this is not one of those instances. In this approach, they were shifted to the back – giving way to other integral elements of the interface like the tagline, navigation or logotype.

It may seem illogical and undoubtedly bold. Nevertheless, it has its own merits. Co-existing on equal terms with the content, 3D animations help to create a well-balanced design and harmonious experience.

Art and Science

Art and Science is the official website of the Japan-based brand-related design firm. As practice shows, a website that comes from the land of the rising sun will separate itself from the competition with its incredible charisma, intricate design, extraordinary features, and of course, love of everything advanced. This one is no exception.

Here, a gorgeous polygonal sphere that rotates around its axis marks the hero area. Even though it is incredibly big, has a radiant purple color and occupies almost half of the screen, the tagline on the left still commands our attention. The team has managed to achieve a perfect balance between the volumetric background and content.

What’s more, they have also populated the website with trendy details like vertical lettering, thin lines, and corner navigation. This shows that not everything is riding on the volumetric, globe-based background.

Example of Art and Science

Deca Digital

Deca Digital is another fantastic example that exploits this trend. Unlike the previous one, the team wins over the audience with beautiful dark aesthetics, where black sets a sophisticated tone without much effort. Here you can see another 3D shape.

This time it is a pyramid, though not the usual one. It is created from glassy and glossy surfaces that are spiced up with particles. Much like the polygonal orb in Art and Science, it is also charged with motion.

Once again, note that the tagline on the left stands in stark contrast to the animated background. The team has achieved this thanks to two things. First, they have used several time-proven tricks in the design, such as black and white coloring, a generous amount of whitespace, and of course a left-sided location that is a reader’s natural starting point. Secondly, they have used transparent facets for the pyramid, thereby reducing its visual weight.

Example of Deca Digital

Revolve Studio

Much like Deca Digital, Revolve Studio has a beautiful dark aesthetic. The background features a morphing polygonal sphere and a digitally generated mountain. However, thanks to grey shades and white lettering, these two 3D objects play a purely decorative role remaining as a supporting asset.

Revolve Studio shows us how to achieve the compromise between the volumetric background and content by using 3D objects that lose in contrast to the foreground elements.

Example of Revolve Studio

Unshift

Unshift is another example where the seamless appearance of the background makes the 3D animation less bold and overpowering. Again, the team bets on a traditional black and white coloring that is famous for its ability to create the perfect contrast between the parties.

Therefore, despite sitting in the heart of the screen and moving in various directions, the 3D cube does not grab the entire attention. The logotype and navigation easily stand out from the flow, catching an eye from the get-go.

Example of Unshift

Think? Festival

Think? Festival uses volumetric backgrounds throughout the entire front page. The hero area demonstrates an animation that shows a combo of parallelograms of various sizes that stretches from top to bottom. The rest of the page is populated with the sketch variants of 3D polygons.

In this way, the team adds diversity to the design, and at the same time, ties everything together creating consistency across the sections.

Example of Think? Festival

Prior Holdings / Encry

There are some other fantastic examples, for instance, Prior Holdings and Encry.

The first example has an elegant aesthetic with neutral coloring and a ton of whitespace that produce a businesslike feel. However, the website looks neither insipid nor trivial due to the clever background solution.

It features a long 3D ribbon that follows visitors on their way while exploring the project. It helps to create a continuous experience as well as establish the proper mood. Note, even though the stripe in the back performs a vital role, the content remains a star of the show.

Example of Prior Holdings

The team behind Encry proves that you do not need to push boundaries to create something noteworthy. A small 3D animation in the background can be more than enough to make a statement.

In their case, the backdrop is a simple white canvas with a small Minecraft-inspired cube. It serves as a tool for supporting the theme and idea behind the website. It perfectly symbolizes the blockchain technology and adds a modern twist to the hero area.

Example of Encry

Akufen

The trend can be used, not just as a decorative part of the background, but also as a part of brand identity. Take a look at Akufen.

The website stands out from the crowd with its sophisticated, high-end appearance. It has a wow factor that wins over the online audience from the first seconds. Here the volumetric background underlies the logotype. Note, not only does it stay in motion all of the time, but you can also play with it a little bit. Simply outstanding.

Example of Akufen

Perfect Volume

Even though volumetric scenes deserve center stage in the hero area, they work perfectly as “backup dancers”. What’s more, since the online audience is spoiled with extravagant solutions, intricate ides, and interactive user experience, this approach is warmly welcomed.

Users are ready to consider 3D animation a supportive asset that reinforces the general impression and, at the same time, lets the content occupy its place under the sun.

Therefore, if you want to add something big and dimensional but still keep the content a king, do not hesitate. The above examples show how to do this in practice. Get some valid points from them and bring your idea to life.

The post Exploring the Beauty and Power of Volumetric Backgrounds in Web Design appeared first on Speckyboy Design Magazine.


The Five Inconvenient Truths of Web Design

Being a web designer isn’t easy. Depending on your niche, it requires a combination of finely-tuned technical and visual skills. And it takes a major commitment in order to keep those skills relevant in an ever-changing industry.

What’s more, the proverbial rug can be pulled out from under us at any moment. Tried-and-true methods can turn to dust and great tools can disappear without a trace. Even industry-related legislation can throw everything into a tizzy.

Taken together, it can all be very difficult to deal with – let alone thrive in such an environment. But it’s not impossible.

Part of the path to maintaining both success and sanity comes from embracing the things we learn from experience: the inconvenient truths.

Over my 20+ years as a designer, I’d like to think that I’ve experienced quite a wild ride. In that spirit, I’ve put together a list of “truths” that, once understood, can help to make for a smoother journey.

The Freelance Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Themes, Plugins, Design Assets, and much more!

 

HTML Templates
Boro HTML Template
HTML Templates

 

 

Email Templates
Minilam Newsletter
Email Templates

 

 

Admin Templates
Adminto Dashboard
Admin Templates

 

 

WordPress Themes
MiniMag Magazine Theme
WordPress Themes

 

 

WordPress Plugins
Mobile Menu Plugin
WordPress Plugins

 

 

Mockup Templates
Laptop & App Mockups
Mockup Templates

 

1. A Website Is Forever a Work in Progress

Have you ever been so eager to finish off a project that, once it finally launches, you let out a sigh of relief? If so, how did you react when your client came back a short time later and requested a bunch of changes (or, even worse, reported problems)?

This used to drive me insane. When all you want to do is knock another item off your to-do list, it feels like you’re being dragged right back to where you were. And it gets in the way of that next big thing you want to do.

But it’s exactly the wrong way to look at the situation. I’m starting to believe that there is no such thing as a “completed” website. They aren’t something you can truly finish. Client needs change. Content evolves. Things break.

Once you wrap your head around this fact, it becomes less of a disappointment and more of an expected part of your job.

A construction crane.

2. The Way You Work Will Change

Designers are often creatures of habit. We have specific tools we love. We use our favorite code snippets over and over. We develop a workflow that works for us.

But all of those things will undoubtedly change over time. For instance, the odds are that you work differently now than you did 5 years ago. And the longer you are a part of this industry, the more of these changes you’ll experience.

This can be very difficult. It requires us to evolve along with the web’s standards and best practices – not to mention trends. The web is always progressing for the better, but it takes effort if you want to stick around for the long haul. Indeed, it often means that a periodic reinvention is in order to avoid falling too far behind.

Man in front of three computer monitors.

3. There Will Always Be Someone “Better” (And It Doesn’t Matter)

So often, we judge our own achievements against those of other designers. We can use such comparisons to either prop ourselves up or tear ourselves down.

Here’s the thing: There will always be someone else out there who, according to our own perception, created a better portfolio or has demonstrated a more intricate knowledge of code. Some may take this as proof that they aren’t good enough and don’t deserve success.

But the web is a big place. Another person’s perceived expertise doesn’t disqualify you from anything. You can still be great at what you do, regardless of what anyone else has achieved.

If looking to others inspires anything, it should be to improve your own skills. We are fortunate to work in an industry that offers a ton of educational opportunities. You can learn anytime, anywhere and at your own unique pace.

In the end, it’s about keeping your eyes straight ahead and not worrying so much about what others are doing. While we can take cues from other designers, we shouldn’t be bound by them.

Sign that reads "Everyone Can Code".

4. You Can’t Know Everything

There is a constant weight on web designers to have all the answers. Clients challenge us daily with requests that go beyond the ordinary. And then there is the pressure to keep up with new standards, methods and technologies. It’s easy to feel stressed out and behind the times.

We are inundated with questions and more information than we know what to do with. Sometimes, this can lead to faking it in front of others while silently panicking in private.

One thing I’ve learned is that not everything applies equally. Developments in areas like CSS or WordPress impact my own little niche more than, say, 3D animation or a fancy new mockup tool. And the answer will be different for each of us.

Instead of trying to know “all the things”, focus on the items that have a more direct relationship to your area of expertise.

A woman with the word "Focus" written on the back of her hand.

5. Not Every Project Will Be a Success

Starting a new project is usually an exciting experience. You’re taking off on a new journey and looking forward to creating something great. The expectation is that it will look and function beautifully. You might also expect to make a little money as well.

But the result isn’t always that Hollywood ending we dream of. Sometimes, a project goes off the rails and just doesn’t turn out as well as you had hoped. The reasons why can vary from a client with no clear vision, to tiny budgets, to giving a client what they want – even when it’s not necessarily for the better. In addition, even the best designers can deliver the occasional dud.

Every one of us is going to experience this at one time or another. It’s certainly not fun and there’s always the worry of damaging a hard-earned reputation. But it can also serve as a great learning experience.

Each project, even a failed one, is an opportunity for progress. If things went poorly, figure out why and adjust accordingly.

A sign that reads "Love To Learn".

The Truth(s) Will Set You Free

Experience is one of the greatest tools that a web designer can have. It helps to guide us when faced with a difficult situation. And it gives us perspective about what matters the most.

Sure, I still get stressed on occasion and have self-doubt. But if experience has taught me anything, it’s that those things are only temporary. Instead, I try to look at the bigger picture. If you’re committed to your work and are good at what you do, that tends to bode well for your career.

Once you start to understand the truths associated with web design, the things that used to bother you become just another day at the office. And, most days, that’s a pretty good place to be.

The post The Five Inconvenient Truths of Web Design appeared first on Speckyboy Design Magazine.