COAP:COAP-3150 - week 4: Difference between revisions
(→Tools) |
|||
| Line 7: | Line 7: | ||
===Tools=== | ===Tools=== | ||
* [http://960.gs/ 960 grid system] - grid templates for Photoshop (among others) to place as layers. | * [http://960.gs/ 960 grid system] - grid templates for Photoshop (among others) to place as layers. | ||
* [http://peol.github.com/960gridder/ 960 gridder] - bookmarklet for Firefox, just drag icon link to your bookmarks | |||
* [http://modulargrid.org/#app Modular grid app] - CS5 plugin or web application and option to export result | * [http://modulargrid.org/#app Modular grid app] - CS5 plugin or web application and option to export result | ||
* [http://fluidbaselinegrid.com/ Fluid baseline grid] - for designing fluid CSS-based grids | * [http://fluidbaselinegrid.com/ Fluid baseline grid] - for designing fluid CSS-based grids | ||
Revision as of 13:31, 10 February 2012
This article or section is currently under construction
In principle, someone is working on it and there should be a better version in a not so distant future.
If you want to modify this page, please discuss it with the person working on it (see the "history")
Layouts and grids
Grid systems and used to organize layouts in print and web pages. Grids are made of horizontal baseline grids and separations and vertical columns and spacing between columns and margins.
Tools
- 960 grid system - grid templates for Photoshop (among others) to place as layers.
- 960 gridder - bookmarklet for Firefox, just drag icon link to your bookmarks
- Modular grid app - CS5 plugin or web application and option to export result
- Fluid baseline grid - for designing fluid CSS-based grids
- LAYOUT & STYLEGUIDE TEMPLATES: YOUR NEW BFFs - Photoshop layout templates
- GuideGuide - panel plugin for Photoshop CS4+
- Further reading
- Grid design basics: Grids for Web page layouts - Dev.Opera
- Establishing Your Grid In Photoshop
- Designing for the Web: Templates and Grid Systems: Design Festival
Wireframes and mockups
Wireframes are sketches of web page layouts and interfaces. They can be made using a variety of tools, from pencil and paper to sophisticated software, to sketch out the organization of a web page and its features.
Online tools
- wireframemockups.com - also produces code for creating working prototypes
- Gliffy, [1] - sketching online
Template and kits
Free Sketching & Wireframing Kit to use with Illustrator or Photoshop or other vector-based drawing or image editing software.
See also
- Web wireframe article for more tools and software (some commercial)
- Further reading on web prototyping
Site management with Dreamweaver (or Komposer)
File management
Defining your file structure to separate form from content.
Site setup
- local site - from Adobe Help for CS3
- local test site vs remote live site - Defining your site in Dreamweaver CS3
Tutorials
- Introducing Site Management - Dreamweaver CS5: The Missing Manual from O'Reilly
- Dreamweaver Site Design and Management Tutorial - Brown University wiki
- Create and configure a Dreamweaver site from the Adobe Design Center
- Dreamweaver Tutorial: How to Create a Website with Dreamweaver CS3
Readings
Chapter 6 - Site management essentials, Artistic Web Design by Vickie Ellen Wolper.