WordPress 3.5 Media Wireframes

Media Wireframes
WordPress 3.5

View Slide

Upload/Insert

View Slide

Upload/Insert
CLICK

View Slide

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
IMAGE
IMAGE
IMAGE
IMAGE

View Slide

Select Files
Drop ﬁles here
or
Insert Media
Search
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
FIXED
SCROLL
INFINITE SCROLL
Page Structure

View Slide

Select Files
Drop ﬁles here
or
Insert Media
Search
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE

View Slide

Select Files
Drop ﬁles here
or
Insert Media
Search
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
Quickly caption
your images.

View Slide

Select Files
Drop ﬁles here
or
Insert Media
Search
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
Quickly caption
your images.
Search, sort, and ﬁlter
the media library.

View Slide

Select Files
Drop ﬁles here
or
Insert Media
Search
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
Insert
HOVER

View Slide

Select Files
Drop ﬁles here
or
Insert Media
Search
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
Insert
HOVER
Access to the
image editor.

View Slide

Select Files
Drop ﬁles here
or
Insert Media
Search
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
Insert
HOVER
Access to the
image editor.
Insert a media item
into the post.

View Slide

Select Files
Drop ﬁles here
or
Insert Media
Search
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
Insert
Insert into post
IMAGE
1 image selected
clear selection
Add to gallery
CLICK

View Slide

Select Files
Drop ﬁles here
or
Insert Media
Search
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
Insert
Insert into post
IMAGE
1 image selected
clear selection
Add to gallery
CLICK
Status bar slides down
when an image is selected.

View Slide

Select Files
Drop ﬁles here
or
Insert Media
Search
Create a new gallery
Add to gallery
2 images selected
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
Insert
IMAGE
Insert
clear selection
IMAGE
CLICK

View Slide

Select Files
Drop ﬁles here
or
Insert Media
Search
Add to gallery
2 images selected
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
Insert
IMAGE
Insert
clear selection
IMAGE
CLICK
Status reﬂects the current selection.
Especially helpful when scrolling.

View Slide

Select Files
Drop ﬁles here
or
Insert Media
Search
Add to gallery
2 images selected
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
Insert
IMAGE
Insert
clear selection
IMAGE
CLICK
Status reﬂects the current selection.
Especially helpful when scrolling.
Actions are contextually based on
the number of items selected.

View Slide

Select Files
Drop ﬁles here
or
Insert Media
Search
Add to gallery
2 images selected
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
Insert
IMAGE
Insert
clear selection
IMAGE
CLICK

View Slide

Select Files
Drop ﬁles here
or
Insert Media
Search
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE

View Slide

Select Files
Drop ﬁles here
or
Insert Media
Search
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
Let’s take a look at the uploader.

View Slide

Select Files
Drop ﬁles here
or
Insert Media
Search
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
ﬁles.png
DRAG

View Slide

Select Files
Drop ﬁles here
or
Insert Media
Search
Add to gallery
3 images selected
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
Insert
IMAGE
Insert
IMAGE
Insert
clear selection
IMAGE
IMAGE
IMAGE IMAGE
IMAGE
Uploading...
Insert
Insert
Insert

View Slide

Select Files
Drop ﬁles here
or
Insert Media
Search
Add to gallery
3 images selected
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
Insert
IMAGE
Insert
IMAGE
Insert
clear selection
IMAGE
IMAGE
IMAGE IMAGE
IMAGE
Uploading...
Global progress bar.
Insert
Insert
Insert

View Slide

Select Files
Drop ﬁles here
or
Insert Media
Search
Add to gallery
3 images selected
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
Insert
IMAGE
Insert
IMAGE
Insert
clear selection
IMAGE
IMAGE
IMAGE IMAGE
IMAGE
Uploading...
Global progress bar.
Insert
Insert
Insert
Uploaded ﬁles are
automatically selected.

View Slide

Insert into post.

View Slide

Upload/Insert

View Slide

Upload/Insert
CLICK

View Slide

Select Files
Drop ﬁles here
or
Insert Media
Search
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE

View Slide

Select Files
Drop ﬁles here
or
Insert Media
Search
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
Insert
HOVER

View Slide

Select Files
Drop ﬁles here
or
Insert Media
Search
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
Insert
CLICK

View Slide

Insert into post
Insert Media
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

View Slide

Insert into post
Insert Media
Caption
Alt Text
Link To
Display Properties
Alignment
Small – (150 × 90) 

Size
IMAGE
Edit Image
DSC_2910.png
image/png
512 × 234
CLICK

View Slide

IMAGE
Edit
×
Upload/Insert

View Slide

Edit an image.

View Slide

IMAGE
Upload/Insert

View Slide

IMAGE
Edit
×
Upload/Insert
HOVER

View Slide

IMAGE
Edit
×
Upload/Insert
CLICK

View Slide

Save changes
Edit Media
IMAGE
Edit Image
DSC_2910.png
image/png
512 × 234
Caption
Alt Text
Link To
Display Properties
Alignment
Small – (150 × 90) 

Size

View Slide

Save changes
Edit Media
IMAGE
Edit Image
DSC_2910.png
image/png
512 × 234
Caption
Alt Text
Link To
Display Properties
Alignment
Small – (150 × 90) 

Size
CLICK

View Slide

Upload/Insert
IMAGE

View Slide

Upload an image.

View Slide

Upload/Insert

View Slide

Upload/Insert
ﬁle.png
DRAG

View Slide

IMAGE
Edit
×
Upload/Insert
Image is inserted with the
previously used properties
and automatically selected
for easy editing.
Edit
×

View Slide

IMAGE
Edit
×
Upload/Insert

View Slide

Create a gallery.

View Slide

Upload/Insert

View Slide

Upload/Insert
CLICK

View Slide

Select Files
Drop ﬁles here
or
Insert Media
Search
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE

View Slide

Select Files
Drop ﬁles here
or
Insert Media
Search
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
Insert
Insert into post
IMAGE
1 image selected
clear selection
Add to gallery
CLICK

View Slide

Select Files
Drop ﬁles here
or
Insert Media
Search
Add to gallery
2 images selected
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
Insert
IMAGE
Insert
clear selection
IMAGE
CLICK

View Slide

Select Files
Drop ﬁles here
or
Insert Media
Search
Add to gallery
3 images selected
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
Insert
IMAGE
Insert
IMAGE
Insert
clear selection
CLICK

View Slide

Select Files
Drop ﬁles here
or
Insert Media
Search
Add to gallery
4 images selected
IMAGE
IMAGE
IMAGE clear selection
IMAGE
IMAGE
IMAGE
Insert
IMAGE
Insert
IMAGE
Insert
IMAGE
Insert CLICK

View Slide

Select Files
Drop ﬁles here
or
Insert Media
Search
Add to gallery
4 images selected
IMAGE
IMAGE
IMAGE clear selection
IMAGE
IMAGE
IMAGE
Insert
IMAGE
Insert
IMAGE
Insert
IMAGE
Insert
CLICK

View Slide

Select Files
Drop ﬁles 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
IMAGE
IMAGE
IMAGE
Insert gallery into post
Add images from media library
Return to media library

View Slide

Select Files
Drop ﬁles here
or
Insert Gallery
3 
Link To
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
×
HOVER

View Slide

Select Files
Drop ﬁles here
or
Insert Gallery
3 
Link To
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
×
HOVER
Remove the image
from the gallery.

View Slide

Select Files
Drop ﬁles here
or
Insert Gallery
3 
Link To
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
×
HOVER
Remove the image
from the gallery.
Easy access to
the image editor.

View Slide

Select Files
Drop ﬁles here
or
Insert Gallery
3 
Link To
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
×
HOVER
Remove the image
from the gallery.
Handle indicates the
image can be dragged.
Easy access to
the image editor.

View Slide

Select Files
Drop ﬁles here
or
Insert Gallery
3 
Link To
IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
DRAG
Drag to rearrange images.

View Slide

Select Files
Drop ﬁles here
or
Insert Gallery
3 
Link To
IMAGE
IMAGE
IMAGE
IMAGE
CLICK

View Slide

GALLERY
Edit
×
Upload/Insert

View Slide

Edit a gallery.

View Slide

GALLERY
Upload/Insert

View Slide

GALLERY
Edit
×
Upload/Insert
HOVER

View Slide

GALLERY
Edit
×
Upload/Insert
CLICK

View Slide

Select Files
Drop ﬁles here
or
Insert Gallery
Save gallery
3 
Link To
IMAGE
IMAGE
IMAGE
IMAGE

View Slide

Select Files
Drop ﬁles here
or
Insert Gallery
Save gallery
3 
Link To
IMAGE
IMAGE
IMAGE
IMAGE
CLICK

View Slide

GALLERY
Edit
×
Upload/Insert

View Slide

Choose a custom header.

View Slide

Select a File
Drop a ﬁle here
or
Select an image: Sort by upload date 
Search
IMAGE IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
Choose a Custom Header

View Slide

Select a File
Drop a ﬁle here
or
Search
IMAGE IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
HOVER

View Slide

Select a File
Drop a ﬁle here
or
Search
IMAGE IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
CLICK

View Slide

Select a File
Drop a ﬁle here
or
Search
IMAGE IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
CLICK
Selecting an image advances
to the next screen.

View Slide

Crop header image
IMAGE
Crop
1000 × 288
Use header image as is
Images should be at least 1000 pixels wide. Suggested dimensions: 1000px × 288px

View Slide

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

View Slide

Select a featured image.

View Slide

Select a File
Drop a ﬁle here
or
Search
IMAGE IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
Select a Featured Image

View Slide

Select a File
Drop a ﬁle here
or
Search
IMAGE IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
HOVER

View Slide

Select a File
Drop a ﬁle here
or
Search
IMAGE IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
CLICK

View Slide

Select a File
Drop a ﬁle here
or
Search
IMAGE IMAGE
IMAGE
IMAGE
IMAGE
IMAGE
CLICK
Selecting an image closes
the modal.

View Slide

WordPress 3.5 Media Wireframes

WordPress 3.5 Media Wireframes

Daryl Koopersmith

More Decks by Daryl Koopersmith

Other Decks in Technology

Featured

Transcript