August 2008

Joomla! 1.5 Web site Sarah Verroken Award Winning Illustrator and Author

Sarah shares her creative process that results in captivating design

Written by Sarah Verroken

The saga started a year ago, on some wet morning in New Zealand. Being a designer is one thing, getting the designs out there is another. The quest for Internet exposure began and bundling my works on a personal website seemed a good idea. But wait, let me introduce you to my world, where design and illustrations are more real than wet mornings, where raindrops inspire instead of irritate. I'll try to introduce you all, try to open up this window and wipe away the damp of this energetic room to shed some light on what I think is I. Be warned since this is artist talk, no clear analysis shall be found. If you can't handle an artistic window, do move on. The second part, however, will be more Joomla! related, so for those Joomla!-people out there, don't you worry. I'll switch to a more 'descriptive modus'. But first, allow me to give 'a' report of my brain activity of what I call art (others might refer to it as world, or personality).

Create your own dictionary, 'cause it's me, I.

The physical entity called Sarah Verroken, often in my world referred to as 'Me' or 'I', is a professional graphic designer/illustrator/webdesigner. I graduated in 2006 and have a master degree in Visual Arts. As a freelance designer I target illustration, graphic design, webdesign and any other creative input/output as can be seen on the portfolio site. Short after my graduation I won the 'Illustrator's Award of the City Hasselt' (2006), the 'Plantin-Moretus Award' (2008) and got nominated for both the 'Boekenpauw (best picture book of the year, 2008) and the 'Kids and Youth Jury Flanders' (KJV, 2009 - winners not yet announced). It is of course very cool to receive awards for your work both for the illustrations as for the design. At the same time this points out what my core focus is: illustrations. All three 'fields' (illustrations, graphic design and webdesign) nevertheless produce a unique interplay that allows me to integrate the different techniques of those fields and challenge my routines/world. I simply love the diversity that comes with it, and with upcoming Content Management Systems, a graphic designer is again enabled to create good looking, functional websites.

Hence: me, my illustrations and I, all live in a box packed with spinning energy bulbs I call work. Me = design + illustrations. Some more words? Experimental - boxless - turn - twist - break - move - challenge - it's not me - hold - step back - look - close my eyes - live in ideas - create alternative worlds - twisted again - freeze thus enable ideas.

Experimental is what is most welcome in my work. By chasing the experiment and letting it hammer my neurons, I create the necessary free space to destroy the boundaries of my works. I'm always hungry for more, for alternatives and the ultimate experiment. Deconstructing the box I live in, is the goal of such experiments (aka trying to be boxless). Working as a designer and illustrator is not only about chasing experiments though, since both art forms (design and illustration) are the fields where there is an a priori interaction between art and audience. And surely, we can turn, twist and break with traditions, but you primary want to connect with your audience using your art: I am independent, but you are important.

Thus, in order to move on with my art, I need to challenge myself, to prevent ending up in a (arty) box. It's not me to hold on to a style that's very me-like. Expression comes from the twists and turns in my personal artworks, it's the expression of a mind that does not need to be tied down for it's own safety. I do not need to step back, I solely need to look at the world, chase the clouds and refresh the pages. Basically, I don't need to close my eyes to see a world filled with design and weird illustrations. Many people experience (and I stress experience) the same feelings, and as such are no different than I am. However, when I am wandering around the surroundings of those feelings, I allow them to become me, to integrate them and reconstruct my world which is art. I simply close my eyes, live my ideas and therefore create alternative worlds. When these ideas are projected on a screen, paper or canvas, they are twisted again since they become exterior to my mind. They do not longer belong to my neurons (and eyes, and mouth, and skin) but are frozen on that external surface. By printing my mind, I freeze thus enable ideas and create my own dictionary of this world. Cause it's me. I.

'Feeling Sad' and how to integrate aesthetics.

As a graphic designer, I started out working on 'Boos' ('Feeling Sad' in the English version). This book is about a sad little duck looking for a way to get happy again. It is written and illustrated by myself, and was the first integrated artistic expression, an integration of both emotion and art. Boos was a breakthrough. Created for my graduation project, it was tough to find a style that matched the story. By reading up on how my audience (cf. 4 year olds) react on design and texts (did some research) I knew the vague criteria I wanted to integrate. Though research helped a lot for this work, it still needed to be reflected in the drawings. And hence, I borrowed a stuffed duck and he (it was a he) was my companion for a few months. Visiting those quacks of a friendly mini-farmer, I started to get the feel of them. After some battles with my supervisors, my stubbornness and I created the character Duck. From then on, I twisted/turned/chased the experiment and integrated the simple design with a rather complex/rough background. Woodcuts and rough printing techniques delivered the results as seen on the website (and in print as 'Feeling Sad'). Boos (or 'Feeling Sad') is important since it motivated me to further explore my already experimental attitude.

Why and how do you Joomla!?

So Joomla!? Well, I didn't feel like updating an entire site and editing the flash file(s) or the HTML files each time something needed to be modified on the site. Add speed/security/robustness and you end up with the need for a CMS. I’ve been looking at different systems and found that I would go for or Joomla! or Drupal. I like Drupal since it seems to be the preferred CMS for huge sites (they got a really impressive list of big companies using the system). I like Joomla! since it is way easier than Drupal, and does the job as good as Drupal for any medium sized (and small) website. So why Joomla!? Easy to use, large community, good extensions, and quite flexible (as can be seen on my own website).

Yes, Joomla! is cool, and yes it has some limitations. But limitations often thrive (at least partly) when people forget to think outside the box. It's true, Joomla! websites are often look-alikes and a lot of the websites give the impression that you can only build such (WARNING: personal opinion of a rather stubborn designer ;-) ) hideous (but decent purpose-build) websites. I for a moment believed that story and hence… turned my back from it and started building my own CMS from scratch. That worked out rather ok, and I was making progress, but it still was a real pain to do it all by myself. Security, stability, tests, some more tests and then... there was the release of Joomla! 1.5. Since it's always a good thing to keep your eyes open, I decided to give it another try.

However, before I dived into the Joomla! pool, I needed to check a few features I really needed for the website which are all centered around flexibility of the actual system: flexible templates, flexible article display and flexible design. Somewhere around May 2008, I knew that all of this was possible with 1.5 and I could finally start with the development of the site. From then on, it took only a week to design and create the site. I guess that, once you understand how the CMS actually works, it is really straightforward to code a website.

Design beyond classic Joomla!.

The core idea of the website is the creation of a template that focuses on illustrations. Often menu items are quite central in a template. I deliberately choose to minimize the menu to redirect the attention to the illustrations. A menu is nothing more than a navigation item, and as such does not need to be central. Additionally, the site is a design website. This means that the site needs to be in accordance with the illustrations. The goal of the site is to stress design, and not the 'products'. When I create a site (mine or a client's), we need to synchronize the intentions of the site and its design. When the intention is to offer a product and allow visitors to get a quick glance of the various options, you need to create a very user friendly menu. However, when it's more of an art website, you might want the website to be in sync with the look and feel of the art. Each website is content orientated, and matching the content with the design is the most difficult part of webdesign. Sticking to a typical business design can be an easy way out, but might lack the synchronization.

Syncing the website and my illustrations resulted in a rough style. The intention was to get as close as possible to the look&feel of a printout. This required an unpolished style, and I'm rather pleased with the result. Using the grunge typography, frames and menu I implicitly tried to capture the attention in a way that the visitor knows that this site is about design. This is the main goal of the website, and hence I need to focus more on a grunge design than on (very straightforward) usability. I nevertheless need to keep it simple, since a complex site is confusing. In webdesign, the good old 'less is more' is still a good criterion. Creating too complicated websites, with lots and lots of information on a single page does not please me. I strongly believe in the fact that a human can grasp up to 7 different elements at a time. The number of 7 different items is of course a general recommendation, and nothing more than that. I nevertheless did not want to exceed that amount of elements.

I reduced the number of elements, to point out to the illustrations even more. Oversimplified: if there is only one element on the website, this element will get the full attention. If there is more than one, the attention will be spread out. The amount of attention an element gets depends on lots of factors (which I can't explain at length here since it would take a while to fully describe these), and should all be taken into account when creating a website. When creating a website for a client, lots of time goes out to exploring these elements and synchronizing these with my artistic input. All this means that webdesign for me, is nothing more than the combination of solid (perceptual) attentional effects, the number of elements, the intentions of the website and the integration of all these elements into an appealing artistic website. Joomla! enables a webdesigner to focus on these elements without 'loosing' much time on learning how to code (PHP/MySQL). Additionally, this also means that due to my background, I explicitly (try to) work with all these elements to create customer specific websites, dependent on their needs, wants and visitor's profile.

In the case of my portfolio website, this resulted in a limited amount of elements shifting the focus to the illustrations, with a rough illustration synchronized website focusing on visitors who are looking for design design design.

And so you wonder how.

I quickly understood that the templates I wanted to use for the site were totally different (e.g. the difference between the 'contact' and the index' page). So, flexible templates in these cases meant that I should be able to create different templates for each section. Switching between 'template About' and 'template Contact' is one of those standard functions in Joomla!. Simply linking a specific template to the specific menu item(s) and there you go (Template manager > select your template > link it with a menu item of your choice and done). This allows a web designer to create pages that look totally different, without all too much effort.

The second demand (cf. article flexibility) focused on the article navigation (moving the pagenav to the top). I used a component override, and added the modified component to the specific template. Checking the forum told me how this should be done and how remarkably easy this is. Check this post to get the idea.

Finally the sliding Mootools menu (about, news,…) is an extension called 'Kwick Sliding Vertical Menu'. This comes by default with a limited number of items. By changing the xml file, I created additional items. The actual effect of the menu is achieved by simply changing the jpg’s used in the original menu component. By looking at the jpg's used in the original, creating some of my own and replacing the original items by mine in the component, I got the effect just the way I wanted it to be. Unfortunately, this component is not integrated with existing menu's, so you need to manually adjust the url's. Unfortunately this disables the SEF option of the website. But, if that doesn't bother you, it is a real handy component. To sum it up: change the pictures, adjust the width, add some menu items and you're done.

What I would like to see added to Joomla!.

What really lacks in Joomla! is control over the layout of content. I do realize that Joomla! wants to be a CMS that is easy to use, but people need to realize that the admin usability is not the only usability to focus on. Though it's good to keep things simple, I still prefer at least the option to control the process as much as possible. And this is (currently) not possible for the display of content using different fields in a single article. Those expert PHP coders will most likely know what to do, and that's just fine. However, it would be great to be able to implement some 'content templates' for the end-user. Adding fields, defining their positions/design using CSS, would allow end-users to simply add text without worrying about the actual layout of it. By predefining templates, a web designer gains extensive control over the graphics of content. Some people are working on exactly this kind of component/plug-in/... and hopefully this will be out really soon.

Related to the control of the text layout, it would be interesting to allow people to upload pictures again without having to worry about the layout. Most end-users do not know how to change some of their picture sizes, or do a messy job with it. Making it really easy as in 'simply upload, we'll do the rest' would be a interesting extension of the system. Restricting the upload size and defining the size of the displayed pictures would make the webdesign job a lot easier since you would gain more control over the end-users input. This can be done using CSS of course (which is my current solution for it), but it would be handier to implement it on the back-end of the CMS.

To end the story.

It's good to see such a huge community providing a free, robust, beautiful piece of software. It's good to be able to give something back, and I thank the Joomla! community for its impressive system. I, as a graphic designer, am very pleased with such a system since it enables me to further explore horizons which were previously unthinkable.

For those interested in my work, you can always check my website:
http://www.sarahverroken.com
or my blog:
http://sarahverroken.blogspot.com

Add Comment