Adobe Flash Professional software is used for a number of web development functions, including adding animations and multimedia content. The software is somewhat expensive at $700, however the educational version is only $179. Flash is frequently used for video playback on the web, and most users have the Flash plugin installed on their computers. That said, if users don't have the free player installed then Flash-heavy sites won't work at all. An interesting dilemma in that realm is Apple's relationship to Flash. Apple did just lift a ban on Flash-built apps for the iPhone, but it was suggested on ReadWriteWeb that the ban had been in place long enough to effectively allow Apple to keep the Flash clutter out of the apps; lifting the ban allows them to appear gracious while having already achieved their goal. I believe this too, as yesterday I saw in Computer World that Macs will no longer be sold, starting with the new Macbook Air, with Flash pre-installed. The software can still be downloaded, but the message is clear that Apple wants Flash to disappear. Additionally, without Flash Player pre-installed some users may not bother to go out and grab the software, although Microsoft doesn't install Flash either, so maybe it isn't too much of a problem. Still, I could see this beginning to dissuade some web designers from using Flash and thus finding alternatives. That trend would be some time off however, and for now Flash is a good design tool.
Read the Computer World article:
http://www.computerworld.com/s/article/9192699/Apple_dumps_Flash_from_Mac_OS_X?taxonomyId=123&pageNumber=1
Flash Vista:
The first website I will discuss today is FlashVista, a directory for all kinds of content related to Flash. There are some good elements to the web site's design, including a "random link" box that generates a thumbnail of a web site featuring flash animation that changes as you navigate from page to page. This is a good way to feature content that is included in the browsable lists on the site. Unfortunately, while the "site info" link under the thumbnail works, the "get another" link does not. Instead it (frustratingly) reloads the page with the same graphic in place. Additionally, clicking on the graphic to visit the featured random web site was hit or miss, sometimes yielding an error and suggesting the links on this site need to be validated. The links to Flash content that are provided are by and large pretty good. I found it more useful to use the main navigation and follow "top rated," "most popular," and "cool sites" than to try and browse the categories. The former option opened a list of randomly themed thumbnails while the latter opened sets of categories. This was good when there were sufficient category contents, but many categories were empty and I felt this equated to a lot of unnecessary clicking back and forth. Also, the most popular web sites are generally tagged as such for a reason: They are really interesting and represent the best of the contents available from FlashVista. In my opinion this makes those categories a better bet in terms of efficiently browsing for inspiration.
Moving on down the navigation bar, I found the Flash tutorials section to be one of the more helpful elements featured. The tutorials are mostly text-based, however several video tutorials from LearnFlash.com are also embedded in the site. (For the rest of the LearnFlash contents you have to navigate to an external site that requires a password.) I watched a great tutorial featured from LearnFlash.com that covered how to use the loader component in Flash to create a photo gallery. This solution is a much better way to add a gallery than having separate pages for each image, which can get unwieldy for a portfolio site. Even though I am not ready to invest in the program, I can see how Flash would be a good tool to learn for the future. That said, after I navigated away from the the video tutorial I never did find my way back to that section; the organization of the site is alright, but it is certainly easy enough to lose track of contents. The search feature was not much help in this case either, as it returned either many pages of results or no results, depending on where I specified it should peruse.
Overall, while there are worthwhile elements at FlashVista, I dislike the look of the web site. First of all, the long skinny content area at the left that houses logins, navigation, small thumbnails, etc. forces scrolling well past where the main content area on the right ends. This is annoying to see such copious amounts of white space. Also, I can't understand why the designer decided to label each section; it looks cheesy. For example, users are accustomed to seeing navigation links listed on the side of a page so there is no need to label the box "main navigation." I have less of an issue with the page headings, although I think they could be better integrated into the design. What I don't like are the clipart icons that precede the headings. The "home" page uses the classic house icon that was all over the place years ago (I think Office still has it in their clipart gallery); the "most popular" page uses a smiley face, "top rated" a trophy, and so forth and it looks amateurish. I actually think the width of the main content block is problematic as well. It creates long strings of text in some cases and just doesn't look quite right. Making that area narrower or perhaps adding another column to the page would have been a better choice. To be fair, the page is a directory and as such is meant to showcase the screenshots of external sites, not get in the way of the contents by overusing fancy graphics. Even so, more judicious use of color, a creative header, and a footer (which is MIA) would have made this web site sleeker, which is important given the function is to showcase other good designs. On a final note, I believe this site is abandoned, which would account for the dated look. There are no links entered under "new links" and the Flash News section has 1363 links, but the last one was posted in 2005.
Check out Flash Vista here:
http://www.flashvista.com/
Flash Explained:
As is the case with pretty much any software out there, there are lots of people sharing information about using Flash. Flash Explained is a web site by Luka Maras that contains tons of tutorials and some free downloads of things like fancy buttons. While I don't have Flash software in order to try out any of the tutorials, it is pretty clear that they are quality resources. First, the positive comments are a testament to the effectiveness of the directions. Second, as I read through several of the resources I noted that they were detailed and written in very clear language; this is a sure sign of a good how-to resource. As for the web site design, it is clean and extremely easy to navigate. His color choices are simple and the pages are uncluttered so that the focus is on the tutorial contents and not on distracting elements like graphics or banners. This lack of extras does not equate to a boring look, however, as it sometimes does on other more scaled-down pages. Instead Maras has used a quirky and fun color combination and large text to create interest. The header is a simple red box with a slight gradient and the navigation menu underneath is a thin strip of turquoise with white text hyperlinks. I would never have paired those two colors as it isn't a "normal" combination. I would have used a neutral color like brown to pair with the turquoise. But this red-turquoise combination is bold and makes the page quite interesting. A big part of the success is that he has wisely balanced the colors by making the turquoise bar roughly a third of the size of the red area so that neither color is competing for equal space. In order to continue that visual balance, he includes turquoise headers throughout the page, and then a solid block of red as the footer. Neither color overwhelms the other or the black text used for the body contents.
The layout of the site is also a plus. He has included links to well-organized topics in the main navigation bar. This is quite user-friendly because the categories are clear (banners, animation, sound, text, etc.) and the subsequent list of tutorials in each area are impeccably labeled with titles such as "creating a big glossy logo." It's pretty easy to see what clicking there will yield. My only criticism of the design is that the "recent entries" menu in the right column doesn't display correctly in my browser. I am using Firefox, and the red headline type is squished into the red header area, covering the search box. The list of links that follows, in turquoise type, begins just under the headline so the first link is covering the turquoise navigation bar. The only way to even see that an entry is there is by rolling over the area, which changes the type to black. Aside from that however, the site looks good and the contents are truly a useful resource for both Flash beginners and experts.
Check out Flash Explained:
http://flashexplained.com/
SitePal:
This site features Flash animations of avatars and is geared at adding a personal touch to your web page. The use of avatars in customer service roles seems a little contrived to me, and I would think visitors might be a little irritated by them; they seem a bit "impatient" to me because, at least in the demo on SitePal, the avatar kept moving her head and blinking while I was reading down the page. I can't imagine shopping or browsing on a web site with an avatar moving around waiting for me to finish and interact. I do, however, believe as the site suggests, that avatars would be useful for educational websites and training videos. Some people do learn better through interaction, and in such a setting a sense of communication could be important.
I think that by and large avatars are a good stand-in for live interaction in virtual world settings. There have been some studies that show people seem to interact through avatars as though they were in the same room. That is in a virtual 3-D world, however, where context is significant and live interaction is possible. The SitePals models are cool, but I don't think they can fill that interactive role in a more static web page environment and the illusion of "live" interaction with an avatar in that setting is paper thin. I also think they are somewhat of a fad, despite what the testimonials on the SitePals page suggest, except possibly in the training and education sectors.
The avatars available through SitePals look high-quality to me with a lot of options to customize their look, including uploading a photo to create a photo-realistic version of yourself. The animation is pretty good, although the lip movement doesn't precisely align with the audio if you look too closely. The audio itself is good, with options to record your own voice or use a text-to-speech feature, which sounds quite natural (as opposed to many free ones that sound jerky or tinny). These avatars are an easy way to add animation to your website without knowing how to create it yourself. The account you open with SitePals allows you to create a character and embed the code into your website after which any audio or character changes update automatically. This is all done for a monthly fee and could be a good option for some people. I think, again, that for most personal and many corporate sites these are a bad idea, but for a few applications they could really work.
Check out SitePals here:
http://www.sitepal.com/home/
Swift 3-D is a piece of software that integrates with Flash and is used to create custom 3-D graphics and animations. Actually, it is a standalone program that easily emports animations into Flash, or it is available as a Flash plugin that performs basic animations. In watching the video tour of the software capabilities I was impressed by how powerful but simultaneously easy-to-use it appears. For instance, on the basic side the software can create 3-D objects from existing vector graphics such as logos or from shapes drawn within the program. Once an object is created there is a library of textures, colors, and preset animations (like rotation) that can be applied. According to the product description such features are intended for beginners to be able to use almost immediately, with the idea that they will then learn more advanced features (the advanced options seem pretty limitless). I can believe this. It looks easy enough to get started and if software is usable from the start it is easy to dig in and teach yourself more advanced uses.
I would be remiss in not mentioning the web site design here as well. It is one of the best software product pages I have seen simply because it demos the product in a number of sleek videos. In fact, the product tour helps to erase the abstract qualities of the text descriptions. After watching the video it is crystal clear what this software does and how the graphics look and move. This is essential to capturing the section of the market with no experience but a desire to learn about 3-D animation. This tour video is supplemented by others around the site that show working animations, screenshots, and videos of the workflow. These features go beyond what any text description could relay and probably convince many visitors to jump in and buy the product. Amazing stuff.
Check Swift out here:
http://www.erain.com/Products/swift3d/
In contrast, Swish Max3, a similar product, has a standard web page with bulleted descriptions of the software features. This is common, but having just looked at the Swift website I would choose that software over Swish because I could see how it worked. The dynamic samples on the Swish website of different effects that can be created in Swish did help to make the software purpose clearer, but the lack of audio descriptions still means the Swift web software wins out. These small animations could not compete with the full-fledged tour of the Swift product. That said, the features included with Swish seem as equally geared to a range of abilities as those of Swift, with preset multimedia effects and ready-made vector shapes all the way to scripting languages for advanced users. The prices for the two software packages are about the same as well. I just am not sure if the Swish software is as user-friendly as the Swift interface appears to be. That said, both seem to be powerful tools that could really make web sites, especially for games, movies, and high tech design, unique and interactive.
Check out Swish here:
http://www.swishzone.com/index.php?area=home
Sunday, October 24, 2010
Saturday, October 23, 2010
9.1 Design and design again
Over the course of the last few months I have written several posts about the ongoing design process of my website. I have covered an initial personal site design with layout and color choices, transition to a new concept (Taste the World), logo development, and layout diagrams. In this post I will share the new phases of my Taste the World project which I am developing to provide a web presence for my aunt's new business.
First, I took a look at my web layout drawings and opened Photoshop to work with the designs. I played around with moving the header and footer to occupy different locations, and decided on a footer that covers only part of the screen and aligns with the main content area. Similarly, the header stops short of running all the way across the top of the screen. I tried running the header from edge to edge, but the look was too blocky. I also added a rounded corner to make the header look a bit softer. My goal here is to create a site that looks sophisticated and sleek, but not overly contemporary. Therefore I have incorporated some Web 2.0 touches, like rounded corners and drop shadows, but kept them minimal.
Here is the first rendition:
The web area is defined by the orange and burgundy borders. I plan to make the dimensions compatible with 800 x 600 screen resolutions, just to make sure I don't annoy any potential visitors with horizontal scrolling. This is important in order to make sure that both the side navigation and main content areas remain visible. The brown area surrounding the web page is the background area that will display at larger screen resolutions.
Once I blocked out the elements I began to add colors. As you can see from the image above, I initially intended to use an analogous color scheme using red, orange, and yellow. I choose burgundy because as I thought back to the Beaird chapter on color I remembered him mentioning that dark reds were rich and luxurious, and would be good for sites related to fine living. Taste the World will feature unique spices, fresh roasted coffee, imported olives and cheese, and so forth, so the luxurious association seems appropriate. Working from there, analogous colors seemed perfect because it would have allowed me to include orange as well, which Beaird mentions is associated with food and appetite. Sounds perfect for a high-end food store. However, as I worked with the colors I found the orange to be too jarring, even though I experimented with many tints and shades. Also, when combined with the brown background it just screamed out fall or harvest.
In trying to fix it, I added a general gradient, and came up with the following, which I liked:
However it was not really a sophisticated look, so I abandoned it without finishing the edges. I might save the look for a future project though. After this point I abandoned trying to work orange into the design and decided a color palette generator was in order.
So I went into Adobe Kuler and entered the code for my burgundy, which I still feel is the most important starting point for the site colors. I then generated a complementary color scheme, just to try something new. It was wasn't quite right initially, but when I played with the settings I was able to find a good olive hue that made a perfect combination. I know, red and green sounds a little too thematic — as in Christmas owns the combination — but trust me, this is so far removed and sophisticated it won't conjure such associations.
This is my new color scheme, using olive, burgundy, brown, and ivory:
This got much closer to a sophisticated look that suggests indulgent foods. Once I had the colors, I decided to work with some gradients since I felt the green was a little intense. I already had a slight gradient on the header and footer area, using a narrow range of hue and shade to create just a little depth. I then added a gradient to the green area, setting the parameters to run from light olive to brown in order to create a slightly different look.
This was the result:
This look is closer to what I was looking for, with a little added depth. I decided it was still a little too bright though, especially in the upper corners. I wanted the brown to blend a little closer to the background color in order to soften the edges between background and web area. So I went into the gradient tool and tweaked the settings to darken more, resulting in this look:
The difference is subtle, but the darker brown adds depth and richness. With the color scheme in place, I added some subtle background textures in the form of light drawings along the top and left edges. I also added a drop shadow under the header and an inner shadow on the right edge to give the illusion of some dimension. In order to balance this look, I left some elements, such as the secondary navigation box, flat. I also made sure not to pack the page with too much information, leaving some open spaces at the top and bottom of the page so the design has a little breathing room.
The main template is now done, with all the above elements put into place in Dremweaver. I am still working out the look of the buttons though. I am leaning toward a rollover with a small hand-drawn graphic, but haven't finalized the design yet. It will fall into place at some point, but I'm toying with different graphic drawings. The Facebook icon in the corner will be a classic looking icon, but instead of the usual blue it will be the same brown from the background area. That's it for now; on to figuring out my shopping cart situation!
First, I took a look at my web layout drawings and opened Photoshop to work with the designs. I played around with moving the header and footer to occupy different locations, and decided on a footer that covers only part of the screen and aligns with the main content area. Similarly, the header stops short of running all the way across the top of the screen. I tried running the header from edge to edge, but the look was too blocky. I also added a rounded corner to make the header look a bit softer. My goal here is to create a site that looks sophisticated and sleek, but not overly contemporary. Therefore I have incorporated some Web 2.0 touches, like rounded corners and drop shadows, but kept them minimal.
Here is the first rendition:
The web area is defined by the orange and burgundy borders. I plan to make the dimensions compatible with 800 x 600 screen resolutions, just to make sure I don't annoy any potential visitors with horizontal scrolling. This is important in order to make sure that both the side navigation and main content areas remain visible. The brown area surrounding the web page is the background area that will display at larger screen resolutions.
Once I blocked out the elements I began to add colors. As you can see from the image above, I initially intended to use an analogous color scheme using red, orange, and yellow. I choose burgundy because as I thought back to the Beaird chapter on color I remembered him mentioning that dark reds were rich and luxurious, and would be good for sites related to fine living. Taste the World will feature unique spices, fresh roasted coffee, imported olives and cheese, and so forth, so the luxurious association seems appropriate. Working from there, analogous colors seemed perfect because it would have allowed me to include orange as well, which Beaird mentions is associated with food and appetite. Sounds perfect for a high-end food store. However, as I worked with the colors I found the orange to be too jarring, even though I experimented with many tints and shades. Also, when combined with the brown background it just screamed out fall or harvest.
In trying to fix it, I added a general gradient, and came up with the following, which I liked:
However it was not really a sophisticated look, so I abandoned it without finishing the edges. I might save the look for a future project though. After this point I abandoned trying to work orange into the design and decided a color palette generator was in order.
So I went into Adobe Kuler and entered the code for my burgundy, which I still feel is the most important starting point for the site colors. I then generated a complementary color scheme, just to try something new. It was wasn't quite right initially, but when I played with the settings I was able to find a good olive hue that made a perfect combination. I know, red and green sounds a little too thematic — as in Christmas owns the combination — but trust me, this is so far removed and sophisticated it won't conjure such associations.
This is my new color scheme, using olive, burgundy, brown, and ivory:
This got much closer to a sophisticated look that suggests indulgent foods. Once I had the colors, I decided to work with some gradients since I felt the green was a little intense. I already had a slight gradient on the header and footer area, using a narrow range of hue and shade to create just a little depth. I then added a gradient to the green area, setting the parameters to run from light olive to brown in order to create a slightly different look.
This was the result:
This look is closer to what I was looking for, with a little added depth. I decided it was still a little too bright though, especially in the upper corners. I wanted the brown to blend a little closer to the background color in order to soften the edges between background and web area. So I went into the gradient tool and tweaked the settings to darken more, resulting in this look:
The difference is subtle, but the darker brown adds depth and richness. With the color scheme in place, I added some subtle background textures in the form of light drawings along the top and left edges. I also added a drop shadow under the header and an inner shadow on the right edge to give the illusion of some dimension. In order to balance this look, I left some elements, such as the secondary navigation box, flat. I also made sure not to pack the page with too much information, leaving some open spaces at the top and bottom of the page so the design has a little breathing room.
The main template is now done, with all the above elements put into place in Dremweaver. I am still working out the look of the buttons though. I am leaning toward a rollover with a small hand-drawn graphic, but haven't finalized the design yet. It will fall into place at some point, but I'm toying with different graphic drawings. The Facebook icon in the corner will be a classic looking icon, but instead of the usual blue it will be the same brown from the background area. That's it for now; on to figuring out my shopping cart situation!
Friday, October 22, 2010
8.2 Menus, buttons, and a dash of multimedia
I think at this point in time including either a dynamic menu or set of buttons is a must for web sites. Including only text hyperlinks just looks a little bit too plain and, frankly, amateurish. In Creating a Web Site: The Missing Manual, Matthew MacDonald covers the process of adding JavaScript code to create rollover buttons and dynamic menus. He provides suggestions for where to get free code and does a very thorough job of explaining the process. In fact, the more I read the more I am interested in learning more about writing scripts. At the very least I need to check out some tutorials. Not that I think I can write better stuff than what is already available, it's just that as I read about how it works it makes the background processes of Dreamweaver much clearer.
Speaking of Dreamweaver background processes, the program includes an automated feature for adding rollover buttons; you just set your main button image and the rollover image, specify the link, and Dreamweaver inserts the script into your page. This can't possibly be any easier and I am definitely primed to add rollovers to my Taste the World web site. I am in the process of deciding what the buttons should look like so I will add more about that design process in a later post. I am intrigued by the dynamic menu option as well, but haven't decided if the site would warrant that type of linking. With the inclusion of product pages it might, but I am experimenting with using two navigation menus (a primary and secondary navigation) instead. I think coupled with product thumbnails this will work for the site, but I need to see if the buttons and thumbnails make sense without adding extra pages to click through.
MacDonald also covers the use of multimedia in the book, and I think this a great page enhancement. I don't think, however, it will have a place in my particular web page. That said, he describes adding YouTube pages for video and I have to say this is really the only viable option. I created a YouTube video page a couple semesters ago to show case a presentation with screen-captured video and it works beautifully. I was able to save the video in high definition and upload a huge file (I think it was a couple of gigabytes if I remember correctly). Of course I can take a lesson from MacDonald's optimization primer, but in the presentation case I needed to keep the quality high so the screen text would remain readable. Anyway, I would never have had the space to host that video myself; I like the idea of placing it in a searchable forum anyway. And MacDonald notes that you might be able to drive users to your web site if they find your video content on YouTube. It is a great promotional tool in that regard.
Check out my YouTube resource page here:
http://www.youtube.com/user/rfitzsim12
As for audio, Flash seems like the way to go. The benefits far outweigh the other embedding and downloading options in almost every case I can think of and scripts for adding players to a web site are available for free. When considering audio, I can't help but think of the 2Advanced Studios website that I discussed in an earlier blog. Honestly, I believe I stayed on the site ten times longer because of the soundscape than I would have if I had browsed in silence. It was subtle and hypnotic and the slightly sci-fi edge that the audio had on rollovers was a dramatic enhancement to the site contents. It was one of the most brilliant designs I can think of. That said, I can't imagine a soundscape that would fit so seamlessly into my own storefront site. The rhythmic ambiance of 2Advanced is perfect for the fantasy genre; classical music seems too overdone for a storefront; modern musical genres don't really fit the theme either. It also seems to me that people may prefer to web shop in silence, so I will forgo the audio for this project. I am going to add some music to my personal site when I get a chance though; I do like the idea of streaming from someplace like Pandora to get a little variety into the mix.
Speaking of Dreamweaver background processes, the program includes an automated feature for adding rollover buttons; you just set your main button image and the rollover image, specify the link, and Dreamweaver inserts the script into your page. This can't possibly be any easier and I am definitely primed to add rollovers to my Taste the World web site. I am in the process of deciding what the buttons should look like so I will add more about that design process in a later post. I am intrigued by the dynamic menu option as well, but haven't decided if the site would warrant that type of linking. With the inclusion of product pages it might, but I am experimenting with using two navigation menus (a primary and secondary navigation) instead. I think coupled with product thumbnails this will work for the site, but I need to see if the buttons and thumbnails make sense without adding extra pages to click through.
MacDonald also covers the use of multimedia in the book, and I think this a great page enhancement. I don't think, however, it will have a place in my particular web page. That said, he describes adding YouTube pages for video and I have to say this is really the only viable option. I created a YouTube video page a couple semesters ago to show case a presentation with screen-captured video and it works beautifully. I was able to save the video in high definition and upload a huge file (I think it was a couple of gigabytes if I remember correctly). Of course I can take a lesson from MacDonald's optimization primer, but in the presentation case I needed to keep the quality high so the screen text would remain readable. Anyway, I would never have had the space to host that video myself; I like the idea of placing it in a searchable forum anyway. And MacDonald notes that you might be able to drive users to your web site if they find your video content on YouTube. It is a great promotional tool in that regard.
Check out my YouTube resource page here:
http://www.youtube.com/user/rfitzsim12
As for audio, Flash seems like the way to go. The benefits far outweigh the other embedding and downloading options in almost every case I can think of and scripts for adding players to a web site are available for free. When considering audio, I can't help but think of the 2Advanced Studios website that I discussed in an earlier blog. Honestly, I believe I stayed on the site ten times longer because of the soundscape than I would have if I had browsed in silence. It was subtle and hypnotic and the slightly sci-fi edge that the audio had on rollovers was a dramatic enhancement to the site contents. It was one of the most brilliant designs I can think of. That said, I can't imagine a soundscape that would fit so seamlessly into my own storefront site. The rhythmic ambiance of 2Advanced is perfect for the fantasy genre; classical music seems too overdone for a storefront; modern musical genres don't really fit the theme either. It also seems to me that people may prefer to web shop in silence, so I will forgo the audio for this project. I am going to add some music to my personal site when I get a chance though; I do like the idea of streaming from someplace like Pandora to get a little variety into the mix.
8.1 Images and software
Image editing tools:
My image editor of choice is Adobe Photoshop, in part because it is still the best photo editing program out there and in part because that is what I have used since I was an undergraduate student. I'm comfortable with the layout and good at using the various tools. I mix in a little Illustrator from time to time (although sometimes I use Inkscape, a great open source vector graphics program, instead) and that usually rounds out my image editing suite. That said, there are some other great programs out there — some of which I use once in a while, others that are completely new to me — that I want to talk about here.
Gimp is an open source program that performs the same types of tasks as Photoshop. I personally really like this program for a number of reasons, not the least of which is that I love the idea of a community of developers freely sharing resources and improving a piece of software just because they want to make sure everyone has access to high quality programs. Comparatively, Photoshop costs hundreds of dollars, Gimp is free; you can't really go wrong there. The look of Gimp is streamlined as well, so anyone that just doesn't want to look at the Photoshop environment should enjoy it. It's also easy to find your way around after just a short time, which it makes it a good choice for beginners as well as experts. My biggest gripe with Gimp is that I can't stand their logo (a weird little dog head), but then this is a community of programmers, not necessarily artists, so I'll give them a pass on that one.
Downloading Gimp is easy as they have placed everything important right on the home page. The large download button is in the header bar and program updates are listed right below that. There is no digging around required, which is a hallmark of user-friendly design. For anyone that wants to contribute to the program, a "get involved" link is prominently displayed. Contributions include everything from reporting bugs to programming features and writing tutorials. The tutorials are available via a link from that page or in the footer bar on every page. A little more exploration of the additional links yields some interesting information about the history of the program and some screenshots so users can get a glimpse of the program's look. The website also has a historical archive of splash screens, and it was fun to look at the designs, of which version 2.2, with pencil shavings and handwritten text, was the best. It was a good nod to the creative process.
To download Gimp, head to:
http://www.gimp.org/
Another open source program to be aware of is GimpShop. This is a variation of Gimp that replicates the look of Photoshop. As such it is a good alternative for people that are used to Photoshop, but want to use a free alternative. A serious advantage here is that the millions of Photoshop tutorials out there (I see at least 3 new ones a day from Photoshop Roadmap) can usually be followed using this program. It is definitely nice to be able to access that wealth of information since specific GimpShop resources would never be able to come close in number.
Check out Photoshop Roadmap for tutorials about creating any effect imaginable. New content is added every day and older postings are placed in a searchable archive. You can also follow the site on FaceBook to get daily updates on newly added tutorials, which is a great tool to help you decide whether to checkout the site that day:
http://www.photoshoproadmap.com
The GimpShop website has a couple of noteworthy features, including easy navigation and a community forum that is accessible from a link in the header bar. You have to register to add comments, but otherwise the forum is searchable and has discussions and help answers for many topics of interest. I appreciate the inclusion of a forum because it helps to build a solid community around both the website and the software, which is important in order for an open source resource to thrive and improve. The forum is relatively active, with the last comment having been left about 10 days ago.
That said, there are some real negatives to this website as well. First off, there are just enough spam messages on the discussion board to be annoying, suggesting a few moderators might be in order. It isn't a super active forum with many posts per day so this should be an acceptable workload for someone. A much worse issue, however, is the inclusion of tons of pop-up ads. Every single click on a new discussion thread yields two pop-up ad windows. Clicking the back button reloads these same ads, as does clicking the home icon. I get that the software is free, and that the annoyance of some ads is a relatively small price to pay, however, it makes the forum a huge pain to navigate and probably causes a serious reduction in users.
The final issue is that a number of links on the main page are broken. Both the network button and the huge GimpShop Social Network alert yield error messages. The latter is especially problematic because it occupies such a prominent place in the main content area. I was actually wondering why no one had joined yet (the box invited me to be the first), since a special area for sharing artwork created using the program would ordinarily be a popular feature. I have to wonder how long this has been broken and how it has gone unnoticed, or at least unrepaired. I also think that the ads and errors are defeating the donation section of the website. I am sure many people would kick in a few dollars to support software development, but maybe not with the site having so many glitches — it just seems unprofessional. This, unfortunately, probably also dissuades some people from downloading a good piece of software.
Check out GimpShop here:
http://www.gimpshop.com/index.shtml
The last piece of software I will discuss is Adobe Fireworks, which is not one I have used before. In looking over the product specs I see it has a number of web-specific design features that seem as though they would be extremely useful. Interestingly, the program includes templates for mobil devices and other products, which can help to ensure that appropriate screen sizes and resolutions are used. Of course, I am not planning on designing for alternate devices, however the rise in mobile browser use makes this a significant feature. Traditional websites can't display in a very usable form on a handheld device so it can be really important to create content that will. This is really a future direction that can't be ignored and you have to love preset templates that make the design process easier. Other features include image optimization (including transparency preservation) and tools meant to help create standards compliant web pages. All in all, Fireworks appears to be useful in concert with a number of other design programs and streamlines the process of development. I can't say much more without actually using the tools, however it is a program I will definitely check out.
Read about the product features here:
http://www.adobe.com/products/fireworks/features/
Image sources:
There are a lot of sources of free imagery out on the web and sometimes it can be extremely time consuming to wade through them all. It gets tricky if you just try to Google a topic because you then need to check whether an image you like is actually in the public domain or requires permission or payment for use. Sometimes determining that information is not all that simple, especially if the image came from a source other than a large compilation of images specifically for design use. Finding copyright-free music or video can be even trickier. The Wikipedia Public Domain Image Resources page can help with the weeding process as it contains a bunch of links categorized by topics. This is a useful list as it cuts down on the frustration of visiting a catch-all site and trying to locate something specific. For instance, if I want weather-related pictures I can see from the government sites list that the National Oceanic and Atmospheric Administration has a photo library, which is probably a good place to begin. That said, Wikipedia is careful to offer the disclaimer that some sites might not have only royalty-free contents. This is a good reminder to actually check the policies associated with any free resource. Sometimes it is free, but requires a link to the creator's site, or a credit line. Sometimes it is free for personal use only. Free imagery doesn't necessarily mean imagery without rules and it is important to remember to check the usage guidelines to avoid issues.
Check out the Wiki here:
http://en.wikipedia.org/wiki/Wikipedia:Public_domain_image_resources
Footnote is a website that provides around 70 million images and is organized by topics such as census, missing air crew reports, Revolutionary War pensions, passport applications, and so forth. These are primary source documents and would be great for research, history related web content, and even edited for design purposes. This is a great database and the images I viewed were all high quality. Also, it appears that the community can create pages and update records, which increases the likelihood of locating unique sources or images. The website itself does a good job of wrangling the immense number of documents. For instance, clicking on a topic yields collections that are broken down into progressively smaller categories; this means rather than looking at everything related to West Africa, I have to choose an area (Gold Coast), then a category (electronics), and a sub-category (radio), before seeing that two captions are available. I then choose one to display an image. This is remarkable organization because while I can step forward and back at any point, I don't get bombarded with every image tagged with the topic "West Africa." Another great feature of this website also helps users to manage information by including a "recently viewed" tab that displays thumbnails. For anyone looking through massive amounts of imagery and then wanting to relocate a certain source, this tab is essential. It would be maddening to weed back through the contents trying to remember how you got to a certain image and this feature eliminates that frustration point. Very sleek and user-friendly design.
This website is well worth checking out for about hundred more reasons than I mentioned above:
http://www.footnote.com/
I will end here with a resource that is not about images, but rather a technology blog. Why does this belong here? Because it is difficult to keep up with tech trends without following something like ReadWriteWeb. The articles posted there include important information about design, standards, and pretty much everything else in the world of technology. The potential of augmented reality, Apple finally allowing Flash development for iPhone apps, and the problems with Twitter's photo policy (FYI they can sell any images you upload there to whomever they choose) are just a few of the posts I read from the last few days. I feel kind of dwarfed by the research and endless streams of advances out there when I read these pieces and I would feel sort of out of touch without reading them. Progress is amazing and blogs like this make it manageable to follow.
Check out ReadWriteWeb (subscribe to a feed!) here:
http://www.readwriteweb.com/
My image editor of choice is Adobe Photoshop, in part because it is still the best photo editing program out there and in part because that is what I have used since I was an undergraduate student. I'm comfortable with the layout and good at using the various tools. I mix in a little Illustrator from time to time (although sometimes I use Inkscape, a great open source vector graphics program, instead) and that usually rounds out my image editing suite. That said, there are some other great programs out there — some of which I use once in a while, others that are completely new to me — that I want to talk about here.
Gimp is an open source program that performs the same types of tasks as Photoshop. I personally really like this program for a number of reasons, not the least of which is that I love the idea of a community of developers freely sharing resources and improving a piece of software just because they want to make sure everyone has access to high quality programs. Comparatively, Photoshop costs hundreds of dollars, Gimp is free; you can't really go wrong there. The look of Gimp is streamlined as well, so anyone that just doesn't want to look at the Photoshop environment should enjoy it. It's also easy to find your way around after just a short time, which it makes it a good choice for beginners as well as experts. My biggest gripe with Gimp is that I can't stand their logo (a weird little dog head), but then this is a community of programmers, not necessarily artists, so I'll give them a pass on that one.
Downloading Gimp is easy as they have placed everything important right on the home page. The large download button is in the header bar and program updates are listed right below that. There is no digging around required, which is a hallmark of user-friendly design. For anyone that wants to contribute to the program, a "get involved" link is prominently displayed. Contributions include everything from reporting bugs to programming features and writing tutorials. The tutorials are available via a link from that page or in the footer bar on every page. A little more exploration of the additional links yields some interesting information about the history of the program and some screenshots so users can get a glimpse of the program's look. The website also has a historical archive of splash screens, and it was fun to look at the designs, of which version 2.2, with pencil shavings and handwritten text, was the best. It was a good nod to the creative process.
To download Gimp, head to:
http://www.gimp.org/
Another open source program to be aware of is GimpShop. This is a variation of Gimp that replicates the look of Photoshop. As such it is a good alternative for people that are used to Photoshop, but want to use a free alternative. A serious advantage here is that the millions of Photoshop tutorials out there (I see at least 3 new ones a day from Photoshop Roadmap) can usually be followed using this program. It is definitely nice to be able to access that wealth of information since specific GimpShop resources would never be able to come close in number.
Check out Photoshop Roadmap for tutorials about creating any effect imaginable. New content is added every day and older postings are placed in a searchable archive. You can also follow the site on FaceBook to get daily updates on newly added tutorials, which is a great tool to help you decide whether to checkout the site that day:
http://www.photoshoproadmap.com
The GimpShop website has a couple of noteworthy features, including easy navigation and a community forum that is accessible from a link in the header bar. You have to register to add comments, but otherwise the forum is searchable and has discussions and help answers for many topics of interest. I appreciate the inclusion of a forum because it helps to build a solid community around both the website and the software, which is important in order for an open source resource to thrive and improve. The forum is relatively active, with the last comment having been left about 10 days ago.
That said, there are some real negatives to this website as well. First off, there are just enough spam messages on the discussion board to be annoying, suggesting a few moderators might be in order. It isn't a super active forum with many posts per day so this should be an acceptable workload for someone. A much worse issue, however, is the inclusion of tons of pop-up ads. Every single click on a new discussion thread yields two pop-up ad windows. Clicking the back button reloads these same ads, as does clicking the home icon. I get that the software is free, and that the annoyance of some ads is a relatively small price to pay, however, it makes the forum a huge pain to navigate and probably causes a serious reduction in users.
The final issue is that a number of links on the main page are broken. Both the network button and the huge GimpShop Social Network alert yield error messages. The latter is especially problematic because it occupies such a prominent place in the main content area. I was actually wondering why no one had joined yet (the box invited me to be the first), since a special area for sharing artwork created using the program would ordinarily be a popular feature. I have to wonder how long this has been broken and how it has gone unnoticed, or at least unrepaired. I also think that the ads and errors are defeating the donation section of the website. I am sure many people would kick in a few dollars to support software development, but maybe not with the site having so many glitches — it just seems unprofessional. This, unfortunately, probably also dissuades some people from downloading a good piece of software.
Check out GimpShop here:
http://www.gimpshop.com/index.shtml
The last piece of software I will discuss is Adobe Fireworks, which is not one I have used before. In looking over the product specs I see it has a number of web-specific design features that seem as though they would be extremely useful. Interestingly, the program includes templates for mobil devices and other products, which can help to ensure that appropriate screen sizes and resolutions are used. Of course, I am not planning on designing for alternate devices, however the rise in mobile browser use makes this a significant feature. Traditional websites can't display in a very usable form on a handheld device so it can be really important to create content that will. This is really a future direction that can't be ignored and you have to love preset templates that make the design process easier. Other features include image optimization (including transparency preservation) and tools meant to help create standards compliant web pages. All in all, Fireworks appears to be useful in concert with a number of other design programs and streamlines the process of development. I can't say much more without actually using the tools, however it is a program I will definitely check out.
Read about the product features here:
http://www.adobe.com/products/fireworks/features/
Image sources:
There are a lot of sources of free imagery out on the web and sometimes it can be extremely time consuming to wade through them all. It gets tricky if you just try to Google a topic because you then need to check whether an image you like is actually in the public domain or requires permission or payment for use. Sometimes determining that information is not all that simple, especially if the image came from a source other than a large compilation of images specifically for design use. Finding copyright-free music or video can be even trickier. The Wikipedia Public Domain Image Resources page can help with the weeding process as it contains a bunch of links categorized by topics. This is a useful list as it cuts down on the frustration of visiting a catch-all site and trying to locate something specific. For instance, if I want weather-related pictures I can see from the government sites list that the National Oceanic and Atmospheric Administration has a photo library, which is probably a good place to begin. That said, Wikipedia is careful to offer the disclaimer that some sites might not have only royalty-free contents. This is a good reminder to actually check the policies associated with any free resource. Sometimes it is free, but requires a link to the creator's site, or a credit line. Sometimes it is free for personal use only. Free imagery doesn't necessarily mean imagery without rules and it is important to remember to check the usage guidelines to avoid issues.
Check out the Wiki here:
http://en.wikipedia.org/wiki/Wikipedia:Public_domain_image_resources
Footnote is a website that provides around 70 million images and is organized by topics such as census, missing air crew reports, Revolutionary War pensions, passport applications, and so forth. These are primary source documents and would be great for research, history related web content, and even edited for design purposes. This is a great database and the images I viewed were all high quality. Also, it appears that the community can create pages and update records, which increases the likelihood of locating unique sources or images. The website itself does a good job of wrangling the immense number of documents. For instance, clicking on a topic yields collections that are broken down into progressively smaller categories; this means rather than looking at everything related to West Africa, I have to choose an area (Gold Coast), then a category (electronics), and a sub-category (radio), before seeing that two captions are available. I then choose one to display an image. This is remarkable organization because while I can step forward and back at any point, I don't get bombarded with every image tagged with the topic "West Africa." Another great feature of this website also helps users to manage information by including a "recently viewed" tab that displays thumbnails. For anyone looking through massive amounts of imagery and then wanting to relocate a certain source, this tab is essential. It would be maddening to weed back through the contents trying to remember how you got to a certain image and this feature eliminates that frustration point. Very sleek and user-friendly design.
This website is well worth checking out for about hundred more reasons than I mentioned above:
http://www.footnote.com/
I will end here with a resource that is not about images, but rather a technology blog. Why does this belong here? Because it is difficult to keep up with tech trends without following something like ReadWriteWeb. The articles posted there include important information about design, standards, and pretty much everything else in the world of technology. The potential of augmented reality, Apple finally allowing Flash development for iPhone apps, and the problems with Twitter's photo policy (FYI they can sell any images you upload there to whomever they choose) are just a few of the posts I read from the last few days. I feel kind of dwarfed by the research and endless streams of advances out there when I read these pieces and I would feel sort of out of touch without reading them. Progress is amazing and blogs like this make it manageable to follow.
Check out ReadWriteWeb (subscribe to a feed!) here:
http://www.readwriteweb.com/
Wednesday, October 20, 2010
7.4 Money, money, money and a few fancy extras
E-commerce and ads:
No book on web page construction would be complete without a section devoted to making money, and MacDonald delivers a pretty good chapter in Creating a Web Site: The Missing Manual. I was wishing for a little more breadth on the virtual shopping cart front, but then again, this is not a book about effective storefront creation. It is about web page creation and in that sense, he covers the simplest way to get a functioning shopping cart system in place. Additionally he covers other money-making ideas, which he appropriately refers to as "schemes." I like the wording, I have to say, because there is something inherently sleazy underlying the proliferation of advertisement all over the free web. Now, I am not lamenting the rampant commercialization of society here — there is already a countless quantity of research on the bombardment of advertising in the form of TV, radio, subliminal messages, and billboards. It has been happening forever and I'll save that discussion for another time. The real issue here, is that lurking behind many Internet ads is the possibility of inadvertently enter a phishing site. Not so innocuous.
That said, there is a lot of good, verified advertising out there and MacDonald devotes space in the book to using Google AdSense for both promoting your own business via ads on other people's websites and using AdSense to generate revenue by displaying those ads for others. While I am not interested in actually using AdSense as a revenue generator, what I appreciate about it is the subtlety Google applies to the concept. The text-only ads really do sit quietly on the page and are less of an intrusion than you would expect advertising to be. The targeted nature of that advertising is also key. Not only does it increase the likelihood that a user will click the ad, thus generating revenue for the site owner, you could almost argue that some of the ads actually offer value to the site. If I am reading about hot sauce, for instance, an ad link to a great hot sauce store might actually be just what I want to see. The Amazon Associates program might be just as good here, though, since the link could go right to a particular product and it doesn't scream AD in the same way that even the Google AdSense content does. The tradeoff, I guess, for the sleekness of the Amazon approach is that a user just clicking a link doesn't yield any profit and it is sort of unlikely that all that many people will buy the product in order to generate your commission.
One thing I am not crazy about is the AdSense for Search concept. I think the temptation for visitors to exit your site is that much greater when a Google search box is embedded right there, and that seems counterproductive to me. At least with the sidebar ads, a user has to see something relevant to your site contents to entice clicking. They may actually finish reading your website first or return after viewing the ad. With the search box I feel like you essentially just turned your website into the Google homepage. Even if you limit the Google searches to only your website, I feel it still takes something away from the site. A sleeker search option is to create one that combs your website and fits in with the overall look (as in no Google logo in the search box). Forget generating advertising revenue with the Google search feature; it is just a little too distracting.
Internet storefronts are almost a must for any physical store in this day and age. Users expect to, at the very least, be able to check out a new local store to get a sense of the environmental vibe before they set foot in the building. More significantly, however, many of those users may choose to buy products from the comfort of their homes, including people that could just as easily head down to the physical location. Convenience (or sometimes outright laziness) is key.
MacDonald does a good job of covering the slightly tricky task of adding e-commerce functions to your web site by covering the PayPal shopping cart. I have looked into open source software, and a cart can be added in other ways, but I have to say PayPal does provide a streamlined process since you can do everything from your account, including creating the cart buttons and so forth. I was also rather surprised to read in MacDonald's text that you can customize the colors and use buttons you have created, so you can make the PayPal generated pages fit the look of your website, at least to a point. I was previously under the impression that the pages would look distinctly PayPal and totally unattached to your own site design. Given that, I am going to explore PayPal as an option for the e-commerce portion of the Taste the World website. It might save some serious headaches. And on a technical note, the chargeback protection offered by a huge vendor like PayPal
JavaScript to add a little flair:
I have used scripts to create a form, slideshow, and remote and resident rollovers in my personal website. I will likely use these elements to add a little flair and some needed function to the Taste the World website. Not surprisingly, I grabbed the scripts from free web sources, and am still amazed at the variety of freely available scripts out there. I used DynamicDrive to find my scripts, which is a site MacDonald mentions, but he goes on to provide a list of some huge banks of material. I am definitely going to be perusing the javascript-2.com website; with 9,000 scripts there has to be some amazing stuff out there! I will say, however, for usability purposes DynamicDrive is a great site. Everything is neatly organized into categories that make sense, such as Image Effects: Galleries, Mouseover, Slideshows. You can't beat that kind of structure when you are trying to dig for something very specific.
I am also interested in learning more about the creation of scripts, so at some point I will spend some time checking out his suggested resource, webmonkey.com. For right now, though, I will be content with the premade stuff, which is undoubtedly better than what I could create at this juncture anyway. Obviously, as with everything else, compatibility with multiple browsers is an issue. Fortunately, a lot of the scripts out there list the browsers that they are compatible with. Testing them firsthand is still important, but knowing up front if a script is supposed to be widely compatible can go a long way towards narrowing the field and choosing the correct resource.
To check out the websites mentioned above, visit:
http://javascript-2.com/
http://www.dynamicdrive.com/
http://www.webmonkey.com/2010/02/javascript_tutorial/
By the way, on a humorous note, I love that Blogger, which is owned by Google, is able to catch that I spelled "AdSense" as "Adsense" at one point, but can't deal with the word "premade," which is in the dictionary as a non-hyphenated term. The attention to detail that would catch a proprietary term misspelling is crazy. If they could just add that detail to the rest of the language...
No book on web page construction would be complete without a section devoted to making money, and MacDonald delivers a pretty good chapter in Creating a Web Site: The Missing Manual. I was wishing for a little more breadth on the virtual shopping cart front, but then again, this is not a book about effective storefront creation. It is about web page creation and in that sense, he covers the simplest way to get a functioning shopping cart system in place. Additionally he covers other money-making ideas, which he appropriately refers to as "schemes." I like the wording, I have to say, because there is something inherently sleazy underlying the proliferation of advertisement all over the free web. Now, I am not lamenting the rampant commercialization of society here — there is already a countless quantity of research on the bombardment of advertising in the form of TV, radio, subliminal messages, and billboards. It has been happening forever and I'll save that discussion for another time. The real issue here, is that lurking behind many Internet ads is the possibility of inadvertently enter a phishing site. Not so innocuous.
That said, there is a lot of good, verified advertising out there and MacDonald devotes space in the book to using Google AdSense for both promoting your own business via ads on other people's websites and using AdSense to generate revenue by displaying those ads for others. While I am not interested in actually using AdSense as a revenue generator, what I appreciate about it is the subtlety Google applies to the concept. The text-only ads really do sit quietly on the page and are less of an intrusion than you would expect advertising to be. The targeted nature of that advertising is also key. Not only does it increase the likelihood that a user will click the ad, thus generating revenue for the site owner, you could almost argue that some of the ads actually offer value to the site. If I am reading about hot sauce, for instance, an ad link to a great hot sauce store might actually be just what I want to see. The Amazon Associates program might be just as good here, though, since the link could go right to a particular product and it doesn't scream AD in the same way that even the Google AdSense content does. The tradeoff, I guess, for the sleekness of the Amazon approach is that a user just clicking a link doesn't yield any profit and it is sort of unlikely that all that many people will buy the product in order to generate your commission.
One thing I am not crazy about is the AdSense for Search concept. I think the temptation for visitors to exit your site is that much greater when a Google search box is embedded right there, and that seems counterproductive to me. At least with the sidebar ads, a user has to see something relevant to your site contents to entice clicking. They may actually finish reading your website first or return after viewing the ad. With the search box I feel like you essentially just turned your website into the Google homepage. Even if you limit the Google searches to only your website, I feel it still takes something away from the site. A sleeker search option is to create one that combs your website and fits in with the overall look (as in no Google logo in the search box). Forget generating advertising revenue with the Google search feature; it is just a little too distracting.
Internet storefronts are almost a must for any physical store in this day and age. Users expect to, at the very least, be able to check out a new local store to get a sense of the environmental vibe before they set foot in the building. More significantly, however, many of those users may choose to buy products from the comfort of their homes, including people that could just as easily head down to the physical location. Convenience (or sometimes outright laziness) is key.
MacDonald does a good job of covering the slightly tricky task of adding e-commerce functions to your web site by covering the PayPal shopping cart. I have looked into open source software, and a cart can be added in other ways, but I have to say PayPal does provide a streamlined process since you can do everything from your account, including creating the cart buttons and so forth. I was also rather surprised to read in MacDonald's text that you can customize the colors and use buttons you have created, so you can make the PayPal generated pages fit the look of your website, at least to a point. I was previously under the impression that the pages would look distinctly PayPal and totally unattached to your own site design. Given that, I am going to explore PayPal as an option for the e-commerce portion of the Taste the World website. It might save some serious headaches. And on a technical note, the chargeback protection offered by a huge vendor like PayPal
JavaScript to add a little flair:
I have used scripts to create a form, slideshow, and remote and resident rollovers in my personal website. I will likely use these elements to add a little flair and some needed function to the Taste the World website. Not surprisingly, I grabbed the scripts from free web sources, and am still amazed at the variety of freely available scripts out there. I used DynamicDrive to find my scripts, which is a site MacDonald mentions, but he goes on to provide a list of some huge banks of material. I am definitely going to be perusing the javascript-2.com website; with 9,000 scripts there has to be some amazing stuff out there! I will say, however, for usability purposes DynamicDrive is a great site. Everything is neatly organized into categories that make sense, such as Image Effects: Galleries, Mouseover, Slideshows. You can't beat that kind of structure when you are trying to dig for something very specific.
I am also interested in learning more about the creation of scripts, so at some point I will spend some time checking out his suggested resource, webmonkey.com. For right now, though, I will be content with the premade stuff, which is undoubtedly better than what I could create at this juncture anyway. Obviously, as with everything else, compatibility with multiple browsers is an issue. Fortunately, a lot of the scripts out there list the browsers that they are compatible with. Testing them firsthand is still important, but knowing up front if a script is supposed to be widely compatible can go a long way towards narrowing the field and choosing the correct resource.
To check out the websites mentioned above, visit:
http://javascript-2.com/
http://www.dynamicdrive.com/
http://www.webmonkey.com/2010/02/javascript_tutorial/
By the way, on a humorous note, I love that Blogger, which is owned by Google, is able to catch that I spelled "AdSense" as "Adsense" at one point, but can't deal with the word "premade," which is in the dictionary as a non-hyphenated term. The attention to detail that would catch a proprietary term misspelling is crazy. If they could just add that detail to the rest of the language...
Wednesday, October 13, 2010
7.3 Typography again (huge topic, deserves more space)
This post will focus on a few more typography resources but it will also address some of the problems surrounding using interesting type on the web. First off, I think most people creating web sites realize that only a few fonts are widely supported by most browsers; fancy fonts that are not installed on a user's computer are simply converted to one of the standards. Using only these standard fonts is a sure way to guarantee that you are controlling the look of your web page, but unfortunately it can also make your web page a little boring. This is where using specialized fonts for headings is important to add interest while leaving most of the textual content in a more universal form.
This brings up some interesting issues related to how, exactly, you can get the heading text to render appropriately.
Use CSS to get creative:
Digital Web Magazine has a 2005 article by Garret Dimon that suggests various ways to apply CSS to text in order to achieve good design and readability. Some of the techniques are aimed at tweaking body text by adjusting line heights and employing bolding or italics to make text easily scannable. The article also suggests trying "some headings in all caps, rich colors, or with tighter word or letter spacing" as a way to set them apart. It goes on to list a few examples of well-designed websites that use only CSS to create differentiated and readable text. Truthfully, this simple advice has a point; adjusting the letter spacing to create a wider or narrower than normal heading can look cool, and requires very little effort. Using only CSS to alter text also has the advantage of being compliant with usability standards as screen readers should have no trouble with the text.
Check out the Dimon article here:
http://www.digital-web.com/articles/css_typography/
Stick an image in place of the headings:
Sometimes working with the standard web fonts is just not enough, no matter how many fancy colors or letter spacing tricks you try. There is a reason so many great fonts exist; we LIKE variety. Sometimes the structure of a specialty font communicates a clear message or emotion that one of the web fonts just doesn't. This is important not to overlook since communication through design is more complex than just having clearly readable text. Font styles can invoke meaning. In order to use a particular unsupported font for one or more headings, the easiest thing to do is just create a jpeg or gif image of that type and insert the graphic where the headings belong. This process is quick and can be accomplished by anyone, and has been my personal method of choice. However, there are a few downsides to this method, including accessibility issues. Screen readers will not handle images like regular text, so technically your site is not easily accessible to those using such technologies, or to anyone that has image display disabled. The other issue is that jpegs and gifs, depending on file size, can take longer to load. This might actually be noticeable on slower computers, especially if a lot of text is replaced by imagery.
Replace the text using sIFR:
Plain browser text can be replaced by small Flash movies that display fancier fonts. A javascript function controls this behind the scenes so users don't realize the replacement technique is happening. If Flash is disabled the font still displays, it just appears in the default text. The upside here is that the sIFR movies are small, taking up only around 20k, unlike the image text solution above. Also, since the default text is still there, screen readers have no trouble with recognizing the heading font as text.
To read more specifics about sIFR visit:
http://www.mikeindustries.com/blog/sifr/
Other possibilities exist, such as replacing text using javascript or image replacement techniques, but I won't cover them here because, quite frankly, I am too much of a novice to fully understand how to implement them.
Typography and web design articles:
A List Apart is an online resource geared towards web designers and covers all kinds of related topics. Not surprisingly, typography is covered in a number of articles. First off, the design of the web site is quite appealing. The text is black on a white background while the header and logo are a subtle beige. The article titles are set apart in a blue font, the color of which is repeated in a thin strip at the top of the page. Linked text appears in orange, creating a good visual contrast. The navigation structure is perfect. Main links appear across the top while a sub navigation system reveals main topics of interest such as design, code, and process.
The articles on this site are quite useful. For instance, Web Fonts at the Crossing by Richard Fink provides a good overview of the changes and future direction of web fonts. As part of his article he notes that the aforementioned sIFR technique is probably a relic already given the lack of Flash support in key parts of the market (iPhones, iPad). I love reading stuff like this as it gives me some perspective about what is in and what is out in terms of techniques. Another great find from this article is the @font-face css rule. This apparently downloads a font from your server if an end user doesn't have it, so the correct font appears on the page. This seems to have some issues associated with copyright since I guess users can grab the font from the CSS and only a limited number of fonts are available using this method because of this issue. I'm not sure I understand how the fonts can get grabbed, but with every new system comes the potential for abuse.
Anyway, read more about it and check out some of the articles here:
http://www.alistapart
Abc Typography: A Virtual Museum of Typography was a website assigned this week, and it bears a mention here. The site is divided into four sections of type and upon clicking a typeface it gives a brief description. Navigation tabs in the header area offer access to resources such as historical accounts of typography and links to some good free font downloads. The typography museum section of the website was, sadly, useless. Clicking a category such as modern or atypical opens a page with a drop down menu from which you are supposed to select a font; none of the links work, however, in any of the categories. Instead error message after error message confronts viewers. This is obviously enough to eclipse the other useful contents of the site, and frankly the good content can be found elsewhere on more functional sites, so why bother browsing here?
If you want to check out the Abc Typography: A Virtual Museum of Typography, click here:
http://abc.planet-typography.com/index.html
I'll close today with one other resource, the Typographic website. This resource has lots of useful information, including a gallery. Beyond simply showing what the featured typefaces look like, the gallery shows artwork created to express the feeling of the type; some of the work is extremely inspiring and reinforces the use of type as an art in itself. Also noteworthy is the timeline. It scrolls horizontally, but it looks so cool that this is completely forgivable. Also, since the layout is a classic horizontal timeline structure it is actually easier to read and underscores the linearity of the material. This part alone is worth checking out. In fact, the timeline is so cool I might forgive them for having a header "logo" graphic that doesn't link to the home page. Additionally, the glossary of typographic terms is quite extensive, so this web site would also be worth bookmarking as a quick reference guide.
Check it out here:
http://www.rsub.com/typographic/
This brings up some interesting issues related to how, exactly, you can get the heading text to render appropriately.
Use CSS to get creative:
Digital Web Magazine has a 2005 article by Garret Dimon that suggests various ways to apply CSS to text in order to achieve good design and readability. Some of the techniques are aimed at tweaking body text by adjusting line heights and employing bolding or italics to make text easily scannable. The article also suggests trying "some headings in all caps, rich colors, or with tighter word or letter spacing" as a way to set them apart. It goes on to list a few examples of well-designed websites that use only CSS to create differentiated and readable text. Truthfully, this simple advice has a point; adjusting the letter spacing to create a wider or narrower than normal heading can look cool, and requires very little effort. Using only CSS to alter text also has the advantage of being compliant with usability standards as screen readers should have no trouble with the text.
Check out the Dimon article here:
http://www.digital-web.com/articles/css_typography/
Stick an image in place of the headings:
Sometimes working with the standard web fonts is just not enough, no matter how many fancy colors or letter spacing tricks you try. There is a reason so many great fonts exist; we LIKE variety. Sometimes the structure of a specialty font communicates a clear message or emotion that one of the web fonts just doesn't. This is important not to overlook since communication through design is more complex than just having clearly readable text. Font styles can invoke meaning. In order to use a particular unsupported font for one or more headings, the easiest thing to do is just create a jpeg or gif image of that type and insert the graphic where the headings belong. This process is quick and can be accomplished by anyone, and has been my personal method of choice. However, there are a few downsides to this method, including accessibility issues. Screen readers will not handle images like regular text, so technically your site is not easily accessible to those using such technologies, or to anyone that has image display disabled. The other issue is that jpegs and gifs, depending on file size, can take longer to load. This might actually be noticeable on slower computers, especially if a lot of text is replaced by imagery.
Replace the text using sIFR:
Plain browser text can be replaced by small Flash movies that display fancier fonts. A javascript function controls this behind the scenes so users don't realize the replacement technique is happening. If Flash is disabled the font still displays, it just appears in the default text. The upside here is that the sIFR movies are small, taking up only around 20k, unlike the image text solution above. Also, since the default text is still there, screen readers have no trouble with recognizing the heading font as text.
To read more specifics about sIFR visit:
http://www.mikeindustries.com/blog/sifr/
Other possibilities exist, such as replacing text using javascript or image replacement techniques, but I won't cover them here because, quite frankly, I am too much of a novice to fully understand how to implement them.
Typography and web design articles:
A List Apart is an online resource geared towards web designers and covers all kinds of related topics. Not surprisingly, typography is covered in a number of articles. First off, the design of the web site is quite appealing. The text is black on a white background while the header and logo are a subtle beige. The article titles are set apart in a blue font, the color of which is repeated in a thin strip at the top of the page. Linked text appears in orange, creating a good visual contrast. The navigation structure is perfect. Main links appear across the top while a sub navigation system reveals main topics of interest such as design, code, and process.
The articles on this site are quite useful. For instance, Web Fonts at the Crossing by Richard Fink provides a good overview of the changes and future direction of web fonts. As part of his article he notes that the aforementioned sIFR technique is probably a relic already given the lack of Flash support in key parts of the market (iPhones, iPad). I love reading stuff like this as it gives me some perspective about what is in and what is out in terms of techniques. Another great find from this article is the @font-face css rule. This apparently downloads a font from your server if an end user doesn't have it, so the correct font appears on the page. This seems to have some issues associated with copyright since I guess users can grab the font from the CSS and only a limited number of fonts are available using this method because of this issue. I'm not sure I understand how the fonts can get grabbed, but with every new system comes the potential for abuse.
Anyway, read more about it and check out some of the articles here:
http://www.alistapart
Abc Typography: A Virtual Museum of Typography was a website assigned this week, and it bears a mention here. The site is divided into four sections of type and upon clicking a typeface it gives a brief description. Navigation tabs in the header area offer access to resources such as historical accounts of typography and links to some good free font downloads. The typography museum section of the website was, sadly, useless. Clicking a category such as modern or atypical opens a page with a drop down menu from which you are supposed to select a font; none of the links work, however, in any of the categories. Instead error message after error message confronts viewers. This is obviously enough to eclipse the other useful contents of the site, and frankly the good content can be found elsewhere on more functional sites, so why bother browsing here?
If you want to check out the Abc Typography: A Virtual Museum of Typography, click here:
http://abc.planet-typography.com/index.html
I'll close today with one other resource, the Typographic website. This resource has lots of useful information, including a gallery. Beyond simply showing what the featured typefaces look like, the gallery shows artwork created to express the feeling of the type; some of the work is extremely inspiring and reinforces the use of type as an art in itself. Also noteworthy is the timeline. It scrolls horizontally, but it looks so cool that this is completely forgivable. Also, since the layout is a classic horizontal timeline structure it is actually easier to read and underscores the linearity of the material. This part alone is worth checking out. In fact, the timeline is so cool I might forgive them for having a header "logo" graphic that doesn't link to the home page. Additionally, the glossary of typographic terms is quite extensive, so this web site would also be worth bookmarking as a quick reference guide.
Check it out here:
http://www.rsub.com/typographic/
Tuesday, October 12, 2010
7.2 Fonts and type
"Don’t forget to draw all of the characters a good font needs! That means punctuation, tildes, accents, parentheses and brackets, and numerals. You’ll also want to include obscure characters like the thorn and eth."
- Alec Julien
"So you want to create a font"
The quote above came from a post on one of my favorite web resources, I Love Typography, and illustrates what amounts to a quintessential difference between high-quality and more dubiously designed fonts. In a previous post I spent time discussing the beauty of free, unrestricted fonts and I stand by the fact that there are many wonderful fonts out there. It's just that you really have to dig around to find the good stuff; even then, a lot of really nice free fonts are missing essential characters and this can obviously pose a number of problems. This brings me to I Love Typography and the simple beauty of sometimes paying for that certain perfect resource. The web site contains a bar running down the right-hand side of the page with featured fonts; new choices are added each month. All of the fonts are clearly high quality (whether they are useful for a specific project or not) and this is a big deal. They tend to have the full range of characters and they are just better-constructed than a lot of the free resources out there. Giorgio Sans, for instance; you would never get that for free and for the right application it would be well worth the $50.
I Love Typography is much more than just a resource for discovering fonts, however, and has many, many useful articles. The topics range from choosing typefaces, readability issues, and "best font" spotlights to articles on the history of various typefaces. The content is definitely written in an easy and enjoyable style and the web site itself is simple and elegant. When various article contributors mention that fonts should enhance (not impede) communication, it is an easy idea to buy into because the web site design showcases this concept beautifully. The text is black on either a white or beige background, which provides a perfect space to showcase the pictures and fonts described in the articles. A splash of color is added by repeating the muted orange (from a small graphic in the logo) across the top of the page and in the section headings. The footer is a beautiful contrast with white and orange text on a black background. And that's it-black, white or beige, orange, and gray. Far from boring, however, the layout capitalizes on just the right balances of color and negative space. The articles can get lengthy (for a web page), especially if you read the comments, so choosing a light surface was smart. It is easy on the eyes and that translates into staying around to click through the archives. In fact, I am thinking about my own blog page and seriously reconsidering my dark background, light text combination. I really like that look, but the postings are a little lengthy and numerous to support that style, I think. White on black is fine for shorter content, but it can get tiring to read after a while. Anyway, I Love Typography got their design just right. The only caveat here is that I dislike that some pages employ the white background and others the beige. This breaks the unity of the web site just a bit because the choice of which color is used seems arbitrary; it doesn't seem to be according to subject and it definitely isn't according to posting date.
Check out the website here:
http://ilovetypography.com/
And don't miss this article specifically geared at Web typography (the Designview/* example is gorgeous minimalist website; definitely click there!):
http://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/
Typographica is another web resource with some great reviews of typography. Why is the review important? Because if you can't quite wrap your head around what to think about a font someone else has picked it apart already. And the critiques are honest ones:
"If we compare Candy with Kobayashi’s Lithium, it looks inappropriate to name them as descendants of that 'vision of the future' which implied an entirely different concept."
- Claudio Piccinini
This website was apparently redesigned in 2009, and has some evidence of new content (two articles from 2010, a few reviews from 2009), however a lot of reviews seem to be from 2007 and 2008. For instance, under the feature tab, "Typefaces of 2008" is the latest article of this kind. This is still a really good resource, but perhaps not the most timely if you are looking for the very latest in font reviews and information. Fortunately I am not, so this website is current enough.
The website itself, much like I Love Typography, is minimal in design. This helps to make the featured fonts stand out. The actual typefaces employed by the website for the body, logo, and headings are diverse, and yet they work together, which is a testament to judiciously chosen variety. Additionally, the navigation structure is perfect. Users can choose between designers, foundries, and classifications, which makes this perfect for experienced users (that would actually look for a particular type designer) or amateurs who might only know a category such as serif. I really love the option to search by foundry as well because users can start to see patterns develop. For example, I noticed that two attractive fonts, Paperback and Luxury, were both distributed by House Industries. I then searched that foundry and located Studio Lettering, a nice script font. The point here is that this opens up a whole new searching and sorting method that allows users to become familiar with high-quality distributors. While the specific font choices on this web site might be somewhat limited, you can then search elsewhere for resources by a designer or distributor that you already know you like. A great way to start learning the ins and outs of the type world.
Check out Typographica here:
http://typographica.org/
I'll dedicate another post to more online typography resources since there are a lot of worthwhile websites and each one deserves a fair discussion. As for this post, just looking through these sites has reminded me that free resources are awesome, but sometimes you just get what you pay for. I may have to invest in a few gorgeous fonts for my website (and then pine over the many more that I can't afford).
- Alec Julien
"So you want to create a font"
The quote above came from a post on one of my favorite web resources, I Love Typography, and illustrates what amounts to a quintessential difference between high-quality and more dubiously designed fonts. In a previous post I spent time discussing the beauty of free, unrestricted fonts and I stand by the fact that there are many wonderful fonts out there. It's just that you really have to dig around to find the good stuff; even then, a lot of really nice free fonts are missing essential characters and this can obviously pose a number of problems. This brings me to I Love Typography and the simple beauty of sometimes paying for that certain perfect resource. The web site contains a bar running down the right-hand side of the page with featured fonts; new choices are added each month. All of the fonts are clearly high quality (whether they are useful for a specific project or not) and this is a big deal. They tend to have the full range of characters and they are just better-constructed than a lot of the free resources out there. Giorgio Sans, for instance; you would never get that for free and for the right application it would be well worth the $50.
I Love Typography is much more than just a resource for discovering fonts, however, and has many, many useful articles. The topics range from choosing typefaces, readability issues, and "best font" spotlights to articles on the history of various typefaces. The content is definitely written in an easy and enjoyable style and the web site itself is simple and elegant. When various article contributors mention that fonts should enhance (not impede) communication, it is an easy idea to buy into because the web site design showcases this concept beautifully. The text is black on either a white or beige background, which provides a perfect space to showcase the pictures and fonts described in the articles. A splash of color is added by repeating the muted orange (from a small graphic in the logo) across the top of the page and in the section headings. The footer is a beautiful contrast with white and orange text on a black background. And that's it-black, white or beige, orange, and gray. Far from boring, however, the layout capitalizes on just the right balances of color and negative space. The articles can get lengthy (for a web page), especially if you read the comments, so choosing a light surface was smart. It is easy on the eyes and that translates into staying around to click through the archives. In fact, I am thinking about my own blog page and seriously reconsidering my dark background, light text combination. I really like that look, but the postings are a little lengthy and numerous to support that style, I think. White on black is fine for shorter content, but it can get tiring to read after a while. Anyway, I Love Typography got their design just right. The only caveat here is that I dislike that some pages employ the white background and others the beige. This breaks the unity of the web site just a bit because the choice of which color is used seems arbitrary; it doesn't seem to be according to subject and it definitely isn't according to posting date.
Check out the website here:
http://ilovetypography.com/
And don't miss this article specifically geared at Web typography (the Designview/* example is gorgeous minimalist website; definitely click there!):
http://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/
Typographica is another web resource with some great reviews of typography. Why is the review important? Because if you can't quite wrap your head around what to think about a font someone else has picked it apart already. And the critiques are honest ones:
"If we compare Candy with Kobayashi’s Lithium, it looks inappropriate to name them as descendants of that 'vision of the future' which implied an entirely different concept."
- Claudio Piccinini
This website was apparently redesigned in 2009, and has some evidence of new content (two articles from 2010, a few reviews from 2009), however a lot of reviews seem to be from 2007 and 2008. For instance, under the feature tab, "Typefaces of 2008" is the latest article of this kind. This is still a really good resource, but perhaps not the most timely if you are looking for the very latest in font reviews and information. Fortunately I am not, so this website is current enough.
The website itself, much like I Love Typography, is minimal in design. This helps to make the featured fonts stand out. The actual typefaces employed by the website for the body, logo, and headings are diverse, and yet they work together, which is a testament to judiciously chosen variety. Additionally, the navigation structure is perfect. Users can choose between designers, foundries, and classifications, which makes this perfect for experienced users (that would actually look for a particular type designer) or amateurs who might only know a category such as serif. I really love the option to search by foundry as well because users can start to see patterns develop. For example, I noticed that two attractive fonts, Paperback and Luxury, were both distributed by House Industries. I then searched that foundry and located Studio Lettering, a nice script font. The point here is that this opens up a whole new searching and sorting method that allows users to become familiar with high-quality distributors. While the specific font choices on this web site might be somewhat limited, you can then search elsewhere for resources by a designer or distributor that you already know you like. A great way to start learning the ins and outs of the type world.
Check out Typographica here:
http://typographica.org/
I'll dedicate another post to more online typography resources since there are a lot of worthwhile websites and each one deserves a fair discussion. As for this post, just looking through these sites has reminded me that free resources are awesome, but sometimes you just get what you pay for. I may have to invest in a few gorgeous fonts for my website (and then pine over the many more that I can't afford).
Monday, October 11, 2010
7.1 Imagery and a look at some layouts
I was a little disappointed as I finished up the final chapter of Jason Beaird's The Principles of Beautiful Web Design, not because of the book contents, but rather because it was truly an enjoyable read. He effectively scratched the surface of classic design elements and underscored the importance of incorporating those elements into web design, regardless of how easy it is to get distracted by flashing buttons and crazy animations. The message of this book is clear: no matter how trendy or unique a design, with proper layout it can retain a timeless quality.
Beaird's last chapter focuses on using imagery in a way that creates a pleasing visual appeal without losing sight of the mission to communicate the site contents. He also goes through a number of options for procuring images, including the real faux pas of imagery theft. In fact, I was amused to learn that the latter has its own special name — Google Ganking. I appreciated his descriptions of using different Photoshop techniques to create interesting effects and thought his suggestions were explained in thorough detail, to the point that an even an amateur could follow his advice. Additionally, his choice of very pedestrian imagery helped to drive home the point that much can be done to elevate the look of graphics for a web page. He did have one slight slip, however, that I think bears some attention here.
In a hypothetical example he shows some creative cropping of an image of some stonework on the Biltmore Mansion. He suggests that the somewhat ordinary image will be tweaked for inclusion with a news article about the estate, and proceeds to crop in a manner that allows the head and arm of a relief carving to break the top and side edges of the picture frame; he also manipulates the background and foreground separately to create an unnatural vividness, and thus a 3-D effect, to the carving portion of the image. This raises some questions for two reasons, both related to his choice of client. Since knowing your client's needs is key (and a point he mentions throughout the book), the image manipulation suggested here is surprising. First, the broken frame is atypical of what a newspaper would ordinarily display. It seems less documentary in nature than a news article would require. Perhaps more importantly, however, is that the obvious digital manipulation would cause some viewers to actively question what other images the news source might be doctoring; this is a question I am certain all news sources would choose to avoid at all costs. Therefore, flaunting creative image altering would be an extremely poor choice.
A news source has to maintain a certain image of objectivity (at least to a point) and despite the widespread public knowledge of digital imaging technology it is still scandalous when an image from a news source is exposed as being obviously doctored. It gets at the heart of truth in imagery; people do not want to think a news source is actively manipulating any further than traditional cropping. (I will save the whole philosophical discussion on the history of image manipulation in all forms for a later post.) Now, you may be thinking I am making a lot of this example; it is, after all, not a huge news story or even a real event. The point here, however, is to highlight how easy it is for "designer" mode to control and eclipse content communication in favor of something that just looks cool. Beaird's image would look great on the Biltmore web site or on an artistic museum website feature page, but for a news website it really eclipses the purpose of the news source, which is to communicate factual information. The overall danger here is in sliding into a "photoshoping" mentality where the lines between acceptable manipulation for different sources become very blurry.
As a matter of fact, another image in this section — a shot of downtown Charleston — is also altered. While Beaird doesn't name a source for where the image might wind up, he does seemingly make an alteration that goes unmentioned in the book and that makes me think that such an image tweak is second nature for him. He describes shifting the focal point by cropping the unsightly edge of the image; this includes cropping out power lines near the steeple of a church. Upon close examination of the source image, however, several of the power lines appear to run horizontally from the image edge to behind the church. In the cropped image that area of the shot displays only clear blue, empty sky. He has certainly cropped most of the power lines out, but he obviously also used the cloning tool to eliminate those that couldn't be cropped (I believe he extended the long cloud area this way as well). He fails to mention this point. Again, this is a common practice and is fine, unless the image goes to a news client. That would create an unrealistic, "better" view of reality. I am simply pointing out that his failure to mention the cloning might suggest he isn't thinking about it.
All of that said, Beaird is very cognizant throughout the book that communication is the true purpose of design and he illustrates that point over and over through his examples. Next, I will take a cue from one of his earlier chapters on employing the rule of thirds and showcase some potential web site layouts that I sketched using his 3" x 3" grid method.
Below are eight sketches for possible layouts for the Taste the World website. In the first two I have tried out an off-center one column layout with a large header and a large static image area. The other is a three column layout. The latter seems a bit too busy, but the first could work. The image on the left would remain constant across the page, and the content boxes would contain news and a welcome on the home page. This area could transition to a solid block on the product pages.
These designs incorporate two column layouts as well. In the first, the header incorporates a search box, and the main navigation is located underneath the bar in order to break out of the box a little. A secondary navigation bar will contain product lists. I also took a cue from a website featured in Beaird's book and tried out a grid of images. I like the additional navigation, but am not crazy about the images section. The second design expands the main navigation bar near the top by including the product categories there. I like this idea because the products can remain the focus of the site by virtue of their visibility. The image here is smaller and allows for some negative space on the page. The angled placement would direct the viewer's eye toward the main content block, which would be effective for highlighting that area. I think this design has real potential.
The bottom image here looks too blocky and is out of the running immediately. The top image employs a two column design and like the example above, incorporates a nice area of negative space. I like the organic shape of the header in this design and the incorporation of the product categories in the main header.
In this last set of sketches I have again used two column designs. These seem to be the best for a web site of this size. In the first image I used the general layout of a free CSS template I saw, with a round image of rice overlapping the navigation bar. I thought perhaps some coffee beans or a pile of spices would look good in that area. I was also drawn to the oversized header and navigation, but think that ultimately a simpler design might be better. The last image is a pretty standard design, but I stuck the content area on the left instead of the right. I remember Beaird suggesting this as a way to add emphasis to a content block and I like the look.
While I will play around with these layouts a bit more, I am leaning towards the organic edge header layout. I think with a subtle right-left gradient and an analogous color scheme that this layout would work well for the contents. The product pages can use the left-hand content area to feature thumbnails of additional products while the main header can incorporate the broader product categories. This should make for easy navigation. Now, on to color swatches and images...
Beaird's last chapter focuses on using imagery in a way that creates a pleasing visual appeal without losing sight of the mission to communicate the site contents. He also goes through a number of options for procuring images, including the real faux pas of imagery theft. In fact, I was amused to learn that the latter has its own special name — Google Ganking. I appreciated his descriptions of using different Photoshop techniques to create interesting effects and thought his suggestions were explained in thorough detail, to the point that an even an amateur could follow his advice. Additionally, his choice of very pedestrian imagery helped to drive home the point that much can be done to elevate the look of graphics for a web page. He did have one slight slip, however, that I think bears some attention here.
In a hypothetical example he shows some creative cropping of an image of some stonework on the Biltmore Mansion. He suggests that the somewhat ordinary image will be tweaked for inclusion with a news article about the estate, and proceeds to crop in a manner that allows the head and arm of a relief carving to break the top and side edges of the picture frame; he also manipulates the background and foreground separately to create an unnatural vividness, and thus a 3-D effect, to the carving portion of the image. This raises some questions for two reasons, both related to his choice of client. Since knowing your client's needs is key (and a point he mentions throughout the book), the image manipulation suggested here is surprising. First, the broken frame is atypical of what a newspaper would ordinarily display. It seems less documentary in nature than a news article would require. Perhaps more importantly, however, is that the obvious digital manipulation would cause some viewers to actively question what other images the news source might be doctoring; this is a question I am certain all news sources would choose to avoid at all costs. Therefore, flaunting creative image altering would be an extremely poor choice.
A news source has to maintain a certain image of objectivity (at least to a point) and despite the widespread public knowledge of digital imaging technology it is still scandalous when an image from a news source is exposed as being obviously doctored. It gets at the heart of truth in imagery; people do not want to think a news source is actively manipulating any further than traditional cropping. (I will save the whole philosophical discussion on the history of image manipulation in all forms for a later post.) Now, you may be thinking I am making a lot of this example; it is, after all, not a huge news story or even a real event. The point here, however, is to highlight how easy it is for "designer" mode to control and eclipse content communication in favor of something that just looks cool. Beaird's image would look great on the Biltmore web site or on an artistic museum website feature page, but for a news website it really eclipses the purpose of the news source, which is to communicate factual information. The overall danger here is in sliding into a "photoshoping" mentality where the lines between acceptable manipulation for different sources become very blurry.
As a matter of fact, another image in this section — a shot of downtown Charleston — is also altered. While Beaird doesn't name a source for where the image might wind up, he does seemingly make an alteration that goes unmentioned in the book and that makes me think that such an image tweak is second nature for him. He describes shifting the focal point by cropping the unsightly edge of the image; this includes cropping out power lines near the steeple of a church. Upon close examination of the source image, however, several of the power lines appear to run horizontally from the image edge to behind the church. In the cropped image that area of the shot displays only clear blue, empty sky. He has certainly cropped most of the power lines out, but he obviously also used the cloning tool to eliminate those that couldn't be cropped (I believe he extended the long cloud area this way as well). He fails to mention this point. Again, this is a common practice and is fine, unless the image goes to a news client. That would create an unrealistic, "better" view of reality. I am simply pointing out that his failure to mention the cloning might suggest he isn't thinking about it.
All of that said, Beaird is very cognizant throughout the book that communication is the true purpose of design and he illustrates that point over and over through his examples. Next, I will take a cue from one of his earlier chapters on employing the rule of thirds and showcase some potential web site layouts that I sketched using his 3" x 3" grid method.
Below are eight sketches for possible layouts for the Taste the World website. In the first two I have tried out an off-center one column layout with a large header and a large static image area. The other is a three column layout. The latter seems a bit too busy, but the first could work. The image on the left would remain constant across the page, and the content boxes would contain news and a welcome on the home page. This area could transition to a solid block on the product pages.
These designs incorporate two column layouts as well. In the first, the header incorporates a search box, and the main navigation is located underneath the bar in order to break out of the box a little. A secondary navigation bar will contain product lists. I also took a cue from a website featured in Beaird's book and tried out a grid of images. I like the additional navigation, but am not crazy about the images section. The second design expands the main navigation bar near the top by including the product categories there. I like this idea because the products can remain the focus of the site by virtue of their visibility. The image here is smaller and allows for some negative space on the page. The angled placement would direct the viewer's eye toward the main content block, which would be effective for highlighting that area. I think this design has real potential.
The bottom image here looks too blocky and is out of the running immediately. The top image employs a two column design and like the example above, incorporates a nice area of negative space. I like the organic shape of the header in this design and the incorporation of the product categories in the main header.
In this last set of sketches I have again used two column designs. These seem to be the best for a web site of this size. In the first image I used the general layout of a free CSS template I saw, with a round image of rice overlapping the navigation bar. I thought perhaps some coffee beans or a pile of spices would look good in that area. I was also drawn to the oversized header and navigation, but think that ultimately a simpler design might be better. The last image is a pretty standard design, but I stuck the content area on the left instead of the right. I remember Beaird suggesting this as a way to add emphasis to a content block and I like the look.
While I will play around with these layouts a bit more, I am leaning towards the organic edge header layout. I think with a subtle right-left gradient and an analogous color scheme that this layout would work well for the contents. The product pages can use the left-hand content area to feature thumbnails of additional products while the main header can incorporate the broader product categories. This should make for easy navigation. Now, on to color swatches and images...
Sunday, October 10, 2010
6.4 More on trends and a few tutorials
In my last post I talked a bit about using grunge styles effectively and now I am turning my attention to something of a polar opposite: Web 2.0 styling. This design trend is clean and minimalist in appearance. Glossy buttons, gradients, large fonts, drop shadows, and reflections are all elements used to create a polished and sophisticated feel. Interestingly, although the appearance of Web 2.0 design is sleek and simplified, especially as compared to a layered style like grunge, creating the look can be quite complex. Something as simple as a gradient can easily be handled poorly if too much light or too many color changes are employed. Drop shadows can be incredibly overbearing elements when misused and of course the list of missteps goes on. Instead, subtle handling of many elements is required behind the scenes, so to speak, in order to make a minimalist design look beautiful and exciting (read: not flat looking).
Smashing Magazine offers a great compilation of design tutorials related to all things Web 2.0. Everything from creating a logo to making glossy buttons and reflections is covered here. The shiny floor effect, #29 on the list, links to a simple tutorial on using Photoshop to create a text reflection. The tutorial is from the Photoshop Candy website, which also offers many more demos on how to create some interesting graphic effects. Even more exciting, however, is that free downloadable files containing editable versions of some of the effects are available. Sections include icons (such as Twitter, Facebook, and RSS), CSS templates, and Photoshop graphics. This site is extremely easy to navigate, the design is clean, and the tutorials are easy to follow. I highly recommend checking it out for a variety of different resources, Web 2.0 and otherwise.
Check out Photoshop Candy here:
http://photoshopcandy.com/
Another noteworthy tutorial featured on the Smashing Magazine website is #50, Mike Rundle's gradient tutorial written for the 9rules blog. This is another well-written guide to creating an effect in Photoshop, this time using layers and the gradient tool. The interesting thing about this tutorial is that Rundle addresses some of the most common mistakes people make when creating a gradient effect, then walks users through a better method. He acknowledges the simplicity of gradients, and goes on to point out that such simplicity makes it that much more essential to wield the tool correctly. He is right; there is little room for error. The rest of the contents on 9rules are probably worth checking out as well. They have a pretty extensive archive and address all kinds of topics ranging from blogging tips to design to a post on the debate over fair use. It is worthwhile reading for sure.
Checkout the 9rules blog here:
http://blog.9rules.com/2006/08/a-gradient-tutorial/
And Smashing Magazine's Web 2.0 tutorial resource list can be found here:
http://www.smashingmagazine.com/2007/03/10/web-20-tutorials-round-up/
Moving on from Web 2.0, Vandelay Design is worth mentioning as source for some really good Photoshop texture tutorials. Beyond these resources, however, the Vandelay website is great to browse for inspiration of all kinds. They feature lists of "the best" of everything from blog headers to creative navigation. The variety of resources on this site is staggering. The sheer number of Photoshop tutorials, including basics such as using various brushes, makes it a good first place to look for design how-to materials.
Check out Vandelay Designs' texture tutorials here (and then stick around to browse the design ideas):
http://vandelaydesign.com/blog/design/photoshop-tutorials-textures/
Smashing Magazine offers a great compilation of design tutorials related to all things Web 2.0. Everything from creating a logo to making glossy buttons and reflections is covered here. The shiny floor effect, #29 on the list, links to a simple tutorial on using Photoshop to create a text reflection. The tutorial is from the Photoshop Candy website, which also offers many more demos on how to create some interesting graphic effects. Even more exciting, however, is that free downloadable files containing editable versions of some of the effects are available. Sections include icons (such as Twitter, Facebook, and RSS), CSS templates, and Photoshop graphics. This site is extremely easy to navigate, the design is clean, and the tutorials are easy to follow. I highly recommend checking it out for a variety of different resources, Web 2.0 and otherwise.
Check out Photoshop Candy here:
http://photoshopcandy.com/
Another noteworthy tutorial featured on the Smashing Magazine website is #50, Mike Rundle's gradient tutorial written for the 9rules blog. This is another well-written guide to creating an effect in Photoshop, this time using layers and the gradient tool. The interesting thing about this tutorial is that Rundle addresses some of the most common mistakes people make when creating a gradient effect, then walks users through a better method. He acknowledges the simplicity of gradients, and goes on to point out that such simplicity makes it that much more essential to wield the tool correctly. He is right; there is little room for error. The rest of the contents on 9rules are probably worth checking out as well. They have a pretty extensive archive and address all kinds of topics ranging from blogging tips to design to a post on the debate over fair use. It is worthwhile reading for sure.
Checkout the 9rules blog here:
http://blog.9rules.com/2006/08/a-gradient-tutorial/
And Smashing Magazine's Web 2.0 tutorial resource list can be found here:
http://www.smashingmagazine.com/2007/03/10/web-20-tutorials-round-up/
Moving on from Web 2.0, Vandelay Design is worth mentioning as source for some really good Photoshop texture tutorials. Beyond these resources, however, the Vandelay website is great to browse for inspiration of all kinds. They feature lists of "the best" of everything from blog headers to creative navigation. The variety of resources on this site is staggering. The sheer number of Photoshop tutorials, including basics such as using various brushes, makes it a good first place to look for design how-to materials.
Check out Vandelay Designs' texture tutorials here (and then stick around to browse the design ideas):
http://vandelaydesign.com/blog/design/photoshop-tutorials-textures/
Saturday, October 9, 2010
6.3 Texture resources
I will admit that I am addicted to using textures in images and that I shamelessly shoot pictures (often with my cell phone camera) of anything I see that piques my interest. This sometimes annoys my friends as I stop walking to shoot a picture of a weird crack in the sidewalk or paint peeling off the underbelly of an airplane at a naval museum. I actually have a pretty large stockpile of these images, but am always excited to find new resources. As such, the spotlighted websites for this week have to do with free texture resources and articles about design trends in the textural sphere.
All about grunge:
Sven Lennartz wrote an article for Smashing Magazine in early 2008 about grunge style in which he suggests that it is perhaps a reaction against glossy Web 2.0 styling trends. He goes on to state, "Will it establish itself as a trend? Probably not." I have to differ with his opinion here since I think the grunge look is actually quite pervasive, and probably was even two years ago. It comes in various forms, some subtle, some not so much. It incorporates anything from "dirty" textures to wallpaper textures, ink splatters, broken borders (and sometimes layers combinations of several or all of these textures). I see it on websites and in print designs quite frequently. Some of the more subtle uses look quite pretty and a little less dirty, but have unmistakable elements. I also see it in certain fashions (just look at the clothing and accessories in a Hot Topic store for lots of examples. Not a trend? I have seen lots of MySpace users employ extremely grotesque versions of grunge style, and to me that use by non-designers signals that the style has truly permeated the web.
Despite the misguided assessment of the scope of grunge, the Smashing Magazine article showcases a lot of really great resources for finding grungy icons, borders, and backgrounds. It may be becoming a bit clichéd as a style, but I do think that when handled lightly it is still a style that can be very effective in adding interest to a website. And yes, I am on the grunge bandwagon as I included homemade ink spatters as button elements in my personal website.
Check out Smashing Magazine for great grunge resources here:
http://www.smashingmagazine.com/2008/01/29/grunge-style-in-modern-web-design/#comments
Another resource for grunge backgrounds is the Grunge Textures website. This website is actually a perfect example of the subtle use of grunge elements to add interest to a page without overwhelming viewers. The main page showcases some intense textures such as bright graffiti and hard, cracked mud. Each of the nine textures link to categories of elements, such as metal, mud, wood, and so forth. The genius here is that from page to page the website features great bold textures, often in thumbnail batches, that do not compete with the website's own grunge styling. This is because the background looks like paper with a very light speckled pattern; the top and bottom edges of the main content block look like torn paper and reveal a header and footer that has a more pronounced, but still subtle, paint peeling pattern. Beyond the textures, the color scheme is a neutral monochromatic palette in shades of brown and tan. This creates a neutral space to showcase the bright and often chaotic texture graphics featured on the website. Grunge lettering at the top of the page helps to solidify the message that grunge resources are the content. Overall the site is fascinating because the grunge styling really does directly communicate the content and message of the website.
The backgrounds at Grunge Textures are all free for use in a variety of media (I love shared resources on the web!):
http://www.grungetextures.com/
The Texture King website offers more free resources and has a category called "grunge" that showcases some truly beautiful stains, weathered sidewalks, paint splatters, and the unforgettable image #6, which I believe is a mold-spotted concrete surface. Besides the specific grunge category, many — probably most — of the other categories would also make good grungy backgrounds. Dirt, concrete, rust, paint, and stone are all begging to be incorporated into this look.
Much like the Grunge Textures website, Texture King displays a grunge design employed with considerable restraint. The main content and header areas are white with gray and sparingly-used orange text. All the edges are crisp and clean which creates a nice contrast with the grunge elements of the background area. The area behind the page contains these grunge pieces, which are rendered in various shades of white and light gray. The pattern consists of small, lightly colored diagonal lines that look a bit like small tire imprints. This creates visual interest and draws your eye across and down the main content area of the page. A slight staining effect is visible at the top edges of this background area, and doubles as a drop shadow effect. The combination of clean lines and small grunge touches really makes this site inviting to view and presents a neutral surface in which the downloadable textures can shine.
Check out the free stock textures at Texture King here:
http://www.textureking.com/
graffittied walls, and paint peeling off metal rails when you check out this site.
As for the design, this site definitely has a rougher look and the logo text, black background, and featured artworks scream metal band to me. This is probably an appropriate association. I do like the gallery display as you can see 30 attractive thumbnails simultaneously and the black background creates a nice neutral space for showcasing these images. Two features really stand out however, and make this gallery fantastic. First, each thumbnail is a rollover trigger that automatically displays a slightly larger image. This is great because you can see more details without committing to actually clicking on anything. Once you do click, however (and you get a choice of large, medium, or small preview), a fantastic feature opens up. On the detail page is a larger view of the image, along with a color swatch detailing the common colors in the image. You can download the swatch just like on a color picker website. This is fantastic because it makes using similar colors pulled from a base image extremely easy; what better way to create harmony in a web design. I really love this feature because it saves the step of uploading the image into a color website in order to generate such a swatch. Awesome.
Not so awesome, however, is that the website is left justified, leaving all the empty space visible on the right hand side of my browser. Now, you may be thinking this is nit picky, that I can just resize my browser if it bothers me, and so forth. This is technically true, but we judge websites all the time on these seemingly small details and they do take away from the overall design effects. See how much space I spent writing about this issue here? It is also the last thing I mentioned and probably went a long way towards eclipsing the good features I mentioned just before it. It is bothersome to see something that is unbalanced for no good reason and it isn't that hard to center your website — just do it.
Check out Urban Dirty here:
http://urbandirty.com/
And to end, there are a few more resources to mention. The following websites also offers free textures — some of them good, some of them about as obnoxious as I've seen (but I guess there's a good use for everything). Two Flickr pages, Seamless Free Textures and Best Textures (the latter is actually a group of around 3,500 contributors) offer a lot of choices. Since Fickr groups are somewhat less manageable than dedicated sites, Best Textures has some general images (like portraits) incorporated into the mix. I guess some people forgot how to read… Anyway, regardless of these little slips, both pages offer a lot of resources, as in over 8,000 texture images in one place. They are free, of course, and to me this represents the best of the Internet. Communities of people that design things because they can and then contribute to the broader world by making resources available to anyone. I really love it.
Deviant Art is an online store that showcases artist's works and has a feature that allows users to browse resources that were created by various users by general categories, such as texture. I'm not certain that all of these resources are free, however, so this site is probably best reserved for inspiration purposes. I saw some interesting ideas there and many would be easy enough to replicate and more importantly, change up into something unique.
Check out these three websites here:
http://browse.deviantart.com/resources/textures/
http://www.flickr.com/groups/564994@N20/
http://www.flickr.com/photos/torley/collections/72157594588432564/
All about grunge:
Sven Lennartz wrote an article for Smashing Magazine in early 2008 about grunge style in which he suggests that it is perhaps a reaction against glossy Web 2.0 styling trends. He goes on to state, "Will it establish itself as a trend? Probably not." I have to differ with his opinion here since I think the grunge look is actually quite pervasive, and probably was even two years ago. It comes in various forms, some subtle, some not so much. It incorporates anything from "dirty" textures to wallpaper textures, ink splatters, broken borders (and sometimes layers combinations of several or all of these textures). I see it on websites and in print designs quite frequently. Some of the more subtle uses look quite pretty and a little less dirty, but have unmistakable elements. I also see it in certain fashions (just look at the clothing and accessories in a Hot Topic store for lots of examples. Not a trend? I have seen lots of MySpace users employ extremely grotesque versions of grunge style, and to me that use by non-designers signals that the style has truly permeated the web.
Despite the misguided assessment of the scope of grunge, the Smashing Magazine article showcases a lot of really great resources for finding grungy icons, borders, and backgrounds. It may be becoming a bit clichéd as a style, but I do think that when handled lightly it is still a style that can be very effective in adding interest to a website. And yes, I am on the grunge bandwagon as I included homemade ink spatters as button elements in my personal website.
Check out Smashing Magazine for great grunge resources here:
http://www.smashingmagazine.com/2008/01/29/grunge-style-in-modern-web-design/#comments
Another resource for grunge backgrounds is the Grunge Textures website. This website is actually a perfect example of the subtle use of grunge elements to add interest to a page without overwhelming viewers. The main page showcases some intense textures such as bright graffiti and hard, cracked mud. Each of the nine textures link to categories of elements, such as metal, mud, wood, and so forth. The genius here is that from page to page the website features great bold textures, often in thumbnail batches, that do not compete with the website's own grunge styling. This is because the background looks like paper with a very light speckled pattern; the top and bottom edges of the main content block look like torn paper and reveal a header and footer that has a more pronounced, but still subtle, paint peeling pattern. Beyond the textures, the color scheme is a neutral monochromatic palette in shades of brown and tan. This creates a neutral space to showcase the bright and often chaotic texture graphics featured on the website. Grunge lettering at the top of the page helps to solidify the message that grunge resources are the content. Overall the site is fascinating because the grunge styling really does directly communicate the content and message of the website.
The backgrounds at Grunge Textures are all free for use in a variety of media (I love shared resources on the web!):
http://www.grungetextures.com/
The Texture King website offers more free resources and has a category called "grunge" that showcases some truly beautiful stains, weathered sidewalks, paint splatters, and the unforgettable image #6, which I believe is a mold-spotted concrete surface. Besides the specific grunge category, many — probably most — of the other categories would also make good grungy backgrounds. Dirt, concrete, rust, paint, and stone are all begging to be incorporated into this look.
Much like the Grunge Textures website, Texture King displays a grunge design employed with considerable restraint. The main content and header areas are white with gray and sparingly-used orange text. All the edges are crisp and clean which creates a nice contrast with the grunge elements of the background area. The area behind the page contains these grunge pieces, which are rendered in various shades of white and light gray. The pattern consists of small, lightly colored diagonal lines that look a bit like small tire imprints. This creates visual interest and draws your eye across and down the main content area of the page. A slight staining effect is visible at the top edges of this background area, and doubles as a drop shadow effect. The combination of clean lines and small grunge touches really makes this site inviting to view and presents a neutral surface in which the downloadable textures can shine.
Check out the free stock textures at Texture King here:
http://www.textureking.com/
graffittied walls, and paint peeling off metal rails when you check out this site.
As for the design, this site definitely has a rougher look and the logo text, black background, and featured artworks scream metal band to me. This is probably an appropriate association. I do like the gallery display as you can see 30 attractive thumbnails simultaneously and the black background creates a nice neutral space for showcasing these images. Two features really stand out however, and make this gallery fantastic. First, each thumbnail is a rollover trigger that automatically displays a slightly larger image. This is great because you can see more details without committing to actually clicking on anything. Once you do click, however (and you get a choice of large, medium, or small preview), a fantastic feature opens up. On the detail page is a larger view of the image, along with a color swatch detailing the common colors in the image. You can download the swatch just like on a color picker website. This is fantastic because it makes using similar colors pulled from a base image extremely easy; what better way to create harmony in a web design. I really love this feature because it saves the step of uploading the image into a color website in order to generate such a swatch. Awesome.
Not so awesome, however, is that the website is left justified, leaving all the empty space visible on the right hand side of my browser. Now, you may be thinking this is nit picky, that I can just resize my browser if it bothers me, and so forth. This is technically true, but we judge websites all the time on these seemingly small details and they do take away from the overall design effects. See how much space I spent writing about this issue here? It is also the last thing I mentioned and probably went a long way towards eclipsing the good features I mentioned just before it. It is bothersome to see something that is unbalanced for no good reason and it isn't that hard to center your website — just do it.
Check out Urban Dirty here:
http://urbandirty.com/
And to end, there are a few more resources to mention. The following websites also offers free textures — some of them good, some of them about as obnoxious as I've seen (but I guess there's a good use for everything). Two Flickr pages, Seamless Free Textures and Best Textures (the latter is actually a group of around 3,500 contributors) offer a lot of choices. Since Fickr groups are somewhat less manageable than dedicated sites, Best Textures has some general images (like portraits) incorporated into the mix. I guess some people forgot how to read… Anyway, regardless of these little slips, both pages offer a lot of resources, as in over 8,000 texture images in one place. They are free, of course, and to me this represents the best of the Internet. Communities of people that design things because they can and then contribute to the broader world by making resources available to anyone. I really love it.
Deviant Art is an online store that showcases artist's works and has a feature that allows users to browse resources that were created by various users by general categories, such as texture. I'm not certain that all of these resources are free, however, so this site is probably best reserved for inspiration purposes. I saw some interesting ideas there and many would be easy enough to replicate and more importantly, change up into something unique.
Check out these three websites here:
http://browse.deviantart.com/resources/textures/
http://www.flickr.com/groups/564994@N20/
http://www.flickr.com/photos/torley/collections/72157594588432564/
Wednesday, October 6, 2010
6.2 Typography is a challenge, always
Jason Beaird does a wonderful job of outlining the basics of typography in chapter 4 of The Principles of Beautiful Web Design. He also offers some good rules of thumb on sizing fonts with his 62.5% body font trick. Essentially, this is coded into the html, making one em the equivalent of 10 pixels; this in turn makes wrapping your head around the size easier because you just move a decimal point to get the size (12 pixels equal 1.2 ems and so forth). I am not one for difficult math, so this trick is a great one.
Beaird also suggests some great free font websites and I have spent a good deal of time downloading fonts that are free and in the public domain from dafont.com. I am a sucker for fonts and have many installed in my every growing font book; using those fonts, however, is a different story. I am never quite comfortable with choosing the right solution, no matter how much I think about the meaning and look. His suggestions about considering the meaning of the text and the feel of the place or topic are helpful, but it is still a daunting prospect. Readability is a factor that certainly kills some choices, so practical considerations help narrow things down a bit. My first logo font for my website (a script) for example, seems too difficult to read now that I sit back and look at the results. Instead I am searching for a cleaner, but still flowing, script to replace the title. I am leaning towards a font called Riesling; it seems to project the right image. And as Beaird suggests, there are probably several choices that would work for the same project, so the key is more to avoid the really bad ideas than to get too wrapped up in the idea of perfection.
Check out some awesome free fonts here:
www.dafont.com
Beaird also suggests some great free font websites and I have spent a good deal of time downloading fonts that are free and in the public domain from dafont.com. I am a sucker for fonts and have many installed in my every growing font book; using those fonts, however, is a different story. I am never quite comfortable with choosing the right solution, no matter how much I think about the meaning and look. His suggestions about considering the meaning of the text and the feel of the place or topic are helpful, but it is still a daunting prospect. Readability is a factor that certainly kills some choices, so practical considerations help narrow things down a bit. My first logo font for my website (a script) for example, seems too difficult to read now that I sit back and look at the results. Instead I am searching for a cleaner, but still flowing, script to replace the title. I am leaning towards a font called Riesling; it seems to project the right image. And as Beaird suggests, there are probably several choices that would work for the same project, so the key is more to avoid the really bad ideas than to get too wrapped up in the idea of perfection.
Check out some awesome free fonts here:
www.dafont.com
Monday, October 4, 2010
6.1 Shameless promotion (really)
I've found the idea of promoting a web site effectively to be a daunting one; there is just so much information out there that it's hard to imagine crawling up to a reasonable position in the Google page rankings. Fortunately MacDonald's chapter on promotion in Creating a Web Site: The Missing Manual does a fabulous job of explaining how the major search engines find and catalog websites, as well as (more or less) how they assign rankings to a website.
First off, MacDonald outlines a multitiered promotional strategy, beginning with creating a site that is actually worth viewing. I appreciate that he emphasizes this point since worrying about attracting traffic before designing a useful web presence is counterproductive and will probably result in chaos later on in the process. One step at a time is the lesson here. That said, once the site is up and running he points out that it is imperative to get the word out. Sharing links with friends and related websites is a strong suggestion — what I didn't realize however, was just how important this step is. Google ranks pages for its search results based on a number of factors, but apparently the popularity of your website is based largely on how many other sites link to it (as well as the relative importance of the websites linking to yours). Interesting enough, this makes sense, since the World Wide Web is, after all, supposed to be about sharing and creating networks.
Beyond linking, MacDonald has some great suggestions for establishing a web presence. Among the standards are registering the website with search engines and directories, however his more sophisticated ideas involve making contributions elsewhere. Posting thoughtful responses to discussion boards related to the contents of your website and then closing with a subtle signature containing your URL is one that seems sure to drive some traffic your way. I have seen this done and followed signature links to external websites many times, but I never really stopped to think about it as a strategy.
MacDonald's description of the importance of meta elements was a good reminder about how to use these effectively. For example, in his discussion of creating a sense of community through your web presence he presents a description of a website that presents itself as a resource for group sharing versus a description that presents the same site as a place to consult for information on a topic. This distinction is important because it will clue users in to what the purpose and site contents will be when they read the description in a search engine listing. Accuracy and shades of meaning are therefore important here. Additionally, I was surprised to read that keyword meta elements have fallen out of favor in so far as many search engines ignore them. In fact, MacDonald suggests that many web experts don't add them to sites anymore. I will have to check out some code from a few sites to test this idea. I am certainly no expert, but I thought this was actually still a widely used practice…
The most exciting portion of MacDonald's chapter 11 was his explanation of Google Analytics, a tool that tracks web traffic and provides an analysis of user behaviors. I am honestly shocked that a tool with such extensive tracking features is free. I figured that such a service would provide standard information such as site visitors by day, week, and month, and perhaps the referring website or search engine that brought them to your website. I was amazed to see that it also displays statistics such as averages of time spent browsing and pages clicked per visit. Examining such material could certainly help to ascertain whether the contents of your website were offering enough depth to keep people around for more than a few minutes. Another interesting analysis MacDonald suggests is reviewing where most people are entering and exiting your website. The former, he mentions, is a good indicator of content that is a popular draw, while the latter may indicate that something is offensive about that particular page. What a great way to truly assess the effectiveness of your contents and design, by making inferences about user behavior based on hard data. This seems especially useful for small business websites, where the stakes are probably a bit higher than they are for a personal web presence.
Speaking of small business websites, I have recently changed direction on my own creative endeavors for this class. I have designed a first draft of a personal website, seen in several posts below. However, as I have read more and more about creative web design I have agreed to create a website for my aunt's new business, Taste the World. This will be a brick and mortar storefront specializing in fine foods and coffees. The idea is to supplement her business with a strong web presence since most people that hear about the store will probably head to the website first to check it out (I know I usually do that before I head into a non-chain store or restaurant).
To start out with, I have gone through the process of searching for and procuring a domain name and hosting service from GoDaddy. Since TasteTheWorld.com was gone, I took MacDonald's earlier advice and chose TasteTheWorldOnline.com, rather than settling for a .biz or .net. Then, I have designed a preliminary logo, which will of course become part of the company identity. Anne has given me pretty much full creative control, so the website design should present an excellent challenge. The logo, which admittedly needs some tweaking, looks like this:
As for site design, I am looking to create a rich and decadent feel that incorporates some quirky personal touches. This should appropriately represent the character of the store, which will carry high end cooking oils, spices, and fresh roasted coffee blends, as well as items like funky gourmet hot sauces and spreads. I am leaning towards using burgundy as the dominant header color, which Beaird mentioned was associated with high end living; an analogous color scheme with muted oranges and parchment yellows should create a nice harmonious but energetic feel for the site. I am still thinking about textures and other elements to create a sleek but lively design. I am also thinking about how the blog design I create for her will tie in with the rest of the site and reflect the nature of the store.
First off, MacDonald outlines a multitiered promotional strategy, beginning with creating a site that is actually worth viewing. I appreciate that he emphasizes this point since worrying about attracting traffic before designing a useful web presence is counterproductive and will probably result in chaos later on in the process. One step at a time is the lesson here. That said, once the site is up and running he points out that it is imperative to get the word out. Sharing links with friends and related websites is a strong suggestion — what I didn't realize however, was just how important this step is. Google ranks pages for its search results based on a number of factors, but apparently the popularity of your website is based largely on how many other sites link to it (as well as the relative importance of the websites linking to yours). Interesting enough, this makes sense, since the World Wide Web is, after all, supposed to be about sharing and creating networks.
Beyond linking, MacDonald has some great suggestions for establishing a web presence. Among the standards are registering the website with search engines and directories, however his more sophisticated ideas involve making contributions elsewhere. Posting thoughtful responses to discussion boards related to the contents of your website and then closing with a subtle signature containing your URL is one that seems sure to drive some traffic your way. I have seen this done and followed signature links to external websites many times, but I never really stopped to think about it as a strategy.
MacDonald's description of the importance of meta elements was a good reminder about how to use these effectively. For example, in his discussion of creating a sense of community through your web presence he presents a description of a website that presents itself as a resource for group sharing versus a description that presents the same site as a place to consult for information on a topic. This distinction is important because it will clue users in to what the purpose and site contents will be when they read the description in a search engine listing. Accuracy and shades of meaning are therefore important here. Additionally, I was surprised to read that keyword meta elements have fallen out of favor in so far as many search engines ignore them. In fact, MacDonald suggests that many web experts don't add them to sites anymore. I will have to check out some code from a few sites to test this idea. I am certainly no expert, but I thought this was actually still a widely used practice…
The most exciting portion of MacDonald's chapter 11 was his explanation of Google Analytics, a tool that tracks web traffic and provides an analysis of user behaviors. I am honestly shocked that a tool with such extensive tracking features is free. I figured that such a service would provide standard information such as site visitors by day, week, and month, and perhaps the referring website or search engine that brought them to your website. I was amazed to see that it also displays statistics such as averages of time spent browsing and pages clicked per visit. Examining such material could certainly help to ascertain whether the contents of your website were offering enough depth to keep people around for more than a few minutes. Another interesting analysis MacDonald suggests is reviewing where most people are entering and exiting your website. The former, he mentions, is a good indicator of content that is a popular draw, while the latter may indicate that something is offensive about that particular page. What a great way to truly assess the effectiveness of your contents and design, by making inferences about user behavior based on hard data. This seems especially useful for small business websites, where the stakes are probably a bit higher than they are for a personal web presence.
Speaking of small business websites, I have recently changed direction on my own creative endeavors for this class. I have designed a first draft of a personal website, seen in several posts below. However, as I have read more and more about creative web design I have agreed to create a website for my aunt's new business, Taste the World. This will be a brick and mortar storefront specializing in fine foods and coffees. The idea is to supplement her business with a strong web presence since most people that hear about the store will probably head to the website first to check it out (I know I usually do that before I head into a non-chain store or restaurant).
To start out with, I have gone through the process of searching for and procuring a domain name and hosting service from GoDaddy. Since TasteTheWorld.com was gone, I took MacDonald's earlier advice and chose TasteTheWorldOnline.com, rather than settling for a .biz or .net. Then, I have designed a preliminary logo, which will of course become part of the company identity. Anne has given me pretty much full creative control, so the website design should present an excellent challenge. The logo, which admittedly needs some tweaking, looks like this:
As for site design, I am looking to create a rich and decadent feel that incorporates some quirky personal touches. This should appropriately represent the character of the store, which will carry high end cooking oils, spices, and fresh roasted coffee blends, as well as items like funky gourmet hot sauces and spreads. I am leaning towards using burgundy as the dominant header color, which Beaird mentioned was associated with high end living; an analogous color scheme with muted oranges and parchment yellows should create a nice harmonious but energetic feel for the site. I am still thinking about textures and other elements to create a sleek but lively design. I am also thinking about how the blog design I create for her will tie in with the rest of the site and reflect the nature of the store.
Subscribe to:
Posts (Atom)