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.
Top Related