interterm 2007 An introduction to Web-based design. Students will design their own Web site to feature their own portfolio of images. In the process students will learn XHTML, CSS, and Dreamweaver 8. The focus is upon learning the skills required of, and the best practices advocated by, contemporary Web designers.
Inspiration & Tools for the Designer
CSS Design Portals
The following sites are all committed to providing convenient access to excellent Web-standard sites designed with Cascading Style Sheets. They serve not only to recognize the designers and give them exposure but also to inspire students of Web design such as you.
These CSS portals are all driven by designer- and user-submitted content. To maximize exposure, designers submit to multiple portals, so there is some duplication among them. (The exception is CSS Zen Garden.) Nevertheless, browsing always uncovers unique entries, and it may be one of those that flips your switch.
- CSS Zen Garden
- This is the most influential CSS Design Gallery on the Web. Designers from all over the world have downloaded the same HTML document, created a stylesheet that dictates the presentation of the structural markup, then uploaded their design to the site. The majority of the designs show a definite graphic design influence and so should be pure inspiration for you.
- CSS Drive
- A CSS portal. Designers contribute links to their new sites, which are categorized by grid and style and sorted for users. A nice feature is that CSS Drive also includes an Examples area where contributors upload bits of CSS/HTML for menus, special effects, hacks, etc.
- cssBeauty
- Another CSS portal site, cssBeauty provides a database of well-designed CSS-based Web sites from around the world. In addition to showcasing designers’ work, it tries to offer a small portal to the CSS design community.
- Liquid Designs
- This CSS portal is the only one dedicated to fluid and elastic designs. (Those Web pages in which the main content expands and rewraps as you resize your browser window.) While such elastic designs were hot before larger monitors became the norm, most designers now favor fixed-width pages. However, judging from the number of new sites added in November and December, many designers still favor these fluid pages.
- CSS Mania
- CSS Mania claims it is the largest (9,177 unique screenshots as of 1.06.2008) and the most frequently updated CSS gallery on the Web.
- CSS Import
- CSS Import promotes itself as a “no-frills css gallery. ”It is clean and simple to use. Designs are organized by months.
- Unmatched Style
- Yet another gallery of designer- and user-submitted CSS-based sites. This one is organized by tags. (I’m not sure if the tags are selected by those who submit the sites or by the site administrator.)
- light on dark
- light on dark attempts to showcase well-designed and -coded Web sites with light text on a dark background, and serves as a portal to promote the techniques used in the development of those Web sites.
Other CSS site galleries worth a look include:
Best Web Gallery
CSSBloom
CSS Elite
CSS Remix
Screenalicio.us
CSS Vault
CSS Thesis
Other Web Design Galleries
- Cool Home Pages
- Cool Home Pages is one of the older Web design galleries. While it used to be dominated by sites laid out with tables, it is increasingly dominated by Flash sites. However, the site index still enables one to select non-Flash sites only.
- Newark1 Portfolio
- This is the portfolio of Newark1 Web Design firm, not a portal, but it is a collection of the some of the freshest, most distinctive table-based layouts on the Web today.
- The Best Designs.com
- I like this gallery because of the tags beneath each thumbnail that describe the basic design qualities of the site and warn about the use of Flash.
- Best Web Gallery
- Another site that uses a tag clould to help you find the CSS sites and avoid the Flash sites.
- The Webby Awards
- These annual awards have come to be known as “the Oscars of the Internet. ”The Webby winners reflect not only cutting-edge design but also outstanding usability, accessibility, and functionality.
- Alexis Smith Photography
- The Art of David Ho
- Audrey Kawasaki
- Benjamin Fischer
- Bitterfly.com
- Celeste Photoart
- Cesar Rubio Photography
- Climie + Co Photography
- Copper Reed Studio
- Daniel Martin Diaz
- Dogpaw Studio
- Elgorithms Design
- Fergal Keane
- Firda Beka Photography
- Grant Robinson Design Portfolio
- Graphic Girlz
- Jajo, Inc.
- Jason Kottke
- Jean Alan Design
- Jennifer Siegrist
- Jeremy Sutton-Hibbert
- Jiri Jerabek: Web Designer, Graphic Designer
- Jon Reis Photo & Design
- Ken Wong Illustration and Design
- Larry Roibal Portfolio
- Lisa Falkenstern Art
- Lisa Whiteman Lens
- McGillis Design
- Novembre: The Dark Art of Daniel Long
- NullVoid: The Portfolio of Thomas Ekelund
- Redwood Design
- Rio Grande Botanic Garden Photo Gallery
- Susan Kare
- Vermont Design Works
- Willie Honig: Identity, Logo, Branding
- Anton Wiklund’s Portfolio
- Nora Brown Design
- Mark Bixby
- Ed Wilde: Studio 28
- Michael Efford, Digital Designer
- Jessica Greenwalt’s Digital Portfolio
- Media Girl
- Emil Milanov
- Artie Wosko
- Dan Finney -- Indiana Web Design
- Sketchr
- Ben Procter
- Russell Berniece
- Loretta Hui
- Bryan Ballinger
- Hobking Design
- Jared Christiansen
- Rob Morris: Digital Mash
- Emotions by Mike
- The Man in Blue
- Hermani + Sorrentino
- G. Szostak
- Pirahna Designs
- Andy Higgs
- HTML Dog
- HTML and CSS tutorials for beginner, intermediate, and advanced Web designers. One of the outstanding features of this site is the Examples page, which provides dozens of examples of presentation with the CSS required to produce them.
- HTML Goodies
- Yet another of the comprehensive, one-stop Web design/development resource centers. Most of the tutorials remain in the breezy, so-you-want-to-know-how-to style of HTML Goodies’ founder, Joe Burns, who is no longer actively involved in maintaining the site.
- MaxDesign.com.au
- This is another site that’s hard to classify. It’s not a blog and it’s not a publication. Its value to you is in the many Web design related articles it links under its regularly added “Some Links for Light Reading."
- Web Page Design for Designers
- For a number of years, this site by Joe Gillespie was one of the best Web design resources on the Internet, especially for those coming to the Web with a background in design rather than information technology. Gillespie stopped maintaining the site in June 2004, but it still contains dozens of articles, tips, and tutorials useful for designers coming to the Web from print.
- WebReference.com
- One of the most comprehensive Web development resources on the Internet. WebReference is heavy on the development side of things, meaning that much of the site is given over to ASP, PHP, JavaScript, Perl, etc., there are dozens of terrific CSS tips and how-to’s, too.
- Depiction
- Depiction is a webmaster resource site. It contains a broad collection of tutorials for Photoshop, HTML, .htaccess, CSS, PHP, and Webmasters.
- Stylegala
- A publication about Web design and standards. Stylegala includes a gallery of standards-compliant (CSS-based) sites, news, and unique features relating to all aspects of contemporary Web design.
- Web Design Library
- WDL promotes itself as the “one-stop resource for Web designers, ”and it lives up to its advertising. This is genuinely an extensive collection of articles, tutorials, and resources on every aspect of Web design and development.
- 24 Ways
- "24 Ways To Impress Your Friends" is published annually each December. One article from a leading Web designer is posted each day in December until Christmas Day, hence, 24 articles in each issue.
- A List Apart
- This ezine’s long connection with two of the most innovative CSS pioneers--Jeffery Zeldman and Eric Meyer--has made it one of the most influential forces in the development of standards-based Web design. Its archive is a treasure-trove of knowledge about CSS and Web standards.
- Design Melt Down
- This is an extremely ambitious publication. It contains “chapters" (really just categorized groups of short articles) with titles such as “Color Usage," “Design Elements and Techniques," and “Problems and Solutions." The individual articles are quite narrow in focus and well illustrated with examples from the Web. This site richly rewards an hour spent browsing articles of interest. Highly recommended.
- Designorati
- This online pub tags itself as “A 360o View of the Creative World and is thus obligated to include sections on graphic design, illustration, news design, Photoshop, typography, and more.
- Digital Web Magazine
- This another extensive collection of Webmaster resources, but it’s aimed at the professional reader, not at students. Still, if you’re looking for tips on how to get your site to “do" something you’ve seen, this might be the place to find a clear answer.
- Read/Write Web
- "Read/Write Web" is considered among the foremost blogs focused on Web 2.0 analysis and issues. Read/WriteWeb is ranked among Technorati’s Top 100 blogs in the world. The site is edited by Richard MacManus, a recognized thought leader in the Internet industry.
- Web Developers Journal
- Tips on Web page design, HTML, and graphics.
- WebDesignerWall
- Designer Nick La launched this blog in the summer of 2007. It's an excellent of one of the hot trends in Web design—the “hand-drawn” site.
- Zeldman.com
- This is the blog of Jeffery Zeldman, one of the founding editors of A List Apart, the author of Designing to Web Standards, and one of the most influential Web standards guerillas of the past decade. You can learn a ton here--and in most of the blogs that follow.
- Real World Illustrator
- Mordy Golding, the author of Real World Illustrator CS2, maintains this blog. I know next to nothing about Illustrator, but MacWorld says this blog contains some of the best articles on Illustrator available on the Web.
- Graphics. com
- This site's tagline is "the shared resource for graphic design." It has a massive archive of Photoshop and Illustrator tips as well as articles covering the complete gamut of design.
- The Designer’s Jumpola
- This isn’t really an e-zine or online pub. It’s really a portal, as Jumpola’s name and tagline both indicate: “The ultimate links list for designers, marketers, and artists." Very comprehensive. A great springboard into the Web for graphic design students.
- Creative Bits
- I haven’t spent much time browsing here at all. From the article leads on the front page, it seems to emphasize hardware more than software, techniques, or principles.
- Stylegala
- From the About page: “Stylegala is an online resource and inspiration guide for web agencies, designers and developers who take interest in websites that combine the powers of design, web standards and CSS."
- All Graphic Design
- All Graphic Design is directory of resources and articles for graphic designers and web designers including a design forum, blog, and resources directory.
- AnyBrowser
- AnyBrowser.com allows you to enter a URL for your site and then check it out in different screen sizes. Great for checking the ideal width and above-the-scroll window in old browsers.
- COLOURlovers
- This site has introductions to color theory, but the real value here is in the user-submitted palettes. You can find some gorgeous color schemes here.
- Color Palette Generator
- If you have a dominant photo you want to build your site around, you can load the photo into this tool, and it will derive a color scheme from the photo that you can use on the rest of your site. I've come to prefer Pic2Color over this tool, but the page is worth a visit if for no other reason than to check out the links to other tools on the right-hand side of the page.
- Favicon Maker
- Favicons are those little logo-like graphics that you precede the URL of many of the Web sites you visit. Favicons are 16x16 pixel graphics, and this tool provides you with that 16x16 pixel grid, allowing you to design your favicon pixel-by-pixel.
- Color Scheme Generator 2
- This is my favorite tool for exploring possible color schemes for my Web sites. The interactive color wheel
- Color Schemer
- Yet another lode of color schemes you can mine for your sites and pages.
- ColorCombo’s Combo Tester
- The unique feature of this tool is that it will extract the palette from a Web page with a color scheme you like. To find this feature, follow the link, then click the drop-down list of Other Options.
- Genopal
- Another color palette site. This one allows you to experiment with the full range of hue and value and to begin exploring a brand new palette with the click of a mouse button.
- Juicy Studio Color Contrast Analyzer
- Guideline 2.2 of the Web Content Accessibility Guidelines 1.0 requires standards-compliant Web pages to provide sufficient contrast when viewed by someone with impaired vision, or when viewed on a black and white screen. Two colours provide good colour visibility if the brightness difference and the colour difference between the two colours are greater than a set range. This tool measures the contrast between your background colors and text colors using the current W3C algorithm and tells you if you meet the standard for adequate contrast.
- Lipsum—Lorem Ipsum Generator
- This is a Web app that will generate any number of paragraphs of “Greeked” dummy text that you can (and probably should use) in the early stages of your design development.
- kuler
- kuler is an Adobe site requiring Flash 9 Player (a free download). Like COLOURlovers, kuler indexes user-submitted and user-rated color palettes. The sidebar on the home page says you can download any kuler palette directly into an Adobe CS2 application, but I couldn’t find any help for this process.
- Netrenderer
- This is an incredibly useful tool for those of us who prefer to design in the Mac environment. Just plug in the URL of the page you've designed and Netrenderer will provide a screenshot of the page as rendered by IE 7, IE 6, and IE 5.5. Essential!
- Pic2Color
- Another great Web app. Like Color Palette Generator, one of the tasks Pic2Color will do is derive a color scheme from a photo. It has a second feature that I've not found anywhere else: taking a graphic (such as a background tile) and recoloring it based upon a dominant photo.
- Spanky Corners
- The most common complaint designers make about CSS-based layouts is that they are too boxy. Rounded corners on CSS boxes is one of the most highly sought-after looks. This online app generates four small gif images and the CSS and XHTML markkup needed to add pure CSS rounded corners to your pages. Spanky Corners are not without limitations, however. Another highly desirable effect is the drop shadow. If you want a drop shadow applied to a rounded-corner CSS box, then I recommend the Thrash Box technique.
- Spiffy Corners
- This is another online app for creating the CSS and XHTML needed for rounded corners. Unlike Spanky Corners, this app creates pure CSS rounded corners--no images needed. Again, if you want a drop shadow applied to a rounded-corner CSS box, then I recommend the Thrash Box technique.
- Stripemania
- This nifty Web app makes it snap to create those striped backgrounds images that are so popular on contemporary Web sites, especially those of the 2.0 variety.
- The Tile Machine
- This is a fun little program that allows you to quickly to create your own seamless background tiles.
- Creativetechs Quicktips
- At this writing there are 129 editions of Quicktips, each with links to two or three tips for enhancing your creativity.
- GFX^TM
- There’s a heavy emphasis upon Photoshop in this regularly updated site.
- PhotoshopSupport.com
- A terrific resource for either the graphic designer or the Web designer.
- Tutorialvault.net
- The Dreamweaver tutorials are really lame, but the CSS style sheet tutorials look better. There almost 500 Photoshop tutorials, so there are bound to be some good ones.
- Bullet Madness
- A list of 200 bullets that can be copied and used free of charge.
- Kaliber10000
- I find this site poorly designed--I always have to click around wildly to find what I’m looking for--but once I get to the pixel patterns archive, the search is worth the irritation. Pixel patterns are small graphics you can tile in the background of the <body> or <div> tags.
- FlickrCC
- The Creative Commons license is an alternative to copyright that is popular among many multimedia artists who often develop their own creative work by creating "mashups" of other creative work. The Creative Commons license is a way of freeing others to use your work while still controlling some aspects of how it might be used. Creative Commons is important to Web designers because it can offer access to online materials that would otherwise be copyright protected. FlickrCC allows you to search the vast Flickr archive, filtering out all images that aren't Creative Commons licensed.
- morgueFile
- In newspaper parlance, the “morgue" is the file cabinet where photos are filed away on the chance that they may again be useful for illustrating a story. morgueFile is a database of categorized stock photos that designer’s may freely use without worrying about copyright restrictions or permissions.
- Open Stock Photography
- I poked around on this site when the Internet connection was slow, so I didn’t search for much, but what I did find here was not of particularly good quality. I did happen to turn up a good deal of artwork, which is a plus.
- Pixel Perfect Digital
- The site’s tag line is “free stock photography," but the index includes a fair number of textures and backgrounds.
- Squidfingers
- Squidfingers is the online portfolio of Kansas City graphic designer Travis Beckham. Beckham has 169 pixel patterns for backgrounds that he makes available free of charge. This portfolio is an excellent model for your own.
- Stockvault
- The quality of the images on this site seems higher than average for stock images that are totally free. Worth a look around.
- The Tile Machine
- The Tile Machine is an online Shockwave program you can use to create your pixel patterns for use as background tiles. You can even add your tile to site’s gallery, or browse through 11,000-plus tiles created by previous visitors/designers.
- W3Schools Online Web Tutorials
- Along with HTML Goodies, this is one of the oldest Web design and development sites on the Internet, and it remains one of the most comprehensive. More important, its tutorials are among the most systematic and sequential, like a good course would be.
- Entheos Web Design Tutorials
- This site features a nice selection of tutorials on Web design, CSS, Photoshop, Dreamweaver, and even content writing, among other topics.
- Web Design from Scratch
- Created and maintained by designer Ben Hunt, “Web Design from Scratch” aims to be a complete guide to Web design for everyone interested in creating effective web pages. The attractive, simple “Web 2.0” design and clear, readable writing make this site a great choice for novice Web designers.
- How-to-Build-Websites.com
- This site is billed as “A complete web design course for beginners....Only seven simple tutorials and a total beginner will be designing websites quickly."
- The CSS Tutorial
- Three tutorials on learning CSS. If you follow all the instructions and steps here, you’ll have a solid introduction to CSS.
- HTML Dog Tutorials
- Yet another set of decent tutorials. These seem a little bit less interactive than some of the other tutorials in the sites above.
Sample Portfolios
Design Resources
Webmaster Resource Centers
Online Publications for Web Designers
Web Guru Blogs
Online Pubs for Graphics Designers
Tools
Tips and Tutorials
Free Graphics and Stock Photos
Online Instruction
Bruce Clary, Instructor
claryb@mcpherson.edu
http://wwwi.mcpherson.edu/~claryb