Black and white. There is something timeless and elegant about these two colors. They also bring out a certain character to images. For this discussion, we apply this to the effect black and white patterns have on web design.
Do colors make a website more attractive? On the contrary, according to gizmodo.com: “The perfect use of black and white web design can make a site more ‘appealing’ to the eyes of the viewers than a site with lots of bright colors. But the designer must know how to do this.”
See the caveat? Design studio bluecompass.com supports this: “The perceived simplicity of black and white website design is misleading. Effectively using two colors to create visual appeal is harder than it looks.”
They add that the most critical factor is your website’s purpose. This should dictate the colors you will use. Remember that there is such a thing as color psychology and that all colors — including black and white — have an effect that goes beyond visual.
For starters: The website background
Shall we go for black or white? Black comes off as strong, elegant, powerful, and authoritative. Having this for your background might overpower the text and other elements on your website.
For a black-background website, bluecompass.com suggests:
- Include more visual elements and keep your content to a minimum
- Text should be used sparingly because it’s much harder to read white on black
White is known as the perfect combination of all colors. It is also often used to connote peace, silence, purity, and simplicity. But did you know that white also inspires creativity? Hence artists working on a blank (white) canvas or writers typing on a clean sheet of paper.
Websites with lots of white space (provided they are well-designed) are easy on the eyes and easy to read. Visuals and ads easily pop out to the reader. So if you are going for a text-heavy website, go for white.
Examples of black and white websites
For some inspiration, here are some black and white websites that leave quite an unforgettable impression:
See the lines? This is a clever way of telling the viewer to scroll right instead of down. We love how it is incorporated into the design and how they took into consideration the path of the eyes. The black background works since this is an interactive-experience website and not a catalog that showcases products.
2. The Ordinary
Nope, this is not the skincare product line. The Ordinary is a seafood restaurant, and their star-filled black sky background is meant to give the feels of dining under the stars. In this case, it is also relaxing and peaceful, perfect for a nightcap or a romantic date.
Routalempi is a band from Finland that makes clever use of interchanging white and black backgrounds (although their website is predominantly white). They also feature photos in color that truly stand out.
The Flow Market is a bottle design company that focuses on the vibe. This is imminent in their web design, product design, their copy, and the tone of their website. The company is based in Copenhagen, Denmark.
Let’s get started: Where to get black and white patterns
If our website samples have finally convinced you that black and white is a good place to start with your web design, then we are ready to take a look at sources of black and white patterns. Some are free, some are not.
But go ahead and browse, enjoy, and let your creativity run free.
Canva shook the world of design by enabling non-designers to become layout artists with their readily available designs and patterns. They describe black-and-white as “striking” in terms of visuals.
Design Shack offers different bundles of black and white patterns you may use for web design and other design requirements, like slideshows, posters, book covers, and more.
Freeimages features black and white photography of people, objects, places, and — sometimes — patterns.
Freepik is another free resource of images for design. Choose between vectors, photos, and icons — whatever suits for needs.
Pexels’ offering of free black and white patterns go from architecture to nature to details of objects to still life photography to drawing. The range will excite you.
Pinterest has evolved from being just a virtual “corkboard” of pinned photos. It has become a powerful social networking and idea-design collaboration platform for brands. Of course, Pinterest does not lack black and white patterns that appeal to a different type of web designers.
Pixabay features black and white photos of nature, vectors, and mandalas. Some can even be printed out to be coloring tear sheets!
Shutterstock is known as a source of stock photos for news and lifestyle. But they also feature artistic photos and patterns you may use. The plus: they have a blog where you can also pick up a tip or two on design.
Unsplash is a popular choice for royalty-free photos. Check out their black and white pattern photo collection and you’ll be mesmerized.
Vecteezy is your hub for royalty-free vectors, perfect for those who love patterns.
Ready to get started with your black and white website design? These examples and list of black and white website design patterns should help. We can’t wait to see what you come up with!
Author: Kai Magsanoc
Kai Magsanoc is a lifestyle and celebrity journalist and erstwhile fashion stylist. She began her career as managing editor of glossies and contributor to broadsheets. Kai was the first Life & Style and Entertainment editor of Rappler and the last Lifestyle and Celebrity Editor of Yahoo Philippines. Kai is an animal rescue and adoption advocate, aspiring life coach and farmer.