1 / 23

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

javier
Download Presentation

Design basics for the Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Design basics for the Web MC 366 Web Design & Production

  2. 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

  3. Use horizontal alignment to avoid “up/down/up/down” shift • All type is same size and aligned on same baseline

  4. 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

  5. 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

  6. 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

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

  8. 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

  9. NapaNetNapa Valley NapaNet Features Internet The Napa Valley Elementary | Middle Schools | High Schools | Coolege/Higher Eduction | Preschools | Blocking and Filtering Software | Parenting | Homework Helpers | Teachers | Test Preparation | College Choice | Financial Aid 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 Arts and Music | Business | Consumer | Disability | Employment | Family | Health | Environmental | Hobbies | Libraries | Museums | Religion | Services | Support/Counseling General Business | Organizations | Wineries | Health | Dining/Lodging | Job Search 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 Education Government Organization Business Visitors

  10. NapaNetNapa Valley NapaNet Features Internet The Napa Valley Elementary | Middle Schools | High Schools | Coolege/Higher Eduction | Preschools | Blocking and Filtering Software | Parenting | Homework Helpers | Teachers | Test Preparation | College Choice | Financial Aid 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 Arts and Music | Business | Consumer | Disability | Employment | Family | Health | Environmental | Hobbies | Libraries | Museums | Religion | Services | Support/Counseling General Business | Organizations | Wineries | Health | Dining/Lodging | Job Search 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 Education Government Organization Business Visitors • Move head over to align with body of text • Move text closer to headings on left

  11. 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

  12. 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.

  13. 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

  14. 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

  15. 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

  16. 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

  17. 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

  18. 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.)

  19. 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

  20. 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

  21. 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

  22. 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

  23. 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

More Related