Tuesday, 19 March 2013

DESIGN PRINCIPLES RESEARCH

1. What are Points, Pixels and Picas?

A pixel is a picture element, and is the same thing as a dot, a printer's smallest measure, i.e. ppi or dpi.

(A pixel, point or dot, are all the same thing)

Pixels were created and are ideal for website designs, and digital imagery. It has no relevancy to print. It is a unit of resolution, rather than a uni of measurement. 


These are the standard resolutions for digital imagery:


71 dpi (Mac)

96 ppi (Windows)

An image that is 144x144 pixels displays as 2 inches square, though inches are irrelevant on screen or on the web.



In printers’ measures, there are 12 points to a pica and 6 picas in an inch. So, 12 x 6 = 72; there are 72 points in an inch. And since points and pixels are the same thing, there are 72 pixels in an inch, too.

So, if you want something on screen to be 4 inches wide: 4 x 72 = 288. An element you want to have take up 4 inches horizontally on the screen should be made 288 pixels wide.

Why 72 dpi? Because again, to maintain the basic units of scale between print and monitor, a point is a pixel is a dot, and there are 72 points to an inch — which means there are 72 dots to an inch. If we want something that measures one inch wide to be one inch wide on the screen, we need to set its resolution to 72 dpi.

Here are some examples of the effect of different resolutions on the same image. First, a 250-pixel square at 72 dpi.



Let’s look at the same image at 150 dpi. It should appear on screen slightly more than twice the size of the square above.




And here’s the same square at 35 dpi. This time, it’s going to appear to be about half the size of the first square.

The more dots per inch, or pixels per inch, the high the resolution, due to the higher quality image. Because the number of dots / points in an inch is the true measure of resolution, the more dots I can fit in an inch, the sharper the picture will be in print.

Pixels and Computer Graphics:

16 Pixels = 1 Pica
1 Pixel = 0.75 Points

So a 12 point font is equvilent to 16 pixels. 

1 Pixel = 0.010416667 inches = 96 Pixels = 1 inch

Picas:

The standard unit of measurement used in Graphic Design, desktop publishing and in other design and print industries. 

1/6th of an inch = 0.166

Dimensions of less than full pica increments are measured in points, which should be familiar to anyone types on a computer - linking to the sizes of type.

12 Points = 1 Pica
1 Point = 0.013837 inches
72 Points (6 Picas) = 0.996264 inches (1 Inch)

Hence 72dpi

The actual difference between 72 points or 6 picas to 1 inch is actually 1/268.

Each interior layout consists of sharp margins between photos and blocks of text all at 1 Pica.

"pica is a typographic unit of measure corresponding to 1/72 of its respective foot, and therefore to 1/6 of an inch. The pica contains 12 point units of measure.

The pica originated around 1785, when François-Ambrose "L'éclat" Didot (1730–1804) refined the typographic measures system created by Pierre Simon Fournier le Jeune (1712–1768). He replaced the traditional measures of cicéro, Petit-Roman, and Gros-Text with “ten-point”, “twelve-point”, etc.
To date, in printing these three pica measures are used:
  • The French pica of 12 Didot points (also called cicéro) generally is: 12 × 0.376 = 4.512mm (0.177in).
  • The American pica measure of 0.013837 ft. (1/72.27 ft.). Thus, a pica is 0.166044in. (4.2175mm)
  • The contemporary computer pica is 1/72 of the Anglo-Saxon compromise foot of 1959, i.e. 4.233mm or 0.166in. Notably, Adobe PostScript promoted the pica unit of measure that is the standard in contemporary printing, as in home computers and printers.
Note that these definitions are different from a typewriter's pica setting, which denotes a type size of ten characters per horizontal inch.
Usually, pica measurements are represented with an upper-case "P" with an upper-right-to-lower-left virgule (slash) starting in the upper right portion of the "P" and ending at the lower left of the upright portion of the "P"; essentially drawing a virgule ( / ) through a "P". (P̸)Likewise, points are represented with number of points before a lower-case "p", for example, 5p represents “5 points”, and 6P̸2p represents “6 picas and 2 points”, and 1P̸1 represents “13 points”, which is converted to a mixed fraction of 1 pica and 1 point.
Publishing applications such as Adobe InDesign and QuarkXPress represent pica measurements with whole-number picas left of a lower-case "p", followed by the points-number, for example: 5p6, represents 5 picas and 6 points, or 5½ picas.
Cascading Style Sheets defined by the World Wide Web Consortium use "pc" as the abbreviation for pica (1/6 of an inch), and "pt" for point (1/72 of an inch)."

2. What are Grids, Columns and Gutters?
  1. Columns: Vertical divisions of space on a page.
  2. Rows: A series of flowlines that create horizontal divisions of space on a page.
  3. Gutters: Space that separates rows and columns or two facing pages.
Grids are usually the 1st step a designer takes when designing a layout, they are invisible when finished/printed, and can be moved around and deleted as pleased. They are made up of vertical lines (columns) and horizontal lines (rows), and constructed through the use of rulers, giving order to Graphic Design, and simplifying the designers job.

There are various types of grids which can be used.



Perhaps the simplest method is to use the rule of thirds. This involves dividing a page into thirds with two equally spaced vertical and/or horizontal lines so that important compositional elements can be placed along these lines or intersections. This method is also commonly used in photography. Another popular method uses the golden ratio (approximately 1.618)  for proportioning. This ratio has been studied by mathematicians for its presence throughout the universe and has been used for centuries by architects, artists and book designers for it’s aesthetically pleasing qualities. 


Most newspapers and magazines use equally sized columns with a baseline grid underneath which all typography and body copy sits on, so it is aligned accurately.


There is no right or wrong grid system I don't think, as long as it maintains function and purpose, as well as being an aesthetically pleasing, legible and readable piece of design.



Depending on the content that they will contain, grids vary in size, shape and complexity. However, every grid is made up of the following parts:
anatomy-of-grids
  1. Margins: The space that separates the content from the edge of the page.
  2. Flowlines: Alignments that break the space into horizontal bands.
  3. Columns: Vertical divisions of space on a page.
  4. Rows: A series of flowlines that create horizontal divisions of space on a page.
  5. Gutters: Space that separates rows and columns or two facing pages.
  6. Modules: Individual units of space created from intersecting rows and columns.
  7. Spatial Zones: Groups of modules that cross multiple rows and columns.
Many designers have come up with grid systems to simply their workload and make their job easier. Below is an example of one of these grid systems: The Golden Grid System for Responsive Design.





The conventional use of grids can be broken, which I personally think can create an edgier, more creative layout design depending on the content and context of the work being created. However when breaking these 'rules' important consideration is needed.

3. What is a DPS and what does it do?

A DPS, is also known as a Double Page Spread. It revolves around aesthetics of a layout or publication, as well as functionality, and costs. 

However, it allows for larger images, and more body copy, whilst also encouraging the viewer to maintain interest.


I personally really like double page spreads, I feel that they work with editorial publications especially really well, and with newspapers. They are so commonly used, it is unlikely to see a publication with single leaves. However, like with the grid system, if broken creative ambitions can be shown, leading to unique designs and style, as long as it is relative to content, context and format.

4. What is a Golden Section?

Phi, 1.618 (also known as the Golden Ratio, Golden Mean, Golden Section or Divine Proportion, in mathematicsgeometrylife and the universe and shows you how to apply it, and its applications are limitless:

The Golden Section is a ratio based on a the number Phi, 1.618…

The Golden Section or Ratio is is a ratio or proportion defined by the number Phi (= 1.618033988749895… )
It can be derived with a number of geometric constructions, each of which divides a line segment at the unique point where:
the ratio of the whole line (A) to the large segment (B)
is the same as
the ratio of the large segment (B) to the small segment (C).
Sectioning a line to form the Golden Section, based on phi, the golden ratio
In other words, A is to B as B is to C.
This occurs only where A is 1.618 … times B and B is 1.618 … times C.
It was used in the design of Notre Dame in Paris, and continues today in many examples of art, architecture and design.
Phi, the golden ratio is found in design of Notre Dame cathedral in Paris
golden rectangle with longer side a and shorter side b, when placed adjacent to a square with sides of length a, will produce asimilar golden rectangle with longer side a + b and shorter side a. This illustrates the relationship  \frac{a+b}{a} = \frac{a}{b} \equiv \varphi.



The drawing of a man's body in a pentagram suggests relationships to the golden ratio.

The 16th-century philosopher Heinrich Agrippa drew a man over a pentagram inside a circle, implying a relationship to the golden ratio.
Leonardo da Vinci's illustrations of polyhedra in De divina proportione (On the Divine Proportion) and his views that some bodily proportions exhibit the golden ratio have led some scholars to speculate that he incorporated the golden ratio in his paintings. 


There was a time when deviations from the truly beautiful page proportions 2:3, 1:√3, and the Golden Section were rare. Many books produced between 1550 and 1770 show these proportions exactly, to within half a millimeter.

If φ were rational, then it would be the ratio of sides of a rectangle with integer sides. But it is also a ratio of sides, which are also integers, of the smaller rectangle obtained by deleting a square. The sequence of decreasing integer side lengths formed by deleting squares cannot be continued indefinitely, so φ cannot be rational.


I think the evidence and examples shown above, prove that the golden section is a fool proof way of constructing page proportions. Using divine proportions have been proven to work and will always consist doing so.

5. What are rulers, boxes, folio numbers, and drop caps?

Rulers: Either a physical ruler, or digitally on design software to set guides for grids and layout of design elements.
Boxes: Square box format, which are used for text, image or vectors.
Folio Numbers: Usually on the front side of the leaf/page number.
Drop Caps: The first letter of a paragraph that is enlarged to "drop" down two or more lines, as in the next paragraph. Drop caps are often seen at the beginning of novels, where the top of the first letter of the first word lines up with the top of the first sentence and drops down to the four or fifth sentence to the beginning of a section.



6. What are sub-heads, paragraphs, captions and ligatures?

Sub-heads: Sub-heads are a group of words, which are usually placed under the header, to give the reader more information about the article. 
Paragraphs: Paragraphs are a body of text containing information on the topic being discussed.
Captions: a caption is usually placed under an image for example, to give information to the reader.
Ligatures: A ligature is 2 or more letters combined to make a connection between the two.


1 comment:

  1. Digital Image Converter, fast and reliable app to convert units like: twip, centimeter (cm), millimeter (mm), character (X), character (Y), pixel, inch (in), pica (computer), pica (printer's), PostScript, point (computer) , point (printer's ), in.

    https://play.google.com/store/apps/details?id=com.anazco.juan.digitalimageconverterunits&hl=en

    ReplyDelete