| Xoning Out:
Redesign Adds Value by Gary W. Priester Remodeling the XaraXone for i-us.com Filling a need In the fall of 1996, Arlen Bartsch and Chris Dickman saw the Internet as an new way to distribute technology-based content, as well as new products and services. So they formed a web-based
company called i/us Corporation which features discussion boards, free directories, live chat, and content provided by prominent members of the graphics community. [Editor's note: I write a column called "The Wire," and this site is an excellent place to discuss graphics, design, and even marketing.]
A Xone of Opportunity Xara 2 (pronounced ZAR-AH TOO), a vector-based Windows drawing and Web graphics application created by Xara Ltd. UK had already developed a ferociously loyal following, and it became the first major product i/us would sell on the web. Selling electronic content on the web gave i/us several advantages: One was that they could offer a single low price around the world. Another was that it could be delivered instantly. But to add extra value, i/us created a new content area called the
XaraXone (pronounced ZAR-AH ZO-N) to help Xara owners.  The Xone included links to a variety of Xara-related resources including an on-line tour of Xara 2, feature highlights, tutorials to help new users get off to the right start, contact information for tech support, and
galleries where Xaraphiles could show off their work (both in normal Web format and Xara's own Flare format, which uses Xara's vector format to allow you to zoom in on an image up to 25,000%).
The area also links to the Xara Conference where Xara users can ask questions, give answers, and, in general, make friends and build an on-line community.  |
A password-protected page called The Insider Area was established for people who'd purchased Xara 2 from i-us.com. This special area included animated movies and access to back issues of the Xealot!. Parking Xone As you can see, the various Xara content areas were lacking in continuity and were somewhat disorganized, like a parking lot with no delineated spaces. They also weren't a great advertisement of what Xara can do. It's important to remember that your web site directly reflects on you, your company and your products, so you want to make that reflection shine.I was asked to remodel the XaraXone and get all of the
various Xara vehicles into one parking lot and into their assigned spaces. I envisioned an expanded site, or portal as we call it these days, from within which Xara users could access all things dealing with Xara. In the new site, the visitor can preview and buy Xara 2 and other products produced by Xara Ltd., UK, learn the program with the help of monthly tutorials, establish a community via the conference area, show off their
images and animations in the galleries, see the work of professional Xara users, have access to Xara helper utilities and plug-in filters, and more.  Before I started creating page layouts and developing site graphics for the XaraXone, I created a new document in NetObjects Fusion 4.0 and used the Site View window to organize
the contents of the new Xone. I tend to jump around a lot, (I believe the polite term is multitasking and the impolite term is attention deficit disorder), so having the site organized and the pages created beforehand is a tremendous aid to staying focused.
The Font Xone  I spent a lot of time visiting Web sites auditioning fonts in search of a fresh and fun font to use for the Xone. I found a font called Lunatix on the Emigre Web site, which had just the right look and feel. I experimented
with different combinations of Lunatix Regular and Bold at different sizes and determined that the font would work swell for headlines but less swell for buttons or text. I chose Trebuchet MS ( available free from Microsoft and automatically installed with some Microsoft applications) to
use for my button text as well as my SiteStyle text. Designed for use on the Web, Trebuchet MS is easy to read, even at small sizes. I edited the default SiteStyle text (Text > Edit Text Styles) to specify Trebuchet MS for normal and caption text. Since I knew that not everyone would have this font (even though you can download it for free), I set up NetObjects Fusion to display alternate fonts in case someone didn't have Trebuchet.
Using Notepad, Window's text editing utility, I edited a file found in the \netobjects system\ directory called fontmap.txt and added Verdana (also available from Microsoft and installed on the majority of computers) as a backup font. The fontmap.txt file contains a list of more common fonts along with backup fonts that will be used should the specified font not appear. Below is the line before I edited it, and after. Before: Trebuchet MS,Arial,Helvetica
After: Trebuchet MS,Verdana
,Arial,Helvetica Newer browsers look in the installed font folder to see if any of these fonts (specified in the HTML document) are installed. If the browser finds one, it displays the font in lieu of the default Times Roman or Helvetica. And if I can't have Trebuchet MS, then I'd much have someone see Verdana to Arial or Helvetica.
Creating the site graphics The next step was to create a palette of colors that would be used consistently in all areas of the site. Then, using this palette, I could design and assemble the site graphics including a background image, page titles, and buttons. The page titles would be used in place of the banners.  |
Deleting the default page banner from the Master Border Area removes the default banner from the entire site. A simple background image consisting of one pixel-wide brown pin stripes applied over a solid light brown background adds a rich texture to the page without being distracting. (If you can, look at this site with your monitor set to 256 colors and
you'll see the background looks like a single, flat color. When you view it at 16- or 24-bit, you'll see the subtle background pattern). The background colors permit the use of both black and white type. Fusion 4.0 supports rollover buttons, and these interactive buttons can add a lot of life to a site. Buttons have four states: Regular (the button as it
appears when the page first loads), Rollover (the button when the mouse passes over the button), Highlighted (the button on the selected page), and Highlighted Rollover (the highlighted button when the mouse passes over it).
For simplicity, black and white rectangular buttons would work fine. The highlighted and highlighted rollover buttons are more elaborate. Invisible rectangles (shown with white dotted outlines) the size of the highlighted button were
exported along with the buttons so the buttons will remain in place when changing states. All of the elements are in the same place in each of the four states.  Because mouse rollover effects are so easy in NOF, I decided to apply this effect to the title graphic bitmaps used on the home page and the individual pages. Picture
Rollovers, as Fusion calls them, can have three states, Initial, Mouse Over, and Mouse Out. Because I planned to use nine of these bitmap images, plus buttons and an animated title, I decided to use the Initial image for the Mouse Out image as well, thus eliminating nine additional images.
The Mouse Over image (the image when the mouse passes over it) has a blurred effect in contrast to the Initial image. The fourth option with Picture Rollover effects is Link URL,
which I used to link the page title graphics to the individual pages. In essence, the home page has become one large image map, broken into individual images to allow for rollovers (and for faster loading). Construction Xone  |
Once the basic images were created (in Xara, of course!), it was time to start constructing the site. From the SiteStyle window the background pattern and the four button state images were configured. These were the only SiteStyle elements used on the site. The text for the buttons is Trebuchet MS Bold in black or white. Selecting the Set Style option applies the new style to the entire site. The buttons
are generated automatically every time a page is added. The first page to be built was the XaraXone home page. The large XaraXone graphic at the top of the page is animated, but the only portion of the image that is animated is the inside of the "o" in Xone so the actual file size for the animation is relatively small. Using
the HotSpot Tool (the icon with the pointing finger over the red box), the i/us logo was designated and linked to the i-us.com home page.
There are nine sections to the new XaraXone. I laid out the page title images in three rows and three columns. Selecting all of the items in each column and using the Align Centrally feature on the Properties palette was a big help. The text for each row was aligned Top and distributed horizontally. A
brief description, formatted with the modified SiteStyle Caption text, for each of the nine page graphics provides the visitor with a quick overview of the area and its contents. The home page was unique in that the left border extended to the left side of the screen. All of the other pages are indented the width of one button. I created a new Border area for the home page only. The Fun Xone
Like many vector applications, Xara supports Adobe Photoshop compatible plug-in filters. So, even though Xara does not have a Gaussian Blur filter or an Emboss filter, these effects can be applied to bitmaps via third-party
plug-in filters. Several Xara users have developed freeware and shareware filters that will now be available in the Xara Shareware section. I added mini-tutorials to show Xara users what each plug-in filter does and how it works. Links to the i-us.com ftp directory let the visitor download the plug-in filters. Note the indented left margin of the page. |
Before its reincarnation, the Xara Insider Area was merely a single, password-protected page containing the previous versions of the Xealot!, (the Xara e-mail newsletter), and 25 AVI "Movies," (animated feature tutorials). The new Insider area contains a link and title graphic for the new Web version of the Xealot! (which will premier with the new XaraXone) as
well as links to an archive page for the 24 back issues of the Xealot!, and a link to a Mailing List, which will alert readers to site updates via e-mail.Corel Corporation, which has the license to sell and market Xara, promotes Xara as a Web graphics tool in the same league with Adobe ImageReady and Macromedia Fireworks. But anybody who uses Xara knows it's much more than a Web graphics creation application. Unlike either ImageReady
or Fireworks, Xara is a full-fledged drawing application capable of producing exquisitely beautiful images. To this end, the redesigned XaraXone presents a new section called Featured Artist.  Each month a different artist or designer will be featured to show off Xara's capabilities to the world. Kicking off the series is Klaus Nordby, a Norwegian fine
artist, graphic designer, and illustrator. While each of the thumbnail images is large enough to provide good detail, a full screen image is linked to each thumbnail as well. Each of the larger images has its own page with a description of the image provided by the artist.
From point A to point B
I used to use an application called CuteFTP to upload my images and HTML pages to my server. And while I still use CuteFTP to upload the occasional revised page or two, I've become a big fan of Fusion's Publish feature. Once the Publish Site dialog is configured, the files are automatically (and magically as far as I'm concerned) transported from my computer, through my modem, to the server. All directories and subdirectories are automatically created and the files
tucked away in the proper directories as neat as can be, giving me a moment or two to go to the refrigerator for a small snack. The Daylight Xone By the time this makeover sees the light of day on eFuse, the new XaraXone will be open for business. I hope you have found this makeover useful and feel inspired
to tackle a few makeovers of your own. Take a look at the "after" makeover site. Does your site create sore eyes? If you need help with your Web site, let us know. That's why we're here, after all! E-mail us and give us the URL for your Web site as well as a brief description of what you hope to accomplish with your site. If we pick your site for a
makeover, we will contact you for more information.
About the Author  Gary Priester is a partner in The Black Point Group, a Northern California graphic design company. He is the author of Looking Good in Color, Ventana Press and CorelDRAW Studio Techniques, Osborne/Corel Press. E-mail Priester or visit his web site. © 1999 Gary W. Priester
| |
