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.

Typography with CSS in Dreamweaver: Part 2

Drop shadow effects:

A new property is added by using the 'text-shadow' and then the following four values are put in: an x offset, a y offset, the blur radius and the color.

The second half of the tutorial was a little bit over my head. The topics were: Using Advanced CSS Text Effects, Structuring CSS Text and Defining Lists with HTML and CSS. Seeing how to make the different text effects was interesting and informative but I think it would take some practice to get them right. In the Structuring CSS Text part, the narrator showed how to make a CSS3 multiple column layout. There was a lot of steps involved, but it was nice to see how it was done. Overall, I like these tutorials so far. I don't think I use would everything that they explain but I am enjoying learning more about CSS.

Typography with CSS in Dreamweaver: Part 1

When you make your text bold, it creates a <strong> tag, and when you make it italicized, it creates an <em> tag under the HTML properties. Under the CSS properties, you can change what these tags are supposed to look like.

After switching from HTML to CSS, you are now able to edit or create new rules for your text. 

I also learned a few different ways to change the color of text and how to make semi-transparent text.

Under properties, the man in the tutorial writes rgba(255,255,255

255 is the value for each of the color channels, followed by the alpha transparency level, which is between 0 and 1. The value .5 is used.

How make make drop caps (when the first letter of a paragraph is capitalized and the rest of the text flows around it).

First you need to create a new CSS rule. The narrator says to hit 'Less Specific' and then type in first letter to make the drop cap.

Creating a First Web Site with Dreamweaver CS5

I thought this tutorial would be a good refresher to get back into Dreamweaver. I re-discovered the Page Properties, which I always forget to use. This keep the different font types/colors consistent throughout the web page. The text can also be edited through the CSS Styles panel on the right side of Dreamweaver. Fonts can also be changed by adding a new rule under Rules in the CSS panel. Live view is helpful for seeing how your links will look. I also learned how to use and edit pre-made layouts. I learned how to make and edit a spry menu bar. Overall, the tutorial was a good refresher and I learned some tips and tricks for when I'm ready to start building my website.