1Clanek

There are a massive number of products and tools aimed at the web design industry. And it seems like something new arrives every day.

They may vary widely in scope, but most have one thing in common: the promise of making our job easier. Whether they’re writing superb code, promising can’t-fail functionality, or adding killer special effects, these solutions aim to do the dirty work for us. How convenient!

I, for one, feel a bit disappointed. Despite the hype, I’m not convinced things are that much easier. It’s not as if artificial intelligence (AI) has replaced my most monotonous tasks. In many respects, web design seems to have become even more complex over time.

Besides, much of what advertises an “easier” process tends to come with some serious tradeoffs. Unfortunately, easier doesn’t always mean better.

With that, here are a few things to consider before you trade the tried-and-true parts of your workflow for a quick fix.

Will You Be Locked Into a Bad Situation?

When it comes to designing and building a website, just about every decision requires some sort of buy-in. This is part of the process.

If you’re creating a layout mockup in Figma, Photoshop, or Sketch – you’re making a commitment. As your project progresses, you’ll need to come back to the chosen app again and again. The same principle applies to everything from DIY website builders to programming frameworks.

The difference is in the required level of commitment. Pick the wrong tool, and you may be stuck with it for longer than you’d like. Becoming locked into a specific path may limit your ability to evolve along with the web. And those new features that everyone else is using? It could be that they’re unavailable to you.

That’s why it’s vital to know what you’re getting into. An untested solution may seem attractive now, but where will it be in five years? If it doesn’t hold up, you could end up starting from scratch again.

In some cases, it may be worth the risk. But there’s also something to be said for having future flexibility.

Easier to Build, Harder to Maintain

The promise of a quicker path to launching a website has always attracted the attention of the design community. Skip over the hard stuff and get paid sooner – who wouldn’t want that?

It certainly sounds wonderful. The problem is that, sometimes, an easier start means more difficult maintenance down the road.

Take, for example, the culture of content management system (CMS) plugins. With a platform such as WordPress, it’s incredibly easy to build a website, piece by piece.

It’s certainly possible to build a site that works well enough with this approach. But there is danger in having bits of related functionality controlled by multiple plugins. It’s akin to using string to keep all of your favorite books together. Take one book out of the stack, and things are going to fall apart.

Likewise, if your functionality needs change, this delicate balance can start to crumble. Some plugins may no longer be suitable or are simply too rigid to achieve your goals. That could mean swapping out critical pieces and trying to patch a gaping hole.

This doesn’t mean that you shouldn’t use plugins. But it is worthwhile to think about sustainability. Determine the most sustainable path forward. That may take a little more work up front, but will save you from future difficulties.

Cost vs. Benefit

Quite often, products advertised as making your job easier also tout cost savings as well. But is the easiest way forward really the cheapest?

That depends upon the factors mentioned above. If your website is up and running weeks earlier because of a specific tool, that’s great. But if it makes future maintenance a nightmare, any upfront savings may be short-lived.

Then there’s the ability for future growth. For example, subscribing to a proprietary website platform can get you access to a certain level of looks and functionality. But what happens if that service cannot provide the advanced features you’ll need down the road? And, in the meantime, how much money have you spent to continue using it?

Even if you end up with some savings, you may find that they simply weren’t worth the included hassles and limitations. Trading a few extra dollars in your pocket for a less-than-ideal website is unlikely to make you feel very good.

Before making any decisions, it’s wise to weigh the potential costs, benefits, and pitfalls of a given solution. This ensures that you’re thinking with both the short and long-terms in mind.

Beware of Easy Website Solutions

It’s worth remembering that every path to building a website has a cost associated with it. Whether you utilize free or commercial tools, there will always be time and effort required to use them. Beyond that, there’s also the cost of future maintenance.

Sometimes, you can find a solution that makes web design both easier and more cost-effective. However, it takes careful scrutiny to determine if that’s the case.

There are a lot of products out there that make such claims. Don’t take them at their word. Instead, conduct your own research and find the tools that will work best for you.

The post In Web Design, Easier Doesn’t Always Mean Better appeared first on Speckyboy Design Magazine.

Did you miss our previous article…
https://www.1clanek.info/?p=232

Once they’re out of design school and battling it out in the real world, designers can find themselves in a pretty crappy predicament.

Maybe your teachers warned you to be as discerning as possible when taking on new clients (or maybe they told you the opposite, but you knew it was BS), but reality is often a rude awakening from what you expected when you first started working.

Bills pile up, the rent’s due date looms closer, and suddenly that shady dude who wants you to design his logo and website for $200 and “exposure” doesn’t look too bad.

We all know it can be hard to stick to our guns and seek out quality work that will enhance our careers, rather than drag them down into the mud, but think about one thing for a second.

When you take on a terrible client – one that, say, refuses to pay you either in full or in part, or one that has a million and one changes to make to your designs, you’re actually spending far more in labor costs – and sometimes even in legal fees – to complete that job than you would have if you’d had a few more instant meals and committed to finding a good client.

A bad client is bad news, period. It will always cost you more to maintain a bad client than it’s worth.

Avoiding Micromanager

Clients hire you for a reason: to improve the profitability of their business venture, whether it’s an information website, a product, or a personal brand. At least initially, they know they need a professional to step in and create something usable and which contributes to their overall goal of making more money.

I’ve found that reminding clients of this in a polite, but firm way is incredibly effective in getting them to slow down and hand you back the reins of the project.

Your ultimate goal as a designer is to find clients who will trust you. If there’s no trust there, your clients may become overwhelmed with anxiety and begin to micromanage.

Generally speaking (but not always), the higher you price your design services, the more frequently you’ll find clients who respect your judgment and who will trust you, and the more you’ll drive away those who only want to play dictator.

Make sure you always charge what you’re worth – if you compromise on your prices at any point in your career, it becomes exponentially harder to make up the difference later on.

See No Evil

Nowadays, more and more designers work remotely rather than in person, and many may never even meet their clients face to face. This is good and bad. If you get a good client, it’s awesome to just receive the design brief, communicate through email, and work your magic.

If your client is a bit more difficult, it can be a nightmare. There’s a ton of research that points to face-to-face interaction and body language as being two of the most important factors in building a relationship of any kind – particularly one that involves business.

If you’re working virtually, there’s no way to gauge the chemistry between yourself and your potential client. This is where Zoom can be an immense help, but if you can meet in person, that’s even better.

Regardless of whether you do it in person or on the computer, for long-term projects, it’s important to see your client’s face and hear from their own lips whether or not their personality is something you can deal with.

You can learn a lot about what kind of client someone will be from the way they speak to you, the words they use to describe their work, and the nature of the work they would like you to do, and even from the state of their desk or office.

If someone is a slob, that might be a red flag. But more importantly, if you get a bad feeling from a client, take that as a cue to get the heck out of dodge.

The Warning Signs

If your client doesn’t respect what you do, they will let you know in subtle (and sometimes not-so-subtle) ways, particularly in the way they discuss the project they have for you.

The most obvious red flags are clients who promise you “exposure” or “more clients” at some indeterminate point in the future. If you’ve been hanging around the online design community for any length of time, you’ll know that doing spec work is one of the most detrimental things you can do for your own career, and for the design industry in general.

But even paying clients will use this one when they know they’re offering you payment that a service provider in any other industry would consider an insult. You don’t want to work for “exposure.” Yes, it’s a nice thing to have, but potential clients who say this never mean it the same way you mean it.

For you, exposure is concrete referrals. If your client can provide you with a list of actual paying clients you can contact for future paying work, then that’s fantastic; “expose” away. But if they don’t do this, that means they’re trying to game you and getting payment from them will likely be more trouble than it’s worth. Run!

The next big warning sign is potential clients who downplay the amount of time, effort, or work involved in a project.

“Oh, it shouldn’t really take you that long,” or “a student could do this,” or my favorite: “it’s just a simple little thing – I’d do it myself, but I don’t really have the time.” (By the way, if they don’t have the time to do a “simple little thing,” what makes them so sure it’ll only take you five minutes?)

A client who automatically assumes that what you do won’t take any significant amount of time is a client who does not understand what’s involved in the design process.

This is a client you want to run from, and quickly. Why? Because these are the kind of clients who will always argue with you about your rates or fees, since they’re convinced you’ve been racking up extra hours just to cheat them.

Of course you should be making your clients sign contracts to prevent any legal fiascos, but why put up with the headache when you don’t have to? Just walk away.

The last and possibly most insidious of “red flag” clients is the “designer” or “art director” client. You know the kind. The divorce lawyer or communications startup CEO who secretly wishes they had gone to design school, and who actively wants to play a part in the design process despite having no knowledge of design whatsoever.

These types of clients are also known for being impossible for most sane designers to work with. Therefore they often have unfinished design work that they want to hire you to complete.

They might call you at 3AM with “urgent” changes or ideas they’ve had about your work, or they might be wishy-washy about what they actually want you to do or what they like.

Long before a problem ever arises, you can use these straightforward steps to ensure that you don’t get caught up in a nasty whirlwind of broken contracts and legal fees. Always keep in mind that when you meet with a first-time client, you are evaluating them as much as they’re evaluating you.

The right clients will always respect your time and expertise; they will respond to your questions or concerns in a timely manner, and they will be realistic and professional in their expectations.

The post The Types of Freelance Design Clients You Should Avoid appeared first on Speckyboy Design Magazine.

Did you miss our previous article…
https://www.1clanek.info/?p=217

If you’re of a certain age, you may remember a time when ASCII ruled the internet. Before snarky memes or even the widespread use of animated GIFs, ASCII artwork was passed around like a bowl of candy.

Some background:ASCII (American Standard Code for Information Interchange) is a standard way to encode the text characters seen on electronic devices. Letters, numbers, and all manner of various symbols can be displayed via the format.

Early communication on the internet was text-based. As such, people with way too much time on their hands had a little fun with these assorted characters. Some truly clever artwork was created and routinely shared in newsgroups, bulletin boards and email. It could be impressive, particularly when you consider the technological limitations.

Some very creative developers haven’t forgotten ASCII art. In fact, they’ve used the latest CSS and JavaScript techniques to add movement and other enhancements.

Want proof? That’s why we’re here! Take a look at our collection of code snippets that add a modern touch to an old-school artform.

Trippy Text by Angela Galliat

We’ve seen some pretty far-out textures over the years. But this ASCII-meets-acid-trip text shader is among the most mesmerizing.

Characters seemingly melt into each other within a cluster of rainbows. You may need to take a walk outside after viewing this one.

See the Pen Ascii Text Shader (single text element, no canvas) by Angela Galliat

Delicious Donut by Housamz

Bringing an element of 3D to simple characters is a challenge. That this rotating donut is able to pull off the effect speaks to the power of CSS and JavaScript.

Even better is that the JavaScript source code is itself donut-shaped. That’s a level of dedication not seen since Homer Simpson.

See the Pen JavaScript Donut – ASCII Art by Housamz

ASCII Yourself by Tamino Martinius

Original creations are cool and all, but what about the ability to turn an image into ASCII? That’s what this art generator does.

Paste in the URL of an image, and you’ll see it rendered in character output. Adjust the sliders to add your own personal touch.

See the Pen ASCII Art Generator by Tamino Martinius

CSS Trickery by Tom Lutzenberger

While this snippet isn’t traditional ASCII art, it simulates the effect quite well. By utilizing CSS background-clip, a layer of characters is placed on top of a standard image.

The result is a quick-and-dirty image effect. Bonus points for the ability to change the characters in the HTML to whatever you want.

See the Pen Pseudo ASCII-Art by Tom Lutzenberger

Around the World by thykka

This spinning globe features a beautiful retro look. Seriously, it looks like something out of an 80s arcade game.

The three.js technology behind this beauty is anything-but-old, however. The animation is smooth and the colors vibrant.

See the Pen Rotating ASCII Globe by thykka

Flipping Awesome Animation by Takane Ichinose

While ASCII art can be incredibly intricate, there are times when simple is better. This snippet features just a small collection of characters, but is still effective in getting its message across.

By the way, that message is for you to flip a table. Click anywhere within the presentation to do so. Now, don’t you feel better?

See the Pen CSS Only ASCII Table Flip by Takane Ichinose

Lego Characters by Praveen Puglia

Here’s a unique way to leverage ASCII characters. This snippet takes an ASCII input pattern and outputs them like Lego blocks.

Add your own characters to the textarea, click the button and see your new creation.

See the Pen Legoscii! by Praveen Puglia

Characters Flying through the Air by Dave Kwiatkowski

At its core, this 3D animation is a collection of characters. But it’s also quite stunning to watch.

Notice the use of color and sizing to create the illusion of space. Larger and brighter colors are the “closest,” while the smaller and darker ones hang out in the back.

See the Pen The ASCII Galaxy by Dave Kwiatkowski

Adding Cool Characters to Web Design

What the snippets above show is that, in the right hands, even text can become art. They’re also a reminder of how CSS and JavaScript can breathe life into virtually any project. Put the two together, and you have something fun and, at times, a bit jaw-dropping.

We hope you enjoyed this new spin on ASCII artwork! If you want even more unique examples, please do check out our CodePen collection.

The post 8 ASCII Artwork Snippets That Utilize CSS & JavaScript appeared first on Speckyboy Design Magazine.

Did you miss our previous article…
https://www.1clanek.info/?p=216

Mobile devices have taken over the web. Thus, so much designer attention has (rightly) gone towards ensuring that the websites we build are compatible. We are constantly refining how we implement responsive features so that they work flawlessly on small screens.

While this is a worthwhile endeavor, there are other screens to think about. Large viewports are also a pretty important consideration. It’s rare to find new desktop or laptop devices with screen resolutions below 1080p (1920 x 1080). And both 4k (3840 × 2160) and 8k (7680 x 4320) monitors provide even more screen real estate.

Taking advantage of large screens can be a challenge. The key is in creating a layout that is both usable and legible. In addition, care must be taken to avoid overwhelming users by placing too much in front of them.

If you’re looking to build a website that takes advantage of large screens, we’ve put together some general rules of thumb. They may not fit every situation but will provide you with some factors to mull over before you go big.

Scale Text and Parent Containers Accordingly

Full-width text on a 1080p or 4k screen is a big no-no. It takes too much effort to read and keep track of where you are within a passage. The more text you have, the more difficult it will be for users to digest.

Therefore, text works better when it’s within a limited-width container. Consider an ideal width to be no more than 900-1200 pixels. Whitespace is also important as it allows for some breathing room. Experiment with various container sizes, margins and padding to find what works best with your layout.

Font sizing is also a key factor when designing for large screens. Increasing the font size helps text to stand out and also limits the number of characters displayed on a given line.

Finally, consider increasing the CSS line-height property for adequate vertical spacing between lines. This improves legibility and adds some openness to the overall design.

The Atlantic limits article text to a narrow, easy-to-read container.

Take Advantage of Multi-Column Layouts

One of the big advantages of utilizing extra screen real estate is that it provides plenty of room for multi-column layouts. Perhaps that’s why this technique is often seen on news-oriented websites.

With a traditional 1,000-pixel grid and a layout consisting of three or more columns, the content within tends to get squeezed. A page width of, say, 1,800 pixels allows columns to be spaced with substantial margins. And there’s still room to add internal column padding while bumping the font size up as well.

A wider page can also enable the use of some advanced column configurations. For example, think of a “Latest News” area that takes up the left half of the page – complete with a featured image. Then, two 25% width columns show other text-based headlines to the right.

This may be the perfect type of layout for large screens. It avoids wasted space while potentially making it easier for users to identify content that interests them.

Even better is that a combination of CSS Grid and media queries allow you to cater to the biggest screen resolutions while gracefully adapting to smaller ones.

The multi-column home page of The Washington Post.

Keep Important Items within Reach

Among the potential pitfalls of a super-wide layout is that some key items may require the user’s cursor to travel quite a long distance. At the very least, it’s an inconvenience and poor UX. At worst, it might be considered a pretty big accessibility issue.

However, these concerns can be addressed through design. A top navigation bar can be horizontally centered on the screen so that it doesn’t require a ton of mouse movement. Making it keyboard-friendly can ensure it’s accessible for those who don’t use a pointing device.

The extra width also means that other important pieces could easily get lost in a forest full of content. Elements such as login forms and calls-to-action need to be placed in highly-visible areas.

Integrating them into the site’s header or a static sidebar are possible solutions. A “sticky” header may also provide a path for keeping the most important items consistently within reach.

There’s plenty of room for creativity. But the main idea is making sure that users don’t have to constantly traverse the width of their screen to get to where they want to go.

WNYC Radio utilizes a brightly-colored static sidebar to keep their website navigation in view.

Use Predictable Design Patterns

Taking all of the above into consideration, the overarching theme is in creating a predictable design pattern. This means that the website’s layout allows content to flow in an intuitive manner. While certain items can be designed to draw attention, they shouldn’t detract from the overall user experience.

How does this work in practice? One example is the aforementioned multi-column layout. There may be several sections on a page that utilize columns, each with their own unique number and positioning. That’s fine, so long as there are consistencies in spacing, typography and related styles.

On a news-oriented website, this might mean that the “Technology” and “Editorial” sections have different column layouts. The “Latest News” section could even utilize a different background color. If they are consistent in look, however, it helps to create a flow while also avoiding a monotonous browsing experience. Each section stands out, yet blends into the overall design.

As with any design project, a lot of planning and experimentation is needed when designing with large screens in mind.

LG utilizes an alternating pattern of column layouts on their home page.

Make Effective Use of Those Extra Pixels

The beauty of large, high-resolution screens is that they can be used to create an immersive experience. We see it all the time with games, movies and other media.

Accomplishing this with a website is a bit more of a challenge, though. It’s especially difficult with a text-heavy site. There are some definite risks when it comes to usability.

Still, a well-crafted layout can effectively take advantage of the extra screen real estate. It’s a matter of ensuring easy navigation, legibility and consistency in design.

However, these are the principles that web designers practice each and every day. Keep them in mind and you’ll create a website that looks pixel-perfect on everything from a handheld phone to a massive 8k monitor.

The post The Challenge of Designing Websites for Large Screens appeared first on Speckyboy Design Magazine.