DESIGN JOURNAL

Color & Value

Proximity

Alignment

Emphasis

W h i t e S p a c e Balance

Repetition Phot ogra phy

Illus trat ion G r i d

Color & Value

Brenda Berg

White Space
Balance

Alignment

Proximity

Grid

Illustration

Emphasis

Bergs interactive PDF Design

Journal is a visual resource for
clients and laypeople needing
a better understanding of design
principles and elements that must
be carefully considered by skilled
designers when developing an
interactive PDF, website, and
other digital layouts. When
planning a comp osition,
Berg starts with a series of
thumbnail sketches that allow
for manipulation of certain
design elements and principles.
These doodles lay a foundation
for more developed sketches,
formal ideas that evolve into the
finished design layout. Select
screenshots provide exemplary
examples of the ten key design
principles and elements used
to create memorable and
user-friendly interactive PDFs.

Photography

Repetition

DESIGN JOURNAL
Emphasis

Color & Value

Proximity

Alignment

W h i t e S p a c e Balance

Emphasis

Repetition Phot ogra phy

Illus trat ion G r i d

Emphasis
Emphasis is used to create a design focal
point by bringing attention to the most
important layout elements. Emphasis is
what catches the eye and makes the viewer
stop and look at the image, text or
other important layout element.
Emphasis can be created in a number
of ways by a skilled and experienced
graphic designer. Artist Xenia Hausners
website http://www.xeniahausner.de/ uses
one of her paintings as the layouts
background. The painting consumes the
page, making it the design layout emphasis.
As a painter, Hausners artwork dominates
her home page and clarifies what and who
the website is highlighting.

HOME

DESIGN JOURNAL
Emphasis

Color & Value

Color & Value

Proximity

Alignment

W h i t e S p a c e Balance

Repetition Phot ogra phy

Illus trat ion G r i d

Color & Value

Amsterdams Vincent Van Gogh Museum
houses the worlds largest collection of works
by Van Gogh. The website (http://www.vangoghmuseum.nl/en) layout appropriately
focuses on Van Goghs artwork. The home
page uses white sans serif text and a detail
from Van Goghs Almond Blossoms painting
for the design layout. The paintings sky blue
background color is used again as delicate line
texture, reminiscent of Van Goghs brush work
and line drawings, for the pages left column of
informational links. To give the column more
contrast from the artwork, which also makes
that area more visible, a darker teal background
value is used. A black box, which contains the
header Van Gogh Museum, Amsterdam.
The viewers eye is drawn to the black box,
the only black on the page and the museums
name. The Almond Blossoms painting was a
celebration of the birth of Theos son who was
named after Vincent. Like Hausners site, the
remarkable artwork beautifully dominates
the page.

HOME

DESIGN JOURNAL
Emphasis

Color & Value

Proximity

Alignment

W h i t e S p a c e Balance

Repetition Phot ogra phy

Proximity

HOME

HOME

Illus trat ion G r i d

Proximity
Both a historical landmark and a remarkable
art project in the world of art centers, Santa
Cruzs Tannery Art Centers web site at http://
tanneryartscenter.org/ is uses well thoughtout proximity and groupings. The web site
is divided into four equal columns and three
rows. Architectural drawings of the planned
theater remodel and a bold sans serif text
header that proclaims, Preserving the Past,
and in smaller text Investing in the future, and
building the stage acts as an introduction to
the site. Centered across the top are the links
to important information. The right column
directly across from the theater information is
the forth column with Build IT! and a link
to the future performing arts theater size, use
and seating configuration. All four columns
in the first row are about the physical Tannery
campus. The lower design layout also has a
logical grouping and proximity. The three left
columns have information about supporting
the Tannery and celebrating the Tanniversay!
Directly below that row is Get Involved. The
viewer experience is engaged with the Tannerys
information and future projects because of
logical groupings and organization.

DESIGN JOURNAL
Emphasis

Color & Value

Proximity

Alignment

W h i t e S p a c e Balance

Repetition Phot ogra phy

Illus trat ion G r i d

Alignment

HOME

Alignment

HOME

When the website belongs to an arts

organization with a bottomless wallet, it is
no surprise that the website is functional,
stylish, and packed full of information. The
http://www.guggenheim.org/ site belongs to
one of those organizations, the Guggenheim
Foundation. Smartly placed across the top is
a colorful row of links that take you around
the world to the multiple geographical sites
that are global homes for specific Guggenheim
Museum collections and cultural events. Just
below the top row of links is the upper case
GUGGENHEIM sans serif header, which
is perfectly aligned to the width of the layout.
Everything below the header is also aligned
to fit into the width of the design layout. The
page is dived into four equal columns, with
one image that spans three of the upper left
columns. The page scrolls below the visible
web page with more well aligned information.
The design layout uses alignment to make
navigation of the well-organized information
on the home page easy and interesting.

DESIGN JOURNAL
Emphasis

Color & Value

Proximity

Alignment

W h i t e S p a c e Balance

Repetition Phot ogra phy

White Space

HOME

HOME

Illus trat ion G r i d

White Space
It would be tough to find any one company
who consistently uses white space in
brilliant ad campaigns that are recognizable
and memorable as well as Apple. Their current
web site https://www.apple.com/iphone-6/
for the new iPhone 6 is no exception. The top
of the page has a narrow gray bar with their
signature apple logo and links to products
in simple sans serif text. Below the bar is a
short column with images and links to iPhone
products and extras. Centered on the page is
a picture of phone, the words iPone 6, Bigger
than bigger. A very light gray, almost white,
background is everywhere else, the majority
of the layout space. Surrounding the iPhone
with empty white space makes the iPhone
(iPad, IMac) iconic, celestial, spiritual,
other-worldliness. This floating object is
worth hundreds of ones hard-earned dollars
and the humiliation of standing in line for
hours in order to purchase and own one.
Apples design layouts can be minimalist
because of the companys inspired branding
strategies and brilliant ad campaigns.

DESIGN JOURNAL
Emphasis

Color & Value

Proximity

Alignment

W h i t e S p a c e Balance

Repetition Phot ogra phy

Illus trat ion G r i d

Balance
White Space

Balance

HOME

HOME

Zero Ones art and technology network site

at http://zero1.org/ uses a symmetrically
balanced design layout for their website.
Although divided differently, the four column
layout is equally weighted on both sides of the
page. At the top right half of the page is Zero
Ones name/logo with a smaller text stating
that this is The art & technology network.
The logo space is balanced by white space,
a small text link to e-news and a search box
on the opposite side. The row below the logo
spans the full width of the design and holds
the sites key links. The left animated Zero
One Garage rectangle scrolls through current
events and has a video component. Opposite
the rectangle is a split row with a one column
width area for blocks of information and
another split column with information. The
design continues down the page with full
and split columns and rows, but each area
is counterbalanced by a space or spaces on
the opposite side. Although a very complex
system of geometric squares and rectangles,
the design layout is perfectly balanced. If
simplified, this concept could be an effective
layout with a color palette of neutral grays,
warm oranges and cool blues.

DESIGN JOURNAL
Emphasis

Color & Value

Proximity

Alignment

W h i t e S p a c e Balance

Repetition Phot ogra phy

Illus trat ion G r i d

Repetition

HOME

Repetition

HOME

Mathew Zefeldts website at http://www.

mathewzefeldt.com/ fills the page with equally
spaced repeated rows of artworks in long
columns that scroll below the visible page.
Small sans serif text links are placed along
the top of the page, Mathew Zefeldt is just
below the links in a bold upper case sans
serif text. Below the Zefeldts name is Page
1 2 which links to the next page and back to
the home page. Scrolling across the artwork
causes the work to enlarge slightly, signifying
that the enlarged artwork is an active link
to the artwork with title, date, media and
size details. At the bottom of the secondary
linked page is a row of small thumbnails of
artworks with a side scrolling bar. Although
I am more inclined to show fewer artworks
in a more simplified design layout and a
less overwhelming space, the repeated rows
and columns are easily navigated and very
functional for a large series of artworks that
share a theme or similar artworks
that are part of one large project.

DESIGN JOURNAL
Emphasis

Color & Value

Proximity

Alignment

W h i t e S p a c e Balance

Repetition Phot ogra phy

Illus trat ion G r i d

Photography

Photography

HOME

Travel sites seem to have some of the most

stunning photographs and picturesque
websites, so a logical choice for eye-catching
photos is local vacation spot, San Francisco
Travel at http://www.sanfrancisco.travel. The
site features the iconic Golden Gate Bridge as
the home pages stationary image, and has five
rotating images in the left column featuring
current SF highlights. Small thumbnail
photos of landmark SF must-sees are placed
under the main pages photos as links to more
information about the attraction. As the visitor
scrolls down the page, more photos with
links to other popular tourist attractions can
be found. Taken from a unique or unusual
vantage point, the photos are cropped to
feature just the essence of the attraction, a
teaser to make the viewer want to see more.
SF is a very picturesque city, but the sites
photographs are competing with exotic global
landmarks like Indias Taj Mahal. Sanfrancisco.
travel needs to entice world travelers, people
who can go anywhere on the planet. The sites
layout and gorgeous photos should bring even
the well-traveled viewer to the foggy city.

DESIGN JOURNAL
Color & Value

Proximity

Illustration

Emphasis

HOME

Alignment

W h i t e S p a c e Balance

Repetition Phot ogra phy

Illus trat ion G r i d

Illustration
The Rive Immersive creative team craft interactive
stories for the web. One of their award
winning interactive stories for illustration is Rise
and Shine at http://riveimmersive.com/rise-andshine/. The screen starts with an Indigo blue sky,
a few floating white clouds and a white moon. The
words scroll to start (and keep scrolling) appear
at the bottom of the page. Using a mouse to scroll,
or a finger on a touch screen to push the scene
across the page, the illustrations move from right
to left (like turning the page of a book) and from
night to a sunny day and the sunny title, Rise and
Shine. The wonderful black outline illustrations
are filled in with bright colors and placed on
simple backgrounds, often white, with text at the
bottom of the page. Movement is everywhere.
Little curtains on a bedroom window gently sway
back and forth with music notes increasing and
decreasing in size next to the window. The viewer
actually has the option to include music or to
leave the music off while scrolling. Unique and
captivating, the main character jumps up and
down on his bed, inviting the viewer to join him
on a journey through a childs interesting day.
As a visual artist who begins every project with
sketches, drawing and illustration are not only
appealing to me, they are my first visual language.

DESIGN JOURNAL
Emphasis

Color & Value

Proximity

Alignment

W h i t e S p a c e Balance

Repetition Phot ogra phy

Illus trat ion G r i d

Grid

Grid

HOME

California bases artist Analia Sabans website

at http://www.analiasabanstudio.com/ is in the
classic 12 column grid formation. The page
design is placed inside of black borders on either
side. The design layout is divided into 4 columns
or a grid formation of 3, 3, 3, 3. The column on
the left holds most of the written information
with gutters on both sides. The artists name is in
the upper part of the left grid with a hand drawn
line that moves across the 12 columns, leaving
gutter space on both sides. The key links, sans
serif typed words, are placed in the upper right
column. The remaining right 3 columns has a
featured artwork with title, year, media, size and
image information. The artwork is stationary
and, unlike many art websites, does not scroll
to additional artworks. Social media links are
placed in the second column along the bottom
and contact information is in the two right
columns on the bottom of the page. The grid
makes the site layout compact, simple, logical
and easy to navigate.