Essential Sketch Plugins For Web Design

Before we get started, go download Sketch Toolbox, which is a simple 3rd-party plugin manager for Sketch [which] provides a directory of plugins on github that you can browse and install directly. (I’m not 100% how the directory is populated, though.) My favorite features are:

  1. You can search by plugin name, description, or developer name
  2. It downloads and installs the plugin for you
  3. It shows you which ones you’ve already installed

sketch-plugins


PLUGINS:

Swap Fill & Border
Clear Styles
Dynamic Button
Child Layers
Measure
Content Generator
Day Player
Page Switch
Sketch Commands
Sketch Plugins

source

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