跳到主要内容

极简主义网站设计:12个漂亮的例子

+$Minimalist website design is an under-appreciated art. We've all heard the saying 'Less is more', but it's a principle that's often easier said than done. As progressions in technology open up new possibilities in site design, it becomes more and more difficult to resist adding some fancy flourishes.

+$Minimalist website design benefits users in the shape of faster loading times and better compatibility between screen sizes. What's more, a simpleUI设计适应移动浏览,不会损害桌面或用户体验

极简主义哲学的核心是你必须围绕内容进行设计。在网络术语中,设计师从粗略的内容开始,然后为用户构建足够的界面以识别他们的目标并轻松地导航到它。

+$The minimalist aesthetic is the visual representation of that philosophy. Minimalist sire design uses a lot of white – or at least uniformly coloured – space. But don't confuse uncluttered with boring. You must choose your layouts with care, otherwise your restricted palette of design elements will come across as dull instead of elegant.

+$Below, we've collected our favourite minimalist site designs to inspire you to do more by doing less.

+$01. HalloBasis

This site makes a statement with just a few, oversized elements

+$This site makes a statement with just a few, oversized elements+$(Image Credit: HalloBasis)

+$Friends, designers and business partners Felix Vorbeck and Johannes Winkler also go by the moniker+$HalloBasis+$. The Dusseldorf design studio takes pride in delivering projects that communicate well on behalf of its clients. ThisWordPress网站+$acts as the studio's online portfolio site, and is a shining example of minimalist website design done differently.

+$The site makes a bold statement with just a few elements, thanks to its oversized aesthetic – which has the added bonus of aiding accessibility. In fact you might be forgiven for thinking the zoom feature of your chosen browser is maxed out, such is the 17.5vw font sizing for 770px min-width headlines. So typographically, it’s big, with the Messina Sans font suiting that chunkiness and ensuring readability. What’s really refreshing is that this applies to both navigational links and the custom GDPR prompts for accepting cookies. It’s also a cinch to toggle between German and English translations using the buttons on the main screen.

+$02. Jazz FM

This design by Anagrama keeps things simple and striking

+$This design by Anagrama keeps things simple and striking+$(Image credit: Jazz FM Romania)

+$This colourful site for a Bucharest-based radio station does a great job of letting the music speak for itself. At first glance+$Jazz FM Romania通过Anagrama+$, simply invites visitors to stream the live broadcast via a triangular play button that fills half the viewport. We get a logo and a Now Playing track display too, but it’s minimally striking thanks to the black on yellow scheme. This is only the header however and the single, long page structure continues with much more vibrancy to behold – although always with miminalist site design in mind.

+$Most notably, there is a raft of gorgeously ‘jazzy’ SVG illustrations that of course scale with stunning crispness no matter what size your screen is. Typography again goes big, thanks to a sparing economy of text, mostly as heading labels detailing where else Jazz FM can be enjoyed. Other features of interest include a clean and clear seven-day schedule, scrolling FM tuner tickertape and even a jazz festival guide.

+$03. Uber Sign Language

uber sign language website

该站点提供了一个问题的解决方案,而无需回复消息

+$In line with its ethos of accessibility, Uber has created a website dedicated to teaching its customers basic sign language, so they can interact with hearing impaired drivers.优步手语+$is a masterclass in design with restraint. It shows users how to sign simple common phrases (yes, no, turn left and so on), or even their name, through simple, shortform videos. There is very little copy, or explanation; the content speaks for itself, proving you don't need clever words to capture an important brand message.

+$04. Evoulve

evoulve website

削减后面的元素和神奇的动画创造了一种发现的气氛

Evoulve+$is a company dedicated to turning emerging technologies into viable products. The site design – the work of design agencyFleava- 具有令人着迷的未来感。屏幕上的元素非常少:简单的文本注释和非常小的导航选项,设置在缓慢旋转的地球和星空的背景下。然而,每一个都精心制作,微妙的CSS动画增强了魔法感,创造了一种发现的气氛。

+$05. Tinker

Tinker website

这个手表零售网站的用户界面被剥离回基础

修补匠+$is a watch brand with a simple concept: customers can choose the face size, strap colour and metal, in any combination. There are no unnecessary features or detailing. The UI for the company's site makes the concept clear; users can easily select their ideal combination from the limited options available.

+$06. Leen Heyne

Leen Heyne

珠宝商将观众的目光引向其网站

+$Beside Its Jewellery,Leen Heyne+$'s monochrome logo and company name are the only significant visual elements on its homepage. The surrounding expanse of whitespace makes it a safe bet the user's eyes will be drawn to the products.

+$07. We Ain't Plastic

We Ain't Plastic

对比在这里创造了兴趣

+$Contrast is another useful visual tactic for keeping minimalist designs interesting. German UX engineer Roland Lösslein's website我们不是塑料+$sets up a stark contrast in size between the central image and the text and icons above.

+$08. Nua Bikes

Nua Bikes

Nua Bikes在其主页上平衡元素

Nua Bikes+$' site is deceptively minimalist, because there are actually a lot of elements on the screen. However, by condensing the text and maximising the whitespace, the firm is able to draw attention to its product, the bike.

+$09. Sendamessage.to

Sendamessage.to

这个网站有一个明确的目的

+$Amusing, if possibly inane,Sendamessage.to+$lets people customise messages to friends with a hand gesture. The barren black background adds power to the main image and the bold white letters of the text.

+$10. Maaemo

maemo website

大气视频设置场景

+$The website for triple-Michelin-starred Norwegian restaurantMaaemo+$uses minimalism to create a sense of class. The visual treatment is perfect for storytelling, as the site demonstrates with HD photos of dishes being created.

+$11. Ava

Ava

与AI Ava交谈

+$This black-and-white colour scheme and conformity of typography of this promotional site for sci-fi thriller Ex Machina keep the focus on the text – an interactive conversation with the film's star, the AI robot艾娃

+$12. Symbolset

Symbolset

色彩变化的背景让这个简约的网站更加生动+$(Image credit: symbolset.com)

+$Icon Font VendorSymbolset+$attracts attention to the interactive area in the middle of its site by minimising the competing elements and adding a brightly coloured, ever-changing background.

+$Some of these examples originally appeared in,这是全球最畅销的网页设计师和开发者杂志。在这里订阅

阅读更多:



翻译字数超限