石家莊網(wǎng)站設(shè)計公司排名排行 展為網(wǎng)絡(luò) 13933871212
設(shè)計師與趨勢概念之間存在著……焦慮……的關(guān)系。一方面,跟隨人群感到不對勁-畢竟,創(chuàng)造力不是在做任何事情,而是其他所有人正在做的事情嗎?按照這種思路,了解流行趨勢的唯一價值就是知道您要反對什么。當然,您不能簡單地與趨勢相反。但是,了解最新的Web設(shè)計趨勢是什么,可以更輕松地對它們進行評論和/或批判。
另一方面,有一種想法是“創(chuàng)造力正在知道如何隱藏您的資源” –這句話通常歸因于愛因斯坦(Albert Einstein),盡管更有可能是幽默主義者CEM Joad提出的。(適當,否?)
無論哪種方式,都不難了解流行趨勢。只需將您的眼睛從智能手機上移開,然后四處看看-否則就不要!
重要的是了解趨勢出現(xiàn)和采用的方式和原因。因為歸根結(jié)底,趨勢對我們的文化時刻有很多告訴我們:我們愛什么,我們討厭什么,我們想要走向什么。我們越了解這些東西,我們越接近進入他人的頭腦-同情他們。并且,真正地,了解自己。
畢竟,當藝術(shù)史學(xué)家,時尚評論家和未來的網(wǎng)頁設(shè)計師回顧我們當前的時代時,他們所看到和評論的將是當今的最主要趨勢。當他們討論20世紀20世紀20年代的美學(xué)時,他們實際上將在討論什么是潮流,哪些是逆勢。
那么,趨勢就是正在形成的歷史。
喜歡看您的時尚內(nèi)容?
我們已經(jīng)為您提供了來自設(shè)計師,podcaster和vlogger Charli Prangely的這篇文章的快速摘要:
謝謝,查理!
現(xiàn)在,讓我們看看未來的歷史學(xué)家將對今天說些什么。在一些現(xiàn)代品味制造者的幫助下,從Dribbble的首席執(zhí)行官Zack Onisko,酷爸爸和吉他面條開始。
1. 3維圖
使用3D插圖趨勢顯示主頁,以虛擬顯示4個卡通人物的界面元素。
資源
Just when you thought the future was flat, brands like Pitch and Stripe are throwing their brand weight behind a new-old-fashioned form of illustration: 3D.
Not content with the cut-out illustration style popularized by Slack, designers are looking to add depth and realism to graphics designed to blur the boundaries between the digital and physical worlds.
In a sense, this sharpens the contrast between digital products and human beings, even as it brings them together into imaginary spaces where people can grasp and manipulate digital elements (like the graphs and icons in Pitch’s hero section). You can’t help but think of the popular assertion that Facebook’s real disruption is the way it makes us, its users, into the product — and wonder if designers aren’t subconsciously pushing against this notion.
Of course, if that’s the case, this feels like a merely incremental evolution. These designs don’t so much grant people their humanity back as render them from flat illustrations into cartoons.
With that in mind, perhaps Stripe’s much more realistic credit card animation offers a glimpse of a future where the physical and digital can be rendered as such.
2. From playful wordmark to serious logo — aka, the Helveticization of brand identity
In 2018, we saw several highly visible brands turn from delightfully eccentric brand identities to more … ahem … expected … sans serifs.
Or, as I like to put it: All brands identities eventually result in a Helvetica version.
左側(cè)的前Marketo徽標在右側(cè)具有更“古怪”的字體和更穩(wěn)定的更新。
Old Marketo logo on left, new on the right. Source.
前MailChimp在左側(cè)登錄草書式駝色表殼,在右側(cè)登錄新的小寫sans-serif徽標。
可以說是最合適的品牌重塑:左側(cè)是MailChimp classic,右側(cè)是Mailchimp 2.0。注意外殼的變化!來源。
左側(cè)的大寫字母是Uber的老式超陽剛字樣徽標,右側(cè)的標題欄中是新的自定義無襯線字體。
優(yōu)步(Uber)是我們最討厭討厭的品牌,而優(yōu)步(Uber)則試圖擺脫其丑陋的過去。來源。
誠然,我們想到的三個品牌都沒有直接使用舊品牌。一個就是Mailchimp,其發(fā)展方向是誠實地感覺更適合于一個品牌,該品牌將獨特的聲音和有趣的品牌資產(chǎn)作為其營銷的基石。
盡管如此,對于這些公司中的每一個公司,品牌重塑仍可能有點過于熟悉,而您卻無法公平地將其稱為固定,無聊的社團主義。
就是說,您必須懷疑,從公認的古怪到無聲的轉(zhuǎn)變是否與認知流利度的概念有關(guān):我們最熟悉以前所經(jīng)歷的想法。
世界上最大,最熟悉的品牌都帶有無襯線徽標,因此,朝這個方向邁出的步伐被視為公司成熟的標志,這也就不足為奇了。從這個意義上講,這是一種我們期待一遍又一遍的元趨勢,2019年不太可能成為例外。
3.輪廓類型
像任何設(shè)計驅(qū)動品牌一樣,我們在Webflow上都是字體設(shè)計的忠實擁護者,因此我們一直在尋找文本的新趨勢(請在下面查找更多信息?。?nbsp;
因此,當Zack用輪廓字體指出新興趨勢時,我們跳了起來看看字母形式的新事物對我們有什么幫助。原來是空的。
哥倫比亞運動服公司 徽標對“哥倫比亞”使用概述的類型
資源
Silver Island字體的更新緊隨輪廓字體的趨勢。
源
這種半有半失的文字會立即吸引住并引起人們的注意,這讓人難以捉摸,要求您遵循字母形式得出其自然的結(jié)論。這對于一些令人難忘的品牌推廣來說是一種非常方便的技術(shù)。
在當今世界,笨拙的無襯線占主導(dǎo)地位的品牌中,視覺上較淺的字母肯定可以捕捉到傳統(tǒng)的感覺,但與眾不同。最終,任何新品牌都需要什么:既具有革命性又值得信賴。
4.野蠻主義的持續(xù)上升
我們?nèi)ツ暾f過,今年又說了一遍:
未來將是殘酷的。
(太真實了?我知道。對不起。)
如今,野獸派的臉部美學(xué)似乎特別吸引人。無論是自然擺擺,還是擺脫最近主導(dǎo)網(wǎng)絡(luò)的“干凈”和“最小”風(fēng)格-拒絕百萬品牌聲音和插圖的可愛友好性,在所謂的“均質(zhì)網(wǎng)”,或者是抵制事實和虛構(gòu)的日益超現(xiàn)實的融合的行為,使網(wǎng)暴露于日常生活中。無可否認,野蠻主義已經(jīng)脫離了設(shè)計的亞文化,并進入了全品牌的聚光燈。
需要例子嗎?我們抓到你了:
海報概念采用野蠻主義趨勢,帶有大膽,大寫,黑白,反向字體。
Asana的“設(shè)計尖峰”海報概念。
And it goes way beyond internal meeting posters and iterative concepts. Squarespace’s recent rebrand embraces brutalism by way of New York City’s gritty visual aesthetic and brash personality:
黑色baground上的白色文字重復(fù)“稍微偏左”,以產(chǎn)生堆疊框的錯覺。
Still from brand.squarespace.com.
Brutalism’s staying power suggests an interesting facet of design trends’ emergence and adoption that reminds me of the pop punk phenomenon of the late-90s (here’s to dating myself!): Whatever the trend, no matter how “rebellious” or “in your face” it might seem at first glance, it can and will be co-opted for the popular market. And that that growth from “subcultural” trend to mainstream mainstay can extend over multiple years.
As much as I’ve become a fan of the bold trailblazing brutalism tries to advance, I would ask designers one thing:
記住,請,還有人在那里誰發(fā)現(xiàn)充滿了令人目不暇接,零散型和顏色閃爍的狂熱的動畫非常迷惑。
設(shè)計與任何其他創(chuàng)造性追求一樣,不一定總是適合每個人,但請記住,如果您選擇在設(shè)計工作中包含此類內(nèi)容,那么您將決定您的工作不適合那些愿意感到頭暈?zāi)垦?,令人作嘔和不知所措。
但是,對于野獸派的設(shè)計而言,這些東西并不是必需的。如果您想創(chuàng)建一種通俗易懂的野獸美學(xué),請查看David Copeland的《野獸設(shè)計指南》,該指南提醒我們:
默認情況下,使用HTML且沒有自定義樣式的網(wǎng)站將在所有屏幕和設(shè)備上可讀。盡管一定可以使內(nèi)容更具可讀性,但只有設(shè)計才能使內(nèi)容的可讀性降低。
野獸派網(wǎng)頁設(shè)計指南,粉紅色箭頭指向復(fù)制內(nèi)容為“原始內(nèi)容,其結(jié)構(gòu)真實”
大粉紅色箭頭我的。
5.更多樣化,反傳統(tǒng)的插畫風(fēng)格
在她為Slack所做的工作中,其驚人的詳盡且令人著迷的案例研究中,插畫家愛麗絲·李提醒我們:
當我們超越直接的同行,競爭對手和行業(yè)尋找插圖靈感的來源時,確實發(fā)生了令人敬畏的事情。
雖然它很容易地看到Alice的工作拉開了之間的SaaS產(chǎn)品的公司和其他初創(chuàng)日益同質(zhì)插圖風(fēng)格,它沒有采取噸環(huán)視找到比愛麗絲開采工作的豐富礦脈在其他領(lǐng)域的其他設(shè)計師。
例如,Medium和Intercom正在探索照片拼貼風(fēng)格。
Medium的登錄頁面向您介紹了他們獨特的編輯插圖風(fēng)格。
請注意在文本內(nèi)容中加入野蠻重復(fù)。
但是我們也看到人們受到紙制品工藝的啟發(fā):
一個人的例證拿著桶的梯子的,構(gòu)筑由彎曲的層紙刪去象一滴在藍色和白色。
擁擠的紙張空間
三維化了Alice的大部分剪裁樣式:
刪去跪在紙風(fēng)船漂浮的池塘旁邊的一個無性別的圖的樣式例證。
紙船通過加SHIR
在色彩斑wild的自然/數(shù)字景觀中,例如CrowdRise當前主頁中所示:
人群著陸頁,其中包含人和狗在dogpark中的彩色剪紙風(fēng)格插圖。
在所有這些中不難看出愛麗絲·李(Alice Lee)為Slack所做的工作的回聲–她的聲音已成為現(xiàn)代設(shè)計時代精神的一部分。但是他們每個人都以有趣的方式表達了自己的聲音,展示了探尋其他人正在做的事情所固有的創(chuàng)造潛能,甚至開拓了自己的足跡。
我們甚至看到設(shè)計師采用更多抽象和超現(xiàn)實的方法來說明不太具體的想法,例如保持草率:
人的生氣蓬勃的例證一個浮游物的以揮動旗子的各種各樣的姿勢。
賈斯汀·特蘭(Justin Tran)的《如何保持蓬勃發(fā)展》 illo。
或“生命周期營銷”:
對講博客文章,其中包含利用和抽象剪切,拼貼風(fēng)格插圖趨勢的英雄形象。
作為抽象藝術(shù)迷,我非常期待看到更多具有表達力,寓言性的作品在網(wǎng)絡(luò)上彈出。
6.更喜歡冒險和復(fù)古
雖然徽標設(shè)計工作可能會繼續(xù)趨于同質(zhì)化,但我們和Zack 也看到了一些更古怪的選擇,例如Mailchimp為其品牌字體采用了著名的Cooper Black字體(Tootsie Roll成名?。?:
Mailchimp著陸頁有黃色背景,木桶匠黑色的黑文本和在右邊的一個生氣蓬勃的例證。
結(jié)合Grilli Type的America Mono將抽象的令人愉悅的厚Vesterbro Black(以及常規(guī)和重磅)搖擺起來:
還有Pablo Stanley最近的插圖庫(充滿了Alice Lee!的回聲)中令人愉快的胖Recoleta,Humanaans。
我們在2018年用襯線字體對文藝復(fù)興進行了宣傳,但似乎2019年可能會使它的古怪,懷舊之情向前邁進-至少在頭條新聞中。上面的每個復(fù)古面都具有完整的重量范圍,使其非常適合編輯工作所需的靈活性。
感謝您的趨勢發(fā)現(xiàn),扎克!
我們的下一位撰稿人是居住在日本京都的設(shè)計師,開發(fā)商和企業(yè)家Sacha Grief。您可能會從他出色的(和最少的)策劃網(wǎng)站和新聞通訊,Sidebar或Vulcan.js中認識他。
他足夠友善地撰寫自己的簡短文章,因此,以薩瓦的個人看法,這是薩莎的趨勢清單:
7.包容性設(shè)計
文章的英雄部分,“包容性促進創(chuàng)新的五種方式”
關(guān)于可訪問性的重要性已經(jīng)寫了很多行,但是將其重命名為“ Inclusive Design ”,您就擁有了一個嶄新的流行詞來撰寫有關(guān)此書和論文的文章!
除了開玩笑,考慮不同用戶的需求從來都不是一件壞事,如果需要一種時尚的概念來幫助我們做到這一點,我會接受的。
編者注:如您在上面的屏幕截圖中所見,包容性設(shè)計的倡導(dǎo)者通常會呼吁包容性/可訪問性設(shè)計如何幫助品牌實現(xiàn)業(yè)務(wù)目標。邏輯是合理的,但不必這樣做。
It’s a simple act of humanity to make room for and accommodate others, and if you build inclusive thinking into your design process, the costs are no more than incremental, and can ultimately improve your user experience for everyone.
After all: we’re all disabled sometimes.
帶有身體狀況,暫時狀況和情境障礙的專欄說明圖表,標題為觸摸,看到,聽到和講話的行。
8. Design + code
While we were all agonizing over whether designers should learn to code, some of us quietly did just that — and used our newfound knowledge to develop better design tools. We're seeing a new crop of design tools like Figma or Framer X that enable tighter integration with coding through APIs and plug-in systems.
Editor’s note: Not to mention tools like Webflow, which skip straight over APIs and plugins to let you design code. Oh, and if you’re a Figma fan, you should check out designer Charli Marie’s video on translating Figma designs into functional Webflow sites:
9. Bold typography
For some reason, any list of design trends always has to include "bold typography." Seeing as typography has been around since 1439, you can't really go wrong with that one. (Well, except for that brief period back in 2013 when Apple decide everything should now be set in Helvetica Neue Ultra Light).
Editor’s note: Guilty as charged, Sacha. More on this below.
Our next contributor is the inimitable Pablo Stanley. When Pablo’s not designing great things for InVision, or wowing the design world with his insightful, characterful illustrations, he seems to really enjoy digging into Webflow.
Especially since we launched …
10. CSS grid
詹·西蒙斯(Jen Simmons)的《 LAYOUT LAND》登陸頁面。
Holy mole! I love Grid, man!!!
–Pablo Stanley
For many web designers and developers, flexbox has provided a kind of holy grail. It answers the age-old question of how to properly center things, both vertically and horizontally. It makes previously complex layouts relatively easy to implement. It even (quite literally) enables the fabled “holy grail” layout.
The thing is, it doesn’t give you control over the horizontal and vertical positions of elements simultaneously. That is, it’s a this or that tool.
Enter CSS grid: which lets you place an item exactly where you want it, both vertically and horizontally. Sounds simple, but the reality is that it unlocks a level of expressive freedom and control that previously only print could give us.
And yet: no one is using it.
Well, just about no one. Especially when you look at it relative to flexbox.
According to Chrome Platform Status, roughly 83% of page views include flexbox. CSS grid? Just 1.5%, roughly.
Why, you ask? Well, the answer, as it often is with web layout tools, is uneven support.
根據(jù)Can I Use的使用,除Opera Mini和Blackberry Browser之外,所有瀏覽器的最新版本都支持CSS網(wǎng)格。
或者更具體地說,Internet Explorer(IE)所提供的從未出現(xiàn)過的(缺乏支持的)支持,盡管Microsoft棄用了它,但許多企業(yè)仍然不成比例地依賴Internet Explorer(IE)。
盡管如此,IE的使用可能還不足以充分說明缺乏網(wǎng)格采用的原因。因此,請考慮以上引用的統(tǒng)計信息著重于頁面瀏覽量,而不是頁面。這意味著,主要網(wǎng)站缺乏對網(wǎng)格的采用,更有可能解釋了網(wǎng)格迄今為止表現(xiàn)不佳的原因。
有道理。這些主要平臺可能只是最近才全部投入Flexbox。重新設(shè)計吸引數(shù)十億用戶的網(wǎng)站布局并非易事。
幸運的是,您在大多數(shù)工作中可能不會遇到相同的問題。借助Webflow,您甚至不需要花費數(shù)小時來掌握網(wǎng)格的語法。您可以使用它。今天。直觀。
開始使用Webflow中的grid。
為什么您的設(shè)計團隊應(yīng)使用Webflow
了解設(shè)計團隊如何使用Webflow簡化其工作流程,并建立更好的體驗。
輕松協(xié)作
對于我們的下一個客座設(shè)計思想家,我求助于社交應(yīng)用Mappen的首席設(shè)計師兼Juxta Labs的創(chuàng)意總監(jiān)Los Montoya。這是洛斯用他自己的話說的:
我目前在Mappen的營銷和產(chǎn)品設(shè)計工作中專注于領(lǐng)先的設(shè)計,并且對2019年的發(fā)展有獨特的見解。
11. Opposite approaches to color based on market position
In 2019, I expect to see more companies following the lead of other notable brands and pursuing softer and more approachable color palettes.
In contrast, we’ll continue to see indie designers’ and makers’ companies carving out attention with bolder, more saturated, and opinionated colors. We’ll still see a heavy use of illustrations in an effort to humanize technology and more importantly, humanize the brand.
12. Grid breaks grid
We’ll see the use of CSS grid as an underlying framework to break out of the “grid.” The proliferation and accessibility of CSS grid technologies will help designers and developers alike lean into broken layouts in an effort to bring “old-school,” print-inspired layouts to the web.
13. Mobile-first animation
2018年底的網(wǎng)頁設(shè)計向我們展示了一系列基于滾動的動畫以及“定時動畫”的內(nèi)容,有助于引導(dǎo)營銷頁面。盡管這在桌面斷點上效果很好,但我們將在2019年看到一種更加以移動為先的交互方式。我期待看到設(shè)計師和開發(fā)人員如何將“桌面網(wǎng)絡(luò)設(shè)計”的各個方面帶入移動網(wǎng)絡(luò)設(shè)計中。
14.偉大寫作之年
我相信所有這些都是我們在2018年所見到的自然演變。從某種意義上說,網(wǎng)絡(luò)和產(chǎn)品的視覺設(shè)計都已穩(wěn)定下來。我們擁有一個經(jīng)過測試和驗證的UX流以及用于我們下面的Web和產(chǎn)品設(shè)計的交互的可靠平臺。結(jié)果是數(shù)字產(chǎn)品和網(wǎng)站看起來像是近親,甚至不是兄弟姐妹。
這就是為什么如果您想創(chuàng)建一個深受人們喜愛的品牌并且您的工作是[Insert Desired Title] Designer,那么您將需要提高講故事的技巧和作家的效能。從視覺設(shè)計的角度發(fā)展極好的品味太容易了。您有很多美麗的設(shè)計示例可供學(xué)習(xí)。您具有易于使用的行之有效的營銷漏斗流程和數(shù)字產(chǎn)品UX流程,因此您可以設(shè)計一種大多數(shù)客戶都容易理解的體驗。
有了這些內(nèi)容,2019年將是出色寫作的一年。講故事和敘事的一年。從網(wǎng)站上刪除顏色,動畫,網(wǎng)格和插圖,剩下的大部分都是文字。單詞在網(wǎng)站中很重要,單詞在產(chǎn)品設(shè)計中很重要。在客戶瀏覽應(yīng)用程序時如何與客戶進行溝通,以及如何與客戶進行溝通,這對于為您提供一次機會,讓他們有機會再次回來并再次租用您的應(yīng)用程序至關(guān)重要。
言語是您與團隊溝通以有效完成工作的方式。
言語是如何幫助客戶愛上您的品牌。
言語是你告訴人們?yōu)槭裁此麄儜?yīng)該關(guān)心你在做什么的方式。
2019年是打造值得愛的東西的一年。
Our next contributor is Mariah Driver, Webflow’s very own content producer, punster, and accessibility advocate:
15. Too much motion
In Shakespeare’s As You Like It, Rosalind asks: “Can one desire too much of a good thing?”
Now, you’re probably wondering how we can possibly relate a pastoral comedy written in 1599 to 2019’s web design trends. Two words: motion design.
The trend towards animated and interactive elements is anything but new — and more importantly, it’s not going anywhere. Motion design can be a “good” thing in web design — when it helps users navigate sites.
The consequences of adding animations and interactions for the sake of visual flair, and not usability, can be far greater than simply distracting the user. In some cases, they can make it impossible, and even dangerous, for users to navigate your site.
For example, any display that flickers, flashes, or blinks can trigger people with photosensitive epilepsy. While this design element certainly makes a site memorable, it can quickly become harmful if it’s not used correctly.
We’ve included the site below to demonstrate the type of flashing display that may be harmful to certain users. Please do not click through to the site if you are sensitive to flashes or blinks:
Zipeng Zhu的生物簡介,以粗體,大寫黑色字體填充英雄部分
Warning: if you're photosensitive, give this one a miss.
To better understand how you can use flashes, flickers, and blinks safely and without sacrificing your site’s accessibility, check out the Web Accessibility Guidelines on seizures and flashes.
The takeaway from this trend?
Avoid the temptation to add motion to your site just because modern web design tools, like Webflow, make it possible to do so. Before adding an interaction or animation, ask if it serves a purpose on the page. And more importantly, if it could prevent someone from navigating your site.
Next up: little ole me.
16. Massive, screen-dominating text
滾動花著陸頁上的文字填充了英雄部分,并寫著:“喝最純凈的水/博伊爾·德·歐拉加純凈水”
Copywriters and other content specialists have long argued that content should always come first in the design process. After all, publishing for the web … is still publishing. And whether we’ve finally managed to convince the world of the value of content, or designers have just started to get really interested in letterforms, we’re starting to see websites that truly give textual content center stage.
Witness the above shot from makers of smokable products, Rolling Flowers. Pitched as an alternative to rolling tobacco, Rolling Flowers lets text do (most of) the talking on their (loudly) minimal ecommerce site.
白色背景上的最小,大號黑色文本:產(chǎn)品照片和下面的產(chǎn)品名稱旁邊的購買按鈕。
And tosses in some incredibly large buy buttons to boot.
Or take this shot from a (for now) super-secret internal project:
大號黑色文本填充了白色背景上的英雄部分。 每行一個單詞顯示為“行進無限”
Which sets the copy so large you’re forced to process the sentence in fragments, not whole phrases. (Hence, theoretically focusing your attention.)
“該死的用戶歷程”充滿了泰勒·弗倫德著陸頁的英雄部分。
Tayler Freund shares some of her thoughts on user journeys with big, bold type.
Even Huffpost is getting in on the dramatically massive text shenanigans:
Huffpost標題的著陸頁,文章的標題以大號文字填充在屏幕的左2/3,右側(cè)是論文正文。
For reference, this is all I see on my MacBook Pro:
與在abov圖像中相同的Huffpost文章,其中圖像的2/3被切除。
We’re also seeing this massive text trend emerge in creative menu designs, as you can see in the site of architectural firm Dot to Dot:
在黑色背景上的白色輪廓文字,在由線連接的黃點網(wǎng)格上形成類似星座的圖像
Intriguingly, the menu has moved out of the relative ghetto of a bar across the top of the screen to take center stage, so that its wayfinding system becomes, at least on the homepage, the “meat” of the site.
17. Playful cursor design and animation
暫時講解點對點,還值得一提的是圍繞充分利用人機交互的最重要工具:謙虛的光標這一新興趨勢。
由于它在人類與數(shù)字空間互動的動力學(xué)中起著至關(guān)重要的作用,因此我們中的許多人都不愿意惹惱光標。但不是我們所有人。
例如,在“點對點”上,光標會做很多工作:
懸停狀態(tài)在此處顯示項目圖像。
如果您猶豫了一下,這里將成為如何與菜單進行交互的提示。
在這里,它揭示了一些使命宣言。(不幸的是,將文本渲染為圖像。)
在KIKK Festival網(wǎng)站上,您的光標似乎幾乎遍歷了豐富的藍色層,以揭示設(shè)計的另一個維度,從而增加了您在網(wǎng)站上的時間。
使用Webflow的設(shè)計師NiccolòMiranda還比將鼠標指向并單擊他的作品集網(wǎng)站還把光標放在更具創(chuàng)造性的工作上。在他的主頁上,光標會提示您單擊并按住,從而觸發(fā)一整天辛苦工作的機智動畫。
我對Niccolò的一個希望是,他實際上從早上5點到午夜都不工作。
18.所有人歡呼新的同質(zhì)英雄
直到最近,我們都對無處不在的網(wǎng)站抱有共同的愿景。它看起來像這樣:
著陸頁的框架,其中導(dǎo)航欄在右上角,徽標在左上角,英雄圖像后跟一個blurb和三個列
資源
我們甚至編寫了有關(guān)構(gòu)建此內(nèi)容的教程,以防您的客戶大聲疾呼。
但在2018年,該設(shè)計開始變型。設(shè)計師對精美照片上方居中的標題和按鈕感到厭倦。
他們做了什么呢?將標題和號召性用語向左移動。然后縮小圖像,將其設(shè)置在右邊,也許將其作為自定義插圖?
等等!看哪位新的同質(zhì)英雄。
Airtable.com
Dropbox.com
Mailchimp.com
Stripe.com
需要明確的是:我個人認為這沒有任何問題。頭條新聞越來越清晰。子標題添加了非常需要的上下文。您總是知道在哪里可以找到號召性用語。我們對認知流利性的渴望(當我們處理熟悉的事物時獲得的掌控感)得以實現(xiàn)。雅各布定律被考慮在內(nèi)。
雅各布法律的登陸頁面,其標準布局反映了該法律的前提。 內(nèi)容模糊的文字是:“用戶將大部分時間都花在其他站點上。這意味著用戶希望您的站點以與他們已經(jīng)知道的所有其他站點相同的方式工作。”
在婚禮邀請之外的任何地方都不會看到居中的文字。
但是它肯定是新潮的。
19.重疊所有東西
網(wǎng)站布局模型,其中各部分之間用灰色框分隔,標題文本跨越多個部分。
基于卡的設(shè)計時代使我們所有人都非常清楚,明確地分組到離散的對象中??紤]到普通地區(qū)的格式塔心理學(xué)定律,這是一個明智的選擇。
但是公共區(qū)域并不是視覺上鏈接離散元素的唯一方法。還有統(tǒng)一連通性定律,這解釋了為什么在上面的設(shè)計中清楚地表明“ It's a Light”是指左側(cè)的燈。
因此,在2019年,我們希望看到更多關(guān)于建立聯(lián)系的方法的探索,例如NBC網(wǎng)站上的以下新聞通訊模塊:
NBC.com上具有重疊元素的新聞通訊模塊
這張照片和副本的可自定義拼貼畫:
Molley Heltz網(wǎng)站概念的重疊,可移動照片。
Zhenya Rynzhuk的動畫關(guān)于頁面
在日本創(chuàng)意公司SONICJAM的網(wǎng)站上:
sonicjam.co.jp上的重疊元素
打開菜單以添加效果。(也請注意時髦的光標?。?/div>
20.“用戶”年反擊
一個男人和一個女人的班克斯片擁抱,看著他們的手機。
“手機戀人”,由班克斯
自從智能手機發(fā)布和社交網(wǎng)絡(luò)興起以來,我們一直陶醉于全新的連接水平。世界的知識觸手可及。我們幾乎可以在任何地方“結(jié)交”(是的,孩子們:已經(jīng)有一個動詞了)。我們“享受”不斷刷新“內(nèi)容”“量身定制”“適合我們”的“提要”。
而且我們對此感到厭倦。我們受夠了侵入性。誤導(dǎo)和不誠實。面對有關(guān)泄密,媒體操縱和(或?)操縱選舉的新聞,有關(guān)連接世界的熱烈言論。
我們意識到背上有一只猴子。它生活在我們的口袋里。永遠永遠只對我們意味著最好。
但是,這種認識使我們許多“用戶”都感到疑惑:門票價格是否值得投資回報?從移動“電話”到袖珍型超級計算機的轉(zhuǎn)換,是否使我們付出的代價超過了帶來的代價?
如果是這樣的話:我們?nèi)绾渭m正不平衡?我們可以吃蛋糕嗎?
但是,您在閱讀本文時,不能僅以“用戶”身份回答這些問題。您可能也是制造商。所以在2019年,是時候(過去了)問自己:
有什么可以我做把人回到他們的參與,他們的使用情況,控制自己的生活?