30
Digital Media project_ workflow DIGITAL MEDIA | 2012

Workflow - IED Barcelona - Digital Media 2012

Embed Size (px)

DESCRIPTION

WorkflowIED BarcelonaDigital Media 2012

Citation preview

Page 1: Workflow - IED Barcelona - Digital Media 2012

Digital Media

project_workflow

DIGITAL MEDIA | 2012

Page 2: Workflow - IED Barcelona - Digital Media 2012

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

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

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

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

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

Digital Media

Define editable areasFocus on content Establishing template patterns

Nesting templates

Page 8: Workflow - IED Barcelona - Digital Media 2012

Digital Media

Information Architecture

Page 9: Workflow - IED Barcelona - Digital Media 2012

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

Digital Media

project_architecture

DIGITAL MEDIA | 2012

Page 11: Workflow - IED Barcelona - Digital Media 2012

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

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

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

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

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

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

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

Digital Media

project_wireframes

DIGITAL MEDIA | 2012

Page 19: Workflow - IED Barcelona - Digital Media 2012

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

Digital Media

WireframesDo not Represent aesthetics

Contain graphic elements

Convey the brand

Page 21: Workflow - IED Barcelona - Digital Media 2012

Digital Media

Know what you are doing…

Page 22: Workflow - IED Barcelona - Digital Media 2012

Digital Media

WireframeSketches Quick

Experimental

For feedback

Page 23: Workflow - IED Barcelona - Digital Media 2012

Digital Media

WireframeContent Content eval

Good for Flows

Page 24: Workflow - IED Barcelona - Digital Media 2012

Digital Media

WireframeHigh fidelity Detailed Wires

Describe content

Describe behavior

Understandable without any help

Page 25: Workflow - IED Barcelona - Digital Media 2012

Digital Media

WireframeAnnotated wireflows

Page 26: Workflow - IED Barcelona - Digital Media 2012

Digital Media

WireframeHigh definition components wireframes

Page 27: Workflow - IED Barcelona - Digital Media 2012

Digital Media

Wireframehttp://www.wireframeshowcase.com/

Page 28: Workflow - IED Barcelona - Digital Media 2012

Digital Media

Wireframe -> Live

Page 29: Workflow - IED Barcelona - Digital Media 2012

Digital Media

DreamWeaver

Page 30: Workflow - IED Barcelona - Digital Media 2012

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.