iT邦幫忙

網頁設計相關文章
共有 583 則文章
鐵人賽 Modern Web DAY 28
ML X 友廷等公車 系列 第 28

技術 Day 28 AAA 生日快樂/ *F12 console

網頁設計的發展/檢視自己的設計/有沒有/走在時代的尖端 簡單的設計 : 純文字模式 於 1990/12/20 誕生,1991/8/6 對外開放 Flash -...

鐵人賽 自我挑戰組 DAY 5

技術 Day5 切版任務(一):基本框架

本文同步同步發佈於斜槓女指部落格:切版任務(一):基本框架 採用設計:設計師Miss_Y的旅館預約服務設計稿 這次時光屋九週挑戰大部分的設計師都是採用...

鐵人賽 Modern Web DAY 1

技術 關於這次 30 天的日更「用 Adobe Xd 進行 UI 使用者介面設計」系列

關於作者 嗨囉,我是 Riven。 數位遊牧型態的設計師;喜歡在社群上分享設計上的觀察與技巧,撰寫的文章在 Medium 上被選為 #Desgin 領域 Top...

技術 不同創意的碰撞——創意社群

Freehunter是一個能提供工作/ 合作機會給各位創作者的社群(類似創作者的LinkedIn),在這裡您可以聯絡其他的用戶進行交流溝通,甚至是和來自香港與台...

技術 WooCommerce 3.6 改版 - 首次出現 Gutenberg 產品區塊

WooCommerce 3.6.2 正式發佈 建議在未了解更新風險前 應該先到官方論壇或各社團 了解清楚可能會帶來的潛在問題 原文:WooCommerce...

技術 如何在你的瀏覽器找出Google Analytics 使用者Client ID

在做GA數據分析時我們會看到一個使用者多層檢視,那我們要如何對客戶ID的數據做分析呢? 我們在GA儀表板裡的目標對象會看到一個使用者多層檢視,裡面會有一個客戶I...

鐵人賽 Modern Web DAY 30

技術 Day30 - 記憶方塊篇:難度控制 & 完賽感言

難度控制 在 Day22 我們有提到,隨著過了越多關,關卡會越來越難。我們這邊要讓題目變難的方法有兩個方向,第一個是題目會越來越長,光是這樣還不夠,而且我還希望...

鐵人賽 Modern Web DAY 29

技術 Day29 - 記憶方塊篇:遊戲關卡控制

前情提要 昨天我們做了下列這些功能 可以產生題目 generateLevelData() 可以循序播放題目音訊 playLevelSound(levelDat...

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

技術 設計的過去、現在、未來

「這張圖幫我美工一下」,讓工作中的設計師聽在耳裡非常的不爽,當下正想立即回嘴:「你才美工,你全家都美工!」才發現說話的是老闆。 過去,許多設計師非常討厭這句話...

鐵人賽 Modern Web DAY 28

技術 Day28 - 記憶方塊篇:音樂播放及對錯判斷

記憶方塊是結合視覺和聽覺的記憶遊戲,今天我們要來做音樂的播放以及對錯的判斷。 產生題目 首先,我們要來產生題目並且播放題目,記得在 Day22 的時候我們有說明...

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

技術 平面設計師轉設計前端的經驗分享

一開始的文章有提到,我原本也是從事設計,出社會以後開始轉往開發者。學習到目前也能開發到後端(還不會提到是全端工程師,畢竟術業有專攻),學開發觀念與過去學習設計有...

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

技術 設計「素材」資源

做設計總少不了一些圖庫當資源,圖庫資源在網路上非常多,無論免費、付費都可以找到不少,但是設計師在執行時,通常只會挑用一些偏好使用的站點來運用,以下介紹我在開發時...

鐵人賽 Modern Web DAY 27

技術 Day27 - 記憶方塊篇:開始遊戲

禁止自動播放 開始遊戲的時候有一個開始按鈕,一方面可以提示玩家遊戲開始,讓玩家做好準備再開始遊戲。另一方面,由於我們遊戲的一開始就需要播放音樂,但是在2018年...

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

技術 設計「參考」資源

開始執行設計時,除了要明確了解目標外,另一重點則是需要大量的想法及設計參考,假設需要製作遊戲類型的網站,那麼就需要先了解該類型的風格、配色、變化性等等,缺少這些...

鐵人賽 Modern Web DAY 26

技術 Day26 - 記憶方塊篇:按下去有聲音之事件處理

人除了視覺的記憶以外,也有聽覺的記憶,Day25 我們已經讓方塊有了迷幻的動畫,並且點擊的時候可以發亮,今天我們希望除了發亮之外,點擊的時候也可以發出聲音。 抓...

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

技術 設計師與前端開發者的溝通工具

溝通非常重要,不好的溝通不只沒有效率,也會造成不同領域間的嫌隙。如同設計師跟業者索取素材資源時,業者提供的是低解析度的 word 檔案,也很難解釋什麼叫做更高解...

鐵人賽 Modern Web DAY 25

技術 Day25 - 記憶方塊篇:幫方塊做出炫炮又迷幻的動畫

設計動機 很多人相信眼見為憑,只相信看得到和摸得到的東西是存在的。但是這個世界上很多事物雖然看不到,但是卻確實存在。例如愛,愛不是以物質的形式來存在,看不到,摸...

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

技術 透過工具測量用戶行為,找出問題正確修正 UX

開發、設計時我們會盡可能站在用戶的導向做思考,當中也會腦補許多行為,如: 字要小才會顯得精緻 輪播 Banner 很吸睛,最新消息放在上面大家都會看 說明要拆...

鐵人賽 Modern Web DAY 24

技術 Day24 - 記憶方塊篇:畫出主畫面記憶方塊

前情提要 今天我們要來實作記憶方塊的主畫面區塊,在昨天的努力之下,我們已經把區塊都規劃好了,接下來就是要把我們的方塊畫上去。 由於前兩個遊戲 Tic-Tac-T...

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

技術 網頁設計規範 - 通用視覺效果

規範定義除了元件設計、空間、格線等等外,另外還有經常重複使用的樣式也能夠被預先定義,比要常見的視覺效果如下: 圓角 邊線粗細、邊線色彩 陰影 背景圖樣、裝飾...

鐵人賽 自我挑戰組 DAY 24

技術 與工程師的協作之路-工具篇(InVision)

在「Functional map 與 UI flow」篇中,介紹過了應該要給工程師的文件~ 而在「溝通篇(那些難以啟齒的事)」篇裡,提到了一個在文件篇外的詞--...

鐵人賽 Modern Web DAY 23

技術 Day23 - 記憶方塊篇:頁面佈局規劃

繪製頁面草稿 按照慣例,我們先來畫一下我們整個遊戲畫面呈現的草稿,下面是我對整個遊戲面化的初步想像。 我把所有的元素都集中放在中間區塊,因為人的視線比起左右移動...

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

技術 網頁設計規範 - 表單元素的注意事項

定義玩基本要素如文字、色彩、空間等等後,就可以開始定義常用的「元件」,而每一種應用程式、環境都具有固定會不斷出現的 UI 元件,如桌面系統的應用程式會有固定的導...

鐵人賽 自我挑戰組 DAY 23

技術 與工程師的協作之路-色彩篇(網頁色碼)

前面我們已經講過了一些基礎色彩概念~ 當然其實在視覺上,還有很多其他的概念可以應用 例如色彩心理學、錯覺...等 這個領域可以說是好玩,但是太過深入又會有點乏味...

鐵人賽 Modern Web DAY 22

技術 Day22 - 記憶方塊篇:資料結構規劃

昨天 Day21 我們已經說明了我們所需要的物件以及規則,為了要實現這些功能及規則,我們要來規劃我們需要哪些參數來幫助我們實現。 跟前面一樣,我們使用 crea...

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

技術 網頁設計規範 - 一致性的距離(計算方法、水平、垂直)

一開始的文章有介紹到格線系統,主要是針對水平欄位空間的介紹,而其實垂直空間也是需要有固定的間距,當然一方面是有一致的美感,另一方面則是讓開發者設定全網站可用間距...

鐵人賽 Modern Web DAY 21

技術 Day21 - 記憶方塊篇:前言及功能構想

前言 終於到了這次鐵人賽最後一個遊戲,經歷一番東挑西選及天人交戰之後,最後選定了這個遊戲,記憶方塊(Memory Blocks)。 這個遊戲也是很經典的童年回憶...

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

技術 網頁設計規範 - 參考來源

網頁設計許多概念是受到限制的,因為除了設計外也要同時重視可行性,因此預先定義規範不僅預先了解可執行的限制,對於工程師來說更方便預先建構元件。 但設計規範並不是一...

鐵人賽 Modern Web DAY 20

技術 Day20 - 貪吃蛇篇:虛擬方向鍵及暫停遊戲

前情提要及動機 在 Day11 的功能構想中我們有提到,雖然到昨天 Day19 整個貪吃蛇遊戲已經很完整了,但是有一點美中不足的地方,就是透過手機開啟這個遊戲的...

鐵人賽 Modern Web DAY 19

技術 Day19 - 貪吃蛇篇:重新開始按鈕

昨天 Day18 我們已經準備好 isGameStart 參數來幫助我們做今天的重新開始按鈕。 首先,我們需要先來製作一個按鈕,這個按鈕我想要直接蓋在遊戲地圖的...