Transcript Designing the User Interface - Northern Illinois University

Page Layout
Copyright Penny McIntire, 2013
Contents
•
•
•
•
•
•
•
Resolution and Page Size.
Strategic Prioritization of Information.
Creating Harmony.
Page Layout Hints.
Predesigned Page Templates.
Promoting Speedy Download.
Storyboards.
2
Copyright Penny McIntire, 2013
Resolution and Page Size
• Resolution: the number of pixels that
fit in an inch on the screen or the
number of pixels that can display on the
entire screen.
• So, we might say:
– a resolution of 100 ppi, which refers to the
“per inch” measurement, or
– A resolution of 800 x 600, which refers to a
“per screen” measurement.
3
Copyright Penny McIntire, 2013
Resolution and Page Size
• Computer graphics typically have a “per
inch” resolution of around 72-100 ppi –
I use 100 because the math is easier.
• 100 ppi is much lower than high-quality
printed material; even a cheap color
printer these days might use 1400 dpi.
4
Copyright Penny McIntire, 2013
Resolution and Page Size
• Because the dots are smaller/finer on a
higher res system (e.g., , more dots fit
per inch), the same image appears
smaller and crisper on a high res display
than it does on a low res display.
low resolution
high resolution
5
Copyright Penny McIntire, 2013
Resolution and Page Size
• For instance, assume the circles below
have a diameter of 500 pixels…
On a 15” monitor that displays
at 800 x 600 pixels.
On a 15” monitor that displays
at 1600 x 800 pixels.
6
Copyright Penny McIntire, 2013
Resolution and Page Size
• Monitor size affects things, too…
On a 15” monitor that displays
at 800 x 600 pixels.
On a 19” monitor that displays
at 800 x 600 pixels.
7
Copyright Penny McIntire, 2013
Resolution and Page Size
• Summary:
– The more pixels that are crammed into a
given area (e.g., higher resolution), the
smaller things look.
– The smaller the monitor, the smaller things
look.
8
Copyright Penny McIntire, 2013
Resolution and Page Size
• So, keep in mind that everything will
appear smaller or larger to a given
visitor than it does to you, depending
upon his or her screen resolution and
monitor size.
9
Copyright Penny McIntire, 2013
Resolution and Page Size
• Common computer resolutions
– 640 x 480 px (rare? For visually impaired?)
– 800 x 600 px
– 1024 x 768 px
– 1200 x 1600 px
• iPhone resolutions
– 320 x 480 px (generations 1-3 at 163 ppi!)
– 640 x 960 px (generation 4 at 326 ppi!)
10
Copyright Penny McIntire, 2013
Resolution and Page Size
• Adobe Dreamweaver has Adobe Device
Central built in, to help you manage
multiple formats.
• The standard target for public-access
web sites is sometimes a low screen
resolution of 800 x 600 pixels, although
trending higher (but mobile???)
– You must use 800 x 600 for all work in this
class, or you will lose points!
11
Copyright Penny McIntire, 2013
Resolution and Page Size
• Why such low resolution, when even
cheap laptops are capable of a much
higher resolution today?
– Many users have their browsers occupy
only a portion of their screens.
– People with poor vision (over age 45!) dial
their resolution down.
– Cell phones.
12
Copyright Penny McIntire, 2013
Resolution and Page Size
– Desktop systems are often shipped with
display settings dialed down a notch, and
most users don’t know how to change.
• LCD monitors are built for a specific resolution
and won’t look good at any other resolution.
• If an LCD monitor is purchased separately, the
owner should tweak computer display settings
to match native resolution of the monitor.
– I can’t test on all devices, unfortunately,
and it’s not my job to make things easy for
you.
13
Copyright Penny McIntire, 2013
Resolution and Page Size
• 800 x 600 pixels
– Provides a usable area of only 750 pixels
horizontally by 395 pixels vertically -- the
browser chrome uses some of the pixels).
– 750 x whatever is what we will use for
this class.
– Why “whatever”? …
14
Copyright Penny McIntire, 2013
Resolution and Page Size
• Although horizontal scrolling is evil,
vertical scrolling is well-tolerated by
most visitors.
• Still, research states that most people
don’t want to scroll down more than
two screenfulls.
– I’m not convinced that’s true – when there
is a lot of information, I would rather scroll
10 times than load five separate web
pages.
15
Copyright Penny McIntire, 2013
Resolution and Page Size
• Printing pages
– Test that:
• The page prints on a black and white printer.
• It doesn’t run off the left and right margins in
the default portrait mode.
– This was/is more of a problem with old systems and
old printers.
16
Copyright Penny McIntire, 2013
Resolution and Page Size
– For the best printed page:
• Provide a “print page” button that delivers a
separate HTML page optimized for printing.
Downside: redundant pages.
• Better idea, use CSS and a print “media type”
that changes all the styling to work on a black
and white printer.
17
Copyright Penny McIntire, 2013
Resolution and Page Size
– Either way, use black text on white
background, remove unnecessary stuff like
navigation, etc.
– If an article is more than one page long,
consolidate all pages into one.
18
Copyright Penny McIntire, 2013
Liquid, Solid, and
Elastic Layout
• Solid design: the content is hard-coded
to fit the smallest screen size you
expect the visitors to have (say, 800 x
600 px), and the rest fills with
background.
– To use, set a specific width for the div or
table that holds the content.
– The div/table can be either centered or left
justified on the background.
19
Copyright Penny McIntire, 2013
Liquid, Solid, and
Elastic Layout
• Liquid design: the page automatically
adjusts to fill all available screen area,
using divs or tables that expand and
contract to fill the available space.
– To use this, don’t specify a width on the
main content div or table.
– You can still specify a width on some table
columns, as long as at least one column
doesn’t have a width – it will expand and
contract.
20
Copyright Penny McIntire, 2013
Liquid, Solid, and
Elastic Layout
• Elastic design, a subset of liquid design,
in which the page automatically
expands and contracts by increments
keyed to the visitor’s default font size.
– E.g, the content area will be larger if the
visitor has specified a larger font size –
helpful for accessibility reasons.
– To use, specify all widths using CSS and
the “em” designator (more later, when we
get to CSS).
21
Copyright Penny McIntire, 2013
Liquid, Solid, and
Elastic Layout
• Advantage of solid design:
– Can set the layout precisely and be fairly
confident that it will look like that when the
visitor sees it.
• Advantage of liquid design:
– In theory, it works for all screen sizes,
from cell phones to huge monitors (but it is
extremely difficult to design a page that
looks good at all resolutions).
22
Copyright Penny McIntire, 2013
Liquid, Solid, and
Elastic Layout
• Advantage of elastic design:
– Can set the layout precisely, like solid
design, but the layout also expands if the
visitor has overridden your base font size,
which is helpful to the visually impaired.
• Alternatives: Use CSS layout properties
to set up different page layouts for
different devices. Tricky, so test
thoroughly.
23
Copyright Penny McIntire, 2013
Liquid, Solid, and
Elastic Layout
• For this class, you may use any of these
three layout styles, BUT you will be
graded on an 800x600 window.
24
Copyright Penny McIntire, 2013
Strategic Prioritization
of Information
• Make the most important items the
most eye-catching: “Strategic
prioritization of information,” by Lynda
Weinman.
25
Copyright Penny McIntire, 2013
Strategic Prioritization
of Information
Poster Announcing
an Event, Example 1
Presenting Yourself to Advantage in a
Second Interview by Susan Smith of Career
Services. Do you want to ensure that job
offer? Come to this presentation and we’ll
tell you everything you need to know in
order to impress recruiters, from your attire
to your attitude to how to answer that sticky
question, “What level of compensation do
you expect?” We’ll even provide free pizza
and sodas! When: Tuesday, February 8, 3:30
p.m. Where: Computer Science Building,
PM 253. Registration required. Sign up at
the Department of Computer Science,
Computer Science Building, PM 460.
Presented by the Department of Computer
Science and Career Services, Northern
26
Illinois University.
Copyright Penny McIntire, 2013
Strategic Prioritization
of Information
Poster Announcing
an Event, Example 2
What’s different?
27
Copyright Penny McIntire, 2013
Strategic Prioritization
of Information
• Control focus and create a visual
hierarchy using various types of
contrast…
28
Copyright Penny McIntire, 2013
Strategic Prioritization
of Information
• Size: bigger attracts attention.
29
Copyright Penny McIntire, 2013
Strategic Prioritization
of Information
– Shape: irregular or contrasting shapes
attract attention.
30
Copyright Penny McIntire, 2013
Strategic Prioritization
of Information
– Color: brighter, more saturated colors
attract attention.
31
Copyright Penny McIntire, 2013
Strategic Prioritization
of Information
– Light versus dark contrast: different
attracts attention.
32
Copyright Penny McIntire, 2013
Strategic Prioritization
of Information
– Texture: texture attracts over no texture.
33
Copyright Penny McIntire, 2013
Strategic Prioritization
of Information
– Dimensional contrast: two-dimensional
versus three-dimensional.
34
Copyright Penny McIntire, 2013
Strategic Prioritization
of Information
– Space contrast: open versus jam packed.
35
Copyright Penny McIntire, 2013
Strategic Prioritization
of Information
– Line contrast: smooth versus jagged, curvy
versus sharp, direction contrast.
36
Copyright Penny McIntire, 2013
Strategic Prioritization
of Information
– Focus: sharp focus attracts over blurred
focus.
37
Copyright Penny McIntire, 2013
Strategic Prioritization
of Information
– Typography: different, bolder, larger, and
more decorated attracts.
38
Copyright Penny McIntire, 2013
Strategic Prioritization
of Information
– Style contrast: realistic versus cartoon or
abstract, etc.
39
Copyright Penny McIntire, 2013
Strategic Prioritization
of Information
• In general, different attracts attention.
• Use this to your advantage to focus the
viewer.
40
Copyright Penny McIntire, 2013
Creating Harmony
• On the other hand, too much contrast
and “noise” is just distracting.
• What’s wrong with this picture…
41
Copyright Penny McIntire, 2013
42
Copyright Penny McIntire, 2013
Creating Harmony
• What’s good about this picture...
43
Copyright Penny McIntire, 2013
44
Copyright Penny McIntire, 2013
Creating Harmony
• Pages should look clean and
harmonious, not busy.
• The unifying factors of similarity,
repetition, and alignment can keep the
page from being visually confusing.
• Guidelines…
45
Copyright Penny McIntire, 2013
Creating Harmony
• Group similar items (using alignment,
size, color, contrast, shape, proximity,
connection, etc.) to provide visual calm.
– Example: six small photos grouped in a 2 x
3 grid, rather than scattered randomly.
46
Copyright Penny McIntire, 2013
Creating Harmony
47
Copyright Penny McIntire, 2013
Creating Harmony
• Another example:
48
Copyright Penny McIntire, 2013
Creating Harmony
• Leave plenty of “white space” (even if
the background is actually red or black
or whatever).
“Zen City Morning,” www.csszengarden.com/?cssfile=177/177.css,
by Ray Henry, www.reh3.com
49
Copyright Penny McIntire, 2013
Creating Harmony
– Empty space feels expansive and calm.
– Even so, avoid ”content-less” pages, “clickthrough” pages.
50
Copyright Penny McIntire, 2013
Creating Harmony
– Consider using a scholar’s margin – a very
wide margin on one side that is sometimes
used for content, such as headings or pull
quotes, thus leaving most of the margin
empty.
51
Copyright Penny McIntire, 2013
Creating Harmony
• Most of the time you shouldn’t try to
cram too much information on a page.
• There are exceptions: e.g., MSN or
yahoo home page.
52
Copyright Penny McIntire, 2013
Creating Harmony
• If you must cram the page, then it’s
even more important to:
– Chunk (group) related information with
headers, subheads, bulleted and numbered
lists, indentation, or spacing.
– Use visual adhesive (organizational tools)
like borders, rules, different background
colors in table cells, etc…
53
Copyright Penny McIntire, 2013
Creating Harmony
visual adhesive:
the borders
around the
chunked,
related groups,
using the
<fieldset> tag.
54
Copyright Penny McIntire, 2013
Creating Harmony
www.msn.com
55
Copyright Penny McIntire, 2013
Creating Harmony
• There is controversy about
borders/boxes around a page or page
sections:
– Gives closure, a good thing.
– Creates barriers and makes the visitor feel
restrained, a bad thing.
– Compromises (see MSN again on next
slide)
• Borders and boxes that are very subtle.
• Or just a horizontal rule, top and bottom.
56
Copyright Penny McIntire, 2013
Creating Harmony
www.msn.com
– Compromise
(msn.com to
left): borders,
boxes, and
horizontal
rules are very
subtle.
57
Copyright Penny McIntire, 2013
Creating Harmony
• Repeat elements within the page.
– Shape, proportion, color, etc.
• For instance, don’t think that every element on
the page must be a different color.
• In art classes, I was taught that if a color
appears in one place on a painting, you must
make sure it appears somewhere else, too.
– Repeat elements across pages:
• Same top banner, same navigation, same
footer, etc.
58
Copyright Penny McIntire, 2013
Creating Harmony
• More on alignment—let’s look at three
form field alignment examples…
59
Copyright Penny McIntire, 2013
Example 1
Adfs iuemnrfdi
Dfutgmuir
S9dke9kd asd9
Dsfpoi sad
Ffoirjgu
Dgj
Lgihit gkitr f9r
60
Copyright Penny McIntire, 2013
Example 2
Adfs iuemnrfdi
Dfutgmuir
S9dke9kd asd9
Dsfpoi sad
Ffoirjgu
Dgj
Lgihit gkitr f9r
61
Copyright Penny McIntire, 2013
Example 3
Adfs iuemnrfdi
Dfutgmuir
S9dke9kd asd9
Dsfpoi sad
Ffoirjgu
Dgj
Lgihit gkitr f9r
62
Copyright Penny McIntire, 2013
Creating Harmony
• Example 1: definitely bad.
• Example 2: much better.
• Example 3: controversial; some experts
say that you shouldn’t mix two different
alignment styles on a single
presentation.
– So what did you think about the alignment
of all of these PowerPoint slides, with
content aligned left and titles aligned right? 63
Copyright Penny McIntire, 2013
Creating Harmony
• Summary:
– Too much serenity is monotonous. Too
much contrast and stimulation are visually
chaotic.
– If resolved skillfully, the tension between
serenity and stimulation can offer visual
harmony.
64
Copyright Penny McIntire, 2013
Page Layout Hints
• Whenever possible, align at least two
side of an element (better three or even
four sides) with something else on the
page (like our “good house” example).
• Divide the page into a grid (done using
divs or tables) and place items in the
cells to get elements to line up.
– Think of it as you would columns and
horizontal divisions of a newspaper.
65
Copyright Penny McIntire, 2013
Page Layout Hints
66
Copyright Penny McIntire, 2013
Page Layout Hints
• Avoid using the dead-center of your
page as the composition center;
instead, the focus of the page should
follow the rule of thirds...
67
Copyright Penny McIntire, 2013
Boring
Interesting
Rule of thirds: divide the page into thirds horizontally
and vertically. The composition focus should be on
the areas of intersection, the red dots above.
68
Copyright Penny McIntire, 2013
Page Layout Hints
• Consider breaking up the “rectangleness” inherent in page design:
– Round the edges of photos, or mask the
background out so that the picture subject
floats on the page background.
– Use rounded or irregular graphics.
– Use appropriate non-rectangular background
images.
69
Copyright Penny McIntire, 2013
Page Layout Hints
– Break the grid…
“Butterfly Effect, www.csszengarden.com/?cssfile=154/154.css,
by Kevin Linkous, www.sitemaker.us
70
Copyright Penny McIntire, 2013
Page Layout Hints
• Other methods to break up the page:
Pull Quote
Drop Cap
First Paragraph
Set Differently
(graphic and leading)
71
Copyright Penny McIntire, 2013
Page Layout Hints
• Consider balance in your design:
– Symmetrical balance: the calmest but can
be boring.
72
Copyright Penny McIntire, 2013
Page Layout Hints
– Asymmetrical balance: more interesting but
still not too unsettling.
73
Copyright Penny McIntire, 2013
Page Layout Hints
– Unbalanced: unsettling and edgy.
74
Copyright Penny McIntire, 2013
Page Layout Hints
• Every page in the site should have:
• Logo and organization identification –
the top banner.
• Page identification – what is this
individual page doing? Page
identification should match the
navigation that takes people to the
page.
• Main navigation – to the other main
pages on the site.
75
Copyright Penny McIntire, 2013
Page Layout Hints
• Local navigation, if necessary – for
getting to sub pages in that section of
the site.
• A standard footer, if needed – copyright
or privacy notice, and/or bottom
navigation.
– Fat footer: a footer with a substantial
amount of navigation, not just the main
navigation repeated. Usually chunked.
76
Copyright Penny McIntire, 2013
Page Layout Hints
• Where should navigation go?
– Most common (and common is good) at
the top and the left (the inverted “L”
layout), because that’s the area that
always displays first and most reliably, and
the place where our eyes go first.
– You can put it elsewhere only if it’s crystal
clear what is and is not navigation, and
even so, this comes with a price.
77
Copyright Penny McIntire, 2013
Pre-designed Page Templates
• Careful using premade templates
provided by an IDE; they are often
overused, overblown, and look cheesy.
– But you can steal ideas and individual
elements.
• Templates available on the web (e.g.,
WordPress): some good, some bad,
some free, some expensive.
• You may NOT use them for this class!!!
78
Copyright Penny McIntire, 2013
Pre-designed Page Templates
• Dreamweaver has built-in layout
templates that can be a good thing –
yes, you can use them for this class.
79
Copyright Penny McIntire, 2013
Pre-designed Page Templates
• Access them when opening a new
document:
– "Blank Page" – just as it sounds.
– "Blank Template" – uses one of 18
predefined templates in CS6, including two
specifically for HTML5.
80
Copyright Penny McIntire, 2013
Pre-designed Page Templates
– "Fluid Grid Layout"
• Sets up CSS for three devices:
– Mobile: 480 px
– Tablet: 768 px
– Desktop: 1232
• Must click on the three monitor icons (small,
medium, and large) on the top bar to
customize each different layout.
• Keep the three automatic layout CSS files
pristine – create separate CSS for your own
formatting.
81
Copyright Penny McIntire, 2013
Pre-designed Page Templates
– "Page from Template" – custom templates
that you have set up or have been given,
like NIU templates.
– "Page from Sample" – UGLY!
82
Copyright Penny McIntire, 2013
Pre-designed Page Templates
– Regardless of which one you use:
• Dreamweaver will create CSS and JavaScript
files that will open in tabs in Dreamweaver. You
must save them and FTP them along with your
HTML file, or everything will break.
• Make sure that whatever you add, you add
inside the containing <div> for the entire page.
• If "Fluid Grid Layout" – use the "Insert" >
"Insert Fluid Grid Layout Div Tag" from the
Insert window/panel on the right side to add
more <div>s inside, or everything will break.
83
Copyright Penny McIntire, 2013
Promoting Speedy Download
• Images and code files that are called
from multiple pages are downloaded
only once, if using the same url
reference:
– Reuse images.
– Pull JavaScript and CSS into external files
and reuse.
• Don’t use gratuitous images, animation,
sound, or video.
84
Copyright Penny McIntire, 2013
Promoting Speedy Download
• Use smaller images whenever possible.
• Always optimize images appropriately
(more in graphics).
• Minimize the number of unique
navigational buttons (more in Navigation
lecture).
85
Copyright Penny McIntire, 2013
Storyboards
• Storyboards show the overall design of
a site.
• In other words, think before you code.
86
Copyright Penny McIntire, 2013
Storyboards
1. Create a navigational chart (outline or
hierarchy chart) like those we have
already examined.
2. Sketch out each page’s layout,
showing placement of repeating items,
in black and white only, either on
paper or in a WYSIWYG editor – a
preliminary comp.
•
No color allowed – distracting.
87
Copyright Penny McIntire, 2013
Storyboards
3. Design the look and feel (color
scheme, borders, etc.) of the site –
the finished comp.
•
“Sketch” this in either:
•
•
an image editor like Fireworks or Photoshop
(but don’t think you can just save the whole
thing as a jpg and use it for the whole
page), or
an HTML editor like Dreamweaver,
SeaMonkey, etc, creating an HTML file.
88
Copyright Penny McIntire, 2013
Storyboards
4. Create a template (a feature of
Dreamweaver) and/or style sheet.
– When you actually implement the
pages, you can use a single Cascading
Style Sheet for all the pages in the site.
– Thus, if the same basic layout is used
for each content page, you need to
design only once.
89
Copyright Penny McIntire, 2013
Storyboards
• Write all of your choices for the site
down!
– The decisions that you make on your site
(fonts, codes for colors, image sizes, special
effects on graphics, password to the FTP
site, etc.) seem so important right now that
you are sure you will never forget them.
– You will, and then you’ll have to look them
up in the code, which slows you down.
90
Copyright Penny McIntire, 2013