ZX Forum #04 19 ноября 1997

Графика

Secrets of Successful Design - Head for the book "Design your Programs

M. Rozhnova, S. Krushynskiy


   SECRETS OF SUCCESSFUL DESIGN


  (Chapter for the book "Design your
Programs ")


  On quality of design computer programs can be divided into
three categories:

  1) Those in which work
attended by professional artists. This is a brilliant product
firms Microsoft, Borland International, and Norton, games, 
enjoying world-renowned - In short, the creation "of the 
capitalist monsters who are fighting for world domination." In 
fact, it is a "trendsetter"

in the computer market. New
ideas, passages appear exactly
here.

  2) Written by experienced programmers. These people may
never think about
purely aesthetic issues.
But working within a culture and steady
standards, they know, as they do in a given
case. We get quite competitive thing. Sometimes,
true slip "bloopers" -
For example, when a programmer, creating a Russian font, 
mechanical decides delicate questions over which beat more than 
one generation of artists. 

  3) Programs where the design generally ignored - either 
through ignorance or reluctance on (say, To hell with them, all 
these things! Works - and well ...) 

  We realize it or not, but
computer - this is a special world. Someone in it works, some 
rest, and some go back live. Depends on the programmers,

Will this world a comfortable and beautiful, or be like untidy 
clothing market, which Though performs some useful function, 
though not the best a place for hanging out. Design - a means 
of "humanizing" mechanical world. Sometimes, of

a text editor to quickly get tired, and after another sitting
all day and though that. Specialist, looking at the tiring
the program will immediately understand what
thing: perhaps a series of letters "fall" from the conventional 
style - to read them, have unwittingly once again strained his 
eyes, - or the information displayed, poorly organized, which 
again leads to strain. Or color matched unsuccessfully ... 
Programmer gaining experience, learning from their mistakes, 
gradually finds optimal solutions,

and then finds its own
style. But whether or not to reinvent
bike when there is an entire culture, to which shall be
contribute to generation of professionals? Sometimes the most 
unpretentious of programs written by the Czechs, British, 
Poles, Germans, seem more attractive than ours, because we

Unlike them, from childhood accustomed to the ugly toys,
ugly display cases, poorly published books. The purpose of this 
chapter - to acquaint laymen with generally accepted principles 
and techniques of design, that could help them in their work.



            1. FONT


   Selecting a font where else - in publishing, film, 
television, the computer program - especially due to its 
particular role, load, which he will

carry. Therefore, there exist
thing as a regular, a header, a decorative font ...


        Regular font


  The role of the regular font is the most
modest and at the same time the most
responsible: to act as an ideal
mediator, a servant. His main qualities - the readability and 
simplicity. It should not involve attention, his mark

most recognizable and familiar to the eye, otherwise it will 
distract would make sense from written material. For

century of its existence it
little changed, and any innovative
runs the risk of spending power is wasted.

  The risk assumed computer manufacturers. It is clear that
early days of computerization, they
were placed in the same harsh conditions as the pioneer: the 
technical limitations do not you closer to the usual printing 
standards. As much as the book

out-of-the first printing presses, inferior manuscripts,
Fonts first desktops inferior printing fonts. C
development of computer technology, the advent of increasingly 
sophisticated graphics card and laser printer business has 
changed; graphics capabilities of today's computers, there 
seems no limit software Wednesday "Microsoft Windows" allows 
the flexibility to work with what please headsets - from the 
"Times" to "Elizabeth."


 Standard sinklerovsky set


   What to say about the Spectrum?
Before him is not intended to impose book layouts, but the font,
close to a regular, necessary, and here. Concept graphics 
Spectrum (and it was designed to solve several problems - 
speed, memory savings, low cost, the use of domestic TV - in 
the opportunities for the early 80's) set of developers to have 
to hold regular font in a matrix of 8 * 8 pixels. That

also came out of it?

  Looking at the line in 32 familiarity, can not help recalling 
a school notebook in the box and a lesson in first class, in 
which the teacher puts on job fit letter in each cell. Between

marks a big gap, line
does not look solid and slim,
Why slow down reading. When we look at a typed paragraph, 
spaces between words in adjacent rows in some places together, 
and the paragraph is as "wort." It is necessary to squint as a 
strings disappear - the text turns to mush. 32

familiarity - far from the optimum size of line on the screen a 
few times less than in a dense set.

This hinders the creation of tables,
are not supposed to move from screen to screen. Present
wasteful handling of the page format. As regards the 
construction of letters, some are pretty strange. Shall find an 
excerpt from the song Beatles: 

 In the town where I was born
 Lived the man, who saled to see
 And he told us of his life
 In the yellow submarine ...


   In order to write letters to the matrix 8 * 8 and to 
preserve as much as possible, unity of style, some of them

have to artificially stretch
("E", "h", "y"), and others - to compress
("W", "m"). Not all letters forced vtiskivaniyu succumbed to 
the template: "l", "t", "f" have maintained their usual mark. 
But when viewed in the context of strings, or even word you 
typed, then they just contribute to a string flaw: like

Just as the spaces between words
affect the integrity of the line, ie
on "horizontal" gaps between
letters combine letters into words. It is necessary to slightly 
increase these spaces as word breaks.

As it turns out the words "yellow", "believe", "life".

  Often mezhbukvenny gap
more than the spacing (line spacing). If the gaps in adjacent 
rows are one under the other, increasing

sense of discontinuity in the text. When text is typed white on 
black background working actively - before us is not the text, 
and the constellation the night sky.


  Letters both Latin and
Russian alphabet are outrigger elements (sticking legs and
horns). All the same ill-fated
template distorts them and vertically: "h", "b", "d" like 
squat; "y", "g", on the contrary, "catching up on his hands." 
That seems to be that the letters jump. Special discussion on 
the "i". Near neighbors it Shorty looks. Perhaps

someone of the readers have had to deal with computer russified 
MSX. There exists same mistake is made in the construction of 
"second": upper leg cut, a "tick" is down.



  Apparently, the shortcomings of the font Spectrum due not
hack, and the "Procrustean bed"
system requirements. Programmer who uses the whole
this font, and standard procedures for printing, may still be 
smoothed to some extent the basic disadvantages. You can 
recommend the following: 

  1) Print in black and white
not vice versa. Black activity, so the gaps are not too 
apparent. 

  2) Insert between lines
a blank line separating the thus "horizontal".

  3) Sitting at the computer, eat a carrot - this will help
to preserve vision.

  Fortunately, Sir Sinclair, allowing the programmer with a 
minimum efforts to create their own sets of letters and print 
them with using the system procedures well known ways: either 
with use of graphics

Users (UDG), or through
change the system variable
CHARS. Of course, even here we must enter the letters in the 
standard template. 


           Styling


  Of course, regular font
impoverishes and makes a boring computer game. Therefore rarely
meet a toy, where there is no proper font. Then there are 
successes and failures. 

  Take, for example, the favorite with all the "Elite". 
Principle of stylization is served "angled corner." So treated 
the whole standard set of characters. But it is done too 
mechanically. If the letter "n", "m", "u" is a "decoration" do 
no harm, then the "v", "T" and especially "i" look helpless, 
they are deprived of stability. When you look at the dialed 
text by some of the letters you want to substitute crutches. As 
a result, there is no easy shifty eyes on the line, but there 
is a jump and a sense of fragmentation. The matter is 
compounded by the fact that in this game the text is not the 
last role - the font on a plan serves as a regular. It is a 
pity that the game, having so many "plus" in terms of graphics 
and the plot loses This points.


  Note that the font "Elite" - a claim to something original.
Most stylization approach to a particular standard. Meets like 
"Broadway", "Futura" and some other well-known styles. If we 
ignore the helpless attempts play in the Goth

Standard familiarity, these solutions appear as a whole 
successful. Here are a few examples.


  1) Modern clean computer font, similar to that used in the 
movie "Terminator." 

  View the help page
music editor "Wham".

  Rare for the Spectrum case
when not solve the problem
mezhbukvennogo space! And made it easy. The surplus of empty
location offset thickening
letters. Violate the logic of selected only "d" and "y". In the 
first If fat could be better

make a barrel - the main axis, on
which the letter is contained - and not
point. In all other literature guessed axis (compare "d" c
"B"). A letter "y" for some reason, all were released from 
thickening because of what it was too bright compared to the 
rest of the headset. You can retort: ​​"w" and "m" too skinny. 
But these letters are initially ample, they completely fill the 
grid 8 * 8 and do not leave room for swelling. But the letter

"I" is found successful. She is such a
as tall as "i" in "Elite", but
not perceived such a short people, because it is not vertical
presses the horizontal
planochkoy (resection).


  The package "Supercode" similar
font called "Scifi" (from the English Science Fiction - Science
fiction). It used an interesting move: uppercase and lowercase 
letters the same size. The only difference is the mark. K 
Unfortunately, they are not united in their style: small 
letters are not so too much different from the standard, not 
taking into account their increased thickness, title case is 
inherent in a distinct style. No accident that the menu of the 
program "Supercode" use only lower case.

Vertical letters occupy 5
pixels, so the headset is stretched wide. This solves
problem mezhbukvennyh distances in all situations ... except
those which involved "i".
Alas, because it appears the usual "hole". Another drawback: 
"D" does not differ from the "O" anything other than 
thickening: the first is right at the second - on the left. It 
would be better to cut off the upper right corner of "D". In 
Overall, the thickening in this script made quite competently. 


           Thickening


  ... It is the natural course of
refinement Spectrum font, many authors go on this
way. Address several
problems.

  Firstly, it becomes easier to read text in not only the dark 
on a light, but bright letters on dark "paper." There is a 
concept of form and kontrformy. "Skeleton" of the letter in 
this case can be considered both form and space that surrounds 
it - as kontrformu. When a letter is dark and the background 
Light, form is more active. If on the contrary - a dark 
background and Bright character - wins kontrforma. But it is 
necessary to make the letter thicker kontrforma again it will 
take to the second plan. Thus, it is possible to use a variety 
of color combinations. Yellow letters on a blue background 
looks no worse than the blue on the yellow. In the game 
programs, where the screens are different colors

variegated, it is especially important. (See the menu of the 
game "The Eagle's Nest ").


  Second, thickening of the "eats"
mezhbukvennogo surplus space (Eternal Spectrum
problem).


  Third, the richer the form
letters. After all, it is usually thicken
vertical jumpers also remain the same. Interrupted
tedious monotony of the line.

  Thicken the font in any case can not be mechanically, 
ignoring the logic of the letter (A few recently published in 
the "ZX-Review" procedures, which are automatically thicken the 
letters, no doubt, ingenious, but unsightly. Note: y each 
letter is the main axis support, as well as the center of 
gravity, with which must be handled carefully so as not to 
"topple" the letter. For example, the letter "A" "Y", "h", "I", 
"d", "g" reliance on the right, point left. They seem to turn 
and face left. There is a contrary, a person directed to the 
right: "P", "k", "a", "h", "e", "c", "p", "f",

"B", etc. The third group - the letters ravnonapravlennye, 
static: "Well", "r", "w", "w", "o" and "," t "," i ".

However, with the listed characters rarely make mistakes. Not
so easy to "A" and "A". They are sometimes incorrectly thicken 
the left, While the main axis is the right vertical.


  Different parts of any pictorial surface, whether
sheet of paper, screen, pattern 8 * 8,
perceived by our vision
unequally. We make a simple exercise. Draw a ladder that 
connects the upper left and right lower corner of the paper. 
And another picture - staircase connects the lower left and 
upper right corners. On the first look will go down, and the 
second - rise. That is why, if we talk about the design of 
letters, diagonal from the upper corner in

bottom right is usually harder
wider than the swift diagonal from lower left to right
top. This is due to the fundamental difference between the 
Latin "N" from the Russian "I", and also features skew the 
letters "L", "A" and "D". 


      Cyrillic font


  For purely historical reasons, with the Latin alphabet case
always was well:
any page, typed in the classical Latin alphabet, looks prettier 
and cleaner than a page in Russian. At the time, Tsar Peter I 
personally made the reform of the national script by adjusting 
Some form of letters or deleting others. It was a violent

Europeanization, produced by an amateur, and we reap the fruit 
of it until now. Alas, Peter stopped the ability to create a 
truly harmonious headset Russian font, equal in merit, say, 
English The Times.


   Surely the reader, who worked on Russification programs
face the following challenges: how to make the "h"
markedly different from the "e", and
"H" - from "y"? Thanks Peter
Great! It is obvious: you can sometimes without prejudice to 
copy the Latin inscription. For example, the "I" - is an 
inverted Latin "R" plus a diagonal foot. At the same

time, there are a number of nefarious characters,
who always brought a lot of
trouble type designer. Among them
J. Between the letter and its remote
item (check), there
gap, due to which the letter of
growth exceeds the neighbors
line. Japanese, rusifitsiruya home computer MSX-Yamaha, not
philosophize sly - they just shortened the letter. That is 
sacrificed in height in order to maintain a formal sign - 
space. It would be better to keep integrity of the line due to 
changes in shape and size of the checkboxes. It is important to 
remember that arbitrary change the height of the letters can 
not be, otherwise the string "jumped." 

  "U" also has the "inconvenient"
remote element. The letter belongs to the category of broad, 
and its so hard to fit into the matrix. A

then there's "tail"!

  Two examples cited
enough to understand:
One of the main difficulties in
establishment of the Russian font in the template 
vosmikletochnogo - a detail view. Worst of all is the case with 
lower case letters. In English lowercase

There are also detail view
but all the loops are directed downwards
("G", "j", "q", "y"), and smear everything up can be reduced to
simple vertical stick
("B", "d", "h", "t") or point
("I", "j"). With regard to "f", then
to the upper loop is not
dropped on a horizontal rod, can last a little
omitted. Set of Russian capital abounds with loops, directed 
both up and down ("B", "c", "e", "h", "y", "C", "u").

Recall first mandatory
condition: keep the structure of characters, so that she was 
recognizable. Second: to preserve the integrity of

line - a body of letters must be on one line (can not
for example, omit the point "b" on
one pixel down in the zone of lower
detail view and to raise
point "e" at the same rate up:
line would become jumping). For
loops are needed, at a minimum,
2 pixels above and two below.
In addition, it is desirable to leave
one row, the top or the bottom, empty rows to not be stuck into 
one another. Thus, for the main part letters is only 3-4 pixels

vertically. Horizontal at
This takes 6-8 pixels. Or letters will be flattened, or 
mezhbukvennye gaps - monstrous. 


  If, bypassing the ROM,
assembler level to organize
printing in a matrix, say, 8 to
vertical and 6 horizontal
the proportion of change for the better.
But more on that later.


       Compatibility of letters


  When creating a new font, the first thing to do - is to print 
a few lines and see how written integrally. Even if the letters 
individually designed seemingly perfect, anyway should check 
how they coexist with others in words. Look, do not "get 
caught" Do the letters to each other, are not formed Is the 
"hole". If yes (and more often and sometimes at the beginning, 
even professionals), need to edit the size of doubtful letters

or shift their relative template. Analyzing the combination of 
the two letters, must take into account how often it occurs in 
the Russian language. You should not wrestle,

over how to fit under each
another, say "ni" and "z". Try printing: still in love
blues and Plyushchikha. "As a" u "and
"You" are among the disputed letters. They are wider than the 
others and do not like to over them

to experiment. In general,
in each of the alphabet, there are narrow,
medium and large letters, it is natural, so do not try
reduce everything to a single average
size.

 Custom printing procedure


  As a reader, perhaps, convinced even the most competent
approach to business, the matrix 8 * 8 -
Procrustean bed for the font, and
achieve a truly satisfactory results using the standard Spectrum
printing procedure, no matter how we
tried, impossible. Of course,
it can be ignored if you create a program where the text is not
play a decisive role (depending on
genre). But for the application program with some complex
tables, or simply contain
a lot of "scribbling" requires something
quite another. Developers of software for
Spectrum - a text editor, advanced versions of BASIC,
Editors Assembler and other
Languages ​​- got it in the first
turn. At the level of machine
language are written procedures that bypass the standard RST 10H
and allow you to print in the
virtually any given
template. An example of such a program
contained in the book "Applied
schedule. "There we are talking about the template 5 to 6 
horizontal to vertical. It's easy to reconfigure on any other 
template - just change the parameters cycles (after all, based 
on procedures printing, including standard, is "drawing" points;

matrix - in fact, two nested loops: to draw a pixel rows n 
n-Noe number of pixel columns). 


        Very narrow set of


  Most often, the characters occupy a narrow set of 4 pixels 
horizontally. One additional (Left or right) provides

mezhbukvenny gap. Vertical letter can take from five
up to seven "cells", but better
to leave the seven characters
and one below the space bar to no problems with a line
intervals and outside elements. Thus, for very
narrow set of most appropriate
is a matrix of 5 * 8. At the same time
font can be quite recognizable, if you get down to business
competently. Text in such letters will be perceived, even 
better than the standard, because the line more closely. 
Incidentally, the question of the number characters per line 
should not be solved arbitrarily. From this also depends on the 
ease of visual perception. In the printing industry is 
considered an ideal 50-60 characters line.


  Requirements for the set here are
the same ones that were mentioned earlier, perhaps even higher,
because it is a strictly regular font. Unfortunately, no
All developers have used them. The authors are well-known text
editor of "The Last Word" went on the road, with a witty point
view of the programmer, but quite inconvenient for the user - 
they do not create a new font for the small print (in mode 
"Video 80") and written procedures that are in accordance with 
the specified vectors treated with standard symbols set and 
deliver them to the screen thumbnails. As a result,

when you see the typed string
it seems that combined several different headsets. Since when 
is a "b" and "d" different sized point? "I" does not fit 
perfectly in a row ... Judging by the number of "punctures"

critical issues or do not
solved, or solved hastily.
Print mode "Video 40" looks better, but here kakayato failed 
"a" and the same problem with "holes". If you find that one and 
a half hours in a text editor, a headache, do not be surprised: 
this is due to the fact that the line "jumps", "i" is less than 
adjacent letters etc.


  Editor Tasword - a longtime rival "The Last Word" - refers 
not to a set of ROMs, and to font of its own, extremely

shallow (64 characters per line)
which, though not perfect, all
performs the same tasks. He even managed to make
it rounded!

  Font - a delicate matter and requires
very attentive to their relationship; should not succumb
temptation to shift the task of
its processing on the shoulders of the computer. No accident 
that the language Beta and Mega Basic, where the remaining

cases quite actively processed the original font
set for the small print is a separate headset
Incidentally, it is quite decent. In the graphical editor
"The Artist" funds are available
to create a small font
set. In general, small fonts
These and other Western programs ("PRODOS", "Gens50", etc.)
are almost identical and totally
meet its intended purpose. On
against the background of the driver Basic64 (after
his boot computer goes into 64 characters per line)
looks ridiculous. It uses a matrix of 8 * 4, as in Tasword'e,
but the authors decided to increase the size of letters, did 
not leave empty vertical column for mezhbukvennyh gaps, 
resulting in What readability equal to zero.


  The main field of application is extremely narrow Font - 
volume spreadsheets and text editors.

Among other things, it is convenient and the fact
that on the screen the user sees the same thing on paper,
if you use the printer. That
As for the applications
those genres where there is no need to put a lot of text on one
screen, it is not necessary,
since all the merits
small set, read it all
as difficult a person with a weak
vision, and he who does not wear glasses, most likely some time 
will get them. 


  Other unusual patterns


  Long ago came into use pattern that horizontal
only 2 cells are smaller than the standard (8 * 6 instead of 8 
* 8). Most of the characters fit into the five cells, one 
column is left blank. 

   Convenient than a template? First, it allows you to put in
line of 42 characters - not so hot
how much, but in many cases
more and is not required. Difference
noticeable compared to the ludicrous to 32 characters per line. 
Secondly, is solved completely at issue mezhbukvennyh

gaps and detail view.
Third, in contrast to the very
narrow set of such fonts can be different versions of the 
letters designs, styling and thickening. Smoothly passes and 
Russification. Such fonts can be found the widest use, costs 
only draw it once and work above the routine. Consider a few 
examples. 

  Ingeniously designed font
in an old package Editas / Monitor (this is an assembler and 
disassembler). It is difficult to assume that its created by 
professional designers, but the upper solved straight-away in 
the Constructivist style! The most successful characters are 
derived from a combination of square and triangle. In fact,

defeating what is usually
serves as a limitation - the unhappy rectangular matrix.

  Probably, many readers
familiar addictive space game "Academy". It was written by
Englishman Pete Cook. Less is known for its other software 
obuchayusche Applied genre - "Astronomer" issued by the sky map 
and information about the stars. In both design and, in 
particular, a font, beautifully thought out. Different programs 
use the same techniques permit immediately know the author's 
handwriting. Apparently, he used his standard library screen 
procedures. Font 6 * 8, bold. Gives the impression that this is 
the only case when fully seasoned style "Helvetica". Let us 
explain: Fonts are divided into two categories - antique and 
Helvetica. The first is characterized by "notches" (Say, the 
foot "T" stands for "Stand", and the corners "roof"

go down). Typical antikvenny set in a typewriter. The second 
type of font, on the contrary, "Chopped". The vast majority of 
computer system fonts, of course, applies

the second category, because
"Helvetica", "economical". Good manners - to stick to one or 
another style, which, as generally do not sinkleristy.

Letter "i" for some reason, always striving to make 
antikvennoy, although this is not necessary. Pete

Cook, unlike the others,
Following the principles of Helvetica, left the "i" without the 
"feet" and "Shoulder".


  Fat content of the font makes it
extremely active. Line
perceived as if it
thick tape. Therefore, between
rows must be at least an interval of one line.
However, such an active font
stand and more leading.

  Because of its heaviness,
this headset can not be used in a text editor, but is perfect 
for display messages, menus and

etc.

  Problem solved letter spacing is so good that
impression: the author
attached to the procedures for printing
some routines that check what characters side by side,
and in accordance with the increase or decrease mezhbukvennoe 
distance. Because if you simply try to print

his characters, no such effect
succeed.


  Similar set of uses in its programs Nikolai Rodionov.
Unfortunately, with all the advantages of design Rodionova 
(colors, dialog boxes, composition), type - the weakest link. 
Consider the program DCU (Disk Control Utility).


  It is not greasy, and the contrasting font (combining thick 
and thin lines). Rush in the face several disadvantages.


  1) Poor relation to the size of the lowercase and uppercase 
letters. Lowercase "h" is higher than a capital "C", while "A" 
and "B" of the same height. Capitals easier, weightlessness, a 
feeling that they are about to take off. 

  2) Failure design of letters.
For example, "d" is lower than "k".
"A" is given in mirror
(Colon must be right, but
no left side). For the "v" natural symmetry, here
thickening of the left makes it aimed right. Same
can be said about the "O". "M"
too broad and bold, even for
This advanced headset.

  3) The letters "merges" into each other. For example, the 
word "drive" legs "d and" r ", and" i "and

"V" are joined into a solid blot.

  Text is perceived as playing the sun through the trees, it 
consists of alternating gaps and uneven spots. For such a font 
would fit a pattern more than 6 * 8.



  Print forty-two characters in
line - the standard operating system IS-DOS. In this mode works 
and the file wrapper, and a text editor, and numerous 
applications. Font - both Russian and Latin -

not thickened. Felt that the authors in this as in other 
respects, sought to assimilate the Spectrum

IBM. However, it is illiterate
designed font can only serve as an example of how
Can not do. Lowercase "f" and
"W" for some reason the square, at the
while the other letters with similar "points" - the round.
Absolutely broken relationship
letters horizontally and vertically.
Ridiculous styling lowercase
(Eg, Latin "with" with some chin with one leg
"Y" below the other, incomprehensible "h"
etc.). The reader that is available system IS-DOS, and himself, 
without easily find many other

stylistic inconsistencies.

 Can I do without a matrix?


  So far we have talked about the so-called disproportionate 
font that is so, in which all the letters fit into one and

the same matrix without regard to their own proportions. We 
compared the different matrices and talked about what kind of 
better. Naturally, whatever it was, will always be difficulties 
associated with the initially unequal width letters, with 
letter spacing, "holes" in the text, the proximity of some 
inharmonious letters. But the strings are absolutely identical 
in length, and the letters are arranged exactly one above 
another. Disproportionate to the font used in a typewriter,

are integrated sets of printers and the vast majority of
computer fonts. Printing fonts, contrast, proportion, you can 
see this, examined with a magnifying glass text Any decently 
published book. Incidentally, the printing spacing between 
adjacent words less familiarity. Eyes do not "stumble"! If 
someone of the readers had to work environment "Microsoft 
Windows", he probably noticed that

there can be used as disproportionate (for example, "Courier"), 
and proportional font ("Times", etc.), the last even longer.


   In general, the write decoder proportional font is 
theoretically not so difficult. Sinkleristam have

consider only two eternal obstacles - speed and memory 
capacity. There are two ways. First: the normal procedure for 
printing templates to insert a series of tests, which, 
depending on next and previous character will change the 
parameter of horizontal loop - this is the most economical 
method. Second way: each letter to draw individual

procedure.


    2. ORGANISED DISPLAY


  Material with which to work a computer designer who is 
incredibly diverse: this is educational, and gaming, and 
software applications. The strategic objective of the designer 
tightly interfaced with the task of the programmer - and the 
dismemberment of the organization various structures. At the 
same time all forces should be directed

to achieve the main goal -
agree on the function and form. Work program (its function) and
appearance (form) - a concept
indissoluble. That's why so
important that each programmer was at least an elementary
formed in the field of design.
Each software product must be finely-conceived and from the 
perspective of an external organization - in the end, it is

means of communication.

  Try to understand the laws of the organization of the image.
Pledge of beauty - a clear track to the express the relations 
of parts, in other words - harmony of all elements. Immense 
text programs should be divided functionally and imagine how it 
will manifest on the screen. All sorts of "Help"-s, menus, 
tables, screen savers, schedule of games and blocks of text -

that's all that will be the outside and caring
actual designer.

  As you know, good style
programming involves
well-designed structure
program, a strict hierarchy
procedures. The same applies to
design. In any case,
avoid chaos. If the program
written by confused, full of direct transitions, but it works -
about it, maybe no one would guess. But careless design can 
always scare away users. In fact, better structured program, 
the easier and more fun it issue: what is the chief of its 
logic will prevail and figuratively. Suppose, provides that if 
user presses a key , stopped work in native mode, a 
message appears: "DEPRESSED BREAK!". There was something 
extraordinary - it's all well, that pull the stop valve

train. Naturally, such
communication must involve
attention - the color, place
on the screen, maybe even a sound. On the other hand, display 
the current time, the information is clearly secondary, should 
not distract attention. Her place in the top right corner of 
the screen, let yourself sitting there with a view

servants who are not imprisoned for the general dinner table. 
In general, this is so clear to everyone. But there are

cases are more complicated.

  Let's start from the beginning. Assume
You have designed a program
clearly imagine it
structure, what it does, what information is received and what
issues. Style depends primarily on the genre.
What is the program: Text
or figurative? Serves as a
it's for work or entertainment?
Dry, academic or alive
sociable? Depends on this and
the number of fonts that are required, and color, and
sound - in short, a whole arsenal of graphic tools.


        Curriculum


  ... Quite complex, with a point
of design, material. Because it must work out
complex and most heterogeneous connections between the 
elements, namely: graphics-design - the text, tables -

graphics main text - notes / additions / inquiries; posts - 
screensavers, etc. Present mixed type of program. Equally 
important images and text. Do not do the same headset

font. Will definitely attend the main font - clear
readable Headset normal
Inscription; same message - that,
which should attract attention and
remember - you need to focus (or bold, or large,
either bright or with increased
mezhbukvennoy discharge). Certainly have to create your own 
headset, which will include the original signal elements 
(arrows, ticks, special cursor, etc.). Help

by analogy with the book notes, it is better to recruit small 
and closely. In short, the font

carries a heavy load.

  For the training program is not enough two or three colors. 
Require multi-window interface, possible - the animation.



      System program


   According to legend, Julius Caesar, reforming the language 
spoken by the ancient population of the British Islands, guided 
by Aristotle's principle: "To argue should not so that people 
could understand, but so that it could not understand." So must 
execute and system software, where user error - like a bug 
sapper. Try to make a mistake when it comes to testing and 
repair "the disc! The diversity and variety here either to 
anything. In a good system program to distract attention from 
the text and working schemes everything breathes conciseness.


  System software must not be
bore. The fuller the "appearance"
reveals the logic, the
better. For each kind of messages - for example, the error -
better to reserve some space on the screen so the user never 
really thought, where to find (the so-called windows in this 
chapter will be discussed further). Designed to help him to 
bring the work to automatism. Most likely, you will manage One 
well-read your headset, the minimum colors. On the other hand, 
need to think aktsentirovki system - the same ticks and arrows, 
or some color (if the color is not used for other purposes.)



              Games


  In most cases, the main burden falls on the image. Of course, 
richer than it is - the better. Although it is not necessary to 
abuse a variety of colors. Two or three is enough. This is well 
written in Article by Steve Turner, published by "ZX REVIEW.


  Text, play a subordinate
role should be typed,
stylistically close to the image or the corresponding topics. In
game "Cobra", for example, where the gallant fellows commandos 
fighting with terrorists, on each of the characters brought up 
the dossier. Text files recruited, as expected, print

typewriter (Courier). As
could have done it at the Spectrum, the mind boggles.


         Stages of analysis


  ... The author found out which funds will be used in a 
particular case and how to put them in front of him on the 
table. It's time to make strategic decisions. 

  Almost always descriptive material can be divided within the 
meaning of a few categories. As a general rule, stands out the 
following: 

  1) The basic operating information - what, in fact, is the 
essence of the program. Page text for a text editor, sky map 
for Astronomy Program, the board

control and monitor the spacecraft in the game, dialog and
information windows in the system
program, etc.

  2) Various menus.

  3) lines for data entry.
Say, "Enter your age _".

  4) Actual service messages ("Press", "Game
over "," Wait, I think "and
etc.).

  5) Emergency Message:
"Pressed !", "Old data will be erased!" - All
after which it was possible to put an exclamation point.

  6) The system of care (see the instructions
for the user).

  7) Working information about a minor. For example,
data on the level of the player, the number of unexpended bombs
current time, etc. What
not necessarily have before my eyes constantly during the 
"session". 

  Each of the major categories
can be divided into subgroups,
Those in turn - too. Than
better we all will think, so
it will be easier to make decisions
afterwards. Already at this stage
emerges is a hierarchy.


  It's time to move itself to
clearance. It is convenient to introduce
the notion of a "window" - the so-called
part of the screen on which the information one way or another
semantic groups: a window for the messages for a menu, etc.

  Let's start with the main window, on the
which is the main operating information. Most of the
Time is a window in front of his eyes
user, but it does not necessarily appear first after
run the program. But the style will dictate precisely this 
window - sort of Key to the design

others. Let us determine its format.
You must first decide whether
it is equal to the intrinsic
screen (256 x 192 pixels) or
You can do a smaller portion. It depends on many factors. Say, 
complex images would require a maximum of space, the editor of 
texts - too. On the other hand, the pictorial plane should be 
used as soon as economically and efficiently. If the main 
window not equal to the largest screen in the

free space can
locate other information windows that are not necessarily but 
it is also convenient to have constantly before his eyes - for 
example, service messages (see p.5)

or background information -
clock, copyright, etc. (see p. 7).
Otherwise, have
or to create overlapping
windows (a serious step that requires
a lot of resources) or tedious
"Flipping" screens. In most
on your screen may coexist multiple windows. By their
functional logic of the main
will certainly be the biggest. And it should be located
either in the middle or at the very core pictorial surface - 
closer to the upper left edge. The size will be dictated by the 
volume of the space on it information, and the proportions - 
business taste and common sense.


   Look at the screen is referred to the program Pete Cook's 
"Astronomer". 

   You drive by an arrow on the map;
locate the star, press
"Fire" and the main window overlaps with a small window
information about the star. Dialog boxes relating to the menu
superimposed on the menu.
Due to such an efficient organization picture, with the program 
for some half an hour can get used to the user, not even

English speaking.


  You have to decide whether a
You still independent screens
(For other kinds of information)
or the corresponding window will be
opens and closes on
background of constantly active main window.

  Emergency messages require interruption and maximum 
attention. They appear without invitation as a pimple on his 
nose. The text is laconic and self window

small but bright. Spectacular
only when the window with this message is superimposed on the 
main image. As an example, look at the scheme of one of Screens 
popular program Nikolai Rodionov "Disk Control Utility ".



        Dynamic windows


  Overlapping windows - a well-known technique. At IBM, this is
standard. There is no point in detail
talk about it; reader
referring to modern IBMovskim program finds in them
much in common in terms of
clearance. Say, a typical
stroke: the top row is given
under the menu, the user moving the cursor, select the desired 
option, click on <ENTER> and out of She throws out a 
subordinate menu. Option "File" (different I / O), usually from 
the left and "Help" (help) - with the right edge of the line. 
You can not even turn to IBM, look at the Spectrum "The

Artist "and" Art Studio "- almost
the same thing. The standards are
its meaning: the development of programs with the usual system 
of dialogue the user goes far

less time than something
original, but unusual -
as it is beautiful it may look.

  Programming for IBM enjoys ready libraries
long debugged, tested -
Suffice it to state: where and
under any sauce, serve, and to
technical details do not need to condescend. In one evening you 
can try a dozen options. Spectrum tool is also not deprived of 
funds for the organization of multi-window

interface: in Beta and Mega-BASIC, ProDos'e have all the 
necessary team. In some ways they are superior to even the 
standard libraries old versions of Turbo Pascal and

BASIC Microsoft. The trouble is,
that is not enough memory and speed. Gourmet eats up all the 
screen resources. Therefore, the only

suitable tool for creating
multi-window interface - Assembler.

  Despite the fact that published a lot of individual utility
machine-code procedures to combine them into one flexible and 
versatile system capable of Only a very experienced programmer. 
Agree, "The Artist" and "Art Studio" - a kind masterpieces. 
Probably, if at entered the market a software package

type "Supercode", supports
multi-output and at the same
time is not so lavish with
in terms of memory resources,
referred to as a Beta-Basic and ProDos, he would have enjoyed 
considerable demand. In the meantime, one is forced to deal 
with the problem alone. 


  Traditional reception overlay
windows is called "Waterfalls."
The first thing (or most important)
window located in the left
top right corner, the rest successively imposed on him and
each other in a direction from left to right and top to bottom, 
with this remains visible headers

all. With regard to the direction
then it is - from left to right
and top to bottom - the most familiar to Europeans, because he 
is so reads and writes. Movement on the left

the right is perceived as moving forward. Of course, as the 
overlay window - still a matter of taste, so that the choice

is yours. It is important to remember
one thing: no matter what course you're not elected, it must 
adhere to the Throughout the program, preserving the unity of 
style. 

  Here is the file wrapper Rodionova. In the overlapping 
windows displayed directory of the drive. Thus possible to 
avoid vertical scrolling the screen.


  If you look, there is no complete unity of meaning and image. 
Pages directory attached to the top line, as if "flipping 
forward," and "previous" - this menu option, and windows 
directory - submenu. On Actually it is not. Catalog

is the main working window,
rather than menu, while paging
back and forth - more surgery
and most of the operations the author
located in the right drop-down box.

  Another program Rodionova -
Disk Control Utility - also features pull-down windows.
Here the design laid out better.

  Location and size of windows
not quite familiar: the second massive first, and to 
subordinate the menu, it would seem natural to a smaller size. 
However, "Shadow" creates the illusion of volume, and

we take the next window
as if it is closer
to us, and not to the right edge of the screen. All the windows 
are tied to the axis through the center of the screen.

Their functional difference emphasizes color.


  IS-DOS, like any operating system that is
rather complicated structure,
which would be much harder
learn if the pull-down
one on top of other windows do not help us navigate this
maze. Since the emergence of new old menu did not disappear, we 
can easily trace the "route" by which moved. This is similar to 
the desktop: one paper placed on top of others. 

   Please note: all three
rectangular windows are
as if through them
an invisible thread, tied to
upper-left corner of the screen. This
important point, especially for complex images - it is always
should be based on a certain rhythm, not necessarily primitive.

  ... Undoubtedly, the dynamic window impressive. But if you 
have no particular desire to tinker with them - and not 
necessary. Cases where the dynamic window the really need to be 
rare. First only if both

have to work with two independent lists of data or
perform multiple
problems and monitor results. That is, in our terminology, when 
the main window is divided into two or more independent areas. 
On the other hand, good design - it is not adherence to 
standards, IBM, and especially meaningful organization of fine 
material. Users can overwhelm a dozen bouncing rectangles with 
text, shadows and framework and thus not a jot

facilitate his life.


     Additional funds


  Let us return to the main problem -
organization of the screen. For clarity, the window in 
different ways separated from each other.


  The isolation of the window is often emphasized by single or 
double frame. Window frame isolated from the rest of the screen 
material and group the text inside. They can be regarded as 
fashion, in general, has already passed. Referring to the 
classical programs for IBM, say, to the utility Norton - is 
easy to see that in earlier versions of either One window is 
not complete without clearly drawn frames in the latest 
versions of the same if they are present, then look more 
modestly, in the style of Microsoft Windows. And there frame, 
as well as other window elements, performs quite specific 
functions. Say, for it can pull the cursor and a window will 
change its size. Therefore, in the "Windows" frame narrow, 
dense, as would appear forward, as if the edge of the tray, and

his whole manner said: "Mouse, tripped over me !"...

   Nobody forces us to do beyond the square. Can
do two skips, top and bottom. If the frame is thick,
and the font easy, it will divert all attention to himself.

  A similar effect can be achieved in many other ways. Instead 
allocate window frames, try different type text: with a changed 
line spacing, on the other mezhbukvennoy discharge, in a 
different font, underlined. Change the color of "paper" or 
characters within the window. Draw the top or bottom row of 
symbols pseudographics ... Matter of taste. Just not all at 
once. Immigration bright in color, with shadow, frame, and even 
bold-type - is too ...



      Unity of style and rhythm


  If you choose a certain kind of information (the window) to 
allocate a certain way - for example, fonts and colors - that of

that you set the rules should not be compromised throughout the 
program. Otherwise it will babel. 

  Developing a designer's own visual techniques
or take the ready-made standard, it
apply a coherent system of signs, a kind of language. There are
more complex concept - a rhythm.
Rhythm is felt when no one
detail is not accidental.
For all its diversity
graphic elements - lines,
text, borders, spacing, and dies
etc., as they say, support
each other. "Support" can be different: the color, style,
location on the plane ... In
by the man himself does not notice how his attention control. 
Let's head about it thinks, the eye is already registered 
relationship under a single structure.



          Features

  pictorial surface


  When it came to the font, we
have already drawn your attention to the
that the pictorial surface is not "dead" and even different 
parts of the blank sheet of paper of different active (think of 
the exercise with the left and right diagonal ladder). Here

several properties of pictorial plane.

  1) The geometric square eyes
takes a shorter, squat, so portraying the square on the screen, 
increase chutchut its vertical sides. 

  2) The exact partitioning of the square of the plane into two 
halves by a horizontal bottom is seem harder and less.


  3) The thick horizontal line appears thicker than the 
vertical line is the same thickness. 

  4) geometrically correct
our perception of the little circle
flattens.

  5) The circle in the upper part of the plane is easier than 
the same circle at the bottom. 

  6) triangle, which stands as
pyramid looks stable, and
in an inverted form of the same form
seems shaky.

  7) open squares on a dark
background as it pushes its boundaries, and therefore looks 
bigger the same size of the black square on a white background.


  8) Square, consisting of contours, visually expanding
and horizontal lines visually
increase its height.

  9) The square box is bounded by horizontal lines appear 
wider, and the limited vertical lines - above. 

  Think of what has been said here
as a cheat sheet - it will come in handy
when you decide to do
whether the frame spacing, where and how
have windows at all, it
to a hundred and one case.
Exercises with simple geometric shapes to help you
feel better hidden opportunities plane.


           *