Sometimes design trends take a little while to emerge and sneak up on you, others seem to pop out of the blue all at once. The latter is true of each of our web design trends this month.

Animated image frames, gold metallics and obvious grids seem to be everywhere (and we are guessing you might be taking notice). Here’s what’s trending in design this month.

Animated Image Frame Distortion

The verdict on this trend is still out. Do you love it or hate it?

For a lack of better description, we’ll call this one animated image frame distortion. You’ll know it when you see it for sure. Image frames shift and shape when the mouse gets close to the element.

Some images maintain their positions in the frame with no distortion to the original image while other tend to shape shift with the frame.

The shape movements are pretty cool and the animation is attention grabbing. But are you weirded out when the image in the frame gets distorted? (Personally, I have always been a fan of maintaining the integrity of a photo and tend to like the frame distortion but not on the image.)

Faze Models uses this technique as a focal point with little else on the homepage. The image frame and image distort with hover action, moving from left to right and back. The movement also changes the color of the background, which is pretty nifty.

Jorik, another fashion-based site, uses animation on the image frame from every angle. The photo inside does not change and it almost looks like a 3D layer on top of the background. The best parts of this animation is that it works anywhere on the screen and when your mouse leaves the browser, everything snaps back to the original position.

Baunfire uses animation to tilt image frames as a cue that there’s a click action therein. The technique is more than something designed to grab user attention; it’s designed to help users better understand the functionality of the website and interact with it.

Gold Metallics

You can never go wrong with gold.

It’s classic and strong and creates a sense of importance and luxury.

Maybe that’s why gold is one of the most popular colors in design right now. (Even though it can be exceptionally difficult to use.)

Each of the examples below has mastered how to use gold elements and accents in projects to represent their brands in entirely different ways.

Chateau Margaux matches its gold-branded wine labels to the website design with a simple gold logo, lettering and hints of gold in the images. Using muted backgrounds helps gold emerge from the color palette to create just the sense of luxury that a wine brand emanates.

Crystal Brook Advisers uses gold imagery in the main photo to create a sense of wealth. (Seems like a great option for financial planners.) The palette is striking thanks to so many visual elements with gold or metallic coloring – from the wallet to the keys to money with a golden hue. This is a nice change from the more bland financial websites we often see; it’s a risky color choice that pays off. Not only does the brand create a sense of wealth, it also creates warmth with potential clients.

Hatched uses a gold and bright green color palette with a minimal design scheme. That combination is what makes a color that could otherwise feel dingy, seem metallic. (It’s amazing what the right color combinations and space can do for a design.)

Obvious Grids

Use of grids is at the root of design theory. Every web designer knows that the grid is at the foundation of a solid design.

These trending website designs feature grids that are obvious to even the casual user. And they are stunning.

What’s great about obvious grids is that they can take on so many different shapes and styles. The three featured styles here include a masonry grid, block grid and asymmetrical grid.

The great thing about using grids is that they provide a way to organize complex content in a manageable way. Grid-based styles have been a popular choice for portfolios for that very reason.

What sets these designs apart is that they use grids – not only in an obvious way, but also in a smart way.

Juco Photo uses a masonry grid with photos of all different heights. While the vertical grid is the same, it’s a modern spin on the technique with photos of varying depths. What’s exceptional about it is that the grid never gets messy, partially due to the rainbow style-placement of photos. There’s a lot going on here visually and all of it is good.

We are Yellow uses a traditional grid to showcase projects (yes, another portfolio). The best parts of this grid are the “empty” top left square which give the grid an asymmetrical feel (even though it isn’t) and the hover states for each project image. The simple animations work well and with each other to keep the design interesting.

Marcus Eriksson uses an asymmetrical grid to display varying image elements with a similar style. This design works well because of the minimal nature of the background with the striking nature of each image on display. Even as the viewport changes, the responsiveness of this website design and grid, maintains perfect spacing between elements – a factor that makes you want to keep scrolling to explore more of the design and his work. (You’ll want to scroll, too, to really see how this grid comes together.)

Conclusion

I love it when trends just jump out of new designs, such as the collection this month. And what’s nice is that these are pretty usable techniques. Personally, I am a huge fan of the gridwork featured in the designs above, but the gold color palettes caught my eye in a way that was somewhat unexpected. Animated image frames are interesting; we’ll see if designers respond favorably to them.

What trends are you loving (or hating) right now? I’d love to see some of the websites that you are fascinated with. Drop me a link on Twitter; I’d love to hear from you.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

Design System: What It Is And How To Create One Using Indigo.Design

Nick Babich

2019-04-02T12:30:58+02:002019-04-02T11:23:57+00:00

(This is a sponsored article.) Design is about scaling. Digital products are becoming more and more complex, and it is evident that product teams need to adapt their approach when designing them. To deliver well-designed products to the market, many organizations have started taking a more systematic approach to design, experimenting with style guides and pattern libraries in order to create design systems.

While product teams might face various problems in creating and incorporating a design system into their design process, one of the most common problems is integrating the different tools a team uses. Even if a team has a pixel-perfect visual design with properly handled components, they could face trouble in the design handoff and coding, all because their tools do not work properly with each other.

Indigo.Design attempts to solve this problem by introducing a unified platform for visual design, UX prototyping, code generation and app development. Using this platform increases the chances that you will create a design system that takes root and becomes an essential part of the organization. In this article, we’ll focus on just one aspect of this tool: using a design system in a visual design. But before that, it’s important to define what a design system is.

What Is A Design System?

A design system is a collection of elements that can be combined and reused to build products. This definition might give the wrong impression that it’s a single design deliverable, such as a Sketch library with UI components or a style guide. In fact, a design system is much more than that. Think of it as a process and a set of deliverables that create a shared language that everybody on the team will use when creating a product.

A design system is about communication. A well-crafted design system establishes a common shared language among team members, and this language allows the team to collaborate more effectively. Thus, the ultimate goal in creating a design system is to create both a single source of truth that can be referred to during product design and an effective shared language that all team members can use when working on a product.

What Problems Does A Design System Solve For Team Members?

Perhaps the most crucial thing that a design system brings to a product team is a different approach — members start approaching a design with a system in mind. Here are a few everyday tasks that a design system can help a team member with:

• Quickly find and use the right component, pattern or style option (color, typeface, icon, etc.);
• Reuse a component or pattern (either in the same product or in another product);
• Know how to use a component or pattern properly (product creators will now have this guidance when creating products);
• Reassure yourself that the components you are using are up to date.

What Can Motivate A Team To Think About A Design System?

There are a few powerful motivators for a team to think about a design system:

• Design debt.
  As products and teams age, they accumulate design and development debt. Non-reusable conventions, inconsistent styles and legacy code are the most common sources of design and technical debt. Debt prevents a team from moving quickly. A design system helps an organization to reduce its debt.
• Collaboration and communication problems.
  In large companies, a few different teams will usually work on a single project. Even with a team that communicates regularly, it’s quite common for their work to overlap (such as by creating similar components or UX patterns). A design system can build bridges between teams and make it easier to reuse work.
• Repetitive work.
  A design system frees up time from repetitive work so that the team can focus on solving more interesting problems. The fact that team member won’t need to worry about which icon or button to choose in a particular situation not only saves valuable time, but also helps them to focus on the big picture: thinking more about how the user will use the product.
• Consistency within a product family.
  Large companies need to design for multiple platforms and have a consistent experience across all platforms (both in behavior and interaction). Considering that an individual team is responsible for creating a design for a particular platform, this isn’t a simple task. A design system makes it much easier to design a consistent experience across all platforms.

The Key Qualities Of A Well-Functioning Design System

Regardless of the technologies and tools behind it, an effective design system has the following characteristics:

• It should be adopted by the team.
  The system should fit the culture of the team. It should become a natural part of the design process and evolve gradually with the team’s products.
• It should be balanced.
  The system should give team members enough freedom to contribute yet stay within parameters.
• It should be consistent.
  The different parts of the system work well together.
• It should be well-documented.
  The quality of documentation has a direct impact on the system’s adoption. If something is not documented, it doesn’t exist. That’s why the documentation should always be up to date.
• It should be robust.
  Whatever the product or platform to which a design system is applied, the final product should have minimal flaws.
• It should be highly reusable.
  All components of the system should be able to be reused in many contexts.
• Last but not least, it should be cost-effective.
  An effective system can make the design process more cost-effective.

How Does Indigo.Design Simplify The Process Of Building A Design System?

Starting a design system can feel daunting. It’s evident that a great design system cannot be built overnight; there are too many things to consider. Even with all its benefits, it’s hard to get buy-in from the teams involved in design and development, mainly because the system will influence the way designers and developers work. Let’s see how Indigo.Design can improve this process.

The key thing that differentiates Indigo.Design from any other tool is that it’s a unified platform for visual design, UX prototyping, code generation and app development. Usually, design systems are created by product companies for their own products.

As a result of the significant number of user requests and expertise in building UI controls, the Indigo team has identified the component and pattern needs of a great number of clients from various industries. Thanks to this knowledge, Indigo.Design’s system goes beyond regular design systems that are created for specific product needs; rather, it is a ready-to-use design system that can be easily adjusted to the needs of a particular team. Users can use Indigo.Design’s Sketch UI kit as a starting point to build their own system using the premade components and patterns.

Indigo.Design consists of three parts: components, patterns and styling. All three parts are integrated as Sketch libraries and are perfectly synced. They will appear in the ‘Symbols’ section in Sketch.

Components

Components are the building blocks of user interfaces. Think of components as LEGO blocks that you can use to create a product. Avatars, cards and dialogs are just a few examples of components.

Components range in complexity, from simple components such as a “Submit” button to more complex components such as interactive cards. Usually, the more complex a component, the fewer the scenarios to which it can be applied.

Component-based design and development bring a lot of benefits to the design process, reducing technical overhead by making design and code reusable.

Because components are designed and built in code, for each component, it’s vital to describe both:

• visual language (visual appearance),
• functional behavior (code).

Indigo.Design provides a flexible way of working with components:

• The design library has over 50 components:

• Indigo allows you to modify everything about a component in a structure way. Individual properties, such as size, styling, icons, fonts and events, can be modified in the Overrides section of a component. For example, for avatars, we can select a different shape of the object, changing it from a circle to a square. With overrides, it’s possible to create unlimited design combinations to drive your team’s productivity.
• The components of a design system are interdependent. When we introduce a change in one place, the change will be inherited throughout the system.
• Indigo makes it easier to translate design into code. All components map to the Ignite UI for Angular components. Data from the DataProperty field will be passed through to the code generator.

Below, you can see a layout with an input component. Sketch’s Overrides section contains the properties of the selected component. Modifying each property in a structured way is easy; basically, everything from styling options to events can be easily adjusted.

Each component can have a different list of Overrides based on its capabilities. For example, for the input field, we notice a DataProperty field, which can be translated directly to a code generator.

Patterns

Many designers think that patterns and components are the same things. They are not. The idea of a design pattern was introduced by architect Christopher Alexander. In his book A Pattern Language, Alexander gives the following description:

“Each pattern describes a problem which occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice.”

Similarly to architecture, we use patterns in interface design to solve common problems. For example, many apps have contact lists. It’s possible to create a contact list using components, by pairing avatars and text sections.

But there is a much easier approach — use a pattern called ‘List’.

Patterns empower designers, allow people to use their previous experience when interacting with a product. Because many design patterns are familiar to users, they will enable a design to be understood intuitively.

Components and patterns form the language of a product’s interface. But a design system should contain not only patterns, but also techniques and practices for using and iterating on those patterns. For many companies, a pattern library typically lives in a wiki, which means it’s difficult to keep up to date. What makes things worse is that patterns are also shaped by the conventions of platforms (for example, iOS and Android).

Indigo.Design solves these common problems by providing easily customizable UX patterns for a brand’s needs.

With the last release of Indigo.Design, it’s become much easier to customize styling options: You can apply your styling options for the entire design all at once using the Theme plugin.

Styling

A style is something we use to create a certain kind of aesthetic and to strengthen the emotional connection between a product and its users. Indigo.Design makes it really easy to create an elegant design that matches your brand.

Indigo-Styling.sketch is a representation of the theming engine. It is separated into two parts, represented as different pages in the library:

• Icons are a collection of over a hundred Material icons that you can easily extend.
• Colors are a rich collection of primary, secondary and special colors, as well as shades of gray and levels of opacity.

The styling library allows you to do custom branding (changing colors, fonts, etc.), and it is also inherited by the design. With just a few clicks, you can create and reuse a theme.

Indigo.Design’s Theme functionality lets you take care of most of your styles in a systematic way.

Conclusion

Design systems have changed the way we design and build applications. They are quickly becoming a cornerstone of an organization’s digital product strategy. And it’s extremely important to select tools that allow you to set a solid cornerstone for your product’s design process. Indigo.Design offers a ready-to-use design system that can be adapted to your individual needs.

(ms, al, il)

localStorage is…

• Good! It’s an incredibly easy API to use.

localStorage.setItem('name', 'Chris'); let name = localStorage.getItem('name');

Bad! Philip Walton explains why:

localStorage is a synchronous API that blocks the main thread, and any time you access it you potentially prevent your page from being interactive.

Chrome has an idea (here’s the proposal) for reinventing it. Ultimately the API is even simpler:

import { storage } from 'std:kv-storage';
storage.set('name', 'Chris');
storage.get('name');

But! It’s async, so I can use await before I do those things without blocking anything. This demo will work in Chrome Canary right now:

See the Pen
eXadrq by Chris Coyier (@chriscoyier)
on CodePen.

What in all heck is up with this line?

import { storage } from 'std:kv-storage';

They are calling it a “built-in module.” In other words, something you can import but it makes no network request because it’s built into the browser. Pretty interesting approach.

Philip continues:

Not exposing built-in modules globally has a lot of advantages: they won’t add any overhead to starting up a new JavaScript runtime context (e.g. a new tab, worker, or service worker), and they won’t consume any memory or CPU unless they’re actually imported. Furthermore, they don’t run the risk of naming collisions with other variables defined in your code.

This is built on top of indexedDB, so if you’re playing with it and need to clear the values or whatever, you do it there (DevTools > Application > Storage > IndexedDB). It’ll be fascinating to see if this catches on and whether new JavaScript features are shipped as built-in modules. I have no sense of whether other browsers think this is a good idea or not.

Direct Link to Article — Permalink

The post KV Storage appeared first on CSS-Tricks.

On March 6, 2018, a new bug was added to the official Mozilla Firefox browser bug tracker. A developer had noticed an issue with Mozilla’s nightly build. The report noted that a 14-day weather forecast widget typically featured on a German website had all of a sudden broken and disappeared. Nothing on the site had changed, so the problem had to be with Firefox.

The problem, the developer noted in his report, appeared to stem from the site’s use of the JavaScript library MooTools.

At first glance, the bug appeared to be fairly routine, most likely a small problem somewhere in the website’s code or a strange coincidence. After just a few hours though, it became clear that the stakes for this one particular bug were far graver than anyone could have anticipated. If Firefox were to release this version of their browser as-is, they risked breaking an unknown, but still predictably rather large number of websites, all at once. Why that is has everything to do with the way MooTools was built, where it drew influence from, and the moment in time it was released. So to really understand the problem, we’ll have to go all the way back to the beginning.

In the beginning

First came plain JavaScript. Released in 1995 by a team at Netscape, Javascript began making its way into common use in the late 90’s. JavaScript gave web developers working with HTML a boost, allowing them to dynamically shift things around, lightly animate content, and add counters and stock tickers and weather widgets and all sorts of interactivity to sites.

By 2005, JavaScript development had become increasingly complex. This was precipitated by the use of a technique we know as Asynchronous JavaScript and XML (Ajax), a pattern that likely feels familiar these days for anyone that uses a website to do something more than just read some content. Ajax opened up the door for application-like functionality native to the web, enabling the release of projects like Google Maps and Gmail. The phrase “Web 2.0” was casually lobbed into conversation to describe this new era of dynamic, user-facing, and interactive web development. All thanks to JavaScript.

It was specifically Ajax that Sam Stephenson found himself coming back to again and again in the early years of the turn of the century. Stephenson was a regular contributor to Ruby on Rails, and kept running into the same issues when trying to connect to Rails with JavaScript using some fairly common Ajax code. Specifically, he was writing the same baseline code every time he started a new project. So he wrote a few hundred lines of code that smoothed out Ajax connections with Rails he could port to all of his projects. In just a few months, a hundred lines turned into many more and Prototype, one of the earliest examples of a full JavaScript framework, was officially released.

Extending JavaScript

Ruby utilizes class inheritance, which tends to lend itself to object-oriented development. If you don’t know what that means, all you really need to know is that it runs a bit counter to the way JavaScript was built. JavaScript instead leans on what’s known as prototypal inheritance. What’s that mean? It means that everything in JavaScript can be extended using the base object as a prototype. Anything. Even native object prototypes like String or Array. In fact, when browsers do add new functions and features to Javascript, they often do so by taking advantage of this particular language feature. That’s where Stephenson got the name for his library, Prototype.

The bottom line is, prototypal inheritance makes JavaScript naturally forgiving and easily extendable. Its basically possible for any developer to build on top of the core JavaScript library in their own code. This isn’t possible in a lot of other programming languages, but JavaScript has always been a bit of an outlier in terms of its approach to accommodate a much larger, cross-domain developer base.

All of which is to say that Stephenson did two things when he wrote Prototype. The first was to add a few helpers that allowed object-oriented developers like himself to work with JavasScript using a familiar code structure. The second, and far more important here, is that he began to extend existing Javascript to add features that were planned for some point in the future but not implemented just yet. One good example of this was the function document.getElementByClassName, a slightly renamed version of a feature that wouldn’t actually land in JavaScript until around 2008. Prototype let you use it way back in 2006. The library was basically a wish list of features that developers were promised would be implemented by browsers sometime in the future. Prototype gave those developers a head-start, and made it much easier to do the simple things they had to do each and every day.

Prototype went through a few iterations in rapid succession, gaining significant steam after it was included by default in all Ruby on Rails installations not long after its release. Along the way, Prototype set the groundwork for basically every framework that would come after it. For instance, it was the first to use the dollar sign ($) as shorthand for selecting objects in JavaScript. It wrote code that was, in its own words, “self-documented,” meaning that documentation was scarce and learning the library meant diving into some code, a practice that is more or less commonplace these days. And perhaps most importantly, it removed the difficulty of making code run on all browsers, a near Herculean task in the days when browsers themselves could agree on very little. Prototype just worked, in every modern-at-the-time browser.

Prototype had its fair share of competition from other libraries like base2 which took the object-oriented bits of Prototype and spun them off into a more compact version. But the library’s biggest competitor came when John Resig decided to put his own horse in the race. Resig was particularly interested in that last bit, the work-in-all-browsers-with-the-same-code bit. He began working on a different take on that idea in 2005, and eventually unveiled a library of his own at Barcamp in New York in January of 2006.

It was called jQuery.

New Wave JavaScript

jQuery shipped with the tagline “New Wave Javascript,” a curious title given how much Resig borrowed from Prototype. Everything from the syntax to its tools for working with Ajax — even its use of a dollar sign as a selector — came over from Prototype to jQuery. But it wasn’t called New Wave JavaScript because it was original. It was called New Wave JavaScript because it was new.

jQuery’s biggest departure from Prototype and its ilk was that it didn’t extend existing and future JavaScript functionality or object primitives. Instead, it created brand new features, all assembled with a unique API that was built on top of what already existed in JavaScript. Like Prototype, jQuery provided lots of ways to interact with webpages, like select and move around elements, connect to servers, and make pages feel snappy and dynamic (though it lacked the object-oriented leanings of its predecessor). Crucially, however, all of this was done with new code. New functions, new syntax, new API’s, hence a new wave of development. You had to learn the “jQuery way” of doing things, but once you did, you could save yourself tons of time with all of the stuff jQuery made a lot easier. It even allowed for extendable plugins, meaning other developers could build cool, new stuff on top of it.

MooTools

It might sound small, but that slight paradigm shift was truly massive. A shift that seismic required a response, a response that incidentally came the very next year, in 2007, when Valerio Proietti found himself entirely frustrated with another library altogether. The library was called script.aculo.us, and it helped developers with page transitions and animations. Try as he might, Proietti just couldn’t get script.aculo.us to do what he wanted to do, so (as many developers in his position have done in the past), he decided to rewrite his own version. An object-oriented developer himself, he was already a big fan of Protoype, so he based his first version off of the library’s foundational principles. He even attempted to coast off its success with his first stab at a name: prototype.lite.js. A few months and many new features later, Proietti transformed that into MooTools.

Like Protoype, MooTools used an object-oriented programming methodology and prototypical inheritance to extend the functionality of core JavaScript. In fact, most of MooTools was simply about adding new functionality to built-in prototypes (i.e. String, Array). Most of what MooTools added was on the JavaScript roadmap for inclusion in browsers at some point in the future; the library was there to fill in the gap in the meantime. The general idea was that once a feature finally did land in browsers, they’d simply update their own code to match it. Web designers and developers liked MooTools because it was powerful, easy to use, and made them feel like they were coding in the future.

There was plenty there from jQuery too. Like jQuery, MooTools smoothed over inconsistencies and bugs in the various browsers on the market, and offered quick and easy ways to add transitions, make server requests, and manipulate webpages dynamically. By the time MooTools was released, the jQuery syntax had more or less become the standard, and MooTools was not going to be the one to break the mold.

There was enough similarities between the two, in fact, for them to be pitted against one another in a near-endless stream of blog posts and think-pieces. MooTools vs. jQuery, a question for the ages. Websites sprung up to compare the two. MooTools was a “framework,” jQuery was a “library.” MooTools made coding fun, jQuery made the web fun. MooTools was for Geminis, and jQuery was for Sagittariuses. In truth, both worked very well, and the use of one over the other was mostly a matter of personal preference. This is largely true of many of the most common developer library debates, but they continue on all the same.

The legacy of legacy frameworks

Ultimately, it wasn’t features or code structure that won the day — it was time. One by one, the core contributors of MooTools peeled off from the project to work on other things. By 2010, only a few remained. Development slowed, and the community wasn’t far behind. MooTools continued to be popular, but its momentum had come to a screeching halt.

jQuery’s advantage was simply that they continued on, expanded even. In 2010, when MooTools development began to wind down, jQuery released the first version of jQuery Mobile, an attempt at retooling the library for a mobile world. The jQuery community never quit, and in the end, it gave them the advantage.

The legacy and reach of MooTools, however, is massive. It made its way onto hundreds of thousands of sites, and spread all around the world. According to some stats we have, it is still, to this day, more common to see MooTools than Angular or React or Vue or any modern framework on the average website. The code of some sites were updated to keep pace with the far less frequent, but still occasional, updates to MooTools. Others to this day are comfortable with whatever version of MooTools they have installed. Most simply haven’t updated their site at all. When the site was built, MooTools was the best option available and now, years later, the same version remains.

Array.flatten

Which brings us all the way back to the bug in the weather app that popped up in Firefox in early 2018. Remember, MooTools was modeled after Prototype. It modified native JavaScript prototype objects to add some functions planned but not yet released. In this specific case, it was a method called Array.flatten, a function that MooTools first added to their library way back in 2008 for modifying arrays. Fast forward 10 years, and the JavaScript working group finally got around to implementing their own version of Array.flatten, starting with the beta release of Firefox.

The problem was that Firefox’s Array.flatten didn’t map directly to the MooTools version of Array.flatten.

The details aren’t all that important (though you can read more about it here). Far more critical was the uncomfortable implication. The MooTools version, as it stood, broke when it collided with the new JavaScript version. That’s what broke the weather widget. If Firefox were to release their browser to the larger public, then the MooTools version of flatten would throw an error, and wipe out any JavaScript that depended on it. No one could say how many sites might be affected by the conflict, but given the popularity of MooTools, it wasn’t at all out of the question to think that the damage could be extensive.

Once the bug surfaced, hurried discussion took place in the JavaScript community, much of it in the JavaScript working group’s public GitHub repo. A few solutions soon emerged. The first was to simply release the new version of flatten. Essentially, to let the old sites break. There was, it was argued, a simple elegance to the proposal, backed fundamentally by the idea that it is the responsibility of browsers to push the web forward. Breaking sites would force site owners to upgrade, and we could finally rid ourselves of the old and outdated MooTools versions.

Others quickly jumped in to point out that the web is near limitless and that it is impossible to track which sites may be affected. A good amount of those sites probably hadn’t been updated in years. Some may have been abandoned. Others might not have the resources to upgrade. Should we leave these sites to rot? The safe, forgivable approach would be to retool the function to be either backward or fully compatible with MooTools. Upon release, nothing would break, even if the final implementation of Array.flatten was less than ideal.

Somewhere down the middle, a final proposition suggested the best course of action may simply be to rename the function entirely, essentially sidestepping the issue altogether and avoiding the need for the two implementations to play nice at all.

One developer suggested that the name Array.smoosh be used instead, which eventually lead to the whole incident to be labeled Smooshgate, which was unfortunate because it glossed over a much more interesting debate lurking just under the surface about the very soul of the web. It exposed an essential question about the responsibility of browser makers and developers to provide an accessible and open and forgiving experience for each and every user of the web and each and every builder of the web, even when (maybe especially when) the standards of the web are completely ignored. Put simply, the question was, should we ever break the web?

To be clear, the web is a ubiquitous and rapidly developing medium originally built for sharing text and links and little else, but now used by billions of people each day in every facet of their lives to do truly extraordinary things. It will, on occasion, break all on its own. But, when a situation arises that is in full view and, ultimately, preventable, is the proper course of action to try and pull the web forward or to ensure that the web in its current form continues to function even as technology advances?

This only leads to more questions. Who should be responsible for making these decisions? Should every library be actively maintained in some way, ad infinitum, even when best practices shift to anti-patterns? What is our obligation, as developers, for sites we know have been abandoned? And, most importantly, how can we best serve the many different users of the web while still giving developers new programmatic tools? These are the same questions that we continue to return to, and they have been at the core of discussions like progressive enhancement, responsive design and accessibility.

Where do we go now?

It is impossible to answer all of these questions simply. They can, however, be framed by the ideological project of the web itself. The web was built to be open, both technologically as a decentralized network, and philosophically as a democratizing medium. These questions are tricky because the web belongs to no one, yet was built for everyone. Maintaining that spirit takes a lot of work, and requires sometimes slow, but always deliberate decisions about the trajectory of web technologies. We should be careful to consider the mountains of legacy code and libraries that will likely remain on the web for its entire existence. Not just because they are often built with the best of intentions, but because many have been woven into the fabric of the web. If we pull on any one thread too hard, we risk unraveling the whole thing.

As the JavaScript working group progressed towards a fix, many of these questions bubbled up in one form or another. In the end, the solution was a compromise. Array.flatten was renamed to Array.flat, and is now active in most modern browser releases. It is hard to say if this was absolutely the best decision, and certainly we won’t always get things right. But if we remember the foundational ideals of the web — that it was built as an accessible, inclusive and always shifting medium, and use that as a guide — then it can help our decision-making process. The seems to have been at the core of the case with Smooshgate.

Someday, you may be browsing the web and come across an old site that hasn’t been updated in years. At the top, you may even notice a widget that tells you what the weather is. And it will keep on working because JavaScript decided to bend rather than break.

Enjoy learning about web history with stories just like this? Jay Hoffmann is telling the full story of the web, all the way from the beginning, over on The History of the Web. Sign up for his newsletter to catch up on the latest… of what’s past!

The post Yet Another JavaScript Framework appeared first on CSS-Tricks.

Browsers, thank heavens, take backward compatibility seriously.

Ancient websites generally work just fine on modern browsers. There is a way higher chance that a website is broken because of problems with hosting, missing or altered assets, or server changes than there is with changes in how browsers deal with HTML, CSS, JavaScript, another other native web technologies.

In recent memory, #SmooshGate was all about a new JavaScript feature that conflicted with a once-popular JavaScript library. Short story, JavaScript has a proposal for Array.prototype.flatten, but in a twist of fate, it would have broken MooTools Elements.prototype.flatten if it shipped, so it had to be re-named for the health of the web.

That was the web dealing with a third-party, but sometimes the web has to deal with itself. Old APIs and names-of-things that need to continue to work even though they may feel like they are old and irrelevant. That work is, surprise surprise, done by caring humans.

Mike Taylor is one such human! The post I’m linking to here is just one example of this kind of bizarre history that needs to be tended to.

If Chrome were to remove defaultstatus the code using it as intended wouldn’t break—a new global would be set, but that’s not a huge deal. I guess the big risk is breaking UA sniffing and ended up in an unanticipated code-path, or worse, opting users into some kind of “your undetected browser isn’t supported, download Netscape 2” scenario.

If you’re into this kind of long term web API maintenance stuff, that’s the whole vibe of Mike’s blog, and something tells me it will stick around for a hot while.

Direct Link to Article — Permalink

The post A historical look at lowercase defaultstatus appeared first on CSS-Tricks.

How To Use Spaces In Web Design With Gestalt Principles

Ayesha Ambreen

2019-04-01T12:30:41+01:002019-04-01T15:07:12+00:00

Human brains are hardwired to connect the dots and make sense out of everything the eyes see. Design is a creative field where forms and space intermingle to lend us a variety of experiences. Whatever design we come across, our brains are hardwired to transform that piece into simpler components made up of basic shapes and forms that are at play with the spaces. Our minds flood with memories and — thanks to our experiences — we recognize the patterns easily.

Space — both positive and negative — plays a pivotal role in unifying the design elements. As a result, we see a uniform pattern (or not). When the elements are arranged in an orderly manner, the intelligent use of spaces draws our eye to the most noticeable space — be it positive or negative.

The positive space poses as the flesh or the meat of the design; it’s the part where you see the shapes, colors, patterns and so on. The negative space, on the other hand, is the background or the hyped white space (most of the times).

As much as the positive space seems to dominate the negative counterpart, both are used in equilibrium to tell a harmonious, coherent, and a seamlessly complete story.

In balanced compositions, the positive parts and negative space of the design work together and complement each other to form a seamless, aesthetically pleasing whole. Unbalanced compositions, on the contrary, can cause discomfort to the audience and convey an incomplete, rather distorted story.

But what kind of story do spaces tell in web design?

In the midst of the spaces, the success and failure of web design is determined more by the utility and the usability. Just consider that if you have poor design skills, the overall efficacy and the presentation of the web design will be disturbed. Content is king, but from an alternative point of view, the content will take its toll on your website if the spaces are not used appropriately.

If you think your developing skills rock but your design skills could need some more improvement, you’ve just hit the jackpot. In this article, we’re going to cover:

• Positive versus negative space relationship, importance and implementation;
• The connection between spaces and cognitive perception;
• The Gestalt principles and their implication in web design.

We’re also going to discuss some real-world web design examples with each Gestalt principle and creative use of spaces.

Without further ado, let’s begin.

Positive Versus Negative Space: Relationship, Importance And Implementation

Spaces comprise of two main dimensions: positive and negative. The positive is the element and the negative is the no element. As mentioned before, the positive is object, negative is the negligible space behind it. Where one is the focus, other serves as the background. Where the former moves and motivates, the latter remains stationary and obscure. Where one is the moon, the other is the dark sky surrounding it.

In web design, the spaces interact with each other to maintain the idea of holistic composition. Visual hierarchy is only created when both the spaces are differentiated with contrast and yet tend to the bigger picture (think of yin and yang).

We differentiate between the positive and the negative space at the meeting point. The negative occurs mainly as the white space that complements the positive to make it pop out.

It might seem that the positive space takes the lead, the negative space is equally important for a myriad of benefits. Some of these benefits are:

• It creates an easy-to-follow visual hierarchy;
• Sets the focus of attention as well as reduces distraction;
• Helps establish the scale and lets the focus appear bigger;
• It improves page scan-ability;
• Makes the flow on the page appear natural;
• It clarifies the relationship between the visual elements without the need for additional aids;
• It helps de-clutter the page;
• Enhances the style and look of the webpage.

Negative space in design isn’t that negative if you ask me. However, both space types perform great when used in a balanced ratio. Unfortunately, chaos strikes only when either one dominates the other and gives an ‘overcrowded’ or a ‘lacking’ impression. In both cases, the audience is unable to process such complex information, and hence, the motive of using space creatively for web design falls apart.

Here’s a web template with misplaced content or ‘chaos’ space:

As fascinating as the concept and arrangement of space occurs, doubt begins to fog the area.

• Is the positive space surrounded by the negative one or is the negative space eaten up by the positive one?
• How is the proportion of each space type determined?
• Which one should validate as the focal object?
• Is it mandatory to highlight one and eclipse the other to communicate your intended perception to the audience?
• How would I achieve ‘design nirvana’ with the communion of positive and negative spaces?

Questions like these can only be answered with a clear understanding of the basics. And as per the golden rule of thumb: simplicity is the best policy (we made that up because it fits!).

We mentioned in the beginning that web design is all about creating a simple user interface that helps you and your audience kill more than two birds with one stone, or in literal terms, helps increase the visual desirability of the website design as well as making it effective and easier to use — yes, with an incredible power over the use of spaces.

The Connection Between Spaces And Cognitive Perception

Since our minds are always playing the detective for finding hidden clues and missing links between the spaces, it compares present visuals with the ones experienced before as a part of the cognitive process. In order to become an efficient web designer, you must first understand how the brain pays attention to its surroundings. It may help you pin the particular use of visual elements and use them to influence the viewer’s perception.

“Great designers understand the powerful role that psychology plays in visual perception. What happens when someone’s eye meets your design creations? How does their mind react to the message your piece is sharing?”

— Laura Busche, Brand Content Strategist at Autodesk

You must now have a clear idea of how visual design and psychology are linked and have the power to influence each other. In other words, the main idea of developing a simple user-centric interface and using space for its design is by considering the Gestalt principles. These can help you understand and control the visual-psychological connection.

Recommended reading: Improve Your Designs With The Principles Of Similarity And Proximity

Gestalt Principles In Web Design

Gestalt is German for ‘forms’. It is more of a concept than a word, which states that:

“The whole is other than the sum of the parts.”

— Kurt Koffka

A collection of individual units appears as a group to us when they’re unified in some way. We see the elements as a group despite their individuality. This concept or theory applies fundamentally to all the design mediums: We don’t see text, colors, and shapes as separate elements, but instead a whole webpage as a collective entity. The same applies to a forest: we don’t only see a bunch of trees, just the same way we don’t see water drops when looking at an ocean.

The Gestalt principles describe how the human mind perceives visual components when certain terms and conditions are applied. It helps the brain create imagery of the visual. Hence, the Gestalt principles are based on six main categories:

1. Figure And Ground
2. Proximity
3. Symmetry And Order
4. Similarity
5. Closure
6. Continuity

Figure And Ground

The ‘figure’ is the object that is intuitively as well as visibly separated from the ground.

The most classic example that exists is that of the grail cup — the vase between two mirroring face silhouettes. When you first come across this image, your eyes are drawn to the most focally visual object that comes into your notice immediately, which might be the faces opposing each other or the vase. While your mind is adjusting your focus, the ground or the vase is blurred out and at that moment, your mind intuitively crops out the negative or the ground in the image.

After a while, you get to notice the vase in the background and realize it was there in the first place. As ambiguous as the Figure and Ground principle seems, designers usually create visually appealing surreal and illusionary art and web designs.

Sometimes, the relationship between figure and ground is stable, which makes both distinguishable from one another. This relationship is sometimes unstable, meaning that the figure and ground are indistinguishable from each other. Due to the ambiguousness of this relationship, the viewers confront perceptual confusion.

To give you a clear idea of how the figure-ground relationship influences web design, let’s discuss a few examples in detail. Each of these examples focus on three main areas of the figure-ground relationship: You can add explicit visual cues by using contrast, boxes, and shadows for your web design. These techniques are used to distinguish the color, size, and level of detail, to separate the content, and to add depth to the respective object of focus.

In the first example below, Trellis uses a ‘hero image’ (images with clear CTAs) with a figure-ground relationship that clearly indicates the level of detail, color, and size.

The text is the figure here in a large cursive font in the center of the page, making it stand out as compared to the image in the background. The white text over the contrasting grayscale image draws the focus of attention, which makes the text visible over it. From another perspective, the background is blurred so that the text pops out as the figure. All of these aspects show that the text here is prioritized as the figure or the positive space, while the blurred image is used as background or the negative space, hence strongly implying the concept of figure and ground.

Next comes the content in boxes. Ocean Health Index makes a smart use of boxed content to separate the figure from the background. This is what you see when you come across their website:

Which part of it jumps at you when you first view this web page? If you ask me, it’s the main text in white in the upper right-hand side and the two boxes with contrasting color and text. The bold white text on the top is obviously the figure. (Notice how it’s placed over the darker image to stand out.) The boxes down below are also part of the figure, due to the contrast they offer to the ground image. The other aspect of this figure is the second contrast that is placed inside the boxes in the form of contrastive-colored text.

The background uses subtle shades that help the figures appear sharply, showing a pattern of detail here. The boxes are also overlapping the background image, bringing them in clear view over the image.

Some websites also exhibit the figure-ground relationship by adding drop shadows to the figure, in order to give a feeling that the figure is placed over the background. Here’s a screenshot from Seriously Unsweetened:

Seriously Unsweetened’s landing page uses more than one technique to maintain that figure-ground relationship in a balanced manner. There are bright colors and shadows. The ground remains white, making it easier for the figure to appear accurately above the ground. In the positive space, the objects in the figure are presented under an illusion as of being ‘on the top’ of the background. The shadow game is played inside the primary figure, making us notice that there is another figure-ground relationship within the main figure. A clever one!

Proximity

Proximity refers to the closeness of elements in a page. Different elements in webpages can be grouped together to create a bigger association. Apart from being similar, the closeness of these elements with each other than other page elements will automatically be paired in the viewer’s mind.

From images to texts and navigation bars to web forms, the Proximity principle applies heavily to web design. When you group similar content together, it creates a seamless relationship between the elements and delivers a better visual experience to the viewer.

Here is an example of proximity as displayed in the navigation of the Mashable website:

In the snapshot above, you can clearly notice how the elements of the same category are placed together to show the relation with the main menu type. The users’ eyes are automatically drawn to the subtypes under the main heading — also thanks to the use of colors and text size. You can see that the items that are unrelated are set apart with the help of a line, which serves as the users’ guide in relating and separating the items as per the principle of proximity.

Besides delineating the navigation bar, the grid-based content also complies with the golden rule of Proximity. Amazon‘s product listing is the best example:

Proximity complies with similarity, which is yet to be discussed. As you can see, similar products in the positive space are grouped and separated using narrow white space. This instructs the user to sort their preferred item from the list of similar products. Moreover, the principle of closure also comes into action among the list of similar items.

Now, we’ll take a closer look at the Basecamp web form which displays yet another ideal case for proximity in web design:

You can notice how the form is divided into two main segments: personal details and ID generation. The first section is implied as the most important field, followed by a lesser important requirement. The headings for both the sections vary as shown by the difference in color and font size. In this web form, proximity is an indicator that places and prioritizes grouping of information from highest to lowest importance.

Symmetry and Ordery

Symmetry refers to the exact reflection or the mirror image of the two opposing planes. It can be regarded as the balance that divides an object into two equal halves. Real-world examples of symmetry include geometrical images like equilateral triangles, circles, and squares and so on.

The human mind desires to find the ‘balance’ in human faces, which it finds aesthetically pleasing. The mind also tends to find symmetry in other objects, such as images because symmetry creates harmony and allows the viewers to be at comfort while viewing the image.

Below is a great example of symmetry in web design as exhibited by HvD Fonts:

Not only does this webpage show a typical figure-ground relationship, but also displays great symmetry. The page is dissected into four equal halves with fonts of similar size and color. The background in each of the four sections runs along the same theme with a grayscale effect. You can also notice that the negative space isn’t necessarily white; it’s the image in the background.

The idea of symmetry gives rise to another notion: asymmetry can be confusing and must be used with great care when used in web design. Many websites use asymmetry as the main balancing element for spacing, where the unconventional positive space is balanced with a neutral background and vice versa. And as per the concept of asymmetry, Xplode Marketing prompts asymmetry with unique aesthetics pleasing the eyes.

This webpage immediately grabs the eye using optical illusions as well as asymmetry. The positive space objects are placed in an unusual pattern over the negative space that creates the appeal. The color is the main indicator of harmony between both the spaces and develops a natural connection for the viewers to notice. There is also a strong balance of left-hand graphics with the strong and dominant wings on the right. What do you think?

Similarity

The reason that proximity works closely with the principle of similarity is the quality of shared attributes among the similarly-grouped objects. Whether it be color, shape, posture, size, shape, orientation or any other property, connectedness will prevail when one or more of these are shared in all the objects displayed in proximity.

Even if the positive space elements do not look visibly connected, these will stand apart from the negative one due to the principle of similarity.

Just look at these UrbanDecay palettes list for a moment:

The positive spaces aka the figures are different from each other but do share some similarity in various aspects, such as their position, color, product layout and mode of presentation. The only dissimilar object is the ad for the eye shadow primer that stands out uniquely in the line of the similar-product category. This is obviously a marketing tactic that is intended to draw attention without hurting the overall symmetry and beauty of the page. Another point to consider here is that similarity in size sets the other image apart from the similar product category.

Other than just product display, the positive space can be employed with the similarity in conjunction with the negative space.

Let’s take a look at the influenster landing page:

The similarity in the above example shows clearly aligned boxes. Though the products in each positive space are different, the perception of similarity is conveyed by the consistent text fields in the overall page. The genre, layout, and the theme all are similar, hence delivering a seamless effect to the vision.

Closure

Did you ever come across an image that seems close but is open? That is because of the principle of closure. Our brains tend to ‘close’ the gaps in the incomplete objects and use our visual perception to complete the figure, seeing it as a whole.

The positive and negative spaces close in to form a whole. The best example is that of the hidden shapes and forms in the negative space in and outside the design, which demands an intelligent assessment of message within the design. Using both the spaces creatively in the closure can give rise to an interesting yet simplified design.

Take a look at the screenshot from Magu Kambucha below:

In this example, you can see that closure is kept intact with the principle of the figure-ground relationship. The bottles and the bold text behind are obviously the figure, where the background is solid soft pink. Where’s the closure? See the text behind the bottles? You can’t see it completely, but still know it’s ‘Kambucha’. Except for the first ‘K’ and the last ‘A’, other letters are half hidden, which are intuitively completed and the whole form begins to take shape and consequently, the meaning. This, my friend, is one good example of closure we have here!

Take a look at the screenshot from Cult below:

Even though the text is not spelled out quite clearly, our minds can easily read the word CULT. The arrangement and alignment of the text made it easy to decipher, even when the words are incomplete.

Continuity

Finally, as per the general Gestalt principles, continuity follows the pattern by leading the eyes to follow a consistent path and establishing a linear pattern from object to object. It can best be understood by the example of a positive space line with a curved over the negative space. The colors of both lines indicate that the lines bent by each other, but the pattern of continuity suggests otherwise.

In the image above, the viewers are more inclined to see a straight line despite the color degradation. This leads us to believe that the principle of Continuity guides the perception better than the power of color. This concept flows smoothly through both kinds of spaces. When we insert a subject in the negative space, our eyes tend to draw the line of distinction between the positive space and the negative one.

The imaginary line of continuity is what we tend to introduce in the design to guide our perception when differentiating between the positive and the negative space.

Let’s take our cue from the Crypton Trading website down below:

See the perfect continuation of design in the right half of the page? Regardless of the light and dark hue in the background, the pattern is pretty much obvious on the page. And when you scroll down, you will see how the pattern as well the color change in a continuous and seamless motion. The shift in tones is negligible here and all we see is a continued pattern of lines and dots.

Another good example is the OscilloScope website:

The website uses the law of Continuity to take web visitors to a 360-degree view of the studio where they can navigate their way to the desired section.

The film Cargo has a landing page that also uses the law of continuity: it get its text float across the website in a linear motion using the scroll-only navigation. Since the half-visible logo was shown vertically, the viewer has to scroll down to get a full view of it. As the page is scrolled down, the static logo starts floating along with the chunks of text running parallel to it. The navigation leads the user through different levels of experience without interfering the darkness lurking below.

Since our eyes usually follow the smoothest path, graphic designers can use such examples to make them follow the desired path and position the elements along a line.

Summing It Up

In this article, we covered the Gestalt principles in relation to positive and negative spaces in websites. We also made sure we include some real-life examples to give you a clear idea of how you can employ simple yet effective techniques to influence your audience’s perception. The key here is to use these principles to create a web design that appears more than the sum of its parts.

We humans think in terms of our perception — mainly based on visuals. According to the Gestalt principles in relation to positive and negative spaces, we tend to see the bigger picture rather than individual elements at first glance.

Positive and negative spaces help us differentiate, help us recall our experiences, and recognize the patterns. With the help of the Gestalt principles, we are better able to visualize how well we can use spaces in web design to create appealing pieces. Since spaces can appear as a tangled affair for any designer, the best way is to keep intact your Gestalt principles. This is the only way you can truly realize the importance, usage, and effectiveness of spaces in your designs and effortlessly become an effective contributor in the web design domain.

Want to add something else? Don’t forget to share your ideas. We’d love to receive the feedback!

Further Reading

Here are a few design sources to help you understand the Gestalt principles:

• “Design principles: Space And The Figure-Ground Relationship,” Steven Bradley, Smashing Magazine
• “Psychology + Design: Gestalt principles You Can Use As Design Solutions,” Mhariell Riel, Medium
• “Gestalt principles In UI Design,” Eleana Gkogka, Medium
• “The Gestalt principle: Design Theory For Web Designers,” Ahmed Hussam, Envato Tuts+
• “Design principles: Gestalt, White Space And Perception,” Barbara Marcantonio, Manifesto

Don’t forget to check out the related recommended tutorials:

• “How To Apply Optical Illusions To Web UI Design,” Jerry Cao, TNW
• “How To Create A Negative Space Logo Design,” Tarif Khan, LogoDesign.net
• “How To Improve UX Using Gestalt principles,” Steven Douglas, Justinmind
• “Using Negative Space To Create A Powerful Composition,” Sean Adams, Lynda.com (Video)

(il)

Firefox’s mobile browser’s nightly release has become the first browser to implement a left-handed option in its preferences.

First proposed at the then bi-annual web conference, way back in 1998, the left-handed web protocol was initially envisaged as a way to enable left-handed browsing online. The protocol was never officially adopted, thanks to ambidextrous hardware.

However, the rise of the touch screens has lead to an unexpected revival of the idea, and although still not officially adopted by the W3C, browser manufacturers are beginning to implement it, with Firefox being the first, and Opera expected to follow shortly.

Championed by usability experts like Caitlin Fring, the original left-handed browsing protocol is being reinterpreted for touchscreens:

Back when the web was controlled by a trackpad, or a mouse, there was no use case for a left-handed web, but with the exponential growth of touchscreens across mobile, and desktop devices, we’re finding that it’s increasingly essential for many of our customers.

~Jason Sommer, Senior Usability Designer, Mozilla

What is the Left-Handed Web?

When users browse the web on a touchscreen phone, especially on a larger device, certain areas are easier to tap than others, due to the reach of the user’s thumb. When held in the other hand, the available hit area is mirrored.

Globally, around one in ten people are left-handed, which means that for around 10% of any site’s users, the navigation and CTAs (Calls to Action) are inaccessible.

The LHW (Left-Handed Web) protocol is an option in the browser preferences that enables users to set their browser to invert the horizontal rendering of the page so that elements that appear on the right move to the left, and vice versa. (Elements such as text remain left aligned, and images aren’t flipped.) By repositioning elements based on this preference, hit areas become more accessible.

Webdesignerdepot.com rendered normally in Firefox mobile (left) and with the Left-Handed option enabled (right).

In simple terms, the LHW option—it’s important to note that the LHW is an opt-in preference; only those users that want to enable it will do so—simply flips the layout order of a site; if your logo is in the top left and your hamburger menu the top right, then with the LHW option enabled, your logo will move to the top right, and your hamburger menu to the top left.

Firefox’s implementation has come to market so quickly because it is piggy-backing on the CSS Flexbox’s ability to reverse the horizontal order of items laid out on screen.

What Does the LHW Mean for UX?

One of the biggest issues with the LHW is how different browser manufacturers choose to interpret the recommendations; as no formal recommendation has yet been made, those interpretations are likely to be wildly different.

When CSS Flexbox was introduced, there were radically different interpretations made by browser manufacturers, resulting in the need for numerous browser prefixes. Microsoft in particular implemented a very different set of rules to anyone else. Implementations of the LHW are likely to be even worse.

The most contentious issue is whether navigation should be reversed. Firefox’s implementation does not reverse navigation, so if your site’s header is structured as ‘logo > home > services > about > contact’ then it will be rendered as ‘home > services > about > contact > logo’ (assuming that the logo is a separate element, and the navigation is correctly marked up with a

We usually ignore the particular nature of usability. However, we must note here that with usability, a designer can design more efficiently and you can grow the user base of your website as well.

Usability design enhances a product’s usability, which is an essential part of instructing the real design. You can also consider it as the user-centered design. Thereby, it incorporates two vital parts.

The first one is usability testing which depends on the target audience’s psychological study (the use of the procedure, user requirements, user model, etc.).

Another one is for associating the Industry Psychology, Ergonomics, Cognitive Psychology, and other fields of fundamental principles are widely used in the design behavior.

What is Usability?

Usability is an analysis of a product which been utilized in a particular condition by particular users, which can accomplish the particular object in an efficient and satisfying way. Usability is not just associated with the interface design but also engaged in the tech level of the whole system.

Human factors reflect the usability and it is measured by functioning different types of jobs. Finally, usability describes how users can efficiently interact with products and how they can use a product easily.

Thereby, usability refers to the ease of operation or access of a website or a product. This is a sub-field of UX design. Albeit usability and UX design were earlier utilized interchangeably, now you should understand that usability especially contributes to user experience design; nevertheless, it is not the entire experience. You can precisely analyze usability.

From a psychological viewpoint, the fundamental meaning of Usability is as follows:

• A user can concentrate on his jobs and perform with his own functional procedure. He does not need to understand the structure of the software or the man-machine interface’s menu, icon meaning and the structure of the man-machine interface. Moreover, he does not need to ponder how he can convert the job into the input mode and input procedure of a computer.
• A user does not need to acquire the know-how of software and hardware of the computer.
• A user cannot be absent-minded by the use of his hand; the function must be repeatable and easy.
• Under some particular scenarios and ambiances, users can still normally use it.
• Misunderstanding and errors of the operation will be reduced.
• A user is able to acquire the knowledge of how to operate in a short time span.

The Necessity of Usability Design

From the viewpoint of a user, usability is necessary as it is able to help the users finish their jobs precisely, and users are able to use it comfortably instead of doing any stupidity.

From the viewpoint of the developers, usability is a vital rule to decide a system’s accomplishment. And from the aspect of the manager, the low usability of products will highly lessen productivity and people won’t be ready to purchase your items. After all, every item which has poor usability will just waste their energy and time.

What Is Pondered As A Usability Design?

• Proficiency – The level which a user can complete a specific job and accomplish a particular object precisely and fully in a short time period.
• Satisfaction – The subjective satisfaction and acceptance level of a user in the procedure of operating a product.

A website with good usefulness needs to follow a few factors, such as properly designed, quick connectivity, ease of use, fully described and examined, and meaningful and user-friendly data interaction, and robust style.

How to Accomplish Usability Design

Iteration design is the main point of accomplishing the higher level of usability. In order to optimize the design by measurement gradually from the initial stages, and the analysis procedure helps developers and designers collect the feedback given by the users until the system acquires a considerable usability level.

The ideal way of making sure usability is to examine the real users on the operating system. Accomplishing a higher level of usability needs the design functionality to concentrate on the system’s end users.

There are numerous ways to decide the prime users, how they function and what should be done. Nevertheless, often the budget and schedule of the user possibly demotivate this perfect way.

Usability: A Vital Element of User Experience

It would be great in case we could draw UX’s borders like it can be done on a map of a country. But sadly, reality tells something else. Although we prefer implementing systems and making sense of phenomena, we should keep in mind that users are individuals. Hence, they decide everything by emotions and logic only.

We know that numerous designers become confused while differentiating between the user experience’s larger branch and usability. Let’s check out the key areas of UX:

Helpful Content

A website must incorporate sufficient details in a format which is easily digestible so users can make detailed decisions. You must remember to streamline your design and use restraint to make it simple.

Usability

Usability refers to the analysis of a user’s capacity to reach a website and finish the preferred task. Keep in mind to design sites, instead of concentrating on designing pages and thinking all will flow easily later.

Accessibility

Online experiences cannot be so good for people with various disability levels. There are a few accessibility principles with which websites must adjust to help the hearing flawed, the visually impaired, the motion flawed, etc. Content for the learning impaired should be cautious consideration for offering an absolute user experience.

Preferred Content

When a user can create an emotional connection with a website or a product, he gets the best experience. This means going beyond useful and usable and on to growing content which helps him create such a connection. Emotional design is a major part of the user experience.

Credibility

The faith that your site incites in your users also plays a role in the user experience. Security is one of the prime concerns users get online. Mentioned these concerns via your design, for instance, by having simply accessible policies and displaying security features, can allow forming a sense of credibility for the users.

Undoubtedly, the Usability of design is necessary. Nevertheless, we have to ponder usability along with the aforementioned concerns to form amazing user experience. The UX design comes from content, interactive design, graphic design, etc.

The Concluding Text

Thereby, usability refers to how a user can easily interact with a product or website. It’s definitely an essential part of the UX design but is not the entire story of UX design. In usability, a designer should concentrate on 3 basic aspects:

• Users must find it simple and become efficient while utilizing a design interface.
• They must be capable of learning the interface with ease, so they return to your site more easily.
• They must be capable of accomplishing their targets simply with the use of the design.

While deciding usability, you must measure your website design, considering everything from the usefulness of content and accessibility to designing content and credibility users will explore.

This means you need to think more. You need to understand who your users are and whether they are having issues while reading your text. Can you use a fun tone for making them happy? Users always need to feel reassured that they are using your site with complete security. So, make them feel secure.

Moreover, you need to ponder web realities. You must find a trustworthy server for your website which loads fast. Visual elements, incorporating content formatting and layout colors are necessitous also. Although having a good-looking website is great, you need to think about whether they can navigate it easily or not.

The ultimate thing to consider is to test your website design. Don’t underestimate the importance of testing them from an initial stage. For instance, if you work out where users click, you can be on track properly to understand their approaches and also how useful your website is.

There is “futuristic” JavaScript that we can write. “Stage 0” refers to ideas for the JavaScript language that are still proposals. Still, someone might turn that idea into a Babel plugin and it could compile into code that can ship to any browser. For some of these lucky proposals, Stage 0 becomes 1, 2, 3, and, eventually, an official part of the language.

There used to be a point where even the basic features of ES6 were rather experimental. You’d never ship an arrow function to production ‐ you’d compile it to ES5 and ship that instead. But ES6 (aka ES2015, four years ago!) isn’t experimental anymore. Its features aren’t proposals, drafts, or candidates. They are finished parts of the language, with widespread support.

The main sticking points with browser support are IE his results suggest both file sizes and parse/eval times can cut in half or better by adopting the new features. However, if you do need to support browsers that lack support, you’ll need to compile to ES5, but it doesn’t mean you need to ship ES5 to all browsers. That’s what “differential serving” is all about.

How do you pull it off? One way, which is enticingly clever, is this pattern I first saw Philip Walton write about:

<!-- Browsers with ES module support load this file. -->
<script type="module" src="main.mjs"></script>

<!-- Older browsers load this file (and module-supporting -->
<!-- browsers know *not* to load this file). -->
<script nomodule src="main.es5.js"></script>

Don’t let that .mjs stuff confuse you; it’s just a made-up file extension that means, “This is a JavaScript file that supports importing ES6 modules” and it is entirely optional. I probably wouldn’t even use it.

The concept is great though. We don’t have to write fancy JavaScript feature tests and then kick off a network request for the proper bundle ourselves. We can have that split right at the HTML level. I’ve even seen little libraries use this to scope themselves specifically to modern browsers.

John Stewart recently did some testing on this to see if it did the job we think it’s doing and, if so, whether it’s doing it well. First, he covers how you can actually make the two bundles, which takes some webpack configuration. Then he tested to see if it actually worked.

The good news is that most browsers — particularly newer ones — behave perfectly well with differential serving. But there are some that don’t. Safari 10 (2016) is a particularly bad offender in that it downloads and executes both versions. Firefox 59 (2018) and IE 11 download both (but execute the correct one) and Edge 18 somehow downloads both versions, then downloads the modules version again. All browsers that are going away rather quickly, but not to be ignored. Still worth doing? Probably. I’d be interested in looking at alternate techniques that fight against these pitfalls.

The post Differential Serving appeared first on CSS-Tricks.