In web design, color has become an important means for designers to enhance the visual effect and attractiveness of pages. Moreover, nowadays, with the development and progress of Internet technology, the clever application of color is no longer just colorful that can give people a strong visual impact. In fact, combined with the bold creativity of designers, even the extremely simple and classic black and white color scheme can also give users a fresh and irresistible visual experience.
Today, xiaobian has collected 12 examples of the latest creative black and white web design, hoping to bring you inspiration:
1.Kenta Toshikura – Creative black and white web design examples
Window:
3 d technology
Visual scroll differential design
All aspects of the web design of this personal portfolio (including background pictures, page copywriting and mouse hover effect, etc.) are very simple and clean with black and white color. Combined with the visual scrolling design, so that the whole web page more smooth and practical. Moreover, the page pictures and design works displayed through 3D technology are also very visual.
Learning points:
Black and white should permeate all aspects of the web design, such as page copy, graphics, visual effects, etc., to make the whole design more harmonious
The online preview
2. TPMM — HTML5 interactive black and white web design example
Designer: CONNECT
Window:
Interactive Web design
Application of visual points of light
The web design of this online Photography and Multimedia Museum uses a black and white color scheme at the same time. With a black background, white light points are easier to highlight. Through interactive design, it provides users with a very visual effect of web page design. The user slides the mouse, and the spot follows the change, expanding or hiding the interface to navigate.
Learning points:
Highlight interface content with white light points
The online preview
3.Hej – Simple black and white web design example
Window:
Eye-catching color contrast
Minimalist web design
Black and white web design does not mean that designers can only design in black and white. In fact, using black and white as the main color, with other colors (same-color or contrasting colors), can make a web page more visually appealing. The website of this collection of creative works adopts a similar design concept, black and white collocation, supplemented by bright red, make the whole design more dynamic. Simple design style also makes the whole web page more concise and easy to understand. Is a good simple web design.
Learning points:
Black and white color matching with bright high purity color, let the web page more vitality
The online preview
Anita — Examples of WordPress black and white web design
Designer: 507 Creative
Window:
Black and white illustration design style
Black and white grid, centralized display of products
This section of food website, the whole design uses a very interesting black and white illustration design style, extremely endowed with visual appeal. In addition, through the intuitive black and white grid, its products and related services are more intuitively and centrally displayed, and the user experience is also excellent.
Learning points:
Use a variety of painting style design, enhance the visual charm of the web page
As shown in the picture, it is also a good choice to adopt the traditional ink design style that many foreign designers compete to imitate. Moreover, can also play the role of promoting Chinese culture, kill two birds with one stone, why not!
The online preview
5.Skinfinity Cosmetics — Responsive HTML5 Black and white Web Design Example
Designer: Browncatz
Window:
Unique text typesetting
Irregular typography is a big trend in web design in 2018. The cosmetics web design, follow the trend of this design, through irregular typography, so that the whole design low-key and fashion. In addition, the application of black and white color matching, the embellishment of the background picture, so that the whole webpage luxurious and mysterious. It is very consistent with the characteristics of the products it sells — women’s cosmetics.
Learning points:
Use custom web page text layout design
The best typography, of course, is one that is both product-specific and useful. And this, need stylist to open brain, develop imagination!
The online preview
6.Bailey Coffee Screamers – Creative black and white Web design examples
Window:
All black background, easy to highlight web products
A black background, coupled with an HD color product image or video, can greatly emphasize and highlight the product on the page and increase sales. As an online coffee product sales website, this website, on the black background, shows a variety of high-definition product pictures and videos, which will easily let users focus on the products sold, thus effectively improving the possibility of users to buy. Is a very worthy of business class web page imitation case.
The online preview
7.Studio Bjork — Interactive black and white style Web design examples
Window:
Horizontal scrolling web design
This section of online studio web design, the use of black and white color matching style at the same time, the selection of a unique horizontal rolling design, novel and practical. Worth emulating.
Learning points:
Horizontal and vertical scrolling can be used independently or in combination
The online preview
8.Tasver Photography & Magazine Theme — Example of responsive black and white Web design
Window:
With the clever collocation of color department colour
Simple and easy-to-use sidebar design
Black and white main color, matched with other colors of the same color, can also make the whole web design more soft and harmonious, more user-friendly acceptance. The online web design of this photography magazine uses the same color except black and white, such as gray and blue, so that the whole design is more harmonious and comfortable. The application of its sidebar also makes the whole web page more concise and easy to use.
Learning points:
Use the same color system color, enrich and optimize black and white web design
The online preview
9.Bugatti Divo – Responsive CSS3 black and white Style website example
Window:
Unique interactive lane design
Display product information in full-screen video
In addition to the black, white and blue color scheme that gives the impression of luxury everywhere, the most attractive aspect of the car web design is the interactive driveway design added to the page. Users can simply scroll the mouse, follow the winding driveway, and tap their fingertips to learn about the product (i.e., various models). In addition, the vehicle information, full-screen video display, also more vivid and intuitive, interesting and practical, effectively reduce the website jump rate.
Learning points:
Customize unique web design with product or brand features
The online preview
10.3 St James Square – Black and white Web design examples
Highlights: Unique grid layout design
This real estate web design template uses black, white and gray classic colors, elegant and sophisticated. Combined with the unique grid layout design, make the whole design more concise and eye-catching, unique style.
Learning points:
Use unique page layout to enhance web design
The online preview
11.Alinti – Simple black and white WordPress web design example
Highlights: Hd black and white background design
The application of high definition black and white photo landing page rotation or background image is another black and white style web design method commonly used by designers. The web design of this collection of works adopts this design method, adding characteristic high-definition black and white background pictures through the landing page to enhance the visual effect of the page.
Learning points:
Simplify black and white web design with hd black and white photos or background images
The online preview
12.Kin Movie – Black and white web page example
Highlights: Use light points and beams to create sci-fi design
Black and white match color medium black, can let a person associate with night easily. In terms of improving the visual effect of the page, and the night of the most match, is undoubtedly colorful lights. The designer of this section of film and television web page is deeply aware of this point, using light beam and light spot, combined with the theme of the film, to create a very visual effect of science fiction wind design.
The online preview
In conclusion, I hope that the analysis above 12 new creative black and white web design can inspire you.
Conclusion:
Black and white style of web design, simple and practical, low-key and capable, very in line with today’s minimalist web design trend. With the same color palette, the whole web design will be more comfortable and soft, which is ideal for highlighting products or services on websites, such as common business websites. If the combination of brighter color contrast design, and can make the whole web design more dynamic and tension.
In short, web design, black and white color matching application and design is also extremely flexible. Combined with designer creativity, even simple black and white, but also unpredictable, patterns.
Related reading:
Difficult to match colors? 11 Design resources for Inspiration!
What do you know about the pros and cons of using bright colors in UI design?
How to quickly master the right UI color scheme? 6 tips not to be missed!
Write at the end:
At present, we need to take good measures to prevent and control the epidemic, reduce gatherings, and advocate telecommuting. Our Team will work together with Zhihu users to tide over the difficulties!
From now until March 5th, we will provide free remote product design collaboration service for product design team to help product managers, designers and developers telecommute to achieve efficient design collaboration. Include:
1. Copy online design collaboration team version, free for 90 days;
2. Private deployment of Moke online design collaboration enterprise, free deployment for 90 days;
3.Mockplus prototype tool, 60% off all versions.
Click the link to pick it up:www.mockplus.cn/anti-2019-n…