HOME | DD

chaosLT β€” Interface-Design-Tutorial

Published: 2006-12-06 16:23:18 +0000 UTC; Views: 63186; Favourites: 838; Downloads: 2152
Redirect to original
Description Interface-Design-Tutorial

Hey Everyone,
So finally i finished a tutorial about Interface designing, i started this
tutorial about an half year ago xD. And now i found it and thought, that
i should finish this .

The tutorial doesnt show you how to make an nice orb, or how to create cool wires
I think there are enough Tutorials out there.

I want to show you in this Tutorial the Basic process you might go through to create an interface.
Well iam not sure if this is usefull for anyone, and i became quite sloopy in the end xD, cause
i just wanted to finish this .

I Compressed the Jpeg alot to get a bit smaler file size, but its still quite big :/.

But well,

Please tell me what you think .

// eww, and just because i cant trust deviantart, i uploaded the tutorial here:
[link]
so if the fullview doesnt work, just use that link

A huge thank you to everyone who faved/commented and showing interest for the "interface-art" in general.

I uploaded some PSD-Files which might help you understanding this tutorial better here: [link]
Related content
Comments: 197

chaosLT In reply to ??? [2006-12-09 15:17:54 +0000 UTC]

you could start by drawing some cool shapes .

πŸ‘: 0 ⏩: 1

ashie-chan In reply to chaosLT [2006-12-09 22:30:19 +0000 UTC]

yeah i guess ...i already is trying to make a cool shape..lol

πŸ‘: 0 ⏩: 0

111blur111 In reply to ??? [2006-12-06 19:26:45 +0000 UTC]

oh jeah biatsch ... das kommt in meine tut sammlung

πŸ‘: 0 ⏩: 1

chaosLT In reply to 111blur111 [2006-12-07 13:31:26 +0000 UTC]

. . danke fΓΌrn +fav !

πŸ‘: 0 ⏩: 0

jimmybjorkman In reply to ??? [2006-12-06 19:07:23 +0000 UTC]

Awesome tut my friend!

πŸ‘: 0 ⏩: 1

chaosLT In reply to jimmybjorkman [2006-12-07 13:30:34 +0000 UTC]

thanks jimmy xD, also for letting me use your stuff, i appreciate that !.

aand thanks for the +fav !

πŸ‘: 0 ⏩: 1

jimmybjorkman In reply to chaosLT [2006-12-07 14:35:23 +0000 UTC]

Your welcome Keep on making good tutorials hehe

πŸ‘: 0 ⏩: 0

ejsing [2006-12-06 18:00:29 +0000 UTC]

Amazing!

+fav

πŸ‘: 0 ⏩: 1

chaosLT In reply to ejsing [2006-12-07 13:30:53 +0000 UTC]

tnx !, also for the +fav !

πŸ‘: 0 ⏩: 0

sansculotte In reply to ??? [2006-12-06 17:44:52 +0000 UTC]

sehr sehr schΓΆnes tut.
respekt aber auch, dass du deine tricks einfach so her gibst. machen sehr wenige mit geilen interfaces.

chapeau und mein guter!

πŸ‘: 0 ⏩: 1

chaosLT In reply to sansculotte [2006-12-07 13:29:24 +0000 UTC]

warum sollte ich daraus nen geheimnis machen xD, und meinen stil kopieren wird ohnehin niemand, da wΓΌrde einfach viel mehr zu gehΓΆren.

danke fΓΌr dan +fav auf jeden fall!!

πŸ‘: 0 ⏩: 1

sansculotte In reply to chaosLT [2006-12-07 18:47:35 +0000 UTC]

naja gibt einige die kenn, die nix preis geben wΓΌrden

πŸ‘: 0 ⏩: 0

b0n1t0 In reply to ??? [2006-12-06 17:32:13 +0000 UTC]

sehr gut ...

πŸ‘: 0 ⏩: 1

chaosLT In reply to b0n1t0 [2006-12-07 13:28:04 +0000 UTC]

danke danke !

πŸ‘: 0 ⏩: 0

Rushlord In reply to ??? [2006-12-06 17:17:06 +0000 UTC]

Sauber

πŸ‘: 0 ⏩: 1

chaosLT In reply to Rushlord [2006-12-07 13:27:39 +0000 UTC]

ty

πŸ‘: 0 ⏩: 0

funk-art In reply to ??? [2006-12-06 16:57:04 +0000 UTC]

Schickes Tut, wird bestimmt einige erfreuen

πŸ‘: 0 ⏩: 1

chaosLT In reply to funk-art [2006-12-06 17:00:24 +0000 UTC]

hehe .
wenn ichs mir nochma so ansehe hab ich irgendwie das gefΓΌhl das wΓ€hre unvollstΓ€ndig, , vllt gibbet irgendwann nen ergΓ€nzungstut oder so , ma sehn.

Danke fΓΌr den comment !

πŸ‘: 0 ⏩: 0

designercom In reply to ??? [2006-12-06 16:54:53 +0000 UTC]

nice one

πŸ‘: 0 ⏩: 1

chaosLT In reply to designercom [2006-12-06 16:59:09 +0000 UTC]

thanks !

πŸ‘: 0 ⏩: 0

creativegrafix In reply to ??? [2006-12-06 16:47:43 +0000 UTC]

very nice tut

πŸ‘: 0 ⏩: 2

DampeS8N In reply to creativegrafix [2008-03-10 22:54:35 +0000 UTC]

Sorry, Creativegrafix, for hijacking your post.

It needs to be noted that this is NOT interface design. This is graphic design. Interface design is a profession which focuses, not on the looks of interfaces, but on the actual idioms used. In other words, Interface Design is about if you are going to use radio buttons or check boxed. About if you are going to use sliders or dials.

It is not about the graphics of said buttons.

If you are interested in Interface Design, pick up either "The Inmates are Running the Asylum" or "About Face" Both by a man named Alan Cooper. You can also check out Cooper's design company at [link]

This is a common misconception and one that is a problem even for the software development community. Many don't even know this profession exists. Let alone how vital it is to good design. It is the equivalent of an industrial designer looking into ergonomics, rather than good looks.

What you see in this tutorial will make your interfaces look better. It won't make them work better, and working better is what interface design is about.

Thanks for putting up with me. Again. No disrespect. This is a good tutorial, it just isn't about interface design.

πŸ‘: 0 ⏩: 1

chaosLT In reply to DampeS8N [2008-03-11 16:41:02 +0000 UTC]

Thanks for the comment.
I do understand your arguments very good. And i already thought about creating an own definition of the whole interface"-design"-thing, and what it means for me, so that no confusion occurs..

But well, I think that people who are looking for interface-design-tutorials here on deviantart much rather look for the "design" part .

πŸ‘: 0 ⏩: 1

DampeS8N In reply to chaosLT [2008-03-11 17:04:00 +0000 UTC]

What I described IS design. You can't make up your own definition to things. That's confusing. Interface Design is an actual job. [link]

What this tutorial is, is Graphic Design. It might be centered around making an interface pretty, but it isn't about making the interface itself.

Interfaces themselves are designed. Most software is designed like a bee hive. Things are places as needed and with no real thought. It is organic. But an Interface Designer is going to put thought into just how the user will use something.

There is artistry in interface design, but because of the general lack of understanding in the public eye, people typically end up poo-pooing the interface designer. Because they think it means graphic design. But interface design has nothing at all to do with graphic design. In fact, a text-only program can be designed with an easy to use interface.

On the web, interface design centers around page-flow, how the user is going to accomplish his goal, and widget choices. With Javascript, it means widget design. Such as creating a calendar selection widget to select dates, rather than using a group of pulldowns. Interface Design isn't about looks at all.

πŸ‘: 0 ⏩: 3

Axertion In reply to DampeS8N [2008-03-12 21:21:14 +0000 UTC]

as much as you may be correct...things change on the internet. Thats how things are. The words LOL and other internet slang would not exists if people like you were successful in keeping things correct. As far as I'm concerned, this is an interface tutorial. Interfaces are not limited to your actual working product but are also referred to as a type of graphic design. I'm a member of a club here on DA devoted to interfaces and yes thats what everyone here calls them. Just appreciate the tutorial and and accept that fact that sometimes one word represents more than one entity

πŸ‘: 0 ⏩: 1

DampeS8N In reply to Axertion [2008-03-12 23:28:10 +0000 UTC]

Normally I might agree. But the -real- Interface Design is having trouble. Software studios tend to ignore it. They have their programmers design the software, and while that might sounds like a good thing and a way to save money. That's also why 3D studio max and Maya (2 of the biggest 'dancing bears' in software) have no proper competition. It is why all 3D design software is badly designed. And it is why 3D animation is ALWAYS of a lower quality art, design, animation and creativity level.

It isn't because the people who animate them aren't as good, its because the people dedicated to learning the tool are good at software, and not as much good at animation.

Does it have to be that way? No. It is just that the makers of these software packages see no value in hiring Interface Designers to fix their broken software. To make it easy to learn and use. And ultimately, to make it more powerful by making it more accessible.

Software is in dire need of Interface Designers. It has enough graphic artists calling themselves Interface Designers. And this is why they keep having to make up new words to call Interface Design. Like Interaction Design. Because people like you water the term down and make it meaningless to the people who pay to have software created. And so when you go up to them and tell them they need Interface Designers to make their software easier to use. They tell you it looks fine how it is.

You are the reason 99% of web sites with 'good design' are static width at 1024. You are the reason they are covered in fancy graphics to try to make up for not being usable. And you are the reason nothing is changing. Because you claim to be what you are not, and are in greater number.

Why can't you call yourselves what you are? Graphic Designers. Is that a bad word? Does it not describe what you are? How about Application Graphic Designers. Or Look-and-feel Designers. Or GUI Skinners. Or Turd-Polishers

πŸ‘: 0 ⏩: 1

Axertion In reply to DampeS8N [2008-03-13 07:37:25 +0000 UTC]

I am a graphics designer that designs a type of graphics WE, yes WE GRAPHIC DESIGNERS call interfaces. Don't you get it! The word INTERFACE is not limited to your software developing nonsense. I could care less how the programs are made, congratulations. I think the only person affected by the terms "interface" when referring to graphics is you.

πŸ‘: 0 ⏩: 3

mazzery In reply to Axertion [2010-10-29 20:42:06 +0000 UTC]

vouch

πŸ‘: 0 ⏩: 0

Genosonic In reply to Axertion [2008-06-22 00:10:47 +0000 UTC]

I think that DampeS8N is right about Interface Design. As far as I know, that term refers to the thoughtful and logical arrangement of elements in an interface to improve it's usability and accessibility. This to make interfaces as intuitive as possible for the users.
Graphic Design on the other hand is in charge of making the interface appealing (pretty) to the user.

πŸ‘: 0 ⏩: 0

DampeS8N In reply to Axertion [2008-03-13 13:18:25 +0000 UTC]

[link]

πŸ‘: 0 ⏩: 1

Axertion In reply to DampeS8N [2008-03-13 21:27:39 +0000 UTC]

[link]

Interface graphical design club

πŸ‘: 0 ⏩: 2

AeroXF In reply to Axertion [2010-01-31 19:15:04 +0000 UTC]

Win.

πŸ‘: 0 ⏩: 0

DampeS8N In reply to Axertion [2008-03-13 23:33:14 +0000 UTC]

what people think Interface Design means according to google. That is, what is linked to AS Interface Design, the most.

[link]

There might be plenty of interface clubs on DA. That doesn't make them the authority. I know they exist. And they dilute what it means and make it much harder to fix the underlying issues with getting Interface Design understood.

What calling graphic design, 'interface design,' does, is make creating new interface idioms, new steps forward in design, much harder to promote. Because people assume you are talking about visual style, as opposed to cognitive recognizability as a function. Interface Design is what brought around the GUI. And visual style is the reason the GUI hasn't really changed since 1995.

πŸ‘: 0 ⏩: 1

Axertion In reply to DampeS8N [2008-03-14 00:51:50 +0000 UTC]

who cares honestly? A simple term isn't going to affect anything as you claim. The people that care what is what, thats good for them. They are what they are. We as designers call these type of designs interfaces. I didn't come up with it, no one can claim they did, it just happened.

So go off and make money like you are with your interface GUI projects with NASA and I'll go off and design "interfaces" that look badass

πŸ‘: 0 ⏩: 1

DampeS8N In reply to Axertion [2008-03-14 03:10:47 +0000 UTC]

That users can't use.

πŸ‘: 0 ⏩: 1

Axertion In reply to DampeS8N [2008-03-14 06:57:39 +0000 UTC]

we code, we sell, they use

πŸ‘: 0 ⏩: 1

DampeS8N In reply to Axertion [2008-03-14 08:26:03 +0000 UTC]

dance bear, dance.

πŸ‘: 0 ⏩: 1

Axertion In reply to DampeS8N [2008-03-14 23:01:12 +0000 UTC]

commencing dancing....now!

πŸ‘: 0 ⏩: 1

DampeS8N In reply to Axertion [2008-03-15 00:26:45 +0000 UTC]

Eventually, software of all types will be so common that people won't be willing to suffer through a bad interface to have it. One day, there will be some intelligent Linux team that puts together a version of Linux that has a better GUI than windows. That is all around easier to use, and they will sell it. One day. People will realize that good looks don't make for good ease of use. And you. You will be out of a job.

Unless you work for NASA like me. Then they'll just be catching up to the graphics phase. Seriously.. NASA is a terrible place for an interface designer like myself. They really don't get it at all. Its so sad. They are amazed by stand in graphics and hack database skeleton code. They think technology prototypes are the final product. They think proof of concept moves directly to launch.

πŸ‘: 0 ⏩: 1

Axertion In reply to DampeS8N [2008-03-15 08:02:16 +0000 UTC]

First, good looks will never fade, as PC performances increase, so will the graphics so there will always be room for new designs. If people had the choice between a shitty looking OS and a good looking one but both ran the same performance, it would be a "why not the better looking one" situation. (Keep in mind I said without substituting performance)

Second, Graphic design is a hobby which in which I make money out of (the best kind of hobby )...I didn't put my future in the hands of my Photoshop skills. I'm studying to be a computer science engineer.

πŸ‘: 0 ⏩: 1

DampeS8N In reply to Axertion [2008-03-15 08:45:04 +0000 UTC]

What will win is usability. The first OS to index files into a database and do away with the folder-based file system. To allow for infinite indexs, from year and genre for music, date created, version, and author for documents, and psuedo-folders which are files with a unique tag like "Our Wedding" which might be the user's wedding photos and videos. To implement smart cross-instance undo, redo, and auto-save. And to not force the users to understand how computers work to use them. Will take over the industry. It won't make a difference if it looks like crap or not.

These are the things Interface Design can offer.

πŸ‘: 0 ⏩: 1

Axertion In reply to DampeS8N [2008-03-15 19:01:35 +0000 UTC]

meh, good for them. I'm content with Vista Ultimate regardless of what people say. Its not my fault I'm not a noob at learning a new OS. It works fine, it uses folders, I'm happy.

πŸ‘: 0 ⏩: 1

DampeS8N In reply to Axertion [2008-03-15 20:00:18 +0000 UTC]

It isn't about being a noob. Its about how to sell something correctly. How to correctly make a product. The car companies don't force stick shifts down our necks and don't make us understand how an engine works to drive a car. It is there if we want to learn, but we don't have to. Computers force the users to learn how things work under its hood. And that's bad business sense. Most people don't care. And all those people who are computer illiterate are, in reality, just not concerned with doing MORE work to get something done with a machine that claims to save time and effort. It doesn't, our software sucks, and we need to fix it.

πŸ‘: 0 ⏩: 0

chaosLT In reply to DampeS8N [2008-03-11 18:47:45 +0000 UTC]

Am not concerned much with the definition, just want to help people

πŸ‘: 0 ⏩: 0

chaosLT In reply to DampeS8N [2008-03-11 18:47:04 +0000 UTC]

okay, than replace the last "design" with "style" .

πŸ‘: 0 ⏩: 0

chaosLT In reply to creativegrafix [2006-12-06 16:58:54 +0000 UTC]

thank you !

πŸ‘: 0 ⏩: 0


<= Prev |