In Chapter 1, I explained how the anatomy of a website consists of a bunch of blocks. No matter how you arrange them on the page, these blocks are inherently geometric. Unlike print design, which gives us the freedom to draw whichever layout shapes we like, the Web limits us to rectangles. One of the most common methods we can use to hide the underlying form of an HTML element is to give it a background image. Texture 87 You could use a circle or an oval as your background image, then center all your text—inserting line breaks where necessary—to create the illusion that you have a circular block of text in your layout.
Text inside an oval Okay, so if we forget to format our text to fit the background image, this approach can be problem- atic. Another reason why this technique is impractical is that most web browsers give users the ability to resize the text, which would also break this fragile, if fanciful, layout technique. In reality, the best we can do is distract viewers from the fact that a layout is rectangular. One thing we can do, though, is remove the degree corners that so often characterize rectangle-based layouts.
From a graphic design perspective, boxes with rounded-off corners soften the layout, creating a more organic, smoother feel. Remember when I asked if you could make a website design feel like a wet bar of soap?
Well, rounded corners can certainly make a site feel a little more slippery. The corners of each of the boxes you see here have been slightly tapered to give this very gridtacular layout a slightly softer feel.
The upper red box to the left of the image shows a close-up of those rounded corners. The Celebrated New Miscellany of Mr. Simon Collison So why does the lower red box in Figure 3. They are square because Simon has used the border-radius CSS3 property, which is only supported in Internet Explorer 9 and up. In fact, as of the publishing date of this book, making CSS3 border-radius work in Firefox and WebKit browsers required the use of browser specific versions of this property: -moz-border-radius and -webkit-border-radius.
Despite these added, duplicate properties, CSS3 is still by far the easiest way to implement rounded corners. A media query is a new feature of CSS3 that allows us to define a conditional rule for applying a certain set of styles. In this case, Simon is using them to automatically change the layout of his site as you resize the browser or view it in different devices.
Texture 89 several techniques for creating rounded corners using extraneous markup or JavaScript. Most of those techniques have been abandoned, and while there are a number of current JavaScript-based rounded corner solutions, I cannot bring myself to recommend them. Rotation I mentioned in the section above that diagonal lines evoke a sense of movement and excitement.
Rotating shapes and elements in your design have the same effect. Rotated objects break up the horizontal and vertical monotony of the Web and, like rounded corners, help it to feel more organic.
Take a look at the Ithaca Events4 site in Figure 3. To me, this design really looks like a flyer that might be stapled onto the wall of a local entertainment venue. It is a perfect look for a regional arts and culture calendar website. As with rounded corners, this is a practice that will soon be made obsolete with CSS3. The transform property of CSS3 promises us the ability to scale, skew, and rotate objects directly in the browser window.
While this effect will most certainly be overused and abused, having this much design control within CSS is a revolutionary step forward in web design. I recently took advantage of the transform property to rotate the main content blocks in a website for a design workshop at the South by Southwest Interactive5 festival. SXSW Design Workshop Shapes and Layout Rounding corners and rotating elements in your design are just two techniques to make a layout feel less geometric and more organic.
There are plenty of other ways to enhance your designs using shapes creatively. Take a look at the Tahoe Tech Talk website in Figure 3. Texture 91 of this site used a simplified style of illustration consisting of a variety of basic organic shapes to create the layout you see here.
When I look at the page, the first item I see is the precariously posi- tioned logo boulder. From there, the diagonal lines created by the angle of the logo guide my eye over to the billboard. Just in case I missed it, the viewfinder points me back to the billboard to let me know what the site is all about before I delve into the content. I call this the economy of line test. The expression economy of line is used to describe art and design that provides significant graphic meaning with as few lines as possible.
If a traced page layout still looks complete when recreated using only lines, it passes the test. As you can see in Figure 3. Perspective When we see a road that disappears into the horizon as the Great Wall of China does in Figure 3. Texture 93 Licensed by Billy Ly Figure 3. Perspective on the Great Wall of China Proportion In Chapter 1, I mentioned that altering the proportion of objects was a good way to create emphasis. This is true because we humans rely on the relative proportion of adjacent objects to determine not only the size of those objects, but their location in three-dimensional space as well.
Although the horses in the background of Figure 3. Even with accurate perspective and proportion, a composition without highlights and shadowing will look flat. Light and shadow establish visual contrast, and help to create the illusion of three-dimensional depth with two-dimensional media, such as pencil on paper or pixels on your computer screen.
Light and shadow alone can also be used to make two-dimen- sional objects look like they exist in three-dimensional space. Each of the three cyan-colored circles in Figure 3. A basic drop shadow has been applied to the first circle. The shadow that it casts matches the location of the light source, which lends credibility to the volume and depth of the shape. Examples of light and shadow Just as there are many ways to alter the levels of depth with the circles in Figure 3.
Take the menu in Figure 3. Texture 95 Figure 3. Would they be flat with beveled edges, or completely rounded on the top? Would the tops of the buttons be straight on the horizontal, or would they have rolling curves? What would happen when light hit them? All these questions can be answered by looking around you. For the example in Figure 3.
I also added a bevel to the edges to make them feel a bit like glossy, rectan- gular subway tiles. I wanted the active link to look inset instead of beveled out, so that it appears to be clicked.
I achieved that by adding a shadow to the top of the block instead of a bevel highlight. I gave the text a little drop shadow as well, to make it feel like the letters were slightly raised from the button surface. Gradients, shadows, and beveling make this menu pop Adding shadows to text and objects is another practical way of creating depth in your layout.
As with creating rounded corners and rotating objects, CSS3 again comes to the rescue. The box-shadow and text-shadow properties promise to make web design far less dependent on heavy images. Take a look at the screenshot from Worry Free Labs in Figure 3.
Without these elements, the banner would just be a boring white rectangle, but the organic shape and realistic shadows make this a convincing representation of a 3D paper or cloth banner.
Worry Free Labs using a combination of shape and shadow to strong effect Drawing from real-world inspiration is the key to adding believable depth to graphic elements. Rather than settling for a layout filled with flat blocks of color, lines, and shapes, try to think of ways in which you can incorporate three-dimensional space. Texture 97 Pattern I still remember my first exposure to website design.
I was in a tenth-grade typing class and the instructor took it upon herself to teach us HTML. It was optional, but choosing between timed typing tests and learning how to build web pages was an easy choice to make. The common denominator among those admittedly hideous creations was repeating backgrounds. Although repetitious background images like the ones in Figure 3. Pattern has long been used to add richness and visual interest to all types of design. On the Web, seamless background images were originally favored because they reduced page size and download times.
Using a small image that could be tiled to fill a background area, rather than a large non-tiling image, significantly reduced the download time for website visitors with 56K modems. CSS has greatly improved the degree of control designers have over the way background images work. Before CSS was around, we could only assign background images to body and table elements; now, with CSS, backgrounds can be applied to just about any element you choose.
You can use any of five CSS properties and one additional shorthand property to set the background of an element: background-color This is the property we use to set a solid background color for any element. The possible values for this property are url 'filename' or none.
If we wanted to set the background of an element to animalcracker. The default value is repeat, which sees that the specified background image will be tiled vertically and horizontally. The repeat-x setting will cause the background image to be repeated horizontally. This is handy if you want to apply a horizontally tiling image or gradient to an element, but want the rest of that element to be filled with the specified background color.
Similarly, repeat-y specifies that the background image should be repeated vertically. The effects of each of these settings is shown in Figure 3. The effects of different background-repeat settings on animal crackers background-attachment This property determines whether the background image stays in the same location or moves with the content when the page is scrolled. Texture 99 latter of which is the default.
When background-attachment is set to fixed, the background will be fixed relative to the viewport or browser window , so that when you scroll the page, the background image will stay in the same location. These values can be set using keywords right, center, or top for the horizontal position; top, center, or bottom for the vertical , using CSS measurements, or using percentages. If we wanted to position the image pixels from the left edge, and pixels from the top, we could use the declaration background-position: px px.
The effect of both of these possible values is shown in Figure 3. Animal crackers with different background-position settings To summarize all this information quickly, the developers of CSS have created a shorthand property, which allows us to specify all five of these properties in a single background declaration. Hi Ho Pickles! Texture Figure 3. But beneath the surface, the Tileables design uses several repeated backgrounds. Three repeated background images in the Tileables design 1.
At first glance, this decorative bar looks like a continuous series of color stripes. Individually, each of these components creates some level of texture; however, when you begin to use them together, they build on one another to create more complex visual imagery. Here are a few options. Aged, Weathered, Worn, and Nostalgic Style Perhaps you want to emphasize the timeless nature or nostalgic history of your subject. Texture This site has several elements that help to establish its unique weathered texture.
The watercolor- painted areas add splashes of color, but also highlight the paper texture of the main content area.
The photographic postcards that appear behind the main content area add a sense of nostalgia and give the shape of the page a retro look.
The weathered and worn look has been around for ages in both the print and web design worlds. It was popularized to the point where it became a design trend in , when Cameron Moll gave Licensed by this aesthetic quality the trendy and addictive name, That Wicked Worn Look. Another example of a design that uses the weathered aesthetic to create a sense of nostalgia is the Team Fannypack10 website in Figure 3. Billy Ly This goofy but thoughtfully designed site for a Multiple Sclerosis Walk team has been made to look like a crumpled old newspaper.
Notice the weathered texture and folded corner on the paper content area. The Electric Pulp11 site in Figure 3. Electric Pulp: modern grunge While the background texture on the Brookside Resort site was made to look like s faux wood paneling, the wood grain used on the Electric Pulp site simply exists to evoke an organic, hand- crafted vibe.
I guess you could say that rich tangible texture is their calling card. Like a comfortable pair of jeans with holes in the knees, or a faded stack of postcards with tattered edges, there is validity and honor in things that show wear and tear, and the passage of time. Texture Clean and Grainy As a backlash against the worn aesthetic, there was a period of time in the late s when a lot of designers and developers decided to buck the use of textures entirely. At the time, it seemed to be a logical reaction.
After all, if you want to make a crisp, professional first impression, adding a ton of extreme textures can be like wearing holey jeans and a concert T-shirt to a job interview.
Take a look at the Foundation Six12 website in Figure 3. Check out the curl of the F6 banner, the radial gradient on the blue backdrop, and the double shadows produced by the portfolio screenshots.
A noise or grain texture is simply a pattern of tiny dots. If you look around you, most surfaces have some sort of subtle texture to them. Adding a bit of translucent noise helps break up expanses of flat colors and pixel-perfect gradients to make digital surfaces look more analog.
Another site that layers this ubiquitous texture over an otherwise clean aesthetic is the New Adventures in Web Design conference13 site, seen in Figure 3. Ubiquitous texture in the New Adventures in Web Design Conference website Earlier in the chapter, I explained that geometric shapes are the norm on the Web, but they have a very mechanical feel. The New Adventures Conference design by Simon Collison embraces this geometric, grid-based tradition. It has a very precise, almost scientific quality to it that would feel very cold and robotic without the added gradients, warm-colored background, and subtle grain texture.
These additional textural elements add a touch of humanity and contrast that really makes the design pop. Texture Handcrafted Scrapbook Another interesting reaction to—or perhaps more a variant of—the wicked worn look has been a rise in handcrafted designs that look more like a page from a personal journal or scrapbook than a website. Notice that most of the rectangular elements on the page have either been rotated or cut on diagonals.
This intentional imperfection makes these blocks feel like they were cut out by hand with a pair of scissors. The same is true for each of the athletes in the main content area.
Using simplified illustrations, vivid colors, and a focus on imagery over content can help give your designs a childlike feel—what I like to call the whimsical cartoon style. Notice also the repeated use of rounded corners throughout the design, helping to tie the top navigation area into the rest of the site. Zombies game series. Normally, cluttering a design with eye-catching graphics like this would be a huge distraction from the content.
In this particular case, the plants and zombies staring each other down helps to move your focus back and forth over the page, with any luck encouraging you to actually read some of the content before going back to playing games.
There are no gradients, no rounded corners, no subtle noise textures … not even any boxes. Instead, John wants you to focus on his writing. There are plenty of examples of textureless, minimal designs out there that provide more to look at than just plain text. The professional site of designer Mark Boulton18 in Figure 3. Like the cover of a magazine, the logo, navigation, and content description are overlaid on top of the main imagery.
The print design look is continued below this as the content is divided into tight, grid-based columns. Staying on top of current web design trends is essential to creating effective contemporary designs, but having a knowledge of past modes that occurred outside the ethereal history of the Internet will help you to establish your own style and original designs.
Texture Some of the most useful web design resources can be found in the art history section of your local bookstore or library. Application: Clipping and Saving Billy Ly As the design process on the Southern Savers site moved along, Jenny was hosting more and more couponing workshops throughout the southeast of the US, and the popularity of her site continued to grow. Despite the worn-out WordPress template and lack of cohesive branding, Southern Savers was becoming a household name.
During this time, Jenny was interviewed by several newspapers and local interest magazines, all of which were directing even more traffic back to her site. It was obvious that this project needed to keep moving forward. Before the actual site design could begin, though, Andrew had to nail down the Southern Savers branding. Three potential branding directions for Southern Savers Direction one: playful For this concept, Andrew wrote out the name in a custom typeface and paired it with a hand- written tag line.
The winding dotted line behind the text gives it a fun, whimsical feel. Direction two: general store In this design, the text style in the logo was made to look like a hand-painted sign. For the logo mark, Andrew included a magnolia blossom.
The other grocery images would support the idea that, like an old general store, Southern Savers should be your one-stop shop for great deals. She was excited about the idea of keeping a magnolia blossom in the design, but also liked the look of the slab serif typeface in the classic southern direction. The result was the graceful marriage of those concepts as seen in the final business card design in Figure 3.
Notice the subtle wood texture behind the logo and the soft, hand-painted look of the magnolia blossom illustration. For most people, typography is simply about arranging a fa- miliar set of shapes to make words, sentences, and paragraphs.
Having the ability to set type with only a few strokes on a keyboard has allowed us to forget about the creative and artistic possibilities of this medium. Pick up a magazine, turn on a television, or take a walk through a grocery store. You will undoubtedly see hundreds of creative and effective uses of type. It is the substance of branding, the key to unspoken communication, and an essential piece of the web design pie. This Topic May Be Addictive!
You might start snapping pictures of ride signage at theme parks, rather than your kids. The study of typography is one that draws many people in Consider yourself warned. In order to unlock the potential of type, we must first understand it. Admittedly, this is no easy task. The minute details of letterforms and the spaces around them have been carefully calculated The Principles of Beautiful Web Design. In the early days of print, every letter of every typeface had to be carved into wood or cast from lead, inked, and then pressed into paper.
This was a handcrafted profession requiring exacting attention to detail. Even though the practicality of this practice has long been surpassed by modern printing methods, many colleges and universities offer classes in letterpress, so that future graphic designers can both appreciate the benefits of working with type on a computer, and see the potential for typographic exploration.
My personal love of typography is twofold. As a designer, I enjoy working with type for the artistic aspects of it. I like the voice that different fonts provide, and the expressiveness of typographic collages like the one in Figure 4. After all, the root words that make up typography are typos, meaning impression or mark, and grapheia, meaning writing; typography literally means making impressions with writing.
As a programmer, I also appreciate the puzzle-like problem-solving tasks that are involved in working with type. The choices of font and color are only the tip of the type iceberg. In fact, the majority of the decisions that need to be made in our work with type involve the space around the letterforms and text blocks, rather than the actual type itself.
Nevertheless, choosing an appropriate typeface is a crucial step. Figure 4. A collage of found typography The history and implementation of type is a topic that could fill hundreds of books—and indeed, it has.
The number of font families that are supported, by default, across both major operating systems is very small. This list of nine font families in Figure 4. If you need a standard sans-serif1 font, you have to choose between Arial, Trebuchet MS, and Verdana. Fortunately, the font-family property of CSS allows you to choose multiple fonts in order of preference. This is referred to as a font stack. If the first font is unavailable, the second font will be used; if the second font is absent, the third font will be used, and so on.
You think the best font for the job is Calisto MT, so you specify that first—for the few people that have it installed. Your second choice is your first backup plan, and for this you choose Georgia. Even though Georgia is on the safe list, some people may not have it installed.
Times New Roman is a close equivalent, so you decide that you might as well add it as your next alternative. The generic font families are serif, sans-serif, cursive similar to script or hand lettering , fantasy or novelty , and monospace. In summary, your font stack would look like this: font-family: 'Calisto MT', Georgia, 'Times New Roman', serif; Fonts with Spaces Remember that any font family names that include spaces must be quoted, either using single ' or double " quotes.
The key to creating an effective font stack is knowing which fonts are most similar and, more im- portantly, which ones are installed by default in each operating system. Typography Text Image Replacement Now, all this preferential font specification is okay, but what if you really want your visitors to see some text in a specific typeface?
In that case, the obvious solution is to rely on images to display the text in question. The text in the header, the main navigation items, and the category links you see in the right column are all presented as images.
This approach not only gave Adam power over the typeface display, but also allowed him to rotate, skew, distort, and add texture to the B Movies fonts he chose. Frighteningly, though, his body copy is set in Comic Sans. This includes search engine spiders, of course. Take the sidebar from Attack from Planet B, for instance.
This involves setting my image as the background of the element, and then adding a negative text-indent value high enough to move my text content out of the block and off the screen! The CSS would look like this:. As you click on or tab to a link in an HTML document, you activate its :focus state. That outline usually includes your negative indented text, so users will see a dotted outline that extends all the way to the edge of the page.
There are two options for fixing this. You can add overflow:hidden to the link to contain the outline, or remove it entirely by adding outline If you do this, be sure to define a :focus style for users that might be navigating by keyboard.
Displaying text in images works well for static text that changes infrequently, but what if you want to use a specific font for text that changes periodically, like the headline of a news article? So, what can you do in this case? Typography computer. A mechanism for doing just that has been a part of CSS since The two main roadblocks have been resistance from font foundries, and inconsistencies in Billy Ly supported font formats.
The resistance from the foundries is understandable. They make their money through licensing the use of their fonts, so want to deter people from downloading, copying, and using them for free. The file format part of the story is a little messier. Over the last few years, though, the technical issues with embedding fonts have been overcome. This led to a huge explosion in com- mercial-use free fonts, which, in turn, forced the foundries to reconsider their position on licensing fonts for embedding.
Your type is displayed in that font. They offer a free trial library for a single site; otherwise, their pricing is based on a yearly subscription that varies based on page views per month. WebINK is its entry into the hosted web font market. It has the backing of a large number of font foundries, but the subscriptions are monthly instead of yearly.
There are a number of other web font services out there, with more popping up every week. Several font foundries have even joined in on the action, offering hosted versions of their own fonts. A great place to find the latest info about font-face and web fonts is the webfonts. Both will soon be made obsolete by downloadable web fonts, but are still widely used today and worthy of mention.
The basic premise behind sIFR is that Flash movies have the ability to embed fonts and display them in all their anti- aliased beauty. Then, it displays the contents of the text block using Flash. The downside to this fiendishly clever technique is that it requires both JavaScript and Flash. First, it transforms fonts into SVG files; then it uses a JavaScript rendering engine to draw the letters using the canvas element. But to do that, you must first know the individual glyphs—or symbols—that make up those fonts.
Many people can already identify serifs, ascenders, and descenders, but for one class, we had about terms to memorize. Sure, I could just talk about type using informal words like squiggles, slants, and thingies to describe letterforms, but that could grow confusing rather quickly.
The terminology of type 1. Baseline The baseline is the imaginary horizontal line on which most characters sit. The only character that hangs below the baseline in Figure 4. Cap height The cap height or capline is another imaginary line. This one marks the height of all capital letters in a typeface.
Notice that the cap height is below the maximum height of the typeface. Serif Serif is the name given to the finishing strokes at the bottoms and tops of certain typefaces. Mean line Another imaginary horizontal line that marks the top edge of the lowercase letters is the mean line or midline.
Typography 6. Bowl The bowl of a letter is the rounded curve that encloses negative space in a letterform. The only other characters that typically extend below the baseline are the old-style numerals in some typefaces.
Privacy Policy. New eBooks. Search Engine. The Principles of Beautiful Web Design is the ideal book for people who can build websites, but are seeking the skills and knowledge to visually enhance their sites. This book will teach you how to:Understand what makes "good design," from discovery through to implementationUse color effectively, develop color schemes, and create a paletteCreate pleasing layouts using grids, the rule of thirds, and symmetryEmploy textures: lines, points, shapes, volumes, and depthApply typography to make ordinary designs look greatChoose, edit, and position effective imageryAnd lots more Like anything on the net, a few of the references are dated - there's no way for anyone to prevent that - but the context of the content makes it easy to google a clear example of what he's pointing out.
So many times we reach for the latest and greatest book on technology given the speed in which it is moving so its AWESOME to find a book that is clearly written, stands the test of time, and is fun to read.
This book is post-it compliant bookshelf certified for years of future reference! Excellent book. Good coverage of all aspects web design with plenty of illustrative examples. Design has always been such a mystery to me. Texture 4. Typography 5. Imagery Index Show and hide more.
Galitz Bringing together the results of more than new design studies, an understanding of people, knowledge … book Interaction Design, 5th Edition by Helen Sharp, Jennifer Preece, Yvonne Rogers A new edition of the 1 text in the human computer Interaction field!
0コメント