Final css Zen Garden site

For my final Zen Garden site, I chose to work in a darker color palate than I normally would. My goal was to create a deep jungle theme without using overtly jungle imagery. I accomplished this by using a dark gray background with rich green accents throughout the page. For the background, there is a hint of foliage.


My site will stand out from the rest by being bold. The layout has a structure which creates an environment that is easy to navigate and access. The visual hierarchy is simple to understand which makes my page have readily accessible usability.

The wide area of the body text makes the mass of information seem less daunting. I chose to widen this area because I noticed in the other designs of this site, the information became very intimidating because of its length.

Hello Zen Garden!!

I am going to work on the CSS Zen Garden site. CSS Zen Garden is a place to practice new and innovative ways to use CSS to enhance an HTML page. To use this site, you first download the plain HTML and without changing it, add custom CSS using the div tags provided and there you go: you are on your way to being a CSS Zen Master.

This is my prospective wireframe for my upcoming CSS Zen Garden project. I want the side bars (in red) to be stationary and have all other information elastic and scrollable.

Working on the Site

I am making progress on my website. I am especially proud of my new portfolio page. I created it for usability and visual appeal.

And now for my intended audience: My goal is to appeal to potential employers in the branding and packaging fields of graphic design. I LOVE packaging and I have been working really hard on creating a portfolio site that is able to allow employers to get both the visual aids and written words to express how great my stuff is and that I love to do it.

Visit my portfolio page now!

Reading Wired "How the Web Wins"

I was reading "How the Web Wins" on the Wired website and found it interesting how they compared apps to the web. I find them not so easy to compare.

I believe that apps can be qualified as both part of the web and different things altogether. As a huge fan of "Angry Birds," "iTunes" and all apps created by Duck Duck Moose (for my son) I do not believe that the raw web is capable of replacing apps on my mobile phone. Apps for children are nice because it is easy to hand my phone to the little person in the back seat on long car trips and let him play without worrying what he is looking at. They are very simple to navigate that even a one and a half year old can do it.

I am very happy that apps are pushing web designers to achieve more in their usability and design. I am excited to see what the future will bring.

"How the Web Wins"

Floating Around

So I am learning now about how things can float. Floating is just a fun way of saying how something is aligning left or right and is gently moving other things out of the way.

First I chose three random images and some dummy text. I went through the motions of aligning two images with their teasers like so:

I was following along the example given in the book but for some reason could not get it to work properly. I double, triple and quadruple checked it so I believe that their is some strange flaw in their coding that I am too novice to figure out. I was not able to keep all text aligned at the 98px border without moving the image using the code from this book.

Here is my code:

I posted an example of this page to my website if you want to check it out.

Fun with Templates

Templates are amazing things. You can make one page, create a template from it and make as many other pages from that template as you want to. You can create your template so that only certain parts of the page will be editable. Anytime you update this template, it will update all the pages created from the template. Wonderful!!

I plan on using this trick for my homework sites from now on (unless an assignment requires something different).

Check out my homework site to see an example (note: it is under severe construction but will give you a rough idea of what I mean).

Creativity Time

I love inspiration. It is always good to see new and refreshing designs. I found a new site that has inspiration for both web design and graphic design. http://designtutorials4u.com. It inspires me to keep working on my website and it inspires me to push myself to be more creative in my packaging projects. This page has been a good vacation from designer's block.

Packaging is my one true love. I could design boxes, bags and bottles all day long.

Mapping the New Site

The beginnings of my website happen here:


This is the preliminary mapping of my future site. This will allow me to accurately code the css to get all the stuff in my site where I want it to go.

Converting Tables to Divs

Converting tables to divs is a lot more difficult than I thought. I was trying to convert this page's tables to divs. It took me hours and hours of staring at this stupid table, brainstorming and browsing online tutorials to find the answer. The problem was that there were too many answers and none that were specific to my problem.

So I made up my own way that looks like this. I made one main div that held two alternating divs and then created a class to turn alternating div rows gray. I am not sure if this is in any way correct but it seemed to work for me. The only problem I have with it is that I can't seem to figure out how to make the dark gray date bars go the length of the content. Any help?

Once again, I posted to: http://adfrink.aisites.com/mm2203/tables%20to%20divs.html

Measuring with the Box Model

I have been studying the Box Model for calculating the space any box will take up on a site. A box in a website is just a container that holds things like the text or images. This means that if you want to put some text on the page, you will have to calculate the area the text will take up, the padding, the border and the margin space. The total area can be best shown by the illustration below:
For example, If my content is a width of 200px, I put 15px padding, a border of 5px and a margin of 5px, my content box will be a total width of 250px (200px wide + 2(15px padding) + 2(5px border) + 2(5px margin).

Creating Elastic Type

As I mentioned in my previous blog, I have been studying elastic text in designing my new website. This is a sample of what I wanted to accomplish using css to optimize the flexibility of my text:
I accomplished this by creating a page with simple HTML and an attached style sheet.
My style sheet specifies what each element of my text should look like.
To see the sample page click this link.

Converting Pantones to RGB

Hello Blog,
This week I have been working on color schemes, Pantone conversions, the box model and playing with type size. It has been a very busy week for me.

First off, I have chosen a color palate for my website in Pantone colors and found what those colors were in the RGB color mode, which is the view mode used by computers. Below you will find my intended color scheme and it is RGB! I chose this color palate to reflect my new-found passion for web design.

Timeline for Website Design Project

This is an eleven week project that I began last week. For Week 1, I began the initial design layout of my new site and did some research on other sites to see what was possible in the world of xHTML and CSS. This is my projected time-line for the following weeks:

Week 2: Create tutorial page and find the answer to the pull-out tabs needed for my site. Create ghost structure for site. Choose colors for design.

Week 3: Begin adding content to site to make separate pages. Test to see all is well and working; links are functional, content viewable.

Week 4: Fine-tune design to meet initial design. Evaluate and revise. Post revisions.

Week 5: Impliment revisions, incorporate any new tools learned in the process and experiment with new ideas.

Week 6: Add portfolio content - Find images. Create thumbnails and optimize. Create large images for viewing and optimize. Use Lightbox to organize images for easy viewing.

Week 7: Continue adding Portfolio content from Week 6 and evaluate to ensure usability.

Week 8: Re evaluate design and functionality. Focus on how to make the site stand out from the crowd. Print pages, make notes, post and work on revisions.

Week 9: Add the finishing touches. Test, revise. Test revise.

Week 10: Make sure all is working and beautiful. If it is not, now is the time to fix it!

Week 11: The Project Is DONE.

New Rough Designs

I have been working on some designs for my new website. So far, here are two of my rough designs:

Here are some of my inspirations:

http://www.loukotka.com/portfolio/maven.php - I like the tab contact navigation on his site. I want to have all my tabs similar to this one with icons on the left side that pull out to expose text.

http://www.shiftedpixels.com.au/ - I like the way this site handles the content. I want to have my content have tabs and slide like this one.

Wordpress doesn't like me much

So this is my new blog. I attempted to create a blog on wordpress.com but they suspended my account. This is where I will be posting my web design projects and such from now on. I just hope that this time I can avoid suspension.