O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Digital Content for Business

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Próximos SlideShares
Introduction to WordPress 2016
Introduction to WordPress 2016
Carregando em…3
×

Confira estes a seguir

1 de 71 Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Quem viu também gostou (19)

Anúncio

Semelhante a Digital Content for Business (20)

Mais de Akarawuth Tamrareang (20)

Anúncio

Mais recentes (20)

Digital Content for Business

  1. 1. OFFLINE toONLINE BEFORE YOU BUILD A WEBSITE DigitalContentforBusiness http://slideshare.net/akarawuth
  2. 2. 2 อัครวุฒิ ตำราเรียง
 Akarawuth Tamrareang (JoomlaCorner) akarawuth@marvelic.co.th twitter: @joomlacorner www.marvelic.co.th www.akarawuth.com Tel : 02 717 1120-1 - อุปนายกสมาคมศึกษาและพัฒนาโอเพ่นซอร์ส (OSEDA.or.th)
 - กรรมการผู้จัดการ Marvelic Engine Co.,Ltd. www.marvelic.co.th - Joomla! Bug Squad : joomla.org
 - Founder JoomlaCorner.com - กรรมการควบคุมจริยธรรม สมาคมผู้ดูแลเว็บไทย - อดีตกรรมการบริหาร OpenSource Matters Inc.
 (Joomla Project) - ผู้อำนวยการฝ่ายเทคโนโลยีสารสนเทศ 
 สมาคมอาสาสมัครบรรเทาสาธารณภัยแห่งประเทศไทย - ที่ปรึกษาสมาคมการดับเพลิงและช่วยชีวิต 
 About Me
  3. 3. BEFOREYOU BUILDAWEBSITE What questions should be answered before you build a website?
  4. 4. AWEBSITELIFECYCLE 4 RESEARCH and research and research! CONTENT user flow, page wireframe DESIGN page, layout design SUPPORT BUY DOMAIN AND HOSTING www.youridea.com BUILD CODE Dessert Tiramisu Sweet Cotton START IDEA start with your idea COLOR SCHEMA color schema, fonts, backgrounds
  5. 5. THEIDEA
  6. 6. IHAVETHETOOLS Start Building
  7. 7. IHAVETHETOOLS Start Building STOP
  8. 8. THINK
 ABOUTIT 8 You have the tools and idea
  9. 9. WOULD
 …YOU 9
  10. 10. A PLAN
  11. 11. 11 LISTWHAT
 YOUKNOW First Step 1. We want a website
 2. We have a domain
 3. We have hosting
 4. We need help
  12. 12. 12 RESEARCH RESEARCH and
 RESEARCH and
 RESEARCH and
 RESEARCH and
 RESEARCH and
  13. 13. WhyDoBusinessesNeedaWebsite? Pros / Cons 13
  14. 14. YourWebsite= yourstorefrontonInternet Customersrelyonsearchenginesanddirectories tofindbusiness Toshowupintheirsearch,youneedtohavea website 7.6billionsearches/month(87%ofwhichresult inaphonecallorvisit) 14 AppearinSearchResults
  15. 15. 15 ActsasaDigitalBusinessCard
  16. 16. YOURAUDIENCE 16 who and what . . .
  17. 17. PEOPLELOOKATYOURWEBSITEFOR? 17 information / directions / entertainment
  18. 18. THINKABOUTSEARCH 18 information / directions / entertainment
  19. 19. 19 What you want on your website? What you don’t want on your website? Who is your target audience? Why are they viewing your site or business? How are they going to search for your business or information? NOW YOU
 HAVE
  20. 20. TYPESOFPAGES 20 STATIC Basic information that never changes DYNAMIC Contact, poll or form information where you are collection information from the user BLOG News or information that is current or new on the site daily, weekly or even monthly
  21. 21. HOWWILLYOU
 DESIGNYOUR
 MENUS 21 MAKE YOUR SITE EASY TO NAVIGATE Provide clearly labeled navigation in the same location on each page
 
 Most common - across top or down left side
  22. 22. YOURNAVS/
 MENUS 22 CONSIDER Navigation Bars
 Breadcrumb Navigation
 Using Graphic for Navigation
 Dynamic Navigation
 Site Map
 Site Search Feature
 Mobile Navigation
 Tour Elements
  23. 23. WEBSITE
 NAVIGATION 23 HIERARCHICAL Too Shallow
 Too Deep
 LINEAR
 RANDOM
  24. 24. HIERARCHICAL
 ORGANIZATION 24 A clearly defined home page
 
 Navigation links to major site sections
 
 Often used for commercial and corporate websites

  25. 25. TOO
 SHALLOW 25 Be careful the page navigation is not too shallow
 
 They all have the same weight
 
 Too many immediate choices
 
 Confusing and less usable website
  26. 26. TOO
 DEEP 26 Be careful that the page organization is not too deep
 
 This results in many “Click” need ti drill down to the needed page
 
 User Interface “Three Click Rule”
 A webpage visitor should be able to get from any page on your site to any other page on your site with a maximum of three hyperlinks

  27. 27. LINEAR
 ORGANIZATION 27 A series of class pages that provide a tutorial, tour, or presentation
 
 Sequential viewing is required
  28. 28. RANDOM
 ORGANIZATION 28 Usually there is no clear path through the site
 
 May be used with artistic or concept sites
 
 Not typically used for commercial sites nav navII nav navnav nav1b navI navBnav1 navA home
  29. 29. PLANNINGUSERFLOW 29
  30. 30. 30 Your navigations (menu) and the hierarchy of your website.
 
 Do you need sidebar menu?
 
 Footer menu?
 
 Remember to have a 
 Terms of Service page and Privacy page
 You may even need a DMCA page if you material that is copyright
 
 freepricacypolicy.com
 Plugin wordpress.org/plugins/auto-term-of-service- and-privacy0policy/ NOW YOU
 HAVE THE
 PAGES . .
  31. 31. 31 FIXEDLAYOUT PAGE LAYOUT DESIGN Rigid Design
 Fixed-width often at left margin More appealing if fixed box of content is centered CENTEREDBOX
  32. 32. 32 FLUIDLAYOUT PAGE LAYOUT DESIGN Liquid Design
 Expands to fill the browser at all 
 resolutions Page content typically centered
 and often configured with a 
 percentage width such as 90%-100% RESPONSIVE
  33. 33. WEBPAGEDESIGNSCREENRESOLUTION Test at various screen resolutions measurements of devices are in pixels
 
 Most widely used : 1024x768 / 1366x768 / 1280x800
 Tablets : 768x1024
 Phone: 320x768
 
 72pixels / inch
 
 
 33 Design to look good at various screen resolutions 
 
 Centered page content
 Set to either a fixed or percentage width
  34. 34. RESPONSIVE
 DESIGN
  35. 35. LAYOUT
 DESIGN 35
  36. 36. NOWYOUHAVE
 THELAYOUT
 FOR… 36 You know the pixel width and height of…
 
 All view ports (Mobile, Tablet and Desktop)
 
 Layouts for the pages on your website
 Home page template
 Full width template
 Sidebar template
 Blog template
 Post template
 

  37. 37. WHOAREYOUR
 DESIGNING
 FOR… 37 Yourself
 
 Management
 
 CEO
 
 Target Consumers
  38. 38. DESIGNFORYOURTARGETAUDIENCE 38
  39. 39. COLORS 39 Bright colors for younger children Neutral colors for everyone Dark colors for your adults White and larger for senior adults
  40. 40. COLORSAREIMPORTANT Understand contrast on computer is very different than print 40
  41. 41. DESIGN
 STYLES 41 styletil.es
 
 paletton.com
 
 color.adobe.com/create/color-wheel
  42. 42. VISUALDESIGN
 PRINCIPLES 42 Repetition
 Repeat visual elements throughout design
 
 Contrast
 Add visual excitement and draw attention
 
 Proximity
 Group related items
 
 Alignment
 Align elements to create visual unity
  43. 43. COLORSCHEMES&HEADING 43
  44. 44. FONTSELECTIONS 44
  45. 45. 45 Colors for your target audience
 
 Understanding of design principles
 
 Fonts and Size in point for h1 - h6
 
 Subtle patterns for background NOW YOU
 HAVE
  46. 46. CONTENT 46 Establishing the content before the build will help determine what pages you really need
 
 Use of images, videos and audio when appropriate, but not just because
 
 Pages should be filled with content that is relevant to your website
  47. 47. WRITINGFOR
 THEWEB 47 Avoid long blocks of text
 
 Use bullet points
 Easy 
 To
 Read
 
 Use headings and subheadings
 People scan content on the web
 
 Use short paragraphs
  48. 48. ONTHE
 WEB 48 Reliability and information
 Relevant information makes the credibility of the site
 Link to sites you know are established and provide more value to your site
 
 Ethical use of information
 You should own Photographs Copyright and the Web
  49. 49. DESIGN
 “EASYTOREAD”
 TEXT 49 Use common fonts
 Arial, Helvetica, Verdana, Times New Roman
 
 Use appropriate text size
 medium, 1em, 100%
 
 Use appropriate line length
 Between 50-75 characters is recommended
 
 Use strong contrast between text & background
 
 Use columns instead of wide areas of 
 horizontal text
  50. 50. MORECONTENT
 DESIGN
 CONSIDERATIONS 50 Carefully choose text in hyperlinks
 Avoid “click here”
 Hyperlink key words or phrases
 Do not hyperlink entire sentences
 
 Chek your spellin
 Check your spelling
  51. 51. UNIVERSAL
 DESIGN 51 “The design of products and environment to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design”
 
 The Center for Universal Design
 www.ncsu.edu/ncsu/design/cud

  52. 52. DESIGNFOR
 ACCESSIBILITY 52 Web Content Accessibility Guidelines 2.0 
 WCAG 2.0
 www.w3.org/TR/WCAG20/Overview
 www.w3.org/WAI/WCAG20/quickref
 
 Based on Four Principles (POUR)
 Perceivable : Content must be EASY TO SEE OR HEAR
 
 Operable : Interface components in the content must be OPERATE BY BOTH MOUSE AND KEYBOARD
 
 Understandable : Content and controls must be EASY TO READ AND WELL-ORGANIZED
 
 Robust : Content uses correct syntax and function on popular operating systems, browsers and assistive technologies
 
 http://webaim.org/articles/pour/
  53. 53. 53 You can adjust the pages to the content you have
 
 You own the content and assets
 
 You are creating content in an outline fashion for readability on the web
 
 You have a font selected for headers
 
 You are following accessibility guidelines NOW YOU
 HAVE CONTENT
  54. 54. 54 Let’s build a website
 Research competition
 Research your likes
 Research your target audience
 Gather content
 Design the user flow
 Design the layout of your content
 Pick colors, fonts and backgrounds
 Work from your plan
 Now you build
 Support and Review IN
 SUMMARY
  55. 55. 55 QUESTION?
  56. 56. 56 MYEXTRA RESOURCES Graphics & Multimedia
 Page load times
 Mobile design checklist
 Responsive web design

  57. 57. 57 USEOFGRAPHIC&
 MULTIMEDIA File size and dimension matter
 
 Provide for robust navigation
 
 Antialiased / Aliased text consideration
 
 Provide alternate text
 
 Use only necessary multimedia

  58. 58. 58 WEBPAGEDESIGN
 LOADTIME Watch the load time of your pages
 
 It should be 2-5 sec max
 
 Try to limit web page document and associated media to under 60K on the home page
  59. 59. 59 MOBILEDESIGN
 CHECKLIST Small screen size ~320-500 px
 Larger font point size
 Larger buttons for touch
 Bandwidth issues
 Single-column layout
 Maximize contrast
 Optimize images for mobile display
 Descriptive alternate text for images 
 Avoid display of non-essential content
  60. 60. 60 RESPONSIVE
 WEBDESIGN Ethan Marcotte, noted web developer
 www.alistapart.com/articles/responsive- web-design
 
 Progressively enhancing a web page for different viewing contexts (such as smartphones and tablets)
 
 Examples : mediaqueri.es
  61. 61. 61 WEBDESIGN
 BESTPRACTICES
 CHECKLIST Page layout
 Browser compatibility 
 Navigation
 Color and Graphics
 Multimedia
 Content Presentation
 Functionality 
 Accessibility
 
 terrymorris.net/bestpractices
  62. 62. 62 Website Examples
  63. 63. 63
  64. 64. 64
  65. 65. 65
  66. 66. 66
  67. 67. 67 Mobile Website Examples
  68. 68. 68
  69. 69. 69
  70. 70. TOOLS Start Building
  71. 71. j 71 QUESTION? http://slideshare.net/akarawuth

×