成都網(wǎng)站設(shè)計(jì)公司排名排行 創(chuàng)新互聯(lián) 13518219792
設(shè)計(jì)師與趨勢(shì)概念之間存在著……焦慮……的關(guān)系。一方面,跟隨人群感到不對(duì)勁-畢竟,創(chuàng)造力不是在做任何事情,而是其他所有人正在做的事情嗎?按照這種思路,了解流行趨勢(shì)的價(jià)值就是知道您要反對(duì)什么。當(dāng)然,您不能簡(jiǎn)單地與趨勢(shì)相反。但是,了解最新的Web設(shè)計(jì)趨勢(shì)是什么,可以更輕松地對(duì)它們進(jìn)行評(píng)論和/或批判。
另一方面,有一種想法是“創(chuàng)造力正在知道如何隱藏您的資源” –這句話通常歸因于愛(ài)因斯坦(Albert Einstein),盡管更有可能是幽默主義者CEM Joad提出的。(適當(dāng),否?)
無(wú)論哪種方式,都不難了解流行趨勢(shì)。只需將您的眼睛從智能手機(jī)上移開(kāi),然后四處看看-否則就不要!
重要的是了解趨勢(shì)出現(xiàn)和采用的方式和原因。因?yàn)闅w根結(jié)底,趨勢(shì)對(duì)我們的文化時(shí)刻有很多告訴我們:我們愛(ài)什么,我們討厭什么,我們想要走向什么。我們?cè)搅私膺@些東西,我們?cè)浇咏M(jìn)入他人的頭腦-同情他們。并且,真正地,了解自己。
畢竟,當(dāng)藝術(shù)史學(xué)家,時(shí)尚評(píng)論家和未來(lái)的網(wǎng)頁(yè)設(shè)計(jì)師回顧我們當(dāng)前的時(shí)代時(shí),他們所看到和評(píng)論的將是當(dāng)今的最主要趨勢(shì)。當(dāng)他們討論20世紀(jì)20世紀(jì)20年代的美學(xué)時(shí),他們實(shí)際上將在討論什么是潮流,哪些是逆勢(shì)。
那么,趨勢(shì)就是正在形成的歷史。
喜歡看您的時(shí)尚內(nèi)容?
我們已經(jīng)為您提供了來(lái)自設(shè)計(jì)師,podcaster和vlogger Charli Prangely的這篇文章的快速摘要:
謝謝,查理!
現(xiàn)在,讓我們看看未來(lái)的歷史學(xué)家將對(duì)今天說(shuō)些什么。在一些現(xiàn)代品味制造者的幫助下,從Dribbble的首席執(zhí)行官Zack Onisko,酷爸爸和吉他面條開(kāi)始。
1. 3維圖
使用3D插圖趨勢(shì)顯示主頁(yè),以虛擬顯示4個(gè)卡通人物的界面元素。
資源
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徽標(biāo)在右側(cè)具有更“古怪”的字體和更穩(wěn)定的更新。
Old Marketo logo on left, new on the right. Source.
前MailChimp在左側(cè)登錄草書(shū)式駝色表殼,在右側(cè)登錄新的小寫(xiě)sans-serif徽標(biāo)。
可以說(shuō)是最合適的品牌重塑:左側(cè)是MailChimp classic,右側(cè)是Mailchimp 2.0。注意外殼的變化!來(lái)源。
左側(cè)的大寫(xiě)字母是Uber的老式超陽(yáng)剛字樣徽標(biāo),右側(cè)的標(biāo)題欄中是新的自定義無(wú)襯線字體。
優(yōu)步(Uber)是我們最討厭討厭的品牌,而優(yōu)步(Uber)則試圖擺脫其丑陋的過(guò)去。來(lái)源。
誠(chéng)然,我們想到的三個(gè)品牌都沒(méi)有直接使用舊品牌。一個(gè)就是Mailchimp,其發(fā)展方向是誠(chéng)實(shí)地感覺(jué)更適合于一個(gè)品牌,該品牌將獨(dú)特的聲音和有趣的品牌資產(chǎn)作為其營(yíng)銷(xiāo)的基石。
盡管如此,對(duì)于這些公司中的每一個(gè)公司,品牌重塑仍可能有點(diǎn)過(guò)于熟悉,而您卻無(wú)法公平地將其稱為固定,無(wú)聊的社團(tuán)主義。
就是說(shuō),您必須懷疑,從公認(rèn)的古怪到無(wú)聲的轉(zhuǎn)變是否與認(rèn)知流利度的概念有關(guān):我們最熟悉以前所經(jīng)歷的想法。
世界上大,最熟悉的品牌都帶有無(wú)襯線徽標(biāo),因此,朝這個(gè)方向邁出的步伐被視為公司成熟的標(biāo)志,這也就不足為奇了。從這個(gè)意義上講,這是一種我們期待一遍又一遍的元趨勢(shì),2019年不太可能成為例外。
3.輪廓類(lèi)型
像任何設(shè)計(jì)驅(qū)動(dòng)品牌一樣,我們?cè)赪ebflow上都是字體設(shè)計(jì)的忠實(shí)擁護(hù)者,因此我們一直在尋找文本的新趨勢(shì)(請(qǐng)?jiān)谙旅娌檎腋嘈畔ⅲ。?nbsp;
因此,當(dāng)Zack用輪廓字體指出新興趨勢(shì)時(shí),我們跳了起來(lái)看看字母形式的新事物對(duì)我們有什么幫助。原來(lái)是空的。
哥倫比亞運(yùn)動(dòng)服公司 徽標(biāo)對(duì)“哥倫比亞”使用概述的類(lèi)型
資源
Silver Island字體的更新緊隨輪廓字體的趨勢(shì)。
源
這種半有半失的文字會(huì)立即吸引住并引起人們的注意,這讓人難以捉摸,要求您遵循字母形式得出其自然的結(jié)論。這對(duì)于一些令人難忘的品牌推廣來(lái)說(shuō)是一種非常方便的技術(shù)。
在當(dāng)今世界,笨拙的無(wú)襯線占主導(dǎo)地位的品牌中,視覺(jué)上較淺的字母肯定可以捕捉到傳統(tǒng)的感覺(jué),但與眾不同。最終,任何新品牌都需要什么:既具有革命性又值得信賴。
4.野蠻主義的持續(xù)上升
我們?nèi)ツ暾f(shuō)過(guò),今年又說(shuō)了一遍:
未來(lái)將是殘酷的。
(太真實(shí)了?我知道。對(duì)不起。)
如今,野獸派的臉部美學(xué)似乎特別吸引人。無(wú)論是自然擺擺,還是擺脫最近主導(dǎo)網(wǎng)絡(luò)的“干凈”和“最小”風(fēng)格-拒絕百萬(wàn)品牌聲音和插圖的可愛(ài)友好性,在所謂的“均質(zhì)網(wǎng)”,或者是抵制事實(shí)和虛構(gòu)的日益超現(xiàn)實(shí)的融合的行為,使網(wǎng)暴露于日常生活中。無(wú)可否認(rèn),野蠻主義已經(jīng)脫離了設(shè)計(jì)的亞文化,并進(jìn)入了全品牌的聚光燈。
需要例子嗎?我們抓到你了:
海報(bào)概念采用野蠻主義趨勢(shì),帶有大膽,大寫(xiě),黑白,反向字體。
Asana的“設(shè)計(jì)尖峰”海報(bào)概念。
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)生堆疊框的錯(cuò)覺(jué)。
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:
記住,請(qǐng),還有人在那里誰(shuí)發(fā)現(xiàn)充滿了令人目不暇接,零散型和顏色閃爍的狂熱的動(dòng)畫(huà)非常迷惑。
設(shè)計(jì)與任何其他創(chuàng)造性追求一樣,不一定總是適合每個(gè)人,但請(qǐng)記住,如果您選擇在設(shè)計(jì)工作中包含此類(lèi)內(nèi)容,那么您將決定您的工作不適合那些愿意感到頭暈?zāi)垦?,令人作嘔和不知所措。
但是,對(duì)于野獸派的設(shè)計(jì)而言,這些東西并不是必需的。如果您想創(chuàng)建一種通俗易懂的野獸美學(xué),請(qǐng)查看David Copeland的《野獸設(shè)計(jì)指南》,該指南提醒我們:
默認(rèn)情況下,使用HTML且沒(méi)有自定義樣式的網(wǎng)站將在所有屏幕和設(shè)備上可讀。盡管一定可以使內(nèi)容更具可讀性,但只有設(shè)計(jì)才能使內(nèi)容的可讀性降低。
大粉紅色箭頭我的。
5.更多樣化,反傳統(tǒng)的插畫(huà)風(fēng)格
在她為Slack所做的工作中,其驚人的詳盡且令人著迷的案例研究中,插畫(huà)家愛(ài)麗絲·李提醒我們:
當(dāng)我們超越直接的同行,競(jìng)爭(zhēng)對(duì)手和行業(yè)尋找插圖靈感的來(lái)源時(shí),確實(shí)發(fā)生了令人敬畏的事情。
雖然它很容易地看到Alice的工作拉開(kāi)了之間的SaaS產(chǎn)品的公司和其他初創(chuàng)日益同質(zhì)插圖風(fēng)格,它沒(méi)有采取噸環(huán)視找到比愛(ài)麗絲開(kāi)采工作的豐富礦脈在其他領(lǐng)域的其他設(shè)計(jì)師。
例如,Medium和Intercom正在探索照片拼貼風(fēng)格。
Medium的登錄頁(yè)面向您介紹了他們獨(dú)特的編輯插圖風(fēng)格。
請(qǐng)注意在文本內(nèi)容中加入野蠻重復(fù)。
但是我們也看到人們受到紙制品工藝的啟發(fā):
一個(gè)人的例證拿著桶的梯子的,構(gòu)筑由彎曲的層紙刪去象一滴在藍(lán)色和白色。
擁擠的紙張空間
三維化了Alice的大部分剪裁樣式:
刪去跪在紙風(fēng)船漂浮的池塘旁邊的一個(gè)無(wú)性別的圖的樣式例證。
紙船通過(guò)加SHIR
在色彩斑wild的自然/數(shù)字景觀中,例如CrowdRise當(dāng)前主頁(yè)中所示:
人群著陸頁(yè),其中包含人和狗在dogpark中的彩色剪紙風(fēng)格插圖。
在所有這些中不難看出愛(ài)麗絲·李(Alice Lee)為Slack所做的工作的回聲–她的聲音已成為現(xiàn)代設(shè)計(jì)時(shí)代精神的一部分。但是他們每個(gè)人都以有趣的方式表達(dá)了自己的聲音,展示了探尋其他人正在做的事情所固有的創(chuàng)造潛能,甚至開(kāi)拓了自己的足跡。
我們甚至看到設(shè)計(jì)師采用更多抽象和超現(xiàn)實(shí)的方法來(lái)說(shuō)明不太具體的想法,例如保持草率:
人的生氣蓬勃的例證一個(gè)浮游物的以揮動(dòng)旗子的各種各樣的姿勢(shì)。
賈斯汀·特蘭(Justin Tran)的《如何保持蓬勃發(fā)展》 illo。
或“生命周期營(yíng)銷(xiāo)”:
對(duì)講博客文章,其中包含利用和抽象剪切,拼貼風(fēng)格插圖趨勢(shì)的英雄形象。
作為抽象藝術(shù)迷,我非常期待看到更多具有表達(dá)力,寓言性的作品在網(wǎng)絡(luò)上彈出。
6.更喜歡冒險(xiǎn)和復(fù)古
雖然徽標(biāo)設(shè)計(jì)工作可能會(huì)繼續(xù)趨于同質(zhì)化,但我們和Zack 也看到了一些更古怪的選擇,例如Mailchimp為其品牌字體采用了著名的Cooper Black字體(Tootsie Roll成名?。?。 :
Mailchimp著陸頁(yè)有黃色背景,木桶匠黑色的黑文本和在右邊的一個(gè)生氣蓬勃的例證。
結(jié)合Grilli Type的America Mono將抽象的令人愉悅的厚Vesterbro Black(以及常規(guī)和重磅)搖擺起來(lái):
還有Pablo Stanley最近的插圖庫(kù)(充滿了Alice Lee!的回聲)中令人愉快的胖Recoleta,Humanaans。
我們?cè)?018年用襯線字體對(duì)文藝復(fù)興進(jìn)行了宣傳,但似乎2019年可能會(huì)使它的古怪,懷舊之情向前邁進(jìn)-至少在頭條新聞中。上面的每個(gè)復(fù)古面都具有完整的重量范圍,使其非常適合編輯工作所需的靈活性。
感謝您的趨勢(shì)發(fā)現(xiàn),扎克!
我們的下一位撰稿人是居住在日本京都的設(shè)計(jì)師,開(kāi)發(fā)商和企業(yè)家Sacha Grief。您可能會(huì)從他出色的(和最少的)策劃網(wǎng)站和新聞通訊,Sidebar或Vulcan.js中認(rèn)識(shí)他。
他足夠友善地撰寫(xiě)自己的簡(jiǎn)短文章,因此,以薩瓦的個(gè)人看法,這是薩莎的趨勢(shì)清單:
7.包容性設(shè)計(jì)
文章的英雄部分,“包容性促進(jìn)創(chuàng)新的五種方式”
關(guān)于可訪問(wèn)性的重要性已經(jīng)寫(xiě)了很多行,但是將其重命名為“ Inclusive Design ”,您就擁有了一個(gè)嶄新的流行詞來(lái)撰寫(xiě)有關(guān)此書(shū)和論文的文章!
除了開(kāi)玩笑,考慮不同用戶的需求從來(lái)都不是一件壞事,如果需要一種時(shí)尚的概念來(lái)幫助我們做到這一點(diǎn),我會(huì)接受的。
編者注:如您在上面的屏幕截圖中所見(jiàn),包容性設(shè)計(jì)的倡導(dǎo)者通常會(huì)呼吁包容性/可訪問(wèn)性設(shè)計(jì)如何幫助品牌實(shí)現(xiàn)業(yè)務(wù)目標(biāo)。邏輯是合理的,但不必這樣做。
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.
帶有身體狀況,暫時(shí)狀況和情境障礙的專欄說(shuō)明圖表,標(biāo)題為觸摸,看到,聽(tīng)到和講話的行。
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》登陸頁(yè)面。
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)格。
或者更具體地說(shuō),Internet Explorer(IE)所提供的從未出現(xiàn)過(guò)的(缺乏支持的)支持,盡管Microsoft棄用了它,但許多企業(yè)仍然不成比例地依賴Internet Explorer(IE)。
盡管如此,IE的使用可能還不足以充分說(shuō)明缺乏網(wǎng)格采用的原因。因此,請(qǐng)考慮以上引用的統(tǒng)計(jì)信息著重于頁(yè)面瀏覽量,而不是頁(yè)面。這意味著,主要網(wǎng)站缺乏對(duì)網(wǎng)格的采用,更有可能解釋了網(wǎng)格迄今為止表現(xiàn)不佳的原因。
有道理。這些主要平臺(tái)可能只是最近才全部投入Flexbox。重新設(shè)計(jì)吸引數(shù)十億用戶的網(wǎng)站布局并非易事。
幸運(yùn)的是,您在大多數(shù)工作中可能不會(huì)遇到相同的問(wèn)題。借助Webflow,您甚至不需要花費(fèi)數(shù)小時(shí)來(lái)掌握網(wǎng)格的語(yǔ)法。您可以使用它。今天。直觀。
開(kāi)始使用Webflow中的grid。
為什么您的設(shè)計(jì)團(tuán)隊(duì)?wèi)?yīng)使用Webflow
了解設(shè)計(jì)團(tuán)隊(duì)如何使用Webflow簡(jiǎn)化其工作流程,并建立更好的體驗(yàn)。
輕松協(xié)作
對(duì)于我們的下一個(gè)客座設(shè)計(jì)思想家,我求助于社交應(yīng)用Mappen的首席設(shè)計(jì)師兼Juxta Labs的創(chuàng)意總監(jiān)Los Montoya。這是洛斯用他自己的話說(shuō)的:
我目前在Mappen的營(yíng)銷(xiāo)和產(chǎn)品設(shè)計(jì)工作中專注于的設(shè)計(jì),并且對(duì)2019年的發(fā)展有獨(dú)特的見(jiàn)解。
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)頁(yè)設(shè)計(jì)向我們展示了一系列基于滾動(dòng)的動(dòng)畫(huà)以及“定時(shí)動(dòng)畫(huà)”的內(nèi)容,有助于引導(dǎo)營(yíng)銷(xiāo)頁(yè)面。盡管這在桌面斷點(diǎn)上效果很好,但我們將在2019年看到一種更加以移動(dòng)為先的交互方式。我期待看到設(shè)計(jì)師和開(kāi)發(fā)人員如何將“桌面網(wǎng)絡(luò)設(shè)計(jì)”的各個(gè)方面帶入移動(dòng)網(wǎng)絡(luò)設(shè)計(jì)中。
14.偉大寫(xiě)作之年
我相信所有這些都是我們?cè)?018年所見(jiàn)到的自然演變。從某種意義上說(shuō),網(wǎng)絡(luò)和產(chǎn)品的視覺(jué)設(shè)計(jì)都已穩(wěn)定下來(lái)。我們擁有一個(gè)經(jīng)過(guò)測(cè)試和驗(yàn)證的UX流以及用于我們下面的Web和產(chǎn)品設(shè)計(jì)的交互的可靠平臺(tái)。結(jié)果是數(shù)字產(chǎn)品和網(wǎng)站看起來(lái)像是近親,甚至不是兄弟姐妹。
這就是為什么如果您想創(chuàng)建一個(gè)深受人們喜愛(ài)的品牌并且您的工作是[Insert Desired Title] Designer,那么您將需要提高講故事的技巧和作家的效能。從
視覺(jué)設(shè)計(jì)的角度發(fā)展極好的品味太容易了。您有很多美麗的設(shè)計(jì)示例可供學(xué)習(xí)。您具有易于使用的行之有效的營(yíng)銷(xiāo)漏斗流程和數(shù)字產(chǎn)品UX流程,因此您可以設(shè)計(jì)一種大多數(shù)客戶都容易理解的體驗(yàn)。
有了這些內(nèi)容,2019年將是出色寫(xiě)作的一年。講故事和敘事的一年。從網(wǎng)站上刪除顏色,動(dòng)畫(huà),網(wǎng)格和插圖,剩下的大部分都是文字。單詞在網(wǎng)站中很重要,單詞在產(chǎn)品設(shè)計(jì)中很重要。在客戶瀏覽應(yīng)用程序時(shí)如何與客戶進(jìn)行溝通,以及如何與客戶進(jìn)行溝通,這對(duì)于為您提供一次機(jī)會(huì),讓他們有機(jī)會(huì)再次回來(lái)并再次租用您的應(yīng)用程序至關(guān)重要。
言語(yǔ)是您與團(tuán)隊(duì)溝通以有效完成工作的方式。
言語(yǔ)是如何幫助客戶愛(ài)上您的品牌。
言語(yǔ)是你告訴人們?yōu)槭裁此麄儜?yīng)該關(guān)心你在做什么的方式。
2019年是打造值得愛(ài)的東西的一年。
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的生物簡(jiǎn)介,以粗體,大寫(xiě)黑色字體填充英雄部分
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
滾動(dòng)花著陸頁(yè)上的文字填充了英雄部分,并寫(xiě)著:“喝最純凈的水/博伊爾·德·歐拉加純凈水”
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.
白色背景上的最小,大號(hào)黑色文本:產(chǎn)品照片和下面的產(chǎn)品名稱旁邊的購(gòu)買(mǎi)按鈕。
And tosses in some incredibly large buy buttons to boot.
Or take this shot from a (for now) super-secret internal project:
大號(hào)黑色文本填充了白色背景上的英雄部分。 每行一個(gè)單詞顯示為“行進(jìn)無(wú)限”
Which sets the copy so large you’re forced to process the sentence in fragments, not whole phrases. (Hence, theoretically focusing your attention.)
“該死的用戶歷程”充滿了泰勒·弗倫德著陸頁(yè)的英雄部分。
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標(biāo)題的著陸頁(yè),文章的標(biāo)題以大號(hào)文字填充在屏幕的左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:
在黑色背景上的白色輪廓文字,在由線連接的黃點(diǎn)網(wǎng)格上形成類(lèi)似星座的圖像
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í)講解點(diǎn)對(duì)點(diǎn),還值得一提的是圍繞充分利用人機(jī)交互的最重要工具:謙虛的光標(biāo)這一新興趨勢(shì)。
由于它在人類(lèi)與數(shù)字空間互動(dòng)的動(dòng)力學(xué)中起著至關(guān)重要的作用,因此我們中的許多人都不愿意惹惱光標(biāo)。但不是我們所有人。
例如,在“點(diǎn)對(duì)點(diǎn)”上,光標(biāo)會(huì)做很多工作:
懸停狀態(tài)在此處顯示項(xiàng)目圖像。
如果您猶豫了一下,這里將成為如何與菜單進(jìn)行交互的提示。
在這里,它揭示了一些使命宣言。(不幸的是,將文本渲染為圖像。)
在KIKK Festival網(wǎng)站上,您的光標(biāo)似乎幾乎遍歷了豐富的藍(lán)色層,以揭示設(shè)計(jì)的另一個(gè)維度,從而增加了您在網(wǎng)站上的時(shí)間。
使用Webflow的設(shè)計(jì)師NiccolòMiranda還比將鼠標(biāo)指向并單擊他的作品集網(wǎng)站還把光標(biāo)放在更具創(chuàng)造性的工作上。在他的主頁(yè)上,光標(biāo)會(huì)提示您單擊并按住,從而觸發(fā)一整天辛苦工作的機(jī)智動(dòng)畫(huà)。
我對(duì)Niccolò的一個(gè)希望是,他實(shí)際上從早上5點(diǎn)到午夜都不工作。
18.所有人歡呼新的同質(zhì)英雄
直到最近,我們都對(duì)無(wú)處不在的網(wǎng)站抱有共同的愿景。它看起來(lái)像這樣:
著陸頁(yè)的框架,其中導(dǎo)航欄在右上角,徽標(biāo)在左上角,英雄圖像后跟一個(gè)blurb和三個(gè)列
資源
我們甚至編寫(xiě)了有關(guān)構(gòu)建此內(nèi)容的教程,以防您的客戶大聲疾呼。
但在2018年,該設(shè)計(jì)開(kāi)始變型。設(shè)計(jì)師對(duì)精美照片上方居中的標(biāo)題和按鈕感到厭倦。
他們做了什么呢?將標(biāo)題和號(hào)召性用語(yǔ)向左移動(dòng)。然后縮小圖像,將其設(shè)置在右邊,也許將其作為自定義插圖?
等等!看哪位新的同質(zhì)英雄。
Airtable.com
Dropbox.com
Mailchimp.com
Stripe.com
需要明確的是:我個(gè)人認(rèn)為這沒(méi)有任何問(wèn)題。頭條新聞越來(lái)越清晰。子標(biāo)題添加了非常需要的上下文。您總是知道在哪里可以找到號(hào)召性用語(yǔ)。我們對(duì)認(rèn)知流利性的渴望(當(dāng)我們處理熟悉的事物時(shí)獲得的掌控感)得以實(shí)現(xiàn)。雅各布定律被考慮在內(nèi)。
雅各布法律的登陸頁(yè)面,其標(biāo)準(zhǔn)布局反映了該法律的前提。 內(nèi)容模糊的文字是:“用戶將大部分時(shí)間都花在其他站點(diǎn)上。這意味著用戶希望您的站點(diǎn)以與他們已經(jīng)知道的所有其他站點(diǎn)相同的方式工作。”
在婚禮邀請(qǐng)之外的任何地方都不會(huì)看到居中的文字。
但是它肯定是新潮的。
19.重疊所有東西
網(wǎng)站布局模型,其中各部分之間用灰色框分隔,標(biāo)題文本跨越多個(gè)部分。
基于卡的設(shè)計(jì)時(shí)代使我們所有人都非常清楚,明確地分組到離散的對(duì)象中??紤]到普通地區(qū)的格式塔心理學(xué)定律,這是一個(gè)明智的選擇。
但是公共區(qū)域并不是視覺(jué)上鏈接離散元素的方法。還有統(tǒng)一連通性定律,這解釋了為什么在上面的設(shè)計(jì)中清楚地表明“ It's a Light”是指左側(cè)的燈。
因此,在2019年,我們希望看到更多關(guān)于建立聯(lián)系的方法的探索,例如NBC網(wǎng)站上的以下新聞通訊模塊:
NBC.com上具有重疊元素的新聞通訊模塊
這張照片和副本的可自定義拼貼畫(huà):
Molley Heltz網(wǎng)站概念的重疊,可移動(dòng)照片。
Zhenya Rynzhuk的動(dòng)畫(huà)關(guān)于頁(yè)面
在日本創(chuàng)意公司SONICJAM的網(wǎng)站上:
sonicjam.co.jp上的重疊元素
打開(kāi)菜單以添加效果。(也請(qǐng)注意時(shí)髦的光標(biāo)!)
20.“用戶”年反擊
一個(gè)男人和一個(gè)女人的班克斯片擁抱,看著他們的手機(jī)。
“手機(jī)戀人”,由班克斯
自從智能手機(jī)發(fā)布和社交網(wǎng)絡(luò)興起以來(lái),我們一直陶醉于全新的連接水平。世界的知識(shí)觸手可及。我們幾乎可以在任何地方“結(jié)交”(是的,孩子們:已經(jīng)有一個(gè)動(dòng)詞了)。我們“享受”不斷刷新“內(nèi)容”“量身定制”“適合我們”的“提要”。
而且我們對(duì)此感到厭倦。我們受夠了侵入性。誤導(dǎo)和不誠(chéng)實(shí)。面對(duì)有關(guān)泄密,媒體操縱和(或?)操縱選舉的新聞,有關(guān)連接世界的熱烈言論。
我們意識(shí)到背上有一只猴子。它生活在我們的口袋里。永遠(yuǎn)永遠(yuǎn)只對(duì)我們意味著最好。
但是,這種認(rèn)識(shí)使我們?cè)S多“用戶”都感到疑惑:門(mén)票價(jià)格是否值得投資回報(bào)?從移動(dòng)“電話”到袖珍型超級(jí)計(jì)算機(jī)的轉(zhuǎn)換,是否使我們付出的代價(jià)超過(guò)了帶來(lái)的代價(jià)?
如果是這樣的話:我們?nèi)绾渭m正不平衡?我們可以吃蛋糕嗎?
但是,您在閱讀本文時(shí),不能僅以“用戶”身份回答這些問(wèn)題。您可能也是制造商。所以在2019年,是時(shí)候(過(guò)去了)問(wèn)自己:
有什么可以我做把人回到他們的參與,他們的使用情況,控制自己的生活?
文章題目:成都網(wǎng)站設(shè)計(jì)公司排名排行
文章位置:http://www.rwnh.cn/news/183174.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供電子商務(wù)、定制網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、微信小程序、網(wǎng)站設(shè)計(jì)公司
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源:
創(chuàng)新互聯(lián)