Content

Headings

Heading: The headline that acts as a title of a section of text.
Header: The banner at the top of a website that usually contains the logo and navigation.
head: The HTML element that contains the meta data of a web page.

Attractive headlines and titles are critical in making the right first impression. Concise titles that sound authentic and relevant get noticed.

While blue is still the safest link color, other colors work just as well as long as the links stand out clearly from the body text. If you don’t have a particular reason to prefer another color, we still recommend blue as the safest choice.
The position of links can help you determine whether or not underlining is necessary. The navigation menu and lists, especially along the peripheral areas of the page, don’t require underlining. Their locations identify them as links.
Test your color choice for hyperlinks to make sure that people who have colorblindness can spot them easily.
Static items should not have the same color as hyperlinks.
Don’t use blue text (or underline text) for nonclickable items.
Whatever appearance you choose for hyperlinks, make sure to apply the same treatment consistently throughout your site.

Make buttons at least remotely resemble physical buttons. In order for an object to be recognizable, it must retain the right visual cues to trigger the right associations quickly and accurately. Retain the rectangular shape (preferably with rounded corners) if you renounce the 3-D effect. Interactive components in flat design should look clickable even without heavier effects such as shadows and gradients. (In one early study, clicks increased by 416% after changing from flat to 3-D buttons. While the effect is smaller now, it's still big.)
Conversely, don’t make nonclickable items look like buttons. For example, giving headings a background color will make them resemble buttons when they’re not.
Focus on content hierarchy within the page. Avoid having many colorful boxes of different sizes on a page. People have difficulty picking out the clickable elements when similar-looking items compete with each other.

Ensure smaller images enlarge when clicked.
Make all elements (e.g., picture, icon, text) that are associated with each other clickable. Doing so increases the target size and improves the probability of capturing an intended click.
Avoid multiple calls to action for a given image unless the options within that image are plainly presented, such as a bulleted list of hyperlinks or clearly labeled buttons.

Despite their advantages, icons often cause usability problems when they are designed without consideration for their many potential downsides.

"Universal" icons are rare,
- Exceptions: "Home", "Print" and "Search" (hamburger icon is close but sometimes represents a generic list)
- Example: "Heart" and "Star" have overlapping and sometimes competing meanings
Icons need a text label
Relative size aids noticeability

Tips for creating your own:

Keep the design simple and schematic. Reduce the amount of graphic details by focusing on the basic characteristics of the object rather than creating a highly realistic image in order to speed up recognition. (Intricate details are difficult to distinguish at smaller sizes.)
Use the 5-second rule: if it takes you more than 5 seconds to think of an appropriate icon for something, it is unlikely that an icon can effectively communicate that meaning.
Test the icons for recognizability: ask people what they expect the icons to stand for.
Test the icons for memorability: ask a repeat set of users if they can remember the icon’s meaning after being told what it represented a couple weeks earlier.