Richard Stelmach - Web Design and Multimedia Portfolio

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.

As the national express east line got taken over by the government’s ‘East Coast’ they launched with a new logo and colour scheme but why does it look like something out of mid 20th century soviet Russia?

Part of my daily Photoshop for Web Design tips.

So you have your website design all ready to ‘cut up’ while you’re doing the html/css and think “what is the best way of exporting the different parts of this design, I wish someone would tell me, please I just want to know?”. Luckily for you I’m writing this incredibly comprehensive blog post of the bestest technique, honed to perfection over many many years.

Okay, it seems like such a simple task but in reality there’s no definitive way of doing it, some people crop, some people slice (if they’re stupid), and I’m sure there must be 1000s of different techniques. In fact google says there are 246,000 “photoshop save for web techniques” and google never lies.

My process is:

1. CTRL + SHIFT + E (merge layers)
2. M (marquee tool)
3. Select the area you want as an image, this is easier if you use guides
4. CTRL + C (copy)
5. CTRL + N (new document - it automatically creates the document at the same size as what you copied)
6. CTRL + V (paste)
7. CTRL + SHIFT + ALT + S - save for web

badaboom - just set it at your preferred optimised setting and click okay, jobs-a-good-en.

I have finally succomb to Twitter, almost like the moment I finally realised a mobile phone could be useful in the year 2000.

But what do I twitter, pointless sh*t or useful pearls of wisdom from my years of web design experience and learnding.

Atleast temporarily choose the latter and bestow unto you my knowledge…..that’s if you follow me, currently I have 1 genuine follower and random weirdo. The 1 genuine follower is a programmer so i’m thinking may not enjoy my tweets too much!

So for the next 4 weeks starting today I’m going to chirp 1 tip per day. They may not be ground breaking, my favourite short cut, my favourite web gallery, but hopefully they will be of interest.

How will I get more followers, I don’t know, perhaps I could try begging?? Not to appear desperate for attention but…

please follow me!

It’s only taken me a year and a half to get round to adding these but here they are:

Christmas flash games

The ski and particularly the snowball game were quite tricky to create but I was really happy with the results at the time. The idea was to help entice customers onto the christmas special area and spend spend spend! My programming friends also allowed people to enter a prize draw if they submitted they’re score.

Beneath the evil marketings ideas I also enjoyed making the games! And I hope you like them too, despite their unseasonal timing.

I always like to show people work I’m proud of, maybe to ego trip or for an innocent pat on the back, I’m not sure. Lately I haven’t been able to share much I have done either as I’ve had to be secret or the sites haven’t gone live yet, hence the stagnated blog :-/

But anyway, I should explain the reasoning behind the ‘yay!’.

I’ve had 2 morale boosters which is always good.

(1) Recently I did a post on ‘top 10′ type lists overwhleming digg.com. Well I’ve kind of come to the conclusion that I usually tend to dislike them unless I appear on them!

http://sixrevisions.com/web_design/30-creative-examples-of-illustrations-in-web-design/

It’s pretty cool that I managed to get on this as I’m trying to further my illustration skills and it’s nice to know this site is still getting some attention even though I designed it over a year ago. + extra morale booster for appearing in the same list as a bunch of design agencies and famous designer Andy Clarke.

(2) Second morale booster is that mach4cs.co.uk, a site I did for Pontefract based, computer repair company got on a design gallery site, generating a few hundred visits, which is bound to help the site’s SEO:

http://www.cssdrive.com/index.php/main/galleryitem/mach4_computer_services/