Designing Web Sites from Photoshop to Dreamweaver

This tutorial included a bunch of different websites that are useful for graphic and web design . One is www.mioplanet.com/product/pixelruler for easy measuring.

In the tutorial, Sue Jenkins creates an interface in Photoshop. It was kind of the same concept as the other interface tutorial. She adds a lot more content though. It was really cool to watch her put everything together. She used the guides on Photoshop, which made it much easier to use the slice tool. She also talks about how to optimize web graphics, and the difference between saving things as a gif, jpeg or png. I learned what a favicon is and how to make one in Photoshop as a 16x16 graphic.

She opened a blank page in Dreamweaver to start.

Interface: Round Two

I decided to remake the interface using the tutorial and opened it in Dreamweaver. This is what happened when I preview it in Firefox.

Spry Menu Bar

I created a spry menu bar instead of using the links from the template. It was really easy to do, especially from watching the tutorial a few posts ago. I deleted the logo section of the page so that the links are now right under the header. I still have to figure out how to center them. Then I just deleted the links codes from the template as well. I removed the sub-menus for now, but I can always add them again later. I like the look of the spry menu bar much more than the sidebar links. I still might make a custom nav bar or spry menu bar if I can figure out how to do it.

Photoshop Interface

I went and did the interface tutorial for Photoshop. I'm not going to repost it since I already made it last Spring. I'm now working on create my own interface that I'm going to use for my own website. Images will be posted soon.


Top of interface:

I'm working with a template in Dreamweaver. I put the image from above as my header and I'm not sure yet if I want to use the header by itself or make a complete interface. I want to create a nav bar and make the links horizontal but it isn't work out so well. I can't find a decent tutorial that explains how to do this.

Interaction Design Fundamentals

This tutorial isn't directly related to Dreamweaver, but applies to Graphic and Web Design in general. Interaction design covers a variety of different fields and jobs. People from different fields often collaborate for interactive design projects. Designs are created to meet the needs to people.

Design Interaction Process:
1. Define the project
2. Research: ideas, prototypes
3. Ideate: create possible solutions and choose best idea
4. Design and Prototype
5. Iterate: have people view and evolve design, usability

Essential Principles: important for creating successful designs
Consistency

Perceivability

Learnability

Predictability

Feedback 

Having a good navigation system on your website is also important, so people can easily find what they are looking for. Taxonomy is a good way to keep links organized. Sitemaps are also helpful.