Button Bar Module Examples

Page

Case Study - the Xara Online home page
On the Xara Online home page we wanted to include a main menu navigation bar into the top purple strip on the web page. We wanted buttons that were quite low-key and subtle that did not distract visitors but that were totally consistent with the website design and color scheme. From the wide collection of designs available a few variations were created.

This uses the 'biztech' design. By setting the main button color to be the same as the strip background it makes the buttons blend in with the page. In this case the buttons have been scaled to 85% of normal size, and the text color has been set to a shade of orange that's in keeping with the orange theme color.

The above example uses the 'expression' design. Again the main button color is set to match that of the background. This design has an outer edge that can be colored separately. The text color has been set to be very pale yellow rather that white, and the design has been scaled to 90% to fit within the height the the purple strip. The above design, including all the graphics, requires just 5Kbytes.

This design uses the 'camden' template. It's one of the designs best suited for small spaces and in this case is set to be 100% normal size. To make the buttons stand out from the background they have been set to be a few shades lighter than the background. The mouse-over color is now very striking.

The above is based on the 'connexion' design which is very simple but has particularly clear text. The button background is set to match exactly that of the strip background and the vertical separators are set to a share of orange in keeping with the page design.

This is based on the 'edgeware' button design. It is used throughout the module system. In this case the text is all upper-case and the buttons are scaled to 89%. As usual the button color is set to be the same basic color as the background except a few shades lighter.

This design is called 'andybar' and is shown at 100% normal size. Notice how all the buttons are the same size even though the text labels are shorter on some buttons? This produces a more even and professional looking result.

This design, called 'flavour' is a composite design so it appears as a single solid button bar.

DESIGN TIPS
Another unique aspect of the Button Bar Modules is that the system automatically elongates the button design to accommodate the button text. It then makes all the buttons be the same width to produce the most aesthetic and evenly spaced design.

At very small text sizes you may find that adjusting the % scale of the buttons by 1% increments can make a significant difference to the readability of the text.

PAGE COLORS
It's never a good idea to have too many colors on your page. The best designed sites usually limit themselves to just two or three and sometimes shades of those colors. For the best looking results when designing your buttons, make sure the colors used match those of your main website colors.

EDITING THE BUTTONS
The unique 'Remote Update' feature of Modules allows you to change the button bar contents or design remotely, just using a web browser, without involving the webmaster, altering or republishing the page HTML.