Versions Compared

Old Version 1

changes.mady.by.user Daisuke Kawachi

Saved on

compared with

New Version 2

changes.mady.by.user Daisuke Kawachi

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • Basic technical terminology:
    It is essential to gain a basic understanding of the anatomy of a web page. Here is a very quick and helpful description from Blueprint Design Studio based in Chicago: http://blueprintds.com/2008/12/30/anatomy-of-a-web-page/
  • Headings and fonts:
    sans-serif at, at least, 12 points is a good rule to follow. Headings can be far bigger than traditional print media and should generally be in a sans-serif font.
  • Images:
    Make jpegs
    72 dpi with the width not exceeding 500 pixels in any direction will provide you with an image that will load fast. Use Optimize for Web in the Save function in Photoshop for peak performance.
  • Layout:
    This is dependent upon the design system that you are using. If you are using Reason or WordPress a standardized, tabular format will come as standard in the page template. If building your own site it is important to consider the arrangement of the essential elements: site title (header), body content, navigation, footer and any additional side bars.
  • Navigation:
    Must be clear and it is wish to avoid flash-based navigation due to accessibility issues (smartphones, iPads). Standard navigation locations are directly above or below the header or in a left sidebar.
  • In you class WordPress MU blog: Images Tutorial
    If you need to upload images click on "Select files" in the next window to upload your images. Please note: the maximum width for images in the Carleton WordPress MU is 1024 pixels X 1024 pixels. If your image is larger it will not upload. If your file exceeds 2MB then depending upon the blog settings it will also probably fail to upload. Please resize your images in Preview or Paint before uploading them. In general a good rule of thumb to follow is for your images not to exceed 500 pixels in an dimensional direction.
Design: Print and Web Essentials

ADA Standards for Accessible Design
This is both an essential tool for any design project and a good example of in-depth design standards

Guidelines And Standards Manuals
A list of exemplary design standards from different companies. Particularly good examples are ABB and BestBuy.

A List Apart
This site is essential reading for web design and also has some great tips for general design projects.

W3.org
The authority on web design standards, this is very in-depth and in the majority of cases a class blog or website will initially constructed as code compliant by your Academic Technologist or the Web Services Team.

Accessible Website Design
A fabulous interactive tool for accessing design considerations for a web page.

Web Design Trends for 2010
This site features great collections of site examples and typographic observations.

Design Tools

These tools are currently available to students on campus in the public labs. Contact Fiona MacNeill (fmacneil), Tucker MacNeill (tmacneil, PEPS) or Carly Born (cborn) for assistance with Adobe products.
You can also find a variety of helpful videos at the Adobe training website: http://tv.adobe.com/show/learn-indesign-cs5/

Adobe InDesign CS5:

  • Use it for: Publication Design and Posters
  • Adobe InDesign CS5 - wiki.carleton.edu - Some materials are available, additional materials will be added soon

* Carleton FAQ was created in 2005, the information may be slightly different in Adobe InDesign CS5, the current version in use on campus. The ATs are working on updating this information.

Adobe Photoshop CS5:

  • Use it for: Photographic Editing, Image Preparation, Quick Design Products, Advertisements

Adobe Illustrator CS5:

  • Use it for: Original Illustrations, Vector Graphics, Floor Plans, Logos
  • Adobe Illustrator CS5 - wiki.carleton.edu - No materials are available at this time, materials will be added soon.

Adobe Dreamweaver CS5:

  • Use it for: Web Design, Javascript, Roll-over buttons, Limited Flash Objects*
  • Adobe Dreamweaver CS5 - wiki.carleton.edu - No materials are available at this time, materials will be added soon.

*Flash will not work in college webpub folders.

Reason:

  • Use it for: Carleton web pages
  • Reason is Carleton's content management system for the web. Please contact the Web Services Group for training.

Preview (Mac OSX)

  • Use it for: Checking Image Size, Image Resizing, Quick Cropping, Image and PDF Annotation, Quick Alpha (color exclusion, i.e. taking out a white background).
  • Comes as standard on all Machintoshs as part of OSX, however the functionality will vary depending upon which version of OSX you are using.
  • Checking image size and resolution in Preview

Paint (Microsoft)

  • Use it for: Checking Image Size, Cropping, Image Annotation
  • Comes as standard as part of Windows, however the functionality will vary depending upon which version of the Windows Operating System you are using.