Tips on making your app look good

[RDCA]

Well I am a pretty good vb coder. So one thing I learned over a year is that looks can sell. If your app looks good to the eye, it looks more professional, but if you have buttons every were, un-even sizes of similar objects it can look really bad.

Some things I plan on including:

• Form Border
  
• Spacing/ Sizing
  
• Dotnetbar
  
• Skin Crafter
  
• MouseEnter/Leave
  
• vb themes
  
• Extras
  

Well there are a variety of techniques to make your application look good. So I am going to keep this thread updated even if it dies, unlike my last one. So for now I am going to start off with borders of the form.

Borders

Borders on the form can make an application look totally different.
Well to get started lets define what a border is and the different types:

A border is line that surrounds your client rectangle.
It looks like a bluish line.
So there are different kinds of these:

• None
  
• FixedSingle
  
• Fixed3D
  
• FixedDialog
  
• Sizable
  
• FixedToolWindow
  
• SizableToolWindow
  

See here is a brief explanation of each one:

None- This is when the form has no border, just the client rectangle. Some things to think about when using a border less form is that there is no exit, maximize, movable, or minimize-able options. These can all be self added. Also these forms have very nice looks when used as a second form, like a credits or help form. These are my personal favorite since it is so customizable. I will go over that a little bit later.




FixedSingle- This is when the form can't be resized, also there is only a single line for a border. For this tutorial I made the inside clear so you guys can see the inside better:




Fixed3D- This cannot be resized either, but as you can see in the picture the border is a little bit bigger and there is a inner drop shadow onto the
client rectangle.


FixedDialog- This is pretty much the same as the fixed single border, except this one has a real border.




Sizable- This is the same as the fixed dialog except that this border is re sizable.




FixedToolWindow- This form is a bit different then the rest, it is a fixed border, but is more squared than the rest of the edges, also it only has one exit mark, and no minimize button or maximize.




SizableToolWindow- This is the same as above but the border is re-sizable.

---

Themes

credits to aeonhack- Modern, Pearl, and Electron Themes



http://pastie.org/934876
http://pastebin.com/ZGfDx9vc

Visual Studio Theme

http://pastebin.com/4Q9gXqkh

Future Theme

http://pastebin.com/PP6JtACR

Bullion Theme

http://pastebin.com/KWn7KTJD

Fusion Theme

http://pastebin.com/Fe63tSUB

Genuine Theme

http://pastebin.com/XkQPsFSm

Implementation
1.) Create or open an existing VB application.
2.) Add a new class to your project.
3.) Replace all of the code inside the new document with the appropriate code.
4.) Build your project; if you don't build the controls they won't be in your toolbox.
5.) Drag n' drop!

Setup Video
[youtube]http://www.youtube.com/watch?v=UTAwRHobmHI[/youtube]

Extra:

How to make a no form application be able to move:
Just copy and paste this into your app:

Code:

#Region " Global Variables "
    Dim Point As New System.Drawing.Point()
    Dim X, Y As Integer
#End Region

#Region " GUI "
    Private Sub Main_MouseMove(ByVal sender As System.Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles MyBase.MouseMove
        If e.Button = MouseButtons.Left Then
            Point = Control.MousePosition
            Point.X = Point.X - (X)
            Point.Y = Point.Y - (Y)
            Me.Location = Point
        End If
    End Sub
    Private Sub Main_MouseDown(ByVal sender As System.Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles MyBase.MouseDown
        X = Control.MousePosition.X - Me.Location.X
        Y = Control.MousePosition.Y - Me.Location.Y
    End Sub

#End Region

Skin Crafter:

Some things you will need:
skin crafter, download link 'Here

Ok now follow these steps:

• Install the .msi windows installer
  
• Open up your visual basic studio
  
• Go to toolbox at "Data" and right click and then click at "Choose Items..."
  
• Select browse
  
• Copy and paste the location
  • C:\Program Files\SkinCrafter3\SkinCrafterDemo\SkinCrafterDLL
• Press ok

Now in the data tab in the toolbox you should see skin crafter.
Now drag it onto your form.
No go to the properties of it.
And now chose one:

[RDCA]

Post has been updated, sorry for the bump.

[AceInfinity]

So far I only see the form border added out of your list lol, but it's a basic and very detailed section of information you've included. I like it, I think it'll do good for beginners especially for understanding the options for setting up your project to begin with.

It takes quite a lot of effort to make a full custom GUI on a program and to make everything look good. I even usually miss things after the first build and I test it out for a while lol. Things like changing the initial icon for the project, making a fixed area, changing pointer types, etc...

It's good habit to just get your project set up first. (Mostly with all of the things that I usually miss when I get into the code bit lol). Visual counts, for sure... Even though the ugliest program on the world can still be a good one.

[RDCA]

So far I only see the form border added out of your list lol, but it's a basic and very detailed section of information you've included. I like it, I think it'll do good for beginners especially for understanding the options for setting up your project to begin with.

It takes quite a lot of effort to make a full custom GUI on a program and to make everything look good. I even usually miss things after the first build and I test it out for a while lol. Things like changing the initial icon for the project, making a fixed area, changing pointer types, etc...

It's good habit to just get your project set up first. (Mostly with all of the things that I usually miss when I get into the code bit lol). Visual counts, for sure... Even though the ugliest program on the world can still be a good one.

Yea about the list, thats a long term goal. I plan on keeping this thread pretty updated, but lately I have been swamped with work. But this thread should have everything on that list in a week or two. So yea I know what you mean, without designing your gui your going to get errors becuase the reference hasn't been added yet. Yea some good applications are ugly, but most people won't download a program unless it looks cool. So thats what I am trying to do.

[KoBE]

The stuff you're going over is VERY BASIC... which is what SF needs, somebody going over some basic stuff. I like the fact that you are going into detail about what might seem like obvious stuff to most people, but could be totally foreign to someone else. The coding section of SF is slipping(fast), and post's like this keep it alive. Good work and I hope you continue w/ HQ post's.

[The Don Killuminati]

Pretty known tips, but thanks a lot mate.

[Mammoth]

Good stuff i needed this these are also on HF right?

[RDCA]

Updated! I added skin crafter. Next to come is dotnetbar.

[HerpinDerp]

Thanks, Got to love those aeonhack themes

[panDa.]

Woah mate this helped me alot since I'm selling alot of GUI designs. Thanks for sharing. ^^