Skip to main content

Website Portfolio Update: The Design and Naming It


So for our Professional Portfolio class, we were asked to create a web folio to showcase our projects that relate to the career path we chose. I picked the name kweestin.com (edit on the 17th of March: website is now live) as my domain name. I will explain more in detail why I picked that name below. So the first thing I kept in mind when I create it is, how do I want this portfolio to represent who I am. Does it fit with my career path? So I started with designing the look and structure of it.

I used Figma to design the look of it. Figma is an online platform (like Adobe Illustrator), usually to create presentations or UI/UX designs. The reason people like this platform for web designs is because once we finish designing, we can create them as a prototype. A prototype allows people to try the design to be used as an 'actual website,' where we can press the buttons to be redirected to another page, etc.


This is the home page. The homepage is divided into four main sections. The cover/main background, the portfolio/project area, the short about section, and the footer.
  • The cover background has an 'abstract' picture I created (yes, I create that picture), along with my name in huge, bold letters. Three smaller words, describing who I am as a multimedia designer. And the hand logo on the top right corner. The 'abstract' picture is created from an acrylic-pouring painting and scanned through a scanner with a technique inspired by @revolvingstyle, where he designed posters by moving/dragging cut-out pictures on an open printer scanner. 
  • Then, I decided to put my name front and center because my domain doesn't say my whole name, but instead a nickname. People who are close to me know that "Kweestin" is one of my nicknames and I had been stuck with it for several years. Kweestin is basically my first name (Christine) but is read with a baby-like voice. One of the reasons I like it is that people can't sound angry when saying the name out loud. You can try it yourself if you don't believe me (an actual reason why I didn't use my full name as my domain name is that someone actually bought that domain name before I could and is trying to sell them to other people, and therefore I cannot buy/use them).
  • The hand logo on the top right is my personal identity logo I created several years ago. To read more about why it is a hand, etc., you can check my Behance post. This logo also represents the home button.
Then the second section of the home page is the featured project area. The grey boxes seen are the placeholders for the thumbnails of the chosen projects. 

The third portion is the short 'about' area. It will show a picture of me and some short description of who I am. The image and text you see above are just placeholders.

The last segment of the home page is the 'footer'. The footer consists of buttons that will redirect the audiences to each social platforms I shared. They can connect to me via my Instagram, Behance, LinkedIn or email me.


The second page available for my web folio is the 'detail of the projects' page. It consists of the project's thumbnail (the same thumbnail from the featured projects section). There are two columns for description. The headings of those descriptions vary according to the project, as well as the texts. The four grey boxes are the gallery. Where I attached more images relating to the project. One thing I didn't include on these designs (but available on the live website) is a section above the gallery to showcase the video that relates to the project. 

Apologies for the bad quality picture. I had to resize it to fit this format.

The last available page on the website is the 'about' page. This page gives a lengthier explanation about who I am compared to the short version on the home page. I also provide a button to let people read and download my cv. The footer is also available on this page, to remind visitors that they can contact me if they want to.

Labels

Labels:

Comments

Post a Comment

Popular posts from this blog

TouchDesigner Experiment: Inserting OSC data with OSCIn

From one of my last experiment , I tried to change the data input. Instead of using audio, I replaced it with OSC data from my Muse headset. To connect your OSC device to TouchDesigner, make sure that the IP address and port number is the same so the data transfer can be accurate. In this case, I use a third-party app called Mind Monitor (available on iOS devices) to connect my Muse headset to the TouchDesigner software. Below are screenshots and videos from my experiment. You can see that the brainwave data is already recorded in real-time in the software. Then I used the alpha, beta, and theta brainwave to change the movement of the visuals (the chosen brainwave data I used are just placeholders for now to see the movement). Then the data is connected with 'noise', which is like the fluid/abstract visuals you see on the background. I also set the colors to be moving/changing over time.
Post a Comment
Read more

TouchDesigner Experiment: Audio Reactive Particle Cloud

My second experiment with TouchDesigner is creating this audio-reactive particle visual by following Bileam Tschepe 's tutorial on Youtube. Again, I just followed his tutorial step by step. This tutorial is a little different because it uses both audio and visuals. The visual follows the music in real-time. Other than audio, we are also introduced with the element 'Math' to add the channels of the audio together. This is the end product. Music is FriendsV2 by Muskatt.
Post a Comment
Read more

Arduino Experiments (pt. 1)

Earlier this week, I bought my first Arduino Kit . Since this is week 6 of term, our lecturer has asked us to display an experiment by week 7. It could be any type of experiment, and it doesn't even have to be related to our project. The reason why I picked to try on Arduino is that I think it's the closest medium I'll be using for my actual work. But I was kind of worried about this, mainly it is because I've never used or tried it before. I've only heard about it but never actually played around with it. So this is the kit I bought. It costs SGD 70 at one of the shops in Sim Lim Tower. It contains a lot of items to try out experiments. It also includes several tutorial cards that can be successfully running with the items provided in the kit. For more detailed tutorials and the codes of each project, we are asked to go to their website and search for the complete step by step tutorials. Thus far, I have tried several projects, and for ...
Post a Comment
Read more