Wpf Gif Image Animated Pixel Art Background Space Station

Chapter 8 - Visual Pattern

The aims of Art

In one case once more I warn y'all confronting supposing, you who may peculiarly honey art, that you will do any proficient past attempting to revive art by dealing with its dead exterior. I say it is the aims of art that you must seek rather than the fine art itself; and in that search we may detect ourselves in a world blank and blank, as a issue of our caring at least for this much art, that nosotros will not suffer the shams of information technology.[1]

Visual design

We are non here to study technology for its own sake. We are to use technology to brighten the dark places of people�s lives. The artistic endeavour in software systems provides the greatest single measure of success or failure from the point of view of the user. And we may too confront to the fact that no-one volition thank u.s.a. for perfectly designed and executed systems. They are simply invisible, and the more perfect they are, the more than invisible they are. The greatest measure out of the technical success of a software project information technology how often it is non thought nigh.

Then what are you left with later designing the perfect arrangement, to allow people know how superb information technology is? The reply is its visual artistry.

A software system is living art when it is pleasing to wait at, and flows from task to task easily. Display and navigation is all you take. If y'all can�t become from ane chore to another, and the screen is crammed with dialogs, y'all�re missing the betoken.

This function of design is sadly lacking in and then many systems. Yet it is the most hitting instance of software failure or success. Designing your object system and database well is pointless if all you are going to do is hurl information onto the screen.

Some terrible software has looked good. It has won awards. Few awards are won for well architected systems, for software architecture cannot be seen, nor picked upwards, nor heard. Besides many in the software field are rewarded for managing crises. The server has gone down. The organization crashed. Those heroes who spend all weekend fixing them are rewarded. The person who prevents the organization from going down, through careful design, never gets a 2d thought. They are ghosts. One time a project is finished, the software architect should vanish like a ghost.

In an old parable:

In aboriginal China there was a family of healers, i of whom was known throughout the country and employed equally md to a great lord. He was asked who in his family unit was the greatest healer. He replied:

I tend to the ill and dying with drastic and dramatic treatments. On occasion someone is cured, and my proper noun is shouted from the rooftops. My elderberry brother cures sickness when it begins to have root, and his skills are known merely here among the local peasants and our neighbours. My eldest brother is able to sense the mere spirit of sickness, and eradicate it before information technology takes agree. He is unknown exterior our habitation.

Visual design is all near why this:

Effigy viii.1 joe kane, landscapes

Is a improve example for us than this:

Figure 8.2 joe kane, gardener

The commencement card offers the services of joe kane, landscapes. There isn�t much on the card, but a grey shape with a hole in the shape of a leaf. Information technology is a business concern card, not an advert, so can afford to be slightly ambiguous. Landscapes are unsaid by the shape of a hill. All in all, information technology doesn�t strain the eye, and it is moderately subtle.

The second example is as edgeless equally a charcoal pencil. Joe Kane is a gardener, here�southward his address and phone number, and he mows lawns and does something with trees. He�s a what yous see is what you go kind of a person. Honest, straightforward, hard working. He's probably a good bit cheaper than joe kane the landscaper as well.

And then why is the first one all-time for us?

Firstly, we are creating software, and in your face software soon becomes tiresome. We need more subtlety, and the gentle arc of joe kane landscapes neatly contains the information. Information technology follows the bending of the 4 every bit information technology rises from bottom left, and the foliage, virtually invisible, seems well fitted to its container. Joe kane, gardener will soon tire its viewer with its chirpy lawnmower and apple tree. You could even get abroad with vehement the card down its correct hand side and keeping only the informative bit. You would probably want to practise the same with your calculator screen afterward a while, just may find it catchy. That, of course, would frustrate you even more than. Being inoffensive is ofttimes key.

Secondly, here are the thoughts of Frank Lloyd Wright[ii]:

Challenge of the Car. In this twenty-four hours and generation we must recognise that this transforming force whose outward sign and symbol is the matter of brass and steel nosotros call a machine, is now grown to the point that the creative person must accept information technology up, no longer to protest. Genius must dominate the piece of work of the contrivance it has created. This plain duty is relentlessly marked out for the creative person in this, the Machine Age. He cannot set up it aside, although there is involved an adjustment to cherished gods, perplexing and painful in the extreme, and though the fires of long honoured ideals shall get down to ashes. They will reappear, phoenix like, with new life and purposes.

Either nosotros accept on the challenge of software fine art, or we go someone on our squad who is artistic.

The dialog box

Have you ever had a monologue with a dialog box? The word dialogue comes from the Greek dialogos: a chat. Does it feel like a conversation? I doubt information technology. It�s more than similar selecting a few entries from lists, typing in a bit here and in that location to guttural prompts like �User:� Hardly a conversation.

Wizards are more conversation-similar. They tell you about what you are doing, ask you to practise i bit of it, and then motility on to the side by side scrap. Finally, you see a summary of your conversation and you submit it for the record.

Figure viii.iii Great user interface pattern

Let'south list everything wrong with this dialog

1. It doesn�t await very prissy.
2. The message is non very timely. It�s non telling me I�m about to run out, just that I�one thousand out. I�ve probably noticed anyway.
3. Where is the dialogue? My only possible conversational input is to say OK.
4. It affects my land of listen. It is a taunt. I want to respond with violence, just violence would harm my screen, and mayhap myself. Instead I canteen it up and rage at the air. In my annoyance, I dive out of the car, momentarily without my usual concern for safety, and get run over by a truck.

Class, color and decoration: design ingredients.

Although rather lacking equally an example dialog box, it does contain the 3 visual blueprint ingredients of form, ornamentation and color.

Class defines what something is. We know this is a dialog box considering it looks like 1. In that location is some kind of bar beyond the superlative, a bit of text in the heart, and a push button at the bottom assuasive at to the lowest degree some user input. Information technology is something nosotros have come to recognise through our use of computers. I doubt it would hateful much to someone unfamiliar with computers, though they could probably guess what was happening.

Color is a visual delineator and highlighter. Colours can be used to subdivide visual elements, and also allow some artistic expression to the user who wants all buttons to be light-green, and backgrounds to be pink.

Decoration or decoration is taking a plain class, and embellishing information technology using textures, patterns or symbols. We decoration input elements with bevels, or 3d borders. Nosotros ornament our windows with close, expand and hide buttons. We ornamentation many items with small symbols, or icons.

Beyond these fundamental blueprint ingredients, we can also add together what could be termed dynamic embellishment. When you click a button, it looks like information technology clicks down. When you hover over an item of involvement, a small-scale notation pops up explaining what its function is, or a hyperlink underlines itself.

Mixing these 4 ingredients and applying them to your user interfaces is what visual design is all nearly.

You lot must do the work of a graphic designer and a technologist in bringing your designs to life. A non-responsive screen is unfinished software.

The creative utilise of white space

In the first case of a business concern card, in that location is a lot of free space. Some notice this sacrilegious waste of paper offensive, but just when they are doing the designing. They attempt to fill the white space with something of meaning, and in doing so, destroy the message. Leaving lots of infinite in graphics terminology is the creative utilize of white space.

Information technology implies that the space left between items is as as of import as the items themselves. Indeed, the whiteness itself can hold a bulletin, or add together to the ambience of the view.

Now

This one word defines u.s.. We alive in the era of the quick fix. �I want information technology, and I desire it yesterday.� �Daddy, I want to go to the park now.� You tin can rely on (any carrier) to get you in that location on time.� Our advertising artistry emphasises lateness is losing. We are under pressure to deliver software immediately. We want fast food, fast cars, trains on fourth dimension, instant gratification. Microprocessors have to go faster. Gigahertz equals sales. We want everything and everybody out of our mode so nosotros tin can race to the grave correct now.

Us and the essence of now are interlinked, and we accept to provide it. At present means non making your audition think. They have to get the piece of data they desire immediately.

User interfaces are designed to lead us downwardly the garden path, only rarely do we get to come across the garden. Maybe it is the very words user interface. Nosotros think of interfaces (and design them) to conform to logic, a defined procedure. Unfortunately users are people. They are all different, and they desire a conversation, not a presentation. User: Grunt. Password: Grunt. User interface is probably one of the worst clich�southward to come out of computing. Users collaborate, they do not interface. We are not cyborgs (yet).

What practice you think of your user? Are they worth a piddling more effort?

When analyzing requirements, we create use cases, and create stories and walkthroughs, imagining a conversation betwixt the user and the apply case. So we kill them stone dead with our grunts of request: our dialogs.

One day we volition be able to walk up to our earth portal. Nosotros shall look into it and be instantly recognized. �I�d similar a book on graphic blueprint delight�, yous volition say, �and a cheese salad sandwich.�

The sandwich will go far, and you will begin your conversation with your portal so it can get the book which best matches your wishes. What kind of conversation will it exist?

My guess is you will exist presented with four pictures. Your optics instantly movement toward the i most pleasing to them, and you brainstorm drilling down through an inconceivably clever indexing arrangement, offering input along the way. You might simply say: �No, How about some mathematical definition of layout? OK, a little less formulaic, and more case based. Your optics waltz to your final selection. �Permit�s have a look at that one.� Y'all read through a few sample pages and give information technology the nod. The e-book reference is added to your personal library, and you lot begin browsing. After a while, in your relaxed way, long past the time of the worship of Now, yous have a wait through your communications. One of them is your daily business organization summary. Information technology shows you a vision of your business organization from precisely your point of view. It took a day or 2 to design with your information stylist, but it was well worth the attempt. At present you know exactly how all aspects of your concern are doing with a single glance. What did you lot see?

Was it a page of option buttons and links to data packed reports? Was it a woods of curlicue confined, drib down selections and cheesy icons? I bet it wasn�t.

Of class, now is relative. Business organization people generally want their business applications now, but the same people wouldn't want a their cardiac pacemaker software to be created the same way.

The divergence between data and information

Information is an brainchild of data. Just as nosotros abstract away from code to objects to applications to systems as software architects, so data can be bathetic into information.

Figure 8.iv Data

Here is some data. Nosotros can present this information in a graph.

Figure eight.5 Information abstraction leads to information

The graph is a common and familiar course to most people. We take unlike types, some of which are more than common than others, such as a line graph, bar graph, pie nautical chart etc. We�re a little carried away on 3D pie charts and histograms at the moment, but that is just considering nosotros worship  now and want to exist cool. It volition fade later a while and nosotros shall come across one time over again in 2nd clarity. Then we tin create a proper 3D pie chart. Whether our third dimension is of the xyz type, or compressed fourth dimension, is up to us.

The graph is simply i single pace abroad in brainchild of the data, as the data can be taken from the lines on the graph. Here are some ways of abstracting the same data to announced in an instantly readable way, bathetic 2 or three steps away from the data, and delivering data.

Effigy 8.6 The data abstracted for instant viewing

The smiley confront on the left says your concern is ahead of budget. Yous don�t know how far ahead of budget you are, simply you may non care in this momentary glance. The second case shows a bar where the heart line represents the budget (targeted sales maybe), and the black area represents the ten percent to a higher place and below upkeep. You tin can see instantly that you are more than ten percent above budget. This is practiced news. The final offering is merely a graph reduced in size, where the gray area represents the budget, and the line represents the actual. Over again, you tin see quite clearly you lot are above budget, and have been since the beginning of the year.

When designing sets of reports, the most common (if not the merely) top level display is a list of reports. The user clicks one, enters some parameters and gets a pile of information. Data does not equal data. Nosotros need to exist more creative.

Data leads to information. Data leads to understanding. Understanding leads to control. If you present data, then your viewer has to extract the data then gain the understanding. Our job is to deliver that understanding, so let the viewer drill downwardly into the information, and if necessary into the data if that is their wish.

Reality or understanding?

Do you want to present reality or agreement?

In 1933, H.C. Beck created a superb example of information graphics, which remains today in its original implementation, fifty-fifty if subsequently updated, and is copied throughout the world.

Hither is what existed before:

Figure viii.7 The London Clandestine map before 1933

Beck�s map of the London Underground is a landmark of first-class graphic design. The format has not inverse, nevertheless it has proven piece of cake to update as new stations and lines have been added to the hugger-mugger system.

Despite its simplicity and extensibility, and the fact that information technology has been copied ever since for rail and hugger-mugger systems almost everywhere, information technology was initially criticized for falsifying the geographical locations of the stations.

Figure 8.eight The London Underground map of today

This is often the fashion of excellence. Around the same time that Brook produced his piece of work, another designer, Alfred John Butts, a New York Architect, was working on a game. In 1938 he began a cottage industry manufacturing and selling his game. Information technology never really caught on, and afterwards a few years he gave upward. Nevertheless, his dream survived. 9 years later, in 1947 he tried once more, and for five years continued with petty success. Then, in 1952, at a time when television was alluring the masses, and promising a dark world of illiterate burrow potatoes, his game suddenly took off. Scrabble is the same game now every bit information technology was then.

And so nosotros are in a Catch 22 situation. If you lot design a archetype, no-ane volition accept information technology. They volition need to enforce their betoken of view on it, ergo (if you will forgive my Latin), you volition not create a classic.

To larn from Matisse, who declared �I practice non paint things, I paint only the difference between things.� How would y'all display the summary of business data with only a small area in which to exercise so?

Information technology might look similar this:

Figure eight.9 Monthly business concern summary

I doubt anyone would answer positively to a proposition that this is a sufficient summary of one calendar month�s worth of business organization information, yet it is perfectly valid.

Nix is shown, which ways there is nothing of interest for a business viewer to go worried about. They are on target on all their specified measures, then they tin go dwelling, put up their feet, and not worry about anything. But worry they do. It is e'er meliorate to show something which means there is cypher to prove, than to prove zero.

What do y'all have at your disposal for displaying information? Co-ordinate to The Artist�s guide to composition[five], there are seven media for expression.

Effigy 8.10 Diagram composition methods

All of these forms are bachelor to the states on our computer screens. Some of them, designed for the days of monochrome are used rarely now, and even then only in reproductions of the past. Certainly texture, and mayhap tone are not every bit useful every bit colour, and practice non render very well on our screens. Color is the near definite mod winner. With colour you tin create 3D furnishings, light and shade, and contrast colours to stand for differences. Colours can give u.s. contours, imply relationships and fifty-fifty accept meaning and emotion: Red equals danger; blue equals sad; a yellow zigzag ways electricity etc.

The relationships of colour

The pick of colours available to u.s. is vast. It is here that many software products fail because designers choose colours that just happen to appeal to their warped vision of the world. Using colours is interacting with your user, and you practise not desire to silence them earlier the conversation starts. Reassure them. Utilize the system colours they have chosen to colour your palettes of interaction.

Colours have properties which are part of our man psyche. A colour can exist warm or absurd, calorie-free or dark.

Figure viii.11 A colour wheel showing warmth and lightness

Color Terms

Hue is the everyday name a color is known by. Red, Brownish and Turquoise are all hues. No-ane can agree how turquoise is pronounced, let solitary what it looks like. At that place is no definition of what these names mean, though at that place are colour tables and definitions which use them.

Tone is the lightness or darkness of a colour when it is converted to greyscale. A tone is a color�s position on the scale betwixt black and white.

A tint is a lightening of the tone of a color, whereas a shade is a concealment of the tone. Note the colour does not change, only its lightness or darkness.

Colours on calculator screens are often defined as 8, 16, 24 or 32 bit numbers, where the grouped binary digits of the number represent a colour co-ordinate to a standard colour model.

The RGB model is about easily understood. Suppose a number (in hex) is FF8000. This contains FF red, 80 green and 00 blue. Mixed together these give orangish. The ARGB model too supports an extra byte for a transparency. It is known as the alpha value, where FF means full colour, 80 means semi transparent and 00 means fully transparent.

Similar to RGB is the CMYK (cyan, magenta, yellow, black) model. RGB is additive, and more relevant to a screen based on light, and CMYK is more than in melody with printing as it contains the base colours used in many colour printers.

The HSV model divides the number into hue, saturation and value parts. The hue is defined equally the angle around the colour wheel clockwise from red. Saturation, likewise known as blush or intensity, is the signal betwixt the pure color and its equivalent tone (or greyscale value). The more than grey of the aforementioned tone is added to the color, the less the saturation. Adding white to lighten it increases the value, and black to darken it reduces the value.

Colours in printing are often known past Pantone� values. They are partially applicable to colours on screen, simply but for colour matching print work.

Color relationships

Here is where many user interfaces become ugly.

Complementary colours come up from opposite points on the colour wheel. When mixed together, they produce grayness. When positioned side by side, they intensify one another and are expert for showing comparison. A complementary colour tin can be found by looking at a colour, then looking at a blank slice of white paper. The afterimage is the complementary colour. On a clock, the complement is at vi o clock when the colour is at 12. I shall employ a 12 point clock to depict all other colour relationships.

Split complements lucifer 5 and 7 to a colour at 12. In that location is some neutrality between the v and 7 colours, yet both together are complementary to the original. The mixes betwixt 5 and 12, and 7 and 12 are known equally near complements. If you wish to bear witness the differences betwixt two related values and ane other, display the related ones in the split complements, say blue and dark-green, and the comparator in the complement, red.

Coordinating colours are three or four adjacent colours. They are harmonious and take trivial contrast so do not jar the eye. Contrast can exist added by intensity. This is used often in reports, where similar colours of varying intensity are used to display alternate lines in a report or grid without making it too offensive. Columns or rows of totals may be a shade of an adjacent color.

Equal triads are the 12, 4 and eight positions. A mix of whatsoever two will produce a complement of the third. Using equal triads ways the display may lack vitality. Yellow text on a blue background was pop for a while in text editors. Adding ruby would create an equal triad. Imagine yellowish on blue with red text for alarm messages. Information technology would look rather demanding.

Unequal triads give the widest variety. They are any three colours which do not fall into the previous categories, and have unequal side by side intervals.

Warm colours accelerate and cool colours recede

This is what artists learn early on in their career. With it, they can brand skies and mountains compress to the backs of their canvases, and make vivid flowers stand up out in front. Information technology is what makes a room painted blueish look larger than one painted orange. The bluish recedes, so the walls wait farther abroad.

Have you ever noticed how mountains and forests in the distance e'er look a pale blueish, almost matching the colour of the sky? This effect is caused by the air betwixt you and there containing water. Water leaches out the colour and detail. In painting, simply calculation white tin can push something dorsum, to make it more distant.

So now when yous are creating a view in a table with headings and subheadings, if yous want the subheadings to stand forward of the heading, employ a warmer color. Exist subtle; do not have a red heading and a pale night blue subtitle, instead tint one color with a warmer or cooler colour to produce the other.

And then how tin can we use color?

When creating system objects, use system colours. When creating help files, apply the default system colour setup. When creating illustrations, or visuals which represent business or technical entities, you accept free range. Experiment with your complements and triads.

All works of fine art (the proficient ones anyway) are composed. Exercise you call up Mona Lisa simply happened to sit down down that fashion and Leonardo painted a snapshot? So think virtually what is existence displayed, how it should be displayed, and what colour combination would best bring out the information.

Great photographs are composed just the same equally bully art. Perhaps even more so, for the artist can choose only to omit what is non visually pleasing: the telegraph wires, electric pylons, ugly shaped clouds. The photographer is not so lucky. Poor composition is why your holiday snaps never manage to capture the place every bit it looked in the holiday brochure.

All software and printed presentation must exist equanimous. Information technology cannot exist hurled together. Artists and photographers are lucky. They can choose their own image size, and if others do not like it, they do non look at it. You are stuck with a rather small screen and limited resolution, and a user who likes to resize their view, or change the base of operations font size. And if the operating organisation supports it, so must our applications.

Fonts

Nosotros telephone call them fonts. Printers and graphic artists call them typefaces. Nevertheless, we must arroyo our use of them in the same mode. Nosotros are generally worse off than our brothers and sisters in graphic design, considering our working resolution is so much poorer. No graphic designer has to worry most how the size of a pixel will affect their fine art, and our glorious selection of fonts leads us to the assumption that nosotros can employ all of them.

The bog-eyed monster font may be your favourite. Yous may similar the lovely florid parchment font. Because you similar them does not hateful you should use them to present information. At best, yous can use the font selected by the system, at worst, stick to very plain fonts. Arial or Helvetica, Times New Roman, or fonts devised specifically for computer screen clarity such as Verdana. They are the items in your font palette. Exercise non go artistic.

A dominion of pollex for graphic designers is never to use more than than three fonts in whatsoever 1 piece of work. In software, I recommend never using more i if you can help information technology, particularly on the aforementioned screen, and avert italics wherever possible. Printed italics are rare, and used only for brief highlights. They are non as clear to read, and reading italics takes longer than reading normal text. On computer screens, italics are more hard once more. Be frugal.

Information graphics

The Visual Brandish of Quantitative Information[6] discusses the ups and downs of centuries of information brandish. It refers to graphical embellishments collectively as chartjunk, dividing this into vibrations, grids and ducks.

Vibrations such as cantankerous hatching, or regularly repeated small-scale items, tin cause the eye to see them as moving. Grids are the overpowering lines behind chart information, which are then detailed that the information takes second identify when attracting the viewer. Ducks are embellishment for embellishment�s sake. You will have come across 3D histograms, 3D pie charts. They are ducks.

Excellence in graphical display is

• Bear witness the information
• Induce the viewer to call back about the information, not the way it is presented
• Avoid information baloney
• Present many numbers in a minor space
• Encourage the eye to compare dissimilar pieces of data
• Reveal the data at several different levels of detail from a broad overview to fine detail
• Serve a clear purpose
• Exist closely integrated with verbal and statistical descriptions of the underlying data
• Present the data with the absolute minimum of embellishment

Figure 8.12 Overstated graph

There are many things wrong with this graph. Starting time, the grid overpowers the data. Text travels in two directions on both axes, making information technology hard to read. Finally, the numbers up the left manus side increase in size. There is an implication in this increasing size that 20 is more important than 5. This may be true, but the importance is stated enough in our agreement of the numbers. Increasing its size turns it into a lie. The viewer�due south attention is drawn to the larger number. Already implied in the viewer�s mind is that 20 is four times (more than meaning than) 5. It is now overstated by being four times as large. The mind of the viewer resolves both of these aspects and decides xx is now 4 x four larger than five, once for the number, and in one case for the size.

A much cleaner solution would be:

Figure viii.13 Understated graph

In that location is no filigree, no lie. The text all travels in the same direction, and there isn�t much of it. Yet the meaning is just every bit obvious.

Information density and information clarity

This is the truthful measure of displayed information: how piece of cake it is to understand, and how clear the data behind it is without having to see it.

When deciding on creating graphics to nowadays a bespeak of involvement, endeavor out the post-obit questions:

• Is a graphic better than a sentence?

• Is 3D really clearer in this example than 2D?

• Is a rendered 3D model necessary, or is a wire frame adequate?

• If this is to be printed, is color an improvement on blackness and white?

• Do I actually need blitheness, or is a static epitome but equally clear?

• Exercise I need to interact, or is non-interactive sufficient?

• Tin can I present this in unproblematic animation instead of using virtual reality?

The golden section

When specifying a preference for one particular rectangle over another, on average, people will increasingly prefer a rectangle which approaches the long to short side ratio of 1.618:1 or approximately 34:21. This ratio is the golden department. A rectangle where the sides are in the ratio of the golden section is chosen a gold rectangle. Information technology is the people's favourite.

Effigy viii.14 The golden rectangle, or golden section

1.618 is a bit of a magic number. If you divide i by one.618, you lot get 0.618. 1.618² = 2.618.

Before you lot rush back to your design and start hacking in golden rectangles, I should warn you: although 1.618:1 is the favourite of the masses, information technology does not mean that everyone prefers this shape, information technology is just the rather pocket-sized bulk of 35% of us. The other 65% prefer other dimensions, albeit to a bottom degree (around twenty% preferred 2:iii, and three:4 is favoured by less than 5%. At that place is also a slight difference between men and women, though they both superlative at around 35% for the golden section. Interestingly, only around 3% of males and females preferred a square over a rectangle, but this does non hateful you should stretch out your foursquare toolbar buttons a little more. You would become less in. We are express by our technological resources.

The golden section was much used in Greek Architecture, and has been used in many paintings, in an try to get expert proportion. It besides exists in mathematics, and in nature in the style our features are divided up.

In improver to the golden rectangle, we have a gilded spiral, where the screw is marked out, traversing successive edges of golden section rectangles.

Effigy 8.fifteen The gilded section spiral

This spiral is claimed to be in nature�s spirals, for example, on seashells.

Figure 8.16 The gilt section in a pentagon

The Fibonacci series is representative of the golden section

1 1 2 3 v 8 13 21 34 55 89 144 �

Each number in the series is the improver of the two preceding numbers. Dividing one number in the serial past its predecessor, we get

ane 2 i.v 1.half-dozen 1.625 1.615 1.619 1.618 one.618 �

That is, a gradual approach on the golden section.

Given a selection, you might like to use the aureate section to size upwards elements of a dialog. Here is an example:

Figure eight.17 Golden Dialog

The golden section is used for the shape of the main white window, and for the dialog itself. The dialog is divided horizontally by the aureate department between the white window and the stake window with the text (big pic) in information technology.

Not everything uses the gold department; that would be taking it as well far. Y'all would exist losing functionality for the sake of similarly shaped visual objects.

Effigy viii.xviii Golden department cats

Expecting the golden section to immediately solve all of your display problems is a fault. Information technology is but a useful measure out of preference. As an example, await at the example above. Fonts are commonly designed to aid clarity and enable you lot to read quickly. This is why most people withal adopt paper over video screens. The printed font is far clearer than its video equivalent.

Cats, every bit shown above, has had the a and s squashed, and the t cropped at the top to fit into golden rectangles. In addition the whole word has been stretched upwards, destroying its original aspect ratio. It looks ok, just not quite as right as in the unaltered version on the right.

Yous have an eye. Use it.

The Windows Interface

Visual Interface Design for Windows[eight] discusses the design of the Microsoft Windows interface. Information technology shows some fine examples of good design across the whole range of software from interactive children�s education packages to icons.

In the early on days, Windows was a clunky 3D in your face kind of operating system. When the 32 fleck operating systems came along, the 3D aspects had been softened, and many dialogs which had white backgrounds were given greyness backgrounds. It was something of an improvement, and in that location was a style guide for applications, and a sticker confirming that the software y'all were about to buy conformed to the new �ideal�.

This was about the fourth dimension when the net was changing from a place to share information to a place where people could brand money. The internet was flat. It was groovy, coloured, and ruled by graphic artists. All of a sudden graphic fine art became the driving part of company X�southward web blueprint. It matched their current printed graphic prototype. In that location were still the clunky 3D controls for forms, which looked pretty sad when compared to the beautiful designs they intruded into.

We take gone from apartment newspaper, to clunky 3D to smooth 3D, and now we�re dorsum to flat.

It seems that encyclopedia software, maps, games, children�s information, web sites, video and audio players can be groovy, heady, and artistic, withal concern software has to adapt to the ideals of the grey, slightly 3D world of the operating system basics. Why is that?

Visual Interface Design rounds off with a collection of keen interface work, and the seven pitfalls that user interface designers make. Briefly, they are:

1. Visual inconsistency. You should establish a design strategy before you brainstorm. With web/XML, this is piece of cake, as yous can reuse principal fashion sheets. On compiled apps, it is a case of using your eye to line up items on the interface, to make sure they are well proportioned, and non there just because that'south where it was first placed.

two. Lack of restraint. Information technology is better to be consequent, than to reach for the odd superb (in your own very of import opinion) output.

iii. Overbearing metaphors. We have talked enough almost metaphors. Some designers take them too literally in their translation of reality to a computer screen. For example, the Lotus Organizer/Diary which had a huge ring folder down the eye, rendering a cracking proportion of a rather limited area of screen unusable.

4. 3D overkill. Then many web sites and applications go overboard to bear witness 3D buttons with shadows that change equally keys are pressed and mouse devices are hovered or clicked. Be subtle.

v. Too many bright colours. Apply as few colours every bit possible, and brand them softer and more neutral, unless you are trying to go your viewer�s attention. A big red �YOUR MACHINE IS Nearly TO CRASH HORRIBLY� across a screen usually gets someone�southward attention, and it may be quite relevant. Otherwise, refrain.

6. Bad icons. Drawing icons is quite hard, especially so for non-artist techies. Icons should exist consistent, employ consistent colours, and be quite clear as to their meaning. If you can�t notice a suitable icon, use text.

7. Bad typography. I reckon this should accept been number i. It is the greatest failing of techies. �Wow what a cool font. I�ll use information technology in all my systems from now on.� Then they realise that no-i tin can read it and decide they have found a far libation one, something like letters made upwards from bullet holes in road signs.

Bad typography often comes from mixing too many inappropriate fonts. On a computer screen, annihilation just the clearest fonts used in large mensurate are an instant turn off.

Bad typography is also pages and pages of scrolling Times New Roman 12 point Normal without a pause for the eye. There are hundreds of societies and universities with absolutely awful pages, as they were written with the intention of providing text rather than sharing information. Near of them are copyrighted so long ago that the originator has probably forgotten about them.

More on fonts

Fonts are extremely circuitous. Anyone who has coded how text is displayed on the screen or printed page will have gone through the nightmare already. For those who haven�t, hither is a summary of font terms. They may come in handy one solar day.

TWhat we phone call a character, a printer calls a glyph. Virtually of printing�s terminology is derived from long ago when printing characters on the folio was a painful manual procedure. Somewhere between carving wooden blocks, and the modernistic pixel based devices, printing terminology was built-in. It is steeped in tradition, such as CAPITALS were organized in the wooden case furthest abroad and then the printer had the near mutual form of letter nearest, i.e. in the lower example. Hence, upper case and lower case letters.

Figure 8.19 Characters

The height a grapheme rises above the baseline is called the Ascension. Rising for a given font or typeface is usually measured by the G glyph. Descent is how far a character drops below the baseline.

There are a number of different types of font. In the old days nosotros had bitmapped fonts known as raster fonts. They were quick to depict and designed specifically for stock-still size, pixellated displays. At present we have truetype and type1 fonts which are vector fonts, scaled to any size, and suitable for any display medium.

Nosotros also have ii font styles in terms of fixed or variable pitch fonts. Fixed pitch are descended from typewriters where each graphic symbol is the same width. Variable pitch fonts are descended from printing where characters are separated by the distance most suitable for reading comfortably.

External leading is the distance between ane line of text and the next. Leading is pronounced like heading, and is derived from the amount of lead (plumbum � the metallic) placed betwixt the lines of text in printing. Internal leading is the altitude from the acme of the character prison cell to the pinnacle of the character. This varies from one grapheme to the next, but the internal leading for the font is once again measured to the top of the letter M.

Variable pitch fonts use two methods for font spacing. The first method is to requite each character or glyph a set of three horizontal distances, a, b and c.

Effigy viii.20 abc dimensions of glyphs

The first glyph �M� has a very small a dimension and a zippo c dimension. The second glyph �f� has a negative a and c dimension. When an M is drawn next to some other M, the spacing between them is a + c. As c is nix, the distance is a. The 2d glyph, having negative a and c dimensions ways that when the ii �f�southward are fatigued together, they overlap.

The 2d method of spacing is named kerning. Kerning is a further quality measure in readability, where pairs of characters are fatigued differently to the a-b-c spacing. For case, a �K� followed by an �e� may be divers every bit a kerning pair equally they will exist spaced differently to a Ki or Le combination. Each font carries with information technology a fix of abc dimensions and a kerning pair table.

Fonts are farther defined by belonging to families. Roman family fonts, for instance, Times, are proportional serif fonts. Swiss fonts, for instance, Helvetica or Arial, are proportional sans serif fonts. A serif is the curt right angled line at the cease of a stroke.

Figure 8.21 Serif and Sans serif fonts

Other font families are script, which resembles handwriting, modern, which is fixed pitch and abiding stroke width, and finally decorative, which catches annihilation not in the other categories.

Enough on theory. I shall not trouble you further with diacritics, ligation and kashida, only if you desire to display languages other than English, yous will come across them. For this, and more discussion on programming fonts, run across the Visual Bones Developer's Guide to the Win32 API[nine].

Fake pas, and finesse with fonts and characters

Finesse �

• Use SMALL CAPITALS to emphasize a word where bold or italic looks ungainly, east.1000 SouthOFTWARE ARCHITECTURE tin can exist an comeback over all capitals or mixed upper case and lower case.

• Use upper and lower case numbers: Telephone call me on 01234 987654, or Call me on 01234 987654. Lower case numbers with descenders can avoid the blocky look of upper example numbers if desired. Yet, few fonts use lower example numbers.

• Typefaces have distinct personalities. Y'all must choose the i which delivers the message almost elegantly.

• flbacus - does this say Abacus? Paste it into a word processor and add spaces between the letters. When designing graphic displays or splash screens, it may be worth investing in fonts with ligatures to avert ambivalent in the following combinations: ff, fi, fl, ffi and ffl.

• When using ellipses, use the right character (char 133 in truetype fonts) rather than entering three periods: ... != �

• When using dashes, use an en-dash (the short one) rather than an em-nuance (the long ane), unless the word following the dash is hyphenated: Pearly Wilks � chief-of-staff of�

Faux pas �

• Practice non type 2 spaces after a total stop. Proportionally spaced fonts and full justification (aligning a line to both left and right borders) make a double space await odd.

• Practice not underline. It is a hang over from the days of typewriters and looks messy. Use bold or italic instead. For even greater printed legibility, utilize bold and italic versions of typefaces rather than the bold and italic options in the menu bar, although on screen this would make little deviation.

• Utilise �single� or �double� quotation marks rather than the neutral 'unmarried' and "double" ones, traditionally used only to indicate units of measure.

• Sometimes the default leading (line spacing), tracking (letter spacing) and kerning (specific letter pair spacing) do not convey your message adequately. Feel costless to tweak.

A change of view

There is a skilful instance of the dying 3D approach, and its replacement with subtle tones on Microsoft�s Programmer Network (MSDN)[eleven]. It is titled Start Making Sense. Here are the before and later interfaces:

Figure viii.22 Pre web, 3D lovelies

Figure 8.23 Postal service web, flat, toned rather than coloured

Image types

We use four main image types: vector, bitmap, gif and JPEG.� For large diagrams, vector graphics is by far the best method, providing the tools to render it are bachelor.

Bitmaps should be kept to an absolute minimum every bit they are often huge, especially when compared to compressed file formats for all but the smallest icons.

Gifs are meliorate than JPEGs for diagrams, where there is a limited colour range and high contrast between the colours. JPEGs are meliorate for photographs and pictures with a lot of color blending.

Meridian Left

Light, according to the designers of our operating systems, comes from the top left of the page. It is a part of our �western� culture. Nosotros begin meridian left when reading a folio. If you are defining a 3D look and feel to a particular piece of software, y'all should keep this in mind while illustrating. If light comes from top left, and yous draw all of your interfaces as if the light came from lesser right, all your highlights will look like indents, and vice-versa. Your viewer will exist confused. It will strain their eyes and encephalon, trying to realign their expectations. Simply, it volition not work for them.

Other cultures read from the top right or in columns, but that is rarely reflected in our operating systems.

The rhyme and the reason of graphic blueprint

Good blueprint draws the eye and engages the mind. That is the measure of it. Unfortunately for graphic designers, that is non the limit of information technology in software. Software also requires usability, and poor usability can destroy your beautiful creations.

Usability is a subject field in its ain right, and dealt with superbly in Don�t brand me think[12].

As good blueprint catches the middle, usability guides it. In a modernistic windows style organisation, people know where to click. They wait for the 3D buttons with OK or Cancel on. On the cyberspace, they look for buttons, or the underlined or uniformly coloured hyperlinks. If you do not lead your users effectually by the centre, yous will lose them.

And finally

The Speaker, Betty Boothroyd, rebuked a [Member of Parliament] for using a cardboard diagram in the [House of] Eatables to explain overseas assist figures. She said �I have ever believed that all Members of this Firm should be sufficiently articulate to express what they want to say without diagrams.� [xiii]

References

1. The Aims of Art. William Morris
2. The art and craft of the auto (1904). Frank Lloyd Wright
3. 20th Century Design Classics. Chris Pierce. H.C. Blossom
4. Catch 22. Joseph Heller
5. The artist's guide to composition. Frank Webb. David & Charles
6. The visual display of data graphics. Edward R Tufte. Graphics Press
7. The shapes we need. Kurt Roland. Ginn and Visitor.
8. Visual Interface Design for Windows. Virginia Howlett. John Wiley
9. Visual Basic Programmer'due south guide to the Win32 API. Dan Appleman. Ziff-Davis Printing
10. Font & Office No12 Autumn 1993. Adobe Systems
11. MSDN article: Start Making Sense. Mike Pietraszak. Microsoft.
12. Don't make me think. Steve Krug. New Riders
13. The Guardian. 7^thursday December 1994

Click here for the US book list
Click here for the Britain book listing

bertiesquam1976.blogspot.com

Source: http://www.ivencia.com/softwarearchitect/chapter8/chapter8.htm

Share :