平面設(shè)計(jì)Studio 06 ▏界面設(shè)計(jì)&網(wǎng)站網(wǎng)頁(yè)設(shè)計(jì)項(xiàng)目

時(shí)間：2022-08-05 01:51:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2022-08-05 01:51:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

克瑞斯專注藝術(shù)類留學(xué)作品集培訓(xùn)，近期結(jié)合面授及線上遠(yuǎn)程兩種教學(xué)模式，界面設(shè)計(jì)Studio 06是網(wǎng)站網(wǎng)頁(yè)設(shè)計(jì)項(xiàng)目，對(duì)此類感興趣的同學(xué)們，歡迎學(xué)習(xí)參與?？巳鹚龟懤m(xù)推出更多專業(yè)項(xiàng)目，請(qǐng)按照文末聯(lián)系方式，關(guān)注公眾號(hào)了解課程詳情。




項(xiàng)目信息





●項(xiàng)目分析

網(wǎng)站目的是什么？ 除了擁有優(yōu)質(zhì)照片外，網(wǎng)頁(yè)還需要具備一定的背景，以吸引網(wǎng)絡(luò)受眾并傳達(dá)情感。

●模式分析

①演示文稿和品牌文檔規(guī)劃。

②網(wǎng)頁(yè)產(chǎn)品形象定位及分析，特定環(huán)境中的產(chǎn)品或服務(wù)呈現(xiàn)方式及效果。

③布局設(shè)計(jì)、分屏布局中網(wǎng)站被分成兩半，兩個(gè)不同圖像不同意圖和CTA。

④網(wǎng)絡(luò)安全的顏色使用，活版印刷藝術(shù)字的使用。

⑤網(wǎng)格是啟動(dòng)移動(dòng)應(yīng)用程序設(shè)計(jì)任務(wù)的基本設(shè)計(jì)路徑。







●趨勢(shì)分析

講故事和高互動(dòng)性成為網(wǎng)頁(yè)設(shè)計(jì)的趨勢(shì)，網(wǎng)頁(yè)靈活性和趣味性變得更強(qiáng)。




課程介紹





●課程方向：網(wǎng)站網(wǎng)頁(yè)設(shè)計(jì)

●授課方式：線上&線下

●課程時(shí)間：待定（根據(jù)學(xué)生的實(shí)際情況調(diào)整）

●課程形式：一對(duì)一&三人小組

●課程目的

了解網(wǎng)站構(gòu)建，學(xué)生掌握網(wǎng)頁(yè)設(shè)計(jì)從形象定位到產(chǎn)品呈現(xiàn)全過(guò)程。




學(xué)習(xí)大綱




●應(yīng)用軟件

Photoshop、Illustrator、Indesign等軟件及手繪板安裝。







●調(diào)研方法及學(xué)習(xí)方向


①UI工具包使用，網(wǎng)格設(shè)計(jì)。

②Flexbox將重新定義響應(yīng)式網(wǎng)格系統(tǒng)。

③卡片布局：Pinterest首創(chuàng)，網(wǎng)絡(luò)卡片以一口大小塊呈現(xiàn)，適合掃描，每張代表一個(gè)統(tǒng)一的概念，適合充當(dāng)內(nèi)容容器，便于重新安排用于不同的頁(yè)面構(gòu)成。

④頁(yè)眉頁(yè)腳、標(biāo)簽和菜單能凸顯主題內(nèi)容，更佳簡(jiǎn)潔。

⑤材料設(shè)計(jì)Google開發(fā)一種設(shè)計(jì)語(yǔ)言，表現(xiàn)元素被賦予模塊化，有趣的圖像、表達(dá)、隱藏功能及個(gè)性化數(shù)據(jù)等。

⑥平板網(wǎng)站表單包含設(shè)備擴(kuò)展和屏幕大小，平面設(shè)計(jì)原則將永遠(yuǎn)不會(huì)消失，用戶不會(huì)錯(cuò)過(guò)平板網(wǎng)站想要展示的內(nèi)容。

⑦半平面設(shè)計(jì)，該類型創(chuàng)建和管理平面設(shè)計(jì)非常容易，設(shè)計(jì)師也可以之后添加圖標(biāo)、菜單或插圖等額外內(nèi)容。




設(shè)計(jì)步驟





●分析階段

①項(xiàng)目靈感啟發(fā)、主題設(shè)計(jì)空間探索。

②主題調(diào)研技能與方法講解，調(diào)研結(jié)果的篩選、總結(jié)、視覺呈現(xiàn)與轉(zhuǎn)換。

③網(wǎng)站用戶體驗(yàn)心理學(xué)分析，實(shí)驗(yàn)性用戶調(diào)研問(wèn)卷報(bào)告。

④網(wǎng)站建設(shè)、網(wǎng)頁(yè)布局形式制定，色調(diào)及風(fēng)格制定。

⑤思路與創(chuàng)意的轉(zhuǎn)化與創(chuàng)新，設(shè)計(jì)過(guò)程標(biāo)準(zhǔn)化。







●設(shè)計(jì)深化階段

①版式設(shè)計(jì)、方案設(shè)計(jì)。

②界面、圖像優(yōu)化。

③網(wǎng)頁(yè)、網(wǎng)站制作表現(xiàn)。

④翻譯、院校上傳規(guī)格分析、版式版面設(shè)計(jì)。

⑤排版、壓縮、鏈接制作。




●設(shè)計(jì)出圖與表現(xiàn)

網(wǎng)頁(yè)效果圖、排版版式、拓展性設(shè)計(jì)。




●拓展性學(xué)習(xí)范圍

①刪除非必要的設(shè)計(jì)元素以支持簡(jiǎn)單性，簡(jiǎn)約設(shè)計(jì)的優(yōu)勢(shì)：減少分心、清晰的信息處理、簡(jiǎn)單的編碼、快速裝載、美觀大氣。

②單頁(yè)設(shè)計(jì)或簡(jiǎn)化的多頁(yè)設(shè)計(jì)吸引用戶訪問(wèn)網(wǎng)站，用戶回避頁(yè)面繁重的網(wǎng)站。

③固定寬度居中的網(wǎng)站布局，符合顯示器比例尺寸標(biāo)準(zhǔn)，用戶便于知道網(wǎng)站從哪里結(jié)束。




參考書目與網(wǎng)站





●參考書目

《編輯設(shè)計(jì)》

《設(shè)計(jì)的細(xì)節(jié)》

《網(wǎng)頁(yè)設(shè)計(jì)和網(wǎng)站制作》

《品牌視覺》

《配色設(shè)計(jì)》

《數(shù)據(jù)視覺化設(shè)計(jì)》

《UI設(shè)計(jì)必修課》

《電商視覺營(yíng)銷》




●參考網(wǎng)站

設(shè)計(jì)作品：大作網(wǎng)、Behance、Pinterest

優(yōu)秀案例：Dribble

圖標(biāo)網(wǎng)站：Flaticon、iconfont等。




學(xué)習(xí)成果





●學(xué)習(xí)周期為

①前期調(diào)研1周：項(xiàng)目調(diào)研、靈感來(lái)源圖片及參考備注、信息匯總、數(shù)據(jù)研究、設(shè)計(jì)要點(diǎn)完善、分析圖制作、調(diào)研成果、前期分析探討等。

②邏輯推敲及概念設(shè)計(jì)1周：思維導(dǎo)圖、視覺可視化設(shè)計(jì)、手繪方案推敲數(shù)次。

③方案設(shè)計(jì)及細(xì)部設(shè)計(jì)2周：方案設(shè)計(jì)、制作過(guò)程、效果圖。

④網(wǎng)頁(yè)圖面繪制1周：網(wǎng)站網(wǎng)頁(yè)設(shè)計(jì)圖、尺寸標(biāo)注、不同色調(diào)及類型產(chǎn)品圖。

⑤制作3天：網(wǎng)頁(yè)界面制作、色調(diào)調(diào)整、后期處理、排版設(shè)計(jì)。

⑥翻譯及排版1周：目標(biāo)院校所需語(yǔ)言翻譯工作、版式版面封底設(shè)計(jì)、頁(yè)眉頁(yè)腳設(shè)計(jì)、字體字號(hào)設(shè)計(jì)、輸出尺寸制作、版式內(nèi)容頁(yè)面調(diào)整和制定樣式風(fēng)格、各頁(yè)面圖面比例位置、圖面圖片大小尺寸及色調(diào)調(diào)整。

⑦制作錄取標(biāo)準(zhǔn)的作品集2天：包括不同版本PDF、JPEG、視頻、網(wǎng)站鏈接及電子版冊(cè)子。

⑧面試指導(dǎo)1小時(shí)：面試技巧及應(yīng)變方式方法、面試流程及各個(gè)環(huán)節(jié)分析、自我介紹及基本信息問(wèn)答、面試主題及問(wèn)題細(xì)節(jié)答疑。




△靈感來(lái)源-克瑞斯錄取案例

△方案規(guī)劃-克瑞斯錄取案例




△網(wǎng)頁(yè)設(shè)計(jì)-克瑞斯錄取案例

△細(xì)部設(shè)計(jì)-克瑞斯錄取案例

△使用方法-克瑞斯錄取案例

●更多參考




想了解更多藝術(shù)留學(xué)Studio，長(zhǎng)按關(guān)注公眾號(hào)“克瑞斯國(guó)際藝術(shù)教育”留言：姓名+聯(lián)系方式+申請(qǐng)國(guó)家+專業(yè)，克瑞斯顧問(wèn)老師會(huì)第一時(shí)間聯(lián)系并解答。