WordPress 3.5 Media Wireframes

84e6e5080ee6af9e93464012cf084b8f?s=47 Daryl Koopersmith
July 30, 2012
Technology
11
80k

WordPress 3.5 Media Wireframes

Learn more at http://make.wordpress.org/ui/2012/07/30/media-wireframes/

84e6e5080ee6af9e93464012cf084b8f?s=128

Daryl Koopersmith

July 30, 2012
Tweet

More Decks by Daryl Koopersmith

See All by Daryl Koopersmith
84e6e5080ee6af9e93464012cf084b8f?s=48 koop
1
4.4k

Other Decks in Technology

See All in Technology
A8f0494d61f79b35ff8a4902c7decb73?s=48 iqbocchi
0
520
3f5ae6480375e527d01ee337d6c30a5f?s=48 sasakendayo
2
220
Dd23bc768f5ebe8a01126aaa8f0c86cf?s=48 neo_analytics
0
880
0d29d155ce5c5a93ed46363626da3ea7?s=48 ocise
1
1.3k
96de66872f54da75c05c881c7a3713ce?s=48 kenya888
1
100
Bee82b2f6e75097641a3ba5ce70c2368?s=48 takem001
0
840
E97091ac0d2c69ce9f9e8a8d0a2ea066?s=48 torisoup
0
260
3009eedce0d0f7ae45987a7bd8f57b85?s=48 nkjzm
1
780
Ea29e2b19d11b48f867ae71d6a6de5df?s=48 opelab
2
280
53850955f15249a1a9dc49df6113e400?s=48 line_developers
PRO
0
140
404139d782ec666acea93dffc86e089f?s=48 sylph01
0
160
9e7a653ed313b3da4b263a772bfc5026?s=48 clustervr
0
180

Featured

See All Featured
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
71
3.6k
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
204
35k
2f5463832ccb768ccb4a1ca3607c27ef?s=48 jacobian
255
20k
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
5
640
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
294
39k
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
347
20k
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
251
11k
B47b288784fda77a94aeb234ca743c24?s=48 keavy
106
14k
4262b9cfacfb6b2c77f23e1d0310cd3e?s=48 myddelton
109
11k
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
144
12k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
145
19k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
437
28k

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.