icharge product and interface development
TRANSCRIPT
Research Moodboard
This moodboard shows competitor websites along with their product range. They all have high quality images showcasing product. A couple of the brands depict the technology inside the bags so customers know exactly how buying these products will benefit them.
Emotive Moodboard
This moodboard represents the emotions of the demographic of laptop users who are always on the go and working anywhere and everywhere. The images here show user’s dependency on charging stations and power outlets and the freedom of working on laptops. So combining a bag with a charging station would benefit all of these users.
Styling Moodboard
This moodboard shows how the websitewill be styled based on its parent brand;Apple. Here you can see the layout, footerstyling, fonts used as well as the brandsbrilliant use of white space. All these subtledesign implementations are there to highlightthe most important item, the product.
Inspiration Moodboard
This moodboard shows thewebsites that have inspired my wireframe. It shows the layouts and products, but most importantly, these show the call-to-action portion of the websites; the “buy now” forms where users enter their payment details to purchase their items.
Footnote Note
1 Tag Line
2 Main image
3 Play video
4 Speil about the product
5 Link to design page
6 Speil about the built in technology
7 Image of batteries
8 Image of product
9 Image of product
10 How batteries are placed in product
11 X-Ray image of product (back)
12 Stat about batteries
13 X-Ray image of product (side)
14 About battery technology
15 Stat about batteries
Home Page
Footnote Name Note
1 product image
2 about the product
3 Left-Right_Slider image gallery slider
4 more about the product
5 more product images
6 more product images
7 about the cables inside
8 product images (inside)
9 more product images
Design Page
Footnote Note
1 about the battery technology
2 images of the batteries
3 about battery life
4 stat about battery life
5 x-ray images of battery placement
6 more images of battery placement
7 about USB and charging cables
8 stats USB versions
9 x-ray images of bag with USB positioning
10 about interchangeable cable heads
11 images of interchangeable cable heads
Built-In Tech Page
Footnote Note
1 images of product (front)
2 images of product (open)
3 x-ray images of product with measurements
4 image of box
Tech-Specs Page
Footnote Note
1 images of product (front)
2 images of product (open)
3 x-ray images of product with measurements
4 image of box
Buy Now Page
Styling Moodboard
http://www.apple.com(All images are screenshots from the website)
Research Moodboard
http://www.tylt.com
http://www.urbanjunket.com
http://www.timbuk2.com
Inspiration Moodboard
http://www.tylt.com
http://www.urbanjunket.com
http://www.timbuk2.com
http://www.apple.com
Emotive Moodboard
http://previews.123rf.com/images/maridav/maridav1403/maridav140300294/26735566-Business-man-on-smartphone-walking-in-street-talking-on-mobile-smart-phone-smiling-wearing-jacket-an-Stock-Photo.jpg
http://www.laptoptraybag.com/wp-content/uploads/2011/10/DSC2347.jpg
http://thumbs.dreamstime.com/z/people-using-laptop-charging-station-airport-dia-den-denver-international-co-45420829.jpg
http://msnbcmedia4.msn.com/j/MSNBC/Components/Slideshows/_production/ss-121025-hurricane-sandy/ss-121031-hurricane-sandy-17.ss_full.jpg
http://media.idownloadblog.com/wp-content/uploads/2014/07/Samsung-Galaxy-S5-ad-iPhone-battery-001.jpg
https://www.conetix.com.au/media/uploads/2014/11/20/easy-to-navigate.jpg
http://www.happiness.one/wp-content/uploads/2015/02/b-deisgners.jpg
http://www.flex360.com/public/img/slide1.jpg
http://www.supafitcarpets.co.uk/wp-content/uploads/2013/03/Carefree_Elegance_Berber_482_Roomset_LR.jpg
http://previews.123rf.com/images/andreypopov/andreypopov1305/andreypopov130500445/19791841-Top-View-Of-Young-Woman-Lying-On-Carpet-With-Laptop-Stock-Photo.jpg
References