如何零基礎(chǔ)開始學(xué)習(xí)網(wǎng)頁設(shè)計？

時間：2024-02-16 20:30:01 | 來源：網(wǎng)站運營

時間：2024-02-16 20:30:01 來源：網(wǎng)站運營

如何零基礎(chǔ)開始學(xué)習(xí)網(wǎng)頁設(shè)計？：經(jīng)過一段時間艱苦的準(zhǔn)備和錄制，終于把前陣子公告講的免費網(wǎng)頁課程完全錄完了。

整套課程最終包含13節(jié)課，8個不同類型的網(wǎng)頁設(shè)計案例，全方面了解網(wǎng)頁設(shè)計中的不同方向和目標(biāo)，以及柵格系統(tǒng)在網(wǎng)頁設(shè)計中的正確應(yīng)用方式。

基于 Sketch 和 Figma 的安裝不穩(wěn)定性，整套課程均使用即時設(shè)計演示（零基礎(chǔ)可以無成本直接在網(wǎng)頁中啟用）。


下面，我們做一下課程的導(dǎo)覽：






幫助大家正確認(rèn)識網(wǎng)頁設(shè)計是什么，網(wǎng)頁常見的類型有哪些，如何學(xué)習(xí)。








解釋響應(yīng)式與柵格的基本原理，糾正新手的錯誤認(rèn)識。以及如何應(yīng)用它們完成項目網(wǎng)頁畫布的創(chuàng)建，以及實際設(shè)計中的應(yīng)用方式。








講解網(wǎng)頁設(shè)計中必須掌握的規(guī)范內(nèi)容，包含字體、色彩、圖標(biāo)等細(xì)節(jié)的使用規(guī)則，為后續(xù)具體設(shè)計實踐做好準(zhǔn)備。








通過創(chuàng)建對應(yīng)畫布和柵格系統(tǒng)，來完成一個簡單的幻燈片式網(wǎng)頁設(shè)計。這是所有網(wǎng)頁中最簡單也最方便練習(xí)的類型，可以很好的鍛煉新手的排版布局和對配圖的使用意識。








在上一節(jié)課的基礎(chǔ)上進(jìn)階，完成一個更復(fù)雜，排版更多樣化的案例，來引入進(jìn)一步探索此類頁面設(shè)計的方式，同時為后續(xù)的動效設(shè)計做準(zhǔn)備。








通過即時設(shè)計的 “關(guān)鍵幀動畫” 效果來制作網(wǎng)頁動效，快速掌握網(wǎng)頁交互動效的制作思路和方法。







講解當(dāng)前主流的多屏展示類頁面設(shè)計的思路，如何在前期運用柵格系統(tǒng)和原型來構(gòu)建頁面框架。








在原型基礎(chǔ)上完成頁面的視覺設(shè)計，并進(jìn)行簡單的包裝和輸出。








通過一個實例來解釋響應(yīng)式網(wǎng)頁設(shè)計的思路，以及如何創(chuàng)建真實項目中需要的界面，理解響應(yīng)式的適配邏輯。








解釋外貿(mào)電商和國內(nèi)電商的差異，以及設(shè)計外貿(mào)電商網(wǎng)站的注意事項，如何輸出完整的項目內(nèi)容。








通過線上品牌官網(wǎng)案例，分享主流的官網(wǎng)設(shè)計注意事項和難點，如何在項目開始前通過合理的分析找出問題，提升網(wǎng)站整體質(zhì)量。








在原型基礎(chǔ)上完成嚴(yán)肅的官方網(wǎng)站視覺界面要點分享，輸出遠(yuǎn)超市面平均水平的官網(wǎng)設(shè)計成果。








講解國內(nèi)網(wǎng)頁設(shè)計中無法回避的電商詳情頁面設(shè)計思路，通過最簡單的前期規(guī)劃和布局，快速輸出符合主流審美需求的頁面。



如果有一定基礎(chǔ)使用自己熟悉的軟件進(jìn)行練習(xí)臨摹也可以，下面是這套課程的學(xué)習(xí)建議：

• 安裝和掌握 即時設(shè)計 / Figma 其中一個的基本操作方法
• 強烈建議也提前先看完我們錄過的 HTML/CSS 入門課程
• 看完課程的前 3 課，對網(wǎng)頁設(shè)計有一個基本的認(rèn)識和概念
• 在花瓣創(chuàng)建課程中提到的網(wǎng)站類型畫板，并對應(yīng)收集一些案例加深認(rèn)識
• 接著看第 4-9 課，每節(jié)課看完根據(jù)課程的演示和素材完成臨摹
• 最后看 10-13 課，嘗試自己去找到線上的案例進(jìn)行改版練習(xí)

只要跟著建議的步驟展開，很快就可以入門網(wǎng)頁設(shè)計的技能。


那么未來我們會優(yōu)化和豐富最后幾課的案例與知識點，以及添加新的網(wǎng)站類型和風(fēng)格教學(xué)。