I have come to a final design for my portfolio site and with the help of the book and some ideas stored in my head I came up with this as a final design:
final site can be viewed here: Final Site
Lets start out with what my "Target Audience" and move on to the thought process behind it. With CSS3 there is endless possibilities on what you can do, but I am a simple folk when it comes to my thing but wanted to still have a "WOW" factor on my website. I believe that keeping a portfolio web site clean helps you showcase your work. This brings me to my Audience. My target audience is set for future employers to see my work. Having a flashy website is cool but not always user friendly. From keeping my design simple and clean an employer should have an easy time navigating through the website being able to check out all my work. Aside from employers my other target audience is the everyday user. Again, just like an employer, the everyday Joe who is either looking for inspiration or even to make a website for him/her self or even their pet, can come navigate and have a grand time looking at what I can do.
So now after explaining the madness behind my thinking lest see how I came up with all this stuff!
How did I come up with this design? It actually started with an old design I put into a drawing... it was one that I did not like, but as I was browsing the internet trying to figure out CSS3 I came across a couple sites that inspired me... the funny part about it is... that I never saved those sites. They where in the back of my mind. Once I saw my drawing again I knew what I wanted to do and started to do it, so the first stem was to look at my old design:
Cool huh?
I did not want to stop there so I drew some more things I learned along the way these last few weeks. I wanted it to be unique and simple at the same time. I want my target audience to be able to navigate with ease and no confusion and be able to view it at any device they might have. I want a potential client or employer to view my site and see that I have a clean layout and well thought out design to gain trust in my work so I started with review:
Chapter 1
If you visited the link you will see that the site uses em's instead of pixels since all devices have different settings to view lettering, this way, no matter the resolution, the browser will show exactly what it should show.
But it didn't stop there. I wanted to add a slide to view all the content but flash will not do the job I need it to do since it is not compatible with all browsers especially with the electronic age so JavaScript and J-Query came in handy. I browsed a lot of sites looking at other people sites and so on and some included these:
http://css-tricks.com/examples/HorzScrolling/
http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/
http://webdesignledger.com/inspiration/40-of-the-best-horizontal-scrolling-websites
These are all great websites but I wanted something bulletproof that will show in all browsers and in all screens and to be able to see the entire content at all times. So I found some of the original scrolling code I went ahead and started to customize it, but before doing that I had to choose my colors. Again, I referred back to some work I did a few weeks ago posted here:
Pantone to RGB
After choosing the colors using Kuler, in my case the two different shades of green, I was able to start.
But how was I going to change this lame looking jQuery I found into the vision of my head? First I thought about the Box Model that I did a while back but how would it help with this design? well quite simple, it actually came in handy making my site flexible. I found that if you set your navigation outside this box that you actually can make it work very well. If you look under my code on the website you will see how it is set.
Now with everything positioned I had to style it. I did a few exercises learning how to do rounded corners in CSS using images but that became a big pain. With CSS3, all you needed was a little code. There was a lot of things you could do with this, including drop shadows, opacity, and much more. Since my site is to be simple, I wanted my graphics minimal. Here are some links to tutorials on CSS3:
http://aext.net/2010/01/10-best-tutorials-to-learn-css3/
http://www.smashingmagazine.com/2009/07/13/css-3-cheat-sheet-pdf/ *A MUST!
http://net.tutsplus.com/tutorials/html-css-techniques/11-classic-css-techniques-made-simple-with-css3/
With that all out of the way, we still need to make sure this is functional and easy to read if the style-sheet is turned of...so for the big test...turn off your style sheet so see how good the site would look like still. Aside from that there must be a print CSS so go ahead and check out the print preview as well!
I must say, after following this book and venturing out to try new things, I have learned a lot and has made me understand the nature of the core of web design and has helped me figure things out a lot faster as well as help me trouble shoot problems.
Cool links I found along the way
http://www.smashingmagazine.com/2010/02/18/50-css-and-javascript-techniques-for-layouts-forms-and-visual-effects/
http://free-css-menu.com/css3-navigation-horizontal.html
http://www.zimbio.com/Tutorials/articles/ZXMfLHJAr1o/35+Awesome+jQuery+Navigation+Enhancing+Plugin
http://www.queness.com/post/256/horizontal-scroll-menu-with-jquery-tutorial
No comments:
Post a Comment