HTML and CSS Reference
In-Depth Information
Defining the Color Palette
Next, you need to choose a color palette for the app. This is an entirely subjective decision, but the colors chosen
should fall within certain guidelines:
•
The background color and the text color should have a high contrast difference to make sure
it's easy to read
•
Lighter backgrounds tend to be a bit easier on the eyes, legibility-wise
•
It's typically a good idea to include an accent color to draw attention to important elements,
such as links and buttons
For this app, let's use simple earth tones with a bright orange accent color (see Figure
6-1
). Keeping it neutral
makes it easy on the eyes and prevents the colors from clashing, which could make text on the site harder to read. The
accent color won't show up properly in this topic because it's greyscale. To see the accent color properly, set the color
picker in Photoshop to the hex value shown in the figure.
Figure 6-1.
The chosen color palette for the app Light will be used for the background and Dark for the text
Choosing Fonts
The relatively recent widespread support of
@font-face
has opened up a whole new world of possibilities for
designers. No longer are web-based apps limited to a tiny subset of web-safe fonts; instead, interactive designers are
now limited only by their imaginations (and the OFL license
1
).
Taking advantage of your newfound freedom, you now need to choose fonts for the app. Like the color palette,
this is an entirely subjective decision, but there are some general guidelines that help inform solid font choices:
•
Headlines can use a more interesting font than other copy on the site.
•
Body text should use a simple, legible font to make sure it's not difficult to read.
•
Design consistency is important. Don't go overboard on different fonts; stick to one or two that
work well together.
•
If one of the fonts chosen is very distinctive, other fonts used in the document should be more
demure to prevent clashing.
•
Bonus tip: When in doubt, use Helvetica.
2
To create visual interest, headlines in our app will be in Cooper Black,
3
which is a very distinctive font that was
heavily used in the
Mad Men
era of advertising. It's classic and bold without looking silly, which makes it ideal for
large type.
1
3
Search WWH ::
Custom Search