The Principles of Beautiful Web Design
Chapter 3 – Texture
The topics covered in this chapter are another way to create life by giving some sort of realism to websites when applying different textures to our designs. Although when surfing through a webpage we cannot touch the different textures presented in the screen, if the design is successful, our senses can tell us what kind of environment we are seeing just with a few textures as part of the design.
To create textures in any graphic design -either printed or on the web, it is important to keep the point as the fundamental “source” to build any graphic element. When grouping several points, they can create other elements as lines, shapes, and volume that later can be all integrated together to create more elements as backgrounds, frames, patterns, etc…
It seems that without knowing or realizing what we are applying on any design, even as simple as possible, the theories of unity, proximity, and repetition are involved directly with any texture found on any graphic design. And this is the case of patterns, which can be simple defined as the repetition of lines –these made out of consecutive points, grouped in a symmetrical “routine” to create for instance a background.
The Principles of Beautiful web Design
chapter 4 – Typography
Before reading this chapter of Typography, I thought that the parts of a letter were pretty much called “long sticks”, “short sticks”, and “dots”, this last term only applicable to the letters “j” and “i”. But I just learned that letters are more than simple sticks and dots, they even have their own anatomy where according to Jason Beaird, are around 100 terms describing each part of any letter. Of course not all the letters share the same parts as for instance the “stem”, which is the main vertical or diagonal stroke in a letterform. The letter “i” is a good example of stem, unfortunately the letter “o” lacks this part.
Aside of all the different types of fonts and how each one can be seen and what “message” can portrait when used with specific words; another big job of a designer when choosing the proper font, is how to make this message to be seen clearly, mainly when working with lines, sentences, and finally paragraphs. And here is where text spacing and text alignment can make the difference between a heavy and clustered paragraph, or a light and well distributed paragraph in a document.
An excellent source to put in “My Favorites” folder given by the author, is the webpage www.typetester.org where almost all kind of infinite combinations of typefaces, sizes, leading, tracking, alignment, word space, etc… and in-between, can be pre-tested when trying to choose the right font. But something important to keep in mind when making the final choice is the emotional association each font can symbolize. According to Beaird, designers should define the feelings they are trying to evoke in the members of the target audience.
The Best Faces for the Screen
By Daniel Will-Harris
Definitely is never the same the type of typeface we are planning to use on a printed document, than the one planning to use in any web document; the equation is not as simple as which one looks “nice”. The equation goes far beyond about which one looks nicer, and its prettiness with the rest of the design, mainly when considering designing a web document; the equation goes directly involved with the variable that reads that “all the screens are not the same”.
And here is where the equation plays a big factor when defining the final typeface that will be readable for all the audiences while keeping its harmony with the final design.
Daniel Will-Harris points out in his article some aspects to keep in mind during the process of choosing a proper type for a web document: and the safer choice to go for it, is a large size that for sure will help the content to be easier to read. If for any reason the type needs to be in a small size, the recommendation in this case would be to make sure the type has a light face, and this is because lighter faces tend to look simpler, cleaner, and less chunky. Completely opposite when selecting a small heavy-weight type.
A magic way also suggested by the author to help the type be more readable, is the extra-tracking. Well, actually is the designer Chuck Bigelow referenced by Will-Harris who suggests adding a little bit of extra tracking between characters; and this is simple a little bit of more space in between characters, but mainly in fonts; this will help c l e a r i n g the visual content of heavy texts and paragraphs.
Think Outside the Font Box
By Ilene Strizver
Helpful article as the one from above where in this case Ilene Strizver, pushes the limit of making designs out of the limit of “conventional” typefaces meant to be used at a certain size in mind.
The author provides great examples of different types displayed at different sizes pointing out how these sizes can change the “looks” of the same type when used in small or large dimensions. It is amazing how the same details as hairlines, strokes, and corners give another personality to types when applied in different sizes.
These examples should be taken in mind when working for both sizes: small for paragraphs and big for titles, where according to the author prior to making the proper choice of what type to use, it would be very helpful to “engage both your brain and your eye in making an intelligent decision”; and of course checking the media where the type will be applied: printed or a screen if it is a web document.
A Dao of Web Design
By John Allsopp
John Allsopp makes an interesting point about new mediums borrowing “ideas” of old mediums adapting the new ones to nowadays necessities. And of course web documents could not be the difference vs. printed documents that have ruled for hundreds of years.
One of the problems designers have when designing web pages is the final product viewed as eye-catching appealing vs. functionality through accessibility. And to deal with this, designers must understand that clients sometimes use different screens, browsers and platforms that can interpret the same web page differently, not giving the desired purpose of what it was intended: simply to provide value information, content, READABILITY.
While reading “A Dao of Web Design” article, Allsopp proposes the concept of designing adaptable pages is designing accessible pages, mainly for those to have problems when reading documents containing a small type that in general is even harder to read directly from the screen as it is when printed; in other words –or better in my own words, web pages should be some sort of chameleon documents capable to adapt according to the necessities or desires of the reader; just like a chameleon adapting his skin according to the environment surrounding him.
As it has been the constant so far during the previous weeks: fonts, layouts, and colors are the main protagonists when assembling the final design, an according to Allsopp’s suggestion letting these elements of design to flow around the service each page is supposed to provide, rather than giving priority to the pages’ look and how we want them to be seen.
FOGE Website Design Comp
After reviewing some of the comments in general about the FOGE new web design, and also after seeing some of my class-mates’ designs and borrowing some of their ideas, I have come with this design. I hope you like it.
http://bcts-potomac.aacc.edu/CAT/cat02/week7/fogeredesigntemplate.jpg
Ola Faculty Template
For me to come with this design about the “OLA Faculty Template”, it was a little bit difficult because the information given is not really a lot, although some parameters were given, still it would have been much better to have some extra info. Anyway, so far is an idea of a crude project just in the making.
Enjoy my proposal, and of course comments and suggestions are more than welcome.
http://bcts-potomac.aacc.edu/CAT/cat02/week7/olafacultytemplate.jpg
