What to inspire and sketch when creating interfaces??

[JonZ_]

Hello, I'm an interface designer and I am a bit toppling my experience about skinning interface for music application.

For years I've been looking around the net for inspiration, there's almost only one I always know for it quality and it Skin Factory. But I'm a bit exhaust to pick my inspiration over there as I also fear to be another clone...

I have to create full screen interfaces really easy to use for people who don't know much about computer or touchscreen interface, like Fisher Price but I can get as fancy as I could in the same time. One interface can be high tech style then another one could be Mac OS or Windows Vista like (keyword background) interface. I also need really attractive buttons and I mean really attractive Fisher Price like buttons. The type of button that it need to get the user attention quickly and really distinctive. It kinda annoying when I try to do some hightech theme for example, but it a requirement... Buttons is what is killing me as I rarely reach a consensus among the team.

I was wondering what I could do or if you have suggestion (or any sites!) about this whole situation.

Thanks!

[_Mario]

There is this thing called 'graphic design' (or to throw a wider net 'communication design'). If you learn something about it and its relation to interface design you should have enough tools to improve your working situation.

A few basic keywords are font, grid, layout, layout grid, typeface, and typography.

This should lead to a lot of information if used wisely (Google, Yahoo,....)

A basic knowledge should help you with the hierarchy and composition (as well as the details) of your interface.

In the end this should help you decide if you really need a "fancy", "Fisher Price", "high tech", "Mac OS" or "Vista" button or interface.

[JonZ_]

The thing is I we already doing that, and we are forced to break these rules a lot due to limitations of real estates, power and lack of customizability. I am given a certain space to work on and these interactive area often is not allowed to move. And not talking about typography which is also restrained to very few.

I speak to get more visual style. Things that would make my designs unique in term of colors and textures.

I have total control of visual style and such, but not in layouts.

[Seedling]

Oooh, a UI artist! You guys are a rare and sought-after bunch. :)

There’s an awesome little book called “Picture This; How Pictures Work”, by Molly Bang, that’s about pure abstract image design that might be up your alley if you’re looking for theory. Or if you’ve had enough of theory and you’re just looking for pretty stuff to layer on top of the abstractions, try a museum or a hike in the woods. Get out and look at stuff. Inspiration may strike you while looking at the underside of a beetle or the arrangement of branches between two trees.

Cheers!

[_Mario]

The thing is I we already doing that, and we are forced to break these rules a lot due to limitations of real estates, power and lack of customizability. I am given a certain space to work on and these interactive area often is not allowed to move. And not talking about typography which is also restrained to very few.

I speak to get more visual style. Things that would make my designs unique in term of colors and textures.

I have total control of visual style and such, but not in layouts.
The amount of 'useful' colours and textures for something is limited and restricted by the project and the medium. This includes things like type of medium (screen, print,...), size of medium (small, big), and especially the purpose of the medium.

You don't give much information so I can't help you. You mention that you have a lot of limitations but the visual style is what you can control.

Could this be translated like this: Everything is finished and your job now is to make it flashy? If that is true then you are not doing much interface/interaction design but just some polishing of an existing design. And in that case a good communication/graphic design foundation will help you especially because you have so many limitation (the predefined layout).

Even if you can not affect the layout (and other parts of the project), knowing more about why things work in a certain way will help you with finishing this.

Me dropping a few links to 'inspiration' won't solve anything for you. It would just seduce you to copy something that was made for something totally different and after that you would be frustrated because it does not look or work as good as it does in its original environment.

You don't need to look for inspiration, you need to find a solution, and to be blunt it sounds as if you don't really know what you are doing.

[JonZ_]

Well sorry to disapoint you. If I knew what I was doing I wouldn't be posting.

[Seedling]

Well sorry to disapoint you. If I knew what I was doing I wouldn't be posting.

Eh? Sounds like Mario can really help you then. Don't waste the opportunity to learn from someone who is willing to share what they know. :)

[_Mario]

Well, you don't disappoint me and I should probably clarify what I mean with the 'you don't know what you are doing' comment.

You talk about an interface and want it to be unique in terms of colour and texture. But that is the wrong way to look at it. You (sort of) should serve the interface, not use it as an canvas to show your skills.

You probably know how it's supposed to work and want to make it unique and create something cool. That is the wrong way of approaching this because the end user who has to work (probably for a long time and who knows for how long at a time) with what you have created most probably does not know how it works from the start. And that just creates an unneeded steep rise in the learning curve for the user.

A good interface directs the user (without the user knowing it) and make whatever it is connecting to the user easier to use. It should remove visual complexity and textures just add (for the most part) not needed visual clutter and noise to an interface. Unique colours just do nothing good at all if you don't consider colour psychology and interface usability when selecting colours.

The best interface is one where the hard work is not obvious. This is not an painting where you want to captivate the audience and lead it around on the canvas to explore it completely. You are designing an interface for interactions and to display information. Fast and unrestricted access to the interface is what counts.

It's comparable to a great matte painting in an film. You don't see that it is there.

Try to deconstruct the problem. That should leave you with some different levels of problems that you have to solve. Some will be very high level problems (e.g. the first read of the whole interface), others will be very low level (e.g. if you have to use very small pixel fonts some words could be hard to use, then you need to find another word (synonym) or change some other part of the design), and some will be in between (e.g. a change of a background colour for a button could negatively affect typeface legibility).

Now you can work on different levels at the same time, try to optimize everything step by step and finally find a balance. Do not look for 'cool' and 'unique' but for 'it works'.

You need o learn to work with the the restrictions and use them and not complain about them. Complaining won't solve any of the interface problems so learn to exploit them to your advantage. That is why a good diversified foundation is important, it makes it possible for you to work on anything and not just the few thing that you like.

I hope that explains it better than my last post.

And Seedling if you need user interface designer at your company, just write me a private message and we can talk about it.

[JonZ_]

I swear to you I already know all of what you just tell.... It nice to remind me what are my the basics (so is my employer haha) but my job REQUIRES to put themes and flashy colors. Kind of gamer interface, with textures and all. I agree that most of my job do create a steep higher for the users end, but I need to feed my employers and the customers with attractive ideas of theme and skins because we need to sell and project an attractive image in our products, and the analysts or the AD of the team help me to spot on the non-obvious interactive elements and learn to restrain myself to put useless details. If you want a larger description of what I do, let's say I am doing UI for drunk people. If you ever went to a bar and played with touchscreen games like puzzles type or even shootem up genre, then you have a slight idea of what my difficulties are up to. And believe me, they are cluttered with graphics most of the time.

My main problem is to find ideas, or great examples from famous artists and perhaps on why their stuffs works or what were their ideas behind because I feel to expand and refine my work hence why I ask here since the most of what I am doing in earlier development is to do concept arts of what an interface would look like, and make presentations. BUT I also asked in another forum specialized in skins the same question and they gave me better ideas and rather quick (and Seedling gave me at least an author suggestion). I admit that perhaps my original question wasn't clear or misleading and I am not perfect, I still learning the job even after 3 years, but I certainly did not expect to argue about theory of interface 101, even if it makes me thinks a lot.... or it was a mistake to just ask in the first place.

I think this thread is done :/

[Seedling]

And Seedling if you need user interface designer at your company, just write me a private message and we can talk about it.

I have no idea what our hiring needs are right now, but you could always send a resume just in case. :)

[_Mario]

JonZ_: Now it makes more sense. In your first post you wrote music application. That lead me to believe you were talking about music production software, and not a bar game. And when you mentioned fancy interface I thought you wanted to create some 'cool' Winamp style skin or something like that.

But your last post is more clear and if you need something flashy just buy some candy. You should find a variety of textures and colours either on the sweets themselves or the wrapper.

For colours it would probably be better to go for warm and high saturation colours for buttons (red, orange , yellow) and cold, with medium saturation (blue, green purple) colours for backgrounds. That plays nicely with the human 'atmospheric bias' (warm near, cold away) and creates a high contrast.
Go for a complementary contrast (e.g. orange buttons with blue background) but shift the background a bit to lessen the contrast and allows for a bit of variety. In the example above you could use blueish greens (teal) and purples (indigo?) in the background and not use as much saturation as in the buttons (while keeping the values in the middle to high range on both). That way you would still have a relatively high contrast but enough space to play with it.

Buttons that should be harder to see or identify you could push a bit in the direction of the background colours. But not so much or you create too much contrast between the buttons (which would create a better visibility).

All the colours of the components need to be arrange relative to each other because the human colour perception feeds off everything you see and does not perceive individual isolated pieces. That means if you take the colour example from above, implement it in a prototype and then adjust everything until it works.

As mentioned above: Try looking at different candy wrapper (and some very colourful bonbons/candy) for basic inspiration on texture.

And if your product is supposed to be placed in an area with drunk people go for the edible colours. Drunk people are somehow always hungry and if you use colours that remind them of food, it offers a subtle attraction bonus.