SlideShare uma empresa Scribd logo
1 de 30
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 Conventions
           Pages might become inaccessible

       Optimize assets
           Web standard image and video format / compression

       Defining editable areas for templates
           Flexible layout for upcoming content



Digital Media
Information Structure
      What are we saying..
       Identifying sources of information
       Organizing data according to objectives

       Presenting clear information




Digital Media
Site Structure
      How 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 conventions
      Accessibility
       No special characters
       Dash or Underscore

       In depth files naming directories in regards to certain topics.




Digital Media
Optimize Assets
      Managing your information
       PSD to HTML tips and tricks
       Linked script compression

       Identifying Recurring content




Digital Media
Define editable areas
      Focus 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.”
        Kristin Wemmer




DigitalMedia
          http://www.smashingmagazine.com/2010/03/17/starting-out-organized-website-content-planning-the-right-way/
project_
           architecture
                DIGITAL MEDIA | 2012




Digital Media
Information Architecture
      Content 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 Architecture
      Content 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 Architecture
      Content Inventory
       Is the way to understand the structure and contents of the
           website and the purpose of each page




Digital Media
Information Architecture
      Content
      Content defines the
      structure that helps to
      establish a sitemap
      to visualize
      navigation systems




Digital Media
Information Architecture
      Sitemap
      Content defines the
      structure that helps to
      establish a sitemap
      to visualize
      navigation systems

      Establish relations
      from one content to
      another




Digital Media
Information Architecture
      Components
      Every page defined from
      the sitemap is built from   Video
      components that display
      content: text, images or
      interactive elements.




Digital Media
Information Architecture
      Components
      Every page defined from
      the sitemap is built from   Video
      components that display
      content: text, images or
      interactive elements.




Digital Media
project_
           wireframes
                DIGITAL MEDIA | 2012




Digital Media
Wireframes
      Helps to
       Gain understanding
       Guideline for designers and developers

       Evaluate functionality

       Identify interaction, display content
       know what you are doing




Digital Media
Wireframes
      Do not
       Represent aesthetics
       Contain graphic elements

       Convey the brand




Digital Media
Know what you are doing…




Digital Media
Wireframe
      Sketches
       Quick

       Experimental

       For feedback




Digital Media
Wireframe
      Content
       Content eval

       Good for Flows




Digital Media
Wireframe
      High fidelity
       Detailed Wires

       Describe content

       Describe behavior

       Understandable
           without any help




Digital Media
Wireframe
      Annotated wireflows




Digital Media
Wireframe
      High
      definition
      components
      wireframes




Digital Media
Wireframe
      http://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.



Digital Media

Mais conteúdo relacionado

Destaque

Performance task i̇n english
Performance task i̇n englishPerformance task i̇n english
Performance task i̇n englishMustafa Boztürk
 
Web Technologies - IED Barcelona - Digital Media 2012
Web Technologies - IED Barcelona - Digital Media 2012Web Technologies - IED Barcelona - Digital Media 2012
Web Technologies - IED Barcelona - Digital Media 2012Mario Esposito
 
Interaction - IED Barcelona - Digital Media 2012
Interaction - IED Barcelona - Digital Media 2012Interaction - IED Barcelona - Digital Media 2012
Interaction - IED Barcelona - Digital Media 2012Mario Esposito
 
Web App Prototypes with Google App Engine
Web App Prototypes with Google App EngineWeb App Prototypes with Google App Engine
Web App Prototypes with Google App EngineVlad Filippov
 
Performance task i̇n english
Performance task i̇n englishPerformance task i̇n english
Performance task i̇n englishMustafa Boztürk
 
CONOCIENDO MI UNIVERSIDAD POPULAR DEL CESAR
CONOCIENDO MI UNIVERSIDAD POPULAR DEL CESARCONOCIENDO MI UNIVERSIDAD POPULAR DEL CESAR
CONOCIENDO MI UNIVERSIDAD POPULAR DEL CESARCarmen Pacheco
 
Insights Overview 2012
Insights Overview 2012Insights Overview 2012
Insights Overview 2012vawilcox
 
Information Architecture: Get Your Blue Prints in Order
Information Architecture: Get Your Blue Prints in OrderInformation Architecture: Get Your Blue Prints in Order
Information Architecture: Get Your Blue Prints in OrderBusinessOnline
 
Architecture form space order
Architecture form space orderArchitecture form space order
Architecture form space orderHamdija Velagic
 
Lm household services-grade_9_3rd and 4th quarter
Lm household services-grade_9_3rd and 4th quarterLm household services-grade_9_3rd and 4th quarter
Lm household services-grade_9_3rd and 4th quarterJomari Jamito
 

Destaque (13)

Performance task i̇n english
Performance task i̇n englishPerformance task i̇n english
Performance task i̇n english
 
Web Technologies - IED Barcelona - Digital Media 2012
Web Technologies - IED Barcelona - Digital Media 2012Web Technologies - IED Barcelona - Digital Media 2012
Web Technologies - IED Barcelona - Digital Media 2012
 
Tgfjftjfj
TgfjftjfjTgfjftjfj
Tgfjftjfj
 
Interaction - IED Barcelona - Digital Media 2012
Interaction - IED Barcelona - Digital Media 2012Interaction - IED Barcelona - Digital Media 2012
Interaction - IED Barcelona - Digital Media 2012
 
Web App Prototypes with Google App Engine
Web App Prototypes with Google App EngineWeb App Prototypes with Google App Engine
Web App Prototypes with Google App Engine
 
Performance task i̇n english
Performance task i̇n englishPerformance task i̇n english
Performance task i̇n english
 
06.02.2012
06.02.201206.02.2012
06.02.2012
 
CONOCIENDO MI UNIVERSIDAD POPULAR DEL CESAR
CONOCIENDO MI UNIVERSIDAD POPULAR DEL CESARCONOCIENDO MI UNIVERSIDAD POPULAR DEL CESAR
CONOCIENDO MI UNIVERSIDAD POPULAR DEL CESAR
 
Insights Overview 2012
Insights Overview 2012Insights Overview 2012
Insights Overview 2012
 
Information Architecture: Get Your Blue Prints in Order
Information Architecture: Get Your Blue Prints in OrderInformation Architecture: Get Your Blue Prints in Order
Information Architecture: Get Your Blue Prints in Order
 
ทฤษฎีระบบ
ทฤษฎีระบบทฤษฎีระบบ
ทฤษฎีระบบ
 
Architecture form space order
Architecture form space orderArchitecture form space order
Architecture form space order
 
Lm household services-grade_9_3rd and 4th quarter
Lm household services-grade_9_3rd and 4th quarterLm household services-grade_9_3rd and 4th quarter
Lm household services-grade_9_3rd and 4th quarter
 

Semelhante a Workflow - IED Barcelona - Digital Media 2012

The future of the CMS
The future of the CMSThe future of the CMS
The future of the CMSInVision App
 
Dave Kinsella's WCS London
Dave Kinsella's WCS LondonDave Kinsella's WCS London
Dave Kinsella's WCS LondonInBlackandWhite
 
Four Kitchens Presents: Future of the CMS
Four Kitchens Presents: Future of the CMSFour Kitchens Presents: Future of the CMS
Four Kitchens Presents: Future of the CMSFour Kitchens
 
Team 3 Web 2.0 Web 3.0 V2 Linkdin
Team 3 Web 2.0 Web 3.0 V2 LinkdinTeam 3 Web 2.0 Web 3.0 V2 Linkdin
Team 3 Web 2.0 Web 3.0 V2 Linkdinanirvansen
 
Gerry Dimnik's RCM Case Study-DBS 2011
Gerry Dimnik's RCM Case Study-DBS 2011Gerry Dimnik's RCM Case Study-DBS 2011
Gerry Dimnik's RCM Case Study-DBS 2011Myplanet Digital
 
TERMINALFOUR t44u 2009 - University of St Andrews Case Study
TERMINALFOUR t44u 2009 - University of St Andrews Case StudyTERMINALFOUR t44u 2009 - University of St Andrews Case Study
TERMINALFOUR t44u 2009 - University of St Andrews Case StudyTerminalfour
 
Web 3.0: The Upcoming Revolution
Web 3.0: The Upcoming RevolutionWeb 3.0: The Upcoming Revolution
Web 3.0: The Upcoming RevolutionNitin Godawat
 
Web Design Solutions
Web Design Solutions Web Design Solutions
Web Design Solutions APARNA SANAKA
 
Branding Wont Fix Crappy Content - SharePoint User Experience Discussion
Branding Wont Fix Crappy Content - SharePoint User Experience DiscussionBranding Wont Fix Crappy Content - SharePoint User Experience Discussion
Branding Wont Fix Crappy Content - SharePoint User Experience DiscussionMarcy Kellar
 
Amplexor 2014-06-26-the drupal enterprise lifecycle
Amplexor 2014-06-26-the drupal enterprise lifecycleAmplexor 2014-06-26-the drupal enterprise lifecycle
Amplexor 2014-06-26-the drupal enterprise lifecycleAmplexor
 
Technical Communication and Web Content Strategy
Technical Communication and Web Content StrategyTechnical Communication and Web Content Strategy
Technical Communication and Web Content Strategydaniel spillers
 
What is Wordpress | What is HTML | Wordpress vs HTML
What is Wordpress | What is HTML | Wordpress vs HTMLWhat is Wordpress | What is HTML | Wordpress vs HTML
What is Wordpress | What is HTML | Wordpress vs HTMLdevbhargav1
 
Web content management
Web content managementWeb content management
Web content managementsmtcd
 
Web content management
Web content managementWeb content management
Web content managementSmita Chandra
 
What is Wordpress | What is HTML | Wordpress vs HTML
What is Wordpress | What is HTML | Wordpress vs HTMLWhat is Wordpress | What is HTML | Wordpress vs HTML
What is Wordpress | What is HTML | Wordpress vs HTMLdevbhargav1
 
What is Wordpress | What is HTML | Wordpress vs HTML
What is Wordpress | What is HTML | Wordpress vs HTMLWhat is Wordpress | What is HTML | Wordpress vs HTML
What is Wordpress | What is HTML | Wordpress vs HTMLdevbhargav1
 

Semelhante a Workflow - IED Barcelona - Digital Media 2012 (20)

The future of the CMS
The future of the CMSThe future of the CMS
The future of the CMS
 
Dave Kinsella's WCS London
Dave Kinsella's WCS LondonDave Kinsella's WCS London
Dave Kinsella's WCS London
 
Four Kitchens Presents: Future of the CMS
Four Kitchens Presents: Future of the CMSFour Kitchens Presents: Future of the CMS
Four Kitchens Presents: Future of the CMS
 
Team 3 Web 2.0 Web 3.0 V2 Linkdin
Team 3 Web 2.0 Web 3.0 V2 LinkdinTeam 3 Web 2.0 Web 3.0 V2 Linkdin
Team 3 Web 2.0 Web 3.0 V2 Linkdin
 
Gerry Dimnik's RCM Case Study-DBS 2011
Gerry Dimnik's RCM Case Study-DBS 2011Gerry Dimnik's RCM Case Study-DBS 2011
Gerry Dimnik's RCM Case Study-DBS 2011
 
TERMINALFOUR t44u 2009 - University of St Andrews Case Study
TERMINALFOUR t44u 2009 - University of St Andrews Case StudyTERMINALFOUR t44u 2009 - University of St Andrews Case Study
TERMINALFOUR t44u 2009 - University of St Andrews Case Study
 
Web 3.0: The Upcoming Revolution
Web 3.0: The Upcoming RevolutionWeb 3.0: The Upcoming Revolution
Web 3.0: The Upcoming Revolution
 
Web Design Solutions
Web Design Solutions Web Design Solutions
Web Design Solutions
 
Features
FeaturesFeatures
Features
 
Yellow pages based_business_networking_portal
Yellow pages based_business_networking_portalYellow pages based_business_networking_portal
Yellow pages based_business_networking_portal
 
Branding Wont Fix Crappy Content - SharePoint User Experience Discussion
Branding Wont Fix Crappy Content - SharePoint User Experience DiscussionBranding Wont Fix Crappy Content - SharePoint User Experience Discussion
Branding Wont Fix Crappy Content - SharePoint User Experience Discussion
 
Amplexor 2014-06-26-the drupal enterprise lifecycle
Amplexor 2014-06-26-the drupal enterprise lifecycleAmplexor 2014-06-26-the drupal enterprise lifecycle
Amplexor 2014-06-26-the drupal enterprise lifecycle
 
Technical Communication and Web Content Strategy
Technical Communication and Web Content StrategyTechnical Communication and Web Content Strategy
Technical Communication and Web Content Strategy
 
What is Wordpress | What is HTML | Wordpress vs HTML
What is Wordpress | What is HTML | Wordpress vs HTMLWhat is Wordpress | What is HTML | Wordpress vs HTML
What is Wordpress | What is HTML | Wordpress vs HTML
 
Web content management
Web content managementWeb content management
Web content management
 
Web content management
Web content managementWeb content management
Web content management
 
Web design
Web designWeb design
Web design
 
Zipadi overview
Zipadi overviewZipadi overview
Zipadi overview
 
What is Wordpress | What is HTML | Wordpress vs HTML
What is Wordpress | What is HTML | Wordpress vs HTMLWhat is Wordpress | What is HTML | Wordpress vs HTML
What is Wordpress | What is HTML | Wordpress vs HTML
 
What is Wordpress | What is HTML | Wordpress vs HTML
What is Wordpress | What is HTML | Wordpress vs HTMLWhat is Wordpress | What is HTML | Wordpress vs HTML
What is Wordpress | What is HTML | Wordpress vs HTML
 

Último

Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine CharlottePulte
 
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfgroup_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfneelspinoy
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfLucyBonelli
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyChristopher Totten
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...Rishabh Aryan
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024digital learning point
 
cda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptcda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptMaryamAfzal41
 
General Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptxGeneral Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptxmarckustrevion
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppNadaMohammed714321
 
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIyuj
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxKevinYaelJimnezSanti
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptJIT KUMAR GUPTA
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书zdzoqco
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designersPixeldarts
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppNadaMohammed714321
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfAayushChavan5
 
Iconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing servicesIconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing servicesIconic global solution
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssNadaMohammed714321
 
world health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbworld health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbpreetirao780
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Rndexperts
 

Último (20)

Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine
 
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfgroup_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdf
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenology
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024
 
cda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptcda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis ppt
 
General Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptxGeneral Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptx
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 ppppppppppppppp
 
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AI
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptx
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 ppppppppppppppp
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdf
 
Iconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing servicesIconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing services
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssss
 
world health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbworld health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbb
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
 

Workflow - IED Barcelona - Digital Media 2012

  • 1. project_ workflow DIGITAL MEDIA | 2012 Digital Media
  • 2. Preparing your site  Information Structure Organize the site content and navigation hierarchy  Site Structure Organize the site files and assets  Naming Conventions Pages might become inaccessible  Optimize assets Web standard image and video format / compression  Defining editable areas for templates Flexible layout for upcoming content Digital Media
  • 3. Information Structure What are we saying..  Identifying sources of information  Organizing data according to objectives  Presenting clear information Digital Media
  • 4. Site Structure How 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
  • 5. Naming conventions Accessibility  No special characters  Dash or Underscore  In depth files naming directories in regards to certain topics. Digital Media
  • 6. Optimize Assets Managing your information  PSD to HTML tips and tricks  Linked script compression  Identifying Recurring content Digital Media
  • 7. Define editable areas Focus on content  Establishing template patterns  Nesting templates Digital Media
  • 9. “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.” Kristin Wemmer DigitalMedia http://www.smashingmagazine.com/2010/03/17/starting-out-organized-website-content-planning-the-right-way/
  • 10. project_ architecture DIGITAL MEDIA | 2012 Digital Media
  • 11. Information Architecture Content 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
  • 12. Information Architecture Content 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
  • 13. Information Architecture Content Inventory  Is the way to understand the structure and contents of the website and the purpose of each page Digital Media
  • 14. Information Architecture Content Content defines the structure that helps to establish a sitemap to visualize navigation systems Digital Media
  • 15. Information Architecture Sitemap Content defines the structure that helps to establish a sitemap to visualize navigation systems Establish relations from one content to another Digital Media
  • 16. Information Architecture Components Every page defined from the sitemap is built from Video components that display content: text, images or interactive elements. Digital Media
  • 17. Information Architecture Components Every page defined from the sitemap is built from Video components that display content: text, images or interactive elements. Digital Media
  • 18. project_ wireframes DIGITAL MEDIA | 2012 Digital Media
  • 19. Wireframes Helps to  Gain understanding  Guideline for designers and developers  Evaluate functionality  Identify interaction, display content  know what you are doing Digital Media
  • 20. Wireframes Do not  Represent aesthetics  Contain graphic elements  Convey the brand Digital Media
  • 21. Know what you are doing… Digital Media
  • 22. Wireframe Sketches  Quick  Experimental  For feedback Digital Media
  • 23. Wireframe Content  Content eval  Good for Flows Digital Media
  • 24. Wireframe High fidelity  Detailed Wires  Describe content  Describe behavior  Understandable without any help Digital Media
  • 25. Wireframe Annotated wireflows Digital Media
  • 26. Wireframe High definition components wireframes Digital Media
  • 27. Wireframe http://www.wireframeshowcase.com/ Digital Media
  • 30. 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. Digital Media

Notas do Editor

  1. It should be noted that all web technologies, apart from HTML, have some limitations in terms of their scope and compatibility. What is meant by this is that these technologies will only work under a certain set of circumstances. widespread and in common use. Most modern, major Browsers can deal quite happily with them all.
  2. File name conventions, again, are the way that you name your web pages so that search engines can use it as a method of determining what your web page is about. It’s important that you use these names wisely and not abuse them.Consider this, you have a web page about search engine tools. If you didn’t use a standard file naming convention you may name it webpage1.htm. A search engine could still crawl the web page to determine the subject matter but they give relevancy to the file names.A better way to name the page would be to name it search-engine-tools.com. This is specifically telling the search engines that this page is related to ‘search engine tools’. This is valuable because at this point search engines will use this data when determining the subject matter of your web page.
  3. File name conventions, again, are the way that you name your web pages so that search engines can use it as a method of determining what your web page is about. It’s important that you use these names wisely and not abuse them.Consider this, you have a web page about search engine tools. If you didn’t use a standard file naming convention you may name it webpage1.htm. A search engine could still crawl the web page to determine the subject matter but they give relevancy to the file names.A better way to name the page would be to name it search-engine-tools.com. This is specifically telling the search engines that this page is related to ‘search engine tools’. This is valuable because at this point search engines will use this data when determining the subject matter of your web page.
  4. File name conventions, again, are the way that you name your web pages so that search engines can use it as a method of determining what your web page is about. It’s important that you use these names wisely and not abuse them.Consider this, you have a web page about search engine tools. If you didn’t use a standard file naming convention you may name it webpage1.htm. A search engine could still crawl the web page to determine the subject matter but they give relevancy to the file names.A better way to name the page would be to name it search-engine-tools.com. This is specifically telling the search engines that this page is related to ‘search engine tools’. This is valuable because at this point search engines will use this data when determining the subject matter of your web page.
  5. If you want to make any sort of Web site
  6. If you want to make any sort of Web site
  7. It should be noted that all web technologies, apart from HTML, have some limitations in terms of their scope and compatibility. What is meant by this is that these technologies will only work under a certain set of circumstances. widespread and in common use. Most modern, major Browsers can deal quite happily with them all.
  8. File name conventions, again, are the way that you name your web pages so that search engines can use it as a method of determining what your web page is about. It’s important that you use these names wisely and not abuse them.Consider this, you have a web page about search engine tools. If you didn’t use a standard file naming convention you may name it webpage1.htm. A search engine could still crawl the web page to determine the subject matter but they give relevancy to the file names.A better way to name the page would be to name it search-engine-tools.com. This is specifically telling the search engines that this page is related to ‘search engine tools’. This is valuable because at this point search engines will use this data when determining the subject matter of your web page.
  9. File name conventions, again, are the way that you name your web pages so that search engines can use it as a method of determining what your web page is about. It’s important that you use these names wisely and not abuse them.Consider this, you have a web page about search engine tools. If you didn’t use a standard file naming convention you may name it webpage1.htm. A search engine could still crawl the web page to determine the subject matter but they give relevancy to the file names.A better way to name the page would be to name it search-engine-tools.com. This is specifically telling the search engines that this page is related to ‘search engine tools’. This is valuable because at this point search engines will use this data when determining the subject matter of your web page.
  10. File name conventions, again, are the way that you name your web pages so that search engines can use it as a method of determining what your web page is about. It’s important that you use these names wisely and not abuse them.Consider this, you have a web page about search engine tools. If you didn’t use a standard file naming convention you may name it webpage1.htm. A search engine could still crawl the web page to determine the subject matter but they give relevancy to the file names.A better way to name the page would be to name it search-engine-tools.com. This is specifically telling the search engines that this page is related to ‘search engine tools’. This is valuable because at this point search engines will use this data when determining the subject matter of your web page.
  11. File name conventions, again, are the way that you name your web pages so that search engines can use it as a method of determining what your web page is about. It’s important that you use these names wisely and not abuse them.Consider this, you have a web page about search engine tools. If you didn’t use a standard file naming convention you may name it webpage1.htm. A search engine could still crawl the web page to determine the subject matter but they give relevancy to the file names.A better way to name the page would be to name it search-engine-tools.com. This is specifically telling the search engines that this page is related to ‘search engine tools’. This is valuable because at this point search engines will use this data when determining the subject matter of your web page.
  12. File name conventions, again, are the way that you name your web pages so that search engines can use it as a method of determining what your web page is about. It’s important that you use these names wisely and not abuse them.Consider this, you have a web page about search engine tools. If you didn’t use a standard file naming convention you may name it webpage1.htm. A search engine could still crawl the web page to determine the subject matter but they give relevancy to the file names.A better way to name the page would be to name it search-engine-tools.com. This is specifically telling the search engines that this page is related to ‘search engine tools’. This is valuable because at this point search engines will use this data when determining the subject matter of your web page.
  13. File name conventions, again, are the way that you name your web pages so that search engines can use it as a method of determining what your web page is about. It’s important that you use these names wisely and not abuse them.Consider this, you have a web page about search engine tools. If you didn’t use a standard file naming convention you may name it webpage1.htm. A search engine could still crawl the web page to determine the subject matter but they give relevancy to the file names.A better way to name the page would be to name it search-engine-tools.com. This is specifically telling the search engines that this page is related to ‘search engine tools’. This is valuable because at this point search engines will use this data when determining the subject matter of your web page.
  14. File name conventions, again, are the way that you name your web pages so that search engines can use it as a method of determining what your web page is about. It’s important that you use these names wisely and not abuse them.Consider this, you have a web page about search engine tools. If you didn’t use a standard file naming convention you may name it webpage1.htm. A search engine could still crawl the web page to determine the subject matter but they give relevancy to the file names.A better way to name the page would be to name it search-engine-tools.com. This is specifically telling the search engines that this page is related to ‘search engine tools’. This is valuable because at this point search engines will use this data when determining the subject matter of your web page.
  15. It should be noted that all web technologies, apart from HTML, have some limitations in terms of their scope and compatibility. What is meant by this is that these technologies will only work under a certain set of circumstances. widespread and in common use. Most modern, major Browsers can deal quite happily with them all.
  16. File name conventions, again, are the way that you name your web pages so that search engines can use it as a method of determining what your web page is about. It’s important that you use these names wisely and not abuse them.Consider this, you have a web page about search engine tools. If you didn’t use a standard file naming convention you may name it webpage1.htm. A search engine could still crawl the web page to determine the subject matter but they give relevancy to the file names.A better way to name the page would be to name it search-engine-tools.com. This is specifically telling the search engines that this page is related to ‘search engine tools’. This is valuable because at this point search engines will use this data when determining the subject matter of your web page.
  17. File name conventions, again, are the way that you name your web pages so that search engines can use it as a method of determining what your web page is about. It’s important that you use these names wisely and not abuse them.Consider this, you have a web page about search engine tools. If you didn’t use a standard file naming convention you may name it webpage1.htm. A search engine could still crawl the web page to determine the subject matter but they give relevancy to the file names.A better way to name the page would be to name it search-engine-tools.com. This is specifically telling the search engines that this page is related to ‘search engine tools’. This is valuable because at this point search engines will use this data when determining the subject matter of your web page.
  18. If you want to make any sort of Web site
  19. File name conventions, again, are the way that you name your web pages so that search engines can use it as a method of determining what your web page is about. It’s important that you use these names wisely and not abuse them.Consider this, you have a web page about search engine tools. If you didn’t use a standard file naming convention you may name it webpage1.htm. A search engine could still crawl the web page to determine the subject matter but they give relevancy to the file names.A better way to name the page would be to name it search-engine-tools.com. This is specifically telling the search engines that this page is related to ‘search engine tools’. This is valuable because at this point search engines will use this data when determining the subject matter of your web page.
  20. File name conventions, again, are the way that you name your web pages so that search engines can use it as a method of determining what your web page is about. It’s important that you use these names wisely and not abuse them.Consider this, you have a web page about search engine tools. If you didn’t use a standard file naming convention you may name it webpage1.htm. A search engine could still crawl the web page to determine the subject matter but they give relevancy to the file names.A better way to name the page would be to name it search-engine-tools.com. This is specifically telling the search engines that this page is related to ‘search engine tools’. This is valuable because at this point search engines will use this data when determining the subject matter of your web page.
  21. File name conventions, again, are the way that you name your web pages so that search engines can use it as a method of determining what your web page is about. It’s important that you use these names wisely and not abuse them.Consider this, you have a web page about search engine tools. If you didn’t use a standard file naming convention you may name it webpage1.htm. A search engine could still crawl the web page to determine the subject matter but they give relevancy to the file names.A better way to name the page would be to name it search-engine-tools.com. This is specifically telling the search engines that this page is related to ‘search engine tools’. This is valuable because at this point search engines will use this data when determining the subject matter of your web page.
  22. File name conventions, again, are the way that you name your web pages so that search engines can use it as a method of determining what your web page is about. It’s important that you use these names wisely and not abuse them.Consider this, you have a web page about search engine tools. If you didn’t use a standard file naming convention you may name it webpage1.htm. A search engine could still crawl the web page to determine the subject matter but they give relevancy to the file names.A better way to name the page would be to name it search-engine-tools.com. This is specifically telling the search engines that this page is related to ‘search engine tools’. This is valuable because at this point search engines will use this data when determining the subject matter of your web page.
  23. File name conventions, again, are the way that you name your web pages so that search engines can use it as a method of determining what your web page is about. It’s important that you use these names wisely and not abuse them.Consider this, you have a web page about search engine tools. If you didn’t use a standard file naming convention you may name it webpage1.htm. A search engine could still crawl the web page to determine the subject matter but they give relevancy to the file names.A better way to name the page would be to name it search-engine-tools.com. This is specifically telling the search engines that this page is related to ‘search engine tools’. This is valuable because at this point search engines will use this data when determining the subject matter of your web page.
  24. File name conventions, again, are the way that you name your web pages so that search engines can use it as a method of determining what your web page is about. It’s important that you use these names wisely and not abuse them.Consider this, you have a web page about search engine tools. If you didn’t use a standard file naming convention you may name it webpage1.htm. A search engine could still crawl the web page to determine the subject matter but they give relevancy to the file names.A better way to name the page would be to name it search-engine-tools.com. This is specifically telling the search engines that this page is related to ‘search engine tools’. This is valuable because at this point search engines will use this data when determining the subject matter of your web page.
  25. File name conventions, again, are the way that you name your web pages so that search engines can use it as a method of determining what your web page is about. It’s important that you use these names wisely and not abuse them.Consider this, you have a web page about search engine tools. If you didn’t use a standard file naming convention you may name it webpage1.htm. A search engine could still crawl the web page to determine the subject matter but they give relevancy to the file names.A better way to name the page would be to name it search-engine-tools.com. This is specifically telling the search engines that this page is related to ‘search engine tools’. This is valuable because at this point search engines will use this data when determining the subject matter of your web page.
  26. If you want to make any sort of Web site