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.
A valuable asset in the grid system, Vinh explains, is that 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.
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 web-based 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-dont-make-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