COAP:COAP-3150 - week 4: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
No edit summary
 
(8 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{under construction}}
<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==
==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.
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.
Line 7: Line 8:
===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
* [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.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+
* [http://www.guideguide.me/ GuideGuide] - panel plugin for Photoshop CS4+
; Further reading
; 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
* [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://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  
* [http://designfestival.com/designing-for-the-web-templates-and-grid-systems/ Designing for the Web: Templates and Grid Systems]: Design Festival  
[[Category:COAP 3150]]
==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===
* [http://wireframemockups.com wireframemockups.com] - also produces code for creating working [[Web prototyping software |prototypes]]
* [http://www.gliffy.com/ Gliffy], [http://creately.com] - sketching online
===Template and kits===
[http://www.jankoatwarpspeed.com/post/2009/12/24/sketching-wireframing-kit.aspx 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_software#Introductions_and_further_reading |web prototyping]]
==Site management with Dreamweaver (or [http://edutechwiki.unige.ch/en/COAP:COAP-3150_-_week_4 Komposer])==
===File management===
Defining your file structure to separate form from content.
===Site setup===
*local site - [http://www.adobe.com/designcenter-archive/dreamweaver/articles/drwcs3_definelocal_print.html from Adobe Help for CS3]
*local test site vs remote live site - [http://www.jou.ufl.edu/faculty/judyrobinson/3260/dreamweaver_cs3.pdf Defining your site in Dreamweaver CS3]
===Tutorials===
*[http://oreilly.com/web-development/excerpts/0636920001393/introducing-site-management-ch16.html Introducing Site Management - Dreamweaver CS5: The Missing Manual] from O'Reilly
*[https://wiki.brown.edu/confluence/display/CISDOC/Dreamweaver+Site+Design+and+Management+Tutorial Dreamweaver Site Design and Management Tutorial] - Brown University wiki
* [http://www.adobe.com/designcenter-archive/tutorials/drw8at_configure/ Create and configure a Dreamweaver site] from the Adobe Design Center
* [http://www.thesitewizard.com/gettingstarted/dreamweaver1.shtml Dreamweaver Tutorial: How to Create a Website with Dreamweaver CS3]
===Readings===
Chapter 6 - Site management essentials, ''Artistic Web Design'' by Vickie Ellen Wolper.


[[Category:COAP 3150]]
[[Category:COAP 3150]]

Latest revision as of 19:45, 26 October 2016

COAP 3150
COAP:COAP-3150
COAP:COAP-3150 - week 1
COAP:COAP-3150 - week 2
COAP:COAP-3150 - week 3
COAP:COAP-3150 - week 4
COAP:COAP-3150 - week 5
COAP:COAP-3150 - week 6
Design processes and models
Typography
Web design principles

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

Further reading
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-3150_-_week_4&oldid=60784"