Richard Stelmach - Web Design and Multimedia Portfolio

I’ve decided to start offering this service again. In the past I’ve designed about 5 band websites (including pre-signed pigeon detectives!) and I quite enjoy them as they allow for creativity and also they have pose the challenge of matching the design to the style of music. I usually just do this by listening to the music and getting a feel for an appropriate style.

Not sure how will advertise this but I’ve started by posting on the Leeds Music Scene website, for what I think is a pretty damn cheap price of 450 quid.

Having done band sites before I’ve developed a decent CMS, created in PHP, that amongst other things allows bands to upload their own photos which automatically get resized and optimised. I’m also interested in taking on logo designs which I enjoy as they purely focus on concepts and design rather than any techincal lark.

Click on the thumbnail below to see a design of a site I recently did for a friend:

Now and again (i try not to be too obsessive about it) I peruse my google analytics. Perhaps this is through boredom or self gratification, I’m not sure but one of the highlights of this experience for me is looking at the weird keywords people have found my site with:

• ‘e-motivator’ - okay this probably isn’t that strange as I do have probably the best e-motivator device around, I hope the people who found it were motivated.
• ‘crap design for multimedia’ - it’s unfortunate my site comes up first when you search for this
• ‘best multimedia portfolio websites 2008′ - luckily this one cancels out the last one and I think this one is definitely more applicable!
• ‘can whales breath out of water’ - simple answer, no they can’t….or can they, actually I’m not sure but my blog doesn’t provide the answer for this anyway, it does tell you about liquefaction.
• ‘gay handshake’ - if you have ever shook my hand, you will know this is a ridiculous search term to find my site with seen as though it was created by me, who has an incredibly powerful manly handshake. I even did a picture about a ‘firm’, yes ‘firm’, un-gay handshake here.
• ‘high tack graphics pontefract’ - I’d like to think I’m not the source of any tacky graphics found in Pontefract but it seems someone must have been enraged by the low level of graphic design in Pontefract perhaps!?
• ‘john bunnell dick’ - he is a bit of dick but also an undeliberate comedy legend - find out why here.
• ‘what will i look like as an old person’ - unfortunately I don’t know. Because of the success of my facebook picture, I have vast amount of facebook and age related search queries. Check it out here if you want, but don’t expect it to have any kind of prophetic abilities.

I guess the moral of the story is that Google rankings don’t necessarily correspond with the truth, such as searching for what is the meaning of life, Google tells me it is “the fourth studio album from German thrash metal band Tankard”…. I’m pretty sure I won’t find the answer there :-/

I wouldn’t read TOO much into this picture. I did the heart and knife before, a litttleee bit expressionistic perhaps, but I wouldn’t worry about my sanity, I’m pretty much a certified sane person. Maybe I’m taking away any validity from this picture but more than anything I wanted to make something look good rather than make some amazing political statement, and the text fitted well rather than touch youth knife culture of Britain. :-/ Other text I considered - ‘abandon all hope’, ‘the children are our future’, ‘Do you feel anything’.

I like the knife and heart action but the picture isn’t quite there.

Maybe this picture would be better if I just kept my mouth shut. Atleast it draws attention away from my last post which was a bit below par.

No, I haven’t lost the ability to logically structure a set of words, also known as a sentance, this really is the top, top collections of top 10 lists! What’s better than the hundreds of top list posts that swamp sites such as digg.com? A post of the top 10 lists? Hey that’s getting pretty good, but NO, a list of the list of the list….awesome, now that’s good.

1. Top 10 Stupidest Lists - You’re right, they are pretty stupid, but that’s why we love them, ever thought about what to do with a newspaper, you may say read it, no retard, there’s about 10 more awesome things you can do with it than that - find out here, it will change your life.
2. The Top 10 of Top 10s - GOD I love top 10 lists, they provide INCREDIBLE information in bite size chunks. If you’re unable to read anything that’s not in a list, you will treasure this ‘article’, including literary greats such as Top 10 Crazy Science Things You Didn’t Know, it sounds absolutely mental.
3. The Ten Best Top-Ten Lists - We are blessed by so many great top 10 lists sometimes its handy to break them down further. The Ten Best is quite a statement, top ten lists are always incredible so the ten best must be something special. Yes they are, the ten most looked up words in 2007, something I have always wanted to know, almost as much as the meaning of life, and the word is ‘integrity’… I feel complete.
4. Most Popular Top 10’s of 2008 - 1000s of lists have likely been compiled this year to enrich our lives, what could be the most popular? Top 10 Obscure Google Search Tricks, sorry to swear, but I f*cking love searching on Google and with this list I could likely search all day until I collapse in a mess of drool and excitment induced perspiration.
5. Sun Sport’s Top 10s List - With top 10 lists probably being the highlight of all written word in the universe produced this year, you would wonder why they don’t get published in newspapers and the like, but they do! The Sun, pioneers of literary greatness have jumped at the chance. It cleverly has discussion links because that’s another reason I love top ten lists, they cause debate… “who’s the best Star Wars character?”, “It’s Luke of course, he is very skilled with the light saber etc”, “No it’s Chewbacca, he’s huge and has lots of hair, your Star Wars knowledge is horrendous”…. and so on, I love it.
6. Top 6 List of Programming Top 10 Lists - You may be thinking his article would have been better as a top 10 and I would have to agree, it has to be 10. Can you make room for hilarity, handy tips and sheer crazyness in just a list of 6?! Of course not, maybe the mundaness of reading top 10 lists got to him and he just couldn’t make it to the end…..arggg, have to keep going…
7. Top10lists.com - Being a top 10 list, I thought this post would not only be the best article I’ve ever written but maybe also change the world, but then I found this. An entire site dedicated to the dream that is top 10 lists. A dream born from an insane moment of inspiration and revelation perhaps?
8. Top 10 Lists from Brain of Brian - Brian’s brain must be an absolutely mental place to be, he’s a head case! Not only does he have a page which lists what top 10 lists he’s got but doesn’t actually lead to any of the lists, just to something called ‘Funny Boards’, he has Silly Postcards, Funny Philosophies. I wish I had Brian’s brain.
9. Interesting Top 10 Lists - debatable, personally I find all top 10 lists interesting and fulfilling but maybe these are particularly interesting, when viewing I found myself pondering in intrigue, a whole new top 10 experience.
10. Top 10 Weirdest Top 10 List - If I like a top 10 list, then a weird top 10 list is even better. ‘Top 10 Odd College Courses’, now that is weird, I am so freaked out right now I love it!

Complete, a sense of satisfaction, why have I wasted my time for so long with none-list posts when I could be producing material like this. I feel tarnished like I have sinned but it feels soooo good, adrenalin, excitement pumping through me, knowing that I will improve people’s lives with this sh*t.

And if you don’t get the sarcasm, I deeply apologise
If you hate top 10 lists as much as I do, please use the links below!

You don’t have to look far nowadays to see what’s becoming a typical feature on many sites, the horizontal javascript slider. Either through mootools, jquery or some other javascript framework, they make it easy to achieve effective results through little code.

The slide serves many purposes but I guess it’s a great way of getting extra information into a compact space. Intuitive controls such as forward and back arrows or numbering also make sliders easy to use and can offer handy functionality to users.

I’ve just developed my own slider using jquery for mach4cs.co.uk. Originally I developed a form for users to fill out so that mach4cs.co.uk could design a bespoke computer using the information provided by the customer. However, the form was quite long so the slider was a perfect way of simpliflying the process. Although the content is the same, splitting the form up into 5 bite size chunks makes it less daunting and easier to read.

You are welcome to use the javascript found here: http://mach4cs.co.uk/js/slider.js.

You will also need to download jquery.

You will also need to look at the html and css used on the page: mach4cs.co.uk. The relevant CSS starts at 272 and ends on line 342.

Probably should have displayed all the relevant code here, but hey, I’m lazy!

Let me know if you find the slider useful!

If you’ve read my two previous posts you may get the feeling I’m liking illustration of late.

I often go through design phases which to some extent I don’t like as I believe I shouldn’t be constrained to a certain style but at the same time I think it’s unavoidable for any designer.

As well as experiment I’ve also been looking at sites such as grainedit that has awesome daily posts on vintage illustration and design. I’ve always been interested in vintage design which you may be able to see in these: halloween, summer sale, kitchen and jack la lanne. But illustration is another step forward.

I recently had a nice subject matter of a rail offer and I found myself using flat shapes and along with my love for giving texture to designs, it seemed a great combo.

If you can’t see a train running along with smoke coming out, you probably haven’t got flash player installed! Either that or banners aren’t as good as I thought they were!

The banners provided an extra challenge of having a side and front on view. I gave texture by creating a transparent png in Photoshop and placing it on the top layer in the flash movie.

It’s hard to measure the impact of interesting or good design opposed to an in your face super mega tack approach but I would like to think the originality of the banners would attract people to possibly read them or give them a click.

[sorry for this horrendously large white space, but the banner is so high, i’m sorry!]

Today I’ve continued to try and improve my illustration by choosing an illustrative style for a design. The theme was ‘added extras’ so I wanted to create an illustrative montage, quite a common technique, I imagine originating from pop art. This was my initial illustration.

However, I found that the black and white didn’t quite work with the design so I needed to add colour. Also as the design needed a heading and strap line with it the text on the illustration made it too busy.

The illustration progressed to this:

I again enjoyed bringing it into Photoshop to add texture and a watercolour feel. I like how it has a nice friendly feel to it so was fairly pleased with the result.

I followed the style throughout the page by creating the following illustrations representing various things.

I love Photoshop brushes and now I love illustration so I really enjoy combining the two. Finally I couldn’t resist over stylising the main illustration as an experiment.

I’m still planning on doing some artwork around the chav/knife theme. Also I want to buy some ‘how to draw characters’ books to try and improve my character drawing skills.

Of late I have more and more been wanting to get good at illustration. Illustration is very handy in design and although I can do illustrations I have definitely not mastered it.

There are a few things that attract me to illustration. Firstly the expressionistic aspect. I imagine you can just put pen to paper and let your ideas and emotions flow, without need to even have something in front of you to base your drawing on. Secondly I’m a big fan of manga and anime which often inspires me to try it out myself.

This confuses me a little. I did A-Level Art and I think I’m pretty good at drawing real life stuff, especially with the pen. But I’ve never been good drawing off the top of my head. This is not to say I don’t have a good imagination. I can design and have always had a creative imagination, sometimes a bad thing when I watch horror films or Ghost Hunters International! If it is the case that illustrators have such a vivid imagination that helps them draw, I definitely envy them!

On the other hand it could also be practise, much like the BBC programme the other night “The Making of Me: Vanessa-Mae”. It explored the nurture or nature debate and settled on 50/50 which I think I’d agree with.

So there could be hope for me yet! I’ve been thinking on getting some ‘how to illustrate’ books. I’ve always liked drawing so it could be fun even if I’m just recreating characters in the books etc. One things for sure, i really need a small scanner!!! Last time I desperately photographed some drawings, what a crap idea that was…

I have been yearning for a creative project of late so illustrating could feed my hunger. I’ve already had some ideas to do some drawings about chavs and knife crime along with some depressing strap lines, so I’m really pining to do that. Hopefully i’ll have something up here soon.

Earlier I had to do a banner of the 02 arena, I saw a good excuse to use illustration opposed to photographic. Later I stylised it more. I love the combination of bringing it into Photoshop to add texture, giving it an authentic feel. I also experimented with lighting effects (filters > render > lighting).

Here are some nice links for illustrations i’ve noticed lately:

• 58 Wonderfully Cute Illustrated Monster Characters
• Will Murai

I saw some others but can’t remember where now Sorry for the crap list!

O and one last thing, I did manage to get top for Pontefract Web Design! Woo, a small victory, atleast for my ego. Though I didn’t get top for Web Design Pontefract, how bizarre.

As some will know I am from Pontefract, the home of sweets, liquorice and many a happy memory.

The allure of Pontefract, is, lets say, quite subtle, an acquired taste. Perhaps it’s the bald lobster men (as ponte-folk have been described) drinking on a summer’s day with bloated stomachs that have been finely developed with many a pie or the dilapidated castle, a reminder of our former glory that puts people off. Ironically, it was the wise Ponte-folk that knocked it down themselves, sick of all the fighting it attracted. An important part of their lives, this peaceful chasm would need to be filled with drunken brawls erupting from the fine array of drink pits that Pontefract prides itself on. (pictured right: the unhappy flag is perhaps meant to detract people’s eyes from the ‘castle’)

“Bloody Pomfret”, Shakespeare said, a more apt name than recently described on the Pontefract Liquorice Trust site:

“…this gem is almost hidden from the rest of the world.”

Almost hidden, unfortunately not quite.

Yet it does have many a redeeming feature. Historic buildings, cobbled streets and green fields. I can’t help but love it.

Not famous for it’s abundance of web designers, perhaps in a moment of self importance, only a moment, I thought I may have good google rankings for Ponte related web design. Yet in moment of terror I realised I don’t even get on the list for Pontefract. Most disappointing. I realised I didn’t have any meta action, which seems to have become important again.

With my legendary victory over Ed Stelmach many eons ago, I thought my battles were over. But once again I must tussle the unforgiving realms of SEO to claim my deserved place at the top of “Pontefract Web Design” google rankings. I will let you know if I am successful.

Until then you will have to gaze at my latest website, mach4cs.co.uk, he really does do beasty (as in powerful) cheap computers. This and some other recent additions has left my first portfolio page looking its bestest ever. I’ll just have to make sure I don’t put something crap on now to spoil it.

Lately I have developed a deep and twisted love for Photoshop brush sets. They are a great way of quickly and easily adding texture and depth to designs and their usage can be seen constantly on the web.

I think texture and depth are particularly important in web design. Graphic designers get the texture and feel in the material they print on and often flat colours seem to work better in graphic design as lighting and texture come naturally. I think web designers often need to use allot of gradients and layering things up to give depth and makes things tactile, authentic.

This is where Photoshop brushes come into their own. You can of course build things up with images but brushes give a quick and fluid advantage where you can just stamp texture onto the mask of the layer or create imagery when you can’t find the right royalty free image.

Here are some recent examples I’ve seen Photoshop brushes used:

• http://www.mikeposs.com/
• http://www.pixele.fr/
• http://mesa.cityofgrace.com/

Adding Photoshop brushes is easy. Once you’ve downloaded some, all you have to do is open your brush pallette (F5), click on the little arrow top right and then click on ‘Load Brushes’, the new brushes will then be appended to your list.

Here is a great site for free brush downloads - http://www.brusheezy.com/.

I’ve also made my own brush set, you can download it here: http://www.brusheezy.com/brush/639-Rough-Edges