网页设计中的颜色

从心理学角度来讲，不同的颜色代表不同的意思。从这个观点出发，本文讨论网页界面中背景颜色和内容颜色的关系。了解这个关系，有利于：a) 为网页中不同的内容选择适合的颜色；b) 浏览网页时，可以方便的找到需要的内容。

Yuan, Xiaowei and Xiaoqin Wang. uiGarden (2005). (Chinese) Design>Web Design>Graphic Design>Color

3D Effects

Three-dimensional illusion effects are powerful devices that can achieve excellent results. They can also add significantly to overall page filesize, and can reduce usability if overused, so should be used deliberately and with care (unlike the title image above, see cooltext.com if you want one).

Hunt, Ben. Web Design From Scratch (2005). Design>Web Design>Graphic Design>3D

Accessible Data Visualization with Web Standards

When designing interfaces for browsing data-driven sites, creating navigation elements that are also visualization tools helps the user make better decisions. Wilson Miner demonstrates three techniques for incorporating data visualization into standards-based navigation patterns.

Minor, Wilson. List Apart, A (2008). Design>Web Design>Graphic Design>Charts and Graphs

Add Inspiration With Illustrations

Which comes first, the concept or the artwork? The assumption has always been that you first figure out the concept, then find the art to fit. But even if we leave many things in our life unquestioned--design shouldn't be one of them.

Will-Harris, Daniel. Typofile (2003). Design>Web Design>Graphic Design

Art Direction and the Web

Introduces the principles and techniques of the art director, and shows how art directional concepts can shape memorable user experiences.

Hay, Stephen. List Apart, A (2004). Design>Web Design>Graphic Design

Attractive Vectormaps: A Call for Well-Arranged Webmaps

If a user has a choice between two maps he/she will often use the map with the 'better' design. This means a map, besides being readable, should be visually attractive, comparable with other maps and eventually deliver some tools to navigate and interact with a map. A further problem is that a lot of maps are not always self-explaining by default. SVG offers some possibility to make maps well designed. The readability is dependent on several factors: e g. the chosen colors, used fonts or minimal dimensions for symbols, line-styles and fill-patterns. The article is pointing to basic principles for designing visually attractive maps.

Dahinden, Tobias. SVG Open (2002). Design>Web Design>Graphic Design>Cartography

The Bathing Ape Has No Clothes

I do this because, well, I love design. More to the point, I crave design talk: who’s influenced who, what tools do you use, what trends do you observe, what rocks your world, and so forth. I get a lot out of this discourse. The signal-to-noise ratio of this particular subset of the Internet has always tilted strongly towards meaning. Until fairly recently, that is, when I started to notice a new feeling creeping into the sites I frequented. In what were nominally gathering places to discuss and celebrate online design, design seemed to be just about the last thing on anyone’s mind.

Greenfield, Adam. List Apart, A (2002). Design>Graphic Design>Web Design

A Better Image Rotator

About a year ago, I wrote an article, introducing a method for displaying a random image every time someone visits a web page. Administration was simple: just add or remove images from a folder on the server, and they would appear (or disappear, respectively) from the pool of random images being displayed on that page.

Benjamin, Dan. List Apart, A (2004). Design>Web Design>Graphic Design>DHTML

The Brilliance of Smart Photoshop Objects

When it comes to editing an image, that typically means going back into the image app, recreating the image, then putting the newly created image into your site. A serious GoLive advantage is that communicates directly with your imaging apps to regenerate a new image right in place on your page.

Mac Design Magazine (2005). Design>Web Design>Graphic Design>Adobe GoLive

Cleaner, Sharper GIF, JPEG, And PNG Images

While they're not absolutely necessary for Website functionality, images help improve the appearance of a site. With a few gcood quality, highly optimised images, you can give your site the edge it needs to leave a lasting impression. The problem is that many Webmasters, both novice and experienced, don't feel confident when it comes to creating clean looking graphics and optimising them for the Web.

Rutter, Thomas. SitePoint (2003). Design>Web Design>Graphic Design

Color on the Web

You're seeing red. They're seeing orange. Not the same, is it? More often than not, color on the web is approximate. So how do you choose colors that are going to work best? Are you forever stuck with the old 216 color 'web-safe' colors? Is there technology that ensures what you see is what your visitors get?

Will-Harris, Daniel. Typofile (2003). Design>Web Design>Graphic Design>Color

Color on Web Design

Psychologically speaking, different color has different meaning. From this point, this article focuses on the relationship between the background color and content of the web interface.

uiGarden (2005). Design>Web Design>Graphic Design>Color

Coloring Outside the Lines

This series of articles about color is designed to help you get started right now selecting colors for your site.

Carter, Mary E. EFuse (2004). Design>Web Design>Graphic Design>Color

Colour

Colour is one of the designer's best tools. There are lots of ways to use it to help communicate a message. Colour can carry meaning, express personality, differentiate, frame, and highlight content.

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

Contrast

Contrast is the most fundamental design device: it differentiates elements; it brings out dominant elements; it mutes lesser elements; it creates dynamism.

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

Cross-Browser Variable Opacity with PNG: A Real Solution

Periodically, someone tells me about the magic of PNG, how itÂ’s the ideal image format for the web, and that someday we'll all be using it on our sites instead of GIF. People have been saying this for years, and by now most of us have stopped listening. Sadly, flaky browser support has made PNG impractical for almost everything--but now, with a few simple workarounds, we can finally put one of its most compelling features to use.

Lovitt, Michael. List Apart, A (2002). Design>Web Design>Graphic Design

The Delicate Art of (Web) Design Critique

Since I tend to hang around on various web-related mailing lists, I often see numerous requests for design critiques. Increasingly, this leads me to wonder about the process of critiquing other people's design. It's quite one thing to criticize someone's code; one can argue the merits or not of being a stickler about standards compliancy, or using CSS, or whatever. But design is more personal than writing code. (Writing on its own is also very personal, but that's not the topic here.) How do you constructively critique someone's work without being taken the wrong way? How do you accept criticism without feeling hurt or angry? Here are just a few ideas, gathered from observations and comments from others.

Itoh, Makiko. Digital Web Magazine (2000). Design>Web Design>Graphic Design>Assessment

Design Melt Down

A web resource about web design techniques.

Hunt, Ben. Design Melt Down (2005). Design>Web Design>Graphic Design>Blogs

The Design of World Wide Web Home Pages: Using Visuals to Establish Organizational Ethos  

The World Wide Web presents information developers with the task of designing texts that will be accessed by multiple, global audiences. At the same time, Web technology presents developers with new design constraints. Therefore, Web text development warrants new design considerations. This paper presents an approach based on the rhetorical concept of ethos. Four visual design considerations—page grid, graphic files, icons, and text structure—are reviewed based on how decisions about each convey the ethos of the organization.

Hunt, Kevin. STC Proceedings (1995). Design>Web Design>Graphic Design>Visual Rhetoric

Digital Photography for the Web

Like digital photography? Here's a look at tools and tricks you can use to create great photos for your site.

Calore, Michael. Webmonkey (2003). Design>Graphic Design>Technical Illustration>Web Design

Disappearing Act  

It's easy enough to create an irregularly shaped image in Photoshop, but how do you get the rectangular background to disappear when you use that image on the Web or in a print-based layout? Here are some great techniques that'll help you focus on your subject.

Dayton, Linnea and Jack Davis. Adobe Magazine (1998). Design>Web Design>Graphic Design

Display 2.0: A Look Forward to the High-Definition Web and Its Effect on Our Digital Experience

The adoption of high-resolution displays--with 150 or more pixels per inch--will significantly alter our conception of what the Web and networked applications can potentially be. As the price of high-res displays comes down to earth and early adopters make way for mass consumers, beautiful visualizations of data will enrich the digital realm.

Follett, Jonathan. UXmatters (2006). Design>Graphic Design>Web Design

Dithering: Good, Bad, and Ugly

This piece discusses dithering in the context of Web graphics, and introduces the WebScrub image optimization algorithm developed by Todd Fahrner at Verso, realized as freely-downloadable Photoshop plug-ins for Mac and Windows, as well as scripts for the image-processing program DeBabelizer (MacOS only at present).

Fahrner, Todd. Cleverchimp (1997). Design>Graphic Design>Web Design

Do Too Many Graphics Reduce Sales Page Conversion Rates?

Optimizing an offer page to maximize the number of people who make a purchase or pay for a subscription is a delicate process. You need to get the balance just right.

Usborne, Nick. Excess Voice (2006). Design>Web Design>Graphic Design>E Commerce

Review: Easy Web Graphics  

Easy Web Graphics would be a good choice for novice or intermediate users of Microsoft FrontPage and Microsoft Photo Editor who want to make better use of those products.

Hudak-David, Ginny. Technical Communication Online (2002). Articles>Reviews>Graphic Design>Web Design