![Page 1: Workflow - IED Barcelona - Digital Media 2012](https://reader033.vdocuments.us/reader033/viewer/2022061300/54d110494a795988238b459e/html5/thumbnails/1.jpg)
Digital Media
project_workflow
DIGITAL MEDIA | 2012
![Page 2: Workflow - IED Barcelona - Digital Media 2012](https://reader033.vdocuments.us/reader033/viewer/2022061300/54d110494a795988238b459e/html5/thumbnails/2.jpg)
Digital Media
Preparing your site Information Structure
Organize the site content and navigation hierarchy
Site Structure Organize the site files and assets
Naming ConventionsPages might become inaccessible
Optimize assetsWeb standard image and video format / compression
Defining editable areas for templatesFlexible layout for upcoming content
![Page 3: Workflow - IED Barcelona - Digital Media 2012](https://reader033.vdocuments.us/reader033/viewer/2022061300/54d110494a795988238b459e/html5/thumbnails/3.jpg)
Digital Media
Information StructureWhat are we saying.. Identifying sources of information
Organizing data according to objectives
Presenting clear information
![Page 4: Workflow - IED Barcelona - Digital Media 2012](https://reader033.vdocuments.us/reader033/viewer/2022061300/54d110494a795988238b459e/html5/thumbnails/4.jpg)
Digital Media
Site StructureHow are we saying it.. Defining Hierarchies
Guiding users through a storytelling
Enabling navigation systems (defining sitemaps)
Let users have control (of what we want)
![Page 5: Workflow - IED Barcelona - Digital Media 2012](https://reader033.vdocuments.us/reader033/viewer/2022061300/54d110494a795988238b459e/html5/thumbnails/5.jpg)
Digital Media
Naming conventionsAccessibility No special characters
Dash or Underscore
In depth files naming directories in regards to certain topics.
![Page 6: Workflow - IED Barcelona - Digital Media 2012](https://reader033.vdocuments.us/reader033/viewer/2022061300/54d110494a795988238b459e/html5/thumbnails/6.jpg)
Digital Media
Optimize AssetsManaging your information PSD to HTML tips and tricks
Linked script compression
Identifying Recurring content
![Page 7: Workflow - IED Barcelona - Digital Media 2012](https://reader033.vdocuments.us/reader033/viewer/2022061300/54d110494a795988238b459e/html5/thumbnails/7.jpg)
Digital Media
Define editable areasFocus on content Establishing template patterns
Nesting templates
![Page 8: Workflow - IED Barcelona - Digital Media 2012](https://reader033.vdocuments.us/reader033/viewer/2022061300/54d110494a795988238b459e/html5/thumbnails/8.jpg)
Digital Media
Information Architecture
![Page 9: Workflow - IED Barcelona - Digital Media 2012](https://reader033.vdocuments.us/reader033/viewer/2022061300/54d110494a795988238b459e/html5/thumbnails/9.jpg)
Digital Media
“If you start designing before understanding the breadth and depth of the content that your website will contain, you’ll inevitably have to cram stuff into places that it doesn’t fit.”
http://www.smashingmagazine.com/2010/03/17/starting-out-organized-website-content-planning-the-right-way/
Kristin Wemmer
![Page 10: Workflow - IED Barcelona - Digital Media 2012](https://reader033.vdocuments.us/reader033/viewer/2022061300/54d110494a795988238b459e/html5/thumbnails/10.jpg)
Digital Media
project_architecture
DIGITAL MEDIA | 2012
![Page 11: Workflow - IED Barcelona - Digital Media 2012](https://reader033.vdocuments.us/reader033/viewer/2022061300/54d110494a795988238b459e/html5/thumbnails/11.jpg)
Digital Media
Information ArchitectureContent Source The content defines
the options and elements to manage in our design
Arranging contents the right way helps the website user experience
![Page 12: Workflow - IED Barcelona - Digital Media 2012](https://reader033.vdocuments.us/reader033/viewer/2022061300/54d110494a795988238b459e/html5/thumbnails/12.jpg)
Digital Media
Information ArchitectureContent Source The content defines
the options and elements to manage in our design
Arranging contents the right way helps the website user experience
Without organization there is no interaction nor accessibility
![Page 13: Workflow - IED Barcelona - Digital Media 2012](https://reader033.vdocuments.us/reader033/viewer/2022061300/54d110494a795988238b459e/html5/thumbnails/13.jpg)
Digital Media
Information ArchitectureContent Inventory Is the way to understand the structure and contents of
the website and the purpose of each page
![Page 14: Workflow - IED Barcelona - Digital Media 2012](https://reader033.vdocuments.us/reader033/viewer/2022061300/54d110494a795988238b459e/html5/thumbnails/14.jpg)
Digital Media
Information ArchitectureContentContent defines the structure that helps to establish a sitemap to visualize navigation systems
![Page 15: Workflow - IED Barcelona - Digital Media 2012](https://reader033.vdocuments.us/reader033/viewer/2022061300/54d110494a795988238b459e/html5/thumbnails/15.jpg)
Digital Media
Information ArchitectureSitemapContent defines the structure that helps to establish a sitemap to visualize navigation systems
Establish relations from one content to another
![Page 16: Workflow - IED Barcelona - Digital Media 2012](https://reader033.vdocuments.us/reader033/viewer/2022061300/54d110494a795988238b459e/html5/thumbnails/16.jpg)
Digital Media
Video
Information ArchitectureComponentsEvery page defined from the sitemap is built from components that display content: text, images or interactive elements.
![Page 17: Workflow - IED Barcelona - Digital Media 2012](https://reader033.vdocuments.us/reader033/viewer/2022061300/54d110494a795988238b459e/html5/thumbnails/17.jpg)
Digital Media
Video
Information ArchitectureComponentsEvery page defined from the sitemap is built from components that display content: text, images or interactive elements.
![Page 18: Workflow - IED Barcelona - Digital Media 2012](https://reader033.vdocuments.us/reader033/viewer/2022061300/54d110494a795988238b459e/html5/thumbnails/18.jpg)
Digital Media
project_wireframes
DIGITAL MEDIA | 2012
![Page 19: Workflow - IED Barcelona - Digital Media 2012](https://reader033.vdocuments.us/reader033/viewer/2022061300/54d110494a795988238b459e/html5/thumbnails/19.jpg)
Digital Media
WireframesHelps to Gain understanding
Guideline for designers and developers
Evaluate functionality
Identify interaction, display content
know what you are doing
![Page 20: Workflow - IED Barcelona - Digital Media 2012](https://reader033.vdocuments.us/reader033/viewer/2022061300/54d110494a795988238b459e/html5/thumbnails/20.jpg)
Digital Media
WireframesDo not Represent aesthetics
Contain graphic elements
Convey the brand
![Page 21: Workflow - IED Barcelona - Digital Media 2012](https://reader033.vdocuments.us/reader033/viewer/2022061300/54d110494a795988238b459e/html5/thumbnails/21.jpg)
Digital Media
Know what you are doing…
![Page 22: Workflow - IED Barcelona - Digital Media 2012](https://reader033.vdocuments.us/reader033/viewer/2022061300/54d110494a795988238b459e/html5/thumbnails/22.jpg)
Digital Media
WireframeSketches Quick
Experimental
For feedback
![Page 23: Workflow - IED Barcelona - Digital Media 2012](https://reader033.vdocuments.us/reader033/viewer/2022061300/54d110494a795988238b459e/html5/thumbnails/23.jpg)
Digital Media
WireframeContent Content eval
Good for Flows
![Page 24: Workflow - IED Barcelona - Digital Media 2012](https://reader033.vdocuments.us/reader033/viewer/2022061300/54d110494a795988238b459e/html5/thumbnails/24.jpg)
Digital Media
WireframeHigh fidelity Detailed Wires
Describe content
Describe behavior
Understandable without any help
![Page 25: Workflow - IED Barcelona - Digital Media 2012](https://reader033.vdocuments.us/reader033/viewer/2022061300/54d110494a795988238b459e/html5/thumbnails/25.jpg)
Digital Media
WireframeAnnotated wireflows
![Page 26: Workflow - IED Barcelona - Digital Media 2012](https://reader033.vdocuments.us/reader033/viewer/2022061300/54d110494a795988238b459e/html5/thumbnails/26.jpg)
Digital Media
WireframeHigh definition components wireframes
![Page 27: Workflow - IED Barcelona - Digital Media 2012](https://reader033.vdocuments.us/reader033/viewer/2022061300/54d110494a795988238b459e/html5/thumbnails/27.jpg)
Digital Media
Wireframehttp://www.wireframeshowcase.com/
![Page 28: Workflow - IED Barcelona - Digital Media 2012](https://reader033.vdocuments.us/reader033/viewer/2022061300/54d110494a795988238b459e/html5/thumbnails/28.jpg)
Digital Media
Wireframe -> Live
![Page 29: Workflow - IED Barcelona - Digital Media 2012](https://reader033.vdocuments.us/reader033/viewer/2022061300/54d110494a795988238b459e/html5/thumbnails/29.jpg)
Digital Media
DreamWeaver
![Page 30: Workflow - IED Barcelona - Digital Media 2012](https://reader033.vdocuments.us/reader033/viewer/2022061300/54d110494a795988238b459e/html5/thumbnails/30.jpg)
Digital Media
DW Site Local folder: This is your
working directory. Dreamweaver refers to this folder as your local site. The local folder is usually a folder on your hard drive.
Remote folder: This is where you store your files on the computer that's running your web server. The computer running the web server is often but not always the computer that makes your site publicly available on the web.