Design basics for the Web

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 Order Company Name Contact Name Address City State Zip Telephone E-mail H O M E To order books, please check the corresponding boxes and type in the desired quantities. Books Poetry Feature Calendar Order E-mail Listening for All $14.00 ea. Men Need Spice $12.00 ea. 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 Programming After Hours Technical Check out the Computer 50 Home Internet Browse Archives Software The Basics Programming After Hours 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 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. 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. Calendar Formats Royalties on Art Submission of Information

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 ArtCall 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 ArtThe 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.

And throughout site: Internet Servicesof 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 Pecoshttp://www.westpecos.com/ studio x design http://netx.com/studios/ Web Works http://www.webworksdesgin.com Paper Tigerhttp://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: connect@netz.com Phone: 546-7869 Santa Fe Online email: human@aol.com Phone: 983-0768 Santa Fe Trail email: admin@trail.com

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 ArtSanta 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 byDigital 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 • Previous page was too cluttered with too many items competing for attention 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

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

Design basics for the Web