iT邦幫忙

網頁設計相關文章
共有 583 則文章
鐵人賽 自我挑戰組 DAY 19

技術 [蛻變事實/D19] 設計師勇闖前端城-(喘口氣聊一聊:設計師&工程師的糾結路)

又是週未的日子就純粹聊一聊設計師勇闖前端城 心路歷程吧~ 最近在面對設計稿總有個心得浮上心頭 UI設計師真的需要學些網頁技術或如者有時間真的也了解一下前端技能...

鐵人賽 Modern Web DAY 20
前端「設計」聖光之路 系列 第 20

技術 版面視覺動線配置(2)

上一篇介紹了版面配置的概念,其中最重要的是「群組」概念,而本篇就透過實際案例來說明各大網站如何運用這些概念,並且看看是否也有運用到交錯、韻律的手法。 這些概念要...

鐵人賽 Modern Web DAY 18

技術 Day18 - 貪吃蛇篇:吃到自己會死

前情提要 昨天 Day17 我們已經讓食物可以隨機產生,食物還會炫砲的發光,蛇也可以順利吃到食物,而且吃到之後身體會變長,速度會變快。 但是讓蛇這樣一直吃下去,...

鐵人賽 Modern Web DAY 19
前端「設計」聖光之路 系列 第 19

技術 版面視覺動線配置

本篇主要是描述網頁「登入頁」(Landing Page),這個頁面是用戶一開始接觸的畫面,雖然這個頁面沒有固定的設計方法,但其實可以從各大網頁尋找到雷同的跡象,...

鐵人賽 Modern Web DAY 17

技術 Day17 - 貪吃蛇篇:產生食物(上菜啦~~)

想一想,決定食物如何出現 俗話說,吃飯皇帝大,如果不吃東西,貪吃蛇就長不大,也跑不快,所以今天我們要來製作貪吃蛇的另一個重頭戲,就是食物。 首先,我們要來決定食...

鐵人賽 Modern Web DAY 18
前端「設計」聖光之路 系列 第 18

技術 響應式圖片選用技巧

網站上總需要圖片來點綴,除了客戶提供解析度不足的圖片外,我們也看從許多素材網站找到不錯的圖片,而選用圖片除了找到合適主題外,也需要花不少時間來比對是否合適於網站...

鐵人賽 Modern Web DAY 16

技術 Day16 - 貪吃蛇篇:加入蛇的身體

昨天我們已經讓蛇的頭部可以動起來,並且可以接受方向鍵的操作來改變方向。接下來我們要讓這隻蛇有身體,讓他成為一條名符其實的蛇。 前情提要 在 Day12 - 貪吃...

鐵人賽 Modern Web DAY 17
前端「設計」聖光之路 系列 第 17

技術 Icon fonts 的常見資源

網站開發加入一些圖示點綴,除了可以增加網頁的豐富度外,同時可以讓用戶從圖示中了解當下的行為為何。過去圖示大多使用 png 來呈現,具有豐富的色彩及尺寸,但隨著設...

鐵人賽 Modern Web DAY 15

技術 Day15 - 貪吃蛇篇:讓蛇的頭動起來

有了地圖之後,我們就可以開始讓蛇在上面爬了,今天我們的目標是畫出蛇的頭,並且可以操控他在地圖上跑來跑去。 新增蛇的物件 首先我們先來新增一個蛇的物件 const...

鐵人賽 Modern Web DAY 16
前端「設計」聖光之路 系列 第 16

技術 SVG 輸出注意事項

向量工具、Adobe XD、Sketch 也都能夠輸出 SVG 圖片,但在輸出時有些小地方也需要注意一下,避免在本地端看似沒有問題,但用戶卻看到的卻與預期不同。...

鐵人賽 Modern Web DAY 14

技術 Day14 - 貪吃蛇篇:畫出主畫面地圖

昨天 Day13 我們已經把畫面區塊規劃出來了,今天要來把主畫面地圖畫好。 地圖畫面座標系 我們需要一個 xy 軸的二維直角座標系,這邊我的做法是把地圖切成...

鐵人賽 Modern Web DAY 15
前端「設計」聖光之路 系列 第 15

技術 各種網頁圖片壓縮方法

了解基本的格式後,接下來設計師還需要「正確的」輸出圖片並壓縮,網頁上輸出圖片雖然沒有印刷中那麼複雜,但依然有許多眉角需要注意,像是用什麼工具壓縮就很常被詢問到,...

鐵人賽 Modern Web DAY 14
前端「設計」聖光之路 系列 第 14

技術 網頁圖片格式的運用

隨著裝置解析度越來越高,如果是以 1:1 的尺寸輸出圖示時,都會明顯地看到圖示邊緣出現鋸齒,這樣的情況下無疑是降低設計的品質,為了避免這樣問題,實作中通常會使...

鐵人賽 Modern Web DAY 13

技術 Day13 - 貪吃蛇篇:頁面佈局規劃

頁面佈局規劃 如同前篇遊戲 Tic Tac Toe 一樣,我們要來規劃一下遊戲的畫面,因為我希望我們貪吃蛇的遊戲在電腦上可以玩,在手機上也可以玩,所以我想要把遊...

鐵人賽 Modern Web DAY 12

技術 Day12 - 貪吃蛇篇:蛇的原理及資料結構規劃

事前聲明 在挑戰鐵人賽之前,其實我也完全沒有想過貪吃蛇要怎麼做,所以為了做這次的貪吃蛇遊戲,我找了一些資料。其中對我幫助很大的是墨雨設計吳哲宇老師在 hahow...

鐵人賽 Modern Web DAY 13
前端「設計」聖光之路 系列 第 13

技術 文字大小、行高與空間上的關係

一般平面設計師再進入網頁環境時,會不清楚網頁設計所用的單位數值,造成設計稿與開發的畫面有嚴重的落差;且網頁設計本身有許多「慣用的數值」,建議一開始也能先使用大...

鐵人賽 Modern Web DAY 11

技術 Day11 - 貪吃蛇篇:前言及功能構想

前言 談到經典小遊戲,除了圈圈叉叉遊戲之外,還有一個家喻戶曉的遊戲,就是貪吃蛇,雖然現在智慧型手機和各種遊戲機的遊戲越做越華麗,越來越炫砲,但是經典的遊戲終究還...

鐵人賽 Modern Web DAY 12
前端「設計」聖光之路 系列 第 12

技術 網頁設計 - 網路字體運用

字體如果沒有授權問題,是否能夠直接嵌入於網頁之中呢?(請注意:大部分中文字體都會有授權的問題) 當然是可以的,英文網站中許多都會使用自訂的字體,但中文字體可就沒...

鐵人賽 Modern Web DAY 10

技術 Day10 - Tic Tac Toe篇:Single Play機制

Single Play機制 昨天完成判斷勝負功能之後,我們剩下最後一個功能,就是讓玩家可以跟電腦對弈,回憶一下 Day03 的時候,我們有設計一個 isSing...

鐵人賽 Modern Web DAY 11
前端「設計」聖光之路 系列 第 11

技術 網頁設計 - 系統字體介紹

字體一直是設計師排版的關鍵之一,但由於網頁設計受到技術、法規、網路影響,在網頁上能夠使用的字體非常有限,本篇文章其實並非告訴大家怎麼使用字體才會「美」,而是了...

鐵人賽 Modern Web DAY 9

技術 Day09 - Tic Tac Toe篇:勝負判斷方法(2/2)

勝負判斷分析 昨天完成了 row 方向和 column 方向的勝負判斷,今天我們要來完成右斜和左斜方向的勝負判斷,我這邊先把這兩個方向命名為 forwardSl...

鐵人賽 Modern Web DAY 10
前端「設計」聖光之路 系列 第 10

技術 色彩運用(3) - 按鈕的配色

上一篇透過連結的狀態了解運用,本篇則是探討按鈕再運用上的色彩變化,包含了一般、行動呼籲、外框線、警告意味等常見的類型,當然這些類型介紹上別不會包含上一篇的 “狀...

鐵人賽 Modern Web DAY 8

技術 Day08 - Tic Tac Toe篇:勝負判斷方法(1/2)

勝負判斷分析 窮舉法 在 3x3 的圈圈叉叉遊戲中,獲勝的組合只有 8 種,以上圖為例,每個格子裡面的數字代表 block id,我們窮舉出所有獲勝連線: /...

鐵人賽 Modern Web DAY 9

技術 色彩運用(2) - 連結的配色

除了親和性的配色外,訊息的傳遞也是很重要的,與平面設計不同的是訊息並非只有圖文的傳遞,還包含了狀態、互動、提示等等訊息,訊息也同時可以用許多不同色彩表示,增加訊...

鐵人賽 Modern Web DAY 7

技術 Day07 - Tic Tac Toe篇:勝負判斷事前準備

到目前為止,我們伸縮自如的圈圈叉叉遊戲已經很像樣了,但是目前判斷勝負的工作還是需要玩家自己來判斷。我們希望電腦可以幫助我們判斷勝負,這樣就不用自己在那邊算自己是...

鐵人賽 Modern Web DAY 8

技術 你的網頁文字是否足夠清楚呢?

上一篇介紹了整體色彩選擇,按造該概念完成一個網頁相信不是什麼問題,不過色彩到底怎麼選?運用上有什麼需要注意的?本篇就來介紹一下吧。 Accessibility...

鐵人賽 Modern Web DAY 7

技術 網頁設計色彩配置概念

根據上一篇介紹的設計規範參考,實戰中有許多需要事先定義,而色彩是使用者打開網站最先體驗到的部分。好比說 Facebook 的深藍色、Google 的紅色、LIN...

鐵人賽 Modern Web DAY 6

技術 文件、規範參考 - Material Design

程式領域裡面非常重視文件,當然 UI 中也是如此,為了確保設計可以被執行,大型應用程式、系統都會推出屬於自己的規範,如: iOS 的 Human Interf...

鐵人賽 自我挑戰組 DAY 4

技術 [蛻變事實/D04] 設計師勇闖前端城-(必備工具2:善用學習平台)

以前的學習不是上課就是補習班,現在學習路方便許多。 我之前也花錢上過不同的前端課程,也是邊工作邊花自己的晚上或假日時間學習 但也發現課上完了,若沒直接運用或是給...

鐵人賽 Modern Web DAY 5

技術 網頁設計常用格線系統(下)

上一篇介紹了格線系統的概念及計算方式,擁有了這些觀念後會如何運用在繪圖軟體上呢?無論你是使用 Sketch 或是 Adobe XD 都可以快速建立如前文所提到的...