网页设计师指南：色彩与布局的艺术解析

需积分: 3 146 浏览量更新于2024-08-01 收藏 12.78MB PDF 举报

"Design for Web Developers. Color and Layout.pdf" 是一本专为Web开发者设计的图书，由Linda Goin撰写。这本书包含了17个章节，最初是DMXzone上的一系列独立文章。作者首先介绍了设计的基本元素和原则，并通过实际网站的例子深入探讨这些方面，既展示了优秀的设计实践，也指出了不足之处。书中的第12章和13章将前面的知识点整合，通过详细拆解顶级网站来提升读者的分析技巧，并巩固学习内容。此外，书中还有专门章节深入讨论排版以及对导航设计的不同方法的理解。Linda在全书各处提供了丰富的参考文献和进一步阅读建议。该书的核心知识点包括： 1. **设计的基本元素和原则**：书中详细讲解了色彩、布局、对比、重复、对齐和接近性等设计基本元素和原则，这些都是构建视觉吸引力和功能性的网页设计的基础。 2. **实际网站案例分析**：Linda通过对真实网站的实例分析，使理论与实践相结合，帮助读者理解如何将设计原则应用于实际项目中，同时提高识别和评价设计优劣的能力。 3. **色彩和布局**：色彩是影响用户情绪和网站整体感觉的关键因素，布局则决定了信息的呈现方式和用户体验。书中详细阐述了如何选择合适的色彩搭配，以及如何有效地布局页面元素以实现良好的视觉流程。 4. **网站拆解分析**：通过详细拆解多个顶级网站，Linda引导读者分析设计背后的思考，提高对优秀设计的理解和欣赏能力，同时也强化了之前所学的设计理论。 5. **排版艺术**：排版章节深入探讨了文字的排列、字体选择、行高、字距等方面，强调了排版对于信息传达和阅读体验的重要性。 6. **导航设计**：最后的章节关注了导航设计的不同方法，阐述了如何创建直观且用户友好的导航系统，以便用户轻松浏览网站内容。 7. **版权和责任声明**：书中的版权信息提醒读者尊重知识产权，同时也明确了作者和出版方不承担因使用本书信息而产生的任何直接或间接损害的责任。 8. **商标引用**：尽管作者和出版方尽力提供所有提及公司和产品的正确商标信息，但可能存在的疏漏并不构成法律责任。通过阅读这本书，Web开发者和设计师能够提升他们的设计技巧，理解如何运用色彩和布局来增强用户体验，以及如何评估和模仿优秀的网站设计。此外，进一步的阅读推荐为读者提供了扩展学习的机会。

Where do We Go From Here?

I mentioned above that design was a science. Does this mean designers are scientists, too? Not necessarily.

However, we can benefit from the scientific process. The process works in steps, and one step logically

follows the other. Then, when the process is completed, we begin all over again, so this practice is linear and

cyclical. This process is the only acceptable method to prove or disprove theories or ideas, and the

enterprise that eventually creates empirical laws (how things work by practical experience):

1. Observation: We use our own senses (all senses, including touch, sight, sound, etc.) and any

machines that are extensions of these senses to carefully observe the problem. For example: I

observe that the images on a site do not appear in the browser.

2. Question: We question the observation and research and gather answers from previous similar

problems. The question about missing images may be, "What's wrong?", but this is a very broad

question. Preferably, the question is direct: "Why are my images missing?" At this point, I try to discover

how other designers answered this question.

3. Hypothesis: We predict the answer to the question and test the answer. The answer to the missing

images might be that the images were not uploaded, or it could be that the code for the image is

incorrect. The uploaded files and the code are checked. If the files are there and the code is

correct, then more research is needed to answer the question.

4. Further Experimentation: We state the conclusion if the question is answered. The outcome is

measurable, and we can record the data for future reference. However, this conclusion of testing

the hypothesis may present other problems that require further observation, questions, research, and

conclusions. Additionally, the answer that works today may not fit tomorrow's problems.

This process may never end, or it may require only a few moments. Sometimes, this process is an unconscious

effort, like breathing, because we learned how to use this methodology many years ago. Whether these

steps are old-hat or new, it helps to remember them when we become tired and stressed and one simple

problem blows out of proportion.

These steps are also useful applications to learn the elements and principles of design. If these tools become

confusing, use the scientific methodology to comprehend the meaning. For step three, many books are

available to help us research design questions and answers. The following books do not focus on web design

specifically, but on concepts and/or technical skills used in visual communications. Please remember that

concepts are temporary results in step four of the scientific method. These theories are always open to

further questions and debate about the answers.

Resources

Visual Literacy: A Conceptual Approach to Graphic Problem Solving by Judith Wilde, Richard Wilde, Watson-

Guptill Publications, 1991, ISBN: 0823056198

Conceptual processes of visual communications.

Basic Visual Concepts And Principles For Artists, Architects And Designers by Charles Wallschlaeger, Cynthia

Busic-Snyder, Meredith Morgan, McGraw-Hill, 1992, ISBN: 0697006514

A book highly recommended for any serious design student.

Design for Communication : Conceptual Graphic Design Basics by Elizabeth Resnick, Wiley, 2003, ISBN:

0471418293

Technical and conceptual processes and exercises located here.

Chapter 2: Point, Line, Plane: Foundations of Web Design

Communication

"Good composition is like a suspension bridge - each line adds strength and takes none away."

Robert Henri (1865 - 1929) US painter

Donna Ward La Cour, Artists in Quotation, 1989.

In the first chapter I briefly outlined the web designer's, or visual communicator's (VC), six main attributes. The

first characteristic on this list concerned the ability to communicate a visual message. The computer screen is

the visual format, and the designer utilizes all the elements and principles of design to relay a message to the

viewer.

The first out of a total of eight elements of design is line. Points create lines, and lines manufacture planes

Here we'll explore how line is used to compose messages both in layout and with type, and, as each VC

comes from a different background, and she brings a particular perspective to the design job, we'll look at

how a VC's background affects her use of point, line, and plane.

The Genesis of Line, the First Design Element

Many of you might shiver in your seats if I mention Euclidean geometry, but math is an unavoidable design

tool – even the simplest of Flash games need knowledge of Physics (= math) to mimic the way a ball

bounces, or gravity affects objects. Therefore, math is also a necessary development in our background

experience. I'll try to soften the impact here, because when we can comprehend Euclid's concepts, we

might see our work in a new light.

Euclid taught that points, lines, and planes represent idealizations that do not exist in the real world. For

instance, Euclid's point has zero size. We know that nothing in the physical realm has zero size, but many

objects approximate points. Stars appear as points of light, and periods appear to end a series of words in a

sentence.

Euclid was a Greek mathematician (c. 325-270 B.C.E.) who wrote the 13-volume textbook, Elements. For

2,000 years, this series was the second-most reproduced book of all time after the Bible, and remains the

most successful textbook in history. Euclid taught at the Museum University, a place named to honour the

muses.

A geometric line, says Euclid, is formed by connecting two points along the shortest possible path. A line is

imagined to extend infinitely in space with length, but no width. (According to Euclid, width would transform

the line into a plane). Because we can't work with infinite imaginations of line in our web designs, we use line

segments, or pieces of the universal line.

A geometric plane is a perfectly flat surface that extends its length and width infinitely in space, but does not

have depth. Yes, you guessed it – this plane is also imaginary. The plane is represented by a surface like the

computer screen, which is a very small portion of this universal plane made manifest.

The emphasis on imagination is important, because Euclid wanted his mathematicians to think, to massage

their brains with possibilities.

For more about Euclid and some of his creative mathematical and philosophical buddies, Plato, and

Pythagoras, see Using and Understanding Mathematics: A Quantitative Reasoning Approach (2nd Edition),

by Jeffrey O. Bennett and William L. Briggs, Addison Wesley, 2001, ISBN 0201717115. Even better, try the very

readable Art & Physics: Parallel Visions in Space, Time & Light, by Leonard Shlain,William Morrow & Co, 1991,

ISBN: 0688097529. Shlain proposes that the development of art history actually presaged or coincided with

the evolution of math throughout history, and the connections he creates between two seemingly disparate

skillsets are brilliant.

What Euclid couldn't possibly imagine is the curvature of space/time, which was revealed by Einstein in the

twentieth century. This non-Euclidean geometry states that no line or plane can extend infinitely, because

there are, really, no straight lines except for our straight line of vision that uses the horizon as an orientation.

This horizon line is most useful for us when we create perspective.

You might wonder why Euclid and Einstein are important to our work as web designers. Both men were

mathematicians, but they were also designers. They created their realities, and the world agreed that what

they created was also real for them. Euclid merely crystallized practices used within his cultural space and

historical time. Since that era, architects, landscape artists, sculptors, and other three-dimensional designers

leaned on his principles to create our worlds. His ideas are even more important for typographers, fine artists,

and web designers, among many other two-dimensional artists, because we need his tools to create illusions

of depth, perspective, and proportion, among other visual optics. To learn more about the concepts of

geometry and its creative design processes, visit the

Geometry Junkyard.

Einstein's impact is seen in the works of

Salvador Dali, Man Ray, Pablo Picasso, and Rene Magritte, among

other artists and designers who utilized

surrealist techniques. After viewing some of these works, think about

what these artists might say about our ability to build visual environments with code and light AND

interactivity. Beyond surreal? You bet.

URU is one example that might blow the surrealists away. However,

even in URU, realism sets in when we begin to ponder how to utilize line to create boundaries, elicit emotions,

and direct the viewer's eye from one point to another.

The Element of Line Creates Other Design Elements

The following images illustrate how concepts of point, line, and plane are used to create visual illusions:

Ok, let's look at the first black square. The elements of design are in bold to show the impact of point here.

This simple yellow point represents colour, because it's a different hue from the background. It also creates

volume, because the point appears to either jut out from the background, or create a "light at the end of

the tunnel" effect. Value is represented by the lightness and darkness illustrated between the point and the

background. Space is represented by the lone point in the vast sea of black, or an element within an

element because this is a portion of line in space. Does it create texture or movement?

Perhaps, but not as much as the next set of red points, which creates a line representing movement. This

movement represents gravity. Texture is created by the overlapping points, and the gradation of colour. In

the second black box, two points show space, because one is smaller than the other. The moon is larger

than Venus, right? Maybe, maybe not, but if it is further away, it appears smaller. The last set of points creates

a shape, and it includes value, colour, space (between points), and texture.

This is just one set of simple examples to show how a point can be used in a variety of ways to form other

elements of design. Really, there are no right or wrong answers to the way a point works, because how you

see that point in a format may be different than how I see that point in a format. One way to play around

with points to create other elements is to plop an image into Photoshop and utilize the "pixelate" filters. This is

how I created the shape above right, using the colour halftone filter on a plain red circle.

Let's see how line works to create other elements:

Line creates other elements just like points, because a line is created by joining points. Characteristics of a

visible line include some degree of thickness, and often have shape and surface characteristics, like texture

and curves. Lines can also be passive. The line that separates the black backgrounds from the white

backgrounds in the blocks above is passive because it is hidden; however, it makes itself known because it

separates the values represented by black and white. Lines can be solid or broken, and they can create a

number of

optical illusions.

Line also communicates messages through type. The lines you are reading now are formed by type, and the

type is formed by line, which is formed by the meeting of points. The typed lines have direction, because we

are accustomed to reading the English language from top left to bottom right, so I must comply with this

restriction so you will comprehend my thoughts in a body of text. The computer recognizes this format and I

can't defy the rules of my tools, nor would I want to, because I want you to read my insights. The only way I

can rebel against this direction is to create an image with type that moves in another direction, like

backwards or from bottom right to top left.

Why would I want to do this? Perhaps I need to create another shape, or another message. Maybe I want to

lead your eye in a different direction than "normal." The headline, of course, is a different design tool than

body text, so I can play with this element more than I could with the body of the message. Before we look at

how line is used in design principles, let's take a detour to learn how someone in another culture views lines…

Cultural Design Lines

In the book, The Idea of Design (see reference below), A Cheng writes an essay on line and its importance in

Chinese painting. Cheng contends that the development of writing in China established the importance of

line in creative art and design – including architecture.

He states, "Unlike other languages of the world (with the possible exception of the Arabic language within

Islamic culture), the transformation or elevation of calligraphy into a high art form is a unique phenomenon

of Chinese culture."

Chang states that many people believe that the way a Chinese calligrapher uses a brush is the secret to

perfection. He points out that, although the calligrapher's brush is essential to create an image, the

calligrapher's perception of line is more important. To make a connection to web design here, computer

hardware and software are essential to create a web site, but – from Chang's perspective – the web

designer's perception of line is more important.

"A virile work in which strength is paramount. The character is "mountain" by [Zhang Zhengyu][Chang Cheng-

yu] (1903-1976)" From AsiaWind Art Gallery.

Some of the theoretical guidelines developed by Chinese masters to encourage this perception of line are

outlined as follows (pg 230 in the book):

• No perpendicular line can go on forever without turning back. All lines eventually come to an end.

The emphasis in on control and organization. Line, therefore, is not a concept but a concrete object

(NOTE: this is opposite from the Euclidean concept that line is illusory and that lines are infinite).

• A point is the constricted form of a line. It is controlled with the same principle as the line. Therefore,

like a shufu, a point has direction (NOTE: shufu literally means the rules of writing, metaphorically, it

means the art of writing, pg 229).

• A streaked surface is an expansion of line created by the side of the brush. The nature of the streaked

surface is not to create shadows but to create veins like the grain of wood.

• A splashed surface is a further development of the streaked surface. Pouring ink onto paper creates

a surface. Then, the surface is controlled by the brush.

Chang elaborates the points above (except for the second one, and the unwritten is unclear to this western

mind), "Such an approach to line as the principle of Chinese art and design brings a deeper understanding

of many aspects of Chinese culture."

The importance of line in China is exemplified by the viewer who judges the quality of a painting by looking

at the details through a small cylinder, perhaps a piece of bamboo. "By looking through the small aperture,

one could tell whether the painting as a whole was good or bad, without knowing whether the subject was

a mountain or a house."

We don't have to view our web sites 'through a bamboo darkly,' but the point is well taken when we

compare eastern and western methodologies. Web designs are often intended for specific markets, but – in

reality – the web site can be viewed internationally by any person with a computer and an Internet

connection. If I can't comprehend the eastern view of line, will my western lines be misinterpreted also?

Although this Chinese "spirit of line" stands at a distance from western culture, a spirit is also felt through

Euclidean muses. The major difference is that the calligrapher/artist in this Eastern culture is aware of line,

whereas the web designer in a Western culture may not be trained to attune to this esoteric skill. How do we

become more aware of the possibilities of line in our designs? One response is to understand how these

universal design elements fit into universal design principles.

剩余221页未读，继续阅读

leonhd

粉丝: 11
资源: 51

网页设计师指南：色彩与布局的艺术解析

js(JavaScriptProgrammer’sReference.pdf、javaScriopt.Examples.Bible.pdf javaScript2005-wrox-professional Javascript For Web Developers.pdf)

Pragmatic.Web.Design.for.Developers.Dec.2009.rar

JavaScript.For.Web.Developers.pdf

Design for Web Developers(PDF).rar

Eclipse kelper Eclipse Java EE IDE for Web Developers. Version: Kepler Service R

Professional.JavaScript.for.Web.Developers.3rd.Edition

Wrox.Professional.JavaScript.for.Web.Developers.3rd.Edition

Wrox.Professional.JavaScript.for.Web.Developers.3rd.Edition.Jan.2012

Expert ASP.NET Web API 2 for MVC Developers.pdf

Wrox.Professional.JavaScript.for.Web.Developers.3rd.Edition.Jan.2012.part2.rar

最新资源