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.