Author Archives: wolf

BUG – LED: roving character

Bugs initial concept help me plan out key colours and ideas.
#bug : initial concept

“Bug” is a continuation of work I have done in the past, summoning into being fantastic creatures who’s main message to humanity is respect the natural world as sacred and a source of wonder and joy. It’s secondary message is to embrace diversity.

Bug will be a costumed performance piece combining wearable electronics with recycled and found materials to create a larger than life mythical creature who will appear at dawn or dusk in various places .

Inspiration /background

As a female who codes I’m interested in stories around women in STEM fields . In 194 Grace Hopper, a female mathematician found the reason why her computers were not working was a moth had got stuck in a relay. She found it and taped the moth into a log book with the word bug next to it and since then we have been using the term “bug” for computer issues.

Through my research I have also stumbled apon the amazing illustrations of the Scott sisters, a pair of 1 century illustrators who lived on Ash island on the Hunter river and primarily painted Australian moths and butterflys.

Other influences may include the Japanese super monster “Mothra”, Bjorks beautiful masks, Sha Sha Higbys costumed art performances and Justin Sholders fantastic urban queer  alter personas

Process – making

I received a grant form my local council through there placemaking scheme – this grant set me up with a few performances but also helped my buy some of the materials used.

Drawing the wings at scale- i decided to use emojis and other code syntax
Drawing the wings at scale- i decided to use emojis and other code syntax
painting the silk wings
painting the silk wings
prototyping the head - arduino floras and LED, soldering & programming
prototyping the head – arduino floras and LED, soldering & programming
threading the wings with optical fibre
threading the wings with optical fibre
shaping the head – recycled eva foam
poor froggy - recycling
poor froggy had to die to make the head.. recycling is hard somedays
Finished head
Finished head

Electronics include :

2 x Adafruit floras
lilypoly batteries
1 pixel jewel
6 pixies (super bright leds)

Performance shots

Video

Intagram

For more #bug adventures check my instagram feed

https://www.instagram.com/wolf_ifritah/?hl=en

Effective e-commerce websites and metrics

So we all want a “beautiful website” and beauty is in the eye of the beholder, however good design can also improve a sites navigation open up to a new audience and increase sales.
I recently took on a contract role with an organisation who’s old site was in dire need of both a visual refreshment and a code overhaul.

Choosing a CMS

So my poor client had a propietry CMS (not open source).. I felt obliged to rescue them from it. It was over 5 years old, no longer supported by its creators and just not up to scratch on managing files, being accessable or mobile friendly. For me it’s natural to move clients to WordPress its open source highly customisable and easy to make standards compliant.

Before and after a design renovation

before frontpageDesign  wise the  original site looked like it had been made in the 90’s with a funky top and side menu that was difficult to navigate and update it was not doing my client any favours. 
But before we could replace it  I had to  get some  concepts and ideas about what might work better and what the
before general formcompany wants.  My own wishlist was quite long:

  • accesable(wcag2)
  • RTO compliance
  • Mobile first ( hamburger menu )
  • html 5
  • All courses on dynamic list
  • Backup system
  • https (on all pages)
  • User driven

Mock up stage

I use  mockups and wireframes to work  out some  layout basics, many modern  sites use parallax and scroll down  So  I wanted to do that and define clear sections of the front page. 

I tend not to have images at this stage as it distracts the client from addressing the real layout. We have  a top section with the menu and a massive image slider. A call out section that clearly defines the key business services and links though to meet those needs. 
A “brag” section to inform the user of the companies achievements followed by a featured courses section that puts the most important  thing on the front page.. links through to book featured courses. Followed by a bottom menu for fallback and  user friendliness. Having sorted all the main elements and got some kind of sign off we are then free to  start the build.

Key design features and benefits


full final front pageAs you can see  the final  site is super modern, featuring  clean but simple design elements. We went out of our way to take our own  photographs featuring  female and male students in workplace situations. 
I worked collaboratively to make custom site icons for the 4 sections ensuring they are industry specific and not just generic stock icons.  
One important factor for me was to generate a dynamic listing of all the courses, as the old site had no single page that listed all available courses and even if I created one it would be difficult to maintain as  such information is  likely to change. This seems like a small ask but it also seemed vital to the sites success.

For this I used Woo commerce as it allows categories

and should the client want to use the selling system, its powerful and has many options.  Woo naturally  generates a “shop ” page that can be ordered and  highly visual with clear calls to action like “book buttons”.This   list  will automatically add new courses – no maintenance needed.

I needed to ensure the main menu was more  user friendly so I’m using a “mega  menu ” as i find older users have issues navigating with drop downs and many of the clients are over 30. Nice clear section headings help keep it feeling organised and some courses can be listed twice theres a lot of control over how and what it shows. 

custom 404

Custom 404’s add an element of fun to what can be a frustrating user experience.

Improvements to the search functionality and availability and  internal links built to help users find their way around the site. 

Product pages

information blocksGood design shouldn’t stop at the front page. Each product was carefully looked at and key elements a user may need to know were put into a information block so students can at a glance identify the cost, duration and outcome of a course. Imagery was created for each course to help identify the key course subjects, and the way the course is to be delivered. 

Using accordions to  keep the clutter down we were able to  get clear repeatable information blocks such as prerequisites, terms 

and conditions, funding and  an enquiry form on every page. 
Dynamically generated bookings lists  populate pages giving users choices about when courses are available and making bookings possible on a mobile and a tablet. . 

Half the battle with sites like this is presenting information with clarity and consistency.  Using  modern CSS we were able to use process maps and charts, some fun UI additions such as fontawesome for  icons that will scale. This site has many features  I’m super fond of and  hope will take the client into a new era of web.

Metrics and analytics

google goalsSo good design is more than just the visual, for a commercial website to be  “successful”  you should somehow measure that success. For me thats all in the  google analytics. It’s early days yet but the old site had a conversion rate (for bookings) that was on average 2.5-3.5 %  and currently the new site has 21% . I’m happy to say the new  site  is working twice as hard for the company as its predecessor, with  mobile bookings now a possibility thats 1/2 the sites traffic now able to use it fully so I’m pretty happy with the result. 
Check out the site yourself https://www.jbhunter.edu.au

 

Mermaids – Adult colouring in pages

So the benefits of colouring in as a therapy for adults  have been in the news lately, I’ve been inspired to begin the journey of making tatto mermaid -adult colouring in pagemy own.  Face it there is a childish joy in colouring in, It can be relaxing and apparently is proven to reduce stress levels. But don’t take my word for it  this article by the Sydney morning herald talks about it www.smh.com.au/national/adults-who-love-to-colour-in-20150404-1meg95.html.

Art with a capital A can be a thing that people in general don’t get involved in we view Art rather than interact with it So  it seemed to me that colouring in makes you engage with the art in an entirely different way. Its a perfect low tech interactivity.

I am working towards a book which I will in time publish and I am hoping to create about 24 illustrations of mermaunderwater - mermaid - adult colouring in pagesids for the end product. But I also believe in sustainability I really like the idea of print on demand because we only use what we need.  Also in talking to people they tell me they have beautiful colouring in books they dare not to draw in.. So perhaps being able to reprint a file is better.
So far I have 3 drawings finished and online , I have several works in progress – My process is to hand draw the works scan them, clean them up digitally (this takes some time) then upload them as high quality printable PDF’s .

Support the project & download

To distribute this project and get feedback I’m using patreon as a platform. Patron is an online platform to assist artists to find and work with people who love there work. It seems like a good system as people can donate small amounts of cash to support an artist to make projects. Hard to explain but its like a permanent kickstarter.  You can contribute to my patreon campaign or just go snoop and stalk the project here: https://www.patreon.com/colourin – ill be posting regular updates and special previews and options for my patrons as well as access to the a4 colouring in sheets.

I chose mermaids as I have a family history with theses fantastic creatures, I like drawing the female form but I also love fantasy art. I love the detail in the scales and fins.

Buy t-shirts & stickers

Alternatively if you like things I have put up some of the works as t-shirts, leggings posters and stickers on redbubble with other works.

Avoid a Google Mobile Ranking Demotion with responsive design

aeoncadamy mobile site - iphoneSo Google just announced a new algorithm for search rankings that will actively demote sites that are not mobile friendly. The word “Mobilegeddon” is being bandied about.

This is because your users want a mobile site according to Google 75 % of consumers want a mobile friendly site, So its not just affecting your search rankings its loosing you business.

So what can you do to avoid being demoted by the google mobile ranking algorithm ?What can be done?

Check & Test
Pick up your smartphone and go to your website.

  • How long does it take to load? (over 3 seconds is too long)
  • Does it look good ( does the content scale well can you still read the text ?
    remarkably simple i know but you’d be surprised how many sites fail this test.
  • Is it easy to navigate ?
  • googles own mobile test : /webmasters/tools/mobile-friendly/

So what can be done?  If your site isn’t mobile friendly it was probably made several years ago anyhow and its time for an overhaul.

Responsive design

Responsive design is making a site that scales to fit any device so one site reshuffles and scales to fit smaller screens like smartphones and tablets. If your site is responsive and fast it will adhere to google’s new rules and avoid demotion.  It just takes some CSS and Javascript magic but its can be done and is remarkably easy. If your using WordPress most of the basic templates like twenty fourteen and twenty thirteen will scale to fit most standard devices so you don’t need to worry.

The image on the side is a WordPress site running a customized twenty forteen theme as seen on a mobile (Iphone) This did not take hours, just a few tests and a little code. Most of the sites I have made in the last 4 years have been responsive and optimized for mobiles.

Speed testing

We also like to speed test sites speed of loading is hugely important and will impact on whether your customers stay on your site or even get to it. Face it there is nothing more annoying or rage inducing than a slow site. Some of the tools we use are :

Some solutions to page speed are really quite simple they may include:

  • optimize all images
  • reduce garbage code (CSS and Javascript )
  • allow caching

If your worried about loosing Google rankings and loosing customers due to a  poor or no mobile site give us a call we are happy to help.

Electric Naga – LED performance costume & wearable electronics

Its hard for me to begin to describe this piece or where it fits in my practice its a “side project”. For years  I believed I had to keep my multidisciplinary arts practice divided – I don’t know why  I kept my design/ computer geek separate from my persona as a dancer and props manipulator (flow or fire artist) and my fine arts practice well away from both.

But she called out to be made anyhow.

I have always drawn characters from myth and legend the naga is no different. Nagas are part snake part human, they crop up all over East Asia , in Thailand and India and can often be seen at temple gates as guardian spirits.

initial drawings

I always start with drawings, initial concept art : theses wereelectric naga pretty rough and were followed by the first attempt at the mask.

electric naga

 

 

 

 

 

naga prototype1The first attempt at the mask was in fact an epic failure allow quite beautiful it was just to large to wear and didn’t address the need to stay on my head. Though I did like that it was made out of cardboard. The nose was too long to be manageable and on the whole it was far to fragile to cope with being used in a performance after breaking it a few times  I changed the base so  i had something that would firmly attach to my head. A friend suggested I use a foot ball helmet so I started again.

Naga head
Mask #2 was much better  made on a foam base decorated or rather encrusted with post consumer was1424504_10151815578222219_1238728294_nte, keyboard elements broken electronic components , spoons, forks and wire. I made the eyes so they could glow or light up. And returned to drawing as I had to work out the rest of the costume.

10644627_10152439197752219_4014065486933565887_o

The fans

1467209_10151815868942219_405893642_nI use fire fans frequently as a fire entertainer but I wanted some glow version of fans to use in inside performances where fire is not an option there were none available to buy so i figured I would make my own. prototype #1 was cobbled together from coat hangers and el wire they are good light but a bit wonky. After the first performance I decided they were not nearly bright enough and moved towards led fans though that was a steep learning curve.

I did get some amazing  photos of these in action though. (photos by sand hall)

 

DSC07705 DSC07708

 

 

 

 Experimenting with LEDs and flora

The second fans were created out of perspex – I quickly sketched up a vector drawing in illustrator and got theses cnc cut by a local shop, however clear perspex isnt so good and I wanted a pattern on the fans so I cut  (by hand) stencils and had them sandblasted to provide diffuse light.
1907574_10151985726182219_192340938_n 1920418_255019611334468_1969870596_n

 

 

 

 

 

I used  data driven leds I bought from the lovely folks at http://www.adafruit.com they have great tutorials which helped me navigate through what i needed to power, programe and set up the fans. 10387691_10152207804827219_1048274277088351195_n

It took some learning here’s a photo of testing the LED’s  running of the flora, the flora is a tiny little  microchip which you can program  to run the led strips in certain ways. To be honest the possibility’s with theses are endless I had to keep it simple to make it achievable to me.  I found all I really needed was :

By5rotSCUAAkjZp

 

 

  • The strip of leds
  • flora
  • mini lipo recharge unit
  • a switch
  • lipo (lithium battery)

I put them in a case to protect them and soldered them up- programmed them to do a colour change on a random number <256 and  they were ready.

Here is  a video of the performance

This project has taken over a year I realized that I had no income coming from it at all yet I had dedicated hours to making it , prototyping and performing it so I produced a t-shirt to help pay for my  “naga” habit.

Infographics

info graphic on council spendingRecently  I did some temporary work for Port Stephens Council,  The above infographic was made for local government week where we produced a four page spread for the local newspaper it is perhaps my favorite piece as it conveys complex information in an easily readable format.

I ended up doing quite a lot more print work than I expected below are some other examples of some of the graphics produced for Port Stephens.

certificates values integritycertificates values saftey
Print project (Indesign)
Certificates for key values – given to workers at milestone events double sided cards 2 of 7. The important  part of this project for me was that we actually sourced local images and stayed withing some branding guidelines.

raaf visit dog training
Print project (Indesign)
Internal communication – telling workers about the raaf’s visit for dog training.
poster a4 marine discovery property advertizment newcastle herald

Print project (Indesign)
Layout of adds for the local newspaper

Tribal& Trance Festival – a clean modern website design

It’s a new year and a new look. My brief for this was a modern & clean website for
Tribal & Trance Festival

screenshot

I moved the site over to wordPress so its not just a reskin – the previous site was joomla –
And so far the client seems really happy getting around wordPress. We wanted the site to be easy to navigate and as simple as possible.

Tools used :

Photoshop,Dreamweaver, wordpress, html ,css, php.

Process:

We used a standard theme (twenty thirteen) as a good solid base. and customize it  by making a child theme, this means when the original theme is updated it wont override our theme. Having set that up we started to customize. My aim was for it to be done with a minimum fuss and with future maintenance in mind.

plugins
Pluggins in wordpress are great, however you want to have a minimum amount of plugins on any site for several reasons. Firstly updates can kill you, yes that’s right inconspicuous update may cause a clash with other plugins causing it to fail or sometimes break other things. So I’m try and keep my plugin habit to a minimum.

Bare basics
Disable comments – I dont know what id do without this plugin , its simple but it does a might job. Often clients dont want comments on their sites, Even if they have time to moderate the comments most of them are spam anyhow, and really its a chore. To avoid security issues and spam violations this is a gem.

Some sort of backup !
Rule 1 of multimedia always have a backup. You can restore a site from a backup, make clones and sleep somewhat soundly. Knowing that if the server fails, if the site gets hacked if you need ot move it in a hurry  you have a plan.

Special functionality
I’m always trying new things  I looked around at a few “event” plugins and picked one , although I could have built a directory of events with a pay pal link from scratch its sometimes faster and cheaper to grab a plugin and style it . the one I picked had extra features like  csv export  (exporting all the bookings to an exel file) , Ical integration and google maps.  Its not to bad if your running an event based site so ill give them a plug  its called event organizer pro.

Budget responsiveness
Whats responsiveness? its how your site looks on a mobile and a tablet eg  smaller screens.   Twenty Thirteen is fairly responsive..but it did require a few tweeks. As I was using  the main header section for the logo and for some reason.. (dont ask me why) The header doesn’t scale the image !

Ok well there’s a few ways to tackle that.. you can write your own function , hack the header.php file and general spend a great deal of time messing about and testing  or…
you can do it with CSS (cascading style sheets).

Here’s my fix for what its worth – load smaller headers  in the media query.  It sort works ,I don’ttf mobilet consider it beautiful. I made two smaller versions  of the header.

A tiny but mighty one at 400 pixels for mobiles  and a slightly larger one for the tablet at 600 pixels. For me that’s great, load time will be faster, the logo is scaled correctly – a little under whats available just to be safe . ttf_header_tablet

 

 

 

Then you have to load them in the CSS (cascading style sheet)  here’s an example:

@media (max-width: 480px  or what ever your target) {

     .site-header {
    background: url(images/load a much smaller header! );
    background-repeat:no-repeat ; (unless you want an ugly tile..)
    max-width: however wide the image is;
    max-height: the image hight;
    background-size: 400px Auto !important;
            }
}

Social Networks 3 Simple Rules

We all know in this day and age social networks are a great form of marketing. Often I find client reticent to use them, I guess theres a great deal of misinformation out there on social networking. Theres also a plethora of pithy advise.. like “just be yourself”.

Simply put if your not using social media your missing out on connecting with your target market -in non marketers speech thats your customers and potential customers. Social networking is free and though it may take a little maintenance and effort its well worth while. But I have a few tips.

Glitch net website

Website

 

glitch facebook

facebook

1) Consistant Branding
While this may seem like a no brainer its vital. your social networks don’t reflect you as a person but your brand. Your logo or a derivation of your logo should be present, your key colours if possible and something that connects to your online and print marketing.
For example:

glitch net twitter

Twitter

 

 

 

2) Choose your network for what its good at: I find this one the hardest to explain. 

  •  Facebook – everyone is on it its pretty much a must have.
  • Twitter – possibly the most misunderstood social network. A must have if your in the geek market , wonderful for instantaneous support on products or services, great for quick questions.  Worth trying just to see how many of your customers use it.
  • Linked in – the ugly duckling of social networks (so not where the cool kids hang out) However if your doing business to business marketing or even looking to connect with people in specific industries its worth getting onto – its company marketing is terrible you will have to use your winning personality and business contacts.
  • Pinterest & Instagram – personally I’m a pintrest person if your product is visual, pretty and desirable it will go well here. I call it cloud based scrapbooking and who wouldn’t want to be collected and part of that. Instagram on the other hand is good for constant visual updates.
  • youtube – if your content is or can be explained in a video its a fine idea. People respond to videos more than plain text or static images.
  • Others -there are so many theses days its hard to keep track off however a small social network thats user specific may well be worth investing some time into.

3) Connect and Engage !
Please, please don’t just blast out boring repetitious sales pitches learn to give this is not TV or media advertising. you’ll be judged on your form (the grace in which you do things in the world – so play nice and DONT SHOUT :{ ) and your content. While there’s nothing wrong with reposting stories about kittens it may not be in your best interest unless your business has some connection to kittens and  I strongly advise against stories about exploding kittens (I had to say that to a real client..).

Beyond that a plan is actually a good idea – you can talk to me about formulating a social network marketing plan personally I like to make a study of your competition and see how you can do better

 

Clockwork Moth Illustration

I’ve been looking at a lot of beautiful steampunk images. So I started a new illustration inspired by the concept of a clockwork moth here’s the final product  well the ipad case anyhow.

clockwork moth

Process – How the Moth Illustration is made

People often don’t know exactly how much work goes into a piece like this so I thought id walk you through it.

It all starts with a sketch, Yes I use old fashioned pencils!  Heres the initial sketch for the moth, though knowing I can flip the wings I drew only half of it. I’ll take a photo of the sketch and brining it into Adobe Illustrator.

moth_web

So heres a shot of work in progress in Illustrator, this process takes the longest, I can sketch up something in less than a few hours but then i have to painstakingly redraw it in illustrator. Why? because I find photoshop fuzzy..I like the clean lines of illustrator and though its a lot more effort it also means my finished product can be scaled to any size.

clockwork moth

Ok then it’s finished: heres the final Illustrator work which I uploaded as a t-shirt and a sticker. clockwork moth final

And then last but not least I put it back into Photoshop to lay it on the wooden surface. Phew – I’m not even going to try estimate how many hours it took.

Iphone scetches

Theses are just silly doodles I do when im bored, in meetings, traveling. I have a wonderfull little scetchbook app on my Iphone that I enjoy fiddling with from time to time. Enjoy the weirdness.

bear

mizaakis_child

 

thing

glitch

urso

yoda

samuri

 

 

cat

canibal

owl

mozzi

inuit

goat

mothra