Thumbnails to Photoshop!

Hopefully by tonight I will have a brief blog about the process of designing the sketched website in photoshop.  There are always changes in this process because of how the website needs to function once its in HTML form.  Check back after the break!

Yes, this was an unusually long break, but I have some great information to show you guys.  The sketches showed a basic overview of how I think the website ought to look and function.  This evening I will post another sketch, this version is much cleaner, and makes the photoshop process much easier.  The sketch paper that I used was from a website called www.960.gs.  960.gs is a website devoted to teaching developers and designers how to layout a grid based website.  I won't dive into grid based design too much, because I'm still very new to it as well, but the main idea behind it is genius.  Check out the website for more information about. 960.gs has a download available for free, which includes these wonderful grid sketch sheets. These are great for designing user interfaces and other web based applications.

As you can see the design is pretty much the same from the first set of sketch, yet noticeably cleaner.  You may notice the numbers flanking the image - this represents the padding or margins I will use for the final version.  It is important to keep the padding or margins equal; this way the content becomes organized on the page.

Once i've sketched out half a dozen or so thumbnails, i'll fire up Adobe Photoshop to start the main theme.
To summarize what I usually do before Photoshop.

• document size (960px wide is based on the 960 grid system.)
• structured layout (overall layout - sketches)
• grouped layers

Next, i'll structure my layers into groups like the image below.  Designing with layered groups makes life 100x easier.  Being able to move elements together as a whole, hide elements, and modify just that group makes the process that much smoother.  This structure will eventually grow and look overly complicated, however, this method creates a perfect workflow for webdesign.  

I will be posting another sketch tomorrow with dimensions of the main elements in the design.  This is a major step when designing so don't miss it!  I will add to this create a new post - so make sure you subscribe or follow!