des - final design overview - 18amc
TRANSCRIPT
-
7/30/2019 DES - Final Design Overview - 18amc
1/28
FINAL DESIGNDES Multimedia Product
-
7/30/2019 DES - Final Design Overview - 18amc
2/28
General Information
Client: Pimboon Wongmesak
Final Product type: iPhone App
Programs to be used:
Audacity
Macromedia Fireworks 8
PicMonkey
PiktoChart
Pixlr Express GIMP
YouTube
Dropbox (public folder)
iBuildApp
-
7/30/2019 DES - Final Design Overview - 18amc
3/28
Visuals Overview of App
Template:Celebrities 2
Logo
Will be made using GIMP 640 x 200 px
Will say PimboonsPlatform
Background Image
Pimboon, standing on the left side of the photo
Pose of her choice
Background of the photo of her will be black
Size must be at least 640 x 1136 pixels
LOGO
-
7/30/2019 DES - Final Design Overview - 18amc
4/28
Content Overview of App
Page 1 - Images
Contain manipulated images of the client
Page 2 - Videos
Contain trailers to the clients favourtiemovies
Page 3 - Music
Contain a playlist of songs customized for
the client
Page 4 - Message
Contain a message to the client written by
the creator (me)
LOGO
-
7/30/2019 DES - Final Design Overview - 18amc
5/28
Content Overview of App
Button 1
Links to a gif of smiley faces (self-made)
Button 2
Tap to Email (Links to the iPhones builtin email application)
Button 3
Tap to Call (Links to the iPhones built in
phone application)
Button 4
Take a Photo (Links to the iPhones
camera)
LOGO
-
7/30/2019 DES - Final Design Overview - 18amc
6/28
DESCRIPTION OF EACHPAGES CONTENT
-
7/30/2019 DES - Final Design Overview - 18amc
7/28
Page 1 - Images
Contains manipulated images of the
client
Images will be added into the App
using the Photo Gallery widget
The enter manually option will be used,
rather than using the RSS Feed option
The icon of this page will be made
using GIMP
Be 352 x 106 pixels
Will say Image Gallery
Text colour will be lime green
Page title: Image Gallery
-
7/30/2019 DES - Final Design Overview - 18amc
8/28
Page 1 - Images
The order of the images to be uploaded in (more
detail on what the images will be of in the upcoming
slides):
1. Pimboon at Nob Hill, San Francisco
2. Pimboon at Knightsbridge, London
3. Pimboon at Ams House
4. Pimboon on Sugus
5. Pimboon with William Herondale
6. Pimboon with the Smurfs
7. Pimboon holding on to the TARDIS
The page will end up looking
somewhat like
-
7/30/2019 DES - Final Design Overview - 18amc
9/28
WHAT EACH IMAGE WILLLOOK LIKE(how to manipulate each image)
-
7/30/2019 DES - Final Design Overview - 18amc
10/28
IMAGE 1
Pimboon at NobHill, San Fransico
Client
Facing forward(towards the
camera) Half-torso photo
Holding theparma hampizza prop intwo hands to
the right of herbody
Parma Ham PizzaProp
Crop out blackextensive parts
Background image by ecstaticist from Flickr
http://giorgiochiangmai.com/images/giorgio/13.jpghttp://giorgiochiangmai.com/images/giorgio/13.jpghttp://www.flickr.com/photos/ecstaticist/http://www.flickr.com/photos/ecstaticist/http://giorgiochiangmai.com/images/giorgio/13.jpghttp://giorgiochiangmai.com/images/giorgio/13.jpg -
7/30/2019 DES - Final Design Overview - 18amc
11/28
IMAGE 2
Pimboon at
Knightsbridge,London
Client
Reading a book
(Take a photo of
her with a book,
not edit in a
book)
Full body
Facing down at
the book
Holding the book
with two hands
Standing
Wearing a Jacket
Brighten up the
picture (especially
the sky)
Background image by Nick-K (Nikos Koutoulas) from Flickr
http://www.flickr.com/photos/33284937@N04/http://www.flickr.com/photos/33284937@N04/http://www.flickr.com/photos/33284937@N04/http://www.flickr.com/photos/33284937@N04/http://www.flickr.com/photos/33284937@N04/http://www.flickr.com/photos/33284937@N04/ -
7/30/2019 DES - Final Design Overview - 18amc
12/28
IMAGE 3
Pimboon atAms House
Client
Facing forward
Full body
Doing a dance
move,
preferably
standing up
Background image by 18amc (me) from Flickr
http://www.flickr.com/photos/94539420@N05/http://www.flickr.com/photos/94539420@N05/ -
7/30/2019 DES - Final Design Overview - 18amc
13/28
IMAGE 4
Pimboon onSugus
Client
Sleeping (eyes
closed, tilted
head resting onher shoulder)
Sitting crossed-
legged
Facing forward
Full Body
Background image by 18amc (me) from Flickr
http://www.flickr.com/photos/94539420@N05/http://www.flickr.com/photos/94539420@N05/ -
7/30/2019 DES - Final Design Overview - 18amc
14/28
IMAGE 5
Pimboon withWilliamHerondale
Client
Doing gymnastics/
a handstand on
Wills shoulder
Facing forward
Full body
Backgrou
ndimagefromfa
npop.com
http://www.fanpop.com/clubs/the-infernal-devices/images/33206608/title/infernal-devices-fanart?ir=truehttp://www.fanpop.com/clubs/the-infernal-devices/images/33206608/title/infernal-devices-fanart?ir=truehttp://www.fanpop.com/clubs/the-infernal-devices/images/33206608/title/infernal-devices-fanart?ir=truehttp://www.fanpop.com/clubs/the-infernal-devices/images/33206608/title/infernal-devices-fanart?ir=truehttp://www.fanpop.com/clubs/the-infernal-devices/images/33206608/title/infernal-devices-fanart?ir=truehttp://www.fanpop.com/clubs/the-infernal-devices/images/33206608/title/infernal-devices-fanart?ir=truehttp://www.fanpop.com/clubs/the-infernal-devices/images/33206608/title/infernal-devices-fanart?ir=truehttp://www.fanpop.com/clubs/the-infernal-devices/images/33206608/title/infernal-devices-fanart?ir=truehttp://www.fanpop.com/clubs/the-infernal-devices/images/33206608/title/infernal-devices-fanart?ir=truehttp://www.fanpop.com/clubs/the-infernal-devices/images/33206608/title/infernal-devices-fanart?ir=truehttp://www.fanpop.com/clubs/the-infernal-devices/images/33206608/title/infernal-devices-fanart?ir=true -
7/30/2019 DES - Final Design Overview - 18amc
15/28
IMAGE 6
Pimboon with
The Smurfs Client
Sitting down
crossed-legged
Facing the
direction that
Smurfette is
facing (slightly
upwards and to
the right, from
the POV of
where the client
is sitting)
Full body
Shocked face
SmurfetteBackground image from thewallpapers.org
http://www.thewallpapers.org/desktop/43335/the-smurfs-movie-wallpaperhttp://www.thewallpapers.org/desktop/43335/the-smurfs-movie-wallpaper -
7/30/2019 DES - Final Design Overview - 18amc
16/28
IMAGE 7
Pimboon holding
on to the TARDIS
Client
Holding on to
the TARDIS
Facing slightly
sideways (to the
left)
Terrified face
Left hand
gripping the
TARDIS sideedge
Tip-toeing on
the edge of the
TARDIS
Full body Background image by aussiegall from Flickr
http://www.flickr.com/photos/aussiegall/http://www.flickr.com/photos/aussiegall/ -
7/30/2019 DES - Final Design Overview - 18amc
17/28
Page 2 - Videos Contains trailers of the clients favourite
films (The Smurfs, Madagascar, Ice Age,Johnny English)
Trailers will not be manipulated, will justbe a playlist
Videos will be added into the App usingthe Video List widget
The videos will be added by enteringYouTube URLs
The icon of this page will be made using
GIMP Be 352 x 106 pixels
Will say Cinema
Text colour will be lime green
Page title: Cinema
-
7/30/2019 DES - Final Design Overview - 18amc
18/28
Page 2 - Videos
The order of the videos/trailers to be
uploaded in + their timings:
1. The Smurfs Trailer 1:31
The Smurfs 2
2. Madagascar Trailer 2:31
Madagascar 3: Europes Most Wanted
3. Ice Age Trailer 2:28 Ice Age 3: Dawn of the Dinosaurs
4. Johnny English 2:05
Johnny English Reborn
The page will end up looking
somewhat like
http://www.youtube.com/watch?v=V0zTbkySv_ohttp://www.youtube.com/watch?v=mVEinXUrEp0http://www.youtube.com/watch?v=mVEinXUrEp0http://www.youtube.com/watch?v=mVEinXUrEp0http://www.youtube.com/watch?v=dP-xFvTIdNkhttp://www.youtube.com/watch?v=dP-xFvTIdNkhttp://www.youtube.com/watch?v=Gh-Lubu94nAhttp://www.youtube.com/watch?v=Gh-Lubu94nAhttp://www.youtube.com/watch?v=Gh-Lubu94nAhttp://www.youtube.com/watch?v=Gh-Lubu94nAhttp://www.youtube.com/watch?v=dP-xFvTIdNkhttp://www.youtube.com/watch?v=dP-xFvTIdNkhttp://www.youtube.com/watch?v=mVEinXUrEp0http://www.youtube.com/watch?v=mVEinXUrEp0http://www.youtube.com/watch?v=mVEinXUrEp0http://www.youtube.com/watch?v=V0zTbkySv_o -
7/30/2019 DES - Final Design Overview - 18amc
19/28
Page 3 - Music Contains a customized playlist of
manipulated andnon-manipulated songsthat the client likes
Music will be added into the App usingthe Audio List widget
The music will be added by entering URLs ofthe MP3 file of the song
The MP3 files URLs will be made by adding thefiles into a public dropbox folder, since dropboxwill create a link for each file in a public folder
The icon of this page will be made using
GIMP
Be 352 x 106 pixels
Will say Music
Text colour will be lime green
Page title: Music
-
7/30/2019 DES - Final Design Overview - 18amc
20/28
Page 3 - Music The order of the music to be uploaded in (more
information on the songs in upcoming slides):
1. Someone like your Man (Mash-up)
2. Feel this Clarity (Mash-up)
3. The Man who Cant be Moved
4. Warzone
5. Lucky Strike
6. I Knew you were Trouble
7. Wonderwall
8. Hall of Fame
The page will end up looking
somewhat like
-
7/30/2019 DES - Final Design Overview - 18amc
21/28
Page 3 Music - Information
Entire Song List of all songs to use (with Artist and Song Name)
1. When I was your Man by Bruno Mars
2. Someone like you byAdele
3. Feel this Moment ft. Christina Arguilera by Pitbull4. Clarity ft. Foxes byZedd
5. The Man who Cant be Moved by The Script
6. Warzone by The Wanted
7. Lucky Strike by Maroon 5
8. I Knew you were Trouble by Taylor Swift
9. Wonderwall by Oasis
10. Hall of Fame ft. will.i.am by The Script
http://www.youtube.com/watch?v=ekzHIouo8Q4http://www.youtube.com/watch?v=ekzHIouo8Q4http://www.youtube.com/watch?v=hLQl3WQQoQ0http://www.youtube.com/watch?v=hLQl3WQQoQ0http://www.youtube.com/watch?v=5jlI4uzZGjUhttp://www.youtube.com/watch?v=5jlI4uzZGjUhttp://www.youtube.com/watch?v=IxxstCcJlschttp://www.youtube.com/watch?v=IxxstCcJlschttp://www.youtube.com/watch?v=gS9o1FAszdkhttp://www.youtube.com/watch?v=gS9o1FAszdkhttp://www.youtube.com/watch?v=yMR382aefmQhttp://www.youtube.com/watch?v=yMR382aefmQhttp://www.youtube.com/watch?v=ucv3r6Iy-9whttp://www.youtube.com/watch?v=ucv3r6Iy-9whttp://www.youtube.com/watch?v=d0DfyAIkGw0http://www.youtube.com/watch?v=d0DfyAIkGw0http://www.youtube.com/watch?v=oH58NvcZLiEhttp://www.youtube.com/watch?v=oH58NvcZLiEhttp://www.youtube.com/watch?v=jukv9Q1eR2ghttp://www.youtube.com/watch?v=jukv9Q1eR2ghttp://www.youtube.com/watch?v=jukv9Q1eR2ghttp://www.youtube.com/watch?v=jukv9Q1eR2ghttp://www.youtube.com/watch?v=oH58NvcZLiEhttp://www.youtube.com/watch?v=oH58NvcZLiEhttp://www.youtube.com/watch?v=oH58NvcZLiEhttp://www.youtube.com/watch?v=oH58NvcZLiEhttp://www.youtube.com/watch?v=d0DfyAIkGw0http://www.youtube.com/watch?v=d0DfyAIkGw0http://www.youtube.com/watch?v=ucv3r6Iy-9whttp://www.youtube.com/watch?v=ucv3r6Iy-9whttp://www.youtube.com/watch?v=yMR382aefmQhttp://www.youtube.com/watch?v=yMR382aefmQhttp://www.youtube.com/watch?v=gS9o1FAszdkhttp://www.youtube.com/watch?v=gS9o1FAszdkhttp://www.youtube.com/watch?v=IxxstCcJlschttp://www.youtube.com/watch?v=IxxstCcJlschttp://www.youtube.com/watch?v=5jlI4uzZGjUhttp://www.youtube.com/watch?v=5jlI4uzZGjUhttp://www.youtube.com/watch?v=5jlI4uzZGjUhttp://www.youtube.com/watch?v=5jlI4uzZGjUhttp://www.youtube.com/watch?v=5jlI4uzZGjUhttp://www.youtube.com/watch?v=hLQl3WQQoQ0http://www.youtube.com/watch?v=hLQl3WQQoQ0http://www.youtube.com/watch?v=hLQl3WQQoQ0http://www.youtube.com/watch?v=ekzHIouo8Q4http://www.youtube.com/watch?v=ekzHIouo8Q4http://www.youtube.com/watch?v=ekzHIouo8Q4 -
7/30/2019 DES - Final Design Overview - 18amc
22/28
Page 3 Music Information
Songs to manipulate + how:
1. When I was your Man & Someone like you Mash-up
2. Feel this Moment & Clarity Mash-up
3. Wonderwall remove the silence in the beginning Songs to not manipulate and simply include:
1. The Man who Cant be Moved
2. Warzone
3. Lucky Strike
4. I Knew you were Trouble
5. Hall of Fame
-
7/30/2019 DES - Final Design Overview - 18amc
23/28
Page 3 Music Information
Timings:
SONG NAME
1. Someone like your Man (Mash-up)
2. Feel this Clarity (Mash-up)
3. The Man who Cant be Moved
4. Warzone
5. Lucky Strike
6. I Knew you were Trouble
7. Wonderwall
8. Hall of Fame
DURATION
Currently un-decidable, but between2-4 minutes
Currently un-decidable, but between2-4 minutes
4:00
3:45
3:08
3:41
4:24 subtracted by the amount ofseconds cut off at the beginning
3:21
-
7/30/2019 DES - Final Design Overview - 18amc
24/28
Page 4 - Message
Contains a message to the client
written by the creator (more
information in upcoming slides)
The message will be added into the
App using the HTML widget
Text and image(s) will be added
The icon of this page will be made
using GIMP
Be 352 x 106 pixels
Will say Message
Text colour will be lime green
Page title: Hi!
-
7/30/2019 DES - Final Design Overview - 18amc
25/28
Page 4 - Message
Brief Outline of what the message willsay/consist of things to talk about and havein the message:
1. Briefly about the creation of thisApp/multimedia product
1. How it is customized2. Brief things of what I/the creator had to do (Ex: edit
the image, upload into the App, etc.)
2. About what the creator wishes for the client
1. Hope that it is correctly customized (Ex: content iscorrectly what the client talked about in theinterview)
2. Hope that the client likes/enjoys the product
3. Any other irrelevant/personal things
4. An image/gif to make the page lookappealing and/or to make it happier
The page will end up looking
somewhat like
-
7/30/2019 DES - Final Design Overview - 18amc
26/28
DESCRIPTION OF EACH
BUTTON
-
7/30/2019 DES - Final Design Overview - 18amc
27/28
Button 1
Icon:
Button Name: Smile!
Page Title: Smile!
Links to a self-made gif of smiley faces/graphics
Smiley faces/graphics will come from PicMonkeys overlays, PiktoCharts icons,
and Pixlr Express stickers
Smiley faces/graphics will be in Lime Green, Silver/Grey and Black
GIF will be made by GIMP
GIF will simply be an animation of the different smiley faces/graphics flashing one
after another
Widget to use: HTML
Link the GIF file into the HTML page as an image
-
7/30/2019 DES - Final Design Overview - 18amc
28/28
Button 2 Button 3 Button 4
Icon
Button Name Facebook 9GAG Camera
Page Title Facebook 9GAG Camera
Links to http://www.faceboo
k.com/
http://9gag.com/ The phones camera
Widget to use Web - embeds
websites into the
app
Web - embeds
websites into the
app
Take a picture
take a photo with
the devices camera
http://www.facebook.com/http://www.facebook.com/http://9gag.com/http://9gag.com/http://www.facebook.com/http://www.facebook.com/