Goal/ Concept statement
For this project, my goal is to create a personal web that interacts with the user through design and images. The idea is inspired by Comme des garcons’s official website. When visiting its website, instead of showing the products at the first page, its web begins with images. By clipping the images, it presents its branding concept and general style directly to the users. As a user, I was attracted by such visual method of interactivity, as well as its stylized branding, which eventually inspires me to create my interactive personal website.
In my project, I hope to highlight and transfer such interactive idea. The concept is to create a platform that delivers my style and graphic concept in a diverse and vivid way. The developing process includes four steps: interactive research, theme identification, system setup, and the final website development. Mindmap and diagram were used to help building up ideas and structures.
Diagram detail: Interactive Proposal
-User flow diagram-
– Further idea of development – User flow diagram
-Phase 1: Define-
When building this website, I think it will also be a good idea to present several images I made in the beginning to deliver my style and the graphic concept. Technically talking, I may be able to transfer the skills of creating interactive apps to a web format, but there are surly big differences between them two and I still have many confusions need to be answered
-Phase 2: Shape-
After created a prototype of my interactive Personal Website, the question I had is to find a way both unify my works and present my style in this website. This prototype provides me a idea of how this website would interact with the user. While creating the prototype, my goal is to create a system that can properly present variety of works. I notice that the design and arrangement of the pages are very important for my presentation. In the future, I will add more catalogs into this prototype to bring more dynamic elements.
-Phase 3: Make/ Prototypes-
After creating a prototype to test out my interactive web last week, the result didn’t meet my expectations. My question this week is to make my web interact more with the user. To achieve this goal, I stepped back from my prototype and did research about some successful interactive web.
With research, I found all these web contains some kinds of motion or movement that attract users’ attention and communicate with user vividly. Therefore I thought I might also add some motion elements into my blank prototype to simply make it MOVE!
With further idea developing, my solution settled with a answer to add a motion graphic into my web that be able to transfer the idea of who I am. I have a picture in my mind that maybe I can model a head based on myself, like a 3D cartoon version of me, then make it spinning 360 degree in my homepage. The format I chose to create this 3D head model is Cinema 4D, which is a challenge that I never used it before. I watched many tutorials on how to sculpting and painting in C4D. I am still in the creating process and continuing meet technical difficulties. This image shows my process so far.
-Phase 4: Launch-
In order to add movement onto my interactive web, this week I spent a lot of time to make my head model to SPIN 360 degree in Cinema 4D. As the result this head model finally can spin smoothy as I wished.
With this background developed, my question this week is how to bring everything together to achieve the interactive goal? Even though the goal of this project is to eventually create a prefect prototype to present the interactive idea, I still hope to explore further and build my interactive baby into a final website that users can visit and explore. Therefore this brings to my question: How to build a interactive website?
Without the knowledge of coding, I googled how to build a website without the coding and decided to use Adobe Muse. I started my research by watching tutorials on how to use Adobe Muse to create a website. One website published by the Adobe company is very helpful, it breaks out the process step by step. Link
With times of exploration, I developed a basic website structure that communicate my idea. I grouped them into a home page and two sub-pages, with my projects and resume included. I also add icons that hope to interact with user by directing them into my Facebook, Instagram, E-mail, and WeChat. The change of opacity will appears once the user click the icons. I also adjust the setting to make sure this web fit different size and format. The final presentation is recorded by QuickTime Player.
After I published this web onto the temporary sit provided by Adobe (businesscatalyst.com), the page was showing black white and couldn’t load. I googled and found that situation like this happened a lot when creating web by Muse. Is there any solution to fit it?