Creating Bulletproof Graphic Link Buttons With CSS

A CSS problem I have been wrestling with lately is how to create a bulletproof shrinkwrapping graphic button. By that I mean an image-based button that will expand and contract to fit the amount of text it contains. It is a very useful technique for CMS-driven sites that allow the client to change the text that is displayed on buttons, as well as for multilingual sites.

Johansson, Roger. 456 Berea Street (2007). Articles>Web Design>Graphic Design>CSS

Cooking With Stock

It’s not a secret. We all use stock imagery in our day-to-day design work. So why doesn’t anybody ever talk about it? Just like the inventory of a grocery store, not everything you see on a stock photo site is an ingredient for a gourmet production. By far the worst mistake you can make when choosing stock is selecting stereotypical or clichéd images to convey a concept.My guess is that we’re all just a little ashamed. We want people to see our work as just that: ours. When you have to tell someone that you didn’t create that grungy texture, or you didn’t take that beautiful photo, it feels a lot like admitting that you’ve cheated on a test. But this is nonsense—as designers, it’s our job to put things together and deliver a composition that looks good.

Beaird, Jason. Digital Web Magazine (2008). Articles>Web Design>Graphic Design

Web Design 101: Photoshop

Photoshop promises great power, but can be more than a little challenging when it comes to clarity and patience. New users can easily get frustrated at how daunting some of the challenges can be when it comes to getting the job done, and even those who are a bit more familiar with it still find points of frustration that impede both production and creativity. So for those who barely know Photoshop, but would like to become more familiar with it—find out what sort of things to look for when it comes to the palette system, layers, styles, effects, various tools, and saving or exporting their work—let’s look at the basics.

Peck, Anton. Digital Web Magazine (2008). Articles>Web Design>Graphic Design>Adobe Photoshop

Develop PHP applications with Picasa Web Albums

Picasa Web Albums offers Web application developers a REST-based Data API to manipulate the photos and albums stored on its servers. PHP's SimpleXML extension and Zend's GData Library are ideal to process the XML feeds generated by this API so you can customize PHP photo management and photo sharing applications. In this article, meet the Picasa Web Albums Data API and see how you can use it to retrieve photos and photo metadata; add, modify and delete photos; and perform keyword searches of Picasa's user-generated content.

Vaswani, Vikram. IBM (2008). Articles>Web Design>Graphic Design>PHP

COLOURlovers

COLOURlovers™ is a resource that monitors and influences color trends. COLOURlovers gives the people who use color - whether for ad campaigns, product design, or in architectural specification - a place to check out a world of color, compare color palettes, submit news and comments, and read color related articles and interviews.

COLOURlovers. Design>Web Design>Graphic Design>Color

The Sphere of Design

The web design community thankfully seems to be wrapping up the "design vs. usability" argument. In case you missed it, the conclusion was: "Not either/or but both, and it depends."

Hunt, Ben. Web Design From Scratch (2006). Articles>Web Design>Graphic Design>Usability

Graphic Design vs. Usability

Graphic Design can "hijack" usability efforts if the graphic design team is not "on board" with usability. This is probably why these days more and more graphic artists (like the students at the Art Institute of Portland where I am currently teaching a class) are learning about usability and have a sensitivity for its user-centered intentions.

Spillers, Frank. Demystifying Usability (2004). Articles>Web Design>Graphic Design>Usability

Graphic Design Plays a Minor Role on the Web

The best websites are highly functional. They are task-focused. Graphic design has an important, though limited role. Don’t try and force the Web to be what it’s not.

McGovern, Gerry. New Thinking (2005). Articles>Web Design>Graphic Design

CSS Overlays: Using CSS Positioning to Overlay Web Objects

An overlay is when one web object overlaps another. Overlays are often used to highlight or draw attention to important items on websites to raise conversion rates. This article shows how use CSS positioning to avoid slicing and dicing your overlays and assembling with tables. Along the way we'll look at the workarounds we used to make the technique work with different browsers (most importantly IE5.x Mac and Safari).

Website Optimization (2008). Articles>Web Design>Graphic Design>CSS

Image Optimization Part 1: The Importance of Images

On average, 46.6% of the page weight for these popular sites consists of images, included either inline with tags or via CSS stylesheets. This is a massive percentage and it tells us one thing: There’s huge potential to improve the performance of websites if we can improve the way we handle the image payload. By focusing on images you can make a difference and delight your site visitors with a faster and more pleasant experience.

Stefanov, Stoyan. Yahoo (2008). Articles>Web Design>Graphic Design>Compression

Fifty Monochromatic Website Designs

Color choice is a key element to the success of any design. It invokes an atmosphere and sets the mood. One method for using color is to use only shades of a color, which is known as a monochromatic color scheme.

Shelton, Michael. Webdesigner Depot (2009). Articles>Web Design>Graphic Design>Color

Making $10,000 a Pixel: Optimizing Thumbnail Images in Search Results

In search results, the old adage a picture is worth a thousand words rings true. When it comes to making your search results more efficient to use, more relevant, and more attractive, images reign supreme. There is simply nothing else on your search results pages that can come close to offering the same potential as thumbnail images for dramatically increasing your conversion rates and revenues.

Nudelman, Greg. UXmatters (2009). Articles>Web Design>Graphic Design>Search

Effective Alt Text

It is perfectly possible to diligently apply alt text to every image on a site and create a result that is completely useless. Unless the alt text effectively conveys the information the image displays, it will be ineffective.

Frontend Infocentre (2008). Articles>Web Design>Accessibility>Graphic Design

How to Draw with HTML 5 Canvas

Among the set of goodies in the HTML 5 specification is Canvas which is a way to programmatically draw using JavaScript. We’ll explore the ins and outs of Canvas in this article, demonstrating what is possible with examples and links.

Newman, Jamie. Carsonified (2009). Articles>Web Design>Graphic Design>HTML5

Let’s Call It a Draw(ing Surface)

HTML 5 defines the CANVAS element as “a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.” A canvas is a rectangle in your page where you can use JavaScript to draw anything you want.

Dive Into HTML5 (2009). Articles>Web Design>Graphic Design>HTML5

Rich Typography On The Web: Techniques and Tools

In addition to font stacks, why not replace the heading text with an image, embedded font, or bit of Flash? The methods described below are easier than they sound. And the end result is that the vast majority of users will see the beautiful typography you want them to see. A word of warning, though: don’t use dynamic text replacement for all of the text on your page. All that would do is slow it down and frustrate your visitors. Instead, save it for headings, menu items, pull quotes and other small bits of text.

Chapman, Cameron. Smashing (2009). Articles>Web Design>Typography>Graphic Design