I remember searching for tutorials for making seamless patterns in Photoshop¹ all the time back in the day.
It’s fun to see this little website for building repeating patterns as its one job. It does everything you’d expect: pick a background, drag some decorations onto it and position them (overlapping an edge is fine, which is the hard part, and makes the designs look less griddy), color them, and away you go.
The trick is to make a square with a design in it, then Filter > Other > Offset of half the width/height to make the seamless repeating edges work, then add a bit more in gaps.
The entire Smashing team has been doing its very best to bring you live sessions with real experts — people with practical experience who love to share what they have learned throughout their careers. We organized Smashing Meets on three days — events that were open to everyone in the web community. With sessions on performance, CSS, GraphQL, and creative courage, we made sure to leave plenty of time for Q&A, networking, competitions and prizes.
We’re overwhelmed with the feedback we’ve received since then; many of you seemed to mostly enjoy spending time with speakers, and asking questions directly. A huge thank you again to everyone who joined in — it was such an incredible experience to have shared with you all!
Henri Helvetica, Yiying Lu and Vitaly Friedman live on screen at the recent Smashing Meets event. (Image credit: Yiying Lu)
Mark your calendars! We’ll be organizing even more online events in the next weeks. Whether the spotlight shines on CSS, accessibility, performance or UX, we want to help you boost your skills and learn practical, actionable insights from experts in the industry.
The previous workshops have been incredibly popular with many becoming sold out, so do check the details and save your spot as soon as you can.
Staying up to date can be so difficult. It’s a jungle out there, but we have you covered! See online events ?
One last thing. In case you find yourself thinking twice about joining in a Smashing workshops just because you think your manager could need just a little bit more persuasion, then we’ve got your back with a neat lil’ template: Convince Your Boss. Good luck!
Our Latest Addition To The Smashing Books: Shipping Now
We’re so proud to have officially released Paul Boag’s book, “Click! How To Encourage Clicks Without Shady Tricks”. It is a detailed guide on how to increase conversion and boost business KPIs without alienating customers along the way, and we’re sure you’ll find it tremendously useful.
Quality hardcover. Free worldwide shipping. 100 days money-back-guarantee. Tell me more ?
Smashing Podcast: Tune In!
18 episodes in, the Smashing Podcast has been better than we had ever expected! Every two weeks, Drew McLellan speaks to folks from different backgrounds, and there’s always so much to learn and share! You’re always welcome to tune in and share your questions and thoughts with us anytime.
We publish a new article every day on various topics that are current in the web industry. Here are some that our readers seemed to enjoy the most and have recommended further:
We’ll be honest: Every second week, we struggle with keeping the Smashing Newsletter issues at a moderate length — there are just so many talented folks out there working on brilliant projects! Kudos to everyone involved!
Interested in sponsoring? Feel free to check out our partnership options and get in touch with the team anytime — they’ll be sure to get back to you right away.
P.S.A huge thank you to Cosima Mielke for writing and preparing these posts!
Modern CSS Solutions For Old CSS Problems
We all know that CSS can sometimes be tricky to master. Just think of the classic question of how to center a div. In “Modern CSS Solutions for Old CSS Problems”, Stephanie Eckles explores solutions to those big and small CSS problems she has been solving in the last 13 years of being a front-end developer.
Apart from the old centering issue, the series explores challenges like creating elements of equal height, making dropdown menus accessible, styling buttons, and much more. Be sure to check back regularly as Stephanie keeps adding new topics. Brilliant!
Illustrations For Everyone
Illustrations are a great way to add a personal touch to a design. However, not everyone is a born illustrator and not every project has the budget to hire someone who masters the craft. During the lockdown, Pablo Stanley and a few of his friends decided to change that and created a tool that makes art more accessible and gives everyone the ability to use illustrations in their creations. Meet Blush.
Blush is a collection of 13 mix-and-match illustration libraries created by artists from around the world. Whether it’s characters, cityscapes, plants, food, or a piece of abstract art, you can pick your favorite illustration from one of the packs and customize every little detail until you have the combination you need to tell your story. As Pablo puts it, it’s “like playing legos made of vectors”. The illustrations can be downloaded for free as high-quality PNGs. If you are an illustrator yourself and would like to make your work available to other makers, too, you can apply to get featured in Blush. A fantastic example of sharing and caring.
Learn Flexbox With Code Tidbits
You’ve always wanted to learn Flexbox but the whole undertaking seemed a bit, well, daunting? It doesn’t have to be. In fact, it might only take 30 code tidbits to get you on the path to mastering some Flexbox magic. Samantha Ming has got your back.
In her free course Flexbox30, Samantha takes you through 30 short and crisp Flexbox lessons. After learning the core concepts of Flexbox, you will explore the ins and outs of parent and child properties. Each lesson comes with a cheat sheet that you can download which makes the course also a great refresher if you already know your way around Flexbox but struggle with some of the properties.
Global Website Speed Profiler
Performance benchmarking tools usually measure performance form a single location. But how does your site perform for real-world users who aren’t based in that one location? To get more precise results for their own market, the folks behind the WordPress security plugin Wordfence built Fast or Slow, a tool that measures real-world performance from different locations around the world.
Fast or Slow gets its data from a network of 13 servers in 13 cities around the world. Each server was calibrated to have the same performance so that the speed measurements give a true indication of what the site feels like to a real user. The performance test provides you with an overall score of a site’s performance and breaks the results further down by geographic location, while audits on CSS minification, image optimization, caching, and more help reveal specific performance bottlenecks. Fast Or Slow is free to use.
Sleek Browser Frames For Your Screenshots
With screenshots, there are usually two options: You take a screenshot of the entire browser window with browser extensions and maybe even bookmarks visible or, if you want something less distracting, you decide to only take a screenshot of the site without any border at all. If you’re looking for a more sophisticated solution, Browserframe might be for you.
Just drag and drop your screenshot into the tool, and it wraps it into a neat browser frame. There are multiple browsers, operating systems, and themes to choose from, and you can adjust the background color, shadow, padding, and some other details before you download the image. Perfect for blog posts, social media, slides, or wherever else you might want to use a screenshot.
SVG Path Data Syntax Explored
Do you know what the SVG path data syntax actually means? If not, you’re not alone. Mathieu Dutour has been working with SVGs for quite some time but always struggled to understand the path data structure. That’s why he built a visualizer for it.
The SVG Path Visualizer visualizes the SVG path data you enter and lets you discover all its different commands. There are also several examples you can explore to get more familiar with the syntax. An insightful look into the skeleton of an SVG.
The Future Is Here
Imagine you are working on a project and want to add a picture of a book to it. You have the book right beside you on your desk, so you take out your phone, take a picture of the book, send the picture to your computer, open it in Photoshop, remove the background, and, finally, include the picture in your file. Well, now what if you could copy and paste the book from reality onto your screen, just where you want it to be? What might sound like science fiction, is already possible today.
The research prototype AR Copy Paste allows you to copy elements from your surroundings and paste them into an image editing software. Three independent modules make it happen: a mobile app, a local server that acts as the interface between the app and Photoshop and finds the correct position on your screen, and, last but not least, an objection detection/background removal service to cut the image into shape. An impressive peek at the future of AR.
Black Illustrations
Black people and people of color are often underrepresented in illustrations and visuals. To spark change in the digital landscape, the team at 5four created Black Illustrations, illustration packs that paint a more diverse picture and show black people and people of color in a myriad of tasks.
There are six illustration packs that can be used on websites, pitch decks, infographics, or anywhere you like. Two of the decks are free to download: “The Office Hustle” shows people in an office environment, working from home, and having conversations, as well as in a healthcare setting, while “The Movement Pack” calls attention to #BlackLivesMatter and the fight against racial inequality. Other packs include education- and lifestyle-themed images. Beautiful designs with a powerful message.
See Easing Curves In Action
Movement in the real world is something fluid, no harsh or instant starts or stops, no constant speed. Easing curves help us bring that natural feel to motion on the web. However, in practice, they can be quite abstract to grasp, too.
With Easings, Paul Macgregor built a useful tool to visualize the effect common easing curves have on a range of interfaces — from a gallery carousel to a side menu, scroll jack, and modal. Just choose an easing curve from the collection to see it in action or enter a custom one. One for the bookmarks.
Insights Into How Developers Work Today
Since almost a decade, the yearly Developer Survey conducted by Stack Overflow is the largest survey of people who code. This year, they made it more representative of the diversity of programmers, asking 65,000 developers from around the world how they learn, which tools they use, and what they want. The survey was conducted in February and the results offer a comprehensive look inside the community.
The survey covers the developers’ professional and demographical background, looks at tools and their popularity, what the respondents’ dev environments look like and how they learn and solve problems, just like at their career values, job priorities, and working conditions. Interesting insights guaranteed.
CSS Art In A Single Div
What can you do in a single div? Lynn Fisher has a lot of creative answers to this question, as her CSS drawing project A Single Div shows.
Every drawing is made up of CSS living inside a single div element and uses a combination of Pug for templating and Stylus for CSS preprocessing. From lettering and geometrical patterns to random objects and little characters, each colorful tile is a wonderful example of what can be accomplished with CSS.
A Magic Notebook For Exploring Data
Open source has transformed software development, making sharing, collaboration, and transparency the norm. Inspired by this, Observable aims at reimagining data science for a connected world. To make it more approachable, accessible, and social.
Described as a “magic notebook for exploring data and thinking with code”, Observable lets you sketch with live data. You can prototype visualizations, connect to Web APIs, and see your “notebook” update instantly when changes are made. Learning from one another, sharing and reusing components with a community of fellow authors is a key part of the concept, teams are even able to edit a notebook together in realtime. Now what to make with it? Reports, explanatory visualizations, UI prototypes, documentation, art projects, visual designs — only your imagination is the limit.
Smashing Newsletter
Every second Tuesday, we send a newsletter with useful techniques on front-end and UX. Subscribe and get Smart Interface Design Checklists PDF in your inbox.
Front-end, design and UX. Sent 2× a month. You can always unsubscribe with just one click.
The element in HTML and Canvas API in JavaScript combine to form one of the main raster graphics and animation possibilities on the web. A common canvas use-case is programmatically generating images for websites, particularly games. That’s exactly what I’ve done in a website I built for playing Solitaire. The cards, including all their movement, is all done in canvas.
In this article, let’s look specifically at animation in canvas and techniques to make them look smoother. We’ll look specifically at easing transitions — like “ease-in” and “ease-out” — that do not come for free in canvas like they do in CSS.
Let’s start with a static canvas. I’ve drawn to the canvas a single playing card that I grabbed out of the DOM:
CodePen Embed Fallback
Let’s start with a basic animation: moving that playing card on the canvas. Even for fairly basic things like requires working from scratch in canvas, so we’ll have to start building out functions we can use.
First, we’ll create functions to help calculate X and Y coordinates:
function getX(params) {
let distance = params.xTo - params.xFrom;
let steps = params.frames;
let progress = params.frame;
return distance / steps * progress;
}
function getY(params) {
let distance = params.yTo - params.yFrom;
let steps = params.frames;
let progress = params.frame;
return distance / steps * progress;
}
This will help us update the position values as the image gets animated. Then we’ll keep re-rendering the canvas until the animation is complete. We do this by adding the following code to our addImage() method.
Now we have animation! We’re steadily incrementing by 1 unit each time, which we call a linear animation.
CodePen Embed Fallback
You can see how the shape moves from point A to point B in a linear fashion, maintaining the same consistent speed between points. It’s functional, but lacks realism. The start and stop is jarring.
What we want is for the object to accelerate (ease-in) and decelerate (ease-out), so it mimics what a real-world object would do when things like friction and gravity come into play.
A JavaScript easing function
We’ll achieve this with a “cubic” ease-in and ease-out transition. We’ve modified one of the equations found in Robert Penner’s Flash easing functions, to be suitable for what we want to do here.
Inserting this into our code, which is a cubic ease, we get a much smoother result. Notice how the card speeds towards the center of the space, then slows down as it reaches the end.
CodePen Embed Fallback
Advanced easing with JavaScript
We can get a slower acceleration with either a quadratic or sinusoidal ease.
Rolling your own easing functions can be fun, but what if you want more power and flexibility? You could continue writing custom code, or you could consider a more powerful library. Let’s turn to the GreenSock Animation Platform (GSAP) for that.
Animation becomes a lot easier to implement with GSAP. Take this example, where the card bounces at the end. Note that the GSAP library is included in the demo.
The gsap.to method is where all the magic happens. During the two-second duration, the position object is updated and, with every update, onUpdate is called triggering the canvas to be redrawn.
Still unsure about which animation style and method you should be using in canvas when it comes to easing? Here’s a Pen showing different easing animations, including what’s offered in GSAP.
CodePen Embed Fallback
Check out my Solitaire card game to see a live demo of the non-GSAP animations. In this case, I’ve added animations so that the cards in the game ease-out and ease-in when they move between piles.
In addition to creating motions, easing functions can be applied to any other attribute that has a from and to state, like changes in opacity, rotations, and scaling. I hope you’ll find many ways to use easing functions to make your application or game look smoother.
I’d say 85% of my grid usage is in one of these two categories…
I just need some pretty basic (probably equal width) columns that ends up being something like like grid-template-columns: repeat(3, minmax(0, 1fr));to be safe.
Actually doing some real layout where five minutes in I realize I’d really like subgrid.
Subgrid? It’s a nice intuitive way to have a child element on the grid inherit relevant grid lines from the parent grid.
Here’s a great recent video from Rachel Andrew covering it. Last year, we linked up her talk on the same! It’s such a clutch feature and I wish we could rely on it cross-browser. Right now, Firefox is the only one that has it. (Chrome issue, Safari issue)
In my recent video, right about at 20 minutes, I realize subgrid would make even a fairly simple layout much nicer, like removing the need for variables or resorting to magic numbers.
CG artwork stands for Computer Generated artwork. If you are into movies, you’ve probably heard the term CGI. CGI stands for Computer Generated Images.
CG artists are digital artists, and they create CGIs. These CGIs include 2D and 3D works as well. Most people who know the term CGI from the movies think it’s just about animation. That’s not the case at all. CGI images have various use cases throughout different industries, from architecture to gaming.
The term CG artwork is broadly used, it basically means an artwork that is created by the artist using the computer.
Enjoy some of our favorite CG artworks all around the web!
Master Dou is a character in Kuniga’s comic book series, Twilight Monk. He is a Kung Fulio Master, and the Eldest of the Crescent Isle monastery council.
This is an early-stage design by Jurabaev in collaboration with Sam Rowan and Joseph Mclamb. They’ve created this great work for the Beauty and the Beast.
This one is from Encounters With the Imaginary by Edlin. He has a YouTube video through which you can get a glimpse of the creation process. Check CG artwork video out below!
The Titans’ Toms is an illustration work by Brunet he has created for ART School for Digital Artists. Here’s the timelapse video of how it’s created, make sure to check it out! See the making of the CG artwork video below!
This one is created by Wayne Reynolds for Pathfinder 2e. Reynolds is a greatly known CG artist especially in the RPG scene, having his artwork at productions from Wizards of the Coast, Osprey Publishing, Games Workshop, 2000AD, Paizo, and Green Ronin Publishing.
If you are familiar with JRPGS, you may recognize the style right away. This one is created by Cheng Hong for Mobius Final Fantasy.
These are some of our favorite CG artworks and CG artists all around the world. Feel free to check out their Artstation profiles and websites for checking more of their work.
There’s no escaping the ancient masters. Their shadows loom large over philosophy, literature, architecture, warfare, and… web design? Believe it or not, yes. Although Plato infamously omitted CSS Grid from from the final draft of The Republic, there is nonetheless plenty the old heads can teach us about web development.
Today’s lecture is about architecture, and how some of its core tenets apply to the worldwide web. Architectural terms are not unusual in web development, and for good reason. In many ways, web developers are digital architects. This piece will focus on Vitruvius, a Roman architect, and how his principles can and should be applied to websites.
This will focus in particular on the Vitruvian triad, three qualities essential to any building: durability (firmitas) , usefulness (utilitas), and beauty (venustas). Familiarity with these terms — and what they mean in practice — will help make your website better.
Vitruvius
Marcus Vitruvius Pollio was a Roman architect, civil engineer, and author who lived during the first century BC. He is remembered mainly for his writings on architecture, De architectura. Addressing the then emperor Augustus, Vitruvius outlines his thoughts on architectural theory, history, and methods.
Vitruvius posing for a LinkedIn headshot. (Large preview)
De architectura is the only treatise on architecture to survive from antiquity, and remains a design touchstone to this day. As you could probably guess, Leonardo da Vinci’s Vitruvian Man was inspired by Vitruvius’s writings about proportion.
For those of you interested in going down an architecture rabbit hole, the full text of De architecture is available for free on Project Gutenberg. This piece will not attempt to summarise the whole book. There are a couple of reasons for this. First, there’d be an awful lot to cover. Second, I haven’t totally lost sight of the fact this is a web design magazine. We will be honing in on the Vitruvian triad, a standard for design that applies well beyond architecture.
The ancients had a knack for reducing topics to their bare — you might say elemental — essentials. The Vitruvian triad is one such case. There are other architects worth studying, other design theories worth being familiar with, but Vitruvius offers a particularly neat ABC that applies just as well to the web as it does to temples.
The Vitruvian Triad
In De architectura, Vitruvius identified three qualities essential to any piece of architecture. In the centuries since they have established themselves as his ‘golden rules.’ If you want to make Vitruvius happy — which of course you do — whenever you make a thing you should strive to make it:
Useful(utilitas)
Durable(firmitas)
Beautiful(venustas)
Designing with these three things in mind will elevate your work. Having one of these qualities is nice; having two is good; and having all three together is divine. Divine seems like the best option. Let’s break down what each of the three qualities mean in principle, then how they can be applied to web design.
Useful (utilitas)
In principle
Buildings are designed and erected for a reason. Whatever that purpose is, it should always be an architect’s mind. If the structure does not meet its purpose then odds are it isn’t going to be very useful. A theatre with no stage has rather dropped the ball, for example.
According to Vitruvius, usefulness will be assured “when the arrangement of the apartments is faultless and presents no hindrance to use, and when each class of building is assigned to its suitable and appropriate exposure.”
You’ve heard this one before, albeit with different language. Vitruvius is the granddaddy of harping on about how form should follow function. Louis Sullivan, the ‘father of skyscrapers’, coined that particular term in 1896. Sullivan supposedly attributed the idea back to Vitruvius, although documentation of this is dubious. In any case, that’s what utilitas boils down to.
Different types of buildings have different requirements. A building designed with these requirements as an afterthought will likely disappoint. This may sound obvious, but there are enough white elephants in this world to warrant caution. Labyrinthine shopping centres and highly conductive metal domes in playgrounds may look cool in investor presentations, but they don’t wind up being terribly useful.
Don’t be the playground designer whose playground gives children second-degree burns. Full story in The New York Times. (Large preview)
This also means the individual parts of a structure should be logically connected. In other words, they should be simple to access and navigate. If a building is useful and easy to use that’s a very good start.
Online
Utilitas also applies to web design. Every website has a purpose. That purpose may be practical, like a search engine or weather forecast, or it may be artistic, like an interactive story or graphic design portfolio. Whatever it is, it has a reason to exist, and if it is designed with that reason in mind it is more likely to be useful to anyone who visits the site.
Content precedes design. Design in the absence of content is not design, it’s decoration.
An encyclopedia you would expect to be easy to search and navigate, with cleanly presented and properly cited information. Wikipedia, for example, ticks all of those boxes. It is the web equivalent of an enormous library, right down to the obscure sections and staff bickering behind the scenes. It was built with usefulness front and center, and so its core design has remained consistent in the years since its founding.
Alternatively, the purpose of a publication is to produce original content that is of value or interest to its readers. To be useful, a website’s publication would present said content in a vibrant and direct way, paying special attention to the reading experience across various devices. A website with wonderful content and bad design undermines its own usefulness.
The Guardian is a newspaper. It’s purpose is to report the news. Its award-winning website doesn’t faff around with slogans or spectacle; it packs it full of content. (Large preview)
A clear purpose leads to clear design. If a purpose has you pulling in several different directions then the same will be true of the website. You can’t be all things to all people, and it is pointless to try. Usefulness tends to meet specific needs, not all needs.
When it comes to usefulness you can’t afford to treat websites as something abstract. Like buildings, websites are visited and used by people, and ought to be designed with them in mind above all others. Investors, advertisers, and all the other sordid actors will have their time, but if you let them in too early a site’s usefulness will be compromised. When a publication breaks up articles across multiple pages purely to inflate traffic numbers, its usefulness is reduced. When an e-commerce platform seems more concerned with shoving you down conversion funnels than with providing honest information about its products, its usefulness is reduced. In such cases, the purpose has become secondary, and the design suffers as a result.
We recognise the hallmarks of search engine design just like we recognise theatres, libraries, or sport stadiums. Their forms are shaped around their function. (Large preview)
Also, like buildings, websites should be easy to navigate. Ensuring the usefulness of a website requires thorough planning. Where the architect has floor plans and models, the web developer has sitemaps, wireframes, and more. These allow us to identify layout problems early and address them.
Looking at the design through different lenses is especially important here. Does the palette account for colour blindness and cultural differences? Colours mean different things in different places, after all. Is it easy to browse using keyboards and screen readers? Not everyone navigates the web the same way you do. Surely it’s better to be useful to as many people as possible? There is no good excuse for websites not to be both accessible and inclusive.
Durable (firmitas)
In principle
Firmitas boils down to the idea that things should be built to last. A fantastically useful structure that topples over after a couple of years would be widely regarded as a failure. A well-made building can last for centuries, even millenniums. Ironically, none of Vitruvius’s own buildings survive, but the point still stands.
This principle encompasses more aspects of architecture than might immediately come to mind.
Durability will be assured when foundations are carried down to the solid ground and materials wisely and liberally selected. — Vitruvius
In other words, choose your destination carefully, lay deep foundations, and use appropriate materials.
With some sections well over 2,000 years old, it’s safe to say the Great Wall of China was built to last. Photograph by Andrea Leopardi. (Large preview)
We all instinctively understand longevity is a mark of good design. It reflects quality materials, meticulous planning, and loving maintenance. The Pantheon in Rome, or the Great Wall of China, are testaments to durable design, renowned as much for their longevity as for their majesty.
The principle also concerns environmental factors. Are buildings designed with due thought to the strains of weather, earthquakes, erosion, etc.? If not, it may not be a building for long…
The Tacoma Narrows Bridge has its durability put to the test after engineers cut corners on cost. Spoiler: it collapsed.
It’s reassuring to know you can count on a structure not collapsing for a while, and in the long run, it usually winds up being cheaper. A durable building sits on strong foundations and uses materials appropriate to its purpose and its environment. Buildings that aren’t designed to last are typically glorified film sets. Before long, they are rubble.
Online
Time seems to pass much faster on the web, but the principle of firmitas still applies. Given the endless turbulence of online life it makes sense to plant your flag in something sturdy. Out of the three qualities, it is the one least visible to users, but without it, everything else would fall apart.
This starts with under the hood considerations. The foundations must be strong. Where will the website go? Is the content management system the right fit? Can your web hosting provider handle the expected traffic (and more) and still run smoothly? As anyone who has migrated from one CMS to another can tell you, it’s worth getting it right the first time if possible.
This is what a crumbling website looks like. (Large preview)
There is also the longevity of the web technologies you’re using. New frameworks may seem like a good idea at the time, but if a site needs to be around for years it may make sense to fall back on HTML, CSS, and JavaScript, as well as universally supported SEO markups like structured data. As in architecture, building things to last often means using established materials rather than newfangled ones.
Durability extends to design. Web pages have to bend and stretch and warp in ways that would make architects weep. A responsive website is a durable website. As new devices — foldables, for example — and markups enter come at us, websites need to be able to take them in stride. Architects don’t get to cross their arms and sulk about earthquakes, so why should web designers shy away from the hazards of the web? Great design faces up to environmental challenges; it doesn’t avoid them.
As a site grows its users will become familiar with its design. The more that happens the more of a headache it is to make wholesale changes. If a site is designed carefully from the start then renovations are more likely than rebuilds, and the appearance remains familiar even when it is updated. In this sense, a site’s durability is helped immeasurably by clear purpose. That in itself is a kind of bedrock, helping to keep sites sturdy in times of change. Even the best sites need updates from time to time.
Smashing Magazine’s 2017 redesign solidified behind the scenes elements like content management, job boards, and ecommerce while keeping the front-end character familiar. (Large preview)
There is also the question of sustainability. Is due attention being paid to the commercial realities of the site? In other words, where is the box office? Be it paywalls, advertising, or membership systems, there’s no shame in incorporating these into the design process. They are not a site’s purpose, but they help make it durable.
Beautiful (venustas)
In principle
As Vitruvius says, “the eye is always in search of beauty.” It is a perfectly legitimate quality to aim for.
According to De architectura, beauty occurs “when the appearance of the work is pleasing and in good taste, and when its members are in due proportion according to correct principles of symmetry.”
As well as being useful and well made, buildings ought also to be pleasing to the eye. Some may even touch the heart.
If you want to design a good temple, Vitruvius is useful for that, too. (Large preview)
Vitruvius outlines several qualities that help make buildings beautiful. Symmetry and proportion were of particular interest to him (hence Da Vinci’s Vitruvuian Man). Obsessively incorporating shapes into everything predates graphic design by a few millennia.
Each element of a structure should be considered in relation to others near it, as well as to the environment that it is being built. Vitruvius sums up this interplay with one word: eurythmy, a Greek term for harmonious rhythm. (British pop duo Eurythmics drew their name from the same term, in case you were wondering.) Vitruvius defines it in an architectural context as follows:
Eurythmy is beauty and fitness in the adjustments of the members. This is found when the members of a work are of a height suited to their breadth, of a breadth suited to their length, and, in a word, when they all correspond symmetrically.
Like music, buildings have rhythm; their individual pieces forming into a kind of harmony. A beautiful building might be the carved marble equivalent of a Beach Boys chorus, while an ugly one is like nails on a chalkboard.
For those curious what beautiful architecture doesn’t look like, McMansion Hell is a good place to start. (Large preview)
As well as being well proportioned and symmetrical, individual pieces can enhance beauty in other ways. Good craftsmanship is beautiful, as is attention to detail. Materials appropriate to the structure are also beautiful — reflecting the sound judgment and good taste of the designer.
Ornamentation is acceptable, but it must complement the core design of the structure — think column engravings, paving patterns, etc. All these little details and considerations amount to the building as a whole. When they all fall together, it’s breathtaking.
Online
Beautiful websites adhere to many of the same standards as architecture. Proportion and symmetry are mainstays of attractive design. Grid systems serve the same purpose of organizing content clearly and attractively. Beyond that, there are questions of color, typography, imagery, and more, all of which feed into a website’s beauty — or lack thereof.
To get the ball rolling, here are a handful of resources on Smashing Magazine alone:
An aspect of venustas that is especially relevant to web design is how users can interact with it. As well as being nice to look at, websites have the potential to be playful, even surprising. It’s one thing to sit there and be admired, it’s another to invite visitors to become part of the beauty.
Google’s interactive doodles are another good — and less daunting — example of this. Covering all manner of subjects, they invite users to play games, to learn, and to be entertained. It’s nice in its own right, and aligns with Google’s purpose as a source of information.
Ironically, this is just a GIF of an interactive thing rather than the interactive thing itself, but you can see the full doodle and details of its making here. (Large preview)
With the web continuing its shift towards mobile-first experience, in which users can literally touch the websites they visit, it should be remembered that beauty pertains to all the senses — not just sight.
As for the ‘environment’, with web design that is the device it is being displayed on. Unlike buildings, websites don’t have the luxury of being one shape at all times. To be beautiful they must be responsive, shifting size and proportion to compliment the device. This is pleasing on its own, and done well the shape shifting itself becomes beautiful in its own way.
A Balancing Act
Vitruvius’s rules of utilitas, firmitas, and venustas have endured because they work, and they have endured as a triad because they work best together. Attaining all three is a balancing act. If they pull in different directions then the quality of whatever is being made will suffer. Beautiful but unuseable is poor design, for example. On the flip side, when they work together the result can be far greater than the sum of their parts.
As with architecture this requires a bird’s eye view. The pieces cannot be done one at a time, they must be done with the others in mind.
The architect, as soon as he has formed the conception, and before he begins the work, has a definite idea of the beauty, the convenience, and the propriety that will distinguish it. — Vitruviuas
No doubt the details will change, but the harmony should not.
This extends to the people making a website. As with architecture websites typically have to balance the wants of a client, an architect, and a builder — not to mention investors, financiers, statisticians, and so on. For a website to be harmonious, so do the people responsible for building it.
None of this is to say that the three qualities are equally important regardless of the project — only that each should be given due thought in relation to the others. The usefulness of the Eiffel Tower seems fairly trivial, as does the beauty of the Hoover Dam, and that’s fine. If a website is made to be ornamental or temporary, it doesn’t have to be more than that. The natures of utilitas, firmitas, and venustas themselves change depending on the project. Like most rules worth following, don’t be afraid to bend — or even break — them when the mood takes you.
My Website Is A Temple
Web developers are the architects of the Internet, and websites are their buildings. Vitruvius makes a point of saying architects are not — and indeed cannot be — experts in every field. Instead, they are jacks of all trades (my phrasing, not his). For the triad to be achieved it is better to have a good grasp of many subjects than expertise in one:
Let him be educated, skillful with the pencil, instructed in geometry, know much history, have followed the philosophers with attention, understand music, have some knowledge of medicine, know the opinions of the jurists, and be acquainted with astronomy and the theory of the heavens.
The relevance of some of these is obvious, others less so, but it’s all valuable to architects and web developers alike. Geometry informs proportion and layout; history puts designs in context and ensures they are understood as they are meant to be; philosophy helps us to approach projects honestly and ethically; music awakens us to the role of sound; medicine gives thought to accessibility, and potential strains on the eye, ear, or even thumb; and law looms larger now than ever. The theory of the heavens might be a stretch, but you get the idea.
Not that theory alone will get you there. There’s no substitute for learning through doing. As the Stanford Encyclopedia of Philosophy notes, “the Vitruvian picture of architecture is rooted in experiential knowledge of making, doing, and crafting.” Or better yet, as Vitruvius himself puts it: “Knowledge is the child of practice and theory.”
The Vitruvian triad is a worthy standard to use whether you’re building a coliseum or a portfolio website. Not everyone has the luxury of (or budget for) a team of experts, and even if we did, why deny ourselves of the breadth of knowledge that strong design requires? We can build Levittown or we can build Rome, and everything in between. A useful, durable, beautiful Internet sounds like a good deal to me.
HTTP requests are a crucial part of any web application that’s communicating with a back-end server. The front end needs some data, so it asks for it via a network HTTP request (or Ajax, as it tends to be called), and the server returns an answer. Almost every website these days does this in some fashion.
With a larger site, we can expect to see more of this. More data, more APIs, and more special circumstances. As sites grow like this, it is important to stay organized. One classic concept is DRY (short for Don’t Repeat Yourself), which is the process of abstracting code to prevent repeating it over and over. This is ideal because it often allows us to write something once, use it in multiple places, and update in a single place rather than each instance.
We might also reach for libraries to help us. For Ajax, axios is a popular choice. You might already be familiar with it, and even use it for things like independent POST and GET requests while developing.
Installation and the basics
It can be installed using npm (or yarn):
npm install axios
An independent POST request using Axios looks like this:
Native JavaScript has multiple ways of doing JavaScript too. Notably, fetch(). So why use a library at all? Well, for one, error handling in fetch is pretty wonky. You’ll have a better time with axios right out of the gate with that. If you’d like to see a comparison, we have an article that covers both and an article that talks about the value of abstraction with stuff like this.
Another reason to reach for axios? It gives us more opportunities for DRYness, so let’s look into that.
Global config
We can set up a global configuration (e.g. in our main.js file) that handles all application requests using a standard configuration that is set through a default object that ships with axios.
This object contains:
baseURL: A relative URL that acts as a prefix to all requests, and each request can append the URL
headers: Custom headers that can be set based on the requests
timeout: The point at which the request is aborted, usually measured in milliseconds. The default value is 0, meaning it’s not applicable.
withCredentials: Indicates whether or not cross-site Access-Control requests should be made using credentials. The default is false.
responseType: Indicates the type of data that the server will return, with options including json (default), arraybuffer, document, text, and stream.
responseEncoding: Indicates encoding to use for decoding responses. The default value is utf8.
xsrfCookieName: The name of the cookie to use as a value for XSRF token, the default value is XSRF-TOKEN.
xsrfHeaderName: The name of the HTTP header that carries the XSRF token value. The default value is X-XSRF-TOKEN.
maxContentLength: Defines the max size of the HTTP response content in bytes allowed
maxBodyLength: Defines the max size of the HTTP request content in bytes allowed
Most of time, you’ll only be using baseURL, header, and maybe timeout. The rest of them are less frequently needed as they have smart defaults, but it’s nice to know there are there in case you need to fix up requests.
This is the DRYness at work. For each request, we don’t have to repeat the baseURL of our API or repeat important headers that we might need on every request.
Here’s an example where our API has a base, but it also has multiple different endpoints. First, we set up some defaults:
/ main.js
import axios from 'axios';
axios.defaults.baseURL = 'https://axios-app.firebaseio.com' // the prefix of the URL
axios.defaults.headers.get['Accept'] = 'application.json' // default header for all get request
axios.defaults.headers.post['Accept'] = 'application.json' // default header for all POST request
Then, in a component, we can use axios more succinctly, not needing to set those headers, but still having an opportunity to customize the final URL endpoint:
// form.js component
import axios from 'axios';
export default {
methods : {
onSubmit () {
// The URL is now https://axios-app.firebaseio.com/users.json
axios.post('/users.json', formData)
.then(res => console.log(res))
.catch(error => console.log(error))
}
}
}
Note: This example is in Vue, but the concept extends to any JavaScript situation.
Custom instance
Setting up a “custom instance” is similar to a global config, but scoped to specified components. So, it’s still a DRY technique, but with hierarchy.
We’ll set up our custom instance in a new file (let’s call it authAxios.js) and import it into the “concern” components.
Interceptors helps with cases where the global config or custom instance might be too generic, in the sense that if you set up an header within their objects, it applies to the header of every request within the affected components. Interceptors have the ability to change any object properties on the fly. For instance, we can send a different header (even if we have set one up in the object) based on any condition we choose within the interceptor.
Interceptors can be in the main.js file or a custom instance file. Requests are intercepted after they’ve been sent out and allow us to change how the response is handled.
// Add a request interceptor
axios.interceptors.request.use(function (config) {
// Do something before request is sent, like we're inserting a timeout for only requests with a particular baseURL
if (config.baseURL === 'https://axios-app.firebaseio.com/users.json') {
config.timeout = 4000
} else {
return config
}
console.log (config)
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
// Add a response interceptor
axios.interceptors.response.use(function (response) {
// Do something with response data like console.log, change header, or as we did here just added a conditional behaviour, to change the route or pop up an alert box, based on the reponse status
if (response.status === 200 || response.status 201) {
router.replace('homepage') }
else {
alert('Unusual behaviour')
}
console.log(response)
return response;
}, function (error) {
// Do something with response error
return Promise.reject(error);
});
Interceptors, as the name implies, intercept both requests and responses to act differently based on whatever conditions are provided. For instance, in the request interceptor above, we inserted a conditional timeout only if the requests have a particular baseURL. For the response, we can intercept it and modify what we get back, like change the route or have an alert box, depending on the status code. We can even provide multiple conditions based on different error codes.
Interceptors will prove useful as your project becomes larger and you start to have lots of routes and nested routes all communicating to servers based on different triggers. Beyond the conditions I set above, there are many other situations that can warrant the use of interceptors, based on your project.
Interestingly, we can eject an interceptor to prevent it from having any effect at all. We’ll have to assign the interceptor to a variable and eject it using the appropriately named eject method.
const reqInterceptor = axios.interceptors.request.use(function (config) {
// Do something before request is sent, like we're inserting a timeout for only requests with a particular baseURL
if (config.baseURL === 'https://axios-app.firebaseio.com/users.json') {
config.timeout = 4000
} else {
return config
}
console.log (config)
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
// Add a response interceptor
const resInterceptor = axios.interceptors.response.use(function (response) {
// Do something with response data like console.log, change header, or as we did here just added a conditional behaviour, to change the route or pop up an alert box, based on the reponse status
if (response.status === 200 || response.status 201) {
router.replace('homepage')
} else {
alert('Unusual behaviour')
}
console.log(response)
return response;
}, function (error) {
// Do something with response error
return Promise.reject(error);
});
axios.interceptors.request.eject(reqInterceptor);
axios.interceptors.request.eject(resInterceptor);
Although it’s less commonly used, it’s possible to put and interceptor into a conditional statement or remove one based on some event.
Hopefully this gives you a good idea about the way axios works as well as how it can be used to keep API requests DRY in an application. While we scratched the surface by calling out common use cases and configurations, axis has so many other advantages you can explore in the documentation, including the ability to cancel requests and protect against cross-site request forgery , among other awesome possibilities.
I think of grids as arrangements of rectangles with vertical and horizontal lines running through. And they are, but that doesn’t mean we can’t still do clever things in how we place things on those grids and what we do with the elements afterwards.
In this demo by Jesse Breneman, a grid of hexagons is created by setting up the grid columns with math such that each block can span over three columns and two rows so that the blocks overlap in a way that allows a clip-path to be applied around them. This carves a block into a hexagon that is evenly spaced with the others. Very clever.
And, ha, that’s a hell of a domain name Jesse. Personally, I don’t know anything about blogging about CSS at a super cheesy domain name.
These days, starting an online business is a pretty straightforward proposition. There are countless tools and platforms that can help you set up a storefront, track orders, and collect payments.
In 2010, however, things were much different. Setting up an e-commerce store or other internet business meant a lot of hard work building websites and figuring out how to make legacy payment processors work with a brand-new type of commerce. This was the marketplace that Stripe Payments was born into.
What is Stripe Payments?
Stripe was founded in 2010 with the mission of making it easier to accept payments over the internet. At the time, taking credit cards meant working with a legacy processor or a middleman broker who would provide you with access to a processor.
Then there were the banks you had to deal with, the credit card companies themselves, and a slew of additional services that were often poorly explained and sold by various third parties. Long story short, accepting credit cards was an incredibly complicated and poorly explained process.
Stripe set out to fix a lot of that by streamlining the process. They added services and features like fraud protection, fixed rates regardless of network, and an application programming interface (API) that allowed app makers to easily incorporate card processing into their apps.
Why is Stripe Payments important?
To really understand why Stripe Payments was a big deal, it’s important to understand a little bit about how the credit card processing industry works.
To most consumers, it looks simple and straightforward — you swipe or insert (“dip”) a card into a machine, or enter your number and information into a form, and your payment goes through. For customers, that’s typically the end of the transaction (unless something goes wrong). For sellers, however, this is just the beginning.
Understanding how credit card transactions work requires understanding who’s involved. There are a couple of distinct parties, though sometimes lines get blurred. The main ones are
Customers. Easy to understand and relate to —this includesanyone with a credit or debit card trying to make a purchase.
Merchants. Still pretty intuitive. Merchants are the businesses that customers are trying to purchase goods or services from. Each merchant has a unique merchant ID.
Merchant acquirers. This is where it starts to get complicated. Merchant acquirers are the financial institutions and organizations that provide the tools and processing that allow cards to be accepted. They come in two major types, ISOs and processors.
Processors. Processors are typically large financial institutions that provide the backbone of all transactions. They verify that transactions are valid and that customers have enough funds, check for fraud, and initiate the fund transfers. Some examples of processors include Wells Fargo and Chase Paymentech.
Independent sales organizations (ISOs). ISOs act as resellers for processors. They typically sell access to a processor along with the equipment necessary to take cards. They also often serve as technical support for merchants. Examples include Authorize.Net, Vantiv (or Worldpay), and Stripe.
Card issuers. Card issuers are the companies that distribute credit cards to consumers. For Visa and Mastercard, these are typically banks and other financial institutions. For American Express and Discover, the card networks issue the cards themselves.
Card networks. Card networks are the logos on your cards — Visa, Mastercard, American Express, Discover, and more. They essentially franchise out their network to individual issuers (except for American Express and Discover.)
When Stripe Payments was first conceived, merchant acquirers were difficult to work with. Most were still operating mainly in the physical retail space and didn’t have the technology or the knowledge to help e-commerce businesses.
Many also still worked with a traditional sales process that made signing up for a merchant account cumbersome and opaque. It was hard to know what your rates would be, how much the technology cost, what kind of service could be expected, and whether or not the processor technology would work with a merchant’s e-commerce implementation.
Stripe Payments changed a lot of that by focusing specifically on digital card payments. They were one of the first ISOs to build a platform specifically for e-commerce and app payments, bringing a technology-forward approach that made signing up and using the service easier, faster, and more transparent.
In this guide, we’ll cover who Stripe is, how to use them, what services and benefits Stripe provides, and what apps and services you can integrate with Stripe.
About Stripe Payments
Irish entrepreneurs and brothers John and Patrick Collison founded Stripe in 2010 with initial funding from the famed startup accelerator Y Combinator. They launched their public service in September of 2011 and quickly became a Silicon Valley darling. Over the next several years, they received almost $800 million in funding, and a valuation of over $22 billion, making them one of the most valuable private companies in the world.
Stripe grew quickly because their products were digital- and developer-centric from the very beginning. The platform was built to be easily integrated into both custom and existing digital apps, and provided clear and straightforward directions.
Even more important, Stripe cut out a lot of the complexity of working with a processor by making a self-service option available. While both of these features may seem commonplace now, they were pretty revolutionary in 2011.
Overview of Stripe Payment options
Stripe started off providing very simple domestic credit card processing in the U.S. Over the years, however, they have grown their offerings to cover most major payment options around the globe. Some of their main payment options include the following:
Stripe credit card payments
The basic version of Stripe Payments allows merchants to collect traditional one-off credit card purchases, either online or at physical locations. Stripe accepts and processes American Express, Visa, Discover, and Mastercard-branded cards, as well as some of the more niche products like UnionPay, JCB, and Diners Club.
One of the things that differentiates Stripe Payments from traditional processors is the range of options Stripe offers merchants. They can embed a prebuilt payment form, build a form out of prebuilt elements, code their own from scratch, or connect Stripe to one of hundreds of compatible apps (like JotForm). Stripe provided implementation options for anyone, regardless of their technical ability, and that was unique.
Stripe digital wallet payments
You may be familiar with Apple Pay and Google Pay. The two largest tech companies control the lion’s share of the digital wallet market in the U.S., where wallets are still a little bit of a novelty.
Internationally, though, mobile wallets are exploding. In China, for example, over half a billion people used mobile wallets to complete a transaction in 2018. The Stripe digital wallet integration lets your business accept payments in whatever manner people prefer to make them and enables your e-commerce to go global.
Stripe’s digital wallet service allows for payments from Apple and Google Pay, Microsoft Pay, Masterpass, Visa Checkout, Amex Express Checkout, WeChat Pay, and others.
Stripe international payments
Speaking of taking your business international, Stripe accepts payments in more than 135 currencies and in most countries. Accepting international cards adds a 1 percent fee on top of the standard fees, and converting from a different currency adds another 1 percent on top of that, bringing the total fee for Stripe international transactions to 4.9 percent plus 30 cents.
If that sounds high, don’t fret ?— Stripe also offers some options to reduce those fees. For those charging large transactions, methods like ACH, SEPA direct debit, Alipay, and others allow a transaction fee of between 0.8 percent and 2.9 percent (plus that 30 cent transaction charge). And in some countries Stripe allows merchants to set up local subsidiary accounts to make accepting local payments easier and to lower fees.
Stripe automatic payments
For businesses that require recurring regular payments, like subscriptions or retainers, Stripe offers an automatic payment option that allows you to send out payments for the same amounts at regular intervals of your choosing. The best part of Stripe’s recurring revenue plan is that you don’t incur any additional fees until you exceed $1 million in recurring revenues. After that, Stripe will charge you an additional 0.4 percent.
Stripe’s recurring payment plan is bundled into their general billing platform, which allows for other kinds of invoicing. The platform also has a number of security and safety features built in to keep recurring credit card transactions from being rejected.
How does Stripe work?
We mentioned earlier that Stripe is an ISO, an independent sales organization. That means they don’t actually do the heavy lifting of processing your transactions but rather collect and forward them to financial institutions that make sure the funds clear.
Specifically, Stripe is what is known as an aggregator. Rather than having users sign up as a full merchant with a merchant acquirer, Stripe allows users to sign up as sub-merchants underneath Stripe’s merchant account. This saves users the often laborious and complicated process of setting up a merchant account of their own, and simplifies the process tremendously.
What does this mean for users? Not too much, other than ease of use. Once you sign up for an account and are approved, you can go ahead and start collecting payments almost immediately without thinking about it.
On the back end, things are a little bit more complicated for Stripe. Because all of the charges go through Stripe’s merchant account, they take on a lot of liability for fraudulent transactions. This ends up being a benefit for users, since it encourages Stripe to build better security and fraud prevention into their platform.
This ease of use, customizability, and security make Stripe one of the most trusted names in credit card processing for online transactions — trusted enough giants like Amazon, DocuSign, Peloton, and Shopify use them. In fact, asking who uses Stripe is entirely the wrong question — a better question is who doesn’t use Stripe?
Stripe tutorial and guide
As with any proper digital-first solution, Stripe includes a robust app API that allows third-party developers to create apps that work with the service. These apps make it easier to use Stripe but can also do much more than just allow you to take payments.
You’re able to collect credit card payments on your mobile device and leverage a point of sale (POS) app to set up a pop-up or permanent shop. With Stripe dashboard apps, you can manage and monitor your Stripe account and ensure you have the latest information at your fingertips.
Stripe has a vast ecosystem of partners that let you integrate with different platforms, including payments, accounting, analytics, POS, or other services. You can also leverage Stripe’s own built-in functionality for many of your payment needs.
Stripe payment Apps
Stripe payment apps provide everything you need to accept and process payments, settle and reconcile your accounts, and manage everything Stripe-related.
While every integrated Stripe payment app is a little different, they all have several things in common. Many allow for some level of customization when it comes to the appearance of checkout forms, though almost none give as much freedom as simply going through Stripe directly. These apps also support all of Stripe’s payment countries, and most accept Apple Pay, where available.
Other features, like the ability to request payments, send invoices, and accept ACH payments (which isn’t a standard feature of many implementations) are rarer and often require a specific Stripe payment app.
Fortunately, finding a Stripe payment app that works perfectly for your needs is easy. Stripe works with Charge for Stripe, Lunatap, MoonClerk, InstaPayments, Payvoice, Payfunnels, MYFUNDBOX, and Splink to take mobile and recurring payments as well as a number of other apps and integrations that range from simple to complex and bare bones to fully featured. The Stripe Partners page includes easy filtering to help business owners find exactly what they’re looking for.
Stripe Dashboard app
The Stripe Dashboard app lets you set up, manage, and monitor your Stripe account. It helps you manage payments and refunds, respond to disputes, and monitor integrations. You can use the Dashboard to run analytics and view real-time charts that tell you how your business is performing. It also provides information on recent activity that you might need to act on, like disputes or identity verifications.
The Stripe Dashboard app organizes information into separate sections. Each section represents a different area of the API. You can use the Dashboard app to do specific things like refund payments or cancel a subscription, without going into the API.
The Stripe Dashboard app also has a lot of other functionality, like searches and team member privileges. You can use the Dashboard to pull up specific information, like finding payments using a customer’s email address or the last four digits of their card number.
You can give team members to access the Dashboard and give them different privileges, restricting or allowing access to information and the actions they can take. For example, you can give your customer service team access to handle refunds.
Stripe POS app
The Stripe POS app, Stripe Terminal, lets you extend your online store into the physical world. Whether it’s a pop-up store or a permanent physical retail location, the Stripe POS app is a seamless way to unify your online and offline channels.
Stripe Terminal works with Stripe Payments, Connect, and Billing. You can also integrate Stripe into your own mobile and web applications to accept in-store payments and allow customers to reserve online and pick up their orders in the store.
Stripe Terminal works with Stripe’s EMV 1, 2, or 3 precertified credit card readers. This saves you time when you’re getting your physical retail presence up and running. Stripe’s credit card readers work with chip cards and support end-to-end encryption, Google Pay, and Apple Pay.
Stripe also works with Payment for Stripe, the only certified third-party Stripe POS app. Payment for Stripe lets you create charges, manage customers, send receipts, apply refunds, and sell inventory using Payment for Stripe’s POS app.
Stripe mobile apps
Stripe’s mobile apps let you accept payments from your iPhone, Android, or mobile website. Stripe also offers a mobile app for managing your account. This lets you access the Stripe Dashboard, payments and customer information, subscription plans (in iOS only), transfers, and other relevant information.
You can initiate refunds and respond to disputes, all from your iOS or Android device. The app isn’t optimized for iPads, but you can still run the iOS version on your iPad.
In addition, the Stripe mobile apps support daily activity summaries on both platforms. On iOS, you can also receive push notifications for account activity.
Stripe’s mobile apps are ideal for managing and monitoring transactions from your iOS or Android device. However, you can’t create charges from them, so you’ll need to use Stripe Terminal or a third-party integration. You’ll also only be able to see live mode transactions in the Stripe mobile apps.
Stripe was one of the first digital-first payment processors to make a name for themselves. They’ve remained one of the top players not just for their timing, but because they’ve consistently provided one of the easiest to use and most powerful payment processing platforms.
The ability to either use an integration or app for an out-of-the box solution or to customize your implementation to be just right for you gives Stripe a big leg up over most competitors and makes them a great solution for businesses small and large.
Stripe business options
Once you’ve connected to Stripe and set up your account, it’s time to dive into what Stripe can do for your business.
Accepting payments
As you’ve discovered, accepting payments can be complex. You want the customer interface to match your web interface, support multiple payment options, and make it easy for customers to pay with their mobile devices.
Stripe Checkout is a smart payment page that can be dropped right into your checkout flow for a seamless experience. It supports 14 locales, accepts Apple Pay, and will soon accept Google Pay.
Stripe Elements, a set of prebuilt user interface components lets you design your own custom payment form for your website. Using Elements helps minimize user error and increases the number of successful payments.
Stripe Terminal provides a way to accept in-person payments. You can create a custom checkout with developer-friendly SDKs so you don’t have to use a separate system for in-person transactions.
Stripe.js lets you build your own checkout from scratch with a set of APIs.
You can also use Stripe to build custom invoices and request payments from U.S. businesses. Invoices can match your company branding, and you can add payment terms and accept credit cards and ACH payments.
And Stripe works with a variety of open-source plug-ins that let you efficiently integrate payments into your store, including Drupal, Magento, Shopware, WooCommerce, and WordPress. Setup is simple and easy.
Payment options
With Stripe, you can accept all major credit and debit cards from customers in any country. You can also customize how charges appear on statements, use authorization features like partial capture and unlinked refunds, offer full and partial refunds, and conduct CVC/AVS checks.
In addition, customers can store their credit and debit cards electronically using wallets. Stripe supports Alipay, AmEx Express Checkout, Apple Pay, Google Pay, Masterpass by Mastercard, Visa Checkout, and other wallets.
Stripe also lets you offer popular local payment methods with the Sources API. You can process more than 135 currencies, displaying prices in the customer’s preferred locale to help avoid additional costs for currency conversion.
If you have subsidiaries, you can set up local Stripe accounts to maximize your acceptance rates, take advantage of the lowest costs, and avoid foreign exchange fees for customers. Accounts for other countries use the same API infrastructure and are easy to turn on.
Mobile payments
Whether you have an iOS app, an Android app, or just use a mobile website, Stripe offers a mobile SDK to accept payments. You don’t need to change the back end of your system at all. The iOS and Android SDK lets you collect credit card information without sensitive data ever entering your servers.
With Stripe’s libraries, you can use any supported payment method in your iOS and Android apps, from Alipay to iDEAL. You can also use Stripe SDKs to build a complete checkout flow for mobile sites and customize the colors and fonts to match the rest of your website.
Payment processing
Stripe uses a dynamic payments API that applies smart authentication logic. This maximizes conversions and minimizes disruption to the user experience. Stripe supports the latest authentication protocols and embeds the authentication flow in your checkout to keep customers moving through the process.
Stripe also includes a pre-authorization layer to connect to major credit card networks. You can integrate directly with these networks to optimize routing paths and reduce latency in transactions.
Fraud and dispute handling
In the event of credit card fraud or disputes, Stripe helps you manage risk and more confidently fight fraud. Even if a credit card is new to your business, it’s probably been seen on the Stripe network before.
Stripe Radar is a machine learning system that integrates with your payments. It helps mitigate against fraud, provides transparent risk scores and real-time fraud insights, and supports trust and block lists.
Stripe also reduces the risk of fraud and chargebacks by adding an additional layer of authentication that protects you from liability for fraudulent card payments. Dynamic 3D Secure selectively applies authentication to only high-risk transactions or payments that require authentication due to regulation.
During dispute handling, Stripe’s automated process works directly with credit card networks to help submit the best possible evidence in your favor.
Settling and reconciling accounts
Using Stripe means you can simplify and accelerate transaction reconciliation. Stripe’s API and Dashboard provide real-time information about charges, fees, refunds, and transfers.
You can create financial reports directly with Stripe data instead of having to compile multiple reports from different merchant account providers. Stripe also tags every deposit with a transfer report that details the exact transactions and fees, further simplifying how you reconcile transactions.
Stripe includes built-in reporting features. You can also create your own reports through the API. Automatically sync your Stripe data with your accounting ledger or use it to export information about payments, refunds, and fees.
Getting payouts
Stripe’s Dashboard and API make it easy to get paid once a transaction has been settled. You can get unified payouts across all the payment methods and currencies you accept from your customers. Stripe also lets you manage historical payments and see upcoming payments and expected deposit dates from the Dashboard.
Managing payments
The Stripe Dashboard lets you see all charges for different payment types, countries, and currencies. You can also export this data directly from the API.
Stripe Sigma lets you use SQL to analyze your Stripe data, create custom reports, and glean insights inside the Stripe dashboard. You have structured access to your data, so you can identify the customers least likely to churn or generate a list of unpaid invoices.
Stripe Dashboard lets you view and manage all your Stripe data, customers, plans, and balances. You can refund customers, review possible fraudulent charges, and manage disputes, as well as access everything from bank transfers to HTTP request logs. The Dashboard mobile app lets you see your daily earnings, new customers, and payments.
Stripe also lets you add users to your account. You can set up roles and permissions to ensure data is protected, and Stripe lets you monitor user account activity.
Stripe vs merchant accounts
Online businesses choose Stripe because it’s much easier to set up than a merchant account. Stripe provides all the functions you’d find in a merchant account from a traditional bank but with less setup and easier management.
For example, if you’re setting up a merchant account through your business bank, you have to provide your personal credit history, your business credit history, and your business model before they’ll consider opening an account for you.
Merchant accounts need to be underwritten because they don’t balance the risk among users, as Stripe does. And most merchant account providers consider online transactions to be “high risk,” making it harder to find a provider that will underwrite a fledgling online business. When you do find a provider, you’ll likely have to navigate a complex maze of rates and fees and hope that the technology will work with the e-commerce platform you use.
Stripe focuses on digital card payments and has built integrations with most of the top e-commerce platform providers. They charge a flat rate for transactions, and because they balance the risk among users, you can set up an account quickly and easily.
What are the benefits of using Stripe?
When Stripe first made their debut, they were among the first digital/startup focused payment processors on the market. That made it a relatively easy choice, especially compared to the legacy providers. Since then, however, a whole host of competitors has entered the marketplace. Is Stripe still an easy choice? We think so, based on the benefits of using them.
Ease of use
Stripe is still one of the easiest payment processing platforms to use. It may not look like it if you read their documentation, but Stripe is incredibly easy for most users to set up. In fact, it takes less than 10 minutes to register an account and be ready to accept payments.
As we mentioned earlier, Stripe sets users up as sub-merchants underneath their main merchant account. This means users don’t have to go through the rigorous verification and activation process of getting their own merchant accounts (which we talked about in Chapter 3), making signup easier and quicker.
Large number of integrations
There are a million ways to do business digitally, from e-commerce to nonprofit fundraising to Software-as-a-Service to billing for physical services, and many more. Each of these different business models has countless apps to make doing business easy. Luckily, Stripe has built in integrations for many of them, making collecting payments quick and easy.
These integrations allow business owners to plug Stripe right into whatever software they’re already using (or plan on using) with minimal work. Plugging Stripe into apps like JotForm allows people to start taking payments however they want instead of being limited to a smaller pool of supported apps.
Powerful customization options
For those with a little coding ability and the willingness to put in some time, Stripe offers a wealth of opportunities to customize your implementation. Stripe offers developers countless ways to change not only the way that their payment forms look, but also the way they function.
Because Stripe was built with developers in mind, they allow for significantly more customization than many alternative plug-and-play options. While most users will never need to worry about these options, business owners who are creating their own apps or other complex products benefit greatly from Stripe’s flexibility.
Payment options
Stripe offers more payment options than most traditional processors, all from one unified interface. Traditional payment processors and merchant accounts often allow you to accept payments by credit and debit cards based in your country. Stripe, on the other hand, allows you to take payments from virtually anywhere in the world, using almost any kind of traditional banking instrument — credit and debit cards, credit card payment schemes like Chase Pay, direct bank deposits using Automated Clearing House (ACH), and more.
Stripe also gives business owners the option to create accounts with local subsidiaries to decrease international transaction costs, and they’re compatible with emerging payment methods popular in other countries. Again, Stripe gives business owners a lot more flexibility in how they accept payments and can save them a significant amount of money over the long run.
Stable costs
Stripe charges a stable percentage (and sometimes a minimal processing fee) for every transaction type. There are no monthly costs or limits to the number of transactions that are run. There are also no tiers or service levels that business have to manually deal with. If you do enough business, you’ll be automatically switched to a lower percentage per transaction.
This lack of fixed costs makes Stripe very attractive for businesses of all sizes. You only pay when you accept payments, and the amount you pay doesn’t change drastically from month to month.
Advantages of Stripe
Now that we’ve gone over the global benefits of using Stripe, we can take a look at the advantages of Stripe against specific competitors.
Advantages of Stripe over Square
Square has grown to become a giant in the payment processing space. Though they began as a card-swiping dongle users could attach to their phones, they’ve grown well beyond that and now offer multiple e-commerce options.
However, the payment methods Square accepts are limited: cards and mobile wallets only. They also don’t have nearly the same global reach that Stripe does and lack many of Stripe’s customization and integration options.
Advantages of Stripe over PayPal
The grandfather of online payments, PayPal largely introduced the world to online payment processors, not to mention to such famous names as Peter Thiel and Elon Musk. Since their founding, however, they’ve gone through a number of transitions in ownership and lost much of the pioneering spirit the company was founded on.
As an example, PayPal requires all transactions to redirect to their page for completion, breaking up customer flows and leading to higher abandonment. You can use a “hosted” payment page, but you’ll have to pay a monthly subscription fee for it.
PayPal also requires a thorough vetting process for new accounts and plays a much more active role in settling disputes, much to the annoyance of many business owners.
Advantages of Stripe over Braintree
Braintree’s actually owned by PayPal, even though the companies seem as different as night and day. Whereas PayPal sometimes feels like a large out-of-touch corporation, Braintree’s right next to Stripe on the cutting edge of payment processing.
The biggest advantages Stripe has over Braintree are the number of integrations available and the speed with which new services are offered. Stripe has managed to stay on the cutting edge of development despite their age, but their age also means that they’ve had time to develop more plug-ins and partnerships.
It might be a bit of a stretch to say that Stripe is the best payment processor or that they’re right for everyone. They’re certainly incredibly flexible and very powerful, and they allow many businesses to accept payments much easier and faster than was possible before Stripe was founded.
It’s also be fair to say that Stripe has a lot of advantages over their competitors — more integrations, more global availability, and easier setup. Keep these advantages in mind as you read on to find out how protected you are with Stripe Payments.
How protected are you with Stripe secure payments?
As with any payment option, your customers want to make sure their bank account and credit card information are secure. On the other hand, you want to be sure that you’re not only providing a safe payment option but also complying with all applicable regulations, including PCI (payment card information) standards. Stripe reassures you and your customers that it’s a safe way to pay.
In fact, security is top of mind at Stripe. In addition to offering their own security guide for integrations, Stripe uses strong encryption, fraud protection, and PCI compliance controls to help ensure that the answer to the question, “Is Stripe safe?” is a resounding yes.
Stripe encryption
Stripe encryption provides peace of mind for merchants and customers alike. It secures both payment information in transit and stored payment information.
On the web, Stripe forces the HTTPS connection for all services using TLS (transport layer security), also known as SSL (secure sockets layer). That means anything sent to or from Stripe is encrypted, including the Stripe public website and the Dashboard.
When you’re using Stripe.js, you can only access it over TLS. Additionally, all of Stripe’s official libraries connect to Stripe’s servers over TLS and verify TLS certificates on each connection. That helps secure customer information, including sensitive payment data, while it’s in transit.
Encrypted stored data
Stripe’s infrastructure for storing, decrypting, and transmitting card numbers runs on separate machines from Stripe’s primary services, such as the API and website.
Any stored card number is encrypted with AES-256 (Advanced Encryption Standard), which is the industry standard for security data. The keys to decrypt the card numbers are stored separately, and none of Stripe’s internal servers can access the plain-text card numbers. Servers can only request that cards be sent to an already whitelisted provider.
In addition, Stripe encryption extends to communications. Stripe uses two PGP keys to encrypt messaging and verify signed messages. When you securely contact Stripe, you use the general PGP key; when you send sensitive data like credit card information as part of a data import, you use the data migration PGP key.
Stripe encryption doesn’t stop there. They regularly audit their security measures, including the certificates they serve, the certificate authorities they use, and the ciphers they support. Stripe uses HSTS to make sure browsers are only accessing Stripe with HTTPS. Stripe is also on the HSTS preloaded lists for both Google Chrome and Mozilla Firefox.
Stripe fraud prevention
Radar is Stripe’s fraud protection mechanism. It uses machine learning to detect and block fraudulent transactions, and it’s built right into Stripe. Radar trains on data from millions of global companies, allowing its machine learning algorithms to become smarter and better at detecting new kinds of fraud.
Radar is customized for modern internet transactions. The old ways of fraud protection were never meant for online transactions, but Radar was built specifically for them and helps prevent unnecessarily declined transactions and lost revenue.
Stripe fraud prevention also includes the use of 3D Secure, which is also known by its brand names (Visa Secure, Mastercard Identity Check, or American Express SafeKey). Stripe is supporting 3D Secure 2.0, which introduces “frictionless authentication” and provides a better purchasing experience than 3D Secure 1.0.
3D Secure 2.0 is the main card authentication method used to meet the upcoming SCA (strong customer authentication) requirements for PSD2 in the EU and a key way for businesses to request exemptions to SCA. 3D Secure 2.0 was designed for smartphone use and requires less customer back and forth — but still provides a very secure way to authenticate purchases.
Stripe supports 3D Secure 2.0 on their new payment APIs, mobile SDKs, and on the new version of Checkout.
Stripe PCI compliance
PCI compliance is a complex, challenging standard. If you handle any kind of credit card data, you need to be able to prove that you comply with PCI DSS (data security standard).
PCI DSS sets a baseline level of protection for consumers and helps reduce fraud and data breaches across the entire payment ecosystem. It’s applicable to any organization that accepts or processes payment cards.
PCI DSS compliance involves three main things:
Making sure that sensitive credit card details are collected and transmitted securely
Storing that data securely, which includes encryption, continuous monitoring, and testing the security of access to the card data
Annually validating the security controls in place, which can require forms, questionnaires, external scanning services, and third-party audits
Stripe has been audited by a PCI-certified auditor and is certified PCI Service Provider Level 1, the highest level of certification that can be achieved in the payments industry.
Guide to the Stripe app and integration options
Using Stripe means you can integrate with other apps and services, some of which you may already use. Stripe’s integration with commonly used apps, tools, and other services provides analytics, accounting, emails, shipping, taxes, and more.
Stripe also has platform partners so you can integrate with online stores and POS platforms; plug into open-source or self-hosted platforms like WordPress and Magento; and work with developer resources to help integrate Stripe’s APIs.
In this section, you’ll get a brief Stripe integration tutorial and learn about Stripe payment integration, Stripe API integration, and Stripe POS integration.
A brief Stripe integration tutorial
Stripe offers a lot of third-party integration options. However, to create a custom Stripe integration, you’ll need to either be a developer or hire a developer to do the work for you.
This Stripe integration tutorial covers the basics of what you’ll need to do to integrate Stripe with other tools. If you need a more comprehensive integration tutorial, the Stripe website offers a lot of information and a checklist you can refer to as you go through the integration process.
You can do some of the following tasks at the same time so that you can get up and running faster with your Stripe integrations.
Set up your Stripe account
The first phase of integration is to create your Stripe account. Click on the + New user button on the team page so you can give your organization access to the Dashboard.
Your engineering, finance, customer service, and product team members will likely need access. When you do this, you’ll also set up your CVC and AVS checks and set the default description that appears on customers’ billing statements.
Migrate data to Stripe
After setting up your account, set up data migration and storage. Stripe has a dedicated migrations team to help you bring over your data, including credit card numbers. They’ll help you map your existing data fields to the data fields in Stripe.
Build the buyer experience
Next, you’ll build the buyer experience. Your engineering and user experience teams will ultimately be the ones building this. They can provide strong insight into what this process flow should look like. This can include Stripe payment forms or payment request buttons. Most Stripe integrations use Stripe Elements for this.
Build webhooks
Webhook events notify your application anytime an event happens on your account, like disputed charges and recurring billing events that aren’t triggered by a direct API request. To set up webhooks, you’ll need to build endpoints in JSON (JavaScript Object Notation), configure webhook settings, and test and respond to webhook events.
Customize charges with metadata and descriptors
Identify what metadata will be useful to your customer service and finance teams. Metadata lets you store additional information on charges, customers, and accounts, and it can be used in the Stripe Dashboard and for reporting with Stripe Sigma. Make sure your dynamic statement descriptors are customized to help reduce the risk of a dispute.
Implement risk mitigation
Stripe Elements will help you set up some basic risk management and fraud protection. Elements allows you to collect the cardholder’s name and billing address when you create a token. You can set it up to save customer email addresses and shipping information.
You can also implement 3D Secure, which adds another layer of security. This is recommended if your company accepts high-risk payments, for example, taking payments in industries that have a higher than average risk of chargebacks.
3D Secure requires your customers to complete additional steps during the payment process. If a customer does not know their 3D Secure information, they might not be able to complete the payment.
Stripe payment integration
Stripe.js allows you to create a seamless payment integration without worrying about merchant accounts or PCI compliance for your servers. Stripe.js is a JavaScript library that connects your web forms to Stripe’s servers, allowing for an easy Stripe payment integration process. You can create one-time payment forms, recurring payment forms, and even donation forms. It’s easy to set up and makes collecting payment as painless as possible.
Stripe API integration
At its core, Stripe is a suite of payment APIs. These APIs follow a standard REST (representational state transfer) protocol in which instructions are sent to a URL that controls what the API does.
In simple terms, it’s like having different PO boxes for your business that each handle different kinds of requests: Maybe PO Box 1 is for orders, PO Box 2 is for returns, and PO Box 3 is for general questions.
Using the API is as simple (assuming you are a programmer) as sending the right data to the right URL, or endpoint. If this data is formatted correctly, using JSON, the endpoint reads your data and does something with it. And because it’s all handled through URLs, it uses the same standards for transmission, confirmation, authentication, and response as regular http — the same standard that you use to browse the web.
If you’re not a developer, you can choose from the full suite of apps that will integrate with Stripe’s APIs. However, if you need something custom for your implementation, any web developer should have no problem working with Stripe’s API to build your solution.
Stripe POS integration
Stripe works with several POS systems, including Collect for Stripe, Big Cartel, Payment for Stripe, and Inner Fence. These Stripe POS integration partners allow you to accept credit cards from anywhere, including credit card readers.
Stripe also offers Stripe Terminal, which lets you build your own POS system. You can create custom checkout screens and email receipts. Stripe Terminal integrates with JavaScript web apps or iOS and Android apps using Stripe’s SDK and APIs. The Stripe Terminal card readers provide the end-to-end encryption and support for chip cards and contactless payments like Google Pay and Apple Pay.
Top apps for Stripe Payments
As with any proper digital-first solution, Stripe includes a robust app API that allows third-party developers to create apps that work with the service. These apps make it easier to use Stripe but can also do much more than just allow you to take payments.
You’re able to collect credit card payments on your mobile device and leverage a point of sale (POS) app to set up a pop-up or permanent shop. With Stripe dashboard apps, you can manage and monitor your Stripe account and ensure you have the latest information at your fingertips.
Stripe has a vast ecosystem of partners that let you integrate with different platforms, including payments, accounting, analytics, POS, or other services. You can also leverage Stripe’s own built-in functionality for many of your payment needs.
Stripe payment Apps
Stripe payment apps provide everything you need to accept and process payments, settle and reconcile your accounts, and manage everything Stripe-related.
While every integrated Stripe payment app is a little different, they all have several things in common. Many allow for some level of customization when it comes to the appearance of checkout forms, though almost none give as much freedom as simply going through Stripe directly. These apps also support all of Stripe’s payment countries, and most accept Apple Pay, where available.
Other features, like the ability to request payments, send invoices, and accept ACH payments (which isn’t a standard feature of many implementations) are rarer and often require a specific Stripe payment app.
Fortunately, finding a Stripe payment app that works perfectly for your needs is easy. Stripe works with Charge for Stripe, Lunatap, MoonClerk, InstaPayments, Payvoice, Payfunnels, MYFUNDBOX, and Splink to take mobile and recurring payments as well as a number of other apps and integrations that range from simple to complex and bare bones to fully featured. The Stripe Partners page includes easy filtering to help business owners find exactly what they’re looking for.
Stripe Dashboard app
The Stripe Dashboard app lets you set up, manage, and monitor your Stripe account. It helps you manage payments and refunds, respond to disputes, and monitor integrations. You can use the Dashboard to run analytics and view real-time charts that tell you how your business is performing. It also provides information on recent activity that you might need to act on, like disputes or identity verifications.
The Stripe Dashboard app organizes information into separate sections. Each section represents a different area of the API. You can use the Dashboard app to do specific things like refund payments or cancel a subscription, without going into the API.
The Stripe Dashboard app also has a lot of other functionality, like searches and team member privileges. You can use the Dashboard to pull up specific information, like finding payments using a customer’s email address or the last four digits of their card number.
You can give team members to access the Dashboard and give them different privileges, restricting or allowing access to information and the actions they can take. For example, you can give your customer service team access to handle refunds.
Stripe POS app
The Stripe POS app, Stripe Terminal, lets you extend your online store into the physical world. Whether it’s a pop-up store or a permanent physical retail location, the Stripe POS app is a seamless way to unify your online and offline channels.
Stripe Terminal works with Stripe Payments, Connect, and Billing. You can also integrate Stripe into your own mobile and web applications to accept in-store payments and allow customers to reserve online and pick up their orders in the store.
Stripe Terminal works with Stripe’s EMV 1, 2, or 3 precertified credit card readers. This saves you time when you’re getting your physical retail presence up and running. Stripe’s credit card readers work with chip cards and support end-to-end encryption, Google Pay, and Apple Pay.
Stripe also works with Payment for Stripe, the only certified third-party Stripe POS app. Payment for Stripe lets you create charges, manage customers, send receipts, apply refunds, and sell inventory using Payment for Stripe’s POS app.
Stripe mobile apps
Stripe’s mobile apps let you accept payments from your iPhone, Android, or mobile website. Stripe also offers a mobile app for managing your account. This lets you access the Stripe Dashboard, payments and customer information, subscription plans (in iOS only), transfers, and other relevant information.
You can initiate refunds and respond to disputes, all from your iOS or Android device. The app isn’t optimized for iPads, but you can still run the iOS version on your iPad.
In addition, the Stripe mobile apps support daily activity summaries on both platforms. On iOS, you can also receive push notifications for account activity.
Stripe’s mobile apps are ideal for managing and monitoring transactions from your iOS or Android device. However, you can’t create charges from them, so you’ll need to use Stripe Terminal or a third-party integration. You’ll also only be able to see live mode transactions in the Stripe mobile apps.
Stripe was one of the first digital-first payment processors to make a name for themselves. They’ve remained one of the top players not just for their timing, but because they’ve consistently provided one of the easiest to use and most powerful payment processing platforms.
The ability to either use an integration or app for an out-of-the box solution or to customize your implementation to be just right for you gives Stripe a big leg up over most competitors and makes them a great solution for businesses small and large.
Users come to your website with certain expectations already in their mind; they’ve seen thousands of other websites before and it’s only natural that they’ve adopted certain habits.
Instead of trying to change these patterns, it’s much better to incorporate them into your design. To learn more, let’s have a closer look at a psychological concept known as mental models.
What Are Mental Models?
Before we move on to examples, we’ll go through the definition real quick. Rooted in philosophy and psychology, the term mental model is now commonly used to describe human-computer interaction. It describes how the user already has an idea about how something works. In other words, it’s a representation of what the user knows about the website before they even start using it.
it’s a representation of what the user knows about the website before they even start using it
Nielsen Norman Group, an acclaimed research institute, has examined the topic in more detail. They emphasize an important aspect of this definition: a mental model is not factual; it’s only based on the beliefs and predictions that come from the user’s previous experiences. Because of that, every user has different mental models. The background varies from person to person. Of course, it’s often similar, but never exactly the same.
Now that you have an idea of what a mental model is, it’s time to move on to the main topic: how does this concept apply to web design?
How Mental Models Affect Web Design
We use a wide range of digital products every day. Based on these interactions, our brains have developed a variety of mental models for interfaces.
This is clearly visible in the case of kids who have been raised using touchscreens. You might have seen a small child that’s pretty fluent with a tablet and a mobile phone, but when you give them a book, they will try swiping too. It’s because they’re already familiar with one pattern and they’ll automatically apply it to other objects that look similar or have a similar function.
As adults, we’re just as prone to similar patterns. We’re living with certain beliefs about web pages. Some of them have been with us for years, such as:
Links should be underlined or displayed in a different color;
The logo of the company is in the top left-hand corner;
The sign-up button is in the top right-hand corner.
The last two rules are clearly visible in the way people read websites. You’ve probably heard about the F-pattern, yet when it comes to most websites with little text, the Z-pattern proves to be more common.
The user scans the website, starting from the logo, through the navigation bar, all the way to the CTA. Visitors expect to find certain elements in certain places. Any deviation from this proven and tested design can lead to confusion and, eventually, lower conversions.
Have a look at these real-life examples to see how it works:
Although the placement of the sign-up button varies slightly depending on the design, these landing pages coming from top software companies prove that the Z-pattern is alive and well.
Mental Models and Jakob’s Law
No matter how much you love your creation, you need to face the facts: your users spend the majority of their time on other websites. This is the main idea behind Jakob’s Law, a principle created by Jakob Nielsen of the Nielsen Norman Group.
Although it may sound like a limitation at first, this law is not a boundary to your creativity. Instead of being a restriction, it can make your work much easier. Jakob’s Law saves you from reinventing the wheel. You can stick to recognized solutions and focus on optimizing the little details that make the difference. Doesn’t that sound good? It’s like someone has already done the legwork for you. Apart from mental models, there’s still a lot of work to do, from content design to little visual touches.
Mental Models in the Redesign Process
‘Better’ can be an enemy of ‘good’. Every redesign process comes with certain risks. Even though you’re doing your best to improve the user experience, every change means you’re challenging the user’s existing mental models.
You may get it right, but you might also get it terribly wrong. One of the most prominent examples of redesign fails comes from Snapchat. As reported by TechCrunch back in 2018, they decided to change the whole navigation in the app:
Most users were annoyed with the new information architecture. Public Stories got mixed with private Messages. What’s more, they weren’t displayed chronologically anymore. This new order caused confusion and led to huge frustration, resulting in 83% of App Store reviews being negative. The change turned out to be too drastic; it required the users to change their mental models quite dramatically.
Although not perfect, the old version of the app answered the users’ needs. There was no point in redesigning the whole experience just for the sake of creating something new. This decision also had a negative impact on Snapchat’s revenue. After a period of stable growth throughout 2017, the earning in the first quarter of 2018 fell by 20%.
There is another side to the story. Although Snapchat failed to focus on existing mental models, it has done a fantastic job when it comes to introducing new ones. The app was the first one to create the widely known interface for Stories:
Snapchat’s interface
This one was simple and intuitive – and that’s why Instagram and Facebook Messenger have both adapted it successfully:
Instagram’s copy
Facebook’s version
And so we’re faced with the big question: how do you get it right?
How to Learn About Your Users’ Mental Models
Honest research is the answer here. One of the most popular methods is card sorting. The idea is simple: users see a list of elements of the website, and they’re supposed to assign them to different categories. You can use different types of card sorting for your research:
Closed card sorting – You present the users with given categories that have been established before the exercise.
Open card sorting – The research participants are supposed to assign the elements into groups that feel right. The difference is that the users create the categories and their names themselves.
Hybrid cart sorting – In this case, users work with pre-made categories but they can also add extra ones if they think that’s needed.
If you’re looking for other affordable yet effective methods, you might want to try session recordings. Session replay tools allow you to see how the visitors are interacting with your website. You can see mouse moves, scrolls, taps, and clicks, just like you’re sitting next to the user.
Apart from session recordings, you can also use heatmaps to see which parts of the website are most popular. As mentioned above, analytics tools track mouse movements and clicks, which allows for a quite accurate illustration of certain behavioral patterns.
Last but not least, it’s always best to talk to your users. Surveys, user testing, or even focus groups are all goldmines of valuable information. Although this requires more effort, it’s sure to pay off in the long run. Users are often aware of their own mental models, and they’re more than happy to talk about their needs and habits.
Why not use this opportunity to make life easier for everyone? Researching mental models can be a source of interesting insights and inspiration too. I highly encourage you to dig deeper!
