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.1k

Other Decks in Technology

See All in Technology
88f4e84b94fe07cddbd9e6479d689192?s=48 soudai
0
270
79dcb04101764d7bf66f898dd446838e?s=48 tsukubachallenge
0
150
C786d7772602b488a7972c38c143f61c?s=48 con_mame
3
1.7k
Cd891a89dfec6ca7bd278b5f5bd87c90?s=48 tzkoba
16
4.6k
6eecc52120fba9d87d982684211182ec?s=48 mochico
0
170
1f745ff900e1be51aedae18cae76593c?s=48 kurochan
0
1.7k
46fdd2ebc85d68659b83d5eb5c6a49aa?s=48 keisukeyamashita
2
350
C5e26822fb2aa64410b50eac63ef7d84?s=48 fill9120
1
220
18f1e3993e9ead63e7a0f70d9eb996bb?s=48 wkm2
0
130
8a84268593355816432ceaf78777d585?s=48 dena_tech
0
2k
26a00012c475c2380cd98cfe5e2e70ef?s=48 ozaki25
0
210
79dcb04101764d7bf66f898dd446838e?s=48 tsukubachallenge
0
170

Featured

See All Featured
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
407
57k
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
2
410
9375a9529679f1b42b567a640d775e7d?s=48 schacon
144
6.4k
4262b9cfacfb6b2c77f23e1d0310cd3e?s=48 myddelton
104
10k
C7393b7ba7ec9c8890dd77d209fbb3c9?s=48 maltzj
497
36k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
100
11k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
196
19k
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
205
9.9k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
775
240k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
65
2.9k
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
340
25k
C157b16234f1e75e8eac3698c1d4414a?s=48 ddemaree
274
31k

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.