User Interface Design Patterns

Common themes and patterns in good user interfaces include:

    Drop-down menus
    Main viewing windows
    Consistent color schemes
    Easily accessible buttons
    Readily available help files
    Intuitive control schemes
    Helpful and verbose error messages

There are other themes that can be found in all good user interfaces, but these are the most common. User interfaces, above all, should be easy to use and intuitive for novices and experts alike, and should allow them to focus on using the program, not figuring out how to use the program.

Drawbacks to Using a Flash Web Design Template

For businesses that neither have the time or money to contend with hiring a Web designer or firm, using a Flash Web design template can be the perfect solution for a fast and affordable way to put up an interactive Website. However, with packaged, inexpensive Web options, you do face some disadvantages.

First, because it is a template, you are locked into a certain range of design and navigational restrictions based on the template that you purchased. With a custom design, you do pay the higher price, but you also get the benefit of a Web site design tailor made to strategically market your business.

Second, you lack the advice and input of a professional or team of professionals that can give you the benefit or their design and marketing experience. With the exception of customer support from the template manufacturer, you are on your own as far as implementing the Web site design, Flash components, and information to your Web site.

Third, although you can find a well-designed Flash web design template, you run the risk of having a generic looking Web site that doesn't best showcase your business. With the number of competitors that have unique, custom made Web sites, you lose a competitive edge in your Web presence.

Usability Testing and Why You Need It

In testing the usability of a website or website application you have users go through tasks while the design staff and management watch, listen and take notes.
 
During your usability testing you will be able to tell where problems lye in your design, architecture and site structure. These results will provide you with a world of knowledge on the hows’ and whys’ users have certain things happen to them. Since we all think differently you will be able to see how different users will interpret your site or application.

Important things to remember when testing:

    * This test is for the website or application not the usability tester
    * The quality of the user’s experience
    * The ease of learning your website architecture
    * A way to apply what you will learn
    * You will see what the overall satisfaction of using your website is

Please remember to contact Hieroweb Interactive for any of your web development or marketing needs at 805-582-2081

Clean Website Design Can Help to Optimize Your Website

In designing your website, focus on a design that has a clean appearance and is easy to navigate. Websites that are user friendly and easy to navigate are more appealing to visitors. If your website is not intuitive, visitors may become frustrated and exit your website without seeing much of your content. Appealing to visitors is important to maintain high levels of traffic but clean website design is also beneficial when search engines crawl your website. It is more likely that search engines will visit all of the pages of your website if it follows simple and conventional design standards.

The Drawbacks to Flash Web Site Design

With the amazing capabilities of Flash Web site design to add visual imagery to your business online presence, the question is what are the drawbacks? There are a few disadvantages to consider when using Flash Web site design.

• Search engines will not index a homepage with Flash Web design. However, by submitting alternate pages or embedding the Flash, you can circumvent this obstacle.

• Flash Web design can be cumbersome for viewers who have yet to switch over to a faster online connection.

• Set-up time for creating a Flash based site on the Web can be time consuming and complicated.

Capabilities of Flash Web Design

By employing the use of Flash Web design, your business Web site will come alive as a rich, interactive experience for the viewer. Flash Web design creates an experience for each Web site visitor, making it a useful marketing tool. To help you communicate with your Web flash designer, it is helpful to know the capabilities of using Flash in Web design. Here are some of the highlights:

• Customize your text and clickable buttons to add punch to the graphics of your business Web site.

• Bring a two dimensional image to life to showcase a product or service.

• Add a voiceover or music to your business Web site to enhance your visitor's overall experience.

• Employ video commercials as a means of relaying information.

• Use Flash Web design to weave an introduction to your company profile and better engage visitors to stay and browse your Web site.

Flash Web Design and Search Engine Optimization

Incorporating Flash Web design into your Web site is a great way to grab the attention of your visitors and give an introduction to your business. The quandary occurs in the fact that adding Flash Web design to the home page of your business Web site will ensure a search engine does not capture your Web site. However, there is a way to get around the lack of ranking. You can keep Flash on your introductory page and simply submit subdirectory pages of your Web site rather than your home page. Another way to ensure search engine ranking is to embed the Flash, creating Web links and text onto your introductory page.

Using a Flash Web Design Template

With the high cost of hiring a team of Web designers, programmers, and Flash designers, an option to simplify your Web design could be the use of a Flash Web design template. Widely available from a range of template Web sites and businesses, using a template can be a more cost effective and time saving way to create a Website with Flash for your business. You simply purchase, download, and begin to implement your own information onto the Flash Web design template. Some template businesses offer customer support to assist you should you have any questions or technical difficulties. With some template companies, Web hosting is available as well. You do lose out on the flexibility of a custom designed Flash Web site, but this is an option for those who want to put up Flash Web design in a hurry without paying a great expense.

Benefits of Flash Animation

If you're considering incorporating flash animation into your business Web site, you're making an excellent marketing decision. Flash Animation can add a whole new level of interactivity to your Website, showcase your business, and increase the branding power of your products.

• Flash animation can help you control the experience of your Web site visitors by allowing you to implement a storyline to your Web site. Add an animation to introduce your business, introduce audio to get your message across, or create a map that guides your visitors through your business Web site.

• A Web site without flash animation is much like a storybook without pictures. You may be able to get a sense of the plot, but you lose the overall picture. Flash animation can help give your business that extra "edge" for visitors to your Web site by adding a new level of visual imagery and highlighting what you want them to see.

• Branding is a powerful tool that helps differentiate your commodity from your competitors. Flash animation helps you to do just that by adding a level of distinction to your business, defining your image, and creating a sense of connection for your clients.

Search Engine Marketing for Your Website (SEM)

A site or business may employ search engine marketing (SEM) as a way of driving traffic to their site from links delivered to consumers via search engine results. A site may often use the services offered by a search engine marketing company who will help provide custom SEM services based upon knowledge and experience with SEM.

An SEM provider may use several different search engine marketing techniques including both paid and free methods. Search engine marketing providers and those using SEM services will use search engine optimization (SEO) as well as content placement (paid and non-paid) to help garner traffic and provide natural search engine inclusion. Ideal methods by an SEM provider will ensure optimum results as a result of a search engine marketing campaign. Search engine marketing professionals and even novices can make use of techniques that have been tried and tested since the introduction of search engine marketing.

Contact Hieroweb Interactive Today for all of your Search Engine Marketing needs at 805-582-2081

Adobe Releases Wallaby a Flash FLA File Converter to HTML5

"Wallaby" is the codename for an experimental technology that converts the artwork and animation contained in Adobe® Flash® Professional (FLA) files into HTML. This allows you to reuse and extend the reach of your content to devices that do not support the Flash runtimes. Once these files are converted to HTML, you can edit them with an HTML editing tool, such as Adobe Dreamweaver®, or by hand if desired. You can view the output in one of the supported browsers or on an iOS device.

Now the bummer is you need to have Flash Professional CS5 installed in order to convert the files. That's the only downfall otherwise nice tool. Wallaby only supports FLA files made with Flash Professional CS5. If you have older FLA files you need to resave them with Flash Professional CS5.

Download Adobe Wallaby

When to use the ID and Class CSS Attributes

With all of the different flavors of CSS out there I found myself getting confused on when to use ID's and when to use classes. I also wanted to educate myself on a practical easy to follow guideline that I could use throughout my website development and design process to make going through the code later on easier.

Here is what I came up with, I hope that you find it helpful.

HTML rules dictate that an ID identifies a single element in the DOM and each element can only have one unique ID. Then a CLASS classifies one or many elements in the DOM and each element can have multiple classes. So based on that you want to use an ID to designate main layout elements and use classes to define styles across multiple elements. Remember that !important overrides all, including inline styles. If you are still looking for a better definition then let’s say: An ID is typically used for a single instanced container/object, while a CLASS is applied to many objects.

Here are some real world usage examples:

#header { width:916px; height:130px; background:url(/images/header_bg.jpg) no-repeat; /*float:left;*/ padding:0 14px 0 0; position: relative;}

#header #logo { width:248px; height:78px; float:left; margin:25px 0 0 28px;}

#header #logo a { margin:0; padding:0;}

#header #sub-block { float:right; width:410px;}

#header #sub-block  { margin:0; padding:10px 0 0 0; float:right;}

#nav - applies to the element with id="nav"

#nav div - applies to any div element inside the element with id="nav"

#nav .left - applies to any element with class="left" inside the element with id="nav"

#nav div span - applies to any span element inside a div element inside the element with id="nav"

.item span - applies to any span element inside the element with class="item"

.item .address - applies to any element with class="address" inside the element with class="item"

div.item - applies to any div element with class="item"

I find it easier to read and keep track of if I group ID's together and then add attribute instances as I go further into the CSS code. Hopefully that is what you get after looking at the code above.

Here are two additional ways to think of ID's and Classes:

1.) - ID = One Instance  -- one student -- Per page

2.) - Class = Multiple Instances  -- many students -- Per page

Here are some helpful naming convention examples:    

ID's:

#header

#footer

#navbar

#section

#sidebar

#subnav

#menu

#content

#article

Classes:

.important

.warning

.validationError

.recent

.outOfDate

.inactive

.weekDay

.previous

.next

.first

.last

Happy CSS Coding

Understanding Visual Weight from a Design Perspective

When you create a design the design elements that you add to your design carry what is commonly referred to as visual weight. Objects in your design will appear heavier than other objects. With visual weight we can create symmetry and balance in our designs. In this article we will describe how elements within your design carry their weights and what it means to your design.

We know that if we have two design elements on a page that are identical but one is larger than the other then the larger element is going to carry more weight than the smaller element. Then you have the appearance of colors that give your design elements more weight. Darker colors will carry more weight than lighter colors. Colors have varying weights that can effect weight such as saturation, opacity, brightness, contrast, tone and of course there are others.

Higher saturated colors will garner more attention than unsaturated colors. A darker color of the same color will take on more visual weight.

Red will carry more visual weight than say blue. For example, red holds more visual weight than yellow or orange with low saturation.

Elements that have more contrast against a background will carry more visual weight. Implementing contrast can maintain visual hierarchy and readability.

Elements with greater proportion and density will be heavier and carry more visual weight.

Complex elements will give the appearance of greater visual weight. Complex images take the mind longer to process and will occupy more of our attention making it visually greater than something less complex.

Whitespace carries less visual weight but is extremely important to the look and feel of a design. An object with a lot of whitespace will give off the appearance of more visual weight.

The appearance of our designs carry great visual weight and as designers our concepts rely heavily on visual weight. Having visual weight and visual hierarchy and symmetry in our designs is an important factor to making our designs visually appealing.

CSS Hierarchy - How it Works

CSS has come a long way. We have gone from nested tables that were hard for the browser to render quickly to CSS styling that can easily and quickly control the layout of our web pages.

So how do we know what CSS takes precedence over what?

With CSS we can provide 4 ways to reference our styles:
 
    1.) External style sheet
    2.) @import within a style sheet
    3.) Internally within the head of a web document
    4.) Inline within an element of an html document
 
So in order to understand what takes precedence, we need to understand how the CSS document hierarchy works. Two things are going to happen, one is the browser will us the most specific or most weighted styling to an element if there is a conflict, and two it will choose the style which is closest to the element or written lower down and give that precedence. So it's important to understand that style sheets are applied in the order in which they appear in your HTML document. The last style mentioned will have precedence unless of course as we said earlier if there is a conflict then the browser uses the most specific styling. You can also use the !important declaration to give precedence but IE does not support this.