"… Maybe they've taken the 'less is more' axiom a little too literally."
So begins Jason Beaird in chapter 3 of The Principles of Beautiful Web Design, with an unforgettable sentiment about many web designers and their relationships to texture. Upon reading this statement I was immediately reminded of a blog post I wrote several days ago lamenting the oversimplification of design in the name of universal usability. Now, my intentions here are not to skewer this concept — it is an important one — but rather to again suggest that everything requires a delicate sense of balance. The strictest adherence to usability, with no texture underneath text, no graphical text anywhere, only light backgrounds with dark text, and so forth is really limiting the possibilities of great design and encouraging a boring web landscape. It is possible to use carefully translucent textures to add interest, even under textual areas, without rendering a page unreadable. Used judicially, this and other techniques can enhance the beauty of pages without compromising usability or function. Now that I have repeated my use-and-beauty-balance spiel, let's talk about texture.
Beaird notes that depth, line, shape, and volume are all key components to adding textural interest to a website. Banishing all thoughts of the repeating brick or cloud image, his ideas about adding texture are extremely subtle in most cases and yet they add incredible depth to a flattened, blocky page. The drop shadow alone can help create a sense of layering and force content areas to move forward (a great way to add emphasis to a particular element). Furthermore, adding gradients to unexpected places, such as navigation buttons, creates an important illusion of dimensionality. In fact, it is incredible to see the difference between a flat color area and a sleek, rounded button created only through some well-placed highlights and shadows.
As for line based textures, Beaird is a champion of looking to art history for inspiration (a kindred spirit for sure). I am considering inspiration from some of the rich, fanciful textures of Rococo to help create a decadent feel to my page, but we'll see if I continue that route in the long run. I am also a fan of simple elements, such as the texture of paper and watermarks or stains. Furthermore, I like the look of subtle layered textures to create something new. As long as the layers are kept largely translucent I think this technique can work well for creating a complex base image that doesn't compete with other page elements, especially text.
Overlapping is another key element that pairs well with the use of drop shadows. As Beaird notes, having one element slightly covering another helps to break the series of rectangles that plagues a lot of site designs. While I am good at layering images and textures, I must admit that layering content elements is something I have to work on. Successful use of this technique really does add a unique touch to designs, but it doesn't come naturally to me. To start, I am going to try drawing out some small sketches to see how I can break out of the existing grid (which is a little too rigid right now), and see where the design can go from there.
Sunday, October 3, 2010
5.1 Page layout and a splash of color
The question of how to size a web page is one of the most vital and simultaneously annoying issues I have come across to date. Some people declare any scrolling down the page to be off limits and propose that pages be designed as fixed size along the width and height, fitting nicely into most browsers with background space occupying the remainder of the scene. I disagree with the never-scroll-downward rule and I believe most other people do as well — at least based on the amount of scrolling I do on web pages everyday. As long as the important information (especially navigation) hits "above the fold" as MacDonald, Beaird, and the authors of the previously mentioned Web Style Guide all point out, scrolling for the rest of the content is fine. Horizontal scrolling, on the other hand, is ridiculous. Given that, I like MacDonald's guidelines for creating fixed-width pages that are set at 1000 pixels, or a size that fills the browser window for at least half the browsing public. His cautions about proportional sizing make sense and I must admit that I am too much of a control freak to let elements appear squashed out of place or elongated, while trusting users to resize their window if something looks "off." His example of how to create a fixed-width page that doesn't truncate a block of content is ingenious. The New York Times (and obviously many other sites) have the content of an article fit squarely within a 600-pixel wide section of the page so that smaller browser windows can display the full text without the need for horizontal scrolling. The remainder of the page (fully visible at 1024 x 786) has additional content, but that content doesn't affect a user's ability to view that main chunk of text; users can finish reading down the page and then scroll right to view the extra material. What a fantastically simple workaround for catering to multiple users!
Beyond sizing, MacDonald covers the use and creation of tables, noting the effective uses as well as cautionary notes about trying to use them for substantial layout — namely, that they are somewhat outdated. I can see the purpose for lining up elements (such as buttons in the navigation bar) but styles have sort of eclipsed more extensive uses. Divs are just more flexible for layout. The use of frames is also covered in chapter 10, mainly as a relic of web history. The notable disadvantages, such as the URL remaining the same on each page, are enough to write it out of good design practice. At first this may seem like a minor issue, however with the importance of personal and social bookmarking the inability to put a placeholder on a particular page is an extremely unpleasant hallmark of frames; users are getting increasingly impatient with unnecessary clicks and forcing them to navigate through a homepage to reach specific content is a pretty good way to drive them elsewhere.
There is obviously an arsenal of layout tools out there, but the best for maintaining design consistency is definitely the use of templates. Fortunately it is easy enough to either download a free one, or better yet, maybe create one in Dreamweaver. The point is that any sweeping changes are applied to all the pages based on the template, so changing a page element is not really a big deal. The only thing is, as MacDonald mentions, they can be fragile. I have definitely lost some content on selected pages when updating a template, and I am still not entirely sure why. Did I make sure to save a copy before updating? Of course not; I apparently like to learn things the hard way. That said, templates are great as an organizational tool.
Moving on — or back — to color, I have another website to talk about this week that generates color schemes. Colors on the Web combines some interesting features, including information on color theory and psychology, a description of hexadecimal numbers and how screens display colors, and a tool to help design color schemes. One of the simplest and yet most useful features here is the list of color names. Each name has several associated swatches, as well as a hex code for each. The question posed at the top of the page, "Do you know what color royal blue is? Or hunter green?" is a great lead-in to this list. The fact of the matter is that people rarely speak the same color language, and antique white or navy blue mean different shades to different people. This list is a great compilation of variants that could be consulted and displayed to make sure that everyone involved in a web project is on the same page. For individuals, it is just a great reminder of the names of some of those colors you can't quite accurately describe.
There are a couple of tools available on this website that help to pick color schemes. First, "spin the color wheel" is just plain fun; it randomly generates a set of background, secondary, and text colors with each spin. A more useful tool, however, is the color wizard. It has a "randomize" feature that allows a haphazard color selection, but unlike the color wheel tool it generates color schemes, such as monochromatic, triadic, and complementary, using a single selected color as the base. This generates a more harmonious selection of colors than the color wheel tool, which presents potentially garish random combinations. Additionally, you can enter a hex code to base the color schemes off a specific color; this really tailors the scheme to a desired look and proves more likely to be useful for most people. I suppose, though, that the random feature could be a good source of inspiration if your mind really is empty with regards to the desired look of a website.
This is an example of a hex code I added for a puce color and the subsequent triadic scheme that was generated with the color wizard:
The color wizard also provides a selection of tints and shades for my starting color. The combination that was generated, including the additional color values, would create a very calm and sophisticated palette for a website. Moreover, a triadic color scheme is not one that I would often turn to on my own, so the color wizard and other similar tools can be a great resource for expanding on a basic color selection.
The Colors on the Web site is in itself nicely designed. The dark and medium gray background looks sleek and creates a neutral stage for the display of all those colors. The background behind the main page is a nice gradient of canvas-textured stripes in vibrant colors. These stripes enhance the message of the website in that it is obvious as soon as the page loads that it will contain information about color. The diagonal direction of the stripes also creates a nice sense of movement in an otherwise low-key design. The colored background, so as not to be too far removed from the main page, is repeated in a narrow strip at the bottom of the page; to further integrate the background and main areas the header section is translucent to allow a muted view of the colorful stripes.
A couple of minor issues with the site include the use of home and contact buttons above the main web page area. Mainly the issue is that the home button is visible, however it is more likely that users will click the logo text on the left first (I did). This is a common home link, and not having it work as such is annoying. Another issue that is actually quite significant is that upon clicking "color basics," every one of the drop-down menu color selections yields the infamous 404 message. Presumably these options are meant to link to basics about the feelings invoked by certain colors, and this is an area that would really round out the contents of this site. (Seemingly the W3C link validator is desperately needed here!) Although it can be hard to control these links (assuming they point to outside sources), periodic verification is essential to maintain the credibility of the site; right now that error message appears 11 times and I believe that is enough to drive a good portion of the site traffic elsewhere.
Beyond the flaws mentioned, Colors on the Web is still well worth checking out:
http://colorsontheweb.com/default.asp
Beyond sizing, MacDonald covers the use and creation of tables, noting the effective uses as well as cautionary notes about trying to use them for substantial layout — namely, that they are somewhat outdated. I can see the purpose for lining up elements (such as buttons in the navigation bar) but styles have sort of eclipsed more extensive uses. Divs are just more flexible for layout. The use of frames is also covered in chapter 10, mainly as a relic of web history. The notable disadvantages, such as the URL remaining the same on each page, are enough to write it out of good design practice. At first this may seem like a minor issue, however with the importance of personal and social bookmarking the inability to put a placeholder on a particular page is an extremely unpleasant hallmark of frames; users are getting increasingly impatient with unnecessary clicks and forcing them to navigate through a homepage to reach specific content is a pretty good way to drive them elsewhere.
There is obviously an arsenal of layout tools out there, but the best for maintaining design consistency is definitely the use of templates. Fortunately it is easy enough to either download a free one, or better yet, maybe create one in Dreamweaver. The point is that any sweeping changes are applied to all the pages based on the template, so changing a page element is not really a big deal. The only thing is, as MacDonald mentions, they can be fragile. I have definitely lost some content on selected pages when updating a template, and I am still not entirely sure why. Did I make sure to save a copy before updating? Of course not; I apparently like to learn things the hard way. That said, templates are great as an organizational tool.
Moving on — or back — to color, I have another website to talk about this week that generates color schemes. Colors on the Web combines some interesting features, including information on color theory and psychology, a description of hexadecimal numbers and how screens display colors, and a tool to help design color schemes. One of the simplest and yet most useful features here is the list of color names. Each name has several associated swatches, as well as a hex code for each. The question posed at the top of the page, "Do you know what color royal blue is? Or hunter green?" is a great lead-in to this list. The fact of the matter is that people rarely speak the same color language, and antique white or navy blue mean different shades to different people. This list is a great compilation of variants that could be consulted and displayed to make sure that everyone involved in a web project is on the same page. For individuals, it is just a great reminder of the names of some of those colors you can't quite accurately describe.
There are a couple of tools available on this website that help to pick color schemes. First, "spin the color wheel" is just plain fun; it randomly generates a set of background, secondary, and text colors with each spin. A more useful tool, however, is the color wizard. It has a "randomize" feature that allows a haphazard color selection, but unlike the color wheel tool it generates color schemes, such as monochromatic, triadic, and complementary, using a single selected color as the base. This generates a more harmonious selection of colors than the color wheel tool, which presents potentially garish random combinations. Additionally, you can enter a hex code to base the color schemes off a specific color; this really tailors the scheme to a desired look and proves more likely to be useful for most people. I suppose, though, that the random feature could be a good source of inspiration if your mind really is empty with regards to the desired look of a website.
This is an example of a hex code I added for a puce color and the subsequent triadic scheme that was generated with the color wizard:
The color wizard also provides a selection of tints and shades for my starting color. The combination that was generated, including the additional color values, would create a very calm and sophisticated palette for a website. Moreover, a triadic color scheme is not one that I would often turn to on my own, so the color wizard and other similar tools can be a great resource for expanding on a basic color selection.
The Colors on the Web site is in itself nicely designed. The dark and medium gray background looks sleek and creates a neutral stage for the display of all those colors. The background behind the main page is a nice gradient of canvas-textured stripes in vibrant colors. These stripes enhance the message of the website in that it is obvious as soon as the page loads that it will contain information about color. The diagonal direction of the stripes also creates a nice sense of movement in an otherwise low-key design. The colored background, so as not to be too far removed from the main page, is repeated in a narrow strip at the bottom of the page; to further integrate the background and main areas the header section is translucent to allow a muted view of the colorful stripes.
A couple of minor issues with the site include the use of home and contact buttons above the main web page area. Mainly the issue is that the home button is visible, however it is more likely that users will click the logo text on the left first (I did). This is a common home link, and not having it work as such is annoying. Another issue that is actually quite significant is that upon clicking "color basics," every one of the drop-down menu color selections yields the infamous 404 message. Presumably these options are meant to link to basics about the feelings invoked by certain colors, and this is an area that would really round out the contents of this site. (Seemingly the W3C link validator is desperately needed here!) Although it can be hard to control these links (assuming they point to outside sources), periodic verification is essential to maintain the credibility of the site; right now that error message appears 11 times and I believe that is enough to drive a good portion of the site traffic elsewhere.
Beyond the flaws mentioned, Colors on the Web is still well worth checking out:
http://colorsontheweb.com/default.asp
Saturday, October 2, 2010
4.3 Usability, IA, and blogs
The topic today is all about information architecture, universal design, and usability. Good design is about aesthetics and shiny, pretty things for sure, but if the underlying structure crumbles all the attractive features in the world can't save a non-functioning website. Great design, therefore, is a sophisticated marriage of aesthetics, innovation, and functionality.
The Web Style Guide, 3rd edition website offers a full-text version of the printed book. It is essentially what APA and Chicago are to printed style — a set of guidelines meant to enhance readability and communication. The information presented focuses on user needs and expectations, which really are the guiding force in web design. They cover elements such as organization of contents into logical categories, and perhaps most importantly, consistency in naming. They go as far as to suggest the use of controlled vocabularies, and for a large and complex website this makes perfect sense. Nothing is more confusing than seeing headings and terms used interchangeably. The website also focuses on one of the most important, but easily overlooked, issues in design which is universal usability. They point out that things like alt text tags on images are essential because they offer flexibility and information for users that can't or don't want to view the graphics on a page. Overall, the chapters cover all the basics of logical, organized structure on the web.
Nearly everything about the The Web Style Guide website fulfills their principle #3: simple and intuitive design. The slate and muted burgundy colors form a pleasant border around the white background with black text; overall, this provides a harmonious color scheme while ensuring the text is easy to read. This underscores the idea that contents should be accessible and that the design should support (and never obscure) communication. However, this might be nit-picky, but it is sort of counter-intuitive at this point for the large header text at the top of the page (essentially a logo), not to be a home button. Even though a labeled home button is placed below, the unlinked logo text seems like poor design. This would seem to me to be an illustration of how to buck user expectations, but hey, everyone is allowed one slip-up...
Check it out here:
http://webstyleguide.com/index.html
Universal Usability is another full-text book available online that deals with designing with users and function in mind. That is not to say that author Sarah Horton doesn't appreciate aesthetic design, she simply makes the point that overly flashy graphics get in the way of effective communication and ultimately users get tired and and annoyed. As an example, Universal Usability has a layout that incorporates a boxed section called "In a nutshell" that summarizes the key points of the longer text on each page and offers further reading suggestions. This area is eye-catching because it is emphasized simply by having a background that is a shade darker than the main page color. It pulls your eye to the area because there are not many competing elements (a hallmark of simplicity) and communicates valuable information. The overall design of the page echoes this simplicity with a flattering yellow and light purple complementary color scheme and black text. This website definitely exhibits everything it preaches — very clean, organized, useful pages.
One point where I have to part company with the otherwise sensible and very democratic advice of Horton is with her proclamation that graphic text should be avoided. I understand the limitations in terms of enlarging graphics for easier viewing, in which graphical text becomes pixelated and hard to read. I also understand that from a usability standpoint this might be limiting access to information. I feel, however, that used judiciously this is still an acceptable practice. Graphic text frees design from the severe limitations of current universal fonts and as long as it is used sparingly, such as for headings, I disagree that it severely limits access. For a heading, the alt text can display the heading text, making it readable or audio-accessible for users while the effective design that comes with using fancy fonts is preserved. Usability is essential, but there is a point when it is taken too far and it simply dictates boring design. Like anything else, universal usability requires balance.
Check out the Universal Usability website here:
http://universalusability.com/index.html
Jesse James Garret defines information architecture (IA) as the "structural design of the information space to facilitate intuitive access to content," and that is a good overall description that relates to the concepts we have been looking at so far. Information is no good if users have a hard time reaching and comprehending it; if the information space is disorganized users will give up looking. Garret's website gives a simple overview of the concepts of IA and interaction design. IA involves planning the organization of the content, while interaction design involves describing how users will "flow through defined tasks." Why worry about such things (especially at the level of diagrams)? Because without careful planning a website can easily become disorganized and confusing. The bottom line is that information contained in websites depends on contextual information all around it, so disorganization creates a chaotic mess that makes little sense and ultimately obscures the contents of the website.
To learn more about IA visit Jesse James Garret's website here:
http://www.jjg.net/ia/
— Smashing Magazine's 50 More Excellent Blog Designs, to be precise. The cool thing about the Smashing Magazine website is that it is designed to look pleasant but not compete with the graphics it features. The white background and minimal use of color helps here because all the screen captures of websites and blogs stand out on the page and look good, no matter how diverse their color schemes. The point of this feature article is to showcase some truly innovative blogs that really showcase the personality of the blogger. This is a difficult task, conveying a personality through a few well-placed graphics, but some of the blogs featured here are very successful. In fact, a few of the ones that caught my eye were actually quite heavy with little details, like paint tubes and brushes along the edges or photos and rulers and drawings to indicate an artistic background. These were nice touches that transcend the boxy elements on most templates. I am pretty inspired right now, and hope I have a chance to work with my blog layout a little sometime in the near future.
Check out Smashing Magazine's blog feature here:
http://www.smashingmagazine.com/2008/05/08/now-more-than-ever-50-more-excellent-blog-designs/
So, to sum up, universal access guidelines, organization, and user-friendliness are all essential aspects of great design. Functionality is key because most people won't stick around long enough to learn how to navigate a content rich but confusing site. That said, design should still be beautiful, so a good balance between innovation and style and universal accessibility is essential. Great design is neither boring nor needlessly complex. Or as John Maeda sees it, "The simplest way to achieve simplicity is through thoughtful reduction. When in doubt, just remove. But be careful of what you remove." Thoughtful reduction. Elements are beautiful, purposeful, and carefully placed; nothing essential is striped away just for the sake of simplifying. That is the essence of good design.
The Web Style Guide, 3rd edition website offers a full-text version of the printed book. It is essentially what APA and Chicago are to printed style — a set of guidelines meant to enhance readability and communication. The information presented focuses on user needs and expectations, which really are the guiding force in web design. They cover elements such as organization of contents into logical categories, and perhaps most importantly, consistency in naming. They go as far as to suggest the use of controlled vocabularies, and for a large and complex website this makes perfect sense. Nothing is more confusing than seeing headings and terms used interchangeably. The website also focuses on one of the most important, but easily overlooked, issues in design which is universal usability. They point out that things like alt text tags on images are essential because they offer flexibility and information for users that can't or don't want to view the graphics on a page. Overall, the chapters cover all the basics of logical, organized structure on the web.
Nearly everything about the The Web Style Guide website fulfills their principle #3: simple and intuitive design. The slate and muted burgundy colors form a pleasant border around the white background with black text; overall, this provides a harmonious color scheme while ensuring the text is easy to read. This underscores the idea that contents should be accessible and that the design should support (and never obscure) communication. However, this might be nit-picky, but it is sort of counter-intuitive at this point for the large header text at the top of the page (essentially a logo), not to be a home button. Even though a labeled home button is placed below, the unlinked logo text seems like poor design. This would seem to me to be an illustration of how to buck user expectations, but hey, everyone is allowed one slip-up...
Check it out here:
http://webstyleguide.com/index.html
Universal Usability is another full-text book available online that deals with designing with users and function in mind. That is not to say that author Sarah Horton doesn't appreciate aesthetic design, she simply makes the point that overly flashy graphics get in the way of effective communication and ultimately users get tired and and annoyed. As an example, Universal Usability has a layout that incorporates a boxed section called "In a nutshell" that summarizes the key points of the longer text on each page and offers further reading suggestions. This area is eye-catching because it is emphasized simply by having a background that is a shade darker than the main page color. It pulls your eye to the area because there are not many competing elements (a hallmark of simplicity) and communicates valuable information. The overall design of the page echoes this simplicity with a flattering yellow and light purple complementary color scheme and black text. This website definitely exhibits everything it preaches — very clean, organized, useful pages.
One point where I have to part company with the otherwise sensible and very democratic advice of Horton is with her proclamation that graphic text should be avoided. I understand the limitations in terms of enlarging graphics for easier viewing, in which graphical text becomes pixelated and hard to read. I also understand that from a usability standpoint this might be limiting access to information. I feel, however, that used judiciously this is still an acceptable practice. Graphic text frees design from the severe limitations of current universal fonts and as long as it is used sparingly, such as for headings, I disagree that it severely limits access. For a heading, the alt text can display the heading text, making it readable or audio-accessible for users while the effective design that comes with using fancy fonts is preserved. Usability is essential, but there is a point when it is taken too far and it simply dictates boring design. Like anything else, universal usability requires balance.
Check out the Universal Usability website here:
http://universalusability.com/index.html
Jesse James Garret defines information architecture (IA) as the "structural design of the information space to facilitate intuitive access to content," and that is a good overall description that relates to the concepts we have been looking at so far. Information is no good if users have a hard time reaching and comprehending it; if the information space is disorganized users will give up looking. Garret's website gives a simple overview of the concepts of IA and interaction design. IA involves planning the organization of the content, while interaction design involves describing how users will "flow through defined tasks." Why worry about such things (especially at the level of diagrams)? Because without careful planning a website can easily become disorganized and confusing. The bottom line is that information contained in websites depends on contextual information all around it, so disorganization creates a chaotic mess that makes little sense and ultimately obscures the contents of the website.
To learn more about IA visit Jesse James Garret's website here:
http://www.jjg.net/ia/
— Smashing Magazine's 50 More Excellent Blog Designs, to be precise. The cool thing about the Smashing Magazine website is that it is designed to look pleasant but not compete with the graphics it features. The white background and minimal use of color helps here because all the screen captures of websites and blogs stand out on the page and look good, no matter how diverse their color schemes. The point of this feature article is to showcase some truly innovative blogs that really showcase the personality of the blogger. This is a difficult task, conveying a personality through a few well-placed graphics, but some of the blogs featured here are very successful. In fact, a few of the ones that caught my eye were actually quite heavy with little details, like paint tubes and brushes along the edges or photos and rulers and drawings to indicate an artistic background. These were nice touches that transcend the boxy elements on most templates. I am pretty inspired right now, and hope I have a chance to work with my blog layout a little sometime in the near future.
Check out Smashing Magazine's blog feature here:
http://www.smashingmagazine.com/2008/05/08/now-more-than-ever-50-more-excellent-blog-designs/
So, to sum up, universal access guidelines, organization, and user-friendliness are all essential aspects of great design. Functionality is key because most people won't stick around long enough to learn how to navigate a content rich but confusing site. That said, design should still be beautiful, so a good balance between innovation and style and universal accessibility is essential. Great design is neither boring nor needlessly complex. Or as John Maeda sees it, "The simplest way to achieve simplicity is through thoughtful reduction. When in doubt, just remove. But be careful of what you remove." Thoughtful reduction. Elements are beautiful, purposeful, and carefully placed; nothing essential is striped away just for the sake of simplifying. That is the essence of good design.
Thursday, September 30, 2010
4.2 Picking apart pictures and links: A technical overview
Working through the MacDonald book, Creating a Website: The Missing Manual, has brought me to an important point in web development — images and links. After all, what would the web be without correctly functioning graphics and links to interesting content and places? With that in mind, following are some of the finer points of dealing with these elements.
MacDonald notes that images are often found all over websites and this is a significant point to note because the more graphic-heavy a website is, the more trouble slow connections will have in downloading the contents in a timely manner. Elements from fancy fonts and logos to menu buttons with rollovers are all likely to be graphic elements. Enter optimizing images for the web. This step can't be emphasized enough because even fast Internet connections can get bogged down with huge files. The basics here are that images must be sized in a photo editor, like Photoshop, to ensure they are the correct dimensions and a resolution of 72 dpi before they are inserted into a web page. They can also be compressed to varying degrees; Photoshop's "save for web and devices" is great for this purpose because it offers a preview of how much image data will be discarded as you step down the quality to reduce the file size and it displays the loading time for a dial-up connection. These features let you examine the visual and consider the timeframe in order to make the most informed decision regarding the compression of each JPEG (GIF and PNG compress less, so this feature is not relevant for those file types).
Additionally, JPEGs are generally the file type of choice for pictures while GIF files are more appropriate for logos and line art. PNG files can be used to save images with transparent areas, however they are apparently not supported by older browsers, which I interpret to mean Netscape or Internet Explorer 4; I have mixed feelings here — sure the web should be accessible to the widest audience, but I have a hard time finding good reasons to run browsers that are extremely outdated. That said, GIF files can also support transparency, so I may reconsider my file-saving practices for the time being.
MacDonald emphasizes that transparent images do not always display correctly in various web browsers, however sometimes they are just necessary. His solution to avoid transparency by making the graphic background the same color as the web background is a good one, provided you don't ever change that color or use an image instead of a plain wash. Imagine trying to grab exactly the right area of a background image to paste behind a transparent area in a graphic. It would be somewhat difficult to ensure the graphic was lined up precisely with the background in order to avoid any jogs in the image edges. Besides that, he mentions how the edges can look crummy in a transparent image, but careful image editing will avoid this problem; making sure to create exact edges around a graphic from which you are removing a white background isn't difficult in Photoshop, it simply takes a little time and patience.
This is an example of several graphics with transparency; notice the edges of the photo border and the ink splotches (both scanned) have been carefully cleaned up. The text is also a graphic, but didn't require clean-up as it was typed onto a transparent background from the start:
In reading about inserting links into the code, let me start by saying how ecstatic I am that most of this is done automatically in a program like Dreamweaver. Even down to changing the color and properties of links, CSS rules can be easily created in Dreamweaver without having to manually add the correct elements to the code. That said, it is always good to understand what is going on in the background because eventually something will break and need to be fixed by hand. One discussion of note was MacDonald's description of how to add a link that opens in a new browser tab. He rightfully points out that many people find this annoying, but that at times it is necessary. For example, if I supply a link to my blog, which is hosted on Blogger, people would have to use the back button to return my site. Obviously they may never get around to that and might therefore miss out on the contents of my site. This is also true of other links to external websites. I have been experimenting with some code from DynamicDrive.com to incorporate this feature, but after reading MacDonald's instructions for doing this I might try it his way. Basically, it involves adding a tagged to the anchor element, and the code would look something like this:
(a href="LinkedPage.html" target="_blank"> Click me
As usual, the biggest issue here is making sure all those characters are entered perfectly.
Image linked directly from thumbnail displayed in a white window:
Image linked from thumbnail and displayed as part of a page maintains consistency:
Last, MacDonald covers the importance of checking links. There is little that is more irritating than having broken links — link rot — within a site. Even one broken link in an entire website sends an awful message and users seem to be less and less forgiving of this all the time. So, a website is an investment and it is imperative that it is checked periodically to ensure that it is working. The online link checker from the W3C is a fantastic tool for this purpose. It checked my website and verified all the links in 13.8 seconds, when previously I have been manually clicking through to perform such verifications. Obviously this is a great tool to employ for periodic website checks, especially for websites that are much more complex than mine, which is only at a few pages right now.
Check out the W3C link validator here:
http://validator.w3.org/checklink
MacDonald notes that images are often found all over websites and this is a significant point to note because the more graphic-heavy a website is, the more trouble slow connections will have in downloading the contents in a timely manner. Elements from fancy fonts and logos to menu buttons with rollovers are all likely to be graphic elements. Enter optimizing images for the web. This step can't be emphasized enough because even fast Internet connections can get bogged down with huge files. The basics here are that images must be sized in a photo editor, like Photoshop, to ensure they are the correct dimensions and a resolution of 72 dpi before they are inserted into a web page. They can also be compressed to varying degrees; Photoshop's "save for web and devices" is great for this purpose because it offers a preview of how much image data will be discarded as you step down the quality to reduce the file size and it displays the loading time for a dial-up connection. These features let you examine the visual and consider the timeframe in order to make the most informed decision regarding the compression of each JPEG (GIF and PNG compress less, so this feature is not relevant for those file types).
Additionally, JPEGs are generally the file type of choice for pictures while GIF files are more appropriate for logos and line art. PNG files can be used to save images with transparent areas, however they are apparently not supported by older browsers, which I interpret to mean Netscape or Internet Explorer 4; I have mixed feelings here — sure the web should be accessible to the widest audience, but I have a hard time finding good reasons to run browsers that are extremely outdated. That said, GIF files can also support transparency, so I may reconsider my file-saving practices for the time being.
MacDonald emphasizes that transparent images do not always display correctly in various web browsers, however sometimes they are just necessary. His solution to avoid transparency by making the graphic background the same color as the web background is a good one, provided you don't ever change that color or use an image instead of a plain wash. Imagine trying to grab exactly the right area of a background image to paste behind a transparent area in a graphic. It would be somewhat difficult to ensure the graphic was lined up precisely with the background in order to avoid any jogs in the image edges. Besides that, he mentions how the edges can look crummy in a transparent image, but careful image editing will avoid this problem; making sure to create exact edges around a graphic from which you are removing a white background isn't difficult in Photoshop, it simply takes a little time and patience.
This is an example of several graphics with transparency; notice the edges of the photo border and the ink splotches (both scanned) have been carefully cleaned up. The text is also a graphic, but didn't require clean-up as it was typed onto a transparent background from the start:
In reading about inserting links into the code, let me start by saying how ecstatic I am that most of this is done automatically in a program like Dreamweaver. Even down to changing the color and properties of links, CSS rules can be easily created in Dreamweaver without having to manually add the correct elements to the code. That said, it is always good to understand what is going on in the background because eventually something will break and need to be fixed by hand. One discussion of note was MacDonald's description of how to add a link that opens in a new browser tab. He rightfully points out that many people find this annoying, but that at times it is necessary. For example, if I supply a link to my blog, which is hosted on Blogger, people would have to use the back button to return my site. Obviously they may never get around to that and might therefore miss out on the contents of my site. This is also true of other links to external websites. I have been experimenting with some code from DynamicDrive.com to incorporate this feature, but after reading MacDonald's instructions for doing this I might try it his way. Basically, it involves adding a tagged to the anchor element, and the code would look something like this:
(a href="LinkedPage.html" target="_blank"> Click me
As usual, the biggest issue here is making sure all those characters are entered perfectly.
Image linked directly from thumbnail displayed in a white window:
Image linked from thumbnail and displayed as part of a page maintains consistency:
Last, MacDonald covers the importance of checking links. There is little that is more irritating than having broken links — link rot — within a site. Even one broken link in an entire website sends an awful message and users seem to be less and less forgiving of this all the time. So, a website is an investment and it is imperative that it is checked periodically to ensure that it is working. The online link checker from the W3C is a fantastic tool for this purpose. It checked my website and verified all the links in 13.8 seconds, when previously I have been manually clicking through to perform such verifications. Obviously this is a great tool to employ for periodic website checks, especially for websites that are much more complex than mine, which is only at a few pages right now.
Check out the W3C link validator here:
http://validator.w3.org/checklink
Thursday, September 23, 2010
4.1 Color shock
Color is arguably the most significant element in any layout because it is likely the first thing users will notice and, ultimately, it will set the tone for how they perceive the contents of the work. Jason Beaird offers a good (and thankfully brief) recap of color psychology in The Principles of Beautiful Web Design-you know the stuff: white = purity, blue = calm, green = nature, and so forth. What he mentions of note here is that while people tend to have similar reactions to colors, each experience is still unique, depending a person's background, associations, and cultural factors. So, color psychology is a guiding force, not a rule, that can help designers choose colors that make sense and will likely impart the correct "feel" for the website contents or message.
Choosing colors is a little complicated, however, and can quickly become a mess. Sticking to a color scheme is a good idea, and should theoretically keep us from the tendency towards tackiness that I have mentioned before. That is, defining a palette that works should keep us from deciding that a little purple randomly placed here, a little pink over there, and a little green at the top would look nice. The key is harmony, not chaos. So, in his discussion of complementary color schemes (always a nice choice to create visual excitement) Beaird mentions discordant colors as a potential pitfall. Indeed, used poorly these close-but-not-quite complements can be difficult to look at. However, they can also create some visual excitement because they are highly contrasty but more unexpected than a true complementary pair; the key that Beaird notes is that they MUST be used sparingly.
With that in mind, I began to think of a notebook and planner combination that I carried last year-hey, inspiration comes from anywhere and everywhere. In fact, the planner was a light lime green and I was beyond excited for the calendar year to shift so that I could begin carrying it to meetings with a muted red, hand-tooled leather notebook. The combination was striking and I got more comments to that effect than I care to repeat here. Anyway, with that in mind I decided to use this concept of red-green discordant complements to see if it could work as a web color scheme. I went to the Well Styled Color Scheme Generator 3 and selected my lime green hue from the color wheel (#2CFF00, if anyone is into hexadecimal color values) and picked complement from the menu of schemes. Sure enough, it generated a selection of colors that included the too-bright exact complement, as well as the more muted red (#A60010) that pairs beautifully. Why does this work? Because the combination is unexpected and fresh, which is what good design is about. The main problem I have with straight complements is that they often scream out sports team, or in the case of bright red and green, holidays.
An important side note here is that not all color combinations work in just any configuration. Universal usability can become an issue with many colors-more, in fact, than you would think. Certain colors are just hard to read together because the contrast levels are insufficient. This is especially true for people with less than perfect eyesight, and it is worth checking the contrast levels before using poor text-background combinations. The Snook Colour Contrast Check is a good tool for this purpose because it gives you a definitive Yes or No as to whether the colors pass the W3C criteria that they provide enough of a contrast "when viewed by someone having color deficits or when viewed on a black and white screen." In this case, the answer is no.
Check out the Snook Colour Contrast Check here:
http://snook.ca/technical/colour_contrast/colour.html
Fortunately, the beauty of creating a color palette is that I'm not stuck using only my complementary colors, which I don't really want to use as a background-text combination anyway. Instead, I'll add some tints and shades to create a more rounded selection of colors that are harmonious, but will offer me other choices. In fact, Making the background white is probably a good choice to offset the intensity of my colors. That way they can lead the viewer's eye around the page without bombarding them with intensity. Simplicity is key here, and my color scheme will remain with white, black, and a few shades of red and green. The Colour Scheme Designer has another great feature that allows you to preview the look of your chosen color scheme in both light and dark versions (basically, the main color as a "dark" background or white as a "light" version of the page). In this case, while I would change some of the specific color placement, the preview gives me a great idea of how my color choices would look.
Here is my color palette with green as the predominate color on a light background webpage:
Here is the same palette displaying red as the predominate hue, also on a light background:
Check out Colour Scheme Designer here:
http://colorschemedesigner.com/
I really do like this color combination. It is bright and fun and definitely not what I normally gravitate to in design. It is possible to use these colors in a way that accents rather than overpowers, and the tools outlined here are a tremendous asset to testing and choosing the specific values that look right. That said, I am going to save this combination for another project. As Beaird notes, there are more elements to consider in a design, and I think this particular combination will wind up competing with the photographic content I plan to include in my website. Harmony of all elements is the key, and so for now my search for the perfect palette will continue on.
Choosing colors is a little complicated, however, and can quickly become a mess. Sticking to a color scheme is a good idea, and should theoretically keep us from the tendency towards tackiness that I have mentioned before. That is, defining a palette that works should keep us from deciding that a little purple randomly placed here, a little pink over there, and a little green at the top would look nice. The key is harmony, not chaos. So, in his discussion of complementary color schemes (always a nice choice to create visual excitement) Beaird mentions discordant colors as a potential pitfall. Indeed, used poorly these close-but-not-quite complements can be difficult to look at. However, they can also create some visual excitement because they are highly contrasty but more unexpected than a true complementary pair; the key that Beaird notes is that they MUST be used sparingly.
With that in mind, I began to think of a notebook and planner combination that I carried last year-hey, inspiration comes from anywhere and everywhere. In fact, the planner was a light lime green and I was beyond excited for the calendar year to shift so that I could begin carrying it to meetings with a muted red, hand-tooled leather notebook. The combination was striking and I got more comments to that effect than I care to repeat here. Anyway, with that in mind I decided to use this concept of red-green discordant complements to see if it could work as a web color scheme. I went to the Well Styled Color Scheme Generator 3 and selected my lime green hue from the color wheel (#2CFF00, if anyone is into hexadecimal color values) and picked complement from the menu of schemes. Sure enough, it generated a selection of colors that included the too-bright exact complement, as well as the more muted red (#A60010) that pairs beautifully. Why does this work? Because the combination is unexpected and fresh, which is what good design is about. The main problem I have with straight complements is that they often scream out sports team, or in the case of bright red and green, holidays.
An important side note here is that not all color combinations work in just any configuration. Universal usability can become an issue with many colors-more, in fact, than you would think. Certain colors are just hard to read together because the contrast levels are insufficient. This is especially true for people with less than perfect eyesight, and it is worth checking the contrast levels before using poor text-background combinations. The Snook Colour Contrast Check is a good tool for this purpose because it gives you a definitive Yes or No as to whether the colors pass the W3C criteria that they provide enough of a contrast "when viewed by someone having color deficits or when viewed on a black and white screen." In this case, the answer is no.
Check out the Snook Colour Contrast Check here:
http://snook.ca/technical/colour_contrast/colour.html
Fortunately, the beauty of creating a color palette is that I'm not stuck using only my complementary colors, which I don't really want to use as a background-text combination anyway. Instead, I'll add some tints and shades to create a more rounded selection of colors that are harmonious, but will offer me other choices. In fact, Making the background white is probably a good choice to offset the intensity of my colors. That way they can lead the viewer's eye around the page without bombarding them with intensity. Simplicity is key here, and my color scheme will remain with white, black, and a few shades of red and green. The Colour Scheme Designer has another great feature that allows you to preview the look of your chosen color scheme in both light and dark versions (basically, the main color as a "dark" background or white as a "light" version of the page). In this case, while I would change some of the specific color placement, the preview gives me a great idea of how my color choices would look.
Here is my color palette with green as the predominate color on a light background webpage:
Here is the same palette displaying red as the predominate hue, also on a light background:
Check out Colour Scheme Designer here:
http://colorschemedesigner.com/
I really do like this color combination. It is bright and fun and definitely not what I normally gravitate to in design. It is possible to use these colors in a way that accents rather than overpowers, and the tools outlined here are a tremendous asset to testing and choosing the specific values that look right. That said, I am going to save this combination for another project. As Beaird notes, there are more elements to consider in a design, and I think this particular combination will wind up competing with the photographic content I plan to include in my website. Harmony of all elements is the key, and so for now my search for the perfect palette will continue on.
Sunday, September 19, 2010
3.3 Numbers and trends
I've spent some time over the last couple weeks writing about web creation basics and great design examples, so today I'm going to devote a post to numbers and statistics resources related to the Internet (and statistics about nearly everything else as well). Obviously such data plays a large part in understanding web usage trends and audiences and can be important in understanding demographics in relation to design considerations.
For starters, the websites with the largest bulk of information have a three-column design. ICANN, Nielson, CAIDA, and the Pew Research Center sites all employ this format in order to squeeze a tremendous amount of data into a relatively small space. The Pew Center homepage, in particular, makes relatively good use of this design to showcase the wide diversity of trends that they track. Everything from Internet usage to the "daily number" which, today, tracks the fact that less than half of Americans feel a television is a household necessity, and yet purchases of flat screens are on the rise—how fickle we are in our opinions and actions and how useful that distinction between the two must be to retailers.
The Pew homepage does a good job of balancing the negative space with the text- and image-heavy columns but even so it takes a moment to adjust to the packed page. The use of bright banner style headers helps to organize the information and cut down on a cluttered feel, and makes it possible to present all of the latest information in one place that is relatively easy to scan. The navigation is clear and organized, which is imperative for a site that presents this volume of content. The statistics related to technology tracked by the Pew Center are especially useful because they offer some insight into who is using the Internet and for what, as well as general attitudes towards technology. This is obviously important (at least for larger organizations) in gauging what Internet services and resources will offer the biggest payoff, as well as gauging where the target audience might be. For instance, if you have a service that targets foreign-born Latinos, it would be useful to know that the Pew has discovered that "while 85% of native-born Latinos ages 16 and older go online, only about half (51%) of foreign-born Latinos do so." Obviously, exclusively Internet-based access would not be an effective means of outreach to this population.
The Pew is a great resource because all the information is well researched, socially significant, easily accessible, and free.
Check out the website here:
http://pewresearch.org/
The Internet Traffic Report is another statistical resource that is worth a look, but this time the data is all technical. Essentially, every five minutes the website updates with a fresh view of data flow around the world. Why should you care? On a large scale you can track significant issues and slowdowns in traffic that might be affecting particular geographic areas; on a smaller scale, you can investigate your own troubles in connecting to websites and determine if it is a problem with your local connection or a general slowdown in some particular region of the Internet. The website is really straightforward with no frills. It measures Internet traffic and that is what it presents. A couple cool features though, allow you to add the live stats to your webpage or to download a Windows compatible version to track the stats in real time without visiting the website (no Mac support here though, which is an issue that, albeit a common one, is still a problem).
Check out the website here:
http://www.internettrafficreport.com/
Another simple website that tracks basic stats is Internet World Stats. Just as it sounds, it offers data on Internet access numbers worldwide. What is useful here is the ability to put information in perspective. For instance, while total world Internet users are approaching 2 billion in number, the percentages according to population are telling; Africa may have almost 111 million users, but that represents only about 11% of the population. It really spotlights the reality of Internet access (and by extension information access and communication) in a global context. This data may also be useful in clarifying assumptions. For example, Asia may have over 800 million users, but that represents only 21.5% of the population; this is in contrast to common beliefs that Internet access in Asian countries is much more widespread.
Check out the website here:
http://www.internetworldstats.com/stats.htm
On a more complex note, the Cooperative Association for Internet Data Analysis (CAIDA) fills an important role in bringing together organizations, from commercial to nonprofit to government, with the goal of sharing information that can help the Internet infrastructure grow in a manageable and organized manner. This is certainly an oversimplification of the role this organization plays, however the best way to get a sense of the diversity of projects, recommendations, and theories this organization investigates is to check out the website. It has a wealth of information that is organized into easy navigation tabs-publications, research tools, data, etc. and is a great resource for scholarly research, although the diversity of papers and datasets can be overwhelming. This is definitely a repository for all Internet-related research topics imaginable.
Check out the website here:
http://www.caida.org/home/
In general the information above is enlightening, although it is more immediately useful in a scholarly context or to a large organization that needs to more carefully weigh Internet audiences and access issues (I have no illusions that thousands of people around the world will need or want to access my website). Still, all of this data helps to shed light on actual usage trends and some of the more resource intensive sites provide a lot of good information about not just audience, but the structure of the Internet as a global entity. Gaining a better understanding of this sheds a lot of light on the communication potential and currently realities of the Web.
For starters, the websites with the largest bulk of information have a three-column design. ICANN, Nielson, CAIDA, and the Pew Research Center sites all employ this format in order to squeeze a tremendous amount of data into a relatively small space. The Pew Center homepage, in particular, makes relatively good use of this design to showcase the wide diversity of trends that they track. Everything from Internet usage to the "daily number" which, today, tracks the fact that less than half of Americans feel a television is a household necessity, and yet purchases of flat screens are on the rise—how fickle we are in our opinions and actions and how useful that distinction between the two must be to retailers.
The Pew homepage does a good job of balancing the negative space with the text- and image-heavy columns but even so it takes a moment to adjust to the packed page. The use of bright banner style headers helps to organize the information and cut down on a cluttered feel, and makes it possible to present all of the latest information in one place that is relatively easy to scan. The navigation is clear and organized, which is imperative for a site that presents this volume of content. The statistics related to technology tracked by the Pew Center are especially useful because they offer some insight into who is using the Internet and for what, as well as general attitudes towards technology. This is obviously important (at least for larger organizations) in gauging what Internet services and resources will offer the biggest payoff, as well as gauging where the target audience might be. For instance, if you have a service that targets foreign-born Latinos, it would be useful to know that the Pew has discovered that "while 85% of native-born Latinos ages 16 and older go online, only about half (51%) of foreign-born Latinos do so." Obviously, exclusively Internet-based access would not be an effective means of outreach to this population.
The Pew is a great resource because all the information is well researched, socially significant, easily accessible, and free.
Check out the website here:
http://pewresearch.org/
The Internet Traffic Report is another statistical resource that is worth a look, but this time the data is all technical. Essentially, every five minutes the website updates with a fresh view of data flow around the world. Why should you care? On a large scale you can track significant issues and slowdowns in traffic that might be affecting particular geographic areas; on a smaller scale, you can investigate your own troubles in connecting to websites and determine if it is a problem with your local connection or a general slowdown in some particular region of the Internet. The website is really straightforward with no frills. It measures Internet traffic and that is what it presents. A couple cool features though, allow you to add the live stats to your webpage or to download a Windows compatible version to track the stats in real time without visiting the website (no Mac support here though, which is an issue that, albeit a common one, is still a problem).
Check out the website here:
http://www.internettrafficreport.com/
Another simple website that tracks basic stats is Internet World Stats. Just as it sounds, it offers data on Internet access numbers worldwide. What is useful here is the ability to put information in perspective. For instance, while total world Internet users are approaching 2 billion in number, the percentages according to population are telling; Africa may have almost 111 million users, but that represents only about 11% of the population. It really spotlights the reality of Internet access (and by extension information access and communication) in a global context. This data may also be useful in clarifying assumptions. For example, Asia may have over 800 million users, but that represents only 21.5% of the population; this is in contrast to common beliefs that Internet access in Asian countries is much more widespread.
Check out the website here:
http://www.internetworldstats.com/stats.htm
On a more complex note, the Cooperative Association for Internet Data Analysis (CAIDA) fills an important role in bringing together organizations, from commercial to nonprofit to government, with the goal of sharing information that can help the Internet infrastructure grow in a manageable and organized manner. This is certainly an oversimplification of the role this organization plays, however the best way to get a sense of the diversity of projects, recommendations, and theories this organization investigates is to check out the website. It has a wealth of information that is organized into easy navigation tabs-publications, research tools, data, etc. and is a great resource for scholarly research, although the diversity of papers and datasets can be overwhelming. This is definitely a repository for all Internet-related research topics imaginable.
Check out the website here:
http://www.caida.org/home/
In general the information above is enlightening, although it is more immediately useful in a scholarly context or to a large organization that needs to more carefully weigh Internet audiences and access issues (I have no illusions that thousands of people around the world will need or want to access my website). Still, all of this data helps to shed light on actual usage trends and some of the more resource intensive sites provide a lot of good information about not just audience, but the structure of the Internet as a global entity. Gaining a better understanding of this sheds a lot of light on the communication potential and currently realities of the Web.
Wednesday, September 15, 2010
3.2 Layout
"Good design transcends technology."
- Jason Beaird, The Principles of Beautiful Web Design
The first chapter of The Principles of Beautiful Web Design is a testament to the idea that design is about communication, and that effective communication is both easy to use and understand, as well as aesthetically pleasing. Beaird gives an always-timely review of the principles of art and includes commentary and illustrations of how these principles can be applied effectively to web design layouts. In general the book is laid out with good design in mind, underscoring that the principles covered are universal, transcending both web and print materials. The cover of the book in itself showcases good design by exhibiting unity in the choice of of complementary text colors, which mirror the logo colors. It also utilizes proximity in the close clustering of the paper cranes in order to have the three items appear as a single group, as well as repetition of the folded paper shapes; asymmetrical balance is evident in the large size of the main title block relative to the smaller cranes, which carry equal weight because they are repeated in a cluster.
Perhaps more importantly, the cover exhibits layout according to the classic rule of thirds, which Beaird explains extensively in chapter one. The paper cranes occupy roughly 2/3 of the space from left to right on the bottom half of the page while the title block occupies roughly 2/3 of the space from right to left on the top half of the page. The remaining third of the page in each area is left as negative space, which helps the overall design breathe and focuses attention on the contents of the positive spaces.
So why the rule of thirds? Because it is a good rule of thumb for producing harmonious layouts. For example, take this quick scribble from my sketchbook:
Even though it is only a compilation of crossing lines, it has more visual interest on the page because it follows the rule of thirds. The two straight lines at the left-hand side of the page show a rough division into thirds. Notice that the bulk of the drawing appears in the top 2/3 of the page; additionally the densest area of lines is concentrated in the middle third of the page while the lines in the top 1/3 are bolder, but used sparingly.
Applying this to web design, here is a basic layout for the main content and navigation areas of my site using the rule of thirds:
Obviously, the gray box represents the area where the appropriate content would appear. Notice that this box occupies roughly 2/3 of the area from the right edge of the page. The remaining 1/3 of the page is left as negative space to help balance the content area. The logo takes up 1/3 of the horizontal space at the top of the page. Of course, while the design is harmonious, it is not the most dynamic layout ever. I will definitely go back and play with the page elements to see if I get something a little more exciting. The rule of thirds, after all, is a guiding layout formula but it isn't intended to lock design into blocks, per se. Visual elements that occupy certain spaces and land at certain points (like eyes or text hitting on a "third" grid marking, for instance) hold more weight because our eyes are naturally drawn to those areas, but this isn't a hard and fast rule. Playing with the placement of some elements while keeping others along the main grid lines should help create a harmonious and simultaneously engaging design. We'll see...
- Jason Beaird, The Principles of Beautiful Web Design
The first chapter of The Principles of Beautiful Web Design is a testament to the idea that design is about communication, and that effective communication is both easy to use and understand, as well as aesthetically pleasing. Beaird gives an always-timely review of the principles of art and includes commentary and illustrations of how these principles can be applied effectively to web design layouts. In general the book is laid out with good design in mind, underscoring that the principles covered are universal, transcending both web and print materials. The cover of the book in itself showcases good design by exhibiting unity in the choice of of complementary text colors, which mirror the logo colors. It also utilizes proximity in the close clustering of the paper cranes in order to have the three items appear as a single group, as well as repetition of the folded paper shapes; asymmetrical balance is evident in the large size of the main title block relative to the smaller cranes, which carry equal weight because they are repeated in a cluster.
Perhaps more importantly, the cover exhibits layout according to the classic rule of thirds, which Beaird explains extensively in chapter one. The paper cranes occupy roughly 2/3 of the space from left to right on the bottom half of the page while the title block occupies roughly 2/3 of the space from right to left on the top half of the page. The remaining third of the page in each area is left as negative space, which helps the overall design breathe and focuses attention on the contents of the positive spaces.
So why the rule of thirds? Because it is a good rule of thumb for producing harmonious layouts. For example, take this quick scribble from my sketchbook:
Even though it is only a compilation of crossing lines, it has more visual interest on the page because it follows the rule of thirds. The two straight lines at the left-hand side of the page show a rough division into thirds. Notice that the bulk of the drawing appears in the top 2/3 of the page; additionally the densest area of lines is concentrated in the middle third of the page while the lines in the top 1/3 are bolder, but used sparingly.
Applying this to web design, here is a basic layout for the main content and navigation areas of my site using the rule of thirds:
Obviously, the gray box represents the area where the appropriate content would appear. Notice that this box occupies roughly 2/3 of the area from the right edge of the page. The remaining 1/3 of the page is left as negative space to help balance the content area. The logo takes up 1/3 of the horizontal space at the top of the page. Of course, while the design is harmonious, it is not the most dynamic layout ever. I will definitely go back and play with the page elements to see if I get something a little more exciting. The rule of thirds, after all, is a guiding layout formula but it isn't intended to lock design into blocks, per se. Visual elements that occupy certain spaces and land at certain points (like eyes or text hitting on a "third" grid marking, for instance) hold more weight because our eyes are naturally drawn to those areas, but this isn't a hard and fast rule. Playing with the placement of some elements while keeping others along the main grid lines should help create a harmonious and simultaneously engaging design. We'll see...
Monday, September 13, 2010
3.1 Cascading style sheets and coding by hand a little more
Every keystroke matters. One thing coding by hand does is eliminate laziness. Even one forgotten bracket or letter can make a page display wrong. Cases in point: I just spent several minutes figuring out why I inadvertently managed to change all the text into a headline format. The culprit? I forgot the slash in the closing tag. I also managed to lose my image, but fortunately realized quickly that I simply accidentally moved the image into a different folder while reorganizing files. And more disturbingly, I typed test/css instead of text/css into the style sheet link because the title was close to the file name test.css; that one took me a surprisingly long time to locate. These problems were easy enough to fix, but the point is that everything related to web design and coding requires extra attention and care. Any misstep adds a lot of time spent trying to locate the problem.
Matthew MacDonald does a good job in chapter six of explaining the value of using style sheets to control the look of webpages. In fact, he breaks down the distinction between savvy web editing and clunky code into using style sheets or not. Basically, in the best design scenarios the XHTML document defines only structural elements of the page, such as what is a header while the style sheet defines all the formatting rules, such as font colors and styles that make the page unique. A browser grabs the style sheet along with the web pages and applies the rules consistently. Here is my simple page from an earlier blog, created using TextEdit. The style sheet was also created in TextEdit and shows how adding a link to the header code of the webpage file impacted the look of that page:
The "h1" designates that the style rule applies to level one headings, which you see below in the brown, centered, italic heading:
Now the real magic, of course, has to do with overall application. All kinds of rules can be applied to the external style sheet that will govern elements such as the look of different areas of text, colors, spacing, and so forth. When the style sheet is applied to a multipage website it helps to add consistency to the overall site. It is also possible to embed style sheet directions into the XHTML code by way of inline style. As MacDonald points out, however, this creates a bulky line of code and if you wanted to change multiple elements on various pages, you would have to apply this method to each instance where you wanted that change to occur—obviously a time consuming endeavor. Overall, it is very clear why CSS is useful and since it is even easier to apply within a program like Dreamweaver than it is to code it by hand, it is a powerful tool for managing the look of a website.
Matthew MacDonald does a good job in chapter six of explaining the value of using style sheets to control the look of webpages. In fact, he breaks down the distinction between savvy web editing and clunky code into using style sheets or not. Basically, in the best design scenarios the XHTML document defines only structural elements of the page, such as what is a header while the style sheet defines all the formatting rules, such as font colors and styles that make the page unique. A browser grabs the style sheet along with the web pages and applies the rules consistently. Here is my simple page from an earlier blog, created using TextEdit. The style sheet was also created in TextEdit and shows how adding a link to the header code of the webpage file impacted the look of that page:
The "h1" designates that the style rule applies to level one headings, which you see below in the brown, centered, italic heading:
Now the real magic, of course, has to do with overall application. All kinds of rules can be applied to the external style sheet that will govern elements such as the look of different areas of text, colors, spacing, and so forth. When the style sheet is applied to a multipage website it helps to add consistency to the overall site. It is also possible to embed style sheet directions into the XHTML code by way of inline style. As MacDonald points out, however, this creates a bulky line of code and if you wanted to change multiple elements on various pages, you would have to apply this method to each instance where you wanted that change to occur—obviously a time consuming endeavor. Overall, it is very clear why CSS is useful and since it is even easier to apply within a program like Dreamweaver than it is to code it by hand, it is a powerful tool for managing the look of a website.
Saturday, September 11, 2010
2.4 Basics
It's worth noting here that while code is infinitely fixable, it isn't always fun to try. Every character has a function and the MacDonald text offers the timely reminder that while while browsers may be capable of fixing forward slash/backslash confusion, such an error in coding can prevent page elements from displaying. The mantra here is don't get lazy with your typing—it really does matter.
Chapters three and four of MacDonald's Creating a Web Site offer a practical overview of hosting-related topics and tools for authoring a webpage and deserve a little attention here. While I already have a web host (GoDaddy) and a domain name (the ever popular www.myname.com format), reading about the components of how this stuff works behind the scenes was, dare I say, really interesting. For starters, I didn't realize that a browser actually goes onto the web and grabs the IP address from the DNS catalog (Domain Name Service) in order to decipher a domain name like www.rebecca-fitzsimmons.com; I also didn't realize that each computer on the web has a unique IP address. On a side note, this knowledge is awesome because now I am starting to understand all the tech speak in discussion forums on justin.tv that revolves around how a banned user—like one that has a channel streaming copyrighted animated Batman or X-Men episodes—makes it back online at that site. They apparently work around the system identifying them by acquiring a different IP address through a proxy. Anyway, in general understanding the routes that information travels is helpful in wrapping my mind around how computers communicate over the Internet.
Moving on to domain names, according to MacDonald I have committed one of the cardinal sins of choosing a domain name—I have used a dash. My choice was rebecca-fitzsimmons.com as opposed to rebeccafitzsimmons.com because it is easier to read. I understand his rational that people get confused by dashes and forget them or think they are underscores, however I also think that we must be close to getting over that confusion. Is it really that difficult to find the correct key on the keyboard? I have to have more faith in people than to think they would give up over these kinds of typing setbacks. That said, I stand to lose very little if someone abandons an attempt to access my personal website; if I were running a business site I would take his advice to heart and pick an easier to type version. As for his other recommendations, he rightly points out that picking an odd domain like .biz or .net is a bad idea. I had this same conversation the other day with my aunt when she asked me if she should select tastetheworld.biz or tastetheworld.info for her web storefront since the .com version was unavailable. I don't think I would be wrong in assuming that most people are unaware that these domains even exist. Instead, I told her to pick a close name with a .com, like MacDonald champions, and she went with tastetheworldonline.com; not the loveliest title ever, but at least people will be more likely to find the site.
For web hosting, I have found GoDaddy to be a good service, and MacDonald lists it in his suggestions. There is a range of plans and the basic hosting is cheap and more than sufficient in terms of features. Beyond paid service, though, MacDonald does cover free hosting services; the most notable features here are the insurmountable issues that can crop up, from ad banners and content limits to lack of FTP support and lots of down time or slow loading that can make your site seem non-functional. Enough said— paid web hosting seems well worth it just have a modicum of control and consistency.
For web creation tools I own Dreamweaver, but I still like knowing about the freeware versions of products out there. I had no idea that Nvu was last released as KompoZer, but I do know that I have seen some techies with cool websites detail the creation tools they used on the site, and I see KompoZer mentioned rather frequently. This seems like a good endorsement to me, plus there is definitely a cool factor involved in creating something amazing using just freeware and coding knowledge. Maybe one day I can aspire to that. In the interim, Dreamweaver works just fine.
I was interested to see that MacDonald was able to explain the basics of creating a webpage in four separate editors simultaneously. Of course, I suppose as more people seek out both free and paid software it makes sense that a lot of the features would work the same and be located in intuitive places in the toolbars and menus. That level of standardization is definitely a plus, especially if you have to work back and forth with different programs (like at home and at work, which is usually annoying). Anyway, that's all I need to say here about hosting and creation tools. MacDonald breaks it all down and provides a great overview for anyone that needs pointers on getting started. Now, moving on to more complex matters. . .
Chapters three and four of MacDonald's Creating a Web Site offer a practical overview of hosting-related topics and tools for authoring a webpage and deserve a little attention here. While I already have a web host (GoDaddy) and a domain name (the ever popular www.myname.com format), reading about the components of how this stuff works behind the scenes was, dare I say, really interesting. For starters, I didn't realize that a browser actually goes onto the web and grabs the IP address from the DNS catalog (Domain Name Service) in order to decipher a domain name like www.rebecca-fitzsimmons.com; I also didn't realize that each computer on the web has a unique IP address. On a side note, this knowledge is awesome because now I am starting to understand all the tech speak in discussion forums on justin.tv that revolves around how a banned user—like one that has a channel streaming copyrighted animated Batman or X-Men episodes—makes it back online at that site. They apparently work around the system identifying them by acquiring a different IP address through a proxy. Anyway, in general understanding the routes that information travels is helpful in wrapping my mind around how computers communicate over the Internet.
Moving on to domain names, according to MacDonald I have committed one of the cardinal sins of choosing a domain name—I have used a dash. My choice was rebecca-fitzsimmons.com as opposed to rebeccafitzsimmons.com because it is easier to read. I understand his rational that people get confused by dashes and forget them or think they are underscores, however I also think that we must be close to getting over that confusion. Is it really that difficult to find the correct key on the keyboard? I have to have more faith in people than to think they would give up over these kinds of typing setbacks. That said, I stand to lose very little if someone abandons an attempt to access my personal website; if I were running a business site I would take his advice to heart and pick an easier to type version. As for his other recommendations, he rightly points out that picking an odd domain like .biz or .net is a bad idea. I had this same conversation the other day with my aunt when she asked me if she should select tastetheworld.biz or tastetheworld.info for her web storefront since the .com version was unavailable. I don't think I would be wrong in assuming that most people are unaware that these domains even exist. Instead, I told her to pick a close name with a .com, like MacDonald champions, and she went with tastetheworldonline.com; not the loveliest title ever, but at least people will be more likely to find the site.
For web hosting, I have found GoDaddy to be a good service, and MacDonald lists it in his suggestions. There is a range of plans and the basic hosting is cheap and more than sufficient in terms of features. Beyond paid service, though, MacDonald does cover free hosting services; the most notable features here are the insurmountable issues that can crop up, from ad banners and content limits to lack of FTP support and lots of down time or slow loading that can make your site seem non-functional. Enough said— paid web hosting seems well worth it just have a modicum of control and consistency.
For web creation tools I own Dreamweaver, but I still like knowing about the freeware versions of products out there. I had no idea that Nvu was last released as KompoZer, but I do know that I have seen some techies with cool websites detail the creation tools they used on the site, and I see KompoZer mentioned rather frequently. This seems like a good endorsement to me, plus there is definitely a cool factor involved in creating something amazing using just freeware and coding knowledge. Maybe one day I can aspire to that. In the interim, Dreamweaver works just fine.
I was interested to see that MacDonald was able to explain the basics of creating a webpage in four separate editors simultaneously. Of course, I suppose as more people seek out both free and paid software it makes sense that a lot of the features would work the same and be located in intuitive places in the toolbars and menus. That level of standardization is definitely a plus, especially if you have to work back and forth with different programs (like at home and at work, which is usually annoying). Anyway, that's all I need to say here about hosting and creation tools. MacDonald breaks it all down and provides a great overview for anyone that needs pointers on getting started. Now, moving on to more complex matters. . .
2.3 My foray into grasping code
In my last posting I mentioned that the World Wide Web Consortium (W3C) has outlined and continues to update all kinds of standards related to the web; here is a perfect example:
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
This line of code (a document type definition [DTD] or doctype) at the beginning of a webpage tells the browser what standard was used to write the page. In the absence of this code the browser will just assume the whole page is written in the older HTML language, which can pose problems when it comes to proper rendering of the page. The particular line of code above conveys the message that XHTML 1.0 standards have been used, with the "strict" meaning that 1.0 has been followed to a T and no HTML elements are present. This is essentially the gold standard in web design because HTML is being phased out. XHTML 1.0 "transitional" allows some HTML elements to be used in the coding, and inclusion of "transitional" in the code clues in the browser. According to Matthew MacDonald in Creating a Web Site: The Missing Manual, the strict version of XHTML is now the most commonly used; I checked out the code on a few different websites using the page source view, and sure enough, while I found examples of the other types, strict was by far the most common version in use.
Interestingly, however, I did notice that all the pages I've created in Dreamweaver were automatically coded using XHTML 1.0 transitional (although there may be a setting somewhere that I haven't found that changes this automatically). This default suggests we aren't quite at the tipping point where HTML elements are so uncommon and cumbersome as to disappear. In fact, MacDonald points out that there is already an XHTML 2 standard that, when finished, will completely break ties with HTML. But while W3C is ready to take the next step, finally cutting ties with an old and enduring language is a little more daunting to browser software companies. In response, a competing standard is being developed (X/HTML 5) that preserves compatibility with HTML. So, we'll see who wins out because this is a pretty big step; the battle between competing technologies and standards is timeless though. Think Beta and VHS or Blu-ray and HD DVD—epic battles. For a techno war that is even a little more current, Gene Steinberg of TechNightOwl suggests that, "Apple wants to purge Flash from the online world," and is taking steps to exclude support from popular devices like iPhones and iPads. He adds that, "as the installed base of people who can’t view Flash content grows, it’s only a matter of time before more and more sites decide to drop it and use other methods that are compatible with all or most browsers." The forward march of technology standards and supports never ends… So, we'll see if the W3C wins out sooner rather than later on the XHTML standards front.
Check out the rest of Steinberg's Apple-Flash article here:
http://www.technightowl.com/2010/02/apples-not-so-secret-plot-to-change-technology-standards/
Moving on to the nuts and bolts of code, here is my first webpage created the old school way using TextEdit (with no Dreamweaver automatic code in sight!). Delving into tags and elements is actually extremely useful since eventually you have to look at the code—even in a WYSIWYG program. Besides, learning why you can't just type along and add line breaks without coding them is priceless (like a reality check that the spacing on your computer will not look the same on all others, and that you are not the center of the web universe).
This is the result of my use of italic, bold, and image tags in a basic page (without ANY extras, like meta tags). Still, it is pretty cool to see how this looks as code and in the display:
In the past I have enjoyed checking out the coding behind various web pages, although a lot of it reads like a foreign language. This little exercise has been surprisingly enlightening in terms of how various tags work. Perhaps more importantly, however, this activity and the MacDonald text have driven home the notion that code is dynamic and pliable, and while it might take a little time and work, any error can be found and eliminated with a little deleting and typing. Kind of a liberating idea.
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
This line of code (a document type definition [DTD] or doctype) at the beginning of a webpage tells the browser what standard was used to write the page. In the absence of this code the browser will just assume the whole page is written in the older HTML language, which can pose problems when it comes to proper rendering of the page. The particular line of code above conveys the message that XHTML 1.0 standards have been used, with the "strict" meaning that 1.0 has been followed to a T and no HTML elements are present. This is essentially the gold standard in web design because HTML is being phased out. XHTML 1.0 "transitional" allows some HTML elements to be used in the coding, and inclusion of "transitional" in the code clues in the browser. According to Matthew MacDonald in Creating a Web Site: The Missing Manual, the strict version of XHTML is now the most commonly used; I checked out the code on a few different websites using the page source view, and sure enough, while I found examples of the other types, strict was by far the most common version in use.
Interestingly, however, I did notice that all the pages I've created in Dreamweaver were automatically coded using XHTML 1.0 transitional (although there may be a setting somewhere that I haven't found that changes this automatically). This default suggests we aren't quite at the tipping point where HTML elements are so uncommon and cumbersome as to disappear. In fact, MacDonald points out that there is already an XHTML 2 standard that, when finished, will completely break ties with HTML. But while W3C is ready to take the next step, finally cutting ties with an old and enduring language is a little more daunting to browser software companies. In response, a competing standard is being developed (X/HTML 5) that preserves compatibility with HTML. So, we'll see who wins out because this is a pretty big step; the battle between competing technologies and standards is timeless though. Think Beta and VHS or Blu-ray and HD DVD—epic battles. For a techno war that is even a little more current, Gene Steinberg of TechNightOwl suggests that, "Apple wants to purge Flash from the online world," and is taking steps to exclude support from popular devices like iPhones and iPads. He adds that, "as the installed base of people who can’t view Flash content grows, it’s only a matter of time before more and more sites decide to drop it and use other methods that are compatible with all or most browsers." The forward march of technology standards and supports never ends… So, we'll see if the W3C wins out sooner rather than later on the XHTML standards front.
Check out the rest of Steinberg's Apple-Flash article here:
http://www.technightowl.com/2010/02/apples-not-so-secret-plot-to-change-technology-standards/
Moving on to the nuts and bolts of code, here is my first webpage created the old school way using TextEdit (with no Dreamweaver automatic code in sight!). Delving into tags and elements is actually extremely useful since eventually you have to look at the code—even in a WYSIWYG program. Besides, learning why you can't just type along and add line breaks without coding them is priceless (like a reality check that the spacing on your computer will not look the same on all others, and that you are not the center of the web universe).
This is the result of my use of italic, bold, and image tags in a basic page (without ANY extras, like meta tags). Still, it is pretty cool to see how this looks as code and in the display:
In the past I have enjoyed checking out the coding behind various web pages, although a lot of it reads like a foreign language. This little exercise has been surprisingly enlightening in terms of how various tags work. Perhaps more importantly, however, this activity and the MacDonald text have driven home the notion that code is dynamic and pliable, and while it might take a little time and work, any error can be found and eliminated with a little deleting and typing. Kind of a liberating idea.
Thursday, September 9, 2010
2.2 Great reminders about usage (a.k.a. channeling simplicity and usability)
In reading chapter two of Matthew MacDonald's Creating a Web Site: The Missing Manual, I got a good reminder about all the different elements that must combine to make up a successful site, ranging from basic pages and hyperlinks to fancy extras such as animations and decorative buttons. However, the most important point made here is perhaps the most difficult to follow: Keep it simple.
I am unsure why humans tend towards tackiness in design when given the chance. I have mentioned several times that I prefer the look of clean, open design and yet when I do a print layout I initially tend to add more items than necessary; I also get sucked into all the different possibilities when confronted with animation and multimedia capabilities. (We are almost all dazzled by eye candy.) A significant step in my design process then becomes paring down elements. I know I am not alone in this because I have read over and again in design literature that if something doesn't serve a purpose it probably functions as excess. MacDonald further points out that too much glitz isn't just poor quality from a graphic standpoint, but that a lot of extra nonfunctional elements can actually alienate your viewers. This is a powerful message.
Beyond the look of a website, simplicity can also equate to better functionality. MacDonald focuses on consistency as an important element in helping users to understand the logic of a website. This is so important and yet so easy to overlook when you get caught up in your own thought processes. Single navigation bars, similar headings and page structures are essential to adding unity to the design, as well as to helping users navigate with ease. The Internet has made information available at a click, and it has also made us more impatient and less willing to look around. If the structure doesn't immediately make sense many people will leave the site; all the carefully crafted contents in the world don't matter if nobody sticks around to view them. That said, simple and elegant navigation and design does not have to mean simplistic. A beautiful website that takes a few clicks to understand is fine, as long as the navigation is then consistent within the site.
In talking about simplicity, it is important to mention standardization as well. The W3C (World Wide Web Consortium) is a group dedicated to developing protocols and guidelines that help to create high quality standards for the web, mostly dealing with web technologies. This is important for ensuring widespread access to contents. For example, the W3C is constantly seeking to address discrepancies in how websites are displayed by various browsers. Of course, complying with certain standards on the designers end can only help make pages accessible and functional to the widest audience, which is an obvious goal of putting information on the Internet in the first place. The website for the W3C is a great resource for learning more about web standards and updates to those standards, all of which are clearly explained. For example, the recommendation on Cascading Style Sheets reads:
Check out the websites here:
http://www.w3.org/
http://www.w3schools.com/html/default.asp
So, the conclusion I've drawn here is that it is essential to remember to keep user needs and compatibility issues at the forefront of your design concerns and to remember to keep things simple and elegant so that your message can come through.
I am unsure why humans tend towards tackiness in design when given the chance. I have mentioned several times that I prefer the look of clean, open design and yet when I do a print layout I initially tend to add more items than necessary; I also get sucked into all the different possibilities when confronted with animation and multimedia capabilities. (We are almost all dazzled by eye candy.) A significant step in my design process then becomes paring down elements. I know I am not alone in this because I have read over and again in design literature that if something doesn't serve a purpose it probably functions as excess. MacDonald further points out that too much glitz isn't just poor quality from a graphic standpoint, but that a lot of extra nonfunctional elements can actually alienate your viewers. This is a powerful message.
Beyond the look of a website, simplicity can also equate to better functionality. MacDonald focuses on consistency as an important element in helping users to understand the logic of a website. This is so important and yet so easy to overlook when you get caught up in your own thought processes. Single navigation bars, similar headings and page structures are essential to adding unity to the design, as well as to helping users navigate with ease. The Internet has made information available at a click, and it has also made us more impatient and less willing to look around. If the structure doesn't immediately make sense many people will leave the site; all the carefully crafted contents in the world don't matter if nobody sticks around to view them. That said, simple and elegant navigation and design does not have to mean simplistic. A beautiful website that takes a few clicks to understand is fine, as long as the navigation is then consistent within the site.
In talking about simplicity, it is important to mention standardization as well. The W3C (World Wide Web Consortium) is a group dedicated to developing protocols and guidelines that help to create high quality standards for the web, mostly dealing with web technologies. This is important for ensuring widespread access to contents. For example, the W3C is constantly seeking to address discrepancies in how websites are displayed by various browsers. Of course, complying with certain standards on the designers end can only help make pages accessible and functional to the widest audience, which is an obvious goal of putting information on the Internet in the first place. The website for the W3C is a great resource for learning more about web standards and updates to those standards, all of which are clearly explained. For example, the recommendation on Cascading Style Sheets reads:
2.1.3.4 CSS – Cascading Style SheetsEven if you aren't as interested in keeping up with the latest recommendations, the W3C website is a great place to learn some of the language associated with web design. They are in the process of adding an extensive number of pages that define terms such as HTML or internationalization. Each page follows a template that offers a basic definition, examples, links to learn more about the topic, and information on the status of W3C activities related to the topic. This information is written in an accessible form and seeks to bring much-needed simplification to the techno-jargon associated with web design. This is an incredibly useful and extensive resource, and the tutorials offered through the W3C schools help solidify this terminology into practice.
Cascading Style Sheets (CSS) is a mechanism for changing the appearance of HTML or XML elements, by assigning styles to element types, self-defined classes of elements or individual instances.
Stylesheets can be used to consistently define the appearance of an entire site. Following the introduction of CSS, the W3C recommended that layout-specific features in HTML be phased out and replaced by stylesheets, creating a simpler and more structural World Wide Web.
Check out the websites here:
http://www.w3.org/
http://www.w3schools.com/html/default.asp
So, the conclusion I've drawn here is that it is essential to remember to keep user needs and compatibility issues at the forefront of your design concerns and to remember to keep things simple and elegant so that your message can come through.
Wednesday, September 8, 2010
2.1 The search is on
I have ventured into the world of free CSS templates and layouts this week. (CSS, for anyone not familiar with the tech shorthand, stands for cascading style sheets.) The main thing I adore about the Internet is how freely people share resources with one another. From tutorials and fonts to free graphics and web layouts, the world is awash with customizable designs and resources. Free CSS, for example, is a website that includes 120 pages of free CSS templates in all kinds of layouts and color schemes. Since these templates are customizable, it should be easy to benefit from the built-in navigation bars and page elements while still tailoring the look and feel of the page to my personal tastes. In the past I have created templates from scratch, but there is no doubt that a pre-made template will help streamline the process.
I have not found the right template yet, however I have ruled out certain overarching design choices. I like clean design and open—but purposeful—space on a web page. Purposeful space means it helps to create an airy feeling without looking like something belongs there; for an example of non-purposeful space look at the Free CSS website in the area beneath the social network buttons. The empty white box with a gray outline looks like it should have a graphic or some other content appear upon rollover. In fact, I wondered for a while if my browser was simply not displaying some content and I found myself annoyed at having to scroll down the page (on every page) past the empty block in order to see the menu of style sheets. This was a really bad design choice.
Speaking of clean design choices and appropriate use of space, any page with too many separate elements placed near one another usually looks like a jumble. Most of the templates that utilize a three-column structure in the body of the page function this way. The long skinny columns and differing content jammed onto a single page usually creates visual clutter. I much prefer a top navigational structure, perhaps some sub-navigation buttons on the side, and one or two main areas in the body for content.
For example, a great template on Free CSS is Busy, by lhoylhoy:
I am also not a fan of an extremely busy background behind the page area. Most of the great web design I have seen uses either a solid color that relates to the page color scheme or a relatively simple background texture.
Check out Free CSS here:
www.free-css.com/
I have also been considering color choices for my web page and have been experimenting with Adobe's free Kuler website. This site allows users to browse public themes as well as create and share unique color schemes. The schemes can be downloaded for use in design work. What I love about this site is that you can upload an image and create a color scheme based on that image. An automatic generator will pick dark, medium, and light values from the image and compile them into a swatch. This swatch can be further customized by selecting a hue and clicking elsewhere in the picture to change that particular element. This provides a great way to create a color palette for a web page that ties into the background image in order to unify the design.
I am leaning towards a more subtle, earthy palette, as seen below, in Beachy and Prairie scribbles, but also tried out something bolder with Post it, just to keep my options open. I also made each color profile available for public download because I love that I can contribute to the spectrum of free resources out there.
Beachy:
Prairie scribbles:
Post it:
So far Prairie scribbles is my favorite, but I intend to keep trying out other schemes until I find the best one to complement the contents of the site I am putting together, which might mean something a little more neutral (maybe the ever popular black, white, and charcoal).
Check out Kuler here:
www.kuler.adobe.com/#
I have not found the right template yet, however I have ruled out certain overarching design choices. I like clean design and open—but purposeful—space on a web page. Purposeful space means it helps to create an airy feeling without looking like something belongs there; for an example of non-purposeful space look at the Free CSS website in the area beneath the social network buttons. The empty white box with a gray outline looks like it should have a graphic or some other content appear upon rollover. In fact, I wondered for a while if my browser was simply not displaying some content and I found myself annoyed at having to scroll down the page (on every page) past the empty block in order to see the menu of style sheets. This was a really bad design choice.
Speaking of clean design choices and appropriate use of space, any page with too many separate elements placed near one another usually looks like a jumble. Most of the templates that utilize a three-column structure in the body of the page function this way. The long skinny columns and differing content jammed onto a single page usually creates visual clutter. I much prefer a top navigational structure, perhaps some sub-navigation buttons on the side, and one or two main areas in the body for content.
For example, a great template on Free CSS is Busy, by lhoylhoy:
I am also not a fan of an extremely busy background behind the page area. Most of the great web design I have seen uses either a solid color that relates to the page color scheme or a relatively simple background texture.
Check out Free CSS here:
www.free-css.com/
I have also been considering color choices for my web page and have been experimenting with Adobe's free Kuler website. This site allows users to browse public themes as well as create and share unique color schemes. The schemes can be downloaded for use in design work. What I love about this site is that you can upload an image and create a color scheme based on that image. An automatic generator will pick dark, medium, and light values from the image and compile them into a swatch. This swatch can be further customized by selecting a hue and clicking elsewhere in the picture to change that particular element. This provides a great way to create a color palette for a web page that ties into the background image in order to unify the design.
I am leaning towards a more subtle, earthy palette, as seen below, in Beachy and Prairie scribbles, but also tried out something bolder with Post it, just to keep my options open. I also made each color profile available for public download because I love that I can contribute to the spectrum of free resources out there.
Beachy:
Prairie scribbles:
Post it:
So far Prairie scribbles is my favorite, but I intend to keep trying out other schemes until I find the best one to complement the contents of the site I am putting together, which might mean something a little more neutral (maybe the ever popular black, white, and charcoal).
Check out Kuler here:
www.kuler.adobe.com/#
Wednesday, September 1, 2010
1.3 And a few more websites for the week
A couple more websites were assigned for review during week one, and they actually both yielded some exciting finds elsewhere on the web. First of all, Websites That Suck is an aptly named site that seeks to teach quality web design by exposing people to the REALLY awful stuff that is out there. Truly, it is amazing how tacky people become when they are confronted with flashing, bobbing, swirling, rotating graphic possibilities. Seriously, just because you can animate something and add twenty colors, it doesn’t mean you should. One of the terrific resources available at Websites That Suck is the checklist of fatal web mistakes—make any one and the site is a flop—and the checklist of potentially fatal mistakes which, when made en masse, also spell the end. I have to say, though, I disagree with these items from the latter list:
Beyond that, Websites That Suck is an all right page. It is certainly not pretty, but it does the functional job of showcasing the egregious designs out there. I believe it is meant to showcase some poor design choices itself, but honestly, it can’t even come close to the bad design it features on external sites. Given that, I would rather see a beautiful, sleek design dedicated to displaying the horrors out there. The juxtaposition of good and bad would make the point stronger
Check it out here:
http://www.webpagesthatsuck.com
Speaking of bad design choices, the real treasure that emerged from Websites That Suck was the George’s Township Civil Defense EMS website. It was the “daily sucker” today and it actually hurts to look at it. In fact, I am still blinking trying to make sure that what I see is real. They have literally tiled a crummy picture of an ambulance next to a dingy building as the background. Also, midway down the page it reads, Fayette_County_Ambulance_Service, and those underscores are not mine. There are no additional pages beyond the index, which is unheard of (it is the web and that kind of indicates stuff is linked to additional pages within a site). All the external links are broken as well. Now, granted, this site is so bad it might actually be a hoax; I could see someone creating a site just to make it onto Websites That Suck in the same way people without talent try out for American Idol. Fifteen minutes of fame is fifteen minutes of fame—no one said it had to be positive.
Check it out here (or don’t):
http://www.georgestwpems.org/
To offset the visual assault I took a look at FWA (Favourite Website Awards). This website is neatly designed, and I guess they do believe that black and white is right, because they seem to have followed that white background/black text rule from the “potentially fatal” checklist detailed above. That said, the use of neutrals, namely black, white, and dark gray, is extremely effective here. Everything, down to the custom Twitter and Facebook buttons, falls into this color scheme. The effect is a clean space to showcase the real contents of the website, which are details from external sites judged to be examples of good design and/or innovative content. In fact, this website is actually beautiful (almost Zen) in its simplicity because nothing competes.
Check it out here:
http://www.thefwa.com/
Of course, with a website devoted to showcasing other effective websites there was bound to be a more intriguing find. Sure enough, the exciting element of the session was an external website from the Vitra Design Museum called Hidden Heroes. This website is beautiful and functional, although it breaks many of the rules of classic good design. In fact, some people with short tempers might get frustrated with the site before ever seeing the contents; if you click around a little, however, it is easy to figure out and well worth the effort. The only downside here is the gratuitous use of sound effects when you scroll over elements. The sounds can be turned off at the bottom of the page, but it would have been better if the audio was as subtle as the timeline or gallery text. An audible whisper would have been lovely; as it exists now the sounds are gimmicky and just plain garish.
The site itself is a companion to a traveling exhibition of everyday products that are so ingrained in our lives as to be invisible. Everyday heroes of great industrial design like Scotch Tape and Post-it Notes are the features. The site itself contains photos, trivia, background, and interactive graphics that accompany each product. The unique element is that you can design your own exhibit.
The index page has a central strip of color bars surrounding a box with the exhibition title. Scrolling over the bars yields an object name and thumbnail in the title box; clicking a bar adds it to your custom tour. Once done, you click “enter exhibition” for a personalized gallery of objects. The navigational elements are hidden behind tabs at the sides of the page, which is supposedly a design problem. In this case, however, it keeps those elements from cluttering the sleek bar of text that opens to pages about the objects. Sure, some people might be a little confused at the navigational structure; some people might not understand that grabbing the object bar and pulling it to the side will expand it; some people might miss the subtle gray “gallery” text. But all these elements make the page unique and beautiful. It is in itself designed to be a work of art, and art does not have to play by the rules. Besides, anyone that can’t spend a few minutes wrapping their mind around a slightly new navigation structure probably won’t care about the fact that art is supposed to push boundaries. No big deal. The rest of us can revel in the fantastic concept.
Check it out here:
http://www.hidden-heroes.net/
- Our site doesn't use white or off-white color for background
- Our site doesn't use black text
- Our site uses graphics as links
Beyond that, Websites That Suck is an all right page. It is certainly not pretty, but it does the functional job of showcasing the egregious designs out there. I believe it is meant to showcase some poor design choices itself, but honestly, it can’t even come close to the bad design it features on external sites. Given that, I would rather see a beautiful, sleek design dedicated to displaying the horrors out there. The juxtaposition of good and bad would make the point stronger
Check it out here:
http://www.webpagesthatsuck.com
Speaking of bad design choices, the real treasure that emerged from Websites That Suck was the George’s Township Civil Defense EMS website. It was the “daily sucker” today and it actually hurts to look at it. In fact, I am still blinking trying to make sure that what I see is real. They have literally tiled a crummy picture of an ambulance next to a dingy building as the background. Also, midway down the page it reads, Fayette_County_Ambulance_Service, and those underscores are not mine. There are no additional pages beyond the index, which is unheard of (it is the web and that kind of indicates stuff is linked to additional pages within a site). All the external links are broken as well. Now, granted, this site is so bad it might actually be a hoax; I could see someone creating a site just to make it onto Websites That Suck in the same way people without talent try out for American Idol. Fifteen minutes of fame is fifteen minutes of fame—no one said it had to be positive.
Check it out here (or don’t):
http://www.georgestwpems.org/
To offset the visual assault I took a look at FWA (Favourite Website Awards). This website is neatly designed, and I guess they do believe that black and white is right, because they seem to have followed that white background/black text rule from the “potentially fatal” checklist detailed above. That said, the use of neutrals, namely black, white, and dark gray, is extremely effective here. Everything, down to the custom Twitter and Facebook buttons, falls into this color scheme. The effect is a clean space to showcase the real contents of the website, which are details from external sites judged to be examples of good design and/or innovative content. In fact, this website is actually beautiful (almost Zen) in its simplicity because nothing competes.
Check it out here:
http://www.thefwa.com/
Of course, with a website devoted to showcasing other effective websites there was bound to be a more intriguing find. Sure enough, the exciting element of the session was an external website from the Vitra Design Museum called Hidden Heroes. This website is beautiful and functional, although it breaks many of the rules of classic good design. In fact, some people with short tempers might get frustrated with the site before ever seeing the contents; if you click around a little, however, it is easy to figure out and well worth the effort. The only downside here is the gratuitous use of sound effects when you scroll over elements. The sounds can be turned off at the bottom of the page, but it would have been better if the audio was as subtle as the timeline or gallery text. An audible whisper would have been lovely; as it exists now the sounds are gimmicky and just plain garish.
The site itself is a companion to a traveling exhibition of everyday products that are so ingrained in our lives as to be invisible. Everyday heroes of great industrial design like Scotch Tape and Post-it Notes are the features. The site itself contains photos, trivia, background, and interactive graphics that accompany each product. The unique element is that you can design your own exhibit.
The index page has a central strip of color bars surrounding a box with the exhibition title. Scrolling over the bars yields an object name and thumbnail in the title box; clicking a bar adds it to your custom tour. Once done, you click “enter exhibition” for a personalized gallery of objects. The navigational elements are hidden behind tabs at the sides of the page, which is supposedly a design problem. In this case, however, it keeps those elements from cluttering the sleek bar of text that opens to pages about the objects. Sure, some people might be a little confused at the navigational structure; some people might not understand that grabbing the object bar and pulling it to the side will expand it; some people might miss the subtle gray “gallery” text. But all these elements make the page unique and beautiful. It is in itself designed to be a work of art, and art does not have to play by the rules. Besides, anyone that can’t spend a few minutes wrapping their mind around a slightly new navigation structure probably won’t care about the fact that art is supposed to push boundaries. No big deal. The rest of us can revel in the fantastic concept.
Check it out here:
http://www.hidden-heroes.net/
Tuesday, August 31, 2010
1.2 A little print, a little web, a lot of good
Starting out week one with a look at some very sleek website design seems like the perfect place to begin. The 2Advanced Studios design company has a website that perfectly mirrors their assertion that they “push the boundaries of design and technology.” Every single detail of this site is perfectly designed to promote an edgy, part futuristic, part fantasy-scape image. This extends from the background imagery to the hypnotic music to the titles of the former site versions—Rebirth, Expansions, and Prophecy—located in the web archives.
The navigation system further feeds into this futuristic feel by using an uncluttered bar that drops down upon rollover with a subtle melodic computer processing sound, expanding within itself to a greater or lesser levels of specificity. In fact, every bit of information you could want is accessible from this main page, and yet there is a spacious feeling to the design based largely on the use of dropdowns that keep most of the information organized. Also, the use of background music, while often annoying on many websites, is ingenious in this case. The hypnotic sound actually made me hang around and browse the website (literally all of the sections) for a much longer time period than if I was just clicking around without that sound. It created a sophisticated ambience that fit seamlessly with the rest of the site contents. Also, speaking of seamlessness, 2A managed to use a background with a different color scheme on each main area of the website while making these pages tie in perfectly together. This sounds like an amazing feat, and trust me, it is.
First of all, the website pages are tied together by the consistent placement of frames within the space and the consistent look and function of the main navigation bar as well as the sub-navigation bars revealed in each section. Even the scroll bars fit into the overall design by offering a sleek line that matches the color scheme of each page, but using a common white handle to offer consistency between the pages. Beyond all that, however, they pull off the color changes by exchanging background images that utilize space in a similar fashion; each image has a relatively open sky area to prevent crowding the navigation and a foreground that is fairly dark and free of large objects. Of course, the pyramid that appears in each image also gives them a similar feel. Finally, the color changes work because each one is revealed in the navigation. Scrolling over “company” in the navigation bar reveals a slightly luminous, circular green bullet and clicking the company page loads a dominantly green background. That kind of attention to minuscule details is what makes all the elements of this site gel.
Now, cool animation and elegant design aside, 2A has not skimped on function. Everything is clearly labeled and all elements (portfolio, about page, contact, etc.) are available in the navigation panel on each page. There is not one extra click required on this site—like having to go from “awards” (which a sub-menu of “recognition”), to “home” in order to access “about.” 2A designers also clearly understand that some users will be annoyed by a rollover navigation system or background music, and offer preferences that allow the user to alter these elements and save the changes for later viewing of the site. Even more importantly, the sound and language can be adjusted at the top of the page, so there is no chance a user will have to fumble around looking for those controls under preferences if they just want to quickly change those settings.
I could go on here, but suffice it to say that every element of the 2A website is purposeful and well-designed. The animations are engaging but subtle, the imagery is beautiful and contextually appropriate, and every part of the design seems effortless, which is the true sign of a sophisticated creation.
Check it out here:
http://2advanced.com/#home
Now, since print is still alive and flourishing, I turn my attention to a book. Creating a Website: The Missing Manual is, despite the straightforward (read unimaginative) title, actually a fun book. OK, I know, the book is part of a series so the title is out of Matthew MacDonald's control, but I want to make it clear that this book is not in any way boring, as the title might suggest. It is extremely informative but written in a pleasant, conversational style. This is important because it achieves the nearly impossible task of presenting technical material in a way that is neither insulting simplistic (like the "For Dummies" materials) nor boring beyond belief. In addition to the book, there is a useful companion website; this is somewhat surprising because it functions as more than a promotional page and set of testimonials. The website has links (all of which are actually functional and up-to-date) and downloadable materials that relate to every chapter. It, as well as the book, is definitely worth a look.
Check it out here:
http://missingmanuals.com/cds/creatingws2tmm/
And in print:
The navigation system further feeds into this futuristic feel by using an uncluttered bar that drops down upon rollover with a subtle melodic computer processing sound, expanding within itself to a greater or lesser levels of specificity. In fact, every bit of information you could want is accessible from this main page, and yet there is a spacious feeling to the design based largely on the use of dropdowns that keep most of the information organized. Also, the use of background music, while often annoying on many websites, is ingenious in this case. The hypnotic sound actually made me hang around and browse the website (literally all of the sections) for a much longer time period than if I was just clicking around without that sound. It created a sophisticated ambience that fit seamlessly with the rest of the site contents. Also, speaking of seamlessness, 2A managed to use a background with a different color scheme on each main area of the website while making these pages tie in perfectly together. This sounds like an amazing feat, and trust me, it is.
First of all, the website pages are tied together by the consistent placement of frames within the space and the consistent look and function of the main navigation bar as well as the sub-navigation bars revealed in each section. Even the scroll bars fit into the overall design by offering a sleek line that matches the color scheme of each page, but using a common white handle to offer consistency between the pages. Beyond all that, however, they pull off the color changes by exchanging background images that utilize space in a similar fashion; each image has a relatively open sky area to prevent crowding the navigation and a foreground that is fairly dark and free of large objects. Of course, the pyramid that appears in each image also gives them a similar feel. Finally, the color changes work because each one is revealed in the navigation. Scrolling over “company” in the navigation bar reveals a slightly luminous, circular green bullet and clicking the company page loads a dominantly green background. That kind of attention to minuscule details is what makes all the elements of this site gel.
Now, cool animation and elegant design aside, 2A has not skimped on function. Everything is clearly labeled and all elements (portfolio, about page, contact, etc.) are available in the navigation panel on each page. There is not one extra click required on this site—like having to go from “awards” (which a sub-menu of “recognition”), to “home” in order to access “about.” 2A designers also clearly understand that some users will be annoyed by a rollover navigation system or background music, and offer preferences that allow the user to alter these elements and save the changes for later viewing of the site. Even more importantly, the sound and language can be adjusted at the top of the page, so there is no chance a user will have to fumble around looking for those controls under preferences if they just want to quickly change those settings.
I could go on here, but suffice it to say that every element of the 2A website is purposeful and well-designed. The animations are engaging but subtle, the imagery is beautiful and contextually appropriate, and every part of the design seems effortless, which is the true sign of a sophisticated creation.
Check it out here:
http://2advanced.com/#home
Now, since print is still alive and flourishing, I turn my attention to a book. Creating a Website: The Missing Manual is, despite the straightforward (read unimaginative) title, actually a fun book. OK, I know, the book is part of a series so the title is out of Matthew MacDonald's control, but I want to make it clear that this book is not in any way boring, as the title might suggest. It is extremely informative but written in a pleasant, conversational style. This is important because it achieves the nearly impossible task of presenting technical material in a way that is neither insulting simplistic (like the "For Dummies" materials) nor boring beyond belief. In addition to the book, there is a useful companion website; this is somewhat surprising because it functions as more than a promotional page and set of testimonials. The website has links (all of which are actually functional and up-to-date) and downloadable materials that relate to every chapter. It, as well as the book, is definitely worth a look.
Check it out here:
http://missingmanuals.com/cds/creatingws2tmm/
And in print:
Subscribe to:
Posts (Atom)