My projects look horrible
My projects look horrible
My projects look horrible
My projects look horrible
My projects look horrible
My projects look horrible My projects look horrible My projects look horrible My projects look horrible My projects look horrible My projects look horrible My projects look horrible My projects look horrible
My projects look horrible My projects look horrible
My projects look horrible
Go Back  Xtreme Visual Basic Talk > > > My projects look horrible


Reply
 
Thread Tools Display Modes
  #1  
Old 02-13-2014, 06:50 PM
Rabastan Rabastan is offline
Newcomer
 
Join Date: Aug 2012
Posts: 3
Default My projects look horrible


I am learning visual basic, and getting to the point of being "OK" lol. However the apps I build look horrible. Does anyone know of a gallery where I can see UI's people have made for VB apps. Everything I have found is for either web or METRO. I am more interested in how they are being laid out than skinned

Thanks, Rab
Reply With Quote
  #2  
Old 02-19-2014, 10:59 AM
Gruff's Avatar
GruffMy projects look horrible Gruff is offline
Bald Mountain Survivor

Retired Moderator
* Expert *
 
Join Date: Aug 2003
Location: Oregon, USA - deceased
Posts: 6,440
Default

Books on UI design are a dime a dozen. Some are well rounded some not.
One of the books I started with was GUI Bloopers.
__________________
Burn the land and boil the sea
You can't take the sky from me


~T
Reply With Quote
  #3  
Old 03-01-2014, 04:28 PM
hDC_0My projects look horrible hDC_0 is offline
Contributor

* Expert *
 
Join Date: Feb 2004
Posts: 560
Default Towards a more beautiful .Net UI

I'm really glad you asked about laying out user interfaces in .Net, Rabastan.
Gruff is right when he says:
Quote:
Books on UI design are a dime a dozen
Unfortunately a lot of them are oriented toward the mindset of graphic designers.

It is assumed that the developer/programmer will design the application to be functional and then hand it off to the designer to have it "prettied up" with eye candy.
There are even cases where these two steps happen in reverse, but rarely does a book marry these two into a single one-step process.

I have my own way of designing/developing user interfaces,
but in the interest of "towing the party line" I guess I have to start out
by giving some links to the official Microsoft documentation on such things:
MSDN Guidelines
MSDN > Windows > Desktop > Guidelines
Microsoft UX Guidelines in PDF format
Desktop App User Interface sections main page
http://msdn.microsoft.com/en-us/libr...=vs.85%29.aspx

There's even a #56 link to the old WindowXP Guidelines on this page.

There.
I've done my duty in reporting what Microsoft has to say on the subject.

Having watched others trying to layout a user interface by sticking controls willy-nilly onto a form I can say things can get pretty nasty/ugly pretty fast.

I like to think of a .Net form as an interactive brochure.

The Western (North American/European) user will look first in the upper right (reading left to right) for a clue as to what the document is all about under the "z-pattern" design layout.

Are you going to take pity of this poor clueless user and help with this "what am I supposed to do" task?
Great.
Then I suggest having the upper right hand corner for the form have some kind of title.

It could be a text string title or some graphics string rendered in Photoshop, but it should say: "Here's is what I am about..and hopefully you the poor clueless user have some intentions along the same lines"

So we're on the right page -- now what?

Let's talk backgrounds.
Hopefully you are not going for plain grey.
Any color is better than plain grey.

If you are brave enough to use a graphic for the form "backgrounding" then I applaud you.

Most developers/programmers feel this adds nothing to the "functionality" of the form.
However, I always like to see forms have background graphics.

What I usually do is take the graphic into Photoshop, add a layer filled with white below it and then reduce the opacity of the layer with the graphic until it becomes a "ghostlike" watermark.
Or another way..
Say you have a some kind of "cloud" app.
So you choose (naturally) a blue sky with white puffy clouds as your background graphic. You layer on the title in the upper right hand corner,
but then you realize you the white puffy clouds get visually "intermingled' with the white form fields.
To combat that you merger the two layers (the blue-sky-with-clouds and titling text layers) together and then create a layer mask in Photoshop by using a fuzzy brush to hide all the rest merge layers except a tiny sliver in the upper right hand corner.
Save as a .png graphic and load in a "backgrounding" panel control.

Yes, in constructing a nice looking interface, it's all about layers.

On the next z-ordered layer, the first control in the upper left hand corner of the page should be one with the highest attention "priority" (i.e. the most important).

If it is some kind of database entry form I usually recommend it be a name field.

What if it's a multi-tab interface?
I recommend these with caution.

Don't throw too many choices/selections at a user all at once.

First of all his/her mind will automatically filter out a lot of choices.
Secondly it the choices represent something he/she is not interested in dealing with at the moment those choices/fields will be purposely bypassed.

Windows forms controls are [IMHO] implicitly ugly.
They definitely always need some dressing up.

Try to envision some kind of graphic "wrapper" or decoration for each control.
Use coloration for separation/distinction (but be aware of different types of color blindness in choosing the colors so you also vary brightness/contrast).

For instance in the "personal" section of a data entry form the titling for all fields could be colored red/pink.
The products entry section could be blue
The shipping info section could be green, etc.

Feel free to uses subtle "bar" divider graphics to divvy up the interface as well.

Even something as simple as one of those Next -> Next -> Next wizards can have icons added as graphic elements to spice things up, and you can do the same thing in VB.Net.


In my head I like to layout the whole interface as just a series of graphic layers.
Then see if everything fits aesthetically (holistically).

Only after that point, once everything is envisioned in your head, should you laid out a "wireframe" of the user interface in you favorite layered graphics application (like GIMP/Photoshop/Fireworks).

Print that wireframe snapshot/screenshot out and stare at it a while before starting to think about where to sandwich in the interactive elements (i.e. the form controls).

Controls can be partially masked by other controls (like picture boxes containing .png graphics) and still remain functional.

In such a way text edit boxes can have corners rounded or the framing box of the text box edit control can be obliterated completely and replaced by a custom (design time) or programmatic (run time) generated graphic.

There are just so many tricks you can learn/apply over time.

And that doesn't even get into designing your own user-drawn controls from scratch.

Advanced programmers (like passel) can design applications using only forms (and needed no controls), yet still be highly user interactive.

If you feel your graphic design "chops" are not expert, then look around for something to copy (imitation is the sincerest form of flattery) that you find which looks attractive to you.

Before designing my Point of Sale software I did such a google image survey.
I typed in Google : "point of sale software", then selected Google's images search and scrolled through the results to get some ideas.
It never hurts to know what's out there (what others have done in the way of interfaces before you).

I guarantee that any interface screenshot you find under any operating system (or any programming language) can be simulated using the .Net environment.

Last edited by hDC_0; 03-01-2014 at 05:54 PM.
Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump

Advertisement:





Free Publications
The ASP.NET 2.0 Anthology
101 Essential Tips, Tricks & Hacks - Free 156 Page Preview. Learn the most practical features and best approaches for ASP.NET.
subscribe
Programmers Heaven C# School Book -Free 338 Page eBook
The Programmers Heaven C# School book covers the .NET framework and the C# language.
subscribe
Build Your Own ASP.NET 3.5 Web Site Using C# & VB, 3rd Edition - Free 219 Page Preview!
This comprehensive step-by-step guide will help get your database-driven ASP.NET web site up and running in no time..
subscribe
My projects look horrible
My projects look horrible
My projects look horrible My projects look horrible
My projects look horrible
My projects look horrible
My projects look horrible My projects look horrible My projects look horrible My projects look horrible My projects look horrible My projects look horrible My projects look horrible
My projects look horrible
My projects look horrible
 
My projects look horrible
My projects look horrible
 
-->