Notes taken from Graphic Design: A New History by Stephen J. Eskilson

Introduction: The Origins of Type and Typography

Around 1455, Gutenburg published his famous Bible, which was set in a typeset of gothic script called Textura, a name that refers to the dense web of spiky letterforms that fill the completed page, giving it a “textured” look. Textura was an example of blackletter type, meaning that the letters strongly resembled the calligraphic writing of medieval scribes. (p.15)

One of the finest early books printed in Venice using roman type was Eusebius’s treatise De Praeparatione Evangelica, published by a French expatriate, Nicolas Jenson (1420–1480). He proved to have an excellent eye for forms that are both highly legible and beautiful.(p.17)

Around 1500, Aldus Manutius (1449–1515), a Venetian humanist and printer, published the first work in roman italic type. (p.17)

Manutius also produced a number of roman forms, and the one he used in his 1495 volume of De Aetna, by Pietro Bembo, proved highly influential. Along with Jenson-Eusebius, Bembo is the basis for the group of roman type called Old Style, which together are distinguished by their understated contrast, bracketed serifs, and oblique stress. Old Style, followed by Transitional, and then Modern. (p.17)

Another important contribution to Renaissance typography was made by the French printer and publisher Claude Garamond (1480–1561). One of Garamond’s key contributions was an adaptation of Manutius’s Bembo that is perhaps more refined than the original. (p.17)

Philippe Grandjean de Fouchy (1666–1714) was appointed to cut the new type called Romain du Roi, “roman of the king.” The invention of the Romain du Roi probably represents the first time that a horizontal and vertical grid became the basic tool for structuring a typeface. (p.19)

What made the original Caslon so popular was not any dynamic, stylish flair, but rather its solid functionality.(p.20)

The Transitional types created by John Baskerville (1706–1775) were almost universally condemned for what was perceived as their stark, abstract qualities and extreme contrast in stroke widths. A desire to print his typeface accurately had led Baskerville to a number of innovations in the printing process. First, he had invented new inks in order to make the slender, delicate shapes of his letters stand out on the page. He experimented with different paper types, finally settling on wove paper that had a smooth, glossy finish. Baskerville also used a technique called “hot pressing,” whereby he would heat newly printed pages between copper plates, a process that smoothed the sheet while also setting the ink more effectively.(p.21)

Around 1783, Firmin Didot refined his family’s roman face to help create the new Modern style. Didot would soon become the most influential Modern face, because it set the standard for contrast, stress, and geometric structure. (p.21–p.23)

In Italy, Giambattista Bodoni (1740–1813) of Parma introduced the Modern style in the late 18th century. Influenced by the work of the Didot foundry, Bodoni created a beautiful roman that further defined the Modern style. (p.23)

Chapter 1: The 19th Century

Industrial Revolution: The invention of the steam engine and the rise of inexpensive, mass-produced printed materials contributed to life in the new urban setting.

Honoré Daumier (1808–1879), one of the most celebrated, or notorious—depending on one’s perspective—caricaturists employed by Philipon, created literally thousands of lithographs for the three newspaper [La Silhouette, La Caricature, and Le Charivari]. (p.28)

The German inventors Friedrich Koenig (1774–1833) and Andreas Bauer (1783–1860) sold their new power press to The Times newspaper of London in 1814. It could produce over one thousand pages per hour. (p.29)

Lithography had been invented late in the eighteenth century by Alois Sanefelder (1771–1834), a German playwright who had sought an inexpensive way of reproducing theatrical scripts. The chemical process he devised allowed for an image to be drawn directly onto a block of limestone and then reproduced in large quantities at low cost. (p.29) [oil and water do not mix. Break boundary of locked metal type printing press]

Chromolithography: the invention of process color printing made the accurate photographic transfer of color images more feasible, if not yet commonplace, by the turn of the [19th] century.(p.29)

The pictorial newspaper was one of the most influential types of nineteenth-century publication. (p.30)

Photography was an important technological development during the nineteenth century that would later prove crucial to the evolution of graphic design. The ability to make “drawing with light,” which is the literal meaning of the word “photography,” was discovered simultaneously in the 1830s by a Frenchman, Louis Jacques Mandé Daguerre (1787–1851), and an Englishman, William Henry Fox Talbot (1800–1877). (p.30)

Yellow-back novels became one of the most exciting new products to appear in Victorian England around mid century. [Yellow-back features eye-catchy typography]. (p.38)

The Great West (1879), is a fine example of (black and white lithography and then hand colored), its bright color and epic vista matched with an uncertain grasp of perspective space. (p.38-39)

Hoardings: Where posters could be be legally hung by their distributors. (p.40)

One significant contrast with the European market was the American use of bright, expressive color in advertisements (p.41)

The nineteenth century also witnessed the advent of the color political poster (p.41)

The Victorian age indeed witnessed many examples of the mixing of a multitude of confusing styles in the design of periodicals. (p.45)

One class of type invented in the nineteenth century that has remained influential through to the present day is the sans serif. The first commercial sans serif was released in 1816 by William Caslon IV (1780–1869). (p.46)

Linotype (1886) and Monotype (1887). Monotype helped women got into the workplace.

The first advertising agency, N.W. Ayer & Sons, was established in Philadelphia in 1869. (p.50)

William Morris (1834–1896) embraced the arts and crafts movement. Morris indicated his belief that the design of arts has an important role to play in improving the lives of everyday working people. (p.50)

Chapter 2: Art Noveau: a New Style for a New Culture

After establishing his firm in 1866 through which to pursue lithographic printing, Jules Chéret (1836–1932) worked out a process that would allowed him to create brightly colorful posters with a wide range of hue, value, and intensity. (pg.59)

Chéret’s Les Girard (1879; pg.60) has Japanese influence with text and image integrated.

Ukiyo-e, or “floating world,” caught the attention of the French art world. (p.62)

Leonetto Cappiello’s mature style mixed his own gift for caricature, Japonisme and a dash of Chéret’s kinetic colorism into a striking new synthesis. For example, his 1906 lithograph of Maurin Quina features a dynamically moving green devil, which serves as a complement to, or even sardonic commentary on, the ubiquitous, luscious young women posing as allegorical fairies that dominated the market for aperitif posters. (p.63)

Alphonese Mucha (1860–1939), moved to Paris from Czechoslovakia, built his career in posters because of a bit of luck that tied him to the actress Sarah Bernhardt (“The Devine Sarah”) (p.63-64).

An advertisement for an alcoholic drink, the poster Absinthe Robette (1896), by the Belgian artist Privat Livemont (1861–2936), displays the expressive organic form, curvilinear rhythm, and sensual atmosphere that are synonymous with Art Nouveau. (p.65)

The posters of Théophile Steinlen (1859–1923) contrast sharply with the dense, decorative elegance of Livemont or Mucha. Instead, Steinlen’s posters, such as Cabaret du Chat Noir (1896), feature the bold simplicity of the Japanese print. (p.67)

Steinlen’s La Rue (1896) provides an excellent example of how some artists and critics hoped that the art of the poster would enliven the often grim streets of urban Paris.(p.67)

Auriol (1901), the typeface by George Auriol (1863—1939), combines elements derived from Asian calligraphic scripts, such as the gestural flourishes and the variable thickness of each line, with the languid elegance of the Art Nouveau. (p.68)

Each night at the Moulin Rouge, a frisson of sexual excitement was provided by the entertaining spectacles as well as the members of demimonde, young women who supported themselves by becoming the lovers of wealthy men. Henri de Toulouse-Lautrec (1864–1901) captured this atmosphere in posters such as La Goulue. (p.68)

Toulouse-Lautrec’s posters for the singer Aristade Bruant who delighted with his rough, outlaw reputation portray his aggressive personality and stage-dominating charisma. (p.70)

A key moment in the history of American graphic design came in 1889, when the widely read periodical Harper’s Magazine first published a poster for its holiday issued designed by the Swiss-born French artist Eugène Grasset (1841–1917). He created works that used the dense ornament emblematic of the Art Nouveau style, as seen in the example for Harper’s from 1892 (p.71)

Edward Penfield (1866–1925) created a poster for Harper’s in 1897 shows how far American design had come in embracing the most fashionable European trends. Penfield depicts a group of well-dressed Americans on intercity bus engrossed in a copy of Harper’s edition. (p.71)

Will H. Bradley’s Thanksgiving poster advertising a literary magazine called The Chap Book (1895) displays flat planes of colors and the repetition of curvilinear form that integrates Japanese style with the expressive line of Art Nouveau. (p.74)

Aubrey Beardsley’s (1857–1926) cover for the first issue of The Studio displays how much he had been influenced by the styles of Japanese prints. The scene of a forest is essentially two-dimensional, a series of overlapping flat forms set apart by different types of cross-hatched strokes of the pen. (p.77)

The Beggarstaff brothers’s 1895 poster for Harper’s displays some of the most aggressive simplification of any work produced in this area. Clearly indebted to Japanese prints, the silhouetted figure is more radically abstract than comparable images of the time; its contour line disappears in several places so that the figure blends into the background. (p.80)

Another Beggarstaff design, offered for a performance of Don Quixote at the Lyceum Theatre (1895), shows the unusual cropping—note the horse’s missing hoofs and the partial view of a windmill—typical of the Japanese style. (p.81)

Four artists—Margaret Macdonald (1864–1933), Frances Macdonald (1873—1921), Herbert MacNair (1868—1955), and Charles Rennie Mackintosh (1868–1925)—together they formed the larger part of the Art Nouveau moment in Scotland. (p.82)

At GSA (Glasgow School of Art), a group of progressive students published The Magazine. Frances Macdonald created A Pond. The image combines sinuous, organically shaped figures and water plants with a symmetrical organization.

The first poster by the Macdonald sisters in collaboration with Herbert MacNair displays many of the stylistic devices seen in A Pond, albeit in a more staunchly vertical format. (p.83)

Gustav Klimt, president of Vienna Succession, produced a poster for the show that set the tone for much of the art that would follow. In term of style, Klimt adopted the vertical format, asymmetrical design, and empty spaces that had been a key part of Audrey Beardsley’s designs in England.

A striking example of innovative design produced for Ver Sacrum is Koloman Moser’s cover for February 1899, volume 2, issue 4, for which he threw an allegorical female figure emerging from lush tendrils that create powerful abstract forms. (p.88)

Another poster that bridges the curvilinear style of the early Secession with the post-1900 concern with geometry was made by Alfred Roller in 1903 for the sixteenth Secession exhibition. At the top of the lithograph, the three “S”s in the word “Secession” display short, blunt curves that descend into long sinuous spines, elongated and stylized like the traditional allegorical figure. (p.89)

In 1900, Otto Eckmann collaborated with the foundry owner Karl Klingspore to create Eckmann, an elegant typeface whose styling borrows elements from both the blackletter and Art Nouveau traditions. (p97)

In 1898, Henry van de Velde produced an advertisement for the Tropon food company. Here, the familiar plant forms of Art Nouveau actually represent the cracked shells of eggs, the key ingredient in Tropon’s signature product, powered egg whites. While the eggs are still recognizable, the poster comes daringly close to pure graphic abstraction. (p.100)

During his time in Weimar, van de Velde produced one of his most esteemed graphic works, an edition of Also Sprach Zarathustra (1909) by the Germna philosopher Friedrich Nietzsche (1844–1900). The dense patterns on the cover surely must have been influenced by William Morris’s designs for the Kelmscott Press. (p.102)

In 1910, Peter Behrens designed a poster advertising AEG’s newest product, a technologically advanced lamp. the orthogonal design is overlaid with an equilateral triangle that contains the lamp and an abstract pattern representing its brilliant output. (p.104)

Behrens-Schrift, his first typeface, is a composite of blackletter script modified by roman type’s greater clarity. It features calligraphic strokes that have been rationalized in order to create better legibility and readability.

Some verbatim notes taken from Meggs’ History of Graphic Design.

1. The invention of writing

The invention of writing brought people the luster of civilization and made it possible to preserve hard-won knowledge, experiences, and thoughts. (p.6)

Writing might have evolved because [Mesopotamia] temple economy had an increasing need for record keeping. The temple chief consciously sought a system for recording information. (p.9)

Cuneiform was a difficult writing system to master, even after the Assyrians simplified it into only 560 signs. Youngsters selected to be come scribes began their schooling at the edubba, the writing school or “tablet house,” before the age of ten and worked from sunrise to sunset everyday, with only six days off per month. (p.11)

Writing enabled society to stabilize itself under the rule of law. (p.11)

2. Alphabets

Greek civilization laid the foundation for many of the accomplishments of the Western world—science, philosophy, and democratic government al developed in this ancient land. (p.25)

Initially the Greeks adopted the Phoenician style of writing from right to left. Later they developed a writing method called boustrophedon, from words meaning “to plow a field with an ox,” for every other line reads in the opposite direction. (p.27)

Alphabets remain one of humankind’s grandest achievements. Alphabetic writing became the mortar binding whole communities against limitations imposed by memory, time, and place. Great access to information permitted broader participation in public affairs. (p.33)

3. The Invention of Paper

Dynastic records attribute the invention of paper to the eunuch and hig governmental official Ts’ai Lun, who reported his invention to Emperor Ho in 105 CE. (p.37)

Printing, a major breakthrough in human history, was invented by the Chinese. (p.39)

5. Printing Comes to Europe

The judgement of history, however, is that Johann Gensfleisch zum Gutenberg (late 14th century to 14 68) of Mainz, Germany, first brought together the complex systems and subsystems necessary to print a typographic book around the year 1450. (p.72)

7. Renaissance Graphic Design

The word renaissance means “revival” or “rebirth.” Originally this term was used to denote the period that began in the fourteenth and fifteenth centuries in Italy, when the classical literature of ancient Greece and Rome was revived and read anew. (p.98)

Part of the lasting influence of Jenson’s fonts is their extreme legibility, but it was his ability to design spaces between the letters and within each form to create an even tone throughout the page that placed the mark of genius on his work. (p.98)

A most important member of the Aldine staff was Francesco de Bologna, surnamed Griffo (1450-1518). Manutius called this brilliant typeface designer and punch cutter to Venice, where he cut roman, Greek, Hebrew, and the first italic types for Aldine editions. His initial project in Venice was a roman face for De Aetna by Pietro Bembo, in 1495. Griffo researched pre-Caroline scripts to produce a roman type that was more authentic than Jenson’s designs. This style survives today as the book text face Bembo. (p.102)

8. An Epoch of Typographic Genius

This Romain du Roi, as the new typeface was called, had increased contrast between thick and thin strokes, sharp horizontal serifs, and an even balance to each letterform. (p.122)

Followed by further editions, the 1702 Médailles folio was the first book to feature the new types. As the first important shift from the Venetian tradition of “old style” roman type design, the Romain de Roi initiated a category of types called transitional roman. These breaks with the traditional calligraphic qualities, bracketed serifs, and relatively even stroke weights of Old Style fonts. (p.122)

Caslon’s type designs were not particularly fashionable or innovative. They owed their tremendous popularity and appeal to an outstanding legibility and sturdy texture that made them “comfortable” and “friendly to the eye.” (p.127)

Baskerville’s type designs, which bear his name to this day, represent the zenith of the transitional style bridging the gap between Old Style and modern type design. His letters possessed a new elegance and lightness. In comparison with earlier designs, his types are wider, the weight contrast between thick and thin strokes in increased, and the placement of the thickest part of the letter is different. The treatment of serifs is new: they flow smoothly out of the major strokes and terminate as refined points. His italic fonts most clearly show the influence of master handwriting. (p.128)

Around 1790 Bodoni redesigned the roman letterforms to give them more mathematical, geometric, and mechanical appearance. He reinvented the serifs by making them hairlines that formed sharp right angles with the upright strokes, eliminating the tapered flow of the serif into the upright stroke in Old Style roman. The thin strokes of his letterforms were trimmed to the same weight as the hairline serifs, creating a brilliant sharpness and a dazzling contrast not seen before. Bodoni defined his design ideal as cleanness, good taste, charm, and regular. (p.133)

The Didot type foundry’s constant experimentation led to maigre (thin) and gras (fat) type styles similar to the condensed and expanded fonts of our time. Fonts issued from 1775 by François-Ambroise Didot possessed a lighter, more geometric quality, similar in the feeling to Bodoni’s designs evolving under Baskerville’s influence. (p.134)

Bodoni and Didots were rivals and kindred spirits. Comparisons and speculation about who innovated and who followed are inevitable. They share influences and the same cultural milieu. Their influence upon each other was reciprocal, for Bodoni and the Didots each attempted to push the modern style further than the other. In so doing, each further the aesthetics of contrasts, mathematical construction, and neoclassical refinement to the highest possible level. Bodoni is credited with greater skill as a designer and printer, but the Didots possessed greater scholarship. (p.135)

9. Graphic Design and the Industrial Revolution

Other founders designed and cast fatter letters, and type gre steadily bolder. This led to the invention of fat faces, a major category of type design innovated by Cotterell’s pupil and successor, Robert Thorne (d. 1820), and possibly around 1803. A fat-face typestyle is a roman face whose contrast and weight have been increased by expanding the thickness of the heavy strokes. The strokes width has a ration of 1:2:5 or even 1:2 to the capital height. (p.146-147)

De Vinne was dissatisfied with the thin modern typefaces first used in [Century] magazine, so he commissioned type designer Linn Boyd Benton to cut a blacker, more readable face, slightly extended with thicker thin strokes and short slab serifs. Now called Century, this unusual legible style is still widely used today. Its large x-height and slightly expanded characters have made it very popular for children’s reading matter. (p.172)

Cut in 1923–24, [Lutetia] was the first typeface Van Krimpen designed during his thirty-five-year association with the Haarlem printer Enschedé. For Van Krimpen, typography existed only for book, and all of his typefaces were designed for this purpose. He viewed advertising and the people connected with it with contempt. For him, the reader should never even be conscious of typography; the designer’s one purpose was to make reading as pleasurable as possible and never come between the reader and the text. Fortunately, he usually broke away to some degree from his own rules, and each of his books had something subtly different to offer. (p.189)

During the early 1920s, [William Addison] Dwiggins first use the term graphic design to describe his professional activities. In 1938 he designed Caledonia, one of the most widely used book face in America. (p.192)

[Alber Bruce Rogers’s] 1915 typeface design Centaur is one of the finest of the numerous fonts inspired by Jenson. (p.192)

12. The Genesis of Twentieth-Century Design

The German artist, architect, and designer Peter Behrens (1868–1940) played a major role in charting a course for design in the first decade of the new century. He sought typographic reform, was an early advocate of san-serif typography, and use a grid system to structure a space in his design layouts. (p.242)

The Berthold Foundry designed a family of ten sans serifs that were variations on one original font. This Akzidenz Grotesk (called Standard in the United States) type family had a major influence on twentieth-century typography… The designers of Akzidenz Grotesk achieved a remarkable harmony and clarity, and it became a source of inspiration for other sans-serif typefaces until the post-World War II era. (p.243)

[Edward Johnson on typeface for the Underground.] Johnson sought absolute functional clarity by reducing his characters to the simplest possible forms: the M is a perfect square whose forty-five-degree diagonal strokes meet in the exact center of the letter; the O is a perfect circle; all of the letters have a similar elemental design. The lowercase l has a tail to avoid confusion with the capital I. (p.251)

16. The Bauhaus and the New Typography

Moholy-Nagy contributed an important statement about typography, describing it as “a tool of communication. It must be communication in its most intense form. The emphasis must be absolute clarity…. Legibility—communication must have never be impaired by a priori esthetics. Letters must never be forced into a preconceived framework, for instance a square.” (p.328–329)

19. The New York School

[Paul] Rand understood the value of ordinary, universally understood signs and symbols as tools for translating ideas into visual communications. To engage the audience successfully and communicate memorably, he knew that the designer needed to alter and juxtapose signs and symbols. A reinterpretation of the message was sometimes necessary to make the ordinary into something extraordinary. Sensual visual contrasts marked his work. (p.391)

Notes from last night class in professional design practices. A guest speaker from Marriott gave us advice on presentation skills.

Famous presenters

• Steve Jobs
• Barack Obama
• John F. Kennedy
• Martin Luther King, Jr.

Building greatness

• Preparing you
• The tool
• Preparing your message
• Your style

Preparation

1. Know your audience
2. Know your materials
3. Know yourself

Know your audience

• What do they need to know?
• Why should they care?
• What do you want them to walk away with

Know your material

• Grabbing them in the first few seconds
• Clear and concise
• Compelling

Avoid using buzz words

• Synergy
• Best practices
• Out of the loop
• Value added
• Think outside the box
• Bandwidth
• Make it pop

Know Yourself

• Gestures: Be natural
• Poster: Stand up or sit up straight
• Movement: Move with purpose
• Eye contact and expressions: look people in the eye
• Voice, projection: Make sure your voice carries the message. Speak with confidence
• Diction and pace: Make sure you’re not mumbling

Challenging audience

• keeping it on track
• Topic migration
• Time mismanagement

Phone interview

• Practice with technology: Be ready ahead of time. Check to make sure Skype or whatever software is used for the interview works
• Focus on speaking style
• Timely: Make sure to be on time
• Introductions
• Connection: Make sure your phone has good reception. Use a landline
• Documents in advance
• Visual translation

Other tips to remember

• Be brief. Be bright. Be gone
• Command: Confident not cocky
• It’s fine to pause. Take the pause to gather your thoughts if you get lost

Topics in a hat

Each of us takes out a topic in the hat and present it for one minute. It was a nerve-racking but helpful exercise.

Sass is a powerful CSS pre-processor. I don’t use every feature Sass offers. I only use the ones that speed up my CSS workflow.

// Sass command line
sass --watch /location/style.scss: /location/style.css --style compressed

// comment
/*!This comment will be in the compiled CSS even when compressed.*/

// import
@import “normalize”;

// Variables
$body_text: Helvetica , Arial, sans-serif;

// Variable inside variable
$highlight-color: #000;
$highlight-border: 1px $hightlight-color solid;
.select {border: $highlight-border;}

// Parent reference with &
article a {color: blue;
&:hover {color:red;} }

// Nested group
.container {h1, h2, h3 {margin: 1em;} }

// Extend
.error {color:red;}
.seriousError {@extend .error;
font-weight: bold; }

// Placeholder
%dark {color: #fff; background: #000;}
.button {@extend %dark;}

// Function to covert px to em
@function calc-em($target-px, $context) {
@return ($target-px / $context) * 1em;}
h1 {font-size: calc-em(30px, 16px);

// Operators
.container { width: 100%; }
.main {float: left; width: 600px / 960px * 100%;}

// Map control directive
$map: (twitter: “twitter.png”, facebook: “facebook.png“);
@each $network, $image in $map {.icon-#{$network} {
background: image-url(“icons/#{$image}"); }}

The following verbatim notes are from Building Mobile Experiences by Frank Bentley and Edward Barrett.

Chapter 1: Introduction

The mobile device, more than any other recent invention, is drastically changing the ways in which we interact with each other and with our cities.

[A] mobile experience is everything that happens to a person once they learn about a new application.

The mobile phone is the ideal platform for rich, contextual experiences.

Chapter 2: The User-Centered Design Process Applied to Mobile

Context sensing. Media capture. Social connecting. The mobile experience is defined by these uniques and fluid integrated process.

A powerfully useful mobile device allows a person to take advantage of the necessary and sufficient elements of that physically situated experience: location, time, visual and auditory characteristics, all that is apparent to our sensory apparatus—as well as data of physical states not immediately apprehensible.

[A] powerfully useful application will connect you to other people to share facets of a contextually embedded experience—a real-time, instantaneous connected, or lagged, asynchronous interactions depending on the context.

The mobile user-centered design process builds from real-world observation and experience to ideation, design, build and test.

Design Methods: Good design for mobile services is critical to the ultimate usability of the final solution.

Rapid Prototyping: Quickly creating functional prototypes to test the new experience in the world is a key way that we can quickly identify which are likely to be successful in real-world use.

Chapter 3: Discovering What to Build

General Research: How does one get from a space of interest to a list of potential solutions?

Designing from observations of joy and celebration can create new concepts that are fun to build off of the best of our interactions with the world.

Logging interactions and communication can help researchers to better understand current behavior and use these findings to inspire new solutions that are tied to real users’ lives.

Other research includes: home tour/field visits, task analysis, semi-structured interviews, recruiting users, conducting research, affinity analysis and discount methods.

Chapter 4: Rapid Interactive Prototyping

Because we want to quickly evaluate a new experience, our prototypes tend to be made rapidly to test a specific aspect of a concept with users.

Build the experience, not the technology: Because early prototypes are often focus on answering research questions about how a new system will fit into the lives of our participants, the prototypes that we build are often not engineered in the way that a commercial offerring would be.

Build it sturdy (enough) means avoiding the use of new or untested technology at this stage of research unless it is critical to the research questions that need to be answered.

The most important part of building and testing a rapid prototype of a mobile system is to get out of the lab and into the world.

Chapter 5: Using Specific Mobile Technologies

Understanding technology constraints is a critical step in the mobile design process. Often, designers who come from nontechnical backgrounds do not know the full implications of some of their design choices. When this occurs, the end-user experience frequently suffers.

Chapter 6: Mobile Interaction Design

Modeling: A high-level concept model is often the first step of a new mobile design, long before anything begins to be committed to a screen.

The main objective of the modeling is to help the designer think about the goals of the system in new ways, so completing multiple conceptual models can often help in understanding the full scope of a new concept.

Structure and Flow: User flows demonstrate users’ possible movements through time: how they initiate a process, how they complete it, and what path they take.

Interface Design Principles: The ultimate goal of any interaction design project is to make something that is usable for a wide variety of potential users.

Chapter 7: Usability Evaluation

Mobile usability is more than just the ability to navigate from screen to screen and understand the prompts, icons, and flow of an application.

If a user cannot get the information she needs in the ten or twenty seconds she has while waiting for a bus or a train, your system might not be the first one she turns to. Or if the phone keeps going to sleep while a user is in the middle of another task such as cooking, he might not have a clean hand to wake it back up and find the next step in the recipe.

Chapter 8: Field Testing

Four basic criteria for testing prototypes:

1. Recruit social groups (people who already know each other) when testing social social technologies instead of asking strangers to act as if they know each other.
2. Put the technology in the field: ask people to take it home, to work, and all of the places in between and use it as they would if they were not in a study.
3. Make sure the participant needs to carry only one mobile device.
4. Select data collection techniques that allow us to come as close as possible to “being there.”

Chapter 9: Distributing Mobile Applications: Putting It All Together

Beta Releases: Before an application is released to potential audience of millions of users through an app store, it is usually beneficial to run a trial in some small scale.

A beta release is often intended to identify any final major bugs in the system with the help of a reasonable number of new users or to collect usage data on a late version of a system to help plan for scaling the final solution.

Scalability: Design for scalability needs to be an early part of the system design.

Instrumentation can help to discover features that are the most popular, discover where paths through the application are not optimal for tasks that users are performing most frequently, and identifying areas that can be improved or might need better prompts or labels.

Upgrades: Once an application is launched, it often needs to be maintained and updated. As new releases are made, users often face the choice of upgrading or not. In most cases, old versions need to be supported indefinitely as many users choose not to upgrade.

Chapter 10: Conclusion

Reaching thousands or millions of users and affecting the way they live their lives and interact with the people and places that are most important to them can be the greatest reward for traveling down this convoluted path of building a mobile experience.

The following verbatim notes are from Luke Wroblewski’s Mobile First.

Chapter 1: Why Mobile First?

Designing for mobile first not only prepares you for the explosive growth and new opportunities on the mobile internet, it forces you to focus and enables you to innovate in ways you previously couldn’t.

Native vs. Web

Native mobile applications give you robust access to hardware capabilities that you currently can’t get through mobile web browsers. Core features like access to the address book, SMS, camera, audio inputs, and other built-in sensors are mostly unavailable.

Whether it’s through search, email, social networks, or on web pages, if you have content online, people will find and share links to it. Not having a mobile web solution means anyone that follows those links on a mobile device won’t have a great experience (if they can even access your content at all). Having a native mobile application won’t help.

Access might even be the biggest user benefit for a mobile web experience. Even if you build a native mobile application for one platform, chances are you won’t be able to create one for every platform.

Chapter 2: Embrace Constraints

Designing for mobile first forces you to embrace these constraints to develop an elegant mobile-ap- propriate solution. But the benefits go well beyond mobile.

Chapter 3: Capabilities

When you design and develop for mobile first, you can use exciting new capabilities on the web to create innovative ways of meeting people’s needs. Technical capabilities like location detection, device orientation, and touch are available on many mobile web browsers today.

Chapter 4: Align With Mobile Behaviors

• Lookup/Find (urgent info, local): I need an answer to something now—frequently related to my current location in the world.
• Explore/Play (bored, local): I have some time to kill and just want a few idle time distractions.
• Check In/Status (repeat/micro-tasking): Something important to me keeps changing or updating and I want to stay on top of it.
• Edit/Create (urgent change/micro-tasking): I need to get something done now that can’t wait.

Content Over Navigation

As a general rule, content takes precedence over navigation on mobile. Focusing on content first, navigation second gets people to the information and tasks they want quickly.

Pivot and Explore

A simple anchor link in the site’s header jumps people to navigation options at the bottom of the page. Having this list present at the bottom of content pages allows people to pivot and explore other parts of the site.

Chapter 5: Ready, Set, Actions

As more touch-screen mobile devices get into people’s hands, we need to make sure they can use our websites with their hands. To do so:

• Go big with appropriately sized and positioned touch targets.
• Learn the language of touch by familiarizing yourself with common touch gestures and how they are used to navigate and interact with objects and screens.
• Don’t be afraid to push toward natural user interfaces (NUIs) that make content (not chrome) the focus of people’s actions.
• Transition your on-hover menus to mobile using the most appropriate solution for your site.
• Remember to consider non-touch and hybrid devices when designing your mobile web interactions.

Chapter 6: Input

• Actively encourage input and allow people to contribute and create using their mobile devices.
• Make sure your questions are clearly presented with mobile-optimized labels.
• Get rid of the pain associated with accurate mobile inputs by using input types, attributes, and masks in your designs where possible.

Chapter 7: Layouts

Through the application of fluid layouts, flexible media, CSS3 media queries, and (sometimes) a bit of JavaScript, re- sponsive web design allows you to adapt to devices more sig- nificantly. With responsive web design, you can set a baseline (mobile) experience first, then progressively enhance or adapt your layout as device capabilities change.

Device Experiences

different device experiences may require different user interface design solu- tions. The relative importance of primary tasks can differ between device experiences (because of user posture), as can the layout and interaction design needed to accommodate dif- ferent input modes and average display sizes.

Reduce

Not only will reduction make putting mobile layouts to- gether easier, it will also give people focused ways to get things done.

Conclusion

And last but not least, don’t be afraid to start small. Some of the biggest successes in mobile today came from small experiments and teams of passionate web designers and developers. You don’t need to know everything about mobile—just take what you do know and go.

After all these years of staring at the InDesign icon on my dock, I can now open it up and maneuver my way around the software. Thanks to Rae Ouellette and Ramla Mahmood, art students at George Mason, for the informative whole-day workshops.

Some notes:

Preflights: shows errors
Paragraph styles: Similar to CSS
Text Frame Option: Change texts
Place: import texts and images including Word, TIFF (Photoshop), EPS (Illustrator)
Package: ready for printing
Put open quotation mark outside texts: story > optical margin alignment
Insert page number: type > insert special character > markers > current document number
Hyphenate: uncheck in paragraph window to clear hyphens at the end of the line.
Select objects: control click

FTP

# service vsftpd status
# service vsftpd start
# chkconfig vsftpd on
# chkconfig vsftpd --list

httpd

# ll /var/www/
# ln -s /var/ftp/pub /var/www/html/pub
# cat > /var/ftp/pub/index.html

Summary: My Red Hat System Administration I (RH124) training is now completed. I took the skills assessment before I took the training and RH124 was recommended. Although the course was not the right fit for my job, which is server administration, I have learned the basic of Linux.

The class concentrated more on GUI than command line. I wish it was the other way around. Nevertheless, the instructor provided as much command lines as he could. Pete Davis was the instructor. He has great knowledge of the subject as well as a sense of humor, which helped making the class engaging.

I definitely recommend this course for absolute beginner to Linux. It would had been perfect for me if I took this course about four months ago when I first started my job. At this point, I wish I had taken Red Hat System Administration II (RH135).

Administer remote system including remote shell access, remote file transfer, using SSH keys

Managing physical storage including filesystem, partition and swap space

Install Linux with Anaconda.

SSH

# scp original-file new-file
# rsync -a /home/student demo:/tmp
-a=all

Archive

# tar -cvf target/to/archive source/to/archive
-c=create
-x=extract
-t=test (tell)
-v=verbose
-f=filename

Using SSH

# ssh-keygen
# ssh-copy-id example.com

# service crond status
# chkconfig –list crond

# vi /etc/ssh/sshd_config
PermissionRootLogin no
PassordAuthentication no
# service sshd restart

Summary: I am not really concentrating today. The subjects aren’t interesting and the installation process failed again.

Yum

# yum list (get the list of .rpm, which stands for RPM Package Manager)
# yum search kernel (kernel is the name of the package)
# yum install kernel
# yum update kernel
# yum remove kernel

Network

# ip addr show eth0 (eth0 is the name of the network)
# more /etc/sysconfig/network-scripts/ifcfg-eth0
# service network restart
# system-config-network
# ip route
# host visualgui.com
# dig visualgui.com

Users and Groups

# useradd donny
# passwd donny
# vipw (let’s one user edit at the same time)

Manage Files

# echo $PATH
# pwd (current path)
# ls /home/{dir1,dir2} (show more two directories)
# ln file1 file2 (link file 1 to file 2)
# ln -s file1 file2 (symbolic link)
# su – username (change user)
# cp -av /dir/to/copy /dir/destination

Permission

r (view content)
w (change the content)
x (requires r to execute the content)

rw-rw-rw-
rw-r–r–
umask 002

u+s (suid=4: file executes as the user that owns the file, not the user that ran the file
g+s (sgid=2: file executes as the group that owns the file
o+t (sticky=1: no effect)

Summary: The best day so far of the training. Picked up many useful information. Hope the next two days will be even better.