HAO HSUAN
  • WORKS (current)
  • ABOUT
  • PHOTOGRAPHY
  • All
  • WEB/APP
  • Graphic
  • Illustration
  • Other
  • 農業設施溫網室資訊管理平台|網站改版設計

    網站預覽: 農業設施溫網室資訊管理平台

  • 台灣休閒農業發展協會-農遊大使|網站

    網站預覽: 農遊大使|授證大使

  • 農業淨零資訊網|前後台網站規劃、設計、切版、無障礙A

    網站預覽: 農業淨零資訊網

    此網站以大量前台頁面供民眾瀏覽為主,並有後台提供管理者資料上稿。

    前台

    前台操作預覽

    後台

  • 補助獎勵措施查詢系統|前期分析、易用性測試、網站設計、切版

    網站預覽: 補助獎勵措施查詢系統

    共同參與系統的資料收集、人物誌、顧客旅程圖和測試任務腳本撰寫,並實際與相關使用者做易用性測試,透過分析與訪談更了解網站設計重點與未來發展方向。

  • 農業易遊網|改版設計 (未執行)
  • 農業易遊網-2023 螢火蟲季|網站設計、切版

    網站預覽: 螢火蟲季

  • 農業易遊網-田媽媽的多粽宇宙|網站設計、切版
  • 農業易遊網-我是農粉我驕傲|網站設計、切版
  • 鹽埕相蓋好|展覽視覺

    鹽埕,一個適合用緩慢步調來認識感受的老城區,常常一不小心就會走進故事裡。

    或許是她曾經為政商重地的發展背景,或許是她擁有多元豐富的飲食文化,
    或許是她那海派內斂兼具的港邊情壞,或許是這老派創新融合的生猛能量。

    然而,鹽埕的好,是來自於一起生活在這塊土地的鹽埕人們,這份人情,讓我相信「埕人相蓋好」。因著這些緣分,才得以緩慢且踏實的認識鹽埕。因此,希望能以一個特別的方式,讓大家站在埕人眼光,體認在地人的日常或關注議題。
    〖 埕人相.蓋好 〗埕人將拾起陌生的相機,讓觀眾從他們的鏡頭角度窺探他們生活樣貌。這些作品或許平凡無奇,但必定有耀眼之處,期待這個計劃能將這些光芒一一拾起。

    如果有機會遇上這些素人攝影師,也請別忘了告訴他們「埕人相,真正蓋好」。

  • 高雄半屏山|文宣

    分享調查半屏山的成果,而製作一份手卡介紹,讓大家在聽的同時也能將一點資訊帶回家。
    封面的珊瑚礁石灰岩壁是早在開挖水泥前的半屏山山形,翻開能看見半屏山的基本資料,打開後裡面記錄了山上的動植物與小傳說故事,背面則呈現調查時走過的路線。

  • Skate in the sun|Line 貼圖

    Skate in the sun, and skate to my island. @birteliu
    Line Store

  • 植高雄市植物防疫系統平台|網站設計 (未執行)
    前台
    後台
  • 植物品種權公告查詢系統|網站設計 (未執行)
  • 種苗系統|APP 設計
  • 農產品初級加工場|網站設計、切版

    網站預覽: 農產品初級加工場

    操作預覽

  • 新客資訊|網站設計、切版

    網站預覽: 新客資訊

  • 田邊好幫手|網站設計、切版

    網站預覽: 田邊好幫手

    操作預覽

  • 田邊好幫手|APP 設計

    APP: Android / iOS

  • 台灣農產品生產追溯系統|網站設計、切版

    網站預覽: 台灣農產品生產追溯系統

  • 凌誠農業 ERP|網站設計

    網站預覽: 凌誠農業 ERP

  • ERP|APP 改版與功能擴充設計

    歷程介紹: 專案製作說明

  • 智耕雲|網站設計

    網站預覽: 智耕雲

  • 智耕雲|APP 設計

    APP: Android / iOS

  • 智鮮雲|網站設計

    網站預覽: 智鮮雲

  • 智鮮雲|APP

    APP: Android / iOS

  • 一欉|菜單

    菜單

  • 農業易遊網|插圖
  • 凌誠科技 2019|筆記本
  • 永東地政士|品牌形象

    位於永春東一路上名字拿了前後「永」和「東」二字,繼續再將永東二字做字體改造,既能讀出名稱也能代表建築物樣子,為建構出事務所的形象,加上地政士三字又不會使整體造型太複雜,聯想到永東是路名,那就是這條路上的事務所,延伸底下那一條線,表示位於這條路上的建築物正是這間事務所,並在線條做了斜切面營造比較俏皮的感覺,且能分開主要跟次要的重點;外框代表了印章,方形代表不動產用印,也給人穩重的感受

  • Daily UI & The F2E 第二屆精神時光屋
    The F2E 第二屆精神時光屋

    No1.番茄鐘 Pomodoro

    No2.新接龍 Freecell

    No3. MP3 Player


    Daily UI

    #001 - Sign Up 頁面預覽

    #002 Credit Card Checkout

    #003 Landing Page

    #004 Calculator

    #005 App Icon

    #006 User Profile

    #007 Settings

    #008 404 Page

    #009 Music Player

    #010 Social Share

    #011 Flash Message

    #012 E-Commerce Shop

    #013 Direct Messaging

    #014 Countdown Timer

    #015 On/Off Switch

    #016 Pop-Up / Overlay

    #017 Email Receipt

    #018 Analytics Chart

    #019 Leaderboard

  • 光起 Liascent|名片、Logo

    Liascent 為 light 與 ascent 的組合,擷取了 li 作為 Logo 的開端,有著山的模樣,上方的圓形代表 i 上面的圓圈,也代表了太陽升起,而光起正是旭日東昇的意思,剛好是 li + ascent 的綜合形象,並用橘色的太陽與綠色的草坡為主色,希望 Liascent 可以帶來溫暖自然的感覺。

  • 紅娘|名片

    希望能跳脫以往傳統紅娘俗俗的形象,以柔和的粉色和喜鵲創造牽線的紅娘形象

  • The F2E 前端修煉精神時光屋

    參加了高雄前端社群舉辦的 The F2E 前端修煉精神時光屋,完成九週連續挑戰
    一 ~ 六周為自行設計及切版,七 ~ 九週則是拿提供的版型來切


    No.1 To Do List - 連結


    No.2 Filter - 連結


    No.3 Admin - 連結


    No.4 Product Gallery - 連結


    No.5 Comic Viewer - 連結


    No.6 Validation - 連結


    No.7 Canvas Game - 連結


    No.8 Parallax Scrolling - 連結


    No.9 Skill Tree - 連結

  • 十大 QA 特輯|懶人包

    剛接觸 Webduino 的朋友常常有許多疑問卻不知道該如何化解,所以整理了十大最常被問的 Q&A 特輯,希望可以在發問之前先看看這份圖文,自行做初步的問題排除

  • Banner Collection

    雲端平台

    課程公告

    Smart 自走車

    福袋旺旺汪

    空氣偵測

    雲端平台

    智慧音樂盒

    開學季

    講師徵選

    課程公告

    7000 讚

    智慧插座

    智慧植栽

    雲端平台

    自走車

    兒童節

    WEBDUINO 主視覺 Banner

  • Diary|隨手畫一畫
  • 神樂 KAGURA|名片

    從神樂 Logo 下去發想而採用水墨畫的延伸,正面白色:明亮清爽,將重點資訊都擺在正面;背面黑色:想讓人翻過名片後有不一樣的視覺和帥氣感,但是以水墨筆跡串起正反面的連結,因為是資訊相關,所以字體上選擇沒有稜角的形狀,保有科技的直線,但又不與整體風格相互衝突。

  • SMART 自走車|行銷規劃、主視覺、網站規劃撰寫

    Webduino Smart 自走車新商品亮相,以簡單的背景不模糊主要宣傳焦點
    整體以橘色 - 新穎概念為主色製作一系列宣傳視覺
    包含主 Banner、網站設計、網頁撰寫、應用影片拍攝剪輯及產品包裝

    網站預覽: Smart 自走車

  • 農委會 - 機械搬運手臂|插畫、APP 製作

    以四段趣味動畫帶出農夫搬運重物時,一開始的勞累到使用輔具後輕鬆搬運的意象
    App 以最簡單易用的方式規劃、用 Web App 的方式撰寫

    App Download: 搬運採收智慧穿戴式輔具

  • Automation 2017|海報

    Automation 2017
    中山大學 105 年度科技部自動化學門成果發表會

  • BEing² Lab. 仿生工程實驗室|網站

    網頁規劃草圖

    網站首頁預覽: Being² LAB

  • Dr. Smart|視覺規劃、DM、產品包裝

    Dr. Smart 是 Webduino Smart 開發板延伸出的套裝規劃,希望帶給人 Smart 在手、就能遨遊宇宙,發想無限創意的感覺

  • 智慧農業開發系統|介面規劃、Logo 設計

    希望融合科技應用在農業的樣貌,所以採用農田的綠色及科技的深藍結合作為網站主色
    Logo 將網站系統採用的 R 語言與發芽的植物和溫室種植結合

  • WEBDUINO|頁面規劃、撰寫

    將 Webduino 的關於我們頁面改版、並新增認證中心的宣傳頁面,重新設計及撰寫

    網站預覽: 頁面 - 關於我們


    網站預覽: 頁面 - 認證中心

  • WEBDUINO 產品包裝

    WABOT 哇寶機器人

    Webduino Smart 開發板

    Webduino 公仔自走車 - 循跡升級套件

    Webduino 春節限定包裝

    Webduino 智慧插座套件

  • WEBDUINO 企業周邊

    名片

    無論是現在的 Webduino 或是以後的 HyProto,都是希望透過網頁,讓不會寫程式的人們可以一起進入開發的領域,所以用一個瀏覽網頁的模樣當作開始,背景是程式碼的樣子,就像使用者無形中也是在操作這些程式只是方法不一樣而已,也因為有程式碼才有介面的出現,讓他們融合在一起;且因為慶奇科技目前沒有主要的識別,希望在沒有賦予識別的情況下又不是只有字而已,就讓他用打字的樣子呈現,後面再加上_,有點有趣,也是未完待續和無限發展的感覺,下面的網址用超連結符號,增加一點趣味跟共鳴。


    DM

    以往的 Webduino 傳單都沒有智慧城市的概念元素,這次將這個主題帶傳單上,讓人一拿到看到圖案就可以聯想到我們的產品主軸是什麼。


    翻頁式型錄 - 型錄預覽

    以太空創意無限的想法規劃型錄,擁有 Webduino 就能像在宇宙讓你擁有意象不到的創意發生


    活頁式型錄

    因為產品不斷推陳出新,不希望每一次的型錄都是階段性的,所以製作活頁式的,可以將內頁替換增減、並將商品分類為六大主題,不僅攜帶方便,也很靈活。

  • 狗年拜年遊戲

    狗年吉祥話創意小遊戲,要拿紅包之前都要說個吉祥話討吉利,但常常不知道要說什麼或是想講的被別人先講走了
    所以規劃一款狗年吉祥話特輯,只要有一個 Smart 開發板、打開網頁,就可以隨機產生創意有趣的狗年吉祥話了!

    網站: Webduino 來拜年

  • PM2.5 偵測器

    因為 Webduino 出了一款 PM2.5 空氣偵測的套件,在收集資訊時,看到網路上關於空氣指數的資料圖片都很讓人不順眼
    想說不如自己做一款偵測器吧,把空氣指數的顏色換成比較順眼的漸層色,自己用起來也開心,還能攜帶方便,到哪裡都可以測。

    網站: PM2.5 細懸浮微粒偵測

  • RFID 塔羅牌|網站

    在想 RFID 可以有什麼創意應用,想到塔羅牌的形式是讓人抽牌,再解釋其中的含意
    那我將 RFID 的磁卡包裝成塔羅牌的樣子,變成科技塔羅牌應該很好玩
    所以做了這款遊戲,隨機抽一張牌,刷一下 RFID 感應器,就可以知道今天的運勢是什麼啦!

    網站: Webduino Your Future

  • 電子元件|繪製
  • Logo Collection

    峰鈦科技 Fentai Technology

    Liascent 光起國際貿易有限公司

    永東地政士事務所

    智慧農業開發系統

    傳味 | Tran Well

    一個人的圍爐

    小黃叔叔包車 | Uncle Yellow

    HAO HSUAN

    雄伯藝遊

    MAY Tech

  • 意富肉圓|名片

    傳統的小吃攤,以店面原本的招牌顏色為基礎,希望名片可以配合小攤販的外觀整體感,也因為顧客多數為年紀較長的人,所以希望字體能比較大並且清楚明瞭、簡顯易懂。

  • 一個人的圍爐 網站

    A Solo Feast
    一個人的圍爐 - 談書,也談論文學界、思想界的軼聞趣事

    網站: 一人的圍爐 A Solo Feast

  • 一個人的圍爐|書封設計、內頁編排

    一個人的圍爐 A Solo Feast / 馬蘭書庫
    作者希望呈現不過於複雜、又能呈顯一人省思、獨自筆耕的恬靜之時。第一版選用暖色映照人與自我、書籍共圍爐的情景。第二版封面表現人生路途探求的不同際遇,迎頭撞見的事物往往不得而知,唯有緊隨的倒影清晰。

  • 雄伯藝遊

    雄伯藝遊,高雄在地旅遊
    因為常常有外地來的朋友詢問關於高雄有什麼好玩、好吃的地方為啟發,而發想這個旅遊網站,希望可以給來高雄的人們有更貼近在地人生活的旅遊選擇。

    企劃:雅琪
    Logo:豪萱
    UI:郁蓉 豪萱
    Front-end:承澔 芳誠 豪萱 郁蓉

    網站: 雄伯藝遊

  • 一些網站練習

    OCEAN

    Portfolio 2016

    2016 RWD Practice 3

    2016 RWD Practice 2

    2016 RWD Practice 1

  • 印簿玩攝影樣書

    在德國旅居的一年中,透過攝影留下了每個難忘的場景。不論是一場同志遊行、還是充滿笑聲的遊樂園,沖洗後 的影像都成了旅途最棒的註腳。「印簿玩」也將相冊製成樣書,展示給其他對攝影同樣有熱忱的旅人。

    Photography

  • 印象德意志|海報

    應用德語系
    2014 印象德意志 auf Deutsch 全國高中德語盃文藝競賽

  • 蝙蝠 Die Fledermaus | 視覺規劃

    國立高雄第一科技大學
    應用德語系第十四屆畢業公演 [ 蝙蝠 Die Fledermaus ]

    ----

    前導海報
    以 18 世紀維也納貴族神秘舞會為發想,整合戲劇公演團隊討論過後的想法,利用黑色畫面、帶入神秘感和不透露劇情內容的方式來構思海報視覺。

    正式海報
    希望以最直接的方式讓走過、路過看到大掛報的人都能被吸引前來看舞台劇,所以將演員生動的表情直接呈現在畫面上,白底顏色是團隊希望可以對比前導海報的黑色,讓人有一正一邪之感。

    周邊商品
    演員寫真月曆,讓人在看完公演過後的日子,偶爾也能透過翻閱月曆回想起戲中的橋段、與每個人物生動活潑的表情

    徽章

    酷卡

    入場票券

    貼紙

    識別吊牌

    手提袋

    Photos

© Copyright 2018 - Birteliu