The Design.

The right side of the header with top nav links.

Featured list in the main section below the header.  The list will have 3 key links which will have corresponding images per link.

Left - Right: 
Faculty and Staff, Calendar of Events, and Academic Programs.  
These content boxes are designed for extra links that standout over the rest.  This makes finding this information quick and easy.

This is the home page as a whole. It might be difficult to see, but the background is composed of small diagonal lines to give the site texture.  The logo will probably be tweaked, but I really wanted to have a subtle logo in this design.  The footer is still *in progress* and should be resolved soon.

Now that you have seen the design, what do you think?  Do you think the content will be easy to read / access?  Are the colors accurate and appropriate for this design?  What did you expect? Post your comments I'm really interested in feedback!

Pixel Me This?

Photoshop is the best! Okay so here is another sketch for you to look over.  I cleaned it up to only show main elements such as, header, featured list, boxed content groups, and footer.  Once these main elements are converted to HTML, all of them will be wrapped in 1 div container usually called the wrapper, container, or outer.... As you can see these elements have particular dimensions that illustrate placement and size.  Once I've finished the main concept and once I start writing code, knowing these dimensions help me stay efficient and mindful of the design. I will reveal the design tomorrow afternoon - hopefully when class starts.  Make sure to check back tomorrow and let me know what you think!

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!