From the dawn of my time working with things related to graphics. Here I think about 1981 on the ZX-81, later on the TI-99/4A and Acorn BBC Computer. From that time I have loved icons which illustrate something on a small space. Once working on the Archimedes (Acorn RISC computer) I remember a friend of mine got a task where he had to create I think that it was 4 icons for Ericsson – the size was 32 x 32 pixels and only some 64 (or was it 32) colors were available! He worked hard for many hours and actually produced 4 icons which illustrated for instance “Water department”! Cool!

Today we are spoiled with great icons! Let me link you up with an article with great links to free icons: Icons For Your Desktop and Icons For Your Web Designs. And a taster – I have downloaded some of the Icons:

When I try to create Icons I use Xara Xtreme Pro (open source version for Linux: http://www.xaraxtreme.org/) – a vector based program – which many great icon designers also use. http://iconka.com/ is a place to see examples of that. Here is a teaser:

Xara Xtreme has by the way arrived in a version 5 here in the beginning of june 2009!

Share on Facebook

I feel I need to comment on a statment by “The Xara Team” about the nature of Xara Web Designer (XWD) in the forum: Talkgraphics.com. “The Xara Team” comes with various statements which I will comment in the following.

“It’s evident that the vast majority of websites are of a graphical nature”
– I disagree. Back in old days static HTML based webpages might be build in a combination of static text and graphics, but today serious websites are build from dynamic elements, ofcause wrapped in some graphics. Every website need a layout, but that does not make them a website of graphical nature.

“Creating websites should be like creating PDF files – you should not need to know anything about what happens ‘under the hood‘”
You cannot compare PDF with websites. PDF are static pieces of documents. Ofcause pieces of code can be embedded into a PDF file, but nowhere near the complexaty of a webpage. I have been working with producing websites since 1995 with focus on the “frontend”. (X)HTML are the fundament of any webpage, and for people like me working under the hood, it is the nature of websites. What we need to understand is that like the brain with its left and right side, a perfect websites comes out of a perfect co-working of the logical and the creative side.

When you state that you should not need to know anything about what happens under the hood you put your main focus on design – and if XWD will do that it will be just another designer orienteded website generating tool. It will only appeal to designers, the right side of the brain and not be the perfect tool.

“it provides no HTML code view, and no abilities to program Javascript”
Oh dear… These facts are almost used as a positive feature! Do they hate HTML and javascript at Xara? I hope not, cause every website is based on HTML and most interaction is based on javascript. I understand that the user should not necessary need to be a master at HTML and javascript, but to position a product in 2009 with words like “no ability to program javascript” is not a good thing. You need to be able to provide points in the autogenerated whereby people who actualy do not hate javascript (like me, I love it!) can hook into a given website and extend it. How about CSS? It would be nice to get documentation about the HTML which XWD generates, when IDs are generated on elemented and when (if) css classes are generated.

Modern ways of extending website content using things like jQuery (with more than 1000 plug-ins) will work if the HTML markup is based on CSS.

“(Web Designer layers map directly to CSS layers)”
In a remark he mentiones that XWD layers maps directly to CSS layers – well, as I mentioned before, it would be very nice to get documentation about the HTML which XWD generates! It is important and not just something which be mentioned as a comment!

Many questions in the forum is about how to add logic to the website
No doubt, it is 1-2-3, very easy to get a nice website up and running using XWD, but what about if you need it to have dynamic elements, autogenerated content? Many of the threads at XWD forum at talkgraphics.com is about that. Why? Because there is a need to “activate” your design. Having a nice design is not enough for many websites. Ofcause if you have a website which states opening hours, driving directions and a mailto link – a staic website will be perfect, and the option to public directly to your websites is unique! I have shown XWD to many friends and they all say: WOW! because its so easy!

I am trying to push the nature of XWD towards the “left brain side” – lets extend the part of XWD which offers easy embedding of logical based elements. The designer part is nearly perfect. Lets make so easy that even creative people can figure it out! Instead of trying to position the product only in the area for creative people, and thereby make the same mistake as the “other” website products going in the other direction (as “The Xara Team” clams most of them do).

Finally: Lets make it even better!
Please understand that I am happy with XWD, I want to throw away mock-up websites made in photoshop, I want to be able to use XWD through the whole process – but for that to be possibel/realistic we need to have a product which respect both the creative and the “logical” part of a website!

It is possibel I think to reach that target! We need to invent some new features for making the logical part of a website so easy that everybody can do it. I have some ideas which I will try to visualize in future. Some of them are easy, some not. One example is the need to be able to choose the level of anti-aliasing for each element

But I hope that this article have been inspirational to the xara-team and others who have read it!

Share on Facebook

For years the UK based Xara software house has been producing quality software targeted at primarly print. It has other projects like the very cool CMS alike www.350.com, but here I want to talk about the design related activities of Xara Ltd.

Xara Xtreme – state of the users
In my oppoinion the users of products like Xara Xtreme from Xara Ltd. can be categorized as users primarly focusing on producing stand alone graphics to be used in prints or on the web. I myself have been using Xara Xtreme Pro (XX) as a “photoshop and illustrator killer”. Not only is XX much faster and intuative, but it is priced in a realistisc range for me. Small pieces of graphics like the this one is very easy to create in XX!

The users are experienced in that area, but now that Xara Web Designer (XWD) will let them publish websites in 2 minutes? Is it like letting a truck driver switch profession into a taxi-driver? The switch is not an easy one to take if you need to be a successfull “taxi-driver” – trust me, I myself have been taxi-driver (frontend developer) for years now.

Xara Web Designer – who is the user?
So you want to produce websites? You will be given a range of out-of-the-box elements which have been nicely wrapped in easy to understand Xara interface. No doubt about that, a job well done! All the HTML and javascript has been removed from the person who is novice at developing websites. It removes the functionality focused parts of a website from the person using XWD when creating a website. Judging from that I believe that the people at Xara Ltd. are targeting designer-minded people, may I say “designer-nerds”?

Introducing web-related demands to the designer
So if XWD is a product which moves focus from traditional graphics area to website design, one of the challenges of XWD is to do it in a way which introduce new web-related features in a manner which makes XX-users feel “at home”/safe.

When people feel safe they can go far – they feel satisfied and can experience a flow, a state of mind where you forget time and space. No, it is not what people should always feel when working with XWD, producing a website – but think of the opposite. You do not feel safe – “what will happen if I click here? – will it crash my site?”

A designer probably just want to see her design appearing perfectly on the web, without having to worry too much about how she includes a slideshow or contact form. She probably just wants to say: “Ok, that is my layout, and here I have reserved place for the contact form…”. XWD have a “placeholder” feature which could do exactly that! (see below)

A gateway between design and interaction – a big challenge!
”There is a life after the design has been selected” you might say. What do I mean? Well during my daily work as a frontend developer I take design and turn them into live websites.
Typically (in my professionel work) I receive a PSD (Adobe Photoshop) file and export all the parts in the design, I generate CSS (Cascading Style Sheet) information and HTML/XSLT templates which make the website look as close to the layout of the designer as possible. After that interaction like carousel (see an example) where the designer might have expressed such a dynamic element.

You could say that a website have a static part and a part which “lives” on the page as you visit the website. Such parts only come to life when you view the website in a browser. They can be anything nowadays! From Google Maps, over facebook and newstickers you meet them anywhere you browse on the net. That is the interaction part of a website. They need to give the visitor a good feeling and offer something to him. On the other hand, if the design is not well put together such interactive elements will never even get the attention of the visitor!

What do I think is required?
Let me try to make a list:

1. Well, first of all – we need to have openminded discussions and feedback from users of XWD to be able to address elements of XWD which can be improved. We have that!
2. People with skills with implementing websites in general. Such people would know about the end product: XHTML, CSS, jScript and so on.
3. People who know what is happening on the net, yesterday, today and tomorrow! What is the trend? Would it for instance be more interesting to focus on Silverlight than on Flash?
4. Concrete need: XWD need to publish meta data into the HTML output! Be open! Document what 3rd party companies can expect the HTML output to contain. For instance if you want to somehow be able to have a jQuery based carousel part of your website, there should be a way to add CSS classes to elements.
5. Conform to web standards. Though to most people it is not important, perhaps moving inline CSS to CSS clases could be nice. And if you for instance have a block of text, why not surround the DIVs generated with an outer DIV? This lets 3rd party companies hook in with things that XWD perhaps not supports.

Well, I could properly go on – but for now I will stop here! Please feel free to comment!

Share on Facebook

In Xara Web Designer (XWD) you create designs/layouts using a vector based drawing program. You can add textareas, images, buttons, navigation and other web related elements. XWD automatically creates the HTML content and the relevant graphics. It is a cheap, easy, effective and fast tool for static webpages building!

As with all other programs some of the features need to be twisted to create the result you want. For instance if you need text to be placed on a graphic element without the text turning into graphics. The file here shows and instructs you how to achieve this.

If you do not already have a copy of XWD, why not try the 30 days free trial version? (even if the product is priced at a ridiculous cheap price of £ 39!).

The product has a great forum where you can discuss the product, read how-to, see what other are achieving and so on. It is placed a talkgraphics.com.

Here is the example: avoidTextBeingConvertedToGraphics.web

Share on Facebook

So you are a creative mind? You dont know much about the tags of HTML and the nature of a webpage? But still you would love to just design your website and voila! put it on the web – as a valid HTML based page, not flash, not an image! The answer is here: Xara Web Designer

Xara Web Designer (XWD) is a very cheap application which fills the gab between designing websites and creating them in HTML. The idea is that you design your site with graphics like buttons, text-areas, menues and graphics. When you are done you simply publish the site to HTML!

The HTML code generated is valid HTML – using CSS to reproduce your (complex) design from the vector (!) based Xara Web Designer application. I myself am a frontend developer and I love to handcode HTML, CSS and javascript (ok, I said it!), so I know about validation of those elements. XWD published HTML is job well done IMHO!

Inserting dynamic elements
One thing which I specially like is the ability to insert placeholders in your design. You can then embed HTML/Javascript/CSS directly in your design. When the site is published the placeholders will contain your code – allowing you to have semi-dynamic contents in your website design.

How to do it?

Well you simply add an area and right click it.

Choose “Web properties…”.

Click on the tab “Placeholder” and select “Replace with HTML code”

Now paste your html into the textbox – voila!

Examples

QR code – information embedded in machin readable 2D barcode
Imagine that you put a small barcode on your webpage, this barcode contains your contact information in a graphic 2d barcode called a QR Code. Your cell phone and other applications can then scan the barcode and save this information about you (and your website)
Try embedding this in XWD:
<img src="http://chart.apis.google.com/chart?chl=Xara%20Ltd.%2C%20Gaddesden%20Place%2C%20Hemel%20Hempstead%2C%20HP2%206EX%2C%20United%20Kingdom&cht=qr&chs=110" />

A You Tube Video
Ofcause you can also embed a You Tube video!
Try embedding this into XWD:
<EMBED src="http://www.youtube.com/v/Mb-ylTDHn44" width=425 height=350 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></EMBED>

Share on Facebook

Xara has done it again! Created a brilliant application – this time a website creation tool based on their excelant xara xtreme pro vector based drawing application. I must say this new application Xara Web Designer is a winner!

Perhaps not for us professionel website implementing developers – but, I will perhaps use it when starting up a site, or for prototyping. Xara: You are the greatest! Can’t wait to get a copy! (You know my e-mail over there in UK! ).

Example demo video

 Xara Web Designer Video Demos

Share on Facebook