CLICK HERE.  Have you seen this as a button for websites. Is this descriptive enough? What is wrong with this method?  For the most part it lacks originality and just seems like the designer gave up on a linking strategy.  Let’s take a look at some of the strategies that will equip you to design and code with usability in mind.  This post will cover some of  the best practices when it comes to links.  Some of the newer practices that are cropping up on the scene aren’t necessarily the ideal method and we will discuss some bad habits that will be reminders for some of you.

So in this series I was reviewing some of my notes from a class I had taken.  I thought I would re-organize the notes and post them as a series on visual design.  I will provide links to sources and resources for you to check out that will be a great supplement.  My notes were taken from a class that used the book Site-Seeing: A Visual Approach to Web Usability as one of the textbooks. This is a lengthy post but I believe it contains some great information to help you with your designs and clients.

I will be posting some Dreamweaver tutorials for the beginner.  There are many tutorials out there, though they provide good content, I am noticing with the response of many of you out there that you get left in the dust with advance work mixed in with beginner content.  Many are just frustrated as they don’t know what panels are and keyboard shortcuts  and many other things that others instinctively know and just move entirely to fast for someone who just opened Adobe Dreamweaver and wants to start ant square one.  These tutorials are for you.

To start I am posting this image for reference; so when I say that I am in the property inspector you can reference this image to see where I am at and it helps you remember where things are without referencing th image. Make sure you click the image to view the High Resolution form so you can see clearly the marked up information.

Application Bar: This contains all of the DW menus (Windows) and it includes 4 menus that are shared by Mac and Win users.  It also has the search field and workspace switch drop down menu.

Workspace Dropdown: Here you can choose between workspace layouts.  You can also create custom layouts to suit your needs or reset your current layout.

Search for Help: You can enter your search term and this will search and find results on the internet. If your not connected there are still built in search features so you will still get some help with your topic.

The key to successful UX can be a combination of three things: Organization, Presentation, and Interaction. We will cover various aspects of presentation with these tutorials or posts in this series.

• Presentation: Everything related to how the web site looks; such as, fonts, images, colors and so forth.
• Organization: This includes everything related to the structure of the site; such as, information architecture.
• Interaction: Interaction takes into account how users and systems behave.

To get these to all work together is another story. With this blog series I want to help you along the path of learning about presentation, known by several names but I will choose visual design to usability. As you will see as we go along, you could come up with another name for it and that may be a better choice for these posts; however, getting the “right” name for it isn’t as important as learning some of the principles of usability and visual design.

Next post: Content: What to say?

Miguel Saavedr

Table based layouts are a little outdated,  yet some people still use them and they can be made more proficient then the way most people use them. I want to give some pointers on how to use tables in the cleanest way possible if that is your choice of weapon.

Image by: Zeeshan Qureshi

Relative

The reason that a designer would use relative font sizing is for scalability/flexibility for the user.  Many consider this a “best” practice for designers.  Using flexible font styling creates an accessible website that is more user friendly than absolute font styling (css/font/why7). In fact, relative font sizing is recommended by the W3C’s Accessibility Guidelines, U.S. Section 508 requirements, and other accessibility guidelines and requirements (css/font/why).

What resolution do you prefer to design with?  You have several options, and choices to make when choosing to use a particular resolution for your design. There is no hard and fast rule, yet there are some things to think about that will help you make an informed decision.

In a loose sense this title explains what went on behind the scenes at the W3C.  I want to inform some of the unseasoned designers why we went from HTML 4 to XHTML, and back to HTML 5.  I was wondering this myself so I set off on my Google search path. It turns out this was also going to be the first assignment in my new courses. The questions was, “What are the differences between XHTML and HTML 5?” and “How will this affect the design world?”