打造美观网站：《Web设计原则》揭秘
需积分: 0 144 浏览量
更新于2024-07-29
收藏 9.18MB PDF 举报
《The Principles of Beautiful Web Design》是一本由Jason Beaird撰写的关于web开发CSS系列的专业书籍，它深入探讨了如何设计出美观且功能出色的网站。这本书于2007年首次出版，版权属于SitePoint Pty Ltd，并得到了多位专家的审查和编辑团队的支持，如Andy Rutledge、Simon Mackie等，确保了内容的专业性和准确性。
在书中，作者强调了网页设计并非高深复杂的科学，而是可以通过一系列基本原则来实现。这些原则包括但不限于：清晰的结构（C0NTONE）、良好的对比与对齐（e.g., 字体大小、颜色和空间的运用）、一致性和易用性（ensuring design elements flow consistently across the site）、以及视觉层次感的创造（using hierarchy to guide the user's attention）。
核心内容围绕以下几个方面展开：
1. 设计原则：本书详细介绍了美观网页设计的基本原则，如平衡、重复、对比、对比度、空白、对齐和尺度等，这些都是构成和谐布局的关键元素。
2. 用户体验：书中强调了设计必须以人为本，关注用户的感受和行为，通过易读性、导航和互动性来提升用户满意度。
3. 响应式设计：在早期的web开发阶段，这可能不那么突出，但随着移动设备的普及，响应式设计成为必要，如何使网站适应不同屏幕尺寸成为重要内容。
4. 色彩与排版：色彩心理学在网页设计中的应用，以及如何通过字体选择、间距和行距来增强信息的可读性和吸引力。
5. 技术实践：讲解了如何使用CSS（Cascading Style Sheets）语言来实现设计原则，包括布局、模块化、媒体查询等现代前端技术的运用。
6. 最新趋势与最佳实践：书中会涵盖当时最新的web设计趋势，如扁平化设计、Material Design等，并分享业界的最佳实践，帮助读者跟上不断变化的设计潮流。
7. 版权和法律责任：作者和出版社强调了版权保护和责任声明，确保读者在引用或复制书中的内容时遵循规定，尊重知识产权。
《The Principles of Beautiful Web Design》是一本实用的指南，适合web开发者、设计师和学习者，旨在提供一套系统的方法，帮助他们创建出既美观又功能强大的网页。无论是新手还是经验丰富的专业人士，都可以从中获取灵感和提高设计技能。
2 The Principles of Beautiful Web Design
Layout and Composition 3
The Design Process
In a web-programming book I read recently, the author introduced a fictional scenario
to explain why readers needed to design a page layout and create a style sheet for the
example application. He basically said that the company web designer was off getting
inspiration from somewhere and wouldn’t be back until later in the year. It sounded as if
he was implying that designers are prone to flake out and go on vision quests for months
at a time, but I’m going to assume the author made that comment in an endearing way, and
introduce the same scenario.
Here are the hypothetical details of this scenario: Jim Smith of Smith
Services needs a web site. We have his business card and he’s eager to get
started. Unfortunately, the designer is out of town … wait, that’s not a
good excuse. Let’s say he was injured during a freak dairy cow stampede
while attending the South by South West Interactive (SXSWi) festival in
Austin, Texas. Yeah, that’s believable. Anyway, he’s out for a few months, and
you’re on your own. So where do you start? The actual process of developing
an entire site or web application includes a lot of steps, but the process of
creating a design comp boils down to only two tasks: discovery and
implementation.
Discovery
The discovery component of the design process is about meeting the clients and
discovering what they do. This may not feel like a “designy” task, but gathering
information about who your clients are and how they run their business is the only way
you’ll be able to come up with an appropriate and effective design.
Before you schedule your first meeting with your clients, take a few minutes to figure out
what they do and how they do it. If they’ve asked you to design a web site for them, they
may not currently have one, but Google them anyway. If you can’t find any information
about their business specifically, try to learn a little more about their industry before the
first meeting. Whenever possible, the first
meeting with a client should be an actual
person-to-person meeting. Sometimes, distance
will dictate that the initial meeting will occur
over the phone, but if the client is in town,
schedule a time to meet.
Keep in mind that this meeting isn’t about
impressing the client, selling yourself, or
NOTE What’s a Comp?
The word comp is an abbreviation of the phrase
comprehensive dummy, and is a term that comes from
the print design world. It’s a complete simulation of a
printed layout that’s created before the layout goes to
press. In translating this term to web design, a comp is
an image of a layout that’s created before we begin to
prototype the design in HTML.
NOTE What’s a Comp?
The word comp is an abbreviation of the phrase
comprehensive dummy, and is a term that comes from
the print design world. It’s a complete simulation of a
printed layout that’s created before the layout goes to
press. In translating this term to web design, a comp is
an image of a layout that’s created before we begin to
prototype the design in HTML.
TIP Client Meetings don’t
have to Take Place
in an Office
Even when I worked for a company
with a big office, I had some of my most productive
client meetings at a coffeehouse or over lunch. The
feasibility of this approach depends on the client. If
your contact doesn’t seem like the informal meeting
type, don’t suggest it; in many cases, though, it’s a
good way to make a business meeting more personal.
TIP Client Meetings don’t
have to Take Place
in an Office
Even when I worked for a company
with a big office, I had some of my most productive
client meetings at a coffeehouse or over lunch. The
feasibility of this approach depends on the client. If
your contact doesn’t seem like the informal meeting
type, don’t suggest it; in many cases, though, it’s a
good way to make a business meeting more personal.
selling a web site. The initial client meeting is
about communication. Try to listen more than
you speak, and bring a pad of paper on which
you can make notes. Do not bring a laptop.
Computers have screens, and people tend to
stare at them. If the client isn’t staring at the
screen the whole time, you will be as you write
your notes. If you must drag some technology
into the meeting, bring a voice recorder. In
my experience, though, a pad of paper is less
threatening to the often not-so-tech-savvy client.
Here are a few of the questions I like to ask in initial client meetings even if I’ve already
answered them myself via a search engine:
What does the company do?
What is your role in the company?
1
Does the company have an existing logo or brand?
What is your goal in developing a web site?
What information do you wish to provide online?
Who comprises your target audience? Do its members share any common
demographics, like age, sex, or a physical location?
Who are your competitors and do they have web sites?
Sometimes I start off with more questions than those listed here—use your imagination
and try to come up with some creative queries that will really give you more insight into
the client organization. If you’re a programmer, avoid the tech jargon. If you’re a designer,
avoid talking specifically about design. Sure, that may be all you’re thinking about, but
semantic markup, fluid and fixed layouts, and color schemes will likely mean very little to
the client. Worse still, these types of conversations can bring misguided design opinions
your way even before you get a chance to start thinking about the design yourself.
Implementation
The next step in the design process is to take what you’ve learned from the client and use
it to create a design. Regardless of the project, try not to get caught up in the technology
associated with building web sites—at least not at first. At this point, it shouldn’t matter
whether the site is going to comprise straight HTML, a template for a content management
system, or a Ruby on Rails application; the bottom line is that we have an interface to
1 This question is especially important if this person is going to be your main point of contact.
3561 20.0 Design1 3 27/2/07 3:02:58 PM
剩余180页未读，继续阅读
2010-01-02 上传
419 浏览量
2008-04-10 上传
2011-07-21 上传
2010-11-29 上传
263 浏览量
点击了解资源详情
点击了解资源详情
2025-01-08 上传
孙悟空007
- 粉丝: 4
- 资源: 22
我的内容管理
展开
最新资源
- 通用3C电商网站左侧弹出菜单导航
- 的github
- 智睿企业视频版网站系统 v4.6.0
- 根据vo生成yapi文档：YapiFileGenerattor.zip
- install.zip
- CodeSoft 条形码标签打印开发指南
- GPT-too-AMR2text:复制“ GPT太”的代码
- counterspell:反咒诅咒的 Chrome 扩展
- CodingTestPractice
- 点文件
- 企业文化竞争（6个文件）
- pytorch-pruning.zip
- 天猫左侧导航菜单分类列表
- torch_sparse-0.6.1-cp36-cp36m-win_amd64whl.zip
- SiamSE:“比例等方差可改善连体跟踪”的代码
- BakedModpack：冒雨风险的modpack 2
