i'm currently doing some reports for SSRS, and i just confirm what i already knew, i suck at this thing of color matching and making things look pretty.
Does anyone know a good site or something to help me figure out how a report should look. I need help! any website or recommendations would be highly appreciated. I tried trying to stick cool looking color pallet, it just didn't work...
PS: I know this is not a problem related with programming or stuff like that, but this lack of coolness its affecting everything i do :p
Best option: don't use colour unless you have a specific need for it. Many years ago I worked as a typesetter for a while in the jobbing commercial print industry. Most of the clients did not want to pay for a colour print job due to the set-up costs, so the jobs tended to be black and white or two spot colours.
Also, I've done any amount of documentation work where the output device was a black and white laser printer.
Unless you have a good sense for colour attempting to play amateur graphic designer is probably more trouble than it's worth. Start with black and white reports, perhaps with one or two highlight colours. If you find an overall colour scheme you like, you can use it as a standard format, but keep it simple. Otherwise, you're really just adding Chart Junk, which is a bad thing.
If you really need colour, use it sparingly, and avoid reversed out headers (light text on a dark background). Some suggestions for sparing colour use:
Light pastel shades (no darker than something equivalent to a 10-20% gray half-tone) on headers or the left-most column. Only shade the left-most column if it is relatively narrow. This sort of header with a light bar down the left side will frame a report.
Alternating bars of approx. 5 lines or so. 5 lines in a plain white background and 5 lines in a pastel shade. This should be lighter (equivalent to a 5-10% gray) than the shade you would use in headings described above. Only use this if the bars are equal size - it looks ugly if the bars are different heights.
Highlighted values (if you have numbers that are alterted if out of a certain range) in an alert colour. This might be quite useful for KPI reports.
Charts - use lighter shades rather than bright primary colours for printed charts unless you are doing line graphs, in which the lines should be relatively thin and darker colours like maroon or navy blue. Leave any borders, pips, axes and labels in black.
Avoid graphical decoration for its own sake unless you are actually a competent graphic artist. Amateur graphic design got a deservedly bad rep in the 1980's and 1990's with the advent of desktop publishing. Keep the reports looking professional, and use this term ('should look professional') if you get into any arguments with users.
This sort of approach should let you answer people's requests for colour while still maintaining a degree of professionalism (and self-respect). You can be seen to accomodate user requests without looking like an idiot.
I use Color Brewer to pick complementary color schemes for reports, charts, maps, etc.
The content is the most important element. After that, simplicity.
use a limited set of fonts and colors
use bold, italic, and underline sparingly
use lots of whitespace
base the page layout on a grid
For a few tips on layout: The Basics of Graphic Design and Typography and Page Layout
I would say that the layout of the report is more important than its color scheme.
The purpose of a good report is to organize information and present it in a manner that is concise, meaningful, and guides the eye from element to element. The snazzy paint job is optional.
I always use the default dark blue/light blue color scheme that comes when you use the report create wizard.
I've been using it for reports for over a year and have never gotten a complaint.
Related
I'm a graphic designer/web-UI designer by trade but have some (albeit limited) knowledge of Access. I haven't used it for a few years now but have been asked by a company to redesign the front end of their split database that was built using Access 2010. They had a programmer design the whole database, and it works well, but they do not like the actual appearance of the front-end so they have asked me to update it with some 'modern design' so-to-speak (i.e. stylise the buttons, fieds etc.)
I'm just wondering, what options do I have with this? Is there any way to use CSS as such to stylise the front-end? Or is there any built-in design tools that are useful? I plan to produce concepts using Photoshop to show them but it's knowing the limitations of what can be done with Access in terms of the front-end design. Any help would be appreciated!
It can be done, but it's a major task because Access isn't designed for developers (not to mention graphic designers) but for superusers. Thus, tools like you have in, say, Visual Studio, you can only dream of.
But if you are prepared to spend hours with alignment near pixel level, it can be done - as you may get an impression of from the screenshots here:
Modern/Metro style message box and input box for Microsoft Access 2013
Indeed, design of subforms is a challenge as these are offset a few pixels when embedded in the main form; if you are to accuracy to the pixel, this will hurt your eyes. Also, listboxes have a habit of shift their layout slightly when required - just to mention a few of the tasks you will encounter. In fact, once you have made some neat forms and controls, the only tool you have to ease your work, is to copy and paste these when you need a new form or control.
The icons are from the SyncFusion Metro libraray, colours are strict to the MS Metro/Modern palette, and fonts and proportions are as close to the Microsoft design guide as possible. This was chosen for two reasons: First, the design guide is so thorough and well thought out, and second, I had no reason to believe I could do it better. That may be different for you, of course.
The application was for a custom project, and users' response was positive only, even from Mac users (using Remote Desktop) - they love the colours.
Access is built to be GUI-intuitive. There's no 3rd party tools to "pretty" it up, only to improve the functionality.
That being said, there's plenty of stuff you can do to improve the look of it. Drop an Option Group down, delete the label, change the Special Effect to "Flat" and the Border Color to dark blue and you've got a nice little box to keep relevant controls grouped together. Utilize the Back Color of the form to give it a little more appeal; I always find a softer "slate" blue looks appealing and professional. White or soft yellow text looks nice on that background.
Add a label that stretches all the way across the top of the form. Make its background color a darker blue and center the text for a very appealing "header" for your form, or you can do the same thing inside those option groups I mentioned above.
Most coders I've ever worked with were pretty happy making dull gray forms with non-aligned textboxes and calling it a day. Take a little time to snazz it up with a few ideas I've given (and any you can make up yourself) and it goes a long way towards presenting an application that people don't dread using.
Here are few other UI components that "..are possible" without installation GitHubPage
Are there any best practices or guidelines regarding contrast between link colour on a webpage, and the regular text?
I know there are contrast guidelines that refer to text vs background colour, but I'm also wondering if there are guidelines about the minimum colour difference that should exist between plain text, and link text.
For example, my background is white (FFF), my text colour is black (000) and my link colour is green (007C41)
Edit:
I realize it's up to personal preference to some degree. However, while my eyes may be able to tell the difference between #000000 and #000001 (they can't, but just for argument's sake), other's won't be able to. What I'm wondering is if there are any accessibility guidelines regarding what the minimum colour difference should be.
The only guidelines I was ever taught about links is this:
Make it obvious that it is a link. Do not do anything that might trick a user to click on something they didn't want to click on.
Make it obvious that it is different than the other texts on the page because you do not want your users to miss out on a link they might have wanted to click on.
Years ago, I was taught that all links should be underlined. Obviously, many, including our beloved SO, do not do that. Many now favor that links are underlined only when hovered over.
Basic guidelines from the US Department of Health & Human Services
http://www.w3.org/TR/WCAG-TECHS/G183.html (courtesy of steveax)
Make sure you have a color blindness emulator plugin for your browser. Inability to distinguish variations in hue is a semi-common condition. What looks "different" to you might not be obvious with a certain type(s) of color blindness.
Once you've addressed color blindness, ensure that colors with popular meaning (red, yellow, green) are used in appropriate or neutral contexts. For example, a "Sign me up!" link probably shouldn't be red (danger, critical) unless it's very clear that it is part of a theme (e.g. all links are red). A "Delete" link probably should never be green.
It's worth being familiar with proper color compliments. Even if you have made a highly readable, usable site, people react differently to different colors. Some colors/color combinations simply "look" better than others, and often there is a simple mathematical reason.
There are a couple of guidelines that combine to cover that scenario:
Color is not used as the only visual means of conveying information,
indicating an action, prompting a response, or distinguishing a
visual element.
Contrast (Minimum): The visual presentation of text
and images of text has a contrast ratio of at least 4.5:1
A good article on webaim explains that:
So if you combine these two requirements, in order to be Level AA conformant, your page must have all of the following:
4.5:1 contrast between the non-link text color and the background.
4.5:1 contrast between the link text color and the background.
3:1 contrast between the link text color and the surrounding non-link text color.
In other words, your link color has to be significantly different from the background color AND the surrounding text color, which also has to be significantly different from the background colour.
Overall, the easiest thing is to use more than colour, e.g. an underline, outline, or bold text, in which case you only have to worry about contrast compared to the background, not the surrounding text.
Most important considerations have been covered above. In addition to those considerations, I lean away from underlining (except on hover) because I like the option of using underline to convey emphasis or other contextual information.
Our self-proclaimed Usability Guru Nielsen at one time loudly exclaimed that all links shalt be underlined forever no matter what, and a lot of people who prefer to be told instead of do the thinking themselves gobbled that up. But most reasonable designers understand that such rules are nonsense.
Is there any way to create an emboss effect for a tablix, or any other "cool" effects for a tablix in SSRS 2008 R2?
Emboss is not available as an out of the box option with SSRS. IF you really need that effect, you can simulate it by placing rectangles in a table, and then placing a textbox in those. You can then shade different sides of the textbox different colors.
I personally would avoid embossed looking things. I think they usually look bad, especially when printed. If you want to look cool, and keep things easy in SSRS, I recommend these things to go in a more "metro" direction.
Use Color
Choose and use a consistent color palette for a project, across multiple reports. If you aren't a designer-type, go to the company website, and sample some of the colors there.
Typically you can find:
a dark color to use for title text
a lighter color for subheadings
a medium color for occasional accent, such as behind the title, or a line below the title
a much lighter color (used in sidebars on websites) that you can set as the background to your table headers.
Pay attention to Type
Use the same font for all pieces of the report. You might get away with using a different font for the title, but usually it will look bad.
Use Italics and Bold as needed. Italics type should be used for incidental data details, that are not the focus of the report. Bold should be used for titles, sub headings, and a key data element, especially if the data is more than one line long.
Consistent spacing
Report elements that are close in size to each other should be the exact same size. This means that you won't be able to cram as much data in, but the report will be much more pleasant and professional to look at. I try to use either a half inch or .75 inch grid and make everything multiples of that size. BIDS doesn't really support this, so this can involve some typing in of sizes.
If there are graphics, line those up with the grid as much as possible.
If you want to get serious about this, start reading books by Edward Tufte. In particular, The Visual Display of Quantitative Information is often considered a classic of information design.
Reports that are developed with this "less is more" attitude will look fresh and usable longer than reports full of distractions, aka Chart Junk.
The designer I'm working with has given me a monster of an implementation issue...
Page background is grey, and atop of it is a crumpled paper texture (non-repeating with painted design elements) for the first 600 pixels (by 1400 pixels across; currently centered as a non-repeating background). At the bottom is another div with more text on it -- with a dropshadow, complex line pattern for the background and ripped edges, hovered slightly above the top div.
Saving the top part as a JPG and the bottom part as a transparent PNG leads to filesizes of +1mb.
Saving the top part as a JPG and the bottom part as a JPG doesn't work very well due to the drop shadow. It would technically work to save the bottom part as a slice with elements of the top part underneath the dropshadow, but it would have to line up pixel-perfect always or else look crappy. And at that point, I might as well save the whole site as one big image...
If the bottom part had a solid colour for the background, I could set each edge to have a different transparent PNG. However, the line pattern on the bottom part means that this wouldn't work.
My question is ultimately:
How the heck do people do ripped edges these days without making their site one big image?
Thanks!
Screengrab:
CSS3 does provide a border-image property, which should be able to help you with the ripped border effect (although even then, it would help if it was a repeating image).
See here for the W3 specification.
However it may not be much use to you, because browser support for this feature isn't great -- IE doesn't support it at all (not even IE9), and while most other browsers do support it, they all currently have gaps in their support and require a vendor prefix in the CSS property.
See CanIUse.com for a full browser support table for it.
To be honest, I think you should just go back to your designer and ask him to make it easier to work with -- he's probably just created something he thinks looks good, but is unaware of the limitations of the design he's put together; if you explain the issue to him, he may well be able to produce something a bit more usable for you.
There's really not a whole lot you can do here.
Page edges are ideally seamlessly repeated via repeat-y, and in your case it looks like the texture is one big image. You're either going to have to settle for sub-par performance or present the designer with your issues.
Check the archive of this blog for a good example.
You either have to fix the background images and use the entire image (or the top image AND the bottom image) and make the background non-scrolling. OR you have to get him to design a pattern that can repeat and then use a smaller PNG.
Clearly, your designer has a print background....
Ok, there's ways that will most likely theoretically work. But theoretical isn't always practical. I suspect your desire is to have cross-browser capability, as all of us should. So, start by throwing most new CSS3 tricks out, thanks to legacy IE. Forget box-shadow, forget crazy png tranparencies without hacks, etc.
What you're left with is doing a gigantic .jpg background. That will load....eventually.....
In this case, you can see the storm on the horizon, so run for cover. Go back to the designer, explain why this is about as smart an idea as texture layered over gradients, and help them understand why our buddies at Microsoft have made this virtually impossible. Just like a fully-flashed out site, it can be done somehow....but it's probably not the best use of time and resources. The web isn't print, it's dynamic...and when you put something "on a page" it's not going to stay put as it would in Illustrator, nor can you guarantee that your user is going it experience it in 100# glossy with a metallic overlay. Yes, I was a designer before I was a developer.....
Sound like a cop-out? Maybe it is. But I've been in your shoes, building sites for credit cards. My team was forced to waste thousands of dollars of the bank's money trying to make sites work with designs that probably shouldn't have been done on the web, thanks to print designers doing double-duty, getting designs approved prior to talking to the tech team....after, of course, we presented management with the options. Ultimately, it got the boss fired for going over budget.
although this is untypical, I would recommend cutting a big square shaped hole in the center of the image so that you're only left with the edges themselves and a transparent center and saving to PNG. Then saving the center part itself as a jpeg and putting the jpeg directly on top of the PNG in the correct position.
This way, the majority of the very large PNG will contain very little data and be a very small file size. The rest of the data would then, obviously, be jpeg and therefore smaller.
I've been thinking of a dynamic way of creating a CAPTCHA that uses morphing shapes or dynamic colors.
My first idea is to have a graphic, flash or something, that gradually changes from, say a square into a sphere. The user will be required to click the button when it becomes spherical enough.
Second idea is to have an area of color that slowly changes from, say, red to blue and the user will be required to press a button when it becomes blue enough.
Third idea is a combination of both methods.
I'd say the difficulty will be to match the clicks with the transitions. But it should be hard for automated code to detect shades or shapes.
Can people please offer some comments on my idea.
edit -
Thanks for the feedback. I'm now considering using a flash based video playback of a server fed video feed of a few colored shapes that morph into other colored shapes. The user will be required to pause the feed when the colors and shapes match some canned questions: such as : click on the video when you see two green squares turn into 3 blue triangles. The shapes will be amongst over overlapping and moving morphing shapes. Fun for the whole family!
Color is a bad idea as (a) its very easy for a computer to detect; (b) very hard for some humans — the color blind — to detect. Even if you're OK with denying access to the disabled, you'd have to worry about different monitors, systems, lighting conditions, etc. giving rise to different color perceptions.
How hard do you think it is for a computer to compare the red component and blue component in a pixel (or averaged over several pixels)? Trivial. So this isn't a problem for a computer.
Similarly, it isn't that hard to program the difference between a square and a circle. One has strait lines, one doesn't!
Good idea, you could also do it so that the shapes keep turning or moving.
I don't know if it would be safer than a regular letter capcha tho.
I'm not sure why you think color would be any harder to detect than text. Shapes possibly, but they would have to be more complex than n-sided polygons. The gradual animation is a good idea however. But if you can code it to show, someone can code something that watches it.
The real test is to prove humanness by identifying semantic meanings, rather than syntactic meanings.
For instance show pictures of animals and make the user click when a bird shows up. Or just say "click on the thing that can fly." And show some pictures of animals. This would be rather unbeatable by a machine until all images had been cataloged. The trouble with CAPTCHA of course is trying to make semantics with syntax. Therefore defeating itself from the onset.
You're on the right track, and I'm sure your proof of concepts are interesting. But remember: made by a computer: solved by a computer.
Although these ideas will almost certainly work, it's a security-through-obscurity effect. Classic CAPTCHA images are "one-way" in that the correct answer can't (theoretically) be deduced by a computer. The problem with saying "click here when the image turns blue" is that a computer could easily do this, if somebody considered the stakes to be worth developing a program for.
Additionally, unusual captchas will force your users to think. Depending on your audience this may mean losing some users.
I did a fair bit of research when developing a CAPTCHA system, and the classic method of printing text to an image seems to be the most effective. The trick is not in having lots of "background noise" behind the text, or different colours. It's about the following two things:
1) Random text kerning, with most or all letters slightly overlapping each other.
2) Random distortion, translation and rotation of the text.
If you have a look at Google's CAPTCHA, they pretty well only have those two features: https://www.google.com/accounts/NewAccount?service=mail