COAP:COAP-3150 - week 4: Difference between revisions
Jump to navigation
Jump to search
(Created page with "{{under construction}} ==Part I== * '''MID-TERM EXAM''' - 1 hour ==Part II==") |
No edit summary |
||
| (16 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<categorytree mode="pages" depth="1" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">COAP 3150</categorytree> | |||
== | |||
* | ==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. | ||
* [http://designfestival.com/grid-theory/ Grid Theory] | |||
* [http://www.thegridsystem.org/ The Grid System] | |||
===Tools=== | |||
* [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://fluidbaselinegrid.com/ Fluid baseline grid] - for designing fluid CSS-based grids | |||
* [http://www.dmxzone.com/go?18032 CSS flexible columns in Dreamweaver extension] - that is only available for free if you "like" them on Facebook! | |||
* [http://www.viget.com/inspire/free-psd-design-templates/ LAYOUT & STYLEGUIDE TEMPLATES: YOUR NEW BFFs] - Photoshop layout templates | |||
* [http://www.guideguide.me/ GuideGuide] - panel plugin for Photoshop CS4+ | |||
; Further reading | |||
* [http://dev.opera.com/articles/view/grid-design-basics-grids-for-web-page-l/ Grid design basics: Grids for Web page layouts] - Dev.Opera - a good primer for laying out your columns with the <div> tag and CSS | |||
* [http://www.smashingmagazine.com/2011/11/09/establishing-your-grid-in-photoshop/ Establishing Your Grid In Photoshop] | |||
* [http://designfestival.com/designing-for-the-web-templates-and-grid-systems/ Designing for the Web: Templates and Grid Systems]: Design Festival | |||
[[Category:COAP 3150]] | |||
Latest revision as of 19:45, 26 October 2016
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
- CSS flexible columns in Dreamweaver extension - that is only available for free if you "like" them on Facebook!
- 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 - a good primer for laying out your columns with the tag and CSS
- Establishing Your Grid In Photoshop
- Designing for the Web: Templates and Grid Systems: Design Festival