Renderize Design - First Look

I have always wanted to really design a website from scratch for myself. That is exactly what I decided to do last weekend. I mapped out a design in my head (and a little on paper) and started to work. In just two days I produced the front page design. I am beyond happy with the results, and before I open the website as my own, it can be seen here.

For those that are interested I’ll give a quick explanation of how I created the end result. It will not be a tutorial on design, but more of a story that leads up to the final product.

If you are familiar with any of my other websites, they all originated from open source designs. The layout was there and I would put my own twist of styles and customizations onto the original design. For my family website I completely translated the strict table design to a more flexible design, then added numerous tweaks and additions. The Powers Farm Market website was another open source design. I made plenty of changes and additions but the overall layout was so excellent that the core design remained for the most part unchanged. To both of these I have placed a full framework with extensive admin privileges each more powerful then the last.

To say the least I was comfortable with designing, but my creative was often lacking. However, inspiration is never far. Websites like CSS Remix, CSS Tux, and the numerous other showcase websites gave me ideas. I knew I had the skills with markup and CSS to reproduce any design I wanted, especially when using a tool as remarkable as Firefox. My biggest fear was creating the graphics to infuse in the design.

I took the plunge, I came up with an idea that challenged me and I worked for hours in photoshop following tutorials and getting myself familiar with the program. Of the final 5 graphics, I made 4 and got help with 2. To say the least I am proud of them. The tab design, although not original, was a huge leap. The CSS/XHTML worked perfectly with the exception of a single flaw in IE that was eventually fixed by adding a single line to the CSS.

With the header and tab menu all set, the rest was just trying out different ideas. I decided to throw in some more new stuff and add sIFR headlines. Essentially, sIFR replaces specified text headlines with flash versions, using any font I wish. It degrades very gracefully, displaying the original text versions if the visitor does not happen to have the required technologies. Therefore I have rich, beautiful fonts that the visitor does not even need to have installed on their computer.

I am in the process of building a framework for the website. I already have the databases setup, most of the templates, and what some would call a small API. I will spend some more time improving the admin interface so that I can customize the website without directly modifying the database tables. For the most part it is coming along nicely. I feel this is my best work yet, I raised the bar for myself and I am going to continue push the barrier and work on implementing even more new features.

I hope you like the design. Feel free to offer advice but be sure to at least leave a comment. Thank you.

This entry was posted on Saturday, April 28th, 2007 and is filed under web. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response or Trackback from your own site.