Design basics for the Web - Illinois State University

Download Report

Transcript Design basics for the Web - Illinois State University

Design basics for the Web
MC 366
Web Design & Production
Alignment
Items on a page are lined up with each
other
Right, left, centered
Chose one and use it on entire page
You need to use horizontal and vertical
alignments
Use horizontal alignment to avoid
“up/down/up/down” shift
All type is same size and aligned on same
baseline
SA
Publishing
H O M E
Order
To order books, please check the
corresponding boxes and type in
the desired quantities.
Books
Poetry
Feature
Calendar
Listening for All
$14.00 ea.
Company
Name
Order
Contact
Name
E-mail
Address
Men Need Spice
$12.00 ea.
City
State
Zip
Telephone
E-mail
Shipping Costs:
Priority Mail: 1-2 books $3.50, 3-4
books $5.00
UPS Ground: Cost by actual weight
Overnight: Cost by actual weight
For Customer Service call:
1-888-984-2646
Everything should be placed on the page
with a reason for where it is
Nothing should be placed arbitrarily
Alignment makes a page look clean and
better organized
Home
Internet
Browse
Archives
Software
The Basics
Home
Internet
Browse
Archives
Software
The Basics
Programming
Programming
After Hours
After Hours
Technical
Check out the
Computer 50
Technical
Check out the
Computer 50
Proximity
 Place items that
belong together
close together
spatially
 Move headlines
closest to body text
they go with
 At right too much
space below
headlines
Calendar Formats
Proposed formats are a wall calendar using between 12 and 36 original
works, an engagement calendar using 52 or more works and possibly a
page-per-day cube-type format requiring at least 356 works.
Royalties on Art
The publisher will contract with the individual artists selected for the
royalties associated with the project or payment will be in copies
depending upon which publisher we work with.
Submission of Information
Please slides of a quality suitable for print reproduction. Maximum 4
slides for artists, 2 by 2 inches, labeled on the top front with the name of
the artist, medium dimensions, year of execution. All media will be
considered including fabric, photography, collage, sculpture, digital and
others.
 Now
headlines are
more
connected to
paragraphs
 And page
looks more
organized and
easier to read
Calendar Formats
Proposed formats are a wall calendar using between 12 and 36 original
works, an engagement calendar using 52 or more works and possibly a
page-per-day cube-type format requiring at least 356 works.
Royalties on Art
The publisher will contract with the individual artists selected for the
royalties associated with the project or payment will be in copies
depending upon which publisher we work with.
Submission of Information
Please slides of a quality suitable for print reproduction. Maximum 4
slides for artists, 2 by 2 inches, labeled on the top front with the name of
the artist, medium dimensions, year of execution. All media will be
considered including fabric, photography, collage, sculpture, digital and
others.
NapaNet Napa Valley
NapaNet
Features
Internet
The Napa Valley
Education
Elementary | Middle Schools | High Schools | Coolege/Higher Eduction | Preschools | Blocking
and Filtering Software | Parenting | Homework Helpers | Teachers | Test Preparation | College
Choice | Financial Aid
Government
City Directories | Local | County | Regional | State | Officials | Federal Business and Consumer
Info | Small Business Info | Industry Specific Resources | Social Security | Employee Info |
Environment | Health| Housing | Welfare | Level | Legislature | Taxes | Veterans
Organization
Arts and Music | Business | Consumer | Disability | Employment | Family | Health |
Environmental | Hobbies | Libraries | Museums | Religion | Services | Support/Counseling
Business
General Business | Organizations | Wineries | Health | Dining/Lodging | Job Search
Visitors
Bay Area Restaurant Guide | Napa=Online | Napa chamber of Commerce | All Hotels on the
Web | Napa Valley Conference and Visitors Bureau | St. Helens info | Sonoma Country Visitors
Bureau | Marin County Visitors Bureau | San Jose Visitors Guide
NapaNet Napa Valley
NapaNet
Features
Internet
The Napa Valley
Education
Elementary | Middle Schools | High Schools | Coolege/Higher Eduction | Preschools | Blocking
and Filtering Software | Parenting | Homework Helpers | Teachers | Test Preparation | College
Choice | Financial Aid
Government
City Directories | Local | County | Regional | State | Officials | Federal Business and Consumer
Info | Small Business Info | Industry Specific Resources | Social Security | Employee Info |
Environment | Health| Housing | Welfare | Level | Legislature | Taxes | Veterans
Organization
Arts and Music | Business | Consumer | Disability | Employment | Family | Health |
Environmental | Hobbies | Libraries | Museums | Religion | Services | Support/Counseling
Business
General Business | Organizations | Wineries | Health | Dining/Lodging | Job Search
Visitors
Bay Area Restaurant Guide | Napa=Online | Napa chamber of Commerce | All Hotels on the
Web | Napa Valley Conference and Visitors Bureau | St. Helens info | Sonoma Country Visitors
Bureau | Marin County Visitors Bureau | San Jose Visitors Guide
Move head over to align with body of text
Move text closer to headings on left
Repetition
Repeat certain graphic elements
throughout a project
Colors, format, type, art, etc.
Each page in a Web site should look like it
belongs to the same Web site
Repeat colors thru a page
 Color is
repeated
in heads,
sidebar,
logo and
important
words
Anniversary Art Call
for entries
who am I?
sample
dates
judging
criteria
Proposed formats are a wall calendar using between 12 and 36
original works, an engagement calendar using 52 or more works
and possibly a page-per-day cube-type format requiring at least
356 works.
Royalties on Art
The publisher will contract with the individual artists selected
for the royalties associated with the project or payment will be in
copies depending upon which publisher we work with.
Please slides of a
quality suitable for print reproduction. Maximum 4 slides for
artists, 2 by 2 inches, labeled on the top front with the name of
the artist, medium dimensions, year of execution. All media will
be considered including fabric, photography, collage, sculpture,
digital and others.
Submission of Information
And throughout site:
Internet Services
of Santa Fe
Robin Williams
This is a list of Internet Service Providers that I have obtained from friends
and area business and includes providers, web designers and other Internet
services such as data control, transmission speed, etc.
Click the yellow triangle to return to this home page. Click the black box to
return to the ratx home page.
Internet Service Providers
Web Designers
Consultants and other Web Services
Class - Computer - Intenet Web Design
My Columns in the New Mexican
Web Designers
of Santa Fe
The following is a list of Web Desingers in Santa Fe. Click each name to
jump to their Web sites. Where you will find examples of their work and
rates.
West of the Pecos
http://www.westpecos.com/
studio x design
http://netx.com/studios/
Web Works
http://www.webworksdesgin.com
Paper Tiger
http://www.papertigerinc.com
Aardvark Web Design
http://www.aardvarkdesign.com
Service Providers
of Santa Fe
The following is a list of Internet Service Providers in the Santa Fe area.
The list also includes providers in Los Alamos and Alberquerque who have
local access numbers and the post popular national provider for the area.
If you prefer y ou can take a look at The List for New Mexico which lists
almost all of the local and national providers in the country who serice the
505 area code. Although they don’t all use Santa Fe phone numbers.
studio x
email: [email protected]
Phone: 546-7869
Santa Fe Online
email: [email protected]
Phone: 983-0768
Santa Fe Trail
email: [email protected]
Black and red background stripe
Repetitive headlines pick up black with
touch of red
Black type has red accents
Layout format is repeated on every page
Rules are repeated on each page
Contrast
Use contrast to draw reader into page and
then guide them around the page
Make two elements very different -- no
almost the same
Every page needs a focal point
What reader looks at first
 In first
example
difficult to
choose most
important
element.
 By using
contrast you
can make the
event most
important
MUSIC AND ART
SANTA FE FESTIVAL OF
MUSICA ROMANTICA
Music and Art
Santa Fe Festival of
Music Romantica
Want to avoid:
Too many competing dominant elements
Decide on a focal point and then make
everything else subordinate
Establish a hierarchy of information by using
contrast (size, weight, etc.)
Dallas Easy Access / Chicago Easy Access / Miami Easy Access / Starkville Easy
Access / Be a Member / Member Home Pages / Help Desk / About Us / Register
Easy Access NET
by
Digital State
Internet’s Leisure Site Developer
Visit leisurenow.com, a DigitState joint project
Easy Access Nets improve communication by
connecting people and companies through the Internet
Join one of our online charters and receive Easy Access
Benefits from both locations’ International Service
Dallas Chapter
Chicago Chapter
Miami Chapter
Join
Help Desk
About Us
Easy Access NET
by Digital State
Welcome to the online connection to leisure
planning and leisure products. Explore our
Member Home Page which offers bargains
and discounts for every conceivable type of
leisure activity. And don’t miss our new
improved Saturday Night Planner section for
movie reviews and weekend special deals.
Or just browse and shop, using your
membership clout to score great bargains.
Visit leisurenow.com, a joint project between Digital State and Easy Access NET
Previous page was too cluttered with too many
items competing for attention
Spelling
Bad spelling and grammar can destroy
professional effect of a Web site
Advantage of the Web is that mistakes are
easy to fix on the Web
Recipeints of Url’s Pick of the Week
Great Web Sites
for
Tommorrow
Summary
Don’t have to align everything along one
edge -- just use consistent alignments,
don’t mix
Everything on the page should have a
visual connection to another
Proximity
Captions should be close to their photos
Headings should have more space above
them than below them
Repetitive elements let reader know
pages on site are part of a complete set of
similar pages
Color scheme, consistent background
pattern, navigational bar, etc.
Establish a hierarchy of items on a page
by using contrast of size and weight
Also use color to highlight important words