New Site is Up!
I’ve been wanting to make a personal website for quite some time now! Finally, it’s up and published on the World Wide Web! As you may or may not know, I tend to make myself quite busy, and it’s often difficult for me to find time to work on personal projects such as this. I have been busy with my full time teaching job at Wilmot Union High School, teaching and maintaining that website and getting it through a face lift and hosting move. Trav-A-Ling Tunes keeps me busy as a mobile DJ, and of course that website has been a top priority. Mix in a graduate program and the website for Gia’s Salon…and you’ve got a list of some of what has kept me busy lately!
Enough of the busy excuses and onto the beef of this post! First off, I could not have made this new site without the help of some great people! I started learning how to web design by teaching myself HTML and using Frontpage back in circa 1999. Some time in the early 2000s, my friend Nick Galich helped me learn to use Dreamweaver (at that time it was Macromedia Dreamweaver). he taught me CSS basics and I was still using tables to form my layouts.
Throughout college I continued to make websites using Dreamweaver, basic CSS, and HTML. I was always struggling with the strategy of using tables as the ground work for the whole layout. I wasn’t able to really get elements on the page where I wanted them. Then comes along this idea of using Photoshop to create a mockup!
And in comes Josh Betz. Josh was a senior at Wilmot when I first got hired as the new technology teacher and webmaster. I was very interested in this new way of designing for the web (new to me at least). He created a new design for the school’s website, and I learned a lot from him as the site transitioned to the new look. I used www.travalingtunes.com, and Josh’s help, to experiment with creating a site using this Photoshop mockup way of designing.
Then I started working on this project. I started with a design I called Argyle (you’ll see why if you look here). To make a long story short, I stopped because I thought the design was too busy and started to look hideous! I wanted a very basic, clean, and easy-to-read appearance. I think I have achieved that. Let me know what you think by leaving a comment.
I also added another challenge. Not only was I still learning the basics of using CSS to convert a Photoshop mockup, but I also wanted to learn how to make it a WordPress theme. Again, I owe much thanks to Josh for helping me learn how to do this. In addition to the great teaching of Josh, I spent many hours watching, reading, and re-watching screencasts and posts by web designer, and now author, Chris Coyier, of CSS-Tricks. His screencasts were very helpful and his website has a lot to offer for beginners and intermediates. He makes it all look too easy in the videos, but that’s where the benefit of rewinding came in!
I really love the idea of taking a Photoshop design and converting it into HTML using CSS because it really allows the designer to put the design in the front spotlight. The layout and look of the site is the what a designer is really trying to achieve and I think creating that design in Photoshop first is the way to go. Then- just about anything can be achieved using CSS, HTML, and JQuery to get the mockup to come alive. I definitely don’t know everything about web design and never will, but it sure helps to have great resources! And that’s also the beauty of it- there’s always more to learn and challenges to take on.
I wrote this post to explain how I got this website from an idea to published. I especially want to express my gratitude and acknowledge those that were of incredible help. Thank you again to Josh Betz and Chris Coyier for sharing their invaluable knowledge. I should probably also mention Pat Hartl for his help too, or he might do something bad to my mac lab! Pat helped me get the Twitter statuses on my site, but mostly, he helped me get the site done by uplifing my motivation to make time to get it done!
Applications I used & love:
- Firbug (Firefox Plugin)
- Photoshop CS4