visualgui

Basic Typography

Ruedi Rüegg:

Typography must be regarded as the sum total of various aspects. These concern the content, intention, sender, receiver, language, design, technique and the economic point of view.

Typography is not a free, independent art like painting, sculpture or music but, like architecture and graphic design, it is connected with a definite order. Its aim is the impartial transmission of thoughts, ideas and facts.

Comments Off

Legibility and Readability

In Letters of Credit: A View of Type Design, Walter Tracy explains the different between legibility and readability:

Legibility, then, refers to perception, and the measure of it is the speed at which a character can be recognised; if the reader hesitates at it the character is badly designed. Readability refers to comprehension, and the measure of that is the length of time that a reader can give to a stretch of text without strain.

Comments Off

Behind the Type: The Life Story of Frederic W. Goudy

Printed in 1941, Bernard Lewis’ Behind the Type: The Life Story of Frederic W. Goudy is a short biographical sketch of America’s most eminent type designer. Lewis writes:

Goudy has found in type design as others have discovered in the writing of prose, poetry, or music, or in the painting of a piclure, that there is a coordination of parts, a pull toward the finale. Just as in music where the whole completes itself in temporal expectation so in letter design does the whole complete itself in spatial expectation. In music one tone pulls toward its successor; in type design, one stroke or movement leads to the next. Goudy has found that in order to design an integrated alphabet in which each letter has a mutual affinity for its companions, he must get in on the beginning of a swing or a visual or kinesthetic “set.”

Behind the Type also includes a transcript of an address Goudy delivered at Carnegie Institute of Technology, Pittsburgh, February 12, 1938. Goudy spoke about type design:

The inexperienced designer says to himself, “I will design a new type.” He does not as yet realise that whoever imagines a tree must also imagine a sky or a background against which to see it standing. He cannot imagine a type unless he imagines also its destination. He must have visions whose power is his power. He must deal with what is logical as if it were a miracle; yet, as a matter of fact, what he is attempting to produce is something which should long have been in his mind, perhaps without his being conscious of the fact, and from what he has studied and arranged he has now only to read and project what already is there.

Goudy spoke on legibility:

Type, to be fine, must be legible, not merely readable, but pleasantly and easily legible; decorative in form, but not ornate; beautiful in itself and in company of its kinsmen in the font; austere and formal, but with no stale or uninteresting regularity in its dissimilar characters; simple in design, but not the bastard simplicity that arises from mere crudity of outline; elegant, that is, gracious in line; fluid in form, but not archaic; and, most important, it must possess unmistakably that quality called “art,” which is the spirit the designer puts into the body of his work, the product of his study and taste. How many of the types demanded by advertisers or the typographic advisers would be able to stand analysis of this sort?

Comments Off

How to Copyfit

Note: The following guide is taken from The Designer’s Guide to Text Type by Jean Callan King and Tony Esposito.

Copyfitting determines the amount of space that typewritten copy will occupy when it is typeset.

Procedure

  1. Determine the total number of characters in your copy. To do this multiply the number of characters per line in your typewritten copy by the total number of lines. This will give you the total number of characters. Note that each letter, punctuation mark, and space between words must be counted as a character.
  2. Select a typeface.
  3. Determine the width in picas to which the copy will be set.
  4. Determine the number of typeset characters per pica by placing a pica (12-point) gauge on the first line showing of the chosen typeface and size. Begin measuring at the first word on the left, noting the last character where your pica width ends on the right.
  5. Divide your total character count (from step 1) by the number of typeset characters per line (step 4). This will give you the total number of typeset lines.
  6. Determine the depth you want your typeset copy to be. You may need to decrease or increase point size or amount of planned leading at this point to make your copy fit a predetermined layout.
Comments Off

The Studio Recordings of the Miles Davis Quintet, 1965-68

When Miles Davis formed his second quintet with saxophonist Wayne Shorter, pianist Herbie Hancock, bassist Ron Carter and drummer Tony Williams, he knew that they were “going to be a motherfucker of a group.” In just three and a half years together, the quintet recorded some of the most brilliant, innovative masterpieces in the history of jazz.

From E.S.P. (January 1965), Miles Smiles (October 1966), Sorcerer (May 1967), Nefertiti (June 1967), Miles in the Sky (January and May 1968) to Filles de Kilimanjaro (June 1968), Keith Waters analyzes in depth The Studio Recordings of the Miles Davis Quintet, 1965-68 “through their compositional, melodic, harmonic, formal, improvisational, and participatory strategies.” With Waters’s detailed assessments such as motivic organization, meter and hypermeter and circular tunes, this book isn’t suitable for casual listeners.

While I find the technical analysis intriguing, I am more interested in the feelings these men had created and the personal connection between a group of talented musicians. The emotion and the sound in Davis’s trumpet, the melodic and harmonic beauty in Shorter’s saxophone and the inventive, expansive rhythmic from Hancock, Carter and William still mesmerize me every time I return to these albums.

Comments Off

Before & After: How to Design Cool Stuff

John McWade’s How to Design Cool Stuff actually shows you how to design professional-looking print and web materials. The book is a quick read, but filled with useful tips and guides on using types, photographs and colors to enhance your design. The cool thing about this book is that John McWade makes the techniques easy and simple, but the results are stunning. Beginners will find How to Design Cool Stuff to be very beneficial. This is the first Before & After book I have read and I am looking forward to reading more from this series.

Comments Off

DOM Scripting

Jeffrey Zeldman once said that Jeremy Keith could write about cement and he could still make the subject interesting. As I was reading Jeremy Keith’s DOM Scripting: Web Design with JavaScript and the Document Object Model, I couldn’t agree more. Keith has such an accessible approach in his explanation. Here’s an example of how he breaks down variables (JavaScript syntax):

In our everyday lives there are some things about us that are fixed and some things that are changeable. My name and my birthday are fixed. My mood and my age, on the other hand, will change over time. The things that are subject to change are called variables.

Can’t get any clearer than that. The second edition of DOM Scripting is filled with updated guidelines and best practices for applying unobtrusive JavaScript to enhance, rather than getting in the way of, the user experience.The book also introduces some new HTML features including canvas, video, audio and forms. A recommend read for web designers.

Comments Off

Recent Readings: CSS3, HTML5, Drupal & Email

Here is a list of books I have read in my commuting trips and free time:

Stunning CSS3 by Zoe Mickley Gillenwater covers new CSS features, such as gradient, transition, rounded borders, through project-based demonstration. The last two chapters, “Different Screen Size, Different Design” and “Flexing Your Layout Muscles,” are particularly useful for those who would like to learn responsive web design.

HTML5: Up and Running by Mark Pilgrim is a short and concise read that gets you up and running with new markups in no time. Pilgrim’s Dive Into HTML5 is also a great resource.

Pro HTML5 Programming by Peter Lubbers, Brian Albers, Frank Salim takes you beyond the basic HTML5 markups and shows you the power of APIs including WebSockets, Geolocation and Web Storage, to create robust web applications.

Now that GW has announced the move toward Drupal as the University’s CMS, I am starting to read up on the open source system to get a feel for it. I installed Drupal 6 in the past and played around with it, but didn’t get very far because I didn’t have a real project to work with. I actually want to read up on Drupal 7, but haven’t founs a good book yet since the latest version came out not too long ago. Using Drupal by Angela Byron et al. published three years ago, but it is still a good read to see what you can do with Drupal without programming skills. Using existing modules and themes alone could get you up and running complex sites like job posting board, product reviews and Wiki.

For front-end developers and designers, Front End Drupal by Emma Hogbin Konstantin Kafer is very informative in learning how to customize the look and feel of Drupal. The thing to note about Drupal is that upgrading from version 6 to 7 is not as easy as clicking a button like WordPress, one of the features I live about WordPress. Themes are specific for each version.

Create Stunning HTML Email That Just Works by Mathew Patterson is what I needed when I had to create some HTML email templates for the School of Business. I have to admit that designing an HTML email was quite a challenge. In fact, I was struggling with it. I had to forget everything I have learned about HTML and CSS for the past ten years in order to make the design looked correct in mail applications. Patterson sounds convincing about the opportunities for web designers as he points out, “email is a low-cost, high-return medium that appeals to businesses.” I had clients who requested HTML newsletter design and I hesitated to take on. It’s really a pain, but I am changing my mind after reading this book.

Comments Off

Simple and Usable

Giles Colborne’s Simple and Usable is irresistible, specially for a minimalist like myself. Colborne argues, “When something is simple, it looks effortless.” He gives examples of Flip video camera and Apple products and explains how simple user experience makes them stand out.

After setting out a vision for why we should design for mainstreamers rather than expert customers, Colborne lays out four key strategies for simplicity: remove, organize, hide and displace. He uses a DVD remote control to illustrate how an over-complicated gadget could be simplified as he points out, “The secret to creating a simple user experience is to shift complexity into the right place, so that each moment feels simple.”

For anyone who looks into creating user-focused experiences for web, mobile and interactive platforms, Simple and Usable is a must read.

Comments Off

Creating Your Digital Portfolio

In retrospect, I have spent more than a decade building my online portfolio. Visualgui.com has evolved over the years, but the primary goal remains the same: to showcase my work. This site played an important role in my career and landed 95% of my client projects. For web designers, an online portfolio is a requirement. For beginners, creating an online presence could be a daunting task. If you’re in that situation and don’t know where to begin, Ian Clazie’s Creating Your Digital Portfolio is for you. With practical tips and professional examples, this book is an invaluable guide for creating an effective online portfolio. In addition to the book’s advice on the visual design, I strongly recommend that you pay attention to the codes as well. Particularly for web designers, clean, well-structured markups under the hood are as important as the striking display.

Comments Off