Butterick’s Practical Typography

TYPOGRAPHY IN TEN MINUTES

1) The ty­po­graphic qual­ity of your doc­u­ment is de­ter­mined largely by how the body text looks…

In turn, the ap­pear­ance of the body text is de­ter­mined pri­mar­ily by these four ty­po­graphic choices:

2) point size is the size of the let­ters. In print, the most com­fort­able range for body text is 10–12 point. On the web, the range is 15–25 pix­els. Not every font ap­pears equally large at a given point size, so be pre­pared to ad­just as necessary.

3) line spac­ing is the ver­ti­cal dis­tance be­tween lines. It should be 120–145% of the point size. In word proces­sors, use the “Ex­act” line-spac­ing op­tion to achieve this. The de­fault sin­gle-line op­tion is too tight; the 1½-line op­tion is too loose. In CSS, use line-height.

4) line length is the hor­i­zon­tal width of the text block. Line length should be an av­er­age of 45–90 char­ac­ters per line (use your word-count func­tion) or 2–3 low­er­case al­pha­bets, like so:

abcde­fghijklmnopqrstu­vwxyz­abcde­fghijklmnopqrstu­vwxyz­abcd

In a printed doc­u­ment, this usu­ally means page mar­gins larger than the tra­di­tional one inch. On a web page, it usu­ally means not al­low­ing the text to flow to the edges of the browser window.

5) And fi­nally, font choice. The fastest, eas­i­est, and most vis­i­ble im­prove­ment you can make to your ty­pog­ra­phy is to ig­nore the fonts that came free with your com­puter (known as sys­tem fonts) and buy a pro­fes­sional font (like my fonts eq­uity and con­course, or oth­ers found in font rec­om­men­da­tions). A pro­fes­sional font gives you the ben­e­fit of a pro­fes­sional de­signer’s skills with­out hav­ing to hire one.

If that’s im­pos­si­ble, you can still make good ty­pog­ra­phy with sys­tem fonts. But choose wisely. And never choose times new ro­man or Ar­ial, as those fonts are fa­vored only by the ap­a­thetic and sloppy. Not by ty­pog­ra­phers. Not by you.

source

iOS 8 Illustrator Vector UI Kit Update

Excellent Illustrator collection of iOS 8 elements. Interface controls and lots of icons included.

Apple’s UI changes from iOS 7 to iOS 8 are often subtle, yet incredibly extensive. Spacing, positioning, and font sizes and weights were liberally tweaked and adjusted. To our surprise, almost every icon was redrawn as well. Even the lowly chevron and back arrow were reworked.

ios8 ui kit illustrator


source

Using the :target selector for alternative layouts

I really like the :target pseudo-selector. It enables you to style the target of a so called skip-link. For instance when you link to a section in an article: you could highlight the header of that section. Or you can use it for toggling simple drop-down menus — the ones you see a lot on small screens. But you can also use it to create a completely different layout.

target pseudoclass


source

UX Hiring Notes

INTERVIEW EXERCISE IDEAS

  • Sort [5] provided colors from best to worst. Explain why. (Print out large colored dots of color). Shows ability to:
    • Solve an open-ended problem
    • Make, defend and explain design decisions
    • Create and apply internally-consistent rules/constraints
  • Information architecture – take NYC Rules leftnav items and consolidate them into something that [reasonably] fits into the standard nyc.gov horizontal nav. Shows ability to:
    • Understand the meaning of words/kinds of things
    • Group nav items logically
    • Edit copy and preserve/convey meaning
  • Bring in a case study that shows a problem, and the solution you provided. Be prepared to showcase it with a 5-10 minute presentation [format of candidate’s choosing]. Shows ability to:
    • Clearly understand and communicate a problem, and a solution
    • Tell the story of a project
    • Show understanding of what is important [and what is not]
    • Communicate overall

INTERVIEW QUESTIONS

  • What project have you worked on that you’re most proud of? Why? Reference article:
    • This one question gets to the core of behavioral interviews, where you look at the past behavior of the candidate to best predict how they’ll work out on your team. Because designers repeat the work habits they learn throughout their career, understanding the details how they’ve worked in the past can tell you a ton about how they’ll work with you.

Assessing Your Team’s UX Skills

JARED M. SPOOL – December 2007


CORE UX SKILLS

Information Architecture …Skills include understanding methods for organizing information, such as taxonomies, folksonomies, facets, and ontologies; techniques for deriving user hierarchies, such as card sorting; and creating design deliverables, such as site maps.

User Research …Skills include identifying user population; techniques for evaluating design ideas, such as usability testing; and passing that information on to rest of the team members, so they can be making informed decisions.

Visual Design …Skills include page layout, form design, color selection, and icon design. (While not directly “visual”, we consider designing for accessibility to fall into this skillset, as it focuses on much the same issues.)

Information Design …Skills include knowing when to apply the variety of chart and table formats, such as pie charts, hi-low diagrams, and cluster treemaps; how to create interactive data explorers, such as star fields and drill-down pivot tables; and working with combining multiple data sources, such as data-mining techniques.

Interaction Design …Skills include knowing when to utilize different application structures, such as hub-and-spoke designs versus interview flows; which design elements are best for certain types of information, such as when to use radio buttons versus drop-down menus; and creating design deliverables such as wireframes and design priority descriptions.

Fast Iteration Management …Break designs into small, bite-sized implementations and to collect data from each deployment to inform the decisions in the next iteration. Skills include schedule planning, change management, and usage-data collection, to help the team move quickly.

Copywriting …Skills include identifying the style of voice and tone that matches the organization’s brand, creating persuasive copy that motivates users to explore the design, and clearly stating benefit statements, to help the user understand the value of using new capabilities and functions.

Editing …Creating a cohesive experience that doesn’t have extraneous distractions. Skills include using techniques such as alignment maps to match the users’ needs to the available functionality.


ENTERPRISE UX SKILLS

Development Methods …Team members need to understand how to integrate their work with development approaches, such as Agile techniques.

Design-To-Development Documentation …Communicating the design and its rationale effectively is critical to successful projects. Developing personas, design pattern libraries, and use cases are a regular practice to ensure what is imagined becomes reality.

Web Analytics …Team members need to know how to integrate the available analytics to inform their design process, by seeing what designs are working for the users and where design iterations fall short.

Ethnography …Techniques like ethnography, contextual inquiry, and field research can help teams gain tremendous insights into the users’ environment and goals, leading to radical improvements to the experience.

Social Networks …Teams need to understand the different models for social interaction, from ratings and recommendation systems to full-blown social network capabilities, to know when these techniques can enhance the interaction and to avoid places where the social components take away from the core functionality.

Marketing …Teams need to successfully communicate the design’s value to users and need to ensure it blends seamlessly into the rest of the experience with the organization and the brand.

Technology …It is no longer acceptable for designers to propose interactions that can’t be implemented because team member don’t understand how the technology works. From front-end technology, such as CSS, Ajax… to back-end components, such as server technology and legacy servers, designers need to be keenly aware of what is possible and where they will bump into constraints.

ROI …A successful UX team has the skills to explain the business value of their work…team members need to concisely describe the benefits and risks associated with new design.

Business Knowledge …Designers need to be fully aware of how the business works, how it makes money, and what the internal constraints are, so they can ensure the design services the business as well as the users.

Domain Knowledge …The industries we service are themselves very complex, whether they be about financial services, travel, or a university. Team members need to be fully versed in the domain, so they can understand the terminology, processes, and objectives of the people using their designs.


source