Patterns

Study calls out ‘dark patterns’ in Facebook and Google that push users toward less privacy

More scrutiny than ever is in place on the tech industry, and while high-profile cases like Mark Zuckerberg’s appearance in front of lawmakers garner headlines, there are subtler forces at work. This study from a Norway watchdog group eloquently and painstakingly describes the ways that companies like Facebook and Google push their users towards making choices that negatively affect their own privacy.

It was spurred, like many other new inquiries, by Europe’s GDPR, which has caused no small amount of consternation among companies for whom collecting and leveraging user data is their main source of income.

The report (PDF) goes into detail on exactly how these companies create an illusion of control over your data while simultaneously nudging you towards making choices that limit that control.

Although the companies and their products will be quick to point out that they are in compliance with the requirements of the GDPR, there are still plenty of ways in which they can be consumer-unfriendly.

In going through a set of privacy popups put out in May by Facebook, Google, and Microsoft, the researchers found that the first two especially feature “dark patterns, techniques and features of interface design mean to manipulate users…used to nudge users towards privacy intrusive options.”

Flowchart illustrating the Facebook privacy options process – the green boxes are the “easy” route.

It’s not big obvious things — in fact, that’s the point of these “dark patterns”: that they are small and subtle yet effective ways of guiding people towards the outcome preferred by the designers.

For instance, in Facebook and Google’s privacy settings process, the more private options are simply disabled by default, and users not paying close attention will not know that there was a choice to begin with. You’re always opting out of things, not in. To enable these options is also a considerably longer process: 13 clicks or taps versus 4 in Facebook’s case.

That’s especially troubling when the companies are also forcing this action to take place at a time of their choosing, not yours. And Facebook added a cherry on top, almost literally, with the fake red dots that appeared behind the privacy popup, suggesting users had messages and notifications waiting for them even if that wasn’t the case.

When choosing the privacy-enhancing option, such as disabling face recognition, users are presented with a tailored set of consequences: “we won’t be able to use this technology if a stranger uses your photo to impersonate you,” for instance, to scare the user into enabling it. But nothing is said about what you will be opting into, such as how your likeness could be used in ad targeting or automatically matched to photos taken by others.

Disabling ad targeting on Google, meanwhile, warns you that you will not be able to mute some ads going forward. People who don’t understand the mechanism of muting being referred to here will be scared of the possibility — what if an ad pops up at work or during a show and I can’t mute it? So they agree to share their data.

Before you make a choice, you have to hear Facebook’s case.

In this way users are punished for choosing privacy over sharing, and are always presented only with a carefully curated set of pros and cons intended to cue the user to decide in favor of sharing. “You’re in control,” the user is constantly told, though those controls are deliberately designed to undermine what control you do have and exert.

Microsoft, while guilty of the biased phrasing, received much better marks in the report. Its privacy setup process put the less and more private options right next to each other, presenting them as equally valid choices rather than some tedious configuration tool that might break something if you’re not careful. Subtle cues do push users towards sharing more data or enabling voice recognition, but users aren’t punished or deceived the way they are elsewhere.

You may already have been aware of some of these tactics, as I was, but it makes for interesting reading nevertheless. We tend to discount these things when it’s just one screen here or there, but seeing them all together along with a calm explanation of why they are the way they are makes it rather obvious that there’s something insidious at play here.


Social – TechCrunch

Google Analytics Art: Symmetry and Patterns

Google Analytics Art: Symmetry & Patterns

As many of you, I use Google Analytics quite a lot, and I love the visualizations and the interface in general. But once in a while I am gifted with little data jewels that really make my day. We all know (or should know) that the chance of getting an exact 50-50 rate is the same as getting a 51-49, but round numbers have a certain glamour, and it is hard not to notice and appreciate them, especially when talking about very large numbers.

Usually, we look at it and appreciate the beauty for a few moments, maybe even share it with a colleague… but I also like to collect them 🙂 So, today I am sharing a few screenshots I collected over time with some nice patterns and symmetries.

Note: I am aware that it is possible to create any visualization on Google Analytics with fake data by simply going into the interface, right-clicking on numbers to “Inspect Element”, and changing the data in the source code. While that’s a great way to create a prank or just admire beautiful visualizations, in this article I am sharing charts I saw on real data, as I find it really mind-blowing, as mentioned above.

Symmetry: Lines, Pies, Bars

The universe is built on a plan the profound symmetry of which is somehow present in the inner structure of our intellect.” Paul Valery

Symmetric Line Chart

Symmetric Pie Charts

Symmetric Comparison Chart

Patterns: Multi-Channel Funnels

Art is the imposing of a pattern on experience, and our aesthetic enjoyment is recognition of the pattern.” Alfred North Whitehead

Google Analytics Channel pattern

Display seems quite strong!

Multi-Channel Funnel pattern

Colorful Data Patterns

Colorful data pattern

image 
Symmetric Line Chart
Symmetric Pie Charts
Symmetric Comparison Chart
Google Analytics Channel pattern
Multi-Channel Funnel pattern
Colorful data pattern


Online Behavior – Marketing Measurement & Optimization

The Importance of Context-Shifting in UX Patterns

Have you ever had a day at work where you were constantly put towards a new task as you were ramping up on the current one? It feels jarring at best, and completely frustrating and time-wasting at worst. In recent years, employers at big companies have begun to consider the cost of context-shifting—the time spent re-adjusting your brain to a different task adds up, causes frustration in employees, and thus: loses money. It follows that User Experience on a website works the same way.

Any time a new user visits your website, they do so with trepidation. It’s the reason that all sites begin to use the same patterns over time. For example, people tend to know how a radio button group works. You’re giving your users an interaction they already understand. But a lot of big sites don’t consider that by changing the placement of elements in the UI completely upon interaction, you’re also asking your user to readjust to this new view. This lack of context is an anti-pattern: we’re not gracefully showing the user what changed and why.

The associations of space, time and placement can help an interaction seem more fluid and intuitive. It needn’t be over-the-top. Think of clean, minimal UI designs. They can be easy to navigate and look very elegant, but it doesn’t mean they are easier to make.

Let’s give these placement changing interactions a name: context-shifting UX. Then we’ll attempt to demystify with some examples and techniques.

Before we dive into solutions, it’s important to note that any one of these can be overdone. Our brains (and subsequently, most living things) have evolved to especially take note of something in motion. This evolutionary trait is in place to keep us safe and alert, however, the part of your brain that kicks up adrenaline instinctual for survival is the part triggered when something unexpected moves. Animation is fantastic! The web is a static, droll, box without it. But when it comes to UX animation, subtlety is key.

The power of most of the techniques we’ll cover are in combining them. Throughout the article I’ll illustrate this with complimentary approaches such as the Pen below. It’s recommended to see the full demo.

See the Pen map 30 by Sarah Drasner (@sdras) on CodePen.

Revealing

Imagine a modal that reveals itself on click. Anything we pop onto the screen without warning has the potential to cause unease. Modals are powerful because they have a commanding and attention-grabbing state, but are often disliked, in part because they can be so jarring.

If we can reveal the modal in a more nuanced way, say by expanding, scaling, or flipping it, we suddenly create the opportunity to guide our users from one state to another. We’ll get just as much attention as a jarring modal, or perhaps even more so, because our brains have evolved to detect movement.

Revealing states (think of a modal as a “state”) are particularly useful because we can play some slight-of-hand tricks that make everything seem very fast. We can lazy-load the hidden state after the rest of the page is done, but keep it dormant and paused, so that it can easily come when called by a trigger such as a button or even a scroll event. This has the potential to make this technique feel seamless and intuitive. I’m not the only person who’s considering UX and revealing states in animation, check out this great article from Val Head on A List Apart, too.

Morphing

A visually obvious transition technique is morphing. If you need to get from one state to another, the simplest thing you can do to relax that transition is to morph one shape into another. It can be quite a lovely effect!


UI flourishes that use concepts like transformicons have become popular because they are elegant, informative, and enjoyable.

Both SVG and CSS are good options for these kind of UI animations. I’ve found, from working with both, that each have their strength and weaknesses. CSS easily tweens round to square and back again with border-radius. It can also handle large quantities of scale transforms gracefully, while SVG, beyond a few multitudes, will appear pixelated before recovering. However, SVG is built for drawing. It is well suited for complex shapes. You can tween path or even shape data with JavaScript, previously with SMIL (no longer recommended because of discontinued support), and soon CSS with some new SVG Styling Properties in working draft with the W3C. Snap.svg is well-known for tweening path data with similar numbers of points gracefully, and GSAP offers similar capabilities with their Attr plugin. You can also make an SVG look like it’s drawing itself for morphing effects by animating the stroke-dashoffset, as you see in the demo when the close button disappears.


Morphing and revealing, when orchestrated in tandem can create informative and intuitive UX patterns, demonstrated in the Pen above.

The combination of effects mean that the user interface can come when called.


Rather than moving through popping modals or multiple screens, the map marker morphs into the information the user needs, the inputs move out of the way for the user to write in their email, and the submit state tells you immediately that something is loading.

Everything is already on the page waiting to be activated.

Isolation

People do not keep steady focus on your UI no matter how clean your UX. Eyes move around in a phenomenon called Saccade, creating a three dimensional mental map of a scene, yet focusing on points of interest. If you consider that your site ideally siphons a wide user base into smaller sections depending on their interest, narrowing the scope of what they are scanning is helpful.

Here, we illustrate how once the user decides their relative path of interest, the design shifts to guide them, giving them less area to scan and making it more clear where their attention should lay (see full pen here):

See the Pen map 30 by Sarah Drasner (@sdras) on CodePen.

Style

Any of these techniques need to be married with the appropriate style. I’ve written before on how to accomplish appropriate style and branding communication within a motion design language. The morphing/revealing Pen I showed earlier has a sine/single curve easing. Compare this to the bouncy easing in this Pen:

See the Pen map 30 by Sarah Drasner (@sdras) on CodePen.

The bouncing easing gives things a more more expressive and elastic tone. Both the above example and the map example complement the palette and type of design. The motion language in context-shifting has to be married with the rest of the design. If it didn’t, it would seem out of place. Imagine the bouncy feeling in the slick map design—it would be weird. We’ve used different context-shifting techniques in each example to support the site’s branding.

The style can also change the way that the context-shifting action is registered in our brains. This gooey menu by Lucas Bebber is a more memorable and unique way to register where items are going and where they have gone than other ways of accomplishing the same beginning and end states. Being memorable for creativity and style is always a good thing. Lucas’ series of Pens demonstrating this relatively simple technique have a combined view count of almost 320,000!

The relative style of easing can be used the same way you might think of a color palette. Most company use accent colors sparingly to balance a complete color palette and call attention to certain key points:

accents in palette and ease
We can apply the same accent logic we know from creating palettes to creating a site’s eases (images made with Adobe Color CC, and GreenSock’s ease visualizer)

Let’s say all of the easings on your site are more linear, and something you trying to attention to snaps or bounces onto the screen. That makes it stand out in significance. In the earlier demo, the only bounce ease I used was on the check, upon confirmation of success.

tl.fromTo(check, 0.2, {     scale: 0,     rotation: -30   }, {     scale: 1,     rotation: 0,      transformOrigin: "50% 50%",     // ease out with back ease which has a single exaggerated bounce     ease: Back.easeOut     // begin according to a relative label   }, "done+=7.1");

This is only one example of this kind of logic in the whole interaction.

Drag and Drop

You learn more by doing. It’s an old adage, but an accurate one. Let’s use this old wisdom and apply it to our UX patterns with context-shifting in mind.

Rather than simply selecting an item and having it transition before the viewer’s eyes, interconnectivity between states of a UI can be reinforced very strongly when the user themselves are the ones that carry the action forward. Consider these very well done Drag and Drop Interactions by Mary Lou (Manoela Ilic) on Codrops.


She shows a plethora of ways this can be accomplished by the user for a variety of use-cases, each time, the interface quickly comes to greet the user, enforcing a fluidity of movement from one juxtaposition to another.

The drawers come out, and are put away when the user has finished their selection. It would be difficult to move any piece into a separate compartment without the user remembering that they have placed it there—much harder than if it had collapsed or simply vanished of it’s own accord.

Placement

You may find that you’re not as excited about animation as I am. Facilitation of seamless context-shifting can be still achieved without animation, but instead, with more calculated placement of objects. The clearest course is simply to place elements near one another. Here’s an example of this in terms of collapsing navigation.

This is has the potential to be much more complex than it sounds. With dozens or more links and interactions on a page, keeping the next state close to previous transition requires prior planning, and could mean design reorganization.

Any good UX user flow will consider the relative trajectory of a user navigating the site. This kind of organization should be something that is built on something like a Story Map where this is already taken into account. A placement-only implementation of context-shifting is least recommended, because it is less malleable as pieces of the UI become more like puzzle pieces, and because of their lack of fluidity, the placement of elements becomes more brittle.

Subtle Cues

Shifting from one view to another is not the only important context-shifting behavior. Some symbolize something that has happened and will happen. Small examples of this are:

  • A dropdown selection changing other contexts on the page
  • A loading state
  • A button being pushed
  • A login being rejected
  • A form being submitted but not having gone through yet
  • Something saving

When these type of changes occur, it might not make sense to have a grand change, but still signify that the state of the page has changed or is in the process of transitioning- creating a context in and of itself. Considering the techniques we spoke about earlier, we might ask ourselves:

  • Are we captivating the viewer during the transitional state, or is it simply a small means to arrive at the end state?
  • Will this transitional state be reused for other instances? Does it need to be designed to be flexible enough for multiple placements and failure conditions?
  • Does the movement need to express the activity? An example of this would be the user saving something that’s not complete yet, in which case an anthropomorphization of “wait” would help communicate this.

Asking questions like this before the design is implemented helps us discern how to communicate wordlessly with our audience.


Again, these techniques are stronger when combined. By writing this article I am not suggesting people only use what I outlined. Quite the contrary, context-shifting is a fundamental piece of intuitive interface design, and we’ve only hit the tip of the iceberg. The purpose of detailing each is to provide people a jumping-off point so that they feel they can experiment. User Interface designs become boring when they are redundant. There is a lot of space between humdrum hide and show and a confusing popup zooming around the screen. There is space for invention, where thoughtful design meets interactivity.


The Importance of Context-Shifting in UX Patterns is a post from CSS-Tricks

CSS-Tricks

New Web Trends in Designing Part 2: Artistic Patterns, Grid Patterns and Animation Patterns

Last time we considered brand-new types of patterns such as generative and data-inspired. Today we are going to take a look at some others, including classic ones that have been given a refreshing uplift, static ones that are based on a grid and another dynamic patterns that are used for animations.

Artistic Patterns, Grid Patterns and Animation Patterns in Web Design

Artistic Patterns
Traditional patterns to which we are so accustomed recently have received a creative boost. They are no longer simple shapes or 8-pixel size objects; they are relatively huge drawings, sketches and tiny illustrations with lots of color and details.

Le Coq Sportif

Le Coq Sportif is spiced up with a dose of personality. Crafty pattern with a 3D flair goes well with line style graphics and images that are neatly scattered throughout the page.

Le Coq Sportif

iForex Blog

iForex Blog has a marvelous artistic aesthetic. Beautiful illustrations that recreate the whole atmosphere transmit the message. Pattern is a vital detail of all the composition that enriches the design.

iForex Blog

Cyborg Project

Cyborg Project is a blog about colors and the world of cyborgs. So that such a radiant background that strikes the eye from the first seconds is an ideal option. Although the canvas is certainly overwhelming, the content area stays above it and provides users with optimal readability.

Cyborg Project

AARK Collective

AARK Collective features a series of fantastic, unconventional artworks that are used as patterns for the background. It strengthens the brand and adds a note of refinement.

AARK Collective

Websto

Websto is based on a classic vertical striped pattern that reproduces a candy shop feeling with an appetizing air. The yummy backdrop certainly gives the website a cutting-edge feel. Primary color palette and decorative font reinforce the theme.

Websto

Mint Teal

Mint Teal leverages simple geometric forms to enrich the background, making it more appealing and setting up a proper atmosphere. The solution is simple and elegant. Gorgeous coloring, lots of white space and a splendid pattern from the good old days add to the design a particular charm.

Mint Teal

For Better Coffee

Here the background is pretty loud thanks to an enormous visual weight. Bright coloring and flat style play here the first fiddle. Although it is highly saturated and content-intensive, nevertheless, it does not overpower online visitors, on the contrary, it gently lures them into the project.

For Better Coffee

Animation Patterns
It has almost become a tradition to charge front pages with motion, especially if they employ an illustrative environment. Use of static dramatic scenes is not enough to satisfy today’s audience demands. Users crave animations, action and a touch of playfulness and amusement. So that short animation patterns are becoming more and more popular.

Fieldwork

The front page of Fieldwork is marked by a vibrant flat style animation that catches the eye with its interesting and unique idea. Several processes are looped in order to provide the project with constant dynamics and motion as well as symbolize an assembly line.

Fieldwork

Summer Meltdown Fest

Summer Meltdown Fest owes its eye-pleasing and wonderful appearance to an illustration that has a dose of naturalness and freshness. Several objects of the composition are energized with subtle motion to make it look more alive.

Summer Meltdown Fest

Ford Responde

Ford Responde is a matchless website with lots of cutting-edge details. An animation pattern is used to make the backdrop suitable for the dynamic object at the heart of the page. It contributes to attitude and supports the spirit.

Ford Responde

iCentric

iCentric leverages a sleek, dynamic pattern to make the photo manipulation look more exceptional and energized. The artist combines particle animation and subtle motion to achieve such an impressive result.

iCentric

Lobster Kitchen

Lobster Kitchen has an admirable marine motif that support the restaurant name. Here an illustrative environment that welcomes the online audience is powered by several tiny animation patterns. They bring to life clouds, seagulls, and ships, offering a memorable experience.

Lobster Kitchen

Appetals

Appetals has a strong personality and charisma. Marvelous hand-drawn icons and illustrations that form the main background strengthen the overall aesthetics. Animation patterns are used to force some objects to blink thereby adding a sleek touch of motion.

Appetals

Dream Team

Dream Team boasts a refined and exquisite appearance. The beauty of the homepage lies in a gorgeous smooth pastel coloring, nifty ghost buttons, line style graphics and a delicate animation pattern that maintains users’ focus at the center.

Dream Team

Grid Patterns
Creatives use grids everywhere, so why not to get the advantage of its ability of perfectly organizing stuff for prettifying backgrounds. There are some examples below that demonstrate it in practice.

BlackBox Design

BlackBox Design utilizes a grid style pattern that has a boxy appeal to adapt the background to foreground structure on the right. As a result, they fit together like two pieces of the puzzle. The dark coloring enhances the effect.

BlackBox Design

District 13

District 13 uses a very similar approach, yet in this case cells are much bigger, and they hide data that can be revealed on demand. The front page is a masterpiece, where the pattern plays an important and connecting role.

District 13

Uniqlo Airism

Here each cell features an elegant animated glyph and is based on a soft pastel monotone background. This dynamic grid pattern is a tool for entertainment and interaction with the online audience.

Uniqlo Airism

The Formica Envisualizer

The Formica Envisualizer makes use of several intricate crafty visually-appealing patterns that decorate sections of the website. Regular geometric shapes paired up with gorgeous soft coloring give each area a sprucing up.

The Formica Envisualizer

Good Patch

The backdrop of Good Patch can be partly attributed to the grid pattern. A bunch of flat solid colored circles are scattered throughout the homepage adding a nice zest to the aesthetics. They perfectly contribute to the theme and reinforce visual appeal.

Good Patch

Blue Ridge

The landing page of Blue Ridge has a splash of personality and a powerful business-like vibe. It easily complements the brand’s identity and sets up a comfortable environment. Grid pattern used for the backdrop glues everything together and strengthens the general impression.

Blue Ridge

Conclusion

To sum up both articles, patterns are still popular instruments for creating marvelous aesthetics. The listed above and previously discussed types of patterns are no more and no less than fresh and original takes on a method of decorating canvases. Not all of them are popular, yet all of them are trendy. Thus, crafty and grid patterns are rare, though they have a huge personality.

Animation, generative and data-inspired patterns run the show this year; they are primary tools for making the project look outstanding and modern. So, share with us your thoughts?


Onextrapixel – Web Design and Development Online Magazine

New Web Trends in Designing Part 1: Data Patterns and Generative Patterns

Web design trends have an inclination towards evolving, maturing and improving. Of course, developers do not stay still; they are constantly coming up with brand-new approaches and inventive tricks. However there are always techniques that fall into the category of ‘Everything new is well forgotten old’ that thanks to vivid imagination, huge experience, and the fresh sight of creative folks, get uplifted and adapted to modern realities. One of the great examples of such a case is the use of patterns, one of the most common tools that has been overlooked for some time. Recently we have witnessed a rebirth of it.

In the era of flat style, material design, open spaces and getting rid of everything unnecessary and lavishly decorated, design patterns in their original form have become quite obsolete. Nevertheless, due to some improvements and advancements they have managed to stand up to the competition.

Today they offer artists some interesting, inventive and ingenious implementations, like generative patterns, animated patterns and so on. We have split this topic into 2 articles to embrace various case studies. In this article, we are going to take a look at some fresh techniques – generative patterns and data-inspired patterns that are slowly but surely conquering the web, making it more sophisticated, dynamic and engaging.

Data Patterns and Generative Patterns in Web Design

Data Patterns

Double Pi

Double Pi features one of the most popular and trendy approaches to dynamic design patterns used these days – a utilization of responsive particle animation that follows the mouse cursor. Huge open space and lack of decoration make this solution an eye catcher.

Double Pi

Seeing Data

Seeing Data reflects an idea of the website from the first seconds through working several static data patterns into the main background. They perfectly complement the design and reinforce the theme.

Seeing Data

Nathan Riley

Nathan Riley has a first-rate online portfolio that welcomes the online audience with an exquisite front page design. Dynamic data-inspired pattern enhances the backdrop, heightens the first impression and adds to the general atmosphere.

Nathan Riley

Microwave Fest

Not only does Microwave Fest leverage an interesting and unique typography but it also makes its landing page data-intensive with the help of a pattern. The latter certainly strikes the eye.

Microwave Fest

Ecessa

Ecessa has a distinctive and serious atmosphere that contributes to the concept. Dark bluish coloring with red used as an accent color and some data patterns used for several section backdrops recreate a powerful general feeling.

Ecessa

NewsTech

NewsTech, as you would expect, has a strong high-tech vibe that instantly grabs the whole attention. The homepage is a masterpiece that is enriched with infographics-style components and ghost buttons. Each detail ideally blends with the environment and the concept.

NewsTech

Uber Brand

Uber Brand has a fancy dynamic background that has charm. Not only does it elegantly highlight the body content but it also recreates a pretty strong first impression that is so necessary for winning over potential clients.

Uber Brand

History of Innovations

History of Innovations offers a memorable storytelling experience that familiarizes users with the history of innovations in a pleasant way. Complementary data-inspired animations that enhance the homepage strengthen the overall effect.

History of Innovation

Inome

Inome tries to visually support its slogan through incorporating a quite inventive, eye-catching and dynamic data-inspired pattern into the background. The idea certainly works here.

Inome

Aspire One

Aspire One has a clean and subtle front page that, thanks to the generous amount of white space and streamline navigation, makes the logotype a focal point as well as provides users with a breath of fresh air. The top of the page is marked by a vigilantly crafted data pattern that fits here like a glove, adding its unique zest.

Aspire One

Generative Patterns

JJ

JJ boasts a matchless personal portfolio that has lots of interest to marvel at. The landing page strongly relies on a cosmic vibe produced by a generative pattern that goes perfectly well with a huge isometric ‘J’, neon supplementary coloring and subtle iconography. This stylish top-notch design powered by trendy techniques proves that this Poland-based web developer is a real pro.

JJ

Petar Stojakovic

Petar Stojakovic is another master of his craft who is perfectly aware of all modern trends and brand-new solutions. His online portfolio is packed with some features that are a la mode. Here a generative pattern enriches the front page indicating the high level of artist’s skills.

Petar Stojakovic

Berengere Audo

Berengere Audo’s personal portfolio is another representative example of a contemporary website that owes its mind-blowing appearance to a generative pattern. As befits, it has a lovely yet slightly brutal geometric nature that ideally complements the polygonal 3d-dimensional ‘B’. It follows the actions of the user, gently forcing him/her to delve into the project.

Berengere Audo

Wine Explorer

Wine Explorer by Brancott Estate has a marvelous website design that gets the most out of various artistic tricks. There is a chalkboard textured backdrop bolstered by a fancy generative pattern, grungy iconography, chalk style graphics, and last but not least dynamic typography. The latter is certainly a centerpiece here since with its animation routine it adds playfulness and dynamics.

Wine Explorer

Blackpen

Blackpen leverages a series of simple yet eye-catching generative patterns that spin the website creatively as well as add piquancy to the slider. The artist opts for basic geometric shapes such as triangles, circles, lines and stripes that add a touch of beautiful simplicity.

Blackpen

Unimersiv

Unimersiv has a powerful high-tech vibe and businesslike appeal that perfectly contribute to the concept. A refined polygonal background made in a gorgeous bluish coloring in tandem with a generative pattern enrich the design aesthetics, improve the overall impression and make the website stand out from the crowd.

Unimersiv

So Interactive

So Interactive skillfully utilizes generative patterns as a decor that take up a narrow row or column of the page. The front page also charms with an interesting color combination and photo manipulations that evoke some mixed yet powerful feelings.

So Interactive

Estrada

Estrada goes for some smooth and pastel generative patterns that set the rhythm of the project. Each pattern consists of creatively crafted numbers that reflect a decade in music through a particular style: there are soft retro 60s, vibrant disco 70s, techno 90s, and some others.

Estrada

4:20 avec Dead Obies

4:20 avec Dead Obies features a whole range of generative patterns that diversify the look of almost each section of the website. Such a solution adds motion to the project as well as charges it with energy and makes it definitely excel from others.

4:20 avec Dead Obies

Giant Steps Media

Giant Steps Media has a fantastic fully interactive front page where a generative pattern rules the roost, seizing the whole attention.

Giant Steps Media

Conclusion

Generative patterns along with data-inspired patterns recreate a distinctive sense of high-tech, modernity, and stylishness. Also, some of them add elegant motion and subtle energy to the design, but there are some that convey the idea of the project right away, making it more straightforward and interesting to the simple user.


Onextrapixel – Web Design and Development Online Magazine