it's how you interface that matters

My Skinning and Interface Design Overview

The world of Interface Designing has been around since a long time, and still remains one of the most important aspects in human-to-computer interaction to a large range of a variety of people.

It would be nice to be able to make our designs that can be consumed by everyone with little trouble in this process, however in the world that we live in, it is a rapidly changing and evolving environment that is constantly developing for the greater good of humankind; from what I can assume.

Skinning for me has been a constant challenge in some regards, and I can say it has helped in my design process and overview of interaction.
I have been designing skins (and website interfaces - not as long) for almost 7 years now, and it seems that not that much has changed; it has just got a lot easier to make (conceptualise) with so many other people doing it, and a little more demanding in building a refreshing style against time consumption - keeping in mind your target audience.

What I have learn't is that you can't always get what you want, but you can get close.
With enough time and talent, persistance and patience, and working with the right people, this will help you create the most demanding designs with ease.

I won't be going through every little bit of detail and expose you to everything that I know about the design process of Interface Design and Skinning; I would rather want to give you some idea on how to help you with your own way of learning this.

One thing that I find amusing is how we regard people with who they know and what tools they use. I'm not that demanding, so I've found that it's not always the best things that will help you get by; or even make your life easier.

At the moment I am quite comfortable in using Paint Shop Pro (version X or X2) to develop my 'digital makeup'. I have used Photoshop CS for a short while, but I have found it un-rewarding.
The interface to any program is what matters to me; and I have found it a little awkward and sometimes useless with the time I have to spend making routine objects or modifying elements in Photoshop. Sure, there are tools in it that are highly regarded, but most I don't need to use or can do without. However we are all different and you may find it easier to use than myself.

I would like to say that I use the 'Industry Standard' program in all of my work, but not so far, and probably not for a while. So the following information on these pages will show examples that come from PSP X2, which is quite similar to that of Photoshop or any Microsoft derivative.

^ Top

Tips and Techniques in Interface Design

Now where to start? It seems such a long list to produce, so I will try to keep this short and sweet as possible.

I will assume that you have some understanding and have had some practice using your favourite painting program; that would be of great benefit to this section as I can skip outlining most of the interface elements.

What is very useful is understanding not just how to create some wonderful looking digital graphical Interface, but how it will be arranged for your viewer (web browser or winamp skin: v2 or v5).
This could be the more challenging part for you or to whoever has to take care of this factor.

To keep things simple, I won't go into any sort of animation graphics such as with flash or video that is based around website designing. I will concentrate on the Interface itself, and not so much how it will be deployed to the programmer.

Tip 1: Most times you don't need to have the best design ever to attract the audience you require. Most times it is what you are trying to say that will identify if your information is useful or not.

I have found that you can make an awesome looking piece of graphic but it is not appropriate for them to consider reading what your content is about - or in the case of skins - elements that appear to be a distraction, then the user may refuse to read or use your material/ skin.

So, in saying this, keep your designs simple, which then will help you be neater and cleaner in the process. Your audience will approve of a design that is easy to view than something that is 'over done' and will do the opposite that what you intended.
That's not to say that Industrial type designs are not as good, it just depends on the context your after.

Tip 2: Collate and organise your information first, and then create the elements that encapsulate this information next. In the case of Winamp skins (in particular v2), you are set up with more of a template to work from, so half of the work is done for you.

So make sure what ever elements you make, that they compliment what information your trying to expose, whether that is static or dynamicly created, resizeable, and portable or not.

Tip 3: Colour choice is important, even if you use black and white. It's best to choose complimentary colours, however contrasting colour sets can be effective in other situations.
The same can be said about the contrast and saturation, so its best to check your material out on both LCD and CRT displays (at different resolutions if possible) to see if they appear as you would like them.

Remember that it can be useful to think or find out what colour scheme your audience would like most, and whether it could be possible to modify this with appropriate measurements.

Some users may not be able to concentrate using one set of colours, or have a hard time reading with issues such as colour blindness.

Tip 4: Shading Tones and Lighting can be very important when displaying elements or objects of 3D nature, or even with contour edges for example.

Although not easily made for some people, having appropriate reflections - depending on the surface and texture - can be very important to convey your element in a natural way. This can take some practice, depending on what program you will be using.

Tip 5: The shapes of your objects or others that are situated around other objects can be the 'make' or 'break' on your overall theme that you want to display.

It's good to experiment with the shaping of the elements in your program or sketch some out on some pad paper beforehand. (The latter part will be easier to translate into digital drawings later.)

Tip 6: If you are using layers in your digital drawings, try to merge most of them that will not be needed for modifying later.
Of course you can use layer groups to make it easier to edit with, but if you need to save an image (for example: a .psd - used in Photoshop) and open it in another program that won't read .psd layer groups, such as PSP X (not possible in X2), you won't be able to read these groups at all, but only the layers.

If your image contains adjustment or mask layers, and you need to port them into other programs like described above; merge them to the layer that the adjustment (or mask) layer affects. Make sure that you keep a copy of the file incase you need to edit the 'un-merged' version later.

Tip 7: If you have layers that are made for 'glass', i.e; generally for buttons, and these are used for a website, it should be safe to merge the glass layers onto their button background layers.

For Winamp skinning, you should keep the glass layers - whether that is for buttons or orbs - seperated from their respective background layers, as you would need to seperate these elements individually later when 'cutting' up the skin.

If you can suggest any more to add or think of any modifications to these, you can contact me at anytime. ^ Top

Tutorials to Interface and Skinning Help Guides

There is a lot of information about interface design spread across the internet, so I will say what I like to do to create website interfaces and then talk about the skinning part afterwards.

The first thing that I like to do is have an idea of how the interface will be layed out, in regard to the front page and how this interacts with the content linked from it.
Without leading into Content Management Systems, which take care of end-user editing, I will concentrate on the graphics side.

Basically you would have a page layout similar to Figure 1, although there are various alternatives depending on how you organise your information.


Figure 1

Normally you would have one menu, but sometimes this isn't enough and you could extend this to an alternative menu on the opposite side. The basic DIV layout is explained on the right.

I decided to do something different than normal and have the menu placed above the footer.
This is set out for when you have read info from a page, and you are generally staring at the bottom of it, I thought it would be most convenient to have it placed there being close to where your eyes are and where your mouse cursor is most likely placed.

So this is basically how to layout your content, but there are so many ways to have your content layed out that I won't go into which is the best for your needs. My only suggestion is that it is probably easiest to work with DIVs rather than absolute position objects unless thats your only alternative.

Here are some other links about interface design that may help you aswell:

Skinning Winamp is another interesting way to build up your graphic design abilities, especially small scaled and intricate detailing.

As there is also a lot of documentation published already from the creators of Winamp and other fans from this community, I have linked to some of this helpful information in the 'Skinning Resources' section further down this page.

^ Top

Winamp Skin Concept Designs

These skins are mainly made for Winamp Modern (with a couple of Classic ones included) and are in concept stages. Not all are of optimal clarity, and only stand as a visual demonstration of which way they are forming.

Some designs are made when I was looking to create some fresh ideas on a non-symmetrical shaped music player, and most of them are a few years old. All of these skins I started when using a CRT monitor, so now using a LCD I can see more stray elements that should be cleaned up.

Reviver

Reviver is one of the latest Classic skins i've made for Winamp that is almost completed with a few graphical elements such as slider animations, metal tones and colour settings to tweak.

Crazy Orb

Still experimenting with the shape, but most of what is there is how I would like it to be.

Loop

One of my later modern skin designs, shaped like a mp3 playing device. With a button click, I wanted a pop-down drawer for toggling open other windows.

Melacore

A quick design I did for a fellow skin programmer. He was showing a program that would help people with limited programming knowledge put their modern skins together.

Hydrozine

A classic skin that I was developing when the game Halo first appeared.

Un-named skin

Mere practice on a wing-shaped skin, that now could use a polish up on the metal. It's an older design when my metal effects was still coming along. Still, its quite clean in its layout.

Receptor

This is another 'Halo' styled alien themed skin that is quite dark with a blue and green coloured scheme to it. I was experimenting with the finer details and subtle highlights.

Graspe

Grapse is a nice skin in its curved design and flowing elements. Some revision is required on the buttons and glass and also on the orb backgrounds.

Most of the skin designs are done in greyscale so that when it is converted into a skin, with a bit of programming, you can modify individual skin elements to any colour on the RGB scale using gammagroups.

^ Top

Skinning Resources

Some of the best places to find help on your way to designing any type of interface is reading through forums and discussion groups on art and design. There are a range of places such as Deviantart.com to the forums at Winamp.com and Skinconsortium.com.

These places have a lot of experience coders and graphic designers that are known well throughout the skinning community, so if you need an answer to anything about this topic then you should find a heap of information if you head over to these places.

You can search the internet for 'Skinning Winamp' and find so many resources and various information, but to save you some time I have listed some appropriate links that I have found useful.

Winamp.com - Software Development Kits:
> How to make Classic Skins
> How to make Modern Skins

1001skins.com - Skinning Tutorials and Skinning Utilities:
> Classic Skinning Tools and Tutorials