Summary of Chapter 3 Work Like a Designer

Toolbox:

Use professional tools such as high-end monitor, digital tablet and pen, professional graphics software like Photoshop to create graphics. Now, the Microsoft Surface Studio is the best choice for professional designers although it’s much more expensive than others.

Tools for sketching: a large ideal sketchbook for the desk, a smaller one for capturing inspired ideas. Sketching helps designers think and generate solutions by arbitrary drawing.

Graphic tablets provide a flat drawing surface for drawing with a digital pen.

Image Editing Software (for bitmap graphics):

Adobe Photoshop: premiere graphic editing tool with powerful features and capabilities for professional designers but expensive.

Adobe Photoshop Elements: reduced and lower-priced version of Photoshop.

GIMP: free for retouching and composing images.

Microsoft PowerPoint: easy for amateur to edit graphics for presentation directly.

Illustration Software (for vector graphics):

Adobe Illustrator: professional design tool which allows users to draw points, lines and curves to create objects. Expensive and a little steep for learning.

Corel Draw: similar functions as Adobe Illustrator but costs less.

Inkscape: free, less capabilities and features compared to Illustrator and Corel Draw but fits normal needs

Write a Visual Style Guide, makes consistent designing easier and avoids random or ambiguous work.

Style guides define attributes like the color palette, typography, and images format for a particular design solution and create a standard for an entire course or project. It’s benefit for consistent design no matter individual or collaborate work.

A style guide doesn’t show how to make design decision; it specifies the decision.

Add design specifications: objectives, description of the content, sample screens. Such as screen layout, color palette, typography, readability, images, logo, emphasis, user interface.

Design with Templates

Templates can optimize the design and production process, a template is a master design which can be used repeatedly, such as slide presentation, web page or job aid.

Benefits of using templates:

Promotes consistency, improves efficiency, reduces overwhelm, leaves room for creativity.

Starting with Templates: categorize the types of screens or slides, create a layout or framework for each template. If needed, specify the type of element to insert in each placeholder.

Sample Templates: title screen templates, content templates, interaction templates, text-only template.

Where to find visual inspiration

Keep the project’s objectives in the forefront before looking for innovative ideas.

Ways to be inspired:

a.     Analyze other designs by thinking about these questions:

What makes this design effective?

What message does the visual convey?

How did the designer handle the layout?

What element first attracted my attention and why?

How does the color palette affect me?

b.    Collect compelling designs by using sketchbook or online bookmarking tool.

c.     Use design resources: graphic design portfolios provided by Behance or Dribble; online or print magazines; design museums; advertising; information and interactive graphics; image collections and search engines; PowerPoint and Keynote slide decks; visual design and photography book.

Know the technical terms:

Size: width and height like 720* 540 pixels;

Resolution:

Dots per inch (dpi): this measures the number of dots in a linear inch, used for printing. Dpi increase and the clarity of the printed image improves.

Pixels per inch (ppi): this measures the number of pixels in a linear inch, usually used for displaying on screen. High ppi represents high quality of an image but a larger file size. Designers should find a balance between image quality and file size to use them appropriately on the web.

Image formats: bitmap (raster) and vector images.

Bitmap Images: made from a blend of pixels – each one contains color information that comprises the image. They can’t be made larger without losing quality.

Advantages of bitmap images:

a.     Can be created with a digital camera, scanner, or in a paint program

b.     Have subtle tones of gradation

c.     Can have a transparent background (in the PNG file format)

d.     Wide selection available at stock photo sites

Disadvantages of bitmap images:

a.     Can’t be enlarged without distortion or jagged edges

b.     File size is typically larger than for vector images

Different formats of bitmap images:

JPEG/JPG: a compressed format with smaller file size than PNG, it doesn’t support transparency.

PNG: a full-color replacement for GIF format, it supports transparent backgrounds but has a larger file size.

GIF: it only supports 256 color but allows transparent background, much smaller than JPEG/JPG or PNG.

TIFF: a high-quality image format with millions of colors, layers and transparency, usually used for importing graphics into professional publishing or layout programs. Absolutely, it has a large file size.

BMP: similar as TIFF.

PDF: a hybrid format which supports both bitmap and vector graphics.

PSD: a native format for Photoshop and Photoshop Elements.

Vector images: display via a set of instructions described through mathematical expressions. They can be made any size without losing image quality.

Advantages of vector images:

a.     Scalable – the image maintains quality when enlarged

b.     File size is usually smaller

c.     Can have a transparent background

d.     Ideal for work that needs to be displayed in both small and large sizes

Disadvantages of vector images:

a.     Typically requires drawing software to create or edit

b.     Usually requires more skill to create

c.     Selection of stock artwork is smaller than that of bitmap graphics

Different formats of vector images:

EPS: a hybrid format which supports vector and bitmap graphics, usually used for printing.

WMF: a hybrid format which supports vector and bitmap graphics, used for Microsoft Office Clip Art.

SVG: a newer vector format for web graphics which supports interactivity and animation.

AI: a native adobe illustrator format.