Tuesday, August 20, 2013

For the past couple weeks, I've been learning CSS, testing out design ideas and implementing them. Jon Duckett's book, HTML & CSS Design and Build Websites was my primary source of information. To come up with a color scheme I gather images of a variety of potential subjects of this website and then color matched them using Adobe Illustrator. I went with a color palette based on the red-tailed hawk, which is a bird I see every day. Other interesting palette combinations found at Design Seeds were also considered. Additional options were compared options using Color Scheme Designer.  I then made sure my text and backgrounds gave enough contrast using Colour Contrast Check.  Further inspiration came from browsing through Dribbble.  

The initial layout of the webpages used HTML tables because that was how things where set up in the book that I followed when learning PHP. So, the vast majority of my time in implementing CSS was spent replacing the table based format, adding a three column layout, researching design ideas and thinking about how I wanted the site to look. After implementing the main elements of the style, I then spent a good deal of time tweaking and testing out other ideas and making sure things worked as intended. Another thing I had to work on was cleaning up my CSS file. I documented sections and design elements that were new to me and organized the file into major sections. I also spend a good deal of time deleting parts that were no longer needed and then simplified the code a bit by combining areas that called for the same design elements. 

One of the other lessons learned while creating the CSS components is that the names of variables can get quite confusing.  Because on several occasions, I had started to name CSS elements with the exact same names I had given to PHP variables. This is something I'll pay closer attention to when building my next website.

Overall, I'm OK with how it looks. I like that the navigation menus highlight when the mouse hovers over them and is highlighted while visiting that section of the website. There are many things I want to add, like drop down menus and auto-fill search boxes but it seems that it would be best to learn JavaScript and jQuery to do those things.

As far as content goes, I may change course a bit and offer different information from what is already provided.  For now though, I think its important that I learn more code and how to implement design and user interface elements.






No comments:

Post a Comment