WordPress 3.5 Media Wireframes

WordPress 3.5 Media Wireframes

84e6e5080ee6af9e93464012cf084b8f?s=128

Daryl Koopersmith

July 30, 2012
Tweet

Transcript

  1. Media Wireframes WordPress 3.5

  2. Upload/Insert

  3. Upload/Insert CLICK

  4. Select Files Drop files here or Insert Media Select one

    or more media files: Sort by upload date  Show all file types  Search IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image...
  5. Select Files Drop files here or Insert Media Select one

    or more media files: Sort by upload date  Show all file types  Search IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... FIXED SCROLL INFINITE SCROLL Page Structure
  6. Select Files Drop files here or Insert Media Select one

    or more media files: Sort by upload date  Show all file types  Search IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image...
  7. Select Files Drop files here or Insert Media Select one

    or more media files: Sort by upload date  Show all file types  Search IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... Quickly caption your images.
  8. Select Files Drop files here or Insert Media Select one

    or more media files: Sort by upload date  Show all file types  Search IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... Quickly caption your images. Search, sort, and filter the media library.
  9. Select Files Drop files here or Insert Media Select one

    or more media files: Sort by upload date  Show all file types  Search IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... Insert HOVER
  10. Select Files Drop files here or Insert Media Select one

    or more media files: Sort by upload date  Show all file types  Search IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... Insert HOVER Access to the image editor.
  11. Select Files Drop files here or Insert Media Select one

    or more media files: Sort by upload date  Show all file types  Search IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... Insert HOVER Access to the image editor. Insert a media item into the post.
  12. Select Files Drop files here or Insert Media Select one

    or more media files: Sort by upload date  Show all file types  Search IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... Insert Insert into post IMAGE 1 image selected clear selection Add to gallery CLICK
  13. Select Files Drop files here or Insert Media Select one

    or more media files: Sort by upload date  Show all file types  Search IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... Insert Insert into post IMAGE 1 image selected clear selection Add to gallery CLICK Status bar slides down when an image is selected.
  14. Select Files Drop files here or Insert Media Select one

    or more media files: Sort by upload date  Show all file types  Search Create a new gallery Add to gallery 2 images selected IMAGE IMAGE IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... Insert IMAGE Describe this image... Insert clear selection IMAGE Describe this image... CLICK
  15. Select Files Drop files here or Insert Media Select one

    or more media files: Sort by upload date  Show all file types  Search Create a new gallery Add to gallery 2 images selected IMAGE IMAGE IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... Insert IMAGE Describe this image... Insert clear selection IMAGE Describe this image... CLICK Status reflects the current selection. Especially helpful when scrolling.
  16. Select Files Drop files here or Insert Media Select one

    or more media files: Sort by upload date  Show all file types  Search Create a new gallery Add to gallery 2 images selected IMAGE IMAGE IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... Insert IMAGE Describe this image... Insert clear selection IMAGE Describe this image... CLICK Status reflects the current selection. Especially helpful when scrolling. Actions are contextually based on the number of items selected.
  17. Select Files Drop files here or Insert Media Select one

    or more media files: Sort by upload date  Show all file types  Search Create a new gallery Add to gallery 2 images selected IMAGE IMAGE IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... Insert IMAGE Describe this image... Insert clear selection IMAGE Describe this image... CLICK
  18. Select Files Drop files here or Insert Media Select one

    or more media files: Sort by upload date  Show all file types  Search IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image...
  19. Select Files Drop files here or Insert Media Select one

    or more media files: Sort by upload date  Show all file types  Search IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... Let’s take a look at the uploader.
  20. Select Files Drop files here or Insert Media Select one

    or more media files: Sort by upload date  Show all file types  Search IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... files.png DRAG
  21. Select Files Drop files here or Insert Media Select one

    or more media files: Sort by upload date  Show all file types  Search Create a new gallery Add to gallery 3 images selected IMAGE IMAGE IMAGE IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... Insert IMAGE Describe this image... Insert IMAGE Describe this image... Insert clear selection IMAGE Describe this image... IMAGE Describe this image... IMAGE IMAGE IMAGE Uploading... Describe this image... Insert Describe this image... Insert Describe this image... Insert
  22. Select Files Drop files here or Insert Media Select one

    or more media files: Sort by upload date  Show all file types  Search Create a new gallery Add to gallery 3 images selected IMAGE IMAGE IMAGE IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... Insert IMAGE Describe this image... Insert IMAGE Describe this image... Insert clear selection IMAGE Describe this image... IMAGE Describe this image... IMAGE IMAGE IMAGE Uploading... Global progress bar. Describe this image... Insert Describe this image... Insert Describe this image... Insert
  23. Select Files Drop files here or Insert Media Select one

    or more media files: Sort by upload date  Show all file types  Search Create a new gallery Add to gallery 3 images selected IMAGE IMAGE IMAGE IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... Insert IMAGE Describe this image... Insert IMAGE Describe this image... Insert clear selection IMAGE Describe this image... IMAGE Describe this image... IMAGE IMAGE IMAGE Uploading... Global progress bar. Describe this image... Insert Describe this image... Insert Describe this image... Insert Uploaded files are automatically selected.
  24. Insert into post.

  25. Upload/Insert

  26. Upload/Insert CLICK

  27. Select Files Drop files here or Insert Media Select one

    or more media files: Sort by upload date  Show all file types  Search IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image...
  28. Select Files Drop files here or Insert Media Select one

    or more media files: Sort by upload date  Show all file types  Search IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... Insert HOVER
  29. Select Files Drop files here or Insert Media Select one

    or more media files: Sort by upload date  Show all file types  Search IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... Insert CLICK
  30. Insert into post Insert Media Describe this image... Caption Alt

    Text None Media File Attachment Page Link To Display Properties None Left Center Right Alignment Small – (150 × 90)   Size IMAGE Edit Image DSC_2910.png image/png Uploaded July 23, 2012 512 × 234 Return to Media Library
  31. Insert into post Insert Media Describe this image... Caption Alt

    Text None Media File Attachment Page Link To Display Properties None Left Center Right Alignment Small – (150 × 90)   Size IMAGE Edit Image DSC_2910.png image/png Uploaded July 23, 2012 512 × 234 Return to Media Library CLICK
  32. IMAGE Edit × Upload/Insert

  33. Edit an image.

  34. IMAGE Upload/Insert

  35. IMAGE Edit × Upload/Insert HOVER

  36. IMAGE Edit × Upload/Insert CLICK

  37. Save changes Edit Media IMAGE Edit Image DSC_2910.png image/png Uploaded

    July 23, 2012 512 × 234 Describe this image... Caption Alt Text None Media File Attachment Page Link To Display Properties None Left Center Right Alignment Small – (150 × 90)   Size
  38. Save changes Edit Media IMAGE Edit Image DSC_2910.png image/png Uploaded

    July 23, 2012 512 × 234 Describe this image... Caption Alt Text None Media File Attachment Page Link To Display Properties None Left Center Right Alignment Small – (150 × 90)   Size CLICK
  39. Save changes Edit Media IMAGE Edit Image DSC_2910.png image/png Uploaded

    July 23, 2012 512 × 234 Describe this image... Caption Alt Text None Media File Attachment Page Link To Display Properties None Left Center Right Alignment Small – (150 × 90)   Size CLICK None Left Center Right
  40. Upload/Insert IMAGE

  41. Upload an image.

  42. Upload/Insert

  43. Upload/Insert file.png DRAG

  44. IMAGE Edit × Upload/Insert Image is inserted with the previously

    used properties and automatically selected for easy editing. Edit ×
  45. IMAGE Edit × Upload/Insert

  46. Create a gallery.

  47. Upload/Insert

  48. Upload/Insert CLICK

  49. Select Files Drop files here or Insert Media Select one

    or more media files: Sort by upload date  Show all file types  Search IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image...
  50. Select Files Drop files here or Insert Media Select one

    or more media files: Sort by upload date  Show all file types  Search IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... Insert Insert into post IMAGE 1 image selected clear selection Add to gallery CLICK
  51. Select Files Drop files here or Insert Media Select one

    or more media files: Sort by upload date  Show all file types  Search Create a new gallery Add to gallery 2 images selected IMAGE IMAGE IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... Insert IMAGE Describe this image... Insert clear selection IMAGE Describe this image... CLICK
  52. Select Files Drop files here or Insert Media Select one

    or more media files: Sort by upload date  Show all file types  Search Create a new gallery Add to gallery 3 images selected IMAGE IMAGE IMAGE IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... Insert IMAGE Describe this image... Insert IMAGE Describe this image... Insert clear selection CLICK
  53. Select Files Drop files here or Insert Media Select one

    or more media files: Sort by upload date  Show all file types  Search Create a new gallery Add to gallery 4 images selected IMAGE IMAGE IMAGE clear selection IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... Insert IMAGE Describe this image... Insert IMAGE Describe this image... Insert IMAGE Describe this image... Insert CLICK
  54. Select Files Drop files here or Insert Media Select one

    or more media files: Sort by upload date  Show all file types  Search Create a new gallery Add to gallery 4 images selected IMAGE IMAGE IMAGE clear selection IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... Insert IMAGE Describe this image... Insert IMAGE Describe this image... Insert IMAGE Describe this image... Insert CLICK
  55. Select Files Drop files here or Insert Gallery 3 

    Columns None Media File Attachment Page Link To Gallery display properties: Arrange and caption your images: Arrange by custom  IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... Insert gallery into post Add images from media library Return to media library
  56. Select Files Drop files here or Insert Gallery 3 

    Columns None Media File Attachment Page Link To Gallery display properties: Arrange and caption your images: Arrange by custom  IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... Insert gallery into post Add images from media library Return to media library IMAGE Describe this image... × HOVER
  57. Select Files Drop files here or Insert Gallery 3 

    Columns None Media File Attachment Page Link To Gallery display properties: Arrange and caption your images: Arrange by custom  IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... Insert gallery into post Add images from media library Return to media library IMAGE Describe this image... × HOVER Remove the image from the gallery.
  58. Select Files Drop files here or Insert Gallery 3 

    Columns None Media File Attachment Page Link To Gallery display properties: Arrange and caption your images: Arrange by custom  IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... Insert gallery into post Add images from media library Return to media library IMAGE Describe this image... × HOVER Remove the image from the gallery. Easy access to the image editor.
  59. Select Files Drop files here or Insert Gallery 3 

    Columns None Media File Attachment Page Link To Gallery display properties: Arrange and caption your images: Arrange by custom  IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... Insert gallery into post Add images from media library Return to media library IMAGE Describe this image... × HOVER Remove the image from the gallery. Handle indicates the image can be dragged. Easy access to the image editor.
  60. Select Files Drop files here or Insert Gallery 3 

    Columns None Media File Attachment Page Link To Gallery display properties: Arrange and caption your images: Arrange by custom  IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... Insert gallery into post Add images from media library Return to media library IMAGE Describe this image... DRAG Drag to rearrange images.
  61. Select Files Drop files here or Insert Gallery 3 

    Columns None Media File Attachment Page Link To Gallery display properties: Arrange and caption your images: Arrange by custom  IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... Insert gallery into post Add images from media library Return to media library CLICK
  62. GALLERY Edit × Upload/Insert

  63. Edit a gallery.

  64. GALLERY Upload/Insert

  65. GALLERY Edit × Upload/Insert HOVER

  66. GALLERY Edit × Upload/Insert CLICK

  67. Select Files Drop files here or Insert Gallery Save gallery

    Add images from media library 3  Columns None Media File Attachment Page Link To Gallery display properties: Arrange and caption your images: Arrange by custom  IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image...
  68. Select Files Drop files here or Insert Gallery Save gallery

    Add images from media library 3  Columns None Media File Attachment Page Link To Gallery display properties: Arrange and caption your images: Arrange by custom  IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... IMAGE Describe this image... CLICK
  69. GALLERY Edit × Upload/Insert

  70. Choose a custom header.

  71. Select a File Drop a file here or Select an

    image: Sort by upload date  Search IMAGE IMAGE IMAGE IMAGE IMAGE IMAGE Choose a Custom Header
  72. Select a File Drop a file here or Select an

    image: Sort by upload date  Search IMAGE IMAGE IMAGE IMAGE IMAGE IMAGE Choose a Custom Header HOVER
  73. Select a File Drop a file here or Select an

    image: Sort by upload date  Search IMAGE IMAGE IMAGE IMAGE IMAGE IMAGE Choose a Custom Header CLICK
  74. Select a File Drop a file here or Select an

    image: Sort by upload date  Search IMAGE IMAGE IMAGE IMAGE IMAGE IMAGE Choose a Custom Header CLICK Selecting an image advances to the next screen.
  75. Crop header image Choose a Custom Header Return to Media

    Library IMAGE Crop 1000 × 288 Use header image as is Images should be at least 1000 pixels wide. Suggested dimensions: 1000px × 288px
  76. Crop header image Choose a Custom Header Return to Media

    Library IMAGE Crop 1000 × 288 Use header image as is Images should be at least 1000 pixels wide. Suggested dimensions: 1000px × 288px CLICK
  77. Select a featured image.

  78. Select a File Drop a file here or Select an

    image: Sort by upload date  Search IMAGE IMAGE IMAGE IMAGE IMAGE IMAGE Select a Featured Image
  79. Select a File Drop a file here or Select an

    image: Sort by upload date  Search IMAGE IMAGE IMAGE IMAGE IMAGE IMAGE Select a Featured Image HOVER
  80. Select a File Drop a file here or Select an

    image: Sort by upload date  Search IMAGE IMAGE IMAGE IMAGE IMAGE IMAGE Select a Featured Image CLICK
  81. Select a File Drop a file here or Select an

    image: Sort by upload date  Search IMAGE IMAGE IMAGE IMAGE IMAGE IMAGE Select a Featured Image CLICK Selecting an image closes the modal.