Style Guide, Missing UI Elements

  • Thread starter Thread starter Giggle Girl
  • Start date Start date
G

Giggle Girl

Hello there!

I am a User Interface Designer at a company that only makes web apps.
I am fluent in HTML, Javascript and Graphics programs. Now we are
making a compiled app with VS05 in C#, and I have to make the forms by
primarily drag'n'dropping controls using the WYSWIG editor built into
VS05. I have these questions:

QUESTION 1. Is there a horizontal rule, or vertical pipe, to visually
separate the layout?
BACKGROUND 1: One of the programmers suggested I use 1 pixel panels,
and another said he could program a "custom control" for me, but I find
it hard to believe this tool doesn't exist. Maybe I should use an
image?

QUESTION 2. How do you "right justify" or "center" text?
BACKGROUND 2: The "Label" control behaves funny if you "right anchor"
it. One of the programmers recommended using a "TextBox" with
"Readonly=True", which seems to give better "right justification"
behavior. What about centering?

QUESTION 3. Relating to #2, the app we are making has several small 3x3
grids with changing labels and data, but always 3x3. How shoud I make
these?
BACKGROUND: In HTML, I would make a small table, use CSS to position
contents of each cell. The programmer said use "Labels" or
"TextBoxes". I see the "DataGrid" control, but I guess this is
overkill? Any other "small table" controls I am missing?

QUESTION 4. Ok, this is a biggie. Is there a "Style Guide" for making
Windows Apps? We have our own inhouse "Style Guide" for Web Apps,
where "popups bahave this way", and "Man Windows use this background
color and a 1px outline", etc. But this isn't a Web App. I wonder if
there is a general guide that is available that lays out how to control
look and behavior of for a generic WIndows Application?

Thanks for reading this,
Ann Giggy
 
Hello Giggle,

Ask this on the aspnet groups. There are more web geeks :)

GG> QUESTION 1. Is there a horizontal rule, or vertical pipe, to
GG> visually separate the layout?
GG> BACKGROUND 1: One of the programmers suggested I use 1 pixel panels,
GG> and another said he could program a "custom control" for me, but I
GG> find
GG> it hard to believe this tool doesn't exist. Maybe I should use an
GG> image?

generaly they use 1pixel gif for this

GG> QUESTION 2. How do you "right justify" or "center" text?
GG> BACKGROUND 2: The "Label" control behaves funny if you "right
GG> anchor"
GG> it. One of the programmers recommended using a "TextBox" with
GG> "Readonly=True", which seems to give better "right justification"
GG> behavior. What about centering?

add style="text-align: center;" for example
btw, instead of <lable> u can use <span> tag

GG> QUESTION 3. Relating to #2, the app we are making has several small
GG> 3x3
GG> grids with changing labels and data, but always 3x3. How shoud I
GG> make
GG> these?
GG> BACKGROUND: In HTML, I would make a small table, use CSS to position
GG> contents of each cell. The programmer said use "Labels" or
GG> "TextBoxes". I see the "DataGrid" control, but I guess this is
GG> overkill? Any other "small table" controls I am missing?

If you don't need grid specific functionality (like sorting or etc) then
using tables is good.
Btw, even if you are requeired extended grid functionality you can perform
this via client script - not using server's asp.net controls - but it depends
on functionality

GG> QUESTION 4. Ok, this is a biggie. Is there a "Style Guide" for
GG> making Windows Apps? We have our own inhouse "Style Guide" for Web
GG> Apps, where "popups bahave this way", and "Man Windows use this
GG> background color and a 1px outline", etc. But this isn't a Web App.
GG> I wonder if there is a general guide that is available that lays out
GG> how to control look and behavior of for a generic WIndows
GG> Application?

1) I'd recommed to meet all WCAG guidelines.
2) look at Vista UI layout guidelines http://msdn2.microsoft.com/en-us/library/aa511279.aspx
it's appropriate for desktop and web apps
3) Use Web Expression editor, it helps your to design and validate your HTML


---
WBR,
Michael Nemtsev [C# MVP] :: blog: http://spaces.live.com/laflour

"The greatest danger for most of us is not that our aim is too high and we
miss it, but that it is too low and we reach it" (c) Michelangelo
 
Giggle Girl said:
Hello there!

I am a User Interface Designer at a company that only makes web apps.
I am fluent in HTML, Javascript and Graphics programs. Now we are
making a compiled app with VS05 in C#, and I have to make the forms by
primarily drag'n'dropping controls using the WYSWIG editor built into
VS05. I have these questions:

QUESTION 1. Is there a horizontal rule, or vertical pipe, to visually
separate the layout?
BACKGROUND 1: One of the programmers suggested I use 1 pixel panels,
and another said he could program a "custom control" for me, but I find
it hard to believe this tool doesn't exist. Maybe I should use an
image?

QUESTION 2. How do you "right justify" or "center" text?
BACKGROUND 2: The "Label" control behaves funny if you "right anchor"
it. One of the programmers recommended using a "TextBox" with
"Readonly=True", which seems to give better "right justification"
behavior. What about centering?

QUESTION 3. Relating to #2, the app we are making has several small 3x3
grids with changing labels and data, but always 3x3. How shoud I make
these?
BACKGROUND: In HTML, I would make a small table, use CSS to position
contents of each cell. The programmer said use "Labels" or
"TextBoxes". I see the "DataGrid" control, but I guess this is
overkill? Any other "small table" controls I am missing?

QUESTION 4. Ok, this is a biggie. Is there a "Style Guide" for making
Windows Apps? We have our own inhouse "Style Guide" for Web Apps,
where "popups bahave this way", and "Man Windows use this background
color and a 1px outline", etc. But this isn't a Web App. I wonder if
there is a general guide that is available that lays out how to control
look and behavior of for a generic WIndows Application?

Thanks for reading this,
Ann Giggy
Click to expand...


I'm assuming this is for a windows forms application since you mentioned
this in Question #4...

#1:

No, there is not. What you can do is override the form's OnPaint method and
draw the line where you want it and how you want it. You have full control
over this now, instead of just using a "horizontal rule".

#2:

right justification? TextAlign property = MiddleRight work for you?

#3:

Not for windows forms. You can use the ListView control and set the View
property to Details...this may or may not work for you. Other than that,
you would have to create your own or just layout the controls on the form to
appear as a table...afaik. After doing a little research, I got a hit on
the TableLayoutPanel control, but not sure what it is. Didn't even read up
on it, but may be of some use to you:
http://msdn2.microsoft.com/en-us/library/ms171689.aspx

#4:

Microsoft has it's Standards for making windows forms applications, maybe
you can start there?
http://msdn.microsoft.com/msdnmag/issues/02/08/AdvancedBasics/
http://msdn2.microsoft.com/en-us/library/ms184411.aspx

There are also tons of other pages on Microsoft's site that show best
practices and guidelines...


HTH,
Mythran
 
Back
Top