Process Page

Oh what a process it was to finish my css Zen Garden Page.  I originally wanted it to look like an old Atari 2600 box such as this:

but it just wasn't feasible/readable/visually pleasing so I went a different route.  I still went with an old Atari theme, but used a Space Invaders sprite I found and designed a banner to go with it.

I used a bunch off css3 tricks such as drop shadow and text shadows so I couldn't submit it to csszengarden, but it looks cool.

The biggest challenge was not messing with the html code and making new divs to make positioning and formating easier. Many headaches were caused by trying to get it to look presentable on all browsers, but such is the nature of web design... The biggest lesson I've taken away from this experience is not to wait until the weekend before a project is due to troubleshoot it.

css Zen Garden Wire frame

For our final assignment we must redesign css Zen Garden using only css2 (no css3, bummer). I plan on modeling my redesign after the cover art for old atari games. At this stage I have wireframed out each section of the page in different colors to know what I'm working with. Here's a screen shot of the wireframe.

Week Five Homework

Here is a link to the homework for week 5.  I followed the instructions found in chapters 5 and 6 to make a very basic page. I also tried to use css3 to give one of the containers rounded corners, but it appears not to be working in any browser I try and dreamweaver is not showing rounded corners either. I don't know if I'm missing something, but every tutorial I read online said the same thing and I followed them. Oh well, I'll keep trying css3 tricks on future projects I guess...

Week Four homework (A week late...)

Here is my homework for last week. Sorry its late, but all the festivities of Halloween and The World Series win made it difficult to get this completed.  The floats are a little off, but I really don't feel like troubleshooting anymore at the moment.

Positioning. Absolute, Fixed, and Relative.

When you're positioning your divs in css you have to decide whether you want them to static/fixed or bulletproof and scalable (i.e. floats).  It's always best to err on the side of scalable/relative positioning, but what if you don't know the difference? Well I'm here to tell you.

An absolute position, is also a fixed position. Meaning the div is in one set position on the page. It won't move from that spot. Problems arise when an absolute div is being displayed on different browsers (every browser displays a page a little differently) or when it's viewed on a different screen, such as a mobile device. That's why relative positioning is the way to go.

Relative Positioning means a div is positioned relative to what is around it, thus making it scalable and making it play nice with other content on the page and on different browsers and screens.

Inspiration? Can I get some of that?

Inspiration comes from everywhere (duh) but it's really hard to call on it when you need it, say like a deadline; but there are some ways you can better prepare for those crazy creative blocks or deadlines.

First of all, look around.  You can find inspiration anywhere. I recently found inspiration for a site design/color scheme from glancing at a pack of Parliament Lights.

Which brings me to my next tip, research/search. The pack of smokes was just the catalyst. I didn't get really inspired until I Googled images to get the color scheme right and in doing so, found a wealth of packaging examples and ads from decades past that I've made mental notes of and gave me little ideas for future projects.


USE RESOURCES TO GET IDEAS. You're obviously reading this, you have the entire Internet at your fingertips, use it. Google is there for ideas. Another great site that I visit quite frequently to get ideas and to see what other web designers are doing is Smashing Magazine. Smashing is a GREAT resource for everything web design. If you aren't already reading it, you should be. Go now! Click that link!

It also helps to take notes, mental or otherwise, of things that inspire you. For example, I know I like the color scheme and design/motifs of old cars and guitars from the 50's and 60's but I've yet had a project that I can use those bits of inspiration, but you best believe I've got those ideas stored in the back of my mind when I do need them.

So to recap, Look around, research/use resources, and take notes of ideas to help in the creative process. Now good luck! Go be inspired! 

Week Three Homework

The homework this week was to take an old version of the class syllabus and recode it using inline css. I did what I could, with the short time I worked on it tonight and it doesn't look all that great but I will definitely refine this assignment later on when I have the chance between other assignments. What I have so far can be viewed here.
Again, I am by no means pleased with this work so far, I'm just turning in what I have on time to get the credit, I still believe I can do better and fix what may be wrong with the code later.

The CSS Box Model.

So you want to do some design in css, but you don't know how to place your content in a way that it is accessible and scalable, well that's where The Box Model comes in. 
The Box Model sets the perimeters of the container which will be holding your information/content. The three parts of the container that you can manipulate are the Margin, Border, and Padding.  All of these elements together make up the total size of the container.
An easy formula to remember when formulating the total size of a container is this:

Here is an example of what the code for the box model would look like.

I hope this tutorial/explanation was helpful and good luck on further css adventures!

Week Two Homework Part Two

Below are pantone color schemes for my proposed site design.

1.  White, light blue and dark blue to resemble a box of Parliaments.

2. Red and white to reflect a box of Lucky Strikes.

3. A color scheme for the other design I drew up last week. Using a type of green and it's opposite, orange, with a dark gray background.

Now looking at the colors, I may use the parliament color scheme in either design because the colors work so well together...

Week Two Homework Part One

Here is the css for Bulletproof Web Design chapter 1. Creating scalable text using ems.

Projected Schedule For This Quarter

Mondays: Allow time for work at The Gap, if scheduled. At least 2-4 hrs for finishing up homework for Intro to Web Design the next day and homework for classes on Wednesdays. Try to get at least 6 hrs of sleep.

Tuesdays: Intro to web 8 AM-12 PM. At least 2-4 hrs to finish up homework for classes on Wednesday. Try to get at least 6 hrs of sleep.

Wednesdays: Fundamentals of Audio 1 PM-5 PM, Fundamentals of Video 6 PM-10 Pm. Take it easy after class, Try to get at least 6hrs of sleep.

Thursdays: Allow time for work at the The Gap, if Scheduled. At least 2-4 hrs for Motion Graphics homework. Try to get at least 6 hrs of sleep.

Fridays: Motion Graphics 8 AM-12 PM. Relax a bit. Start working on homework for next weeks classes. Maybe go out with friends if time allows. Sleep.

Saturdays: Allow time for work at The Gap, if scheduled. Anywhere from 2-6 hrs working on next weeks homework. Hang out with friends as time allows. Sleep.

Sundays: Allow time for work at The Gap, if scheduled. Anywhere from 2-6 hrs working on next weeks homework. Hang out with friends as time allows. Sleep.

Week One Homework.

Here are the sketches for the homework site we will be building in MM2203 (Intro to Web Design) this quarter.  They were sketched in pencil and blocked out on the computer. Hopefully you can get a good idea of what I was going for.

The idea I was going with for this one is a nice glossy/dark blog type design that are popular these days, but with my own feel to it of course. I'm not quite sure what color scheme I would use on this yet, I do know I want to use some sort of green somewhere, as stereotypical "web 2.0" as that may sound, but I think I can make something really snappy out of what I have in my head.

 This is the one I'd really like to make, if I could pull it off with the skill set I have now.  I was inspired by a pack of cigarettes and thought it would be cool to have a nav bar that mimicked the look of cigarettes being pulled from their box.  The color scheme would be blue and white to mimic a box of Parliaments, or their knock offs(I forgot what they're called).

First Blog Post!!!

I was planning on building a blog on my personal page iansayre.com, but WordPress and MySQL is some confusing stuff to tackle with no prior experience. So for the time being, this will serve as my blog until I can build a proper blog and then transfer everything to that.

What can you expect from a blog made by yours truly?  Well for starters, I will be posting the progress being made in my classes at the Art Institute of California-San Francisco, where I'm studying Web Design.  I'll also post my (well thought out/researched) thoughts on the latest tech, movie, and comic book news that I come across.

If any of those topics sound interesting to you, by all means, please bookmark this page or check it at your leisure and see what's new.

Thanks for stopping by. I hope to see you in the comment section.