這9個視覺驚豔的網頁,是這樣設計出來的

免费SSL证书申请

設計是一個不斷發展和變革的領域,很多時候,看似熟悉的設計趨勢會在下一刻搖身一變,便可再次驚豔到你。靈活的創意和開放的想法,常常能够使稀鬆平常的元素搖身一變,化身為驚豔的設計作品。這種點鐵成金的成就感,大概也是許多設計師即使辛苦也會堅持下去的原因所在吧?

今天,我們蒐集了幾個Tubik Studio內的設計師作品,它們是不同業務目標下的產物,這些UI設計作品從配色到動效,無疑都是相當驚豔的。今天,我們透過這些案例,來聊一下優秀的UI視覺設計台前幕後的事情。

1、凸顯特點:設計工作室的官網設計

形體和色彩,到底哪個在設計中更加富有表現力?這個問題可能沒有一個固定答案,這場在戰爭在設計領域當中已經持續多年,甚至會一直持續下去。這個設計項目是為一個室內設計工作室來設計官方網站,他們的主要業務是製作視覺化的室內設計渲染圖。他們熟知如何最大限度地借助設計工具來呈現室內設計的效果,在接到需求之後,我們决定使用全屏背景結合他們最擅長的3D建模,來展現高品質的室內設計能力和建模渲染效果。

富有層次感的排版佈局,讓前後景的內容各司其職,關鍵的內容塊也可以很輕鬆地被掃視。每個區塊都有著醒目的標題,能够告知用戶內容的内容。頁面頂部的導航中呈現了品牌的LOGO,頁面中相關社交媒體連結也非常清晰醒目。在這個色彩豐富的頁面中,關鍵的CTA按鈕是需要借助對比色來凸顯,將用戶導向特定的功能和頁面。

數位建模所帶來的好處是更加沉浸式的場景,和更加易於處理的數位素材,這樣一來,設計師也更容易處理,加入更加有效的動畫效果。在這個案例當中,動效設計師讓用戶在滾動的過程中,看到條紋式的效果,使得頁面的層次感明顯,也暗示了這個設計工作室在視覺效果上的强大處理能力。此外,用戶可以借助頁面指示器快速切換頁面,這一點也確保了整個網站在功能上的便捷和完善性。

2、强化内容:訂購服務的網站頁面設計

對於出門旅行,絕大多數的用戶都抱有著不小的期待。但是旅行本身並不輕鬆,需要訂購飯店,需要購買機票和車票,租車,購買門票,同時還旅行還意味著非常大量的活動。而這次的概念設計,就是圍繞著預訂服務來展開的。同樣使用了3D建模來構建視覺,諸多和日常出行相關的視覺元素佔據了左側的頁面,而右側則是預訂需要填寫的表單內容。整個頁面採用了更加富有活力的配色,降低用戶填寫表單時候的緊張情緒,清晰直觀的頁面佈局,讓用戶無需四處摸索,可以直接開始互動。從標題到表單的條目都保有良好的對比度,可以快速掃視閱讀,便於用戶填寫。

向下滾動,用戶可以瞭解這項服務的相關優勢,特殊的功能,相關福利,以及更多的資訊。每個資訊快都緊密圍繞著一個主題來予以闡述,視覺化的元素被設計得非常吸睛,同時,和整體在風格調性上也保持著高度的一致。

3、營造層次:庫布裡克的作品網站

今年7月26 日,世界電影人都在慶賀著名導演庫布裡克誕辰90周年,同樣身為庫布裡克粉絲的我們,也為他製作了一個相對優雅的作品網站。網站展現了他的榮耀之路,他的生活,以及他是如何進行創作的。整個網站的設計都是借助視覺化的設計來驅動用戶不斷瀏覽,互動不僅在上下左右佈局上富有層次,而且在視覺縱深上做文章。作為一個產出過如此之多經典作品的導演,我們選取了對比度强烈、經典的紅黑白三色來作為整個網站的主要配色,這一點非常符合他獨特的定位和内容。戳這裡查看這個網站。

4、渲染氛圍:托兒服務的著陸頁設計

所有的父母在尋找托兒所和託管機构的時候,都希望他們的孩子獲得最好的服務,能够找到能够給予孩子無微不至關懷的保姆。這個著陸頁的設計是為名為 Kiddy這個托兒服務提供機构所設計的著陸頁。Kiddy致力於為用戶提供服務良好的保姆,在這裡雇傭保姆絕對稱得上是小菜一碟。

為了讓整個頁面足够可愛,風格獨特有趣的插畫發揮了極大的作用,搭配性格富有童趣的字體,讓整個頁面足够視覺化。與此同時,柔和的配色方案之下,文字和背景之間的對比度非常高,用戶只需要掃視就可以輕鬆讀取內容。

整個頁面包含了一個著陸頁應有的所有組件:有過去客戶的推薦內容,新用戶可以和頂級、專業的託管人員直接連線溝通,相關的資訊一應俱全。最重要的是,用戶如果想直接雇傭保姆,甚至不需要翻頁,進入頁面就可以直接溝通。

1 2
赞(0)
未经允许不得转载:Baiduio » 這9個視覺驚豔的網頁,是這樣設計出來的

评论 7

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-9

    Heyya this is kinda of off topic but I was wanting to know if blogs use WYSIWYG editors or if you
    have to manually code wigh HTML. I’m starting a blog soon but have no coding experience soo I wanted to
    get guiidance ffrom someonme with experience. Any help would bbe greatly appreciated! http://Ipi.Tspu.edu.ru/user/futuristicde78

  2. #-8

    I appreciate, cause I found just what I was looking
    for. You’ve ended my 4 day lengthy hunt! God Bless you man. Have a nice day.
    Bye https://detectiv.gr/ATHENS-000004-GRAFEIA-NTETEKTIB.html

  3. #-7

    http://www.seopojie.com – SEO破解工具站是专注于英文SEO工具,英文网站优化技术,搜索引擎优化软件教程,以及外贸网站优化推广软件分享和下载的网站.站点内容每天都在更新英文SEO工具下载和分享.

    Screaming Frog SEO Spider
    SEO推广工具
    资源搜刮
    关键词工具
    英文SEO资源
    外链列表
    Market Samurai
    seo优化软件
    IBP
    网络营销推广站
    Proxy Tool
    账号注册工具

    Anya Veal7个月前 (12-01)回复
  4. #-6

    Have you ever thought about creating an ebook or guest authoring on other sites?

    I have a blog based on the same topics you discuss and would
    really like to have you share some stories/information. I know my visitors would enjoy your work.
    If you are even remotely interested, feel free to send me an e-mail. http://lithorama.eu/000258-Hand-cut-stones.html

    Hand cut stones6个月前 (12-14)回复
  5. #-5

    Definitely believe that which you said. Your favorite reason appeared
    to be on the web the simplest thing to be aware of.
    I say to you, I definitely get annoyed while people consider worries that they just do
    not know about. You managed to hit the nail upon the top and also defined out the whole thing without having side effect , people can take a signal.
    Will likely be back to get more. Thanks http://lithorama.eu/000258-Hand-cut-stones.html

    Hand cut stones6个月前 (12-20)回复
  6. #-4

    I do not even understand how I finished up right here,
    however I thought this submit used to be
    good. I do not understand who you’re however definitely you’re going to a well-known blogger should you are not already.
    Cheers! http://lithorama.eu/000258-Hand-cut-stones.html

    Hand cut stones6个月前 (12-21)回复
  7. #-3

    是时候学习下正体字了

    神器6个月前 (12-27)回复

Baiduio空间更快、更便利、更安全

联系我们立即注册