I am looking for an image generator for images that:
Look like cogs, wheels, progress bars, etc.
Spin.
Are small, less than 20-30 pixels. 16 might be good, i.e. 'icon size'
Are simple, just 2D no need for 3d image.
All the examples I found are large 3d ones. I want one of those little ones that I can use with things like ajax while loading up a bit of the page, transferring a file, sending a large message, etc.
The android spinning gear cog is one example.
Then I can show/hide the image as I need.
I figure a lot of people will have tackled this / know good solutions.
You can generate simple animated "loading" icons on http://www.ajaxload.info
For fancier ones, try http://preloaders.net or http://www.loadinfo.net
Fontawesome (version 3) includes a few spinning icons.
http://fortawesome.github.io/Font-Awesome/#examples
We are implementing a Windows 7 application that displays a pop-up in the taskbar's notification area.
There are two version of the simple form.
and the compact version:
Which one is closer to Windows's UI guidelines? Is there a good reason to prefer one over the other?
The second one looks better to me. It's hard to put my finger on the exact difference between them, but it looks like there's more horizontal padding between the borders on the first one.
That's not consistent with the standard UI or the sample pictures in Microsoft's handy UI documentation/guidebook.
For example, there's very little horizontal (or vertical) padding in these two notification area pop-ups:
The standard border padding for windows (according to Microsoft's UX guidelines) is 7 DLUs (about 12 pixels) all the way around. When in doubt, I suggest using that.
Beyond the UI/UX guidelines, it's also important to consider functionality. A pop-up window should not take up the entire screen, so using space as parsimoniously as possible is always a good idea. Since the extra padding doesn't really add anything to or make your dialog more usable, it's superfluous.
(Sorry if I missed the answer)
So I just started out making an XNA game for windows.
And while designing the UI, I was wondering how to scale the UI at different resolutions.
So, imagine that I make a UI for a 1920*1080 screen, how do I make sure this is displayed correctly on a smaller 4*3 screen?
Thanks in advance!
Simon.
Usually one designs the GUI in a way that will be usable in the lowest resolution your game offers (traditionally 800x600), then you are sure everything fits correctly at all resolutions.
This is usually why games at higher resolutions seem to have a lot more space for the "playfield" and less for UI than at smaller resolutions.
You could scale the UI once the resolution is higher as well, as easy as using the scale parameter on SpriteBatch.Draw, or you could do it a bit more smartly, by having your assets 9-sliced and aligned to WIDTH/HEIGHT constant percentages.
I need the user to set a number of percentage values which should always add up to 100%. What are standard ways to archieve this? I came up with the following:
1) have a standard slider control for each value you need to set. Moving one slider will automatically adjust all the others so the sum will always come out as 100%. You can fix inidividual sliders with a checkbox displayed next to it. Only the remaining, "free", sliders will be adjustable.
Pro: consists entirely of standard widgets users already know
Con: lots of widgets, lots of screen real estate used, looks ugly when you have lots of sliders and thus low percentage values, normalization to 100% isn't immediately obvious.
2) have a slider control with several sliding knobs.
Pro: normalization is implicit and obvious because the length of the slider is fixed, relative weight is easy to see at a glance
Con: non-standard, knobs can easily overlap each other, knobs aren't easy to fix, no obvious place to put a text/number representation for each interval/percentage
3) display a standard pie chart.
Pro: normalization is implicit and obvious, relative weight is easy to see
Con: non-standard for interactive use, hard to make intuitive slice resizing work, no place to put a text/number representation for each slice
4) ... ?
I'm not happy with either of these hence my question here. Any better ideas? I'm dealing with 3-10 individual percentage values on a rich windows client (i.e. not web).
cheers,
Sören
What about vertical sliders? Like a sound mixer. I think it looks a lot better than a list of 10 horizontal sliders.
Or fixed width bar with several sliders on them, a bit like the gradient control of Photoshop if you know it.
Similar to the timeline idea, how about a slider like the partitioning interface in GParted or similar disk partitioning tools?
You could display the percentage values and actual numbers above the dynamically resizing bars to allow the user to edit them numerically instead of using the sliders if they want to configure it manually.
How about a time line view; (gantt chart) kind of like in Microsoft Expression Blend or in flash where you have multiple layers for each action and each action can be within a range on the scale from 0 to 100.
I have a couple of pet projects where I'm the sole designer/programmer and I spend too much time changing the user interface to make it easier to use by real users and avoiding bright yellow and green that is so common on "programmer" designs.
Do you have tips to choose a color scheme when you do not have a graphics designer around? How do you avoid creating the typical "programmer" interface?
kuler has a lot of user submitted colour schemes
edit: just remembered... also try colorlovers
Let me tell you a story.
I have absolutely no confidence in my ability to make aesthetic choices - you only have to look at the way I dress to realize I'm justified in my lack of confidence. Anyway, years ago I was put in charge of writing the gui for a new product (the "Clip Editor" in Cineon, for anybody who knows that). I sketched out a design, but asked my boss, the head of sales and marketing, and various "application specialists" for help choosing the colours. Nobody responded, so I said "to hell with it", and chose a colour scheme so ugly I'm sure the beta testers would recoil in horror and demand a change. But they didn't - so it shipped with it. And I heard that customers loved the "bold colours". And not only that, but a few years later a competitor added a program that looked like a direct rip-off of my Clip Editor to their product, and they copied my colour scheme!
For desktop apps, get the colors from the OS. I, personally, want all of my apps to look and feel the same as my OS.
For web apps, I'm not really sure.
Keep in mind that nearly 10% of the male population of the world have some significant form of color blindness. You should always consider this when choosing interface colors (especially if you need capital - guess what? 1 in 10 male investors might not see your red dots on the green background chart showing risk vs return!).
MSDN has a reasonable overview of this, and there are several website filters that show you what your site (or any site) looks like given any form of colorblindness.
Aside from that, I really like COLOURLovers - not only do they have a great selection of user tagged and defined color schemes, they give them to you in a variety of ways, and you can sign in and track your favorites (or your favorite color scheme producers).
Go check out the fall themes! Can't go wrong with Michigan colors when the leaves change...
-Adam
Colour guides like Kuler are a great start if you have no idea about choosing colours.
Some basic considerations:
Use contrast not colour to differentiate in your design. This is to accommodate colour-blindness and poorly sighted users.
Use as limited a colour palette as you can. Pick one colour as your 'theme' and choose shades of that colour, and then maybe one or two contrasting colours to go with it.
Get advice - doesn't have to be from a designer, you might still know someone who has a good eye for these things. Also, more broad feedback - ask a few people for their opinion, that can help.
Lately I have been using the following website: http://www.nickherman.com/colormatch/
to help me (also a non-designer) pick matching color schemes. I usually find a color that is fairly pleasing, then use the matching colors from this website.
If all else fails, I also ask my wife!
I like using ColourSchemer and EasyRGB.
Some updated resources I use:
Colorotate.org is a nicely designed site with user-contributed palettes of various sizes (unlike kuler that provides only 5 colours per palette). It allows you to see how the combinations look to various type of color-impaired people.
colorschemedesigner.com generates consistent palettes for you using various algorithms (complement, triad, tetrad...)
Adobe's Kuler website has a lot of user-created color schemes uploaded by designers. I normally search for higher ranked schemes first.
There are a lot of "color theme pickers" on the web. If you use these, your colors will at least look like they belong together. The first one I looked at on google: http://www.yafla.com/dforbes/yaflaColor/ColorRGBHSL.aspx?
Aim for pastel colours that are slightly dimmer than their full-blown counterparts, i.e. a pastel red is dimmer than a (255,0,0) red for example. Try to select colours from the same palette, one cheaty way of determining colour schemes I use is to take a screenshot of an Office 2007 app, usually excel, and paste out some colours from their co-ordinated palettes using the colour dropper tool in an app like Paint.NET. In fact this cheaty approach to be extended to 'borrowing' colour schemes from applications that are already out there that have colours schemes you admire :-)
If you pick a "theme" color for your app, you can use Kuler to help flesh out the palette.
Related post:
Web 2.0 Color Combinations
I know I've seen more, but can't find them :)
I tend to use alot of grays, along with black and white, keep things simple and avoid any kind of annoying, bright colors. Seems to me like that's what the SO guys did.
Vitaly Friedman's Essential Bookmarks for web designers & web developers list a lot of online color tools, also a condensed version
There is also a list of color tools on twiki.org that has some additional sites.
I recommend you start by reading up on computational color theory. Wikipedia is actually a fine place to educate yourself on the subject. Try looking up a color by name on Wikipedia. You will find more than you expect. Branch out from there until you've got a synopsis of the field.
As you develop your analytic eye, focus on understanding your favorite (or most despised) interface colors and palettes in terms of their various representations in different colorspaces: RGB, HSB, HSL. Keep Photoshop/GIMP open so you can match the subjective experience of palettes to their quantifiable aspects. See how your colors render on lousy monitors. Notice what always remains readable, and which color combos tend to yield uncharismatic or illegible results. Pay attention to the emotional information conveyed by specific palettes. You will quickly see patterns emerge. For example, you will realize that high saturation colors are best avoided in UI components except for special purposes.
Eventually, you'll be able to analyze the output of the palette generators recommended here, and you'll develop your own theories about what makes a good match, and how much contrast is needed to play well on most displays.
(To avoid potential frustration, you might want to skip over to Pantone's free color perception test. It's best taken on a color calibrated display. If it says you have poor color perception, then numeric analysis is extra important for you.)
Why do programmers think they can't have dsign skills? It's a pet peeve of mine. It's a learnable skill, just like anything else.
http://www.hackification.com/2010/05/16/designing-a-vs2010-color-scheme-consistency-consistency-consistency/