视觉设计

基础视觉设计技巧和技术：

• Copywriting
• Design reuse
• Layout
• Typograpghy
• Contrast and repetition
• Colors

COPYWRITING

好的封面语很重要，它会捕捉到用户，让用户读下去。

Your headline must resonate with the personas you’re targeting, telling them not only what you do (“Our software can do X”), but also why the user should care (“Our software can do X so you can succeed at Y”).

design reuse:

Good artists copy; great artists steal.[Sen 2012], Steve Jobs

If you’re new to design, or almost any discipline, the best way to get started is to copy others.When you copy others, you save time, you learn, and you get access to high-quality, battle-tested work.copy, transform, and combine are the basis of all creative work.

I start every project by browsing existing designs and seeing what I can reuse or adapt to my own needs.One of my favorites is Bootstrap, which is not just a template but an open source, responsive HTML/CSS/JavaScript framework that comes with a default set of styles, behaviors, plug-ins, and reusable components.

If you don’t want to jump into code right away, you can use a wireframing or prototyping tool, such as Balsamiq, UXPin, or Justinmind, that lets you put together a design by dragging and dropping from a library of UI elements. There are also hundreds of websites where you can find stock photos, graphics, and fonts, including free options (e.g., Wikimedia Commons, Google Fonts) and paid options (e.g., iStock, Adobe Typekit). Finally, you can also leverage the design community through websites such as Dribbble (a community where designers can share and discuss their work) and DesignCrowd (an online marketplace where you can quickly hire a freelancer to design a logo or a website). See http://www.hello-startup.net/resources/design/ and http://www.hello-startup.net/resources/images-photos-graphics/ for the full list of design resources.

LAYOUT

A good layout arranges the elements on the screen so that you can infer a lot of information based on their positions relative to one another.Items that are logically connected should be closer together; items that are not connected should be further apart.

The human mind is limited in how much information it can process at a time, so a key aspect of readability is putting lots of whitespace between elements so that you can focus on just one thing at a time.

Medium, a blogging platform known for its beautiful design, is an inspiring example of just how much you can do with whitespace and typography

Another critical aspect of layout is alignment. Alignment allows you to communicate that there is a relationship between elements, not by moving them closer together or further apart (as with proximity) but by positioning them along common lines.

Every element should have some visual connection with another element on the page.

Notice how the résumé in Figure 3-11 has many different and seemingly arbitrary alignments: the section headings are center-aligned, the job titles are left-aligned, the company name is center-aligned (but poorly, just using spaces and tabs), the dates are right-aligned (again, poorly), and the job descriptions are center-aligned. Figure 3-14 shows the same résumé, but with a single, stronger alignment.

Notice how this layout is easier to read, as everything is positioned along a strong vertical line between the section headers and the section contents.

Where is the line in this design?

As a rule of thumb, try to choose one strong line and and align everything to it.

Typography

In this section, we’ll look at just a few of the most important aspects of typography: measure, leading, typeface, and style.

Measure is the length of each line.If lines are too short, the reader will be interrupted too frequently to go to the next line. If lines are too long, the reader will get impatient waiting to reach the end of a line.

First, the justified alignment in the bottom-right image creates strong lines on the sides of each paragraph, which is helpful when reading large amounts of text (this is why this style is used in most books and newspapers). Second, the bottom images use the proper amount of measure, which is around 45–90 characters per line. As a rule of thumb, you want a measure that’s just long enough to fit all the letters of the alphabet laid out back to back, 2–3 times

abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklm

Leading is the amount of vertical space between lines. As with measure, if you have too little or too much leading, the text becomes hard to read. The sweet spot for leading tends to be 120%–145% of the font size

The typeface is the design of the letters.

At a high level, all typefaces can be grouped into five classifications: serif, sans serif, script, decorative, and monospace.

Serif typefaces have small lines called serifs at the end of a stroke on each letter or symbol.The stroke used in serif typefaces also tends to vary in thickness at different parts of the letter.For example, in Figure 3-19, the letter “S” in “Serif” is thinner at the top and bottom of the S than in the middle.The serifs and variation in thickness make each letter look more distinct, which helps reading speed, especially for large amounts of text. Therefore, serif typefaces are great for large amounts of body text and print material (most books use serif typefaces for the main body of text).

“Sans” is a French word that means without, so “sans serif” typefaces are those without serifs.Notice how the letter “r” in “serif” in Figure 3-20 does not have any lines jutting out at the bottom. Sans serif typefaces also tend to have a more uniform stroke thickness throughout the letter.they are typically better at extreme sizes such as large headers and small helper text.In fact, the tiny details of a serif typeface might look blurry if the letters are too small or you’re viewing them on low-resolution screen, so sans serif typefaces are very popular in digital mediums.

As the name implies, decorative typefaces are used as decoration or accents.However, they tend to be hard to read, so you will typically want to limit their use to a few words in a title or subtitle.

Script typefaces look like handwriting, cursive, or calligraphy. they are hard to read.

Each letter in a monospace typeface, as shown in Figure 3-23, takes up the same amount of space, which is typically only useful when displaying snippets of code (that’s why all terminals, text editors, and IDEs use monospace typefaces) and text that needs to look like it came from a typewriter.