Insight Process
-
Upload
tyler-mays -
Category
Documents
-
view
220 -
download
2
description
Transcript of Insight Process
Content:
Design Brief - pg. 1
Company Research - pg. 3• Video Sills
• Advertisements
• Logos
Visual Research - pg. 7• Inspiration
• Light Leaks
Wire-frames - pg. 13
Photography - pg. 20• Photo-shoot
• Edited Photos
• Finals
Typographic Research - pg. 28
Dreamweaver Frames - pg. 30
Website Final - pg. 37
DesignBrief
1.
For this project I picked the company Insight 51. The company is comprised of Graphic Designers as well as Garage Artists. They are based out of Sydney Australia and have come toembodythecounterculturalmovementsofsurfing,skating,art,music,etc.Theclothingproducedbythecompanyreflectsthelifestyleandtheirartistsdon’tfollowthetrendsofeveryoneelsetheyfollowtheirowncreativeinstinctsinhopesofcreatingtrends.Thecompanyhasbeguntoexpandgloballythankstoanetworkofskaters,surfers,musicians,andartistwhohavetakennoticeofinsight’screativeandinnovativestyle.
I learned of this company about three years ago and ever since have been following the growth of the company. Being a skater and surfer I can relate to the artistic choices ofthecompany,alongwiththefactthatthey’reclothingissodamncomfortable.SpendingmysummersatthebeachhashadaprofoundeffectonmeandIwantedtobringthatknowledge and lifestyle together to create a new product page for the company.Mygoalforthisproductwebsitewastodoawaywithalltheunnecessarybaggagethatcomeswithproductwebsites.Ican’tstandbeingonacompanieswebsiteandthey’re
already trying to take me somewhere else or everything is tight and confusing. I wanted to present the products cleanly while still incorporating this counter culture that insight represents. Along with this I wanted to incorporate a handwritten aspect to the products which is prevalent in their surf and skate videos. WhiletheirproductpageisgoodandfunctionalIsawawayforsomeimprovementstobemade.Firstlytheproductspagedoesn’tlinkbacktotheirmainwebpage.Iaddressed
this problem right away linking the index page to their main website. Also their photography kind of falls short to their image. I took some really nice shots of their trunks up-close andincontext.AlsoIgavethemadreamysurferfeelwhichalotoftheirworkincorporates.LastlyIstrippedthesitetoit’sbareessentials.Iwantedthefocustobeonthetrunksandtryingtosellthemthroughtheimagery.Ievenaddedsomerolloverimagestogiveitafunfeelthatotherwisewouldn’tbetherecreatingamemorableexperiencefortheviewer.Ididawaywithtryingtobringyoutoafacebookpageoranyotherexternallink.Itistherebutsubtlyatthebottom.Ididn’twanttotaketheviewerawayfromtheprod-uct which after all is the reason why they are there. Thefocusofthewebsiteisonthetrunks,unfortunatelyIdidn’thaveanyotherarticlesofclothingbesidesthetrunkswithme.Iwantedshotsthatwouldreallyhighlighttheas-
pects that I felt most important. For example the logo or up-close imagery of the artwork on the trunks. They all have very interesting designs and good shots of this will sell them so much more effectively. Another thing I did was to get away from studio shots of clothing. I wanted to give them an environment so I went to Tybee and shot everything there with great results.
2.
3.
CompanyResearch
Videos Stills
4.
From their videos I drew a lot of inspiration how I wanted my photography to look. I liked the washed out grainy look of the bottom two frames. I also liked the had written aspect of the video. It adds a unique look that not many companies are doing. Along with that I liked the product shots in their videos. I liked the up-close but in-context feel along with far out image of the surfer. I feel that by incorporating this it adds an extra dimension instead of just photographing the trunks in a studio.
Advertisements
5.
They do a great job of advertising their brand. They take artwork done by their in-house garage artists and incorporateitintotheirpieces.Unfortunately,Ididn’thavethemeanstotakesuchdynamicphotographylikethetoprowofadds.WhatIdiddrawfromitismoreoftheirculturealongwithfilterstheyuse.Thebottom left image is the handwritten aspect again. I really like how it works with he image and I used this in my own roll-over images.
6.
Logos
7.
VisualResearch
Inspiration
8.
Research concerning light leaks and graininess. I liked the retro washed out feel of the images. It also re-flectssomeoftheeffectsdoneininsightsvideos.Ilikedthesunfeelofthelightleaksparticularlyinthemiddle one. I feel like these effects will evoke an inviting environment for the buyers. Much of the same for the next page as well. I liked the blurred out guy on the next page. I wanted to incorporate this some how. Where I blur out a model wearing a pair of their trunks or along those lines.
Inspiration
9.
Light Leak Filters
10.
Light Leak Filters
11.
Light Leak Filters
12.
Wire-FrameDigital-Sketches
13.
Wire-frames The index page. I labeled what links and where it will link to. The image will be a series of 3 with in a slider which I thought was a nice way to introduce my concept of what insight is all about.
14.
Wire-frames The product page. Images liking to different product categories. Again I labeled what links and where to. AlthoughinmyfinalIhavetweakedtheoveralldesignofthislayout.
15.
Wire-framesTrunks page after clicking on the trunk image on the prior frame. Will have roll-over images. They will link to pages to more images of the product and info about them. Possibly thinking about creating a cart and addingfacebook,tumblr,andvimeolinks.Willalllinktoseparatepages.
16.
Wire-frames Productspecificpage.MaytweakthispagetobetterfitthehorizontalstyleI’vebeenshowinginthepriorframes. Will have all the information seen in the frame and will have roll-over images just like the others.
17.
Wire-frames The about page which I took from the actual insight about page. The truth behind the company and the what they follow. Presented simply and elegantly focusing strictly on what they are about.
18.
Wire-frames Very similar thought process to the about page. The addresses and emails are all the legitimate ones they use. Although nothing links and you can not actually email the company. You could call though if you dial the number on our phone though.
19.
PhotoShoot
20.
Original Photos
21.
Spent the day at Tybee Island getting shots of the articles of clothing in context along with on a back-ground of sand instead of in a studio. All the raw images prior to editing.
Original Photos
22.
Original Photos
23.
Original Photos
24.
Edited Photos
25.
After the photo-shoot at Tybee Island I selected a few that really captured the style of insight while show-casing the products. I also added noise and light leaks with some color correcting to create the look I wanted from the visual research.
Edited Photos
26.
Final Photos
27.
Finalimagechoicesandfinaleffectsadded.Rolloverimagesforthesephotoscanbesceneinthefunctionalsite.
TypographicResearch
28.
Typeface ChoicesI wanted to go with a simple sans serif type face that had a large family so I could create a page with some hierarchyoftext.Icouldn’tfindtheinsighttypefaceunfortunatelybecauseitisprivatelyownedandheldby the company. I decided to go with Gills Sans because of its clean look and it easily was viewed in Goo-glechrome,safari,andFirefox.Ialsowentwithamaticformyphotographyasanicehandwrittentypefacereflectingtheideologyofinsight.
AmaticShorts TrunksT-Shirts
AmbleShorts TrunksT-Shirts
CabinShorts TrunksT-Shirts
DemingShorts
TrunksT-Shirts
LatoShorts TrunksPantsT-ShirtsGills Sans
Shorts
TrunksPants
RobotShorts Trunks Pants T-Shirts
29.
DreamweaverFrames
30.
Screen-shots
31.
Live shots of my code along with the design next to it. I have examples of some of the rollover I used too. Also I included some shots of just code or just the design along with some of the frames using the live button.
Screen-shots
32.
Screenshotshowingrolloverofthefacebook,tumblr,andvimeoiconsinthecartarea.Thisappliestoallframes though. Also I showed the table coding I used to set up the site.
Screen-shots
33.
The cart live and just design showing. Gives the layout of the page. The top is applied to the whole website along with the bottom widgets.
Screen-shots
34.
Another shot of the full live page. Also showing the rollover of the images and how the trunks change from grainy to clear.
Screen-shots
35.
The different product areas along with the code. Not live so you can see how the div tag is working and how the images line up.
Screen-shots
36.
Code showing tables and spacing of the navigation bar.
Final Site
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.