Betekintés: Pixel Perfect Precision, oldal #4

Figyelem! Ez itt a doksi tartalma kivonata.
Kérlek kattints ide, ha a dokumentum olvasóban szeretnéd megnézni!

ecision

Movie

Closely linked to testing is prototyping, which

development environment. Pick whichever

is a quick way to try out ideas and designs

suits the feature you want to test; the basic

without investing time and effort into polished

structure of a screen can easily be tested on

versions. There are many forms this can take,

paper, whereas an animated transition may

from simple drawings on paper, right up to

require something mocked up as a video or

building limited apps in the platform’s native

even coded.
16



http://www.doksi.net

Project
Design
Screen.psd
Assets
Rectangle.png
Square Blue.png
Square Green.png
Square Orange.png
Square Pink.png

Organisation

No man is an island, and most of the time your

logically named set of assets will make

files won’t be either! Good organisation is

developers very happy.

essential as it saves a lot of time for other
people on the project; well ordered files and
layers mean other designers can jump straight
into your work and find their way around, and a
Pixel Perfect Precision

17



http://www.doksi.net

Take a Break

It’s very easy to get completely consumed in

After coming back the solution to a design

the design process, but sometimes it pays to

problem might be staring you right in the face,

take a break — not just for health reasons, but

or you might spot a flaw that had previously

also the different perspective a refreshed set

gone unnoticed!

of eyes can bring. Go and make a brew, or
wander somewhere else for a few minutes.
Pixel Perfect Precision

18



http://www.doksi.net

PIXEL
PERFECT
DETAILS



http://www.doksi.net

Naughty
Sharp Edges

Pixel Perfect Precision

Nice

Straight edges should be on-pixel and sharp
— blurred edges are a no-no!

20



http://www.doksi.net

y

y

y

x

Naughty
Alignment and
Spacing
Pixel Perfect Precision

x

Nice

Once you’ve mastered the art of getting
everything sharp, the next step in your journey
towards pixel perfection is making sure the
alignment and spacing are right.

21



http://www.doksi.net

Consistency

Alignment of objects across multiple screens

to set up a grid, which will define a structure

is just as important. Margins and placement of

that can be followed throughout your screens.

common items such as title bars, back
buttons, and footers should be the same
throughout the interface to prevent objects
jumping around. The best way of doing this is
Pixel Perfect Precision

22



http://www.doksi.net

H



300°

60°
Hue

240°

120°

S
0%

352

352

Saturation

95

22

45

95

Brightness

90

98

95

45

230

249

242

116

Green

12

194

133

6

Blue

41

201

148

20

100%
B

Colour Model

352

Red

180°

0%

352

100%

HSB FTW! Have a go at using HSB as a colour

Brightness (B) adjusted to create the

model when creating a palette — once it

variations. See how much more sense the

clicks you’ll see it’s a really efficient way to

numbers make in HSB compared to RGB?

create different shades of a base colour. In the
example above the Hue (H) value has been
kept the same, then the Saturation (S) and
Pixel Perfect Precision

23



http://www.doksi.net

Colour Profile

Yes

No

Code

Naughty
Colour
Management
Pixel Perfect Precision

Nice

Colour management makes a lot of sense in

they’re mixed with unmanaged code

print environments, but for digital often

(specifying the same original colours) there

creates more problems than it solves. The

can be a mismatch. It’s

«« Előző oldal Következő oldal »»