GUI Design

I would like to see flat-style edges for the textboxes, drop-downs, and checkboxes...!

Quote:

---

Originally posted by ShindaSingh
VBGuy thanks for posting the link for Skybound extenders.

I'm a fresh newbie when it comes to .NET, and I've been following the instructions on how to install and activate the extender class, but was confused about one thing.

In the documentation it says:



Where exactly in my Visual Basic Project do I paste this code? I've tried a few different things all of them to no avail.

Hopefully someone can help

Thanks in advance.

---

In a separate module I have

VB Code:

<STAThread()> Public Sub Main()
   Dim frm As New frmMain
   Skybound.VisualStyles.VisualStyleProvider.EnableVisualStyles()
   Application.Run(frm)
End Sub

You must also have the startup object set to Sub Main

Quote:

---

Originally posted by nemaroller
I would like to see flat-style edges for the textboxes, drop-downs, and checkboxes...!

---

Cheers for that. I've taken that on=board, and agree, it does look nicer and a bit more crisp.

I'll post up another jpg when I've sorted some of the other screens out.

Appreciate your input.

If you need to change the GUI controls out from the standard one...

try this:

http://www.vbaccelerator.com/home/index.asp

Good GUI design takes a lot more effort than most people put in. In addition to custom coding components, it's also important to think about program flow, workflow, information flow and navigation.

Here's some of mine:

This is a program to manage jobs in my IT department
http://www.v12digital.com/screenshots/jtaskbeta2.jpg

This is in development
http://www.v12digital.com/screenshots/mvcobra01.jpg

Hi PaulB,

those gui's look nice. Which controls did you use for the grid and the list? The scheduling component look familiar to , but i can't seem to recover the name yet...

Regards,

per-i

Quote:

---

Originally Posted by per-i

Hi PaulB,

those gui's look nice. Which controls did you use for the grid and the list? The scheduling component look familiar to , but i can't seem to recover the name yet...

Regards,

per-i

---

They're all custom written. As for the scheduling component... I got the idea from iCal on Mac OS X.

PaulB,

Your UI's are sh*t-hot!
Put's my work in the shade!

Lee

Quote:

---

Originally Posted by LeeSalter

PaulB,

Your UI's are sh*t-hot!
Put's my work in the shade!

Lee

---

Thanks. :bigyello:

No problem mate. Credit where it's due!
Do you have a background in design or just a natural flair for it!?

Hi Paul,

Your work is absolutely great. I assume you've been programming for a long time or had some real good training in creating custom controls

I'm coincidentely busy (just started) reading about creating your own user controls. Must say it's mostly greek to me.

Can you maybe suggest some site, material one should look at when you get into this topic?

I really need to develop a custom control to display multi-dimensional data (mdx query results) that enable the user to drill down on dimensions, levels , members , etc.

Once again (and like Lee said) your work rocks!! If brains could be inherited, I wanted yours! :bigyello:

Cheers

Quote:

---

Originally Posted by LeeSalter

No problem mate. Credit where it's due!
Do you have a background in design or just a natural flair for it!?

---

I've always been artistic, so that's the natural flair part... but I've also had nearly seven years of application development experience. In that time, I've come to the conclusion that the slowest part of a system is the user. The only way to make the user work more efficiently is to make the user/computer interface more efficient, that is to make an intuitive GUI that works well.

I've built up many of my own GUI design principals. To start with I look at Input and Output. That is what the user expects to put into the system, and what they expect to get out. From there I think about navigation, workflow and information flow. In the two GUIs I posted above, workflow goes left to right, and information flow goes top to bottom. It's also important that fundamental input tasks in the GUI are not disconnected from output in the GUI.

For example, in the appointment screen I posted... the user can click and drag any appointment around the screen to reschedule it. They can also click and drag to resize the appointment. If the user had the click to select an appointment, the click a button to edit it in a pop-up window, the workflow becomes jagged and counter-intuitive.

You may also notice I use visual cues. The highlighed appointment is a more solid colour, but to draw the eye in easier, the column becomes highlighted and the name of the person is bold.

I always design my GUIs first because it helps with the design of the program. What type of data is required and how the internal code architecture should work. It's the ultimate specification in my book.

Quote:

---

Originally Posted by NicoNel2000

Hi Paul,

Your work is absolutely amazing. I assume you've been programming for a long time or had some real good training in creating custom controls

I'm coincidentely busy (just started) reading about creating your own user controls. Must say it's mostly greek to me.

Can you maybe suggest some site, material one should look at when you get into this topic?

I really need to develop a custom control to display multi-dimensional data (mdx query results) and seen a great sample and can just dream to create something like that.

Once again (and like Lee said) your work rocks!! If brains could be inherited, I want yours! :bigyello:

Cheers

---

Thank you so much. You're making me all big-headed now lol.

I taught myself programming, so I don't have any formal GUI design qualifications, but I make up for it with a lot of experience (over 6 years commercial experience). The best thing to do is draw out the GUI on paper or in a graphics program and try to work through the different actions. What the user must do to do a task, and what the resulting display should be like. Then try to make all tasks as consistent as possible. I often end up with a really simple GUI which does loads of tasks.


The simplest solutions are often the hardest ideas to come with.

Well, it certainly produces fantastic results.

I've only really started development in the last 2 years and find the GUI design the hardest part. Finding a solution to a coding problem is easy, just look on here, in a book or on Google, but to rectify a poor, drab looking User interface is infinately more difficult and, I think, requires some natural flair for design.

As Nico asked earler, do you have any resources, books etc that you swear by to help you in your GUI design?

Quote:

---

Originally Posted by LeeSalter

As Nico asked earler, do you have any resources, books etc that you swear by to help you in your GUI design?

---

My first inspiration was Amiga OS 3. It was much more intuitive than Windows.

The biggest inspiration for me in the past two years has been Mac OS X and Apple's iLife applications. Since I bought a Mac, I've seen how well it all works together, and that has helped me with my recent GUI designs. I've always created easy to use programs (200+ users told me so), but since studying the way Apple creates GUIs, I haven't looked back.

One place you might want to look is here.

One more thing...

I find that creating a UI component for a specific task is much better than trying to make a generic component do the same thing.

Cheers buddy! :)

BTW: I don't have VB .net yet. My Windows programs are written in VB6. lol

Btw, here is the final GUI that I went with...

http://www.saltertech.co.uk/ScreenDump.bmp

Wow this thread was very eye opening...

I've been using VB6 for a while and just got my self VB.net 2003. I was very dissapointed seeing that the controls were not Xp/Office style. How does one go about achieving this? Is it best to use a 3rd party control? Another problem I have is with the toolbars again how difficult is it to produce a VB/net style or office style toolbar?

Where can i learn about creating custom control?

Thanks a lot

Read what is said earlier about the VisualStyleProvider Control From skybound.

Check it out at www.skybound.ca

Quote:

---

Originally Posted by NicoNel2000

Read what is said earlier about the VisualStyleProvider Control From skybound.

Check it out at www.skybound.ca

---

Yup, thanks..

What about the toolbars? I feel like such a newbie asking these questions but quite frankly I am when it comes to .NET. Seems like a whole new world to me :(

no probs

if you stumple upon any articles, reading, whatever re creating your own user control pass it on will you?

If you happen to have the vb.net resource kit on your machine, there's some nice articles and sample apps on that.

cheers

Sure thing. It would have been nice is m$ just included this functionality in the first place... I guess they just didn't want people making applications which looked as good if not better than theirs ;)

Well, not sure why, but you can say (in your sub main)
Application.EnableVisualStyles (but for some reason this only work if you add a doevents straight after this)

someone advised me (here, where else) to use skybound's control as there's bugs in ms's VisualStyle thing.....what's news?

Anyhow, Skybound is the bomb. I don't have a single app without it.

Too bad is when you create a dll for another application, you cannot use it, cuz the exe must use it, and if it's out of your hands, well, you can blame MS for that.

Quote:

---

I was very dissapointed seeing that the controls were not Xp/Office style. How does one go about achieving this?

---

I used the NETXP controls from Dacris Software for my app....

Bloody hell. That is the most brilliant listing thingy i have ever seen...

http://www.v12digital.com/screenshots/jtaskbeta2.jpg

Very sexy indeed.

Did you inherit from any particular windows control or did you write this from scratch (new usercontrol)? Is it fast to draw that, what's the overhead like?

I must reiterate praise from earlier posts: bloody nice work mate.

Quote:

---

Originally Posted by PaulB

BTW: I don't have VB .net yet. My Windows programs are written in VB6. lol

---

OMG!!! Just read that now. Don't suppose you want someone to port your fancy list control to .Net do you? (I mean the one on the link in my last post)

Quote:

---

Originally Posted by wossname

Bloody hell. That is the most brilliant listing thingy i have ever seen...

http://www.v12digital.com/screenshots/jtaskbeta2.jpg

Very sexy indeed.

Did you inherit from any particular windows control or did you write this from scratch (new usercontrol)? Is it fast to draw that, what's the overhead like?

I must reiterate praise from earlier posts: bloody nice work mate.

---

Ok, ok enough head massaging! :)

If anybody else is interested in improving their GUI designs, then I heartily recommend this book and this one is also supposed to be good, I have it ordered and should arrive today.

The first book, teaches you about the principals of good UI design in a light-hearted, easy-to-read way. It has no code in it whatsoever, but has a series of chapters focused on how to design from a users perspective. Definately worth a look.....an easy to read book.

I only write code to impress other coders, who cares about the user hehehe
:D

Not really.

Quote:

---

Originally Posted by wossname

I only write code to impress other coders, who cares about the user hehehe
:D

Not really.

---

LOL!

Quote:

---

Originally Posted by wossname

Bloody hell. That is the most brilliant listing thingy i have ever seen...

http://www.v12digital.com/screenshots/jtaskbeta2.jpg

Very sexy indeed.

Did you inherit from any particular windows control or did you write this from scratch (new usercontrol)? Is it fast to draw that, what's the overhead like?

I must reiterate praise from earlier posts: bloody nice work mate.

---

All written from scratch. The lowest end computer the software has to run on is a 700MHz Duron with 256MB RAM... so I know my bottom margin. I test on an old Sony Vaio laptop: 650MHz P3, 256MB RAM, Neomagic graphics.

The main overhead is on accellerated graphics, so a reasonable graphics card makes it silky smooth... and by reasonable I mean something as basic as ATI Rage 128, or nVidia TNT etc.

This is what I'm working on at the moment:

Example 1
Example 1
Example 1

Hello Paul,

You're a complete git and I hate you! :D

Quote:

---

Originally Posted by LeeSalter

Hello Paul,

You're a complete git and I hate you! :D

---

lol thanks. :)

Although I still need to make a replacement scrollbar control.

Damn fine stuff mate...once more.
Where do you begin to design controls like these??

I start a new job on Monday as a fully-fledged Developer (sideways move from Support to Dev)...my company would *** in their pants if I started producing stuff like that.

My User Admin app looks Ok to me, but nothing compared to your work (seeing as I just downloaded some NETXP controls for it).

Having said that, some of the UI's our current Dev team churn out are a bit pants to say the least, so anything will be an improvement.

Quote:

---

Originally Posted by PaulB

All written from scratch. The lowest end computer the software has to run on is a 700MHz Duron with 256MB RAM... so I know my bottom margin. I test on an old Sony Vaio laptop: 650MHz P3, 256MB RAM, Neomagic graphics.

The main overhead is on accellerated graphics, so a reasonable graphics card makes it silky smooth... and by reasonable I mean something as basic as ATI Rage 128, or nVidia TNT etc.

This is what I'm working on at the moment:

Example 1
Example 1
Example 1

---

DirectX?

I like the smooth fonts particularly, did you use an API for that?

The smooth fonts are rendered by Windows XP sub-pixel rendering.

I don't use DirectX for these GUI components. I use teh API blitter functions.

I have my own unique method for making it faster than double buffering, but still keeping the redraw solid. Scrolling is silky smooth, even on low-end computers. It redraws in realtime as the user scrolls through it.

Quote:

---

Originally Posted by LeeSalter

Damn fine stuff mate...once more.
Where do you begin to design controls like these??

---

As I stated eariler in the thread, I use my own methodologies to design the GUI from the user's point of view, taking into account navigation, work flow and information flow... and then I work to make it as intuitive as possible (but can't spend too long on it).

As for the technical side... I create all my individual sprites, load them into memory. I then write some functions to build up an array that contains all data to do with the display, in the same order it is to be displayed.

For drawing, basicly loop through the array and blit the spites to the correct positions. I've got my method down to a fine workflow where I can bolt on smooth scrolling code after I've sorted the visual layout.