WordPress 3.5 Media Wireframes

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.