The assigned chapter in The Principles of Beautiful Web Design went over some basic principles of typography and how they apply to web design — that is, when they do. The fonts available to a web designer are limited to those that can show up on a web browser, and even then the computer screen has some limitations. For example, the old principle of printed type is that sans serif fonts are good for headlines and captions whereas large blocks of text need serif fonts (those with strokes across the tops and bottoms of letters) for legibility, but some web designers are now using sans serif fonts for blocks of type because they are more readable in the smaller sizes typical on computer screens. Another thing the chapter did for me was to demystify the use of “pixels” — the picture elements on a computer screen. I know what an inch is, and what a pica is, but because a pixel is a relative measure I had trouble grasping how to draw a design using that measure. Author Jason Beaird provides a nice, simple formula: The default font size is 16 pixels, but that is too big for text, so in coding for the web he defines the size of his body font as 62.5% [of that 16], which makes it 10 pixels, or about an em. He defines paragraph size as 1.2 em and h1 [main headline] size as 3.5 em. So when the choice is up to me, I am going to avoid puzzling about it and simply apply that formula.

The assigned chapter in our Dreamweaver textbook was a lesson on providing users with tools to navigate websites, including links and panels. The result is here.

Our class assignment was to finish an animation in Photoshop and then come up with an original. The first is here and you will see that the second bears an uncanny resemblance to it. We were allowed to be more creative, and I spent some time experimenting with more original designs for the background including tracing several women throwing pots or a woman holding a painter’s palette, but they gave me trouble so I opted for at least finishing a project that does what it is supposed to do, which is to morph into different versions.

I finished my proposed website banners and submitted them. Here is a copy of the final version:

As submitted, incorporating classmates' suggestions

As submitted, incorporating classmates' suggestions

Among other things, it wasn’t apparent to everyone that the font and placement of “MyAACC” in the version below under “Banner Day” was meant to suggest clouds, so a classmate proposed softening but enlarging the letters and moving them behind the bridge, which I did. I also moved a gull that appeared to be strafing the containership passing under the center span. Here is a link to the full-size version, which shows more detail. I also made a smaller version for interior web pages: reistrup-24 Here is a link to our classroom project in animation. If you watch it for a few seconds, stuff happens.

Advertisements