MDIA 3207 - Assignment 2

This assignment is about being a tour operator, and we were given a couple of inspiration sites.

Here's how I'm (currently) going about laying out this assignment:

  1. Load up Firefox with the'Fireshot' image capture add-on.
  2. Copy a 960 column 'PSD template' to my assignment directory and open it with Photoshop.
  3. With Firefox, search for some inspiration sites.
  4. Use Fireshot to capture the entire page and paste it as a new layer in Photoshop.
  5. Repeat for a few sites (make sure you rename the layer to the URL of the site).
  6. Once done, I may wish to cut up sections of the pages into blocks, each on its own layer.
  7. Create a 'mock' layout using the various blocks.
  8. Hide everything except for my 'mock' layout, and lower it's opacity and set it as the background layer.
  9. Now I start designing my own site in Photoshop loosely based on the 'mock' one.
  10. Of course, my PSD to CSS conversion will make it looser still.
  11. Then there's the Javascript component. Yikes!

 

PSD template:

http://github.com/nathansmith/960-grid-system/blob/568eeac257602df35a920b18eafc8a5bb6e8825d/templates/photoshop/960_grid_12_col.psd

 

Update:

- Playing with Photoshop built-in grid sizes & colour contrast
- Turning off template once I am happy with overall layout
- Printing out pages of the inspiration sites
- Lay out major sections first, then work on detail
- Using Photoshop folders and name them
- Using shape layers drawing mode and not fill pixels and using masks for rounded corners
- www.sxc.hu has a LOT of free stock images and graphics
- I'm developing core HTML/CSS first, then adding Javscript later
- Yikes! Don't forget cross browser testing.  Sure wish there was a Firebug for all browsers.

Update 2:

- Most of the HTML/CSS is done
- The key to most of the Javascript effects are found in the examples,
I'm thinking 6-3, 6-11, 6-5, 6-8  and 8-8 (for a random image on the
main page).
- Using 'mod' or '%' saves some lines of code when going through a slideshow

 

Finished.  I was really happy with how this looked in the end. Sure it could have done with some more polish, but the image management was really cool.

Posted In