Thinking With Type

For those interested in learning about typography fundamentals, this is your site. With
numerous sub- links, this website is essentially a database of content regarding general
typography rules and considerations within a print context.
This site raises numerous areas of typographical consideration in order to improve both
aesthetic and functional elements of text-based design. However, what is critically missing
are technical resources that allow this knowledge to be translated and accurately
replicated for and across digital platforms.
I found the section on varying grids informative and perhaps the most applicable for web
design, despite its clear publishing context. Also of note is Text Hierarchy (read it here).
While it does make mention of CSS, this is only for the purpose of quick, demonstrative
projects.

95%
This website is great for defining the role of typography on a website. Before reading this
article, I had only thought of an engaging website as one with powerful and well-crafted
graphics, and saw text as the necessary evil that intruded on the overall identity.
However, this article explains that text can create pathways, and can essentially foster a
self-tailored experience for each visitor.
My conceptions of web design prior to this article was simple: all text on a page is intended
to be read, but seldom is completely. This article shifted my mindset to see that typography
can be used as navigation to ensure the user has a good chance of finding what is of
interest to him. Essentially, effective typography is an extension of effective UI. There are
no real examples or detail explanations of how this strategy can be implement, although
some may find the updated resources at the bottom of the page worth a look.
The articles points on typeface selection are thought provoking. Previously, I have placed
an aesthetic emphasis on the role of type. However, now I realize this may have been to
the detriment of my macro-typography. In fact, the entire concept of macro-typography
was introduced to me through this article, and - while only briefly touched on as inspired
me to seek further readings.

960
The 960 website is essentially the landing page for resources relating to the versatile grid
for web layout design by the same name. There are links to articles explaining the origins
of the concept (an article by Cameron Moll who herald[s] a width of nine-hundred and
sixty pixels as the optimal size for design); download opportunities; and real world
examples of the 960 system with optional grid overlay to reinforce the concept. However,
for such an intrinsic design process, the examples provided are uninspiring and limited.
Content aside, I found the design of the website with its unsubtle adherence to its 960
grid system clunky and uninspiring. Also, satisfactory or specific explanations of how to
design to the grid system are absent and readers will have to use the generic examples to
derive strategy.

HOW WE REALLY USE THE WEB

This is a fantastic resource that addresses the functionality of web design. The
points and facts are very clearly outlined and easy to locate; it is a perfect mirror
of form and function.

The articles point is intriguing: [users] dont choose the best option[they]
choose the first reasonable option, a strategy known as satisficing. Following on
from this is, in my opinion, the most important message of the article: We dont
figure out how things work. We muddle through.
Although the page includes diagrams and side illustrations, they are often
illegible, and this article could be improved by providing clear examples of
successful and unsuccessful designs.
Yet, on the whole, this website is a valuable resource to consult when planning the
interaction and usability of websites.

Interview with Khoi Vinh

This interview begins with the subject, Khoi Vinh, being described as one of the
true pioneers of the grid system (though he humbly disagrees). It is perhaps the
best of the readings in providing practical applications of the grid, with a clear
thought process behind it, and reflection on how to use the grid principles in a
wider design perspective.

You start to try and

see how various details can echo one another, and (whilst saving
time) the grid system can allow creative thinking through
restrictions. In fact, this is the only article from the list that explores
the freedom in designing with a grid and how they are guidelines
to play off ofto break, even.
A valuable asset in the grid system, Vinh explains, is that

The article also discusses applying grid-like rules to compositions

without a strict grid in place. This is a versatile approach to
designing around compulsory elements (like ad-blocks) and
restrictive items (like fixed-width content).
Notably, towards the end, there is a walkthrough on how to use grid
when approach a new design, as used by Vinh himself on projects.
Linking to other readings, the website hosting this interview is referenced on the
960 website, and as a recommended link in Wikipedias Grapic Design Grid
information. Therefore, some may find it useful to read these articles in
succession for perspective.

WIKIPEDIA
This website provides a solid foundation and contextualization of the grid system
in design. Perhaps the most designer focused of the readings, it briefly describes
the use and evolution of the grid system through a broad, graphic design lens,
before touching on web design.
Making clear links between traditional print gird systems and contemporary webbased applications, this article provides context for the foundation on which the

960 system (for example) could be built. Therefore, this information may help
some designers broaden their mindset and convince them to cross design
disciplines for inspiration towards web design.
For designers who already have wide experience with the grid-based design
approach, this resource could easily be skipped. For those totally new to design, I
would recommend reading this article before the others.
On a side note, the reference list at the bottom of the page contains numerous
books and journals for further reading, and a link to TheGridSystem.org, which has
a number of beneficial articles and tools that explore the use of grid more
specifically in web design.

Grid Theory
Perhaps more dense than some other articles on this list, this extensive resource
provides a sound contextualization of the grid system and, importantly, introduces
theories like the Golden Ration and Rule of Thirds.
Starting wide with brief mathematical principles, this site eventually narrows its
scope to provide design strategies that work within a grid structure. The example
mock-ups are clear and unlike any other reading provide alternate examples of
implementation.
It was great to see that the article addressed the point that the 960 website so
drastically overlooked: that using a grid does not mean your design will look
boxy, necessary. It has a great screenshot of the grid system in use on 10K
Aparts website; however, the hyperlink takes you to a redesigned version of the
site that is not as fulfilling.
For readers short on time, but still want a great grasp of the grid system, I would
highly recommend this site paired with Khoi Vinhs interview.
http://www.uxbooth.com/articles/10-usability-lessons-from-steve-krugs-dontmake-me-think/
-

Preview of HTML5
This website is best suited to designers that already have basic
knowledge/experience with coding; however, those new to coding (like me) can
learn some basic fundamentals. Moderately straightforward information is
presented with clear examples on subject like: primary webpage structure
(header, body, footer); coding hierarchy; and definitions of coding some new tag
elements (nav, article, sections, etc). This website could be used as a handy
refresher/directory for designers looking to implement or update their current web
designs for HTML5, as it provides clear syntax. The comments section offers some
interesting counter-points to the article, and a clarification of certain terms when
viewed in context.
Since the article was written in 2007, and contains some outdated information, it
would be beneficial to read more contemporary articles like html-5-tutorial.com or
HTML5 CSS3 Fundamentals Development for Absolute Beginners