Instructional Graphics class


Week 10

Discussion and commentary about website project:

This was a very interesting and productive class and I enjoyed honing my web design techniques. I was attempting to design a personal website that I could use to refer to later and which could help showcase my talent in a future job search. I had never used or designed a 3 column site before, and thought I would try. I wanted to keep the navigation on the left, because I find that to be the most prominent and almost expected place.

Color/ texture:

Originally I had wanted to do something with a parchment or paper textured background and maybe have a faint coffee stain over part of the page (almost like a water mark but the outline of a cup bottom and in a coffee or tea color but not too dark). I found that with my CSS coding the background image would not look right as it would stop at the footer but continue on the side columns. I decided that rather than completely change my coding I would go for another, simpler look. Also I found I would have to spend so much time in a graphic editor trying to get the texture for the background and coffee stain right, and I just didn’t have that kind of time.

I really like muted, earth tone colors so I went with greens and browns. I also through in a little complementary purple as it would stand out and add another dimension to the website. I used both the color scheme generator from well styled (http://www.wellstyled.com/tools/colorscheme2/index-en.html) and colors on the web (http://colorsontheweb.com) to pick colors that would look nice together. I kept this color scheme in my banner and added a bit of texture by using the Papyrus font and giving it a slightly three dimensional look with a drop shadow. This really helped to make the page not seem so flat. I think I would have liked to design a banner with some book graphics/ images, but again I found I was needing to spend so much time using a graphic design program which I was not comfortable doing anything in other than basic image resizing and text modifications.

Typography:

For the most part I wanted the text to be in a common font that was easy to read online. I went with a sans-serif for my smaller text in the paragraphs specifying Veranda then Arial and then general sans-serif. I wanted my H1 and H2 and H3 to stand out a bit so I specified Comic Sans MS first. This is supposed to be a widely supported font and as it also doesn’t use serifs it blends well with the paragraph font. As already mentioned I used Papyrus as my font choice in my banner. I really like that font as it reminds me of old texts and was tempted to use it throughout my website. However I don’t know how widely supported it is, and It is not easy to read in smaller sizes, especially on a computer screen. I settled for showcasing it in my banner, and it works well there.

Images:

I wanted to have some images to draw the attention as my pages have so much text. I own the photo of me with a Florida Scrub Jay so I used that, and I went to several free image sites looking for images. I finally chose some from Stock.xchng (www.sxc.hu). The ones I chose were free and had no special requirements other than they like a link back to the website from which they came (I put the link in my first page footer).

Scripts:

I did end up using some JavaScript items in my site. I imbedded a meebo widget which allows someone to leave a chat message or if I am logged in, we can chat live. I had seen this tool before and wanted to see how it worked. I also imbedded worldcat search boxes on some of my resource pages so a visitor can search for books I mention in libraries. Finally I used JavaScript for my navigation menu. I had tried to write the CSS coding for fly out menus but I could not get it to work in Internet Explorer. I found the site www.opencube.com which offers a free trial test of its quick menu tool. I found a nice expanding tree menu that works well, but the trial may end soon and I may get pop-ups saying that it is not paid for. I may end up eventually finding another source for the JavaScript menu. The major problem I foresee with the Script menu is that if I want to add a page, I have to completely redo my navigation menu. This could be a major problem if I get a script from a site which rotates which menus it offers freely. I may have to completely change the look.

Lessons learned:

I learned about some wonderful resources for web design in this class and will need to spend more time learning about CSS and JavaScript so I can utilize these more effectively in future websites. I attempted to use Dreamweaver to design this website, but am not comfortable enough with all the wonderful things it can do, so I found I spent most of my time editing the HTML code. In the future I need to spend some time playing with and reading tutorials so I can take advantage of Dreamweaver. The same thing goes for the graphic editor I am using. Gimp is working well for me, but I can only do basic things and have not been successful trying to design graphic banners with images and background images or textures using it. I can resize images easily and can create a text based banner image, but I need to learn more about the program.

When our class had a presentation session where folks showed their work in progress, I found myself being quite jealous of those with Macs using the Mac program iweb. The two folks who used it said it was so easy to drag and drop images and rotate them and give them special effects like drop shadows or curling edges. It seemed that it was a much easier tool to use than Dreamweaver.

This was a wonderful class, full of information and resources. I learned quite a bit and also learned how much more I have to learn. It is clearly an ongoing work in progress to design and maintain any website. Not only does one need to have skills in using many different software programs and understand multiple different coding techniques (at least rudimentary) but one must stay on -top of current trends. As fashions go in and out, hip designers need to go with the flow. Simple and classy websites will always work especially if their content keeps drawing visitors back (see W3Schools: http://www.w3schools.com/default.asp). However, savvy web surfers are often looking for and expect the latest innovations. If you are designing a website for a young, hip audience you need to be aware of the trends and use them effectively (see 2Advanced Studios http://2advanced.com/).

Advertisements

Week 9

 

Review the following websites:

 

FLASH:

 

FlashVista http://www.flashvista.com/

 

FlashVista provides a search engine to find some of the best flash sites and it also has a directory for flash links. This combination allows one to find some very neat websites that are using Flash well, and also find Flash resources such as tutorials and templates.

 

Flash Tutorials http://www.lukamaras.com/tutorials/cool-design/hitech-floating-menu.html

 

Lukamaras is designed for folks who are just learning flash. It provides tutorials that are quite detailed so anyone can follow the steps, but it also provides detailed explanations for those who already use Flash and know ActionScript. Best of all the tutorials are free. This particular URL is to a tutorial for creating a “cool hi-tech draggable floating menu”.

 

SitePal – Flash Avatars http://www.sitepal.com/

 

SitePal is a fee based service that will help you create a “fully customizable speaking avatar” which you can add to your website. There is a 15 day free trial and after that the lowest price is $9.95 per month. I am not sure if once you create an avatar using this you need to keep paying every month for it to keep working or not. That could get to be expensive.

 

FLASH SOFTWARE:

 

Adobe Flash http://www.adobe.com/products/flash/

 

Adobe Flash CS3 is a standard Flash tool, but like other Adobe/ Macromedia software it can be expensive ($699).  There is a free trial available which could help someone decide if they really want to spend the money.

 

Swift http://www.erain.com/Products/swift3d/

 

Swift 3D is a vector tool that allows designers to create 3D animated images to use in Flash or other projects. It supposedly integrates with Adobe Flash and the files compress well. The full version is $299.  If you have Adobe Flash, there is a plug-in/ extension called Swift 3D Xpress.

 

Swish http://www.swishzone.com/index.php

 

Swish offers a variety of software for Flash. They have SWISH Pix which allows one to create Flash photo albums; SWISH Studio2 -allows one to convert Flash movies to screensavers, EXEs, etc.; SWISH Video3 -allows one to convert videos to Flash and put it on the web; SWISH Jukebox -lets you convert MP3 files to Flash sound players; SWISH Max2 – has many tools to help you create interactive Flash animations; and Templates for SWISH Max which are designed by professionals and are royalty free. SWiSH Max2 is about $150.

 

SCRIPTS:

 

HotScripts http://www.hotscripts.com/

 

HotScripts is a directory service that collects and organizes web programming and related resources. It is aimed at webmasters and programmers who are seeking “dynamic development tools”.  Some of the directory categories include: Ajax, C and C++. Flash, PHP, Ruby on Rails, XML, etc. The Flash category has over 2000 entries. One of the software items listed under Flash is for “Drop down, tab & vertical menus for Dreamweaver”.  It uses DHTML and Flash to make really nifty website menus. There is a free trial and the price after that is $49.99 ($50) which seems reasonable if you create lots of websites or are constantly changing styles. The author of this product is listed as http://www.extendstudio.com.

 

MP3S:

Basic info about MP3s http://www.soundstageav.com/mastersonaudio/20050201.htm

 

SoundStage AV is a very helpful site created as a resource for AV enthusiasts. This “masters on audio” article from Feb. 2005 called “So what is MP3, Anyway?” does a great job of explaining what MP3 is. Basically it is just a technique used to compress audio files so they can be stored and shared and transferred more easily.

 

How to create .M3U files and streaming audio http://www.selfseo.com/story-13698.php

 

This article posted by David Grant (5/01/2006), entitled “How to Stream Audio from your Website for Free” is quite useful. Streaming allows one to listen to the audio file before it has completely downloaded. This lets a visitor to a website begin to enjoy the music right away. Without the streaming the visitor must wait while the whole file downloads and then they have a copy on their computer (this can be against copyright laws). With a streaming file the visitor’s audio player (windows media, Real Audio player, etc.) will open and start playing the music but the file will not be saved to their computer. To set up streaming audio one simply creates a text file with a link to the MP3 file and then save that text file with the extension .m3u.  The text file link has to be for the full URL so if the audio file was in a folder called mp3 and the file name was mymusic.mp3 then the link to put in the text file is http://mywebsitename.net/mp3/mymusic.mp3 then you save the text file as mywebsitemp3mymusic.m3u and make sure that both the actual music file and the text file are uploaded to the server.

 

Audacity – Free audio editor http://audacity.sourceforge.net/

 

Audacity is open source software which is free to use and allows one to record and edit audio. It even lets you create soundscapes yourself. There are special effects, a sound mixer, etc. One user review from the PC World article on Audacity (http://www.pcworld.com/downloads/file/fid,22513-order,1-page,1/description.html) mentioned this as a tool to fix bad audio on old cassette tapes.  This is a great tool to use to convert those old tapes that you can no longer play in the car (or almost anywhere now). They can now become CDs or exist as digital files.

 

Musicovery Internet Radio http://musicovery.com/

 

Musicovery is a very “hip” styled internet radio.  You can select a mood, genre, time period, etc. and listen to random music. If you register you can save favorites and have play lists. There are two versions, the free registration, which has Lo-Fi quality allows you to ban songs you don’t like and mark your favorites but does not give you direct access to the favorites. The premium membership provides the same but gives you direct access to your favorites, eliminates the ads, and provides Hi-Fi quality. The Premium membership starts at $4 per month. The interactive quality of the site makes me think that it is using JavaScript or perhaps Flash.

 

Pandora Internet Radio http://www.pandora.com/

 

Pandora is another free internet radio site which is sponsored by the Music Genome project. Their goal was to capture the “essence of music” and analyze thousands of songs and analyzed each musical attribute and then compiled all that data into this program to serve as a guide to the “music universe”. You register for free and then have stations listed by genre and can find out about the music you are listening to. Pandora also acts as a social networking site slightly by listing people who are listening to a song and what else they are listening to and allowing them to comment on a song.

 

FREE WEB EDITORS

 

Amaya http://www.w3.org/Amaya/Amaya.html

 

Amaya is one of several complete web browsing and authoring tools. It allows the user to both create web pages and browse the internet for needed information and copy and paste it into their web pages. One can work on multiple documents at the same time and it helps with creating hypertext links.

 

Trellian http://www.trellian.com/webpage/

 

Trellian webpage is also a freeware application for composing websites. It has a drag and drop style interface and has the standard color highlighted HTML editor. It also has a build in spellchecker which is very handy. Another nice feature is the online “manual” which has all sorts of guide on how to use Trellian WebPage. This is fantastic, especially in a free product.

 

SeaMonkey http://www.seamonkey-project.org/

 

SeaMonkey offers a complete internet application suite which includes a web browser, advanced email / newsgroup, chat, and HTML editing. For the browser part it compares itself to Firefox. In addition to what SeaMonkey starts with, there are also other add-ons for more stuff.

 

FREE TEXT EDITORS:

 

http://www.thefreecountry.com/webmaster/htmleditors.shtml#htmleditors

 

This link is to a list of free text editors. Of the ones listed, I have used PSPad (http://www.pspad.com). It is free and allows one to edit HTML, PHP, Perl, JavaScript, etc.  The color coding of HTML code and CSS makes it so much easier than regular Notepad.  I designed my first website using this editor and it worked well. There are also many other HTML editors out there so you can play around and see which you like best.

Week 8

Creating Web Sites ch. 15& 16:

Chapter 15- “Fancy Buttons & Menus”. Fancy buttons and interactive menus are becoming symbolic of contemporary web design. These features add “pop” and “pizzazz” to what may otherwise be a flat looking website. These features are now almost expected to be seen on good websites. For smaller sites, fancy buttons may work well, but for larger sites, interactive menus, often with sub-menus, are the way to go.

While ordinary links work just fine, they can be dull looking and many creative websites use some form of a graphical button (image file) that has been turned into a link. If you put an image inside an anchor tag for a button you will want to get rid of the blue border by changing the CSS border-style attribute to none. If you wish to have your buttons change when the mouse is rolled over them (similar to a hover style in CSS) you will need to use JavaScript.  To make the buttons you need patience and a graphic editor or use an online program. Fortunately there are many button generator programs to help make fancy buttons. Some include: www.buttongenerator.com, http://cooltext.com/ButtonBrowse.aspx, etc.

There are also many fancy JavaScript menus available at sites such as Dynamic Drive www.dynamicdrive.com/dynamicindex1, or Open Cube www.opencube.com which I have found successful.

Chapter 16- “Audio & Video”. Multimedia is all the rage. Sites filled with sounds and motions are becoming more popular as more and more animations, music files, and small movies are added to websites. However, one must be careful to use these tools appropriately; otherwise no one will come back to your site.

Many multimedia abuses abound on the web, including: flashing banner ads, annoying background music, pop-ups, wasteful intro pages, and commercials which eat up bandwidth. The point is don’t use flashy multimedia options unless it makes sense. If you are a musician trying to offer samples of your work, then music files make sense. If you just like a certain song and want to have it playing in the background when people go to your website, think twice. Not everyone shares your taste and many might immediately leave your site never to return. If you insist on background music, at least make it very easy for someone to turn the music off.

One can link or embed a multimedia file. To link, one simply uses the anchor tags and points to the file which is uploaded onto the server with the rest of the website files. Embedding multimedia is more advanced and tries to integrate the HTML content with the music or video content. Some files may not be supported by a visitor’s browser making this more difficult. Types of multimedia files include:

  • MIDI -Musical instrument Digital Interface-small, low quality synthesized music.
  • WAV & MP3 -Digital audio of a much better quality. WAV files are huge and thus not good for websites. MP3s are much smaller but most browsers don’t directly support them.
  • MPEG, AVI, MOV, WMV-digital video files allow you to show full video ranging from jerky, thumbnail size to DVD quality. The files are huge and thus one needs to compress, shrink, and reduce the size with video editing software.
  • GIV-animated gif files are small, widely supported ways of making small animations, spinning text, flapping butterflies, etc.
  • Flash -Flash animation is designed just for the web. It is vector-based, meaning it is made out of animated shapes rather than a series of video frames. They can also be interactive and thus there are small games and menus using flash. To do this you need special software and flash is a plug-in, meaning that not all browsers support it.

Review the following websites:

Wiki Public Domain Image Resources http://en.wikipedia.org/wiki/Wikipedia:Public_domain_image_resources

This Wikipedia source has a great listing of sources of potentially free photos. Many of them are public domain source. Some are from books that are old enough to now be public domain; some are vintage postcards, etc. Depending upon the type of image you are looking for, some of these options may work well. One site in particular, Old Book illustrations (http://www.oldbookillustrations.com) is rather impressive. It provides a wide range of illustrations scanned from old books. Most of the works are from artists who have been dead for more than 70 years, which puts the work in public domain. They do ask that if you use a picture on a website, to link back to them as common courtesy.  One of the great things about this site is that it is searchable. In addition it has its gallery laid out in a handy way with categories easily accessible for quick browsing.

LibrarySpot.com Image Resources http://www.libraryspot.com/images.htm

Amongst other things, Library Spot provides a page with links to different image sources. Some of these are simply search engines such as Google, which offer image searches. Other resources are searchable collections such as the American Memory project of the Library of Congress.

Deep Web Resources:

Read Write Web http://www.readwriteweb.com/

Read Write Web is a weblog with a focus on web technology news including reviews and analysis.  It claims to be one of the most widely read (and respected) blogs in the world and it is probably correct. Many of the current posts seem to be blogging news such as an entry on Mapstraction about map mashups in which one can apparently combine maps from different mapping providers together. Another entry talks about a US distric court judge ordering Google to hand over data on every YouTube user including username, IP address, and lists of videos watched. All this because Viacom is seeking $1billion in damages from alleged copyright violations on YouTube.

Footnote.com (Historical Image Resources)http://www.footnote.com/

Footnote is a database of image files of some historic content. Many of the files are text images and are of old documents and quite useful for genealogists and historians. One can search for images or browse and images can be printed, annotated, downloaded, etc. One can create a spotlight or story page highlighting something you have found. Among the free titles are: Project Blue Book which contains 13,000 government UFO reports of sightings etc. and Pennsylvania Archives which provides 100,000 pages  from 1664-1880 and can be invaluable to someone interested in Pennsylvania historical events.

Tools:

Adobe Photoshop http://www.adobe.com/products/photoshop/index.html

The latest of the industry standard graphic editor is Adobe Photoshop CS3 (and CS3 extended). These supposedly have improvements over CS2, offer live filters, easier black and white conversion, 3D and motion support and the ability to edit 3D content and place it in 2D compositions (in the extended version), and many more features. Of course you must pay $649 for the regular CS3 and $999 for the extended version. Actually there are many versions of Photoshop and they have a feature where you pick out what you do and they will tell you which edition is best for your needs. One option is “Graphic designers, web designers, and artists”. For this group the Adobe Photoshop CS3 is recommended. However, if you just like to take quick photos and share them online, then Photoshop express is recommended. This version is integrated with flickr.  This version also appears to be free. One must sign up to use it but there is no listed cost.

Adobe Fireworks http://www.adobe.com/products/fireworks/

Adobe Fireworks is software designed to accelerate web design by allowing one to quickly create and optimize images for the web. It allows one to edit vector and bitmap images and has many prebuilt assets. It also integrates with Dreamweaver CS3, Illustrator CS3, Photoshop CS3 and flash CS3.

Gimp http://www.gimp.org/

This is a free, open source software program that does just about everything Photoshop can. It is designed as an alternative graphic editing program that will not cost an arm and a leg. It is quite useful and it even has a version (GimpShop) that mimics Photoshop even more so one can use a Photoshop tutorial without many modifications.

GimpShophttp://www.gimpshop.com/

Simply put, this is a version of the free open source Gimp graphic editor that mimics Photoshop so GimpShop users can follow the Photoshop tutorials easily. This is a great asset.

Week 7

Creating Web Sites ch. 13& 14:

Chapter 13-“Making money with your site”: Internet commerce is a huge industry. This chapter focuses on some things you will need to consider if you want to sell things online using your website. If you sell actual products, you need a virtual shopping cart so your customers can collect the items they wish to purchase, and you need a way to take payments – PayPal is a front runner in web transactions for small businesses.

The internet also offers other opportunities to make money by selling ad spaces on your website. Two popular affiliate programs are Google Adwords and Amazon Associates. Both these programs allow you to earn a small bit of cash when your site users click on their ads.

Chapter 14-“JavaScript & DHTML”: According to this chapter, JavaScript is a programming language which can be used to create interactive features on your website. JavaScript can be used to dynamically effect HTML, you can have text grow and shrink, have something happen when a user rolls the mouse over a certain area, use JavaScript to transform text into a special font that your user may not have on their computer, and many other things. JavaScript can help with forms and prevent someone from going any further until they complete certain sections. JavaScript can react to actions and do things when a user clicks on a picture etc. Modern browsers all recognize JavaScript, but it is possible for a user to turn off the JavaScript so one should make sure the website still looks okay if the JavaScript is disabled.

Principles of beautiful web design ch. 5:

Chapter 5-“Imagery”: There are many concerns dealing with imagery. One must consider file types, resolution, sources of photography, as well as artistic aspects. Any picture image (as opposed to text image file) on a website immediately draws the viewer in and gets them to consider the content. You want images to be: relevant, interesting, and appealing visually.

One must find legitimate sources for any images one wants to use. The 3 options are: create it yourself, buy stock images, or hire a professional. Doing it yourself can be fun and possibly cheaper, but takes considerable time. Purchasing stock images can be expensive although not always. Free images are available but make sure your use falls within the guidelines.

Review the following websites:

I Love Typography (resource site) http://ilovetypography.com/

This truly is a website for those who love typography and fonts. There are pictures of fonts, photos of fonts in use (karmann ghia written on the side of the car uses a unique font), and lots and lots of links to articles about fonts. There are also many links to font shops (i.e. www.fontfont.com) where one can purchase fonts. There is an interesting article on “What the font” which is a website where you can upload an image of a font and it will try to identify it for you. You must save the font in question as an image and then upload it (see http://www.myfonts.com/WhatTheFont/).  This could be quite useful to someone in design who has seen the perfect font to use for a project but doesn’t know the name and thus can’t find where to purchase this font. Another interesting article is “So you want to create a font” by Alec Julien (10/22/2007) http://ilovetypography.com/2007/10/22/so-you-want-to-create-a-font-part-1/.  This gives a quick review of several font editing programs available (one of which you must have), plus things to think about if you really want to get into designing your own fonts. Actually, it is quite interesting, and although I understand what serifs and kerning mean, I admit I forget what tildes and eths are.

I Love Typography: 15 Examples of Excellent Web Typography http://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/

This is part one of a two part article on examples of typography on websites. The author, Johno (this is a screen name from the comments and seems to be the author) has collected 15 websites which make “excellent use of type”. Part two will take a closer look at some of these sites.  A List Apart (www.alistapart.com) is a site for people who make websites and is on the short list. Many of these sites are for font companies (Font Shop www.fontshop.com), professional designers or illustrators (Bear Skin Rug Shop- Kevin Cornell http://www.bearskinrug.co.uk/_store/). These are all really great sites and are just so much fun to look at because the images and fonts work so well together to create a wonderful overall style.

Typographica (Typography Journal and News) http://typographica.org/

Typographica is a journal of the typography world. It features news, reviews, commentary and such about fonts and typographic design. There is a book review of “Dangerous Curves” by Doyald Young, an interview with Cyrus Highsmith who is a designer at Font Bureau in Boston, and an article on favorite Typefaces of 2007. This is an annual review which invites 25 of the best graphic and type designers to pick their favorite font releases.  Thirty typefaces are displayed in a thumbnail type image and one can click on that to get more details about that entry. I liked the Blaktur typeface by Ken Barber. It is reminiscent of the old blackletter typefaces but is modernized and slightly easier to read. Another favorite is Olicana by Nick Cooke. This is an attempt at mimicking someone writing with a quill pen and it comes with optional ink splotches one can apply to the text. It is fun and legible too. It really does simulate the flow of ink and would potentially be wonderful as added flair on a website-maybe for headings.

Microsoft Typography (resource site) http://www.microsoft.com/typography/default.mspx

This is a good source of typographic information produced by Microsoft. Their Typography group develops fonts and font technology and they have many resources for those interested in typography. Their site is very nicely laid out with main categories: About fonts, Resources, Developing Fonts, links/ news, and tools. They offer a free font property extension and a web embedding font tool. The Disagreeably Facetious Type Glossary (http://www.microsoft.com/typography/glossary/content.htm) is quite funny and enlightening too.

ABC Typography (virtual museum) http://abc.planet-typography.com/

This is a virtual museum of typography. There are 4 sections: classical typefaces (1480-1890), 20th century typefaces, contemporary or modern typefaces, and unclassified or miscellaneous. This is a fascinating look at fonts over the centuries. It is quite easy to scroll through and pick fonts to view. The typeface is displayed and then it is used in a quote so you can see the same sentence in all the fonts. There is some brief background information about each font and then quick details such as when it was created, in which country, who the creator was, etc.

A List Apart: Typography (tutorials) http://www.alistapart.com/topics/design/typography/

This website is written for people who make websites. One of their topics is typography and they provide information such as how to size text using CSS, dynamic text replacement, or elastic design. As always, this is an excellent source for tutorials, articles, and answers to website design related issues.

TypoGraphic (history of type) http://www.rsub.com/typographic/

This website outlines the history of letters and typography as well as providing an anatomy of letterforms and a gallery. The studies section discusses legibility, spacing, type as image, and meaning. The aim is to illustrate the importance of typography and explore how it is used in the digital era. This provides important insight into the online use and value of type and typography.

Digital Magazine: CSS Typography (resource) http://www.digital-web.com/articles/css_typography/

This article from Digital Web Magazine by Garrett Dimon discusses typography and how CSS can be used to select type faces. Dimon also points out that there are other options including: font embedding, JavaScript, and image replacement technique. With CSS you can control not just the font types, but also the line-height and letter-spacing. One site mentioned it Typetester (http://typetester.maratz.com/). Typetester lines up 3 columns and allows you to choose different fonts to view in each. This allows you to test legibility and play with the size, alignment, word spacing, leading space, background color, and text color. This is an excellent way to help decide which fonts would work best for your site.

Noupe.com: CSS Tutorials http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html

This is a CSS tutorial from Noupe which addresses more than 20 common CSS bugs (usually related to IE) and ways to fix the problems. This is a handy site when trying to work out CSS issues.

DesignSnips (Examples of Good Web Design) http://designsnips.com/

This site collects examples of good web design and separates them into categories that can be browsed. Some categories are: depth effects, illustration, textures, hover effects, logos, navigation, typography, colors, breadcrumbs, banners, buttons, etc. This can be quite handy when developing a website as it provides inspiration and ideas that work.

Week 6

Creating Web Sites ch. 11& 12:

Chapter 11-“Attracting Visitors”. This chapter focuses on how to promote your website and ensure it is regularly indexed by search engines. Before you start promoting your site, make sure it is complete and is a good design. Try to have features that will keep people coming back. A discussion forum is a way to do this. Build a community by sharing links with similar minded folks. Update meta tags with a site description and key words. Submit your website to internet directories and search engines.  To successfully climb the ranks you need statistics such as how many people visit your site and how long they stay.

Using reciprocal links is a good way to connect and get your website noticed. You agree to link to a site and they agree to link back to yours. In order to keep visitors coming back you need to have excellent content that changes regularly and in a noticeable manner. Updating once a month is not enough, it needs to be updated 2-3 times a week for a really popular site.

Web server logs provide the most detailed information about site visitors. It includes information such as: time visitor came, IP address, their browser, what site referred them, if they got any error messages, pages ignored, pages they liked, etc. These logs are much more detailed than the web traffic analysis that is offered by a web host. In order to use the web server log you must feed the data into a log analysis program. If you can’t do all this you can try a free hit counter service. Some are visible on the page and others are invisible. www.statcounter.com offers a free hit counter without an image.

Chapter 12-“letting visitors talk to you & each other”. For a site to really fit in and be popular you need to participate with your visitors. It is important to have a form of dialog. Discussion forums or chat boards help visitors keep coming back and this helps to establish a community. Get feedback from visitors about what they like and don’t like and fix your site accordingly. Make it so you can be contacted by having email links, or forms. Google groups offers a way of freely setting up a group for discussion which is easy to moderate.

Principles of beautiful web design ch. 4:

Chapter 4-“Typography”. Web design is all about communication and one of the main ways we communicate is by written word which is why typography is so important. We may not put much thought into it now, but creating a font or designing a single letter actually takes a great deal of thought. The angle of the curve, the thickness of  a line, the amount of white or negative space -these are all important in letter design.

There are tons of fonts out there, but for a website all that matters is what your users have installed on their computer at the time (which of course you can’t know for sure). This can be quite limited so the font-family property of CSS is very handy. It allows you to choose your ideal font and then specify backups. For example, you might prefer Futura, but list Veranda, Arial and finally any sans-serif font. However, it is important to realize that if your ideal font is a drastic change from the backups (takes up significantly more or less space) it might drastically change how your website looks (tables and columns could be messed up, etc.). For this reason, it is best to preview how your website would look with the generic font also to make sure it still works. If it is vital to use a particular font, this can be done with an image file. This technique is often used for fancy lettered banners or headers.

Review the following websites:

Urban Dirty http://urbandirty.com/

This website offers free texture stock photos which are licensed under the creative commons license. There is an option to make a donation, but other than that the images are free, just mention that you got them from Urban Dirty. There is a search option where you can search for how a photo was tagged. Most of the options are cement, paint, wood, etc. The search is fairly rudimentary, but it does work.

Best Textures Flickr Group http://www.flickr.com/groups/564994@N20/

This is similar to Urban Dirty, but there is a greater variety of textures not just urban type textures. This is actually a
Flikr group which pools together themed photos and has discussions etc. You must join the group to add items, but not to view. The images all appear free, but some artists have their own statement (i.e. free but please credit me, etc.). There are also other Flickr Groups with texture images.

Torley Textures http://www.flickr.com/photos/torley/collections/72157594588432564/

This is another flikr site that offers textures. These are offered as free and are seamless so one can tile them easily without it showing. All of the textures offered in the Torley collection are 512×512 and are in lossless PNG format. One nice thing about this collection is that the textures are grouped in smaller collections by color. One is a collection of greens, another of pinks and reds, and another is black and white. This is helpful if you have an idea of what color scheme you want to use and are looking for some matching texture.   The rest of the mini collections are not by color, but the smaller collections make it easier to browse through since they aren’t really searchable.

Deviant Art Textures http://browse.deviantart.com/resources/textures/

The direct link to browse textures did not work, I had to go to http://deviantart.com and then click browse or search myself. Under the collections option is a collection called Best Textures. These texture stock photos are quite wonderful and run a wide gamut of what is offered. Each artist has their own stipulations, but most artists allow you to use them for free if you credit them, or provide a link back to the image. Just doing a browse search for keyword texture will turn up many wonderful textures (especially the ones labeled “in Miscellaneous”), but some aren’t really textures by themselves. This is really a wonderful source for any art, and very good for inspiration for any artist.

Texture King http://www.textureking.com/

This is another good source for texture photo stock. It is a project by someone known as REH3design and seems to be somewhat up to date. The last update for the news and posted photos was 2 months ago. Some of the other texture sites were more frequently updated. Texture king has a nice broad category list to choose from: grunge, liquids, metals, miscellaneous, paint, plaster, plastic/ rubber, rust, stone/ rock, & wood/ plant. These are all wonderful selections but they are zip files so they take a few more clicks to download.

Grunge Textures http://www.grungetextures.com/

Grunge Textures is a site devoted to textures in the grunge category. All of their pictures are high resolution (2400 px x 1800 px minimum) in jpg format. They use creative commons licensing so the image are free for non-profit personal use as long as there is a link back to www.grungetextures.com. The categories for browsing and searching are reasonable and include: aircraft aluminum, concrete textures, graffiti & vandalism, metal textures, paper & cardboard, etc.

Grunge Style http://www.smashingmagazine.com/2008/01/29/grunge-style-in-modern-web-design/

This is a wonderful article on trends in web design and a special focus on grunge. The author does not see grunge becoming the major trend that web 2.0 design was. There are some examples of grunge type design. Some are more subtle than others, but all have a “worn” feel to them. This website also provides links to some free fonts that work in the grunge style. There are also links to texture sites and tutorials as well.

Photoshop Tutorials on Creating Textures http://vandelaydesign.com/blog/design/photoshop-tutorials-textures/

This website offers a great collection of tutorials and guides on designing your own texture background in Photoshop. If you do not have Photoshop, you are not completely left out. The free graphic program Gimp, offers a version (gimpshop) that closely mimics Photoshop so you can use the tutorials ( www.gimpshop.com). Unfortunately that URL has been suspended. Another site which looks like it may offer downloads of gimpshop is http://thegimpshop.net/.

2007 Web Design Trends http://www.modernlifeisrubbish.co.uk/article/2007-more-web-design-trends-and-cliches

This entry (dated 10 December, 2007),  highlights 6 current trends in web design and provides links to examples. The trends include:

  • Cute cartoons and mascots
  • Swirls, drips & flourishes
  • Broken borders
  • Oversize RSS icons
  • High-Texture designs
  • Rich colours with dark grey background

Some of these trends I like, and others not so much. If they are used in a subtle way, even my “not favorite” trends aren’t bad, but when overdone, they could be disasters.

Web 2.0 Tutorials http://www.smashingmagazine.com/2007/03/10/web-20-tutorials-round-up/

This is another issue of smashing magazine which gathers several tutorials together. Most are basically Photoshop or Photoshop-based tutorials for making web graphics. This is great if you have Photoshop, but if not they are only mildly helpful. The Gimpshop is a possible alternative if you can find it.

Screen Resolutions Worldwide http://www.modernlifeisrubbish.co.uk/article/screen-resolutions-and-aspect-ratios-worldwide

This site provides a world view of screen resolution and aspect ratio (widescreen or not) tendencies. India had the lowest resolution with an average approximately 1024×768 (0.872 megapixels). Scandinavia and Central Europe had the highest resolutions with Switzerland averaging 1280×1024 (1.306 megapixels). The US, Denmark, Belgium and Italy are more likely to have widescreen monitors, whereas Russia does not and has vertical resolution available.

Week 5

 

Creating Web Sites ch. 9& 10:

 

Chapter 9– “Page layout tools: Tables & Styles”. In the early days of HTML and web pages, invisible tables enabled the alignment of text and pictures in a nice grid structure. Since the advent of style sheets, tables are giving way because they are too awkward to manage.

                If you use tables, most browsers only show a solid black line for table borders. If you want something else, you should create a borderless table and then apply borders to the table and td, th attributes in a style sheet. If you do have tables with borders, be aware that any empty cells will collapse and disappear. To prevent this collapse, fill in the cell with a non-breaking space ( ).

                When writing HTML that is going to be positioned using style sheets, it is important to divide up your different sections using div tags (division) and class tags. To really see how style sheets can effect a page, go to CSS Zen Garden (www.csszengarden.com). Each page in the gallery has the same HTML, the only difference is the style sheet applied.

 

 

Chapter 10– “Frames”. Frames help large websites keep a common element (often a navigation bar) in the same place on every page. If you use tables or div tags to do this, you must copy and paste a lot of data onto every page. Using frames avoids this by allowing you to show more than one web page in the same browser window. HTML allows you to split the browser screen into different regions called frames.

                There are some negatives about frames however:

  • Confuse search engines -robots don’t know how to navigate and report the right information back.
  • Frame abuse -not seen much anymore, but some folks used frames to keep part of their website visable when a user clicked on an external link.
  • Future compatibility and accessibility -latest versions of XHTML do not support frames, and frames are not easily used by users with screen reading devices.
  • Less effective URLs -users cannot get a URL to a specific page only the first page and then they have to click through everything to find what they were looking for.

 

 

Principles of beautiful web design ch. 3:

 

Chapter 3– “Texture”. Texture in a website refers to an image, usually used as a background, which imitates the appearance and “feel” of an object (like a brick wall, wood, soap bubbles, etc.). Even a simple line can be used to create feelings. A diagonal line (or series of diagonal lines) gives a sense of movement and draws the attention more than horizontal lines.

 

One can use oval or circular background image behind text to create the illusion of a circular block of text. There are many websites devoted to trying to round the corners of text block boarders by CSS, JavaScript, or the use of background images.

Using light and shadow, one can give depth and dimension to objects such as menu buttons, bullets, etc. One can utilize different textures and images to give a certain “feel” to a website. One example is an “antique” or “worn” look, created using “folded” or “torn” corners of boarders to simulate old or torn paper; the use of “watermarks” or “coffee stains” on the background of the website; and many other creative ideas to promote a “feel”.

 

 

Review the following websites:

 

Colors on the Web http://colorsontheweb.com/

 

“Colors on the web” focuses on the use of colors in design and especially as it is applied to web page design. Many topics are covered including: color theory, color wheel, color combinations, color physics, and colors on the web. The page itself seems to have a nice red and white feel, but does have a lot of ads both on the left and right sides. While these do make the web page more jumbled, they are very appropriate since all have to do with the theme of color or color theory and offer a wide variety of “color” resources available on the internet. Colors on the web (COTW) offers a color wizard which will help generate matching color schemes; a color wheel to generate random color combinations to stimulate creativity; and a contrast analyzer to determine if there is enough contrast in colors (especially good for determining if text will be legible on a color background).

Week 4

Creating Web Sites ch. 7& 8:

Chapter 7-“Adding Graphics”. Often there are many more images at work on a web page than one would think. Often text used in headings, banners and sometimes navigation is actually an image file.

In HTML, the alt attribute should be used to describe the picture in case it isn’t visible. Some browsers use this text for a pop-up description. To avoid this (or make sure you can select the text that will show in the pop-up), use the title attribute to specify what you DO want to pop up as a title.

Picture size is important, both its dimensions (how much space it takes up in the browser) and its file size (the number of bytes required to store the image). Don’t use the height and width attributes to resize an image, it will turn out badly. Rather match the height and width attributes to the actual height and width of the image-it will improve the way the web page loads.

There are 3 file formats for web graphics:

  • .gif – for images with small number of colors (logos, bullets, clip art).
  • .jpeg -for photos with lots of colors, not good for text or line art.
  • .png -works for all sorts of images but doesn’t compress as well as .jpeg and old browsers can’t read it.

Chapter 8- “Linking Pages”. Links are an important aspect of web pages (links make the internet a net). There are internal links which lead to other pages or sources within a website, and external links which lead to other websites. To make an external link open in a new page, use the target attribute (target=”_blank”) this formula will open a new window instead of leaving your website.

Programs such as Dreamweaver have link checkers which can go through and scan all your web pages to test links and make sure they work. If you change the name of your site, or page, or folders it can mess up anyone linking to the page previously. Using a redirect will help anyone trying to find the website.

Principles of beautiful web design ch. 2:

Chapter 2– “color”, describes the psychology of color. Different colors produce different behavioral and emotional effects.

  • RED- excitement, a dramatic and rich color. Darker reds (burgundy, maroon)-rich, indulgent; earthly-brown reds -harvest and fall.
  • ORANGE- active and energetic. It can symbolize happiness, sun, creativity, etc. It also stimulates appetite and metabolism.
  • YELLOW- active and visible. It symbolizes happiness and energy.
  • GREEN- the color of nature. It represents growth, freshness, and hope and is soothing.
  • BLUE- openness, intelligence, faith. It can be calming and appetite reducing. It can also be a symbol of bad luck or trouble but is also representative of sky and sea. It can also give a sense of stability.
  • PURPLE- often represented royalty or power. It can symbolize wealth or extravagance and is associated with flowers, and gemstones.

WHITE- represents perfection, light, and purity. It often symbolized cleanliness.

BLACK- can represent death and darkness, but also power, elegance, and strength.

These are just some of the things to consider when selecting a palette of colors for a website. One can design in monochromatic, analogous, or complementary color schemes. All of these have merit. There is a color scheme generator from Well Styled (http://www.wellstyled.com/tools/colorscheme2/index-en.html).

Review the following websites:

Web Style Guide, 2nd Ed. – http://webstyleguide.com/index.html

Web Style Guide is an online book which covers many aspects of style and design for websites. There is information on the process and planning aspect that should go into a website design before the coding happens. Also covered are: interface, site design, page design, typography, editorial style, graphics, and multimedia. At the very top is a link to new information on universal usability (http://universalusability.com/). Universal usability is different from universal accessibility-accessibility means that the content functions, or is within reach of all users. Usability means that the content and functionality is not only accessible, but useable by everyone. Web Style Guide is a thorough look at all the details that go into a good website design, whether one is doing a personal page or a large, institutional / corporate website.

Universal Usability http://universalusability.com/access_by_design/index.html

The Universal Usability site is linked to by the Web Style Guide site. It covers a variety of topics with the goal being to make a website that is usable by everyone, not just accessible. Topics include: text, images, data tables, layout tables, frames, lists, forms, links, color, audio and video, interactivity, editorial style, and page layout.

As an example, it is recommended that plain text be used for text, with styling done through CSS. The users should be able to adjust the text size as needed so text elements should be sized using relative measurements like percentages or ems (headings could be 125% larger than normal paragraph text).

Frames and layout tables should be avoided (especially frames) because they make printing, bookmarking and returning to pages more difficult. Some non-visual users also have problems with tables and frames if the content is not clearly labeled.

JJ.net (User-Experience Designer Jesse James Garrett) http://www.jjg.net/ia/

This is the site of Jesse James Garrett and his collection of resources related to information architecture and experience design. The layout of this site is simple but very functional. There are no large photo-type graphics but rather small gif-type images to lend color and act as links. User experience is important and Garrett provides a model of things to consider in order to create a successful user experience on a website.

Garrett has a link to the website for Adaptive Path (which he founded) in which he describes the “Nine pillars of successful web teams”. The nine areas which need to be represented and thought about are:

  • User research
  • Site strategy
  • Technology strategy
  • Content strategy
  • Abstract design
  • Technology implementation
  • Content production
  • Concrete design
  • Project management

All of Garrett’s work is centered on the user and how to make the system work for them. If the user is happy and benefits, then the company or organization will have been successful.

Smashing Magazine: Top 50 Blog Designshttp://www.smashingmagazine.com/2008/05/08/now-more-than-ever-50-more-excellent-blog-designs/

This article on blog designs is really amazing. It is a great view at some of the really creative blogs from a design perspective. Some actually look more like full blown websites than “blogs” but I suppose really a blog is a website; it is just that most of its material is frequently and regularly updated (i.e. daily and weekly as opposed to bi-monthly, yearly or never).

There seemed to be a lot more creative, artsy license taken in these blog designs with creative images used freely. As long as the text content was visible and readable, then the blog worked. Sketchblog (http://www.rob-sheridan.com/sketchblog/) was rather amazing as it is done by an artist and offered a glimpse of how he completes a “sketch” through step-by-step instructions.

Next Page »