Project 3: Identity
After having my websites so similar for so long, I decided to change it this time. It was good, but I want to make something better. I also want to improve my creativity and productivity since I've always been copying and pasting the theme to all my web pages. I even forgot how to code some of the basic HTMLs. But this time, I am doing everything from scratch! I also learned to use some jQuery recently, so I wanted to incorporate some of that to improve the website as well. This is a website about identity. When I thought about identity, I could not think of anything besides myself. Therefore, I've came to a conclusion that, I am my own identity, not my age, looks, grades, status in society because all of these things change over time. So I have created the whole website around this idea. At the same time, I was brainstorming for this website, I was reading a book called Sophie's World by Jostein Gaarder. A book about the history of philosophy. I was just so on to the Chapter about Hume during this time. And it had two amazing quotes that really supported my idea of what identity is. So I have included these two quotes into my website, which is in the My Thoughts page.
So the first thing I did before anything was to design a logo. I sketched a few in a paper. I chose the one I wanted to use and tried to digitalize it using Photoshop CS6 which I've not used so frequently lately. But before I can draw out the logo on Photoshop, I had to choose a theme color for my website that the logo will also have. I really didn't want to spend too much time choosing colors, so I went Googled "color schemes" and found websites that randomly creates complementary colors for you, which is amazing. I used this website call Coolors.co and the loved the first randomized color schemes and decided to use it. I used these colors to create a logo. It's a huge block with a question mark created by blocks each with a letter inside, that spells out "identity" together. I really liked it, but I just wish I chose a different font because it doesn't fully match my website. Then it was the biggest step of this project for me, and that is the design of the web pages, more specifically where should I place my logo and navigation bar. I spent almost 80% of the time of this project working on just on the navigation bar. At first, I wanted it to be all the way on the top with the logo within the navigation, but I kept messing it up, and it wasn't coming out in the way I wanted. I usually get bored to hell in my English class, because the teacher always just never stop talking of not so important things...so I decided to do something actually useful with my time and I started to draw layouts of my website on a piece of paper. It actually turned out quite well. I created a few very nice designs of how the header, footer, and navigation bar would look like and where the placement should be. I also created layouts of how each page will look like. Then I just chose the best one from there.

I wanted to have a header with a fixed image background and a navigation bar on the bottom of the header that will take more than half the page. I want to make my website very visual, so I chose some of the amazing images that I had to put into the website after editing it to make a blue-ish color to fit the theme of this website. It took so long for my to finally have the header exactly the way I wanted, I had to mess around with the relative, absolute, and fixed position for so long. I was also struggling to make a nice and simple footer that gets the job down, but I simply created a new one to fix the issues I had.
After I finally I got the header and the footer done, I just finished the homepage with an introduction, and those circle image links that I used on the previous project, on the PRO: Pet Supplies Store website, because I really liked it. It sort of originated from my first ever Digital Design project, the website about my "Top 3 Favorite Movies," which is my all-time proudest project in this web design academy, because I create something new, unique, it looks so good, I was so ahead of everyone to have a navigation bar with hovering buttons and it was only my first project... I guess this will be a legacy of mine after I leave...(sad). But this website about Identity is also one of my proudest and best projects that I've ever created. It's been a long time since I've put so much effort into a lab or a project, to be honest. And I really like the way it came out. Also, at the most of the times, I focus solely on the design aspects of the websites that I create. But this time, I not only spend so much time and effort in the design, I actually focused a lot on the content, the things I was writing about too, so I highly suggest everyone to read all of the things I wrote on my website. I then added a fade in effect to the website using jQuery. I made it that the header will show then few elements will also fade in after each other. I also learned a new jQuery method that allowed me to fade in the elements only when the user in scrolling down to the website. So everything will look like it's fading in which I did to all the web pages. And on the "My Identity" page and the "Nature vs. Nurture" page, I made the content to fade in only after the user clicks on the website. Hoping to make my website different and interactive.
Also, each of the web pages is a bit different in terms of their structure, but my favorite is absolutely the "My Thoughts" page. It not only looks the best than the other two. It just has so much content to it. Almost everything I wanted to talk about the most is written in there, that is also why it is so long...but the long paragraphs actually makes the website look more fuller and better.
It was a lot of work but it was really fun. I just hated when a certain student just come by every now and then and say "why are you working so hard" in a way trying to mock me.
Wow, what a such long blog. I've never written so much on a blog, but this is such a huge project for me that there are just so much to talk and write about. If you have read this far, thank you so much! It really means a lot to me. But I don't think anyone would read through all of these anyways...(sad)
Link to this Identity website:
http://techteach.us/WCP2016/HJiahua/Projects/project3/PJ3_mt.html
No comments:
Post a Comment