Workflow - IED Barcelona - Digital Media 2012

Digital Media

project_workflow

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

Digital Media

Information StructureWhat are we saying.. Identifying sources of information

Organizing data according to objectives

Presenting clear information

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)

Digital Media

Naming conventionsAccessibility No special characters

Dash or Underscore

In depth files naming directories in regards to certain topics.

Digital Media

Optimize AssetsManaging your information PSD to HTML tips and tricks

Linked script compression

Identifying Recurring content

Digital Media

Define editable areasFocus on content Establishing template patterns

Nesting templates

Digital Media

Information Architecture

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

Digital Media

project_architecture

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

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

Digital Media

Information ArchitectureContent Inventory Is the way to understand the structure and contents of

the website and the purpose of each page

Digital Media

Information ArchitectureContentContent defines the structure that helps to establish a sitemap to visualize navigation systems

Digital Media

Information ArchitectureSitemapContent defines the structure that helps to establish a sitemap to visualize navigation systems

Establish relations from one content to another

Digital Media

Video

Information ArchitectureComponentsEvery page defined from the sitemap is built from components that display content: text, images or interactive elements.

Digital Media

Video

Information ArchitectureComponentsEvery page defined from the sitemap is built from components that display content: text, images or interactive elements.

Digital Media

project_wireframes

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

Digital Media

WireframesDo not Represent aesthetics

Contain graphic elements

Convey the brand

Digital Media

Know what you are doing…

Digital Media

WireframeSketches Quick

Experimental

For feedback

Digital Media

WireframeContent Content eval

Good for Flows

Digital Media

WireframeHigh fidelity Detailed Wires

Describe content

Describe behavior

Understandable without any help

Digital Media

WireframeAnnotated wireflows

Digital Media

WireframeHigh definition components wireframes

Digital Media

Wireframehttp://www.wireframeshowcase.com/

Digital Media

Wireframe -> Live

Digital Media

DreamWeaver

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.