I had that feeling a lot during my early days in this industry. My work wasn’t great, mind you. But I felt the thrill of doing things I’d never done. And it was even better if I had made a client happy.

There was a lot of creative energy back then. The web was a new medium – and we were building it as we went along.

It’s no secret that the industry has changed dramatically. The old methods of building websites are gone. Now, we work with advanced tools and premade elements.

I sometimes feel like web design has lost its creative flair. Has it? Or have we changed how we use our creativity?

Let’s explore what it means to be creative in modern web design.

We No Longer Build from Scratch

An original web design isn’t always a top priority these days. We often prioritize efficiency, usability, and accessibility in our builds.

To that end, we start projects with frameworks and themes that provide a head start. Tools like Tailwind CSS feature readymade layouts and components. WordPress themes may offer a complete website for us to customize. And we can’t forget about the advent of block patterns.

That’s the reverse of how things used to work. We used to fire up Photoshop or some other design tool. We’d start with a blank canvas and build from scratch.

It’s easy to romanticize that era. We may think of web design as a lost art. It’s as if we were craftspeople who built sites the right way. None of these modern tools could match those techniques.

But that practice isn’t sustainable for busy designers. There’s not enough time or budget for a long design process. Not when there are multiple projects to complete.

For better or worse, our workflows have changed. Web designers have had to adapt to keep pace.

Adding a Personal Touch to Predesigned Components

How can we be creative when using predesigned components? Complete originality may be out of the question. However, there’s still an opportunity to add a personal touch.

There is no shortage of areas to change. An element’s color, size, and typography are prime examples. We don’t have to settle for the default look.

We can also choose components that include minimal styling. The WordPress block editor works this way. A default implementation is typically barebones. Tailwind CSS also prioritizes utility over looks.

Knowledge of these tools also helps. We can design in Figma with specific components in mind. That allows us to use our imagination while staying within the lines.

The process is reminiscent of a collage artist. It’s about pulling all of these different pieces together. From there, we seek to create a seamless user experience. The results can be compelling.

The added layer of convenience might make us feel guilty, though. For instance, page builder tools take the pain out of design. It’s more paint-by-numbers than drawing from memory.

Did we even “create” anything here?

Modern Web Design Is a Different Artform

Sure, the design process has changed. That doesn’t mean we’re no longer being creative, though.

We’re still using our creativity – just in a different way. We’re using our knowledge and experience to build the best website possible. And we’re using our keen eye to make it beautiful and functional.

If anything, we’re fortunate to have these new tools and frameworks. Websites are becoming more complex all the time.

Perhaps that makes web design harder than ever. Designing from scratch and managing functionality might be too much to handle.

Our focus needs to be in many places at once. So, maybe we’re creating a collage while juggling!

Find New Ways to Be Creative

One positive development is that designers don’t have to reinvent the wheel. We spend less time on the basics. That allows us time to concentrate on the details.

It’s the little things that can make a website stand out. We now have the tools to give us a head start.

Yes, these new methods can be limiting at times. However, web designers have plenty of experience in that area.

There have always been parameters for us to work within. It used to be the limits of CSS or user devices. Now, we try to bend and shape tools to match our needs. That also takes creativity.

You know what? Despite my initial concerns, those “a-ha” moments still exist. The change is in how we create them.

The post Creativity Hasn’t Left Web Design – It’s Just Different appeared first on Speckyboy Design Magazine.

I happen to think that whatever users find ‘trendy’ or cool, even though it may be fleeting, is part of the service a designer provides. It’s part of what clients are paying for. If you’re offering classic, outdated solutions that nobody wants, you are only hurting your own career.

Yes, it might be annoying to feel you must bend to the whims of the ‘masses,’ but if those masses are looking for something you can’t give them, they aren’t going to pay you.

Adopting visual trends is simply a part of providing a commercial service. The only way you can really subvert a design trend is by creating one of your own, which allows you to be the thought leader and influence other designers to follow your lead instead. This is extremely difficult to do, however, and the vast majority of designers are followers rather than leaders.

Don’t believe me? Just look at the designs for tablets and smartphones both before and after the release of the iPad and iPhone. Those designs were so influential that they virtually eliminated any design possibility other than sleek, thin, and black (or white).

Mobile Phones Before the iPhone [Image Source]

The Nature Of The Beast

Yes, people are quick to jump all over a new trend, causing it to look dated in a matter of months. But, like it or not, that’s the nature of the industry these days. Ideas spread much faster than they used to, thanks to the internet. Which means that designers and clients alike are exposed to new trends constantly.

But how do you stay abreast of new trends while not running around like a headless chicken, trying to adapt to every new trend you think might get you more clients? There are three ways you can go about it, which I will explain.

1. The Puzzle Piece Approach

You can use the constant influx of new trends to your advantage as a designer, adjusting your personal style to fit the range of what clients may be looking for depending on which corner of the web they approach you from. I call this the ‘puzzle piece’ approach – you have the missing piece of the puzzle for every design project you take on.

This isn’t a bad way to do business as a freelancer if you don’t mind the constant switching and adapting. You probably won’t gain the venerable reputation of someone who sticks to their guns, but if you can continue to ride the wave and know just when and how to adapt, you’ll have a long career ahead of you.

2. The True Blue Approach

On the other hand, you may wish to develop a reputation for creating work that always bears your personal mark or style. You buck any and all new trends, and only serve clients who are looking for exactly the type of design work you specialize in.

This is a great way to build a solid, loyal client base and following, but there can be dangers here as well. You may find your base getting smaller and smaller as people’s attention is drawn to newer, more exciting trends.

Saul Bass Quote, Designed by Brittany Appel

3. The Goldilocks Approach

Personally, I think the ideal approach lies somewhere in the middle. If you’re too much of a trend hopper, you’ll have no credibility as a designer. However, if you’re too absorbed in your personal style preferences, you’ll alienate too large a portion of your potential market.

Don’t get me wrong – I’m the biggest believer in niching down your potential pool of clients. But you don’t want to go so niche that you’re unable to grow and expand your career.

The post Do We Really Need to Follow Design Trends? appeared first on Speckyboy Design Magazine.

These changes have resulted in a clutter-free and visually uncomplicated experience for users. We are in the era of clean web design. To highlight this aesthetic, we’ve selected twenty-five websites that encapsulate the abovementioned factors. Each site, in its own unique way, showcases the beauty of clean design.

From minimalist layouts and bold typography to striking color schemes and simple navigation, these websites demonstrate the power of clean design to create a memorable and fantastic user experience. Whether you’re a web designer looking for inspiration or simply appreciate good web design, these sites are sure to impress.

Clean web design is here to stay, and it’s easy to see why. By focusing on content and simplifying the design elements, web designers can create sites that are both aesthetically pleasing and accessible. So, embrace it and explore the beauty of clean web design below!

Clean & Light Web Design Inspiration

These sites use light color schemes, plenty of white space, and non-intrusive elements. They are ideal for portfolios, blogs, or corporate sites that want a fresh and modern aesthetic.

Clean & Dark Web Design Inspiration

These websites use darker tones and are excellent for tech, creative, or luxury brands that want a bold appearance. Darker color schemed websites are great for highlighting photos.

Clean & Colorful Web Design Inspiration

These sites balance clean design with brighter colors. They’re perfect for creative agencies, fashion, or lifestyle brands that are looking for a lively and energetic aesthetic.

The post 40 Beautiful Examples of Clean Web Design for Inspiration & Ideas appeared first on Speckyboy Design Magazine.

But in modern times, those fast judgments aren’t always a good thing. It can even be costly. Think of a person who looks a bit different from you. They could be the nicest person you’d ever meet. But judging them by looks alone could cost you the chance to ever find out.

In design circles, we’re just as quick to judge others in our profession. It’s incredibly easy to glance at another’s work and call it “crap.” But are we judging fairly?

The Great Unknowns

When we see another designer’s work, we either like it or not. That’s fair enough. But, have you ever thought that you could do it better?

One of the more amusing examples of this is when a new operating system is released. You’ll find designers complaining about various aspects of the look. There may even be some who decide to create their own “better” versions of the real thing.

Sure, it’s possible to have built that whole OS/website/mobile app better. But there are many unknowns regarding the story behind the design:

Client Restrictions

First, we don’t know the limitations placed on the designer(s). Client needs wants and opinions can be a huge factor in determining the outcome. Plus, the allotted budget and timeline can also be limiting.

Project Goals

Along with the whims of a client are the actual goals of the project. Specific goals often mean that designers have to dedicate more time to associated elements.

That may mean less time is allocated to the things that we designers may tend to notice more than the general public.

Designer Experience and Expertise

Short of knowing someone on a personal level, we may never know where a designer is in their respective career. We don’t know their experiences or specialties.

For example, I’m a completely self-taught designer and developer. Therefore, the design choices I make may be quite different from someone who is formally educated.

The point is that, while we can criticize someone else’s hard work, we don’t know the whole story. Perhaps they did the best they could, given the circumstances. Or perhaps they failed miserably.

Either way, it’s wise to take a moment and consider the factors that may have affected the outcome. You might even consider it a learning experience.

Competitive Spirit

Another important factor in unfair judgment is the element of competition. This seems to especially pop up whenever we:

• Are looking at portfolios from local designers or those within our niche;
• Taking over a website from another designer;
• Another designer is taking over a website from us;

We can be quick to judge in these situations. That may be partly out of insecurity and perhaps a bit of ego, as well. Web design is a very saturated industry, and it’s natural to want to stand out. It makes sense that we would want to compare ourselves favorably to others in these cases.

I’ve noticed this in my behavior. There have been instances where, after inheriting an existing site, a client will criticize the previous designer. I’ve found myself joining in, even though I knew nothing about them or their challenges.

It’s also happened in the reverse situation of losing a site to someone else. When the site’s redesign was released, I was less-than-classy about it in my private thoughts.

As time has gone on, I (thankfully) find myself doing this less often. Sure, I may quibble with how a particular feature was built. But petty judgments are fading away.

Why It’s Harmful

My experience has been that it’s best to stay away from this type of behavior. On the surface, it may seem harmless – especially if you’re not making remarks to anyone about it. But there are several reasons to avoid it:

It’s a Waste of Time

If we have enough time to pick apart the flaws of someone else, we must be doing something wrong. There simply have to be more productive ways to spend a few free minutes.

It Can Hamper Personal Growth

None of us are design experts – nor are we perfect. By making dismissive judgments about others, we’re acting as though we are. Arrogance is a roadblock on the way to self-improvement.

It Goes Against the Spirit of the Design Community

As a community, we are all about sharing knowledge and helping fellow designers to improve. Trashing someone else’s work just seems to be the antithesis of that unofficial credo.

The bottom line is that nothing good can come out of the practice – so why bother?

The Choice is Ours

Design is something that should always be open to criticism. But there is a stark difference between viewing someone else’s work constructively or destructively.

In a constructive sense, we can take from what others have done and potentially learn from it. It’s an opportunity to compare and contrast our style to that of another professional.

Choosing a destructive form of critique is more about attempting to uplift ourselves at the expense of someone else. Even if the other party doesn’t know about it, there’s still a cost. It comes in the form of taking ourselves out of the right frame of mind.

The great thing is that we all have a choice in the matter. Let’s make the right one.

The post Why We Unfairly Judge Other Designers appeared first on Speckyboy Design Magazine.

However, not every solution is on equal footing. The fact that it works nicely in the browser isn’t enough. The potential downside is that some approaches are going to be more resilient than others.

But what exactly is resiliency when it comes to web design? Let’s take a look at what makes for a resilient design (in one designer’s view, anyway). Then, we’ll discuss how resiliency can change how you approach projects.

Don’t Build a House of Cards

Have you ever built a page or even a feature that was highly dependent on a single element? Something that, if that element is changed in some way, the entire thing breaks?

It’s likely that all of us have done this at some point. For example, think of an old-school multi-column layout. Before we had CSS Grid or Flexbox, we often found ourselves trying to piece it all together with floats.

While it was possible to get it to work well enough in a browser, the whole thing was a house of cards. Accidentally removing the wrong CSS class or forgetting to use a clearfix hack led to a broken layout.

In short, this approach was not resilient. It was too easy to break and couldn’t adapt well to future changes. Eventually, it’s likely we’d have to rebuild the layout to better handle different scenarios.

Instead, Build a Skyscraper

Perhaps it’s not the most elegant analogy, but a sustainably-designed feature is kind of like a skyscraper (work with me). It is built with the aim of staying in-tact even if even one of its many levels has an issue.

In real-world terms, think of it as a navigation menu that doesn’t get overwhelmed when a new item is added. Or a column that doesn’t overrun its boundaries because it contains an extra sentence or two more than you anticipated.

That’s the essence of resiliency. It’s the practice of considering how a feature may be used (or abused). It’s realizing that there may be some uses you can’t anticipate. Then, it’s a matter of designing and building in a way that can withstand just about any scenario.

Of course, that doesn’t mean something is completely bulletproof. But it does eliminate the most likely breaking points. This allows a website to flourish long after its launch.

The Challenges

This all sounds wonderful, right? We work hard to create something that doesn’t wilt under pressure. But, like most things, it’s easier said than done.

There are many challenges involved in the process. The first comes in the form of having an eye for what will work and what won’t. The second is when a client asks for something that isn’t really sustainable. Let’s tackle them, one at a time:

Determining What Is Resilient

One of the best ways to determine what is and isn’t resilient in your designs is experimentation. You design and build something in the best way you know how, test it, then see how it plays out over time. The experience can prove invaluable as you move on to new projects.

Beyond experience alone, another way to figure things out is by using the house of cards analogy mentioned earlier. If something you create is so heavily-dependent on one aspect – a CSS class being in a specific place, an empty div or some other lynchpin – it’s probably not resilient.

The great aspect of this is that mistakes serve as learning opportunities. The more you learn, the better you’ll become at building resiliency into your projects.

Educating Clients

Clients often come to us with ambitious plans. This is especially so when your client is a designer who provides you with a mockup to build off of. They might send you a Photoshop, Sketch or XD file that includes some challenging aspects. Or, a client may see a visually-appealing feature on another website and ask you to replicate it.

It’s a tough situation. These items may be possible with some CSS magic. You might even get it to work in all the major browsers (IE included!) – but at what cost?

Well, when your client makes a change a few months later, the feature that took you weeks of testing to get just right breaks like a twig.

Sometimes, part of the process of implementing a resilient feature is convincing clients of its value. Maybe something doesn’t look exactly like that cool feature from the other site, but will be easier (thus, cheaper) to maintain down the road.

Resiliency Starts from Scratch

Mocking up a website can be a fun experience. It’s a place to let your creativity loose and (hopefully) impress your clients with the results.

It’s also a time when we as designers can get ourselves into trouble. Ambition in design is often a positive, but it can also lead to that proverbial house of cards. Trying to get too cute with an element may pin you into a corner when it’s time to build.

That’s why it’s important to think about resiliency from the moment you open up your design app. Consider the consequences of each design decision you make. Ask yourself what will happen if an element doesn’t contain that exact amount of characters or is viewed on a small screen.

Take care of those concerns from the very beginning. It may just save you from receiving a message from a panicked client that the layout is broken or other assorted chaos. That alone makes it worth the effort.

The post The Case for Building Resiliency into Every Website appeared first on Speckyboy Design Magazine.

All you need to do is to mix and match lines and shapes. However, things are not always what they seem. And artworks by Kazimir Malevich, a pioneer in abstract art, are clear proof of that.

Geometric art is a combination of varied-sized shapes, weights, and colors. Intricacy accompanies each and every artwork. Yes, at some point, they are simple – but also complex. And this unique combination is intriguing. It appeals to us, lures us in, and sparks our interest.

Today, we share a collection of stunning business cards that put geometry at the center of their design.

Granatalm Heart on the Mountain

This example was created by a skilled Austria-based design team for a hotel. It looks incredible. They’ve used squares, rhombuses, and zigzags to weave this plaid-like pattern. The design of these business cards and other elements of the brand identity feel hospitable, inviting, and modern.

Shine Bright! Business Card

This is another excellent example. You can easily distinguish two types of patterns. The first one is based on circles, whereas the second one is populated with spots. It naturally grabs the attention and directs it towards the tiny solid circle in the upper right corner.

Reality Lab London Business Card

Much like the very first example in our collection, this project by Ramin Nasibov is marked by geometric patterns with a high density of details. The author has experimented with various shapes – starting with lines and ending with hexagons – thereby coming up with a fantastic range of concepts that are tied together into one idea.

Cultural Centre in Lublin Branding

The concept instantly catches the eye with its subtle yet intricate design. There is nothing fancy, yet still, it manages to draw our attention as well as unobtrusively establish an aura of creativity.

Taiheiyo Kensha Branding Project

The combination of colors creates a slight anaglyph effect that makes things visually interesting in this business card. Simple geometric shapes such as triangles and polygons stand behind the project’s aesthetics. Without a doubt, it has marvelous authenticity and charm.

Second Choice Business Card

This business card demonstrates that all you need is a primitive shape and one color to make things look interesting. From the get-go, it becomes evident that this project has something to do with fashion. The idea is brilliant. It is simple yet ingenious.

dots&dash Business Card

If you feel like a pastel or minimal color scheme is not for you, you can always try to use some bright ones, much like this business card. The coloring is vibrant, yet it does not overpower the design. Bold geometric shapes and bright colors make this artwork so unique.

Konsou Business Card

If the previous example is too much and you prefer to stick to the time-proven choices, like a traditional black-and-white scheme, you should take a look at this business card. A music platform lies at the heart of this project, so it is not surprising that the design feels energetic and dynamic – even despite such a monochromatic environment. Shapes give it energy.

Unconventional Business Cards

This unconventional business card is an experiment created by Huan Nguye. He has taken the charm of the geometric world to the next level, making the business card interactive. Bearing in mind the rule that good design should be invisible and only revealed when needed, he has managed to create a masterpiece. Explore his presentation over at Behance for further information.

A+PRACOWNIA Business Card

This example will delight you with its marvelous minimalistic approach. There is lots of fresh air, the colors are neutral, and the shapes are primitive. However, with all that, the business card, as well as the other brand identity pieces, look interesting, and they go perfectly well with the architectural theme.

Costa-Perini Letterpress Business Card

This business card example is a well-thought-out combination of simple geometric shapes – starting with straight lines and ending with curved brackets. However, it has a certain art deco quality that looks splendid thanks to the beautifully embossed details. It is an apotheosis of geometric designs.

Defying Expectations

It may seem at first sight that designs where geometry runs the show are destined to be dull, primitive, and insipid. However, by no means do they concede to other stylistic solutions. They can be:

• Extravagant like Shine Bright.
• Bright and bold like dots&dash.
• Suthentic like Granatalm.
• Ultra-modern like Taiheiyo Kensha Branding.
• Traditional like A+PRACOWNIA.
• and even highly sophisticated like Costa-Perini Letterpress.

This direction is multifaceted and gives you lots of opportunities to show the world your creativity.

The post 10 Stunning Business Cards with Simple Geometric Designs appeared first on Speckyboy Design Magazine.

In 1908, Japanese scientist Dr. Kikunae Ikeda did just that, when he managed to isolate the exact component that makes up the flavor of umami, or, as it’s commonly known in the West: savoriness.

What is umami? Well, um… that’s a tricky question. It’s a totally unique flavor experience, unlike any of the other four basic flavors. Parmesan cheese is loaded with umami, as is Asian fish sauce, aged beef, and perfectly ripened tomatoes.

Since umami is so unique and was discovered so recently, most people have a hard time describing exactly what it is. That weird, indescribable uniqueness is what I’m going to talk about today – how to handle it when it comes up in design, and whether or not it’s necessarily a good thing.

Too Unique For Its Own Good

We all think we want to come up with that totally unique idea, one that no other designer has ever thought of before or that no one would be able to easily copy or steal.

But is that really what we want as designers? Is it even something we should want?

Most of the time, when people talk about ‘innovation’ in the design industry, what they’re really talking about is improving on an idea that already exists.

Don’t get me wrong, that definitely takes skill and creativity. But it usually isn’t a genuinely unique, original idea you’re striving for. It’s mostly a combination of what you’ve already seen before, and what you’re influenced by. Why? Because it’s easier to work that way.

If we all attempted to come up with the next design equivalent of umami, our brains would short-circuit and we’d never get any work done. It’s just not practical, nor is it commercial, to strive for true uniqueness and originality.

When it happens, as was and continues to be the case with umami, people are at a loss to explain it. It becomes something of a curiosity – a conversation starter at a party, perhaps, or a cautionary tale of woe among other creative professionals.

Image Source: What is Umami?

Anyone who’s been in the industry for any length of time has a story or two about one of their peers who tried to get too creative and found themselves out of a job.

Yes, perhaps they were “ahead of their time.” That’s perfectly valid, but it does you no good when you’re trying to scrape together this month’s rent money.

There’s something to be said about following trends and learning how to reinterpret them.

Making Adjustments

When you stop to think about it, we’ve developed some surprisingly sophisticated methods for adjusting the taste of our food. Our taste buds can detect changes in flavor down to extremely minute quantities. You know, for example, when something is just slightly too salty, too sweet, too sour, or too bitter.

And conversely, you know when something doesn’t quite have enough of any of these flavors. But how do you tell when something is “too umami,” or not “umami enough?”

There are a range of opinions ranging from the mundane (“when you find yourself reaching for the salt shaker”) to the weird (“when your appetite becomes ‘fatigued'” – huh?).

The truth is, since umami is such a newly discovered flavor, we haven’t really come to a consensus on how to tell when it’s too prominent or too lacking in our food.

Completely original designs are the same way. Sometimes we can’t tell when something is too original and when it needs to be more relatable, precisely because it’s so original.

Many designers love to rave about their completely obscure discoveries, myself included. In addition to design, I also studied fine art painting in school. I have plenty of abstract personal projects that I absolutely love, but that are completely unmarketable to anyone except other weirdos like me.

Since there aren’t too many of us out there, I’d have a hard time making ends meet by producing projects like that. But sometimes we just don’t have the perspective to know if something is appropriate for our target market.

In that case, I always find it helpful to call in other people from that market.

Sneaking It In

So, does this mean you should throw in the towel on ever being unique or original? Absolutely not.

There are ways you as a designer can “sneak in” some truly creative, original elements into your designs that won’t detract from their marketability, and that won’t leave people feeling like they’re simply getting a rehash of something they’ve already seen before.

This is the ideal you want to strive for as a designer – that perfect balance between what’s new and what’s familiar to your users.

There’s a common trick used in the culinary world by chefs who like to experiment with umami. Asian fish sauce is typically considered to be the ultimate umami flavor.

On its own, it can be rather unpleasant, but when used in small amounts in other dishes, Asian or not, it can add a special burst of umami that diners won’t be able to quite put their finger on, but that they’ll definitely recognize when they taste it.

When you design something that’s an alternate take on a previous idea, and you sneak in your special “fish sauce” of pure originality, you create something that’s completely relatable and marketable to your target audience, but that also has that strange, wonderful element that people won’t be able to describe, but they’ll definitely love.

Just as umami is not an earth-shattering element in the culinary world, complete and total originality isn’t the ultimate holy grail we should be reaching for as designers.

It’s an important element, which can add a lot to the attempt to balance the different “flavors” of marketability, quality, and relevance which are the backbone of design.

The post How to Handle Indescribable Uniqueness in Design appeared first on Speckyboy Design Magazine.

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.

Still, for all of that high-tech beauty, there’s something to be said for the simplicity that classic pixel-based art brings to the table. It not only reminds us of the good old days, but it can also be an effective design technique.

Which brings us to today’s topic – the use of pixels as a background. On the right project, they can add an element of fun and a surprising amount of creativity. Let’s take a look at some code snippets that show the potential of the pixel.

A Pixel for Every Purpose

This multi-faceted example shows a wide range of looks and animation options. Use the preset menu to choose from over 10 different SVG backgrounds. Many are reminiscent of a retro video game, and some are indeed more appropriate for everyday use than others. Regardless, this collection provides a solid primer of what is possible.

See the Pen Pixel-Grid (SVG Animations) by Scott Weaver

Fade Into Black

Gradients and pixels never seemed to mesh very well. But in the age of brutalist design, they go together like Mario and Luigi. This snippet demonstrates an interesting, random effect. It uses JavaScript to split up the background into small squares of varying opacities. The result is a piece of generated art that will certainly get a user’s attention.

See the Pen CSS Pixelated Gradient Generator by Eric Winton

Tasteful Squares

Here’s an example that is both can’t-miss noticeable and tastefully done. The large squares fade in and out in a seemingly random pattern, but thankfully don’t overwhelm. This might make a for a great design accent to a hero area, where making a first impression is key.

See the Pen RKpBLg by Michael

A Subtle Effect

If you’re looking for an animated background that won’t distract from your content, this simple snippet is worth checking out. While similar in style to the previous example, it’s different in that the animation only runs once. It’s enough to attract attention without the potential annoyance of movement that loops time and again.

See the Pen pixel background animation by Oren

Transforming Mask

Pixels can also play complementary roles within a background. For instance, take a look at this video. It’s made more interesting with a pixel-like pattern overlay that could be used to display a simple logo, symbol or something more random. Even better is that this particular example is shape-shifting. Click anywhere on the video to see the pattern change.

See the Pen KaozXe by Micah Frost

Floaters

What makes this snippet stand out is its combination of both retro looks and modern functionality. Created with particles.js, these floating pixels are reminiscent of 1950s/60s space-themed art. Hover over an area and its pixels are highlighted bright white, while a click forces them to scatter.

See the Pen pixel background 2 by Alex

CSS Plaid

Pixel art is a great choice for a plaid-like pattern. The subtle differences between squares can form something attractive, albeit not realistically-detailed. Here we have a fairly simple, pure CSS pattern that could serve as a background for a hero, header or an entire page.

See the Pen CSS Pixelated Background (Camo #1) by Erik Wiedeman

Make it 3D

Let’s take a look at another great example of classic-meets-modern. This logo has been turned into an interactive 3D masterpiece, thanks to CSS and jQuery. Hovering over a square lights it up, while the shifted perspective makes the items at the top look far away. It would no doubt make for a compelling background.

See the Pen Digibilly Pixel Logo in CSS &Jquery with Overlay by Joshua Pearson

A Flexible Choice for Backgrounds

The inherent advantage of using pixel-based backgrounds is their versatility. You can, for example, go with a background that features a lot of slick animation. Or you might prefer something completely static. Then there is the choice between a very random, attention-grabbing pattern or one that is more predictable.

Regardless of your needs, there is a version of the technique out there that is a perfect fit. So, if you’re looking for something to help your site stand out, don’t overlook the possibilities of pixels.

More CSS Effects Snippets

The post 8 CSS & JS Snippets for Creating Pixelated Backgrounds appeared first on Speckyboy Design Magazine.

Remember, though, that being highly selective with its use is key to the success of the distortion, as users don’t typically like overly obtrusive effects. Tread carefully if you plan to make use of this tiny design trend.

Today, we have a collection of stunning CSS and JavaScript snippets for creating text distortion effects for your web design inspiration. Enjoy!

You might also like our collection of glitch effect Photoshop Actions.

Glitched Text

Lucas Bebber has created an analog-like creation with just a slight touch of noise. It has been created using only CSS, so it’s lightweight and fast. The effect does have some subtle pausing throughout, ensuring that the animation doesn’t overly annoy viewers.

See the Pen CSS Glitched Text by Lucas Bebber

Ants!

This example makes clever use of Blotter.js, a modern JavaScript library for drawing creative text effects. Each symbol has been composed of hundreds of tiny irregular shapes that move in an almost chaotic fashion. The effect is not overwhelming, annoying, or irritating. On the contrary, it is intriguing and visually appealing.

See the Pen Ants! (with blotter.js) by Bennett Feely

Underwater SVG Text

Lately, water-inspired effects have become popular among creative web developers. Katrine-Marie Burmeister has created this simple solution that would give any text a lovely underwater touch.

See the Pen Underwater SVG Text by Katrine-Marie Burmeister

Loiquid Distortion Text Effect

This text effect example is much less extravagant than Bennet Feely’s and more intriguing than the previous example from Katrine-Marie Burmeister. It has a liquid-like behavior that is revealed when the user hovers over the lettering. It is simple yet eye-catching.

See the Pen distortion by Corentin

Particle Text

Every letter in this creation is composed of numerous dots that begin to move erratically when the mouse cursor hovers over them. It almost feels like you are going to blow them away.

See the Pen PARTICLE TEXT by al-ro

Text particle

Using thousands of solid circles of various sizes and colors, Thibaud Goiffon has created an outstanding distortion concept. He has also provided the viewer with a small control panel to edit such variables as gravity, duration, speed, radius, and resolution.

See the Pen Text particle by Thibaud Goiffon

Dynamic 3D confetti text

This example is a playground where you can edit your own text. Each symbol is composed of numerous colorful triangles of various sizes. Here, the distortion effect is quite delicate. The result is that the text looks elegant despite its bold appearance.

See the Pen dynamic 3D confetti text by Rachel Smith

Spark Text SCSS

This example has been created to amuse the viewer. Hover your mouse cursor over the text, and you will see a thin straight line blow each letter away like a sharp arrow. Of course, everything comes back to normal almost immediately.

See the Pen Spark Text SCSS by Tatsuya Azegami

Squiggly Text

This text effect feels like it is trembling with fear, so it will certainly come in handy for numerous Halloween-inspired websites. This is another pure CSS creation that cleverly makes use of SVG filters.

See the Pen Squiggly Text by Lucas Bebber

Text Distortion

This is another solution that requires user interaction. When the cursor hovers the text, a second layer appears. It consists of blue and pink colors that give each letter a mock 3D anaglyphic touch. It also has a slight vibrating effect that forces the text to pulsate, thereby unobtrusively drawing attention.

See the Pen Text Distortion by Jøshüå Wård

Text Scramble Effect

Justin Windle has taken one of the banalest text effects up to the next level. This typing effect looks simple but stylish. This example is so universal and elegant that it could easily be used on numerous types of projects.

See the Pen Text Scramble Effect by Justin Windle

With these text distortion code snippets, you can bring a playful feel to any project. They don’t require much effort and will all leave a lasting impression on your users and visitors.

More Text Effect Snippets

The post 10 CSS & JavaScript Snippets for Text Distortion Effects appeared first on Speckyboy Design Magazine.