Richard Stelmach - Web Design and Multimedia Portfolio

I enjoyed creating this jack in the box illustration to promote the soon to go live redesign of Superbreak.com.

I intended to have a strapline below saying ’surprise… we have redesigned… blah blah’.

Adapted to included a textured background for this blog post. I enjoyed creating the sketchy style in Adobe Illustrator and giving the box an elaborate / magical feel. The main thing on the spring is from the superbreak logo.

I just used this excellent plugin:

http://wordpress.org/extend/plugins/newsletter/

On my friend’s website - David Kupelian.

It’s fantastic. Was really easy to install, basically just putting in the plugin directory and then a few configuration things in the wordpress control panel such as sender’s name etc.

Then all you have to do to create the form is use a wordpress short tag of ‘[newsletter]’ in a blog post. There is a widget to include it on the side panel too.

The best feature is that you can create preset themes for the emails you’re sending out, which is greate to include a custom header and footer etc.

It has options to set the max bulk email sent at once which will prob help people who have limites on their server.

Just thought i’d share. Love it.

Haven gotten addicted to 99designs.com, I couldn’t help but have a peak to what contests were going. I thought I may as well put in an hour or two coming up with this design.

Click the thumbnail to have a look:

Unfortunately there’s a couple of designs rated higher than mine so i’ll prob lose again!

I’ve just entered a design showdown to redesign: http://www.aqa.63336.com/.

With only a couple of days left there’s already been over 80 design entries from around 20 designers.

Unfortunately everyone had already covered the commercial, clean, generic design style so I had to try and think of something a bit different otherwise they’d be no point entering if my design just looked like everyone elses. In my opinion (to prevent any future attack), the other designs, although professional, modern and quite appropriate, lacked character. They could have been done from a design templage - logo, apple-esq top nav, shiney top banner and that’s about it. O and rounded corners, we can do those now with CSS3.

Anyway, in my design I aimed to create originality and pick up on the fun factor of their brand. They aim at 18-24 who love MTV and the like - those crazy youngsters. So i’m sure these kids would appreciate a bit of design creativity opposed to souless, glossy corporate stylee.

Saying that I’m not exactly hopeful of winning this thing.

I can’t show other people’s work but here is my entry (click the thumbnail):

I design this site a couple of years ago for a friend and he’s finally wanted me to put it live. Being a while since I designed it, the site is a bit different to my current style, if I designed it now it would be quite different - probably simpler, not as textured and more monotone. Saying that, I still quite like it!

One of the main challenges was displaying the YouTube videos using the API and creating an image uploader that automatically resizes and saves the images, adding them to the gallery. I also created this a couple of years ago - why I didn’t find a wordpress plugin - I don’t know!

On the other hand, creating a bespoke CMS is sometimes simpler than forcing plugins to your will.

Anyway, take a gander and let me know what you reckon.

I recently created a poster for The Novl Cuisine Challenge, an experimental project by Craig Burgess and Dave Pannell, where they have designed a poster a day for 365 days. Crazy crazy. I tried to do a slightly modernist illustration, using few colours and basic composition. I added texture via Photoshop brushes. I used Dinner Deals as the theme as it a topic I do a lot of commercial work on, so taking another angle like this was refreshing for me.

I like these 365 day challenges people do, they’re great practise, really pushing creativity as you are (obviously) doing something everyday and forced to think of original concepts.

I have thought about doing something similar - maybe not for a whole year, perhaps a month. An illustration a day - that sums up the main event of the day, or feeling.

Another couple of projects I would like to do are a set of ten illustration based on The Brothers Grimm fairy tales, or short stories + illustrations of famous battles for children.

Both of which I will probably not get round to doing - damn my motivational levels!!!

The endless page / infinite page technique is becoming an increasingly common design feature. For people who aren’t familiar with what it is - it basically removes the need for paging or next / previous buttons on a page with a list of results. Instead of people needing to click next or a page number to see more results - be it a list of products or blog posts, when the user gets to the bottom of the page, it automatically loads in more items, if the user kept scrolling they could effectively see the entire list of items on one page.

This sounds amazing but as it’s a new feature the usability of the concept hasn’t seemed to have been discussed much. I have seen both good and bad implementations of the endless page and people shouldn’t assume that it’s always the best solution just because it’s the latest trend.

Good Examples of the Endless Page:

Film Review Friday

http://filmreviewfriday.com/

Film Review Friday works well as it has a large and clear ‘click here for more reviews’ button at the bottom of the list. As the user is clicking the link they are clear on what the page is doing when more results appear.

Bing Image Search

http://www.bing.com/images/search?q=creativebinge&go=&form=QBIR&qs=n

Bing works quite well as the endless list is contained in the scrolling box. This is good as it means the user can still access anything below the list and the page doesn’t jump around when more results are loaded in.

CSS Line

http://cssline.com/

This works fairly well as there isn’t much in the footer, so the user can still easily access the links, also it indicates when teh results are loading so the user hopefully knows what’s going on. On the downside, you still have no idea of when the list will end or how many results there are.

IDSGN Design Blog

http://idsgn.org/

Again, this design benefits from making the user click to load more results in. This allows the user to be clear on what the page is doing. They may have likely chosen this option as they have a number of links in the footer.

Bad examples of the Endless Page:

• http://www.paranaiv.no/inspiration
• http://doitforthefame.com/
• http://reformrevolution.com/
• http://visuelle.co.uk/

In my view, in these examples, usability suffers from the use of endless page. When the user scrolls to the bottom I think they are most likely to believe they are reaching the bottom of the page, and as the results are automatically loading, the user may be initially unclear what is happening. In the first example, Eventually the scroll bar gets tiny and is hard to browse the massive list of results.

Also there is no indication of how many results there are. The results are infinite but surely the user may want to know when it will end, or if they’re going to be sat there forever until the length of the page is unmanageable.

Also, if any of these pages had footer links, they could be unreachable.

Summary

So to summarise, I think endless page is far better when using the ‘view more results’ type link at the bottom of the page or have the list contained inside a scrollable box. When not used I think there are some serious usability issues with the page automatically extended without any user action and that case would favour going ‘old school’ and using good old paging!

Here are a few tips for keeping your Photoshop files nice and tidy for web designs.

Usually when designing I’m not overly tidy in keeping my layers nice and organised, and it’s probably not a good thing to be too anal whilst in the haze of a creative explosion, ordering layers when you might end up deleting them later.

But certainly when a design is signed off or you’re just tweaking it, it saves time to keep layers organised so that you can easily move things around, try out different sections etc.

Folders

Folders are the best way of keeping things tidy. You can really have every layer in a folder, things like “header”, “footer”, “top nav”, “left nav”, “background”.

Inside your main folders you can create sub folders. Say for example you have a top nav folder with individual buttons inside. Each button could have its own folding which makes duplicating elements and moving them around easy.

Naming

Again I would probably only name layers once a design has been signed off and more than one designer is working on the file. But as designing I will still name folders. I think it goes without saying - make them easy to understand.

Colour Coding

You can colour code folders by right clicking on the folder and clicking ‘Group Properties’. I don’t use this that often but sometimes comes in handy with particularly complex documents.

Deleting Excess Layers

This can be particularly useful when tidying documents up. When you get to the point when you know you won’t be using all the hidden layers you’ve disregarded as crap, Layers > Delete > Hidden Layers. The resulting cleanliness is beautiful.

PSD Templates

If you are creating graphics following the same format each time, creating a clean, organised PSD template is really helpful in speeding up the process.

For example, you may create images for a HTML email that need cutting up each time.

All you have to do is ensure that all the things you won’t be editing such as the header, footer are either locked or flattened. Always keep a fully editable version somewhere but flattening all the layers you’re not going to be changing makes the document simpler and saves file size.

Use guides to form the areas you’re going to be slicing up each time.

Don’t save over the template file. Keep this as the original template and each time you create a new version (such as a new email following the same layout), save it as a new document.

Easily Selecting Layers

One of my favourite shortcuts is using the arrow tool (V) and then CTRL+ALT+Left click the layer you want to select. In complex documents this is an absolute life saver.

In response to a recent tweet by Elliot Jay and discussion with Craig Burgess, I felt I needed to air my views on what skills a web designer should possess.

I think it goes without saying that a web designer first and foremost, should be able to design! This encompasses a wide variety of skills - creativity, knowledge of usability, accessibility, technical restraints, good communication, to name a few. A good web designer should be able to create a design that fulfills its objective.

A good portfolio seems to be usually the most important aspect when going for a job. Your work should speak for itself. But from a technical point of view, what should a web designer know?

Elliot Jay made a slightly controversial statement that all web designers should be able to code their site ( i presume he means HTML/CSS opposed to php, asp.net etc).

All the web design jobs i’ve seen have HTML/CSS as a requirement, it’s classed as ‘front end’, which the designer generally deals with.

But should designers be writing html/css and do they need to know it to be a good designer?

Certainly, design is a creative industry and most designers come from artistic backgrounds. Given that HTML/CSS is not artistic or creative, should designers be doing it and is it detrimental to their design skill?

Personally I believe that HTML/CSS is not to the advanced, technical level of programming languages such as PHP or C#, so isn’t hard for a designer to pick up. They’re not complex or mathematical and the amount of time taken to learn them shouldn’t be so intense that it takes away from all the things that enhance a designer’s skill.

Also I believe that knowing how a page is constructed, the possibilities and restraints of the web medium benefit the designer’s ability to create something suitable. And the best way of understanding this is to use html/css yourself and create websites.

In short, i don’t think there’s any harm in it!

Maybe if the process of having a guy doing the designs and guy doing the html/css was faster, but I don’t see that making much of a difference.

Print designer, web designer or ‘designer’?

It comes down to experience. I may offend a few people here but many web designers i’ve met who’ve come from a print background aren’t as good at web design as they are print. Then again with practise, there’s no doubt that their web skills would become just as good. There’s no reason you can’t be both or just specialise in one area.

Designer + programming hybrid?

I may shoot myself in the foot here as I do know a bit of php, asp.net, c#, sql, javascript and often refer to myself as a hybrid! Hey, I just love the name. But if a company wants the best programming and best design, hire a programmer and a designer. My design doesn’t suffer from programming but there’s no way I have time to get as good at programming as people who’ve been doing it for years.

Alas, I think I have aired all my views. In short, I think a web designer should know html/css as well as design.

Probably one of the nicest accolades I’ve had:

“My main area of focus is web design and I think that for 2010 we’re going to see more personalization in design. I think this will include seeing more hand drawn and collage elements and copywriting from a 1st person perspective. All things that will make the reader feel more of a personal connection to the face of the site. I base this on the number sites tending toward this trend and the response they have been getting. Some visual examples to support my theory Dan Whittaker Creative and Creative Binge.”

Taken from http://www.littleboxofideas.com/blog/features/designers-predict-design-trends-for-2010-part-i

It’s nice to be used as an example of design trends for next year, especially as I designed this site a year or two ago.

Though I’m not sure the whole illustrative / textured / personalised site will be a big ‘trend’ next year. I reckon it will be probably remain as a design style and fairly uncommon, making it all the much nicer when someone does it. There are obviously many different styles, and the websites that pop up in design galleries will hopefully remain diverse. My only prediction is that the whole minamalist, simple stylee with big text and featured image trend will continue for a while. It is a good stylee but only really works on small scale sites.