如今，隨著技術、工具的進步，網站的開發的趨勢漸漸走向零程式碼的目標，尤其是在需要結合設計的產業中，創意已經遠遠重要於純技術能力。而當每個人都可以簡易架設自己的網站，如何用UI與UX的設計創造網站特色加強用戶體驗就成為了網站設計重要的議題。而現今網站架設的趨勢為：用技術簡單的模板來架設，但其編輯幅度小且網站類型受特定的模板給框架(尤其是免費又好看的模板人人都想用)，這導致此類網站缺少獨特性，且用戶體驗不佳；開發功能強大的瀏覽器以使設計人員獲得最大的彈性是增強用戶體驗的趨勢，但一篇Medium文章中提到「大多數網站使瀏覽器看起來像垃圾軟體」，而網站設計的突出則成為了提升用戶體驗的重點；這時有了新的機會: P5.js視覺化函式庫，提供了一種減少複雜程式語言的負擔下增強UI/UX設計的工具給設計師、藝術家、教育家、程式的初學者等等。
本研究的目的是網站架設平台上使用新視覺化函式P5.js，藉由平衡兩種科技後產出的新網站設計效果，來討論其在網站設計中創造的新特色和表現方式，以滿足網站新的用戶經驗和網站的獨特性。本研究的方法: 用案例研究增進作者的設計手法、實作P5.js在網站架設平台上的應用，並用以下方法對實作成果進行分析: 半結構式訪談來發掘作者可能忽略的問題點與機會、問卷調查得到了有利的證據支撐本研究的目標以及收集作者的反思討論作者的經驗以及心得以回饋給更多未來的應用。
本研究成果將貢獻出新的體驗，並為UI /UX 的發展提供新的可能性，既滿足了在趨勢上網站架設平台模板的內容得到了更多的詮釋，加強其獨特性，也加深了用戶的體驗，而這樣的成果不只能夠增進網站擁有者的利益，在增強了網站擁有者與用戶間的溝通橋梁後也能進一步推動網路社區的繁盛與多元。
本研究的成果預期會對網路開發領域和使用者介面與經驗提出貢獻使其走向新的用戶體驗，進而影響科技與設計領域未來更多的發展與合作。

In the past decades, code-free has been the trend of website development and many other industries. In the industries that incorporate design and technology, creativities are now more important than technical abilities. When everyone can easily create their own website, how to design UI (User Interface) and UX (User Experience) well to improve users’ overall experience has become an essential part of website design. However, the trend of building a website is using website builder templates which make many websites look alike. Their flexibility of design is low, and the website style is subject to specific templates (especially when everyone is attracted to the same free and good-looking templates). In the UX community, developing a powerful browser to maximize the flexibility for the designer is a growing tendency for enhancing the user experience. Also, the lack of uniqueness leads to a poor user experience. It was mentioned in an article on Medium that "Most websites make the browser look like junk software." Currently, there is a new opportunity: the P5.js library provides a tool for enhancing UI / UX design which reduces complex programming processes for designers, artists, designers, educators, and beginners.
The purpose of this research is to use the new visual library P5.js on the website builder and evaluate the features and expressions created in using new effects. The methods of this research included: case studies which can enrich the design inspiration, workshops to collect the implicit feeling from the creators, projects of using P5.js on a website builder to help us start the exploration of new possibilities, and analysis of the project results using the following methods: semi-structured interviews to discover the more detailed problems the authors might omit, questionnaires to get solid evidence of the result and collect the reflections of authors to discuss the experience during projects.
The results of this research will contribute to a new user experience. It provides new possibilities for the development of UI / UX, which strengthens the uniqueness and users' experience of the website builder template. Such results can not only enhance the interests of website owners but also promote the online community by enhancing the communication between the website owner and their visitors. Therefore, the contributions of this research will focus on providing new possibilities for UI / UX development and satisfying the trend of strengthening uniqueness and enhancing user experience to promote the prosperity and diversity of the online community.

46 Fish Website. Retrieved Nov. 26, 2020 from: http://www.46fish.com/ (2019).

Arslan, E. (2018). Learn JavaScript with p5.js : coding for visual learners: Apress.

Attride-Stirling, J. (2001). Thematic networks: an analytic tool for qualitative research. Qualitative research, 1(3), 385-405.

Backslash Website. (2019) Retrieved Nov. 26, 2020 from: https://2019.backslashfestival.com/.

Baglione, L. A. (2018). Writing a research paper in political science: A practical guide to inquiry, structure, and methods: Cq Press.

Bohnacker, H., Gross, B., Laub, J., & Lazzeroni, C. (2012). Generative design : visualize, program, and create with processing: Princeton Architectural Press.

Bolshakov, Petrov, T. B., & D., A. (2007). Drag and drop display & builder. Retrieved Nov. 12, 2020 from: http://er.lib.ncku.edu.tw:2048/login?url=http://search.ebscohost.com/login.aspx?direct=true&db=edsstc&AN=edsstc.923520&lang=zh-tw&site=eds-live.

Bolton, G. (2010). Reflective Practice: Writing and Professional Development: SAGE.

Bradbury, D. (2008). Hands-off business a reality [Press release]. Retrieved Nov. 12, 2020 from: http://www.financialpost.com/small_business/story.html?id=459943

Breslin, M., & Buchanan, R. (2008). On the case study method of research and teaching in design. Design Issues, 24(1), 36-40.

Budd, A., & Bjorklund, E. (2016). CSS mastery (Third edition. ed.): Apress.

Burge, S. (2014). Can You Trust BuiltWith, W3Techs and Software Usage Statistics? Retrieved Nov. 13, 2020 from: https://www.ostraining.com/blog/general/software-usage-statistics/

Candy, L. (2006). Practice based research: A guide. CCS Report, 1, 1-19.

Casalena, A. (2003). squarespace.com. About us. Retrieved Nov. 17, 2020 from: https://www.squarespace.com/about/company

Check, J., & Schutt, R. K. (2011). Research methods in education: Sage Publications.

Chen, J. (2016). Why design principles shape stronger products. Retrieved Nov. 26, 2020 from: https://uxdesign.cc/why-design-principles-shape-stronger-products-ae677bdd831b

Chen, T. (2011). 窮人 HCI 設計入門. Retrieved Nov. 20, 2020 from: http://teddy-chen-tw.blogspot.com/2011/02/hci.html

Consortium, W. W. W. (1999). HTML 4.01 specification.

Craig, W. The Evolution of Web Design. Retrieved Nov. 20, 2020 from: https://www.webfx.com/blog/web-design/the-evolution-of-web-design/

definitions. (Ed.). definitions.net.

drupal.org. (2000-2019). Retrieved Nov. 6, 2020 from: https://www.drupal.org/project/drupal/releases?api_version%5B%5D=7234

Fal-works Website (2019). Retrieved Nov. 26, 2020 from: https://www.fal-works.com/

Farkas, D. K., & Farkas, J. B. (2001). Principles of web design: Longman Publishing Group.

Finlay, L. (2008). Reflecting on reflective practice. PBPL paper, 52, 1-27.

Flanagan, D. (2006). JavaScript: the definitive guide: " O'Reilly Media, Inc.".

Gemert, V. v. (2013). How Much Has The Web Really Changed? Retrieved Nov. 26, 2020 from: https://www.smashingmagazine.com/2013/05/new-defaults-web-design/

Ghaye, T. (2000). Into the reflective mode: bridging the stagnant moat. Reflective Practice, 1(1), 5-9.

Goodman, D. (2007). JavaScript bible: John Wiley & Sons.

Hall, C., Richmond, M., & Hall, G. (2015). Use of an Online Website Builder Tool for Providing Aggregate Research Results to Study Participants. Nursing Informatics Today, 30(2), 14-17. Retrieved Nov. 3, 2020 from: http://er.lib.ncku.edu.tw:2048/login?url=http://search.ebscohost.com/login.aspx?direct=true&db=ccm&AN=109411864&lang=zh-tw&site=eds-live.

Hanington, B., & Martin, B. (2012). Universal methods of design: 100 ways to research complex problems, develop innovative ideas, and design effective solutions: Rockport Publishers.

Hogan, B. P. (2011). HTML5 and CSS3: develop with tomorrow's standards today: Pragmatic Bookshelf.

IEEE. (2018). WordPress: A Content Management System to Democratize Publishing. IEEE Software, Software, IEEE, IEEE Softw.(3), 89. Retrieved Nov. 26, 2020 from: http://er.lib.ncku.edu.tw:2048/login?url=http://search.ebscohost.com/login.aspx?direct=true&db=edseee&AN=edseee.8354434&lang=zh-tw&site=eds-live. doi:10.1109/MS.2018.2141016

Keating, S. (2017). The Problem with Generic Website Builders — and Why Custom Websites are Worth It. Retrieved Nov. 26, 2020 from: https://dispatch.moonfarmer.com/the-problem-with-generic-website-builders-and-why-custom-websites-are-worth-it-785186bde197

Kilbane, D. (2004). Tim Berners-Lee: The Internet's creator looks to the next evolution. Electronic Design, 52(20), 90. Retrieved Nov. 15, 2020 from: http://er.lib.ncku.edu.tw:2048/login?url=http://search.ebscohost.com/login.aspx?direct=true&db=edselc&AN=edselc.2-52.0-4944260356&lang=zh-tw&site=eds-live.

Loughran, J. (2000). Effective reflective practice, a paper presented at making a difference through reflective practices: Values and actions conference. University College of Worcester.

Merriam, S. B., & Tisdell, E. J. (2015). Qualitative research: A guide to design and implementation: John Wiley & Sons.

Ponto, J. (2015). Understanding and Evaluating Survey Research. Journal of the advanced practitioner in oncology, 6(2), 168-171. Retrieved Nov. 26, 2020 from: https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4601897/.

processingfoundation.org. (2001). Board of Directors. In (Vol. 2019). processingfoundation.org.

Raggett, D. (1997). HTML 3.2 reference specification. World Wide Web Journal, 2(1), 29-73.

Raggett, D., Alexander, I., & Lam, J. (1996). Html 3.

Rocheleau, J. (2013). How To Balance your Skills Between Design and Code. Retrieved from https://webdesignviews.com/balance-your-skills-between-design-and-code/

rokr. (2019). 27 Best Website Builders For Designers 2019. Retrieved Nov. 15, 2020 from: https://colorlib.com/wp/website-builders-for-designers/

Sandberg, E. (2019). Creative Coding on the Web in p5. js: A Library Where JavaScript Meets Processing. In.

Siegel, D. (1997). Creating Killer Web Sites: The Art of Third-generation Site Design: Hayden Books.

Singleton Jr, R., Straits, B. C., Straits, M. M., & McAllister, R. J. (1988). Approaches to social research: Oxford University Press.

Smith, H. (2009). Practice-led research, research-led practice in the creative arts: Edinburgh University Press.

Spacey, J. (2018). 35 exmples of user needs. Retrieved Nov. 10, 2020 from: https://simplicable.com/new/user-needs

Sridhar, J. (2017). What Is JavaScript and How Does It Work? Retrieved from https://www.makeuseof.com/tag/what-is-javascript/

Steele, H. (2018). THE EVOLUTION OF WEBSITE BUILDERS. Retrieved Nov. 26, 2020 from: https://imcreator.com/blog/evolution-website-builders/

Thorlacius, L. (2007). The role of aesthetics in web design. Nordicom Review, 28(1), 63-76.

Tidwell, J. (1997). A pattern language for human-computer interface design. Available via DIALOG.

W3TECHS. (2019). W3TECHS.

Whitfield, H. (2019). Building Websites. Retrieved Nov. 26, 2020 from: https://www.websitebuilderexpert.com/building-websites/

Wuensch, K. L. (2005). What is a likert scale? and how do you pronounce'likert?'. East Carolina University, 4.

Yin, R. K. (2012). Case study methods.

李宜瑾. (2017). 紙, 單元, 空間 : 由折紙工藝出發的自立模組結構的研究. 國立成功大學, Available from Airiti AiritiLibrary database. (2017年)

Robert Rubinoff, (2004) How To Quantify The User Experience. Retrieved Nov. 6, 2020 from: https://www.sitepoint.com/quantify-user-experience/

Jake Rocheleau, (2013) How To Balance your Skills Between Design and Code Retrieved Nov. 26, 2020 from: https://webdesignviews.com/balance-your-skills-between-design-and-code/

henry. (2016) MOTION 101-1 動態視覺設計到底是？Retrieved Nov. 20, 2020 from:http://animapp.tw/blog/insight/65-ideas/1914-henry-motion-101-1.html

Kyle Ashby. (2016) My Process with Motion Graphics. Retrieved Nov. 20, 2020 from: https://medium.com/@kashby/my-process-with-motion-graphics-2fe7785e4a0

Killer Visual Strategies. (2020) MOTION GRAPHICS: A COMPLETE GUIDE FOR MARKETERS & BRAND LEADERS Retrieved Nov. 6, 2020 from: https://killervisualstrategies.com/motion-graphics-video-guide-marketers-brand-leaders

Academic Phrasebank. (2020) Retrieved from http://www.phrasebank.manchester.ac.uk/reporting-results/

WEBSITE INSPIRATION. Best Event Website Design Ideas and Inspirations. Retrieved Nov. 26, 2020 from: https://www.webdesign-inspiration.com/web-designs/type/event

Blockstudio. (2020)動態特效網站規則 SOP. Retrieved Nov. 22, 2021 from: https://blockstudio.tw/blog/web-animation-sop/

Monoame Design. (2020) Retrieved Nov. 20, 2021 from: https://monoame.com/works

Niccolò Miranda and Clément Roche. (2019) How to Create Motion Hover Effects with Image Distortions using Three.js. Retrieved Nov. 3, 2020 from: https://tympanus.net/codrops/2019/10/21/how-to-create-motion-hover-effects-with-image-distortions-using-three-js/

Étienne Jacob. (2016) Grid Distortion. Retrieved Nov. 15, 2020 from: https://bleuje.github.io/p5js-myprojects/index.html

Hartmut Bohnacker; Benedikt Gross; Julia Laub; Claudius Lazzeroni (EDT) (2012) Generative Design.

Themis Garcia. (2019) Pixels 1:1 — Sequins mirror. Retrieved Nov. 20, 2020 from: https://medium.com/computational-media/pixels-1-1-sequins-mirror-1fed0e3b1973