Layers

Layers are practically everywhere. They help us keep things separate and experiment without fear of breaking something. They help us organize our work. Each layer can vary independently from others, which gives us the freedom and flexibility to think of design as an arrangement of details, each of which contributes in some way to the whole. Layers allow us to apply effects that will be visible on all others below the current one. If we are not satisfied with the current content on a given layer, we can duplicate, switch/interchange, move up/down or delete layers until we arrive at a result we like.

We know layers from graphic design, but they are used in many other areas as well. Assuming that the only place where they appear is the Photoshop palette needlessly restricts our thinking. This is why this article will explore other ways in which layers can be used. If we think of a layer structure while approaching new things, this can be useful in a variety of situations.

If we consider SVG for a moment, we can see that each element that follows another one is essentially a layer on top of it. If we export the elements from an external program like Inkscape, we can see the different layer names. If we use Processing, we know that it works according to the painter’s algorithm, which can make the topmost element more visible than we would like. We could also adjust the opacity to make layers below the current one partially visible, which is useful when we need to fine-tune an effect or mix multiple colors.

The parallax effect is made of layers of shapes of progressively varying sizes and moving speeds. It can be used to add visual interest to any page.

Game level design also benefits from the use of layers. When there are many objects in a scene, it becomes progressively more expensive to render them. But many objects of the same type can be batched and rendered together at once to improve performance. This has the effect of adding one additional layer of each object type. Rendering too much detail at distance can add a lot of computational cost where the closest details are mostly the ones that receive the most attention. This allows to reveal details at a distance progressively, only as needed.

Progressive enhancement is something we use on the web to organize our work in layers and to ensure that taking away any of them doesn’t leave the rest broken or in an inconsistent state. The most important layer is the content, which is embedded in HTML. That content may come from a database, flat file in various formats (CSV, JSON etc.) or any other persistent data store. We rarely work in HTML directly as this is slow and error-prone. Forgetting to type the “/” character on a closing tag can lead to strange results, so that precious time may be lost in debugging. A server-side language like PHP, Python or Ruby (if you like) can generate the HTML for us. In one of those, we can define the HTML tags once and have them repeated as many times as needed. If we edited the HTML directly, we would need to type each tag repeatedly or duplicate it multiple times. The result would be multiple screens of content, where our ability to find the right piece of code would diminish and where it would be far easier to make a mistake. No matter what happens, the HTML layer has to be always accessible even when nothing else works (CSS and JavaScript can be disabled just like almost anything else). When we have added the content, we can start to style it (the CSS layer) to ensure proper element attributes (position, position offsets, color, text size etc.). At this point we can test with and without CSS. Then we add functionality (the JavaScript layer), so that we can reference the elements of interest (usually through classes and ids) and modify the page. Add this point we can test with and without JavaScript. Keeping things separate as much as possible is especially important in large projects as it helps us to quickly filter out alternatives and find the true source of bugs.

The browsers themselves can be seen as a layer on top of the OS, which means that the resources that the browser can use are strictly less than the resources available on the machine. Depending on the OS type, installed services and running processes, a browser may not always have sufficient resources to handle opening one additional website. Proceeding then will be slower than usual.

Relative and absolute positioning can be used in combination with z-index to add layers of content to our websites. The higher the z-index, the more visible that layer becomes; an opaque layer with a z-index of 5 would cover all layers with smaller z-indexes at that position. Inspecting elements in the browser places a layer above them to highlight them. Animating objects frequently moves them to their own layer, which can then be GPU accelerated. If needed, we could manually trigger this effect.

The media queries used in responsive design usually try to cover increasing screen sizes where the styles don’t overlap. This adds a layer for each (horizontal) resolution range and if we have many, this can add to the page weight or lead to code duplication. Adding more layers is not free, which is why we should keep the number of breakpoints to a minimum. We could think of each breakpoint as a separate layer, which is one reason responsive web design shouldn’t be considered a "base requirement" for every website as we may read on the web.

Providing help on mouseover adds a layer of explanation to an interface element without sacrificing the most common case where it won’t be needed. Interactive walkthroughs that add a layer over the content and explain where everything can be found are useful in situations where the interface isn’t very intuitive to the users or where novice users can’t find the functionality they are looking for. We should strive to organize our websites so that explanations are not needed (various sources discuss this) or if they are needed in case of an error, they don’t become all-revealing.

Software architecture can also be built in layers, which has the advantage that various pieces of the functionality can be assigned to different teams so that their responsibilities do not overlap. It is then the communication between the layers whose implementation requires extra care. Some design patterns like the adapter pattern add a layer of indirection to make two different interfaces compatible. The decorator pattern can be used to add layers of functionality to an object, which is quite flexible, but may make the system more complex if too many decorators are available.

The memory hierarchy of our computers is also built in layers with the slowest device being the hard drive and the fastest unit being the processor’s registers. Between these are the RAM and the various CPU cache levels.

Neural networks are build from layers of nodes and connections among them. They are frequently used in learning from data, where the network can adjust its behavior over time as new information becomes available. Sometimes each layer analyzes the data at an increasing granularity of detail. For instance an image may be first seen as a collection of pixels, then as a collection of patches/regions and as a whole image at last.

Image filters (convolution) place a moving window (a layer) over an image and take a dot product of all values that this window covers. Most common filter kernels have sizes of 3x3, 5x5 and 7x7, but occasionally we may hear about 1x1 kernels used for dimensionality reduction. All these filters are applied by using operations on matrices, sometimes in a sequence. Image compositing uses color values from the same pixel positions at two or more layers, each weighted by a factor to determine the color of the resultant pixel.

Layers of slightly different frames projected fast in a sequence give us the sense of watching an animation. We may need to encode only the start frame and the differences between each subsequent frame (as opposed to all frames) to be able to replay the animation without quality loss.

Using an online map service demonstrates another use of layers. Roads are rendered on one layer, signs on another, buildings on another and so on. This gives the user the ability to toggle on/off only the layers that they need in their particular case. Having most of them turned off by default ensures that only the most important data is transferred, reducing the initial download size of the map.

Each push on a stack is adding a layer. If we want to move back to the previous one we can pop from it, which will remove the topmost element. Each URL we visit in the browser is added to the browsing history stack, so we can go back if needed without the need to retype an address again.

Each software update adds a layer over what was previously available. When the number of layers becomes large, the system becomes slower to use and its maintenance more expensive. More people need to be assigned and dedicated to implementing changes. Additionally, more problems and more problem types may arise due to the increased number of connections between the layers.

Creating a minimum viable product first and then enhancing it by adding more functionality is another example how layers can be used to create something that people will want to buy. Incremental development based on frequent feedback is more likely to meet the customer’s demands than a product that is frequently changed entirely in a hurry. Kaizen (or continuous improvement) is an important principle that tells us that we need to add layers gradually over time.

Layers can be used as a means to reduce the physical size of an object (as seen from some foldable booklets). Folding clothes and stacking them on layers is another example how we can save space. Stacking books ensures that the full height of a bookshelf can be used, not only its width.

When studying a new language, the hardest theory is often learned only after we have mastered the easier parts. The preparation would have taken much longer if we reversed the sequence.

“Layers of defence” is an approach taken to improve application security. If someone succeeds in breaking the first level of defence, the second one is made visible and available to them. This helps to improve the application in specific areas while still ensuring that it works as usual. Two-factor authentication is an example of this approach.

Locality of access means that it is preferable to try loading a resource from the same location where the main content resides before going to physically distant and possibly unreliable sources. This means layers of access.

URL rewriting adds a matching layer on top of an URL address which may slow down the requests further. Before claiming that URL rewriting is universally good in all cases, we may need to benchmark first.

Naive Bayes adds a spam filtering layer that many of us now use. Without it, email might have become unreadable.

Data replication can improve fault tolerance. If one server fails, another can take on its work. Having such extra layer preserves operation in an event of failure and also the consistency of the user data after change events occuring during that time.

Metadata is an explanatory layer dedicated to informing crawlers how they can make sense of a website or contribute to creating a meaningful graph of related terms that can be queried, possibly in real-time.

Compatibility layers ensure that newer program versions are able to work with content created in older versions. To ease transitioning between different operating systems, they may choose to implement access to each other’s file systems. Another type of compatibility is when a faster memory module may still work on a machine having a slower module, provided that the interface is the same. USB2-to-3 adapters may help to use a USB3 flash drive on a machine having only USB2 ports.

Different customer segments can have access to different versions of the same product with varying product features. Each time a user switches to another plan, they choose to add or remove a layer of functionality. More loyal clients can get higher discounts if they buy more frequently, which means that a different service level can be provided to them.

There are plenty of other examples where layers can be seen or where having them would be beneficial.

bit.ly/2ceWgr4