http://portfolio.tofslie.com Tofslie Inc. | The Creative Studio of Edwin Tofslie - Creative Direction, Art Direction, Ideas, Design, Interactive, Web and Maker of Fine Jerky. Fri, 02 Dec 2011 00:04:52 +0000 http://portfolio.tofslie.com en http://portfolio.tofslie.com/Crimson-Trace http://portfolio.tofslie.com/following/portfolio.tofslie.com/Crimson-Trace Fri, 02 Dec 2011 00:04:52 +0000 Tofslie Inc. | The Creative Studio of Edwin Tofslie - Creative Direction, Art Direction, Ideas, Design, Interactive, Web and Maker of Fine Jerky. 2394583 <img src="http://payload4.cargocollective.com/1/0/991/2394583/cchome.jpg" border="0" width="670" height="890" width_o="1263" height_o="1679" src_o="http://payload4.cargocollective.com/1/0/991/2394583/cchome_o.jpg" align="left" /> <img src="http://payload4.cargocollective.com/1/0/991/2394583/ccwall3.jpg" border="0" width="670" height="1200" width_o="1263" height_o="2263" src_o="http://payload4.cargocollective.com/1/0/991/2394583/ccwall3_o.jpg" align="left" /> <img src="http://payload4.cargocollective.com/1/0/991/2394583/ccpdp.jpg" border="0" width="670" height="848" width_o="1263" height_o="1600" src_o="http://payload4.cargocollective.com/1/0/991/2394583/ccpdp_o.jpg" align="left" /> Creative Direction, Lead Design & Concept Design collaboration with Drew Cone. Great job Neal Mckinney & Jeremy Bueler on the development side. View at: http://www.crimsontrace.com/ http://portfolio.tofslie.com/Nike-Vision-Winter-Collection http://portfolio.tofslie.com/following/portfolio.tofslie.com/Nike-Vision-Winter-Collection Wed, 23 Nov 2011 01:57:20 +0000 Tofslie Inc. | The Creative Studio of Edwin Tofslie - Creative Direction, Art Direction, Ideas, Design, Interactive, Web and Maker of Fine Jerky. 2350486 <img src="http://payload2.cargocollective.com/1/0/991/2350486/nvw_1.jpg" border="0" width="670" height="545" width_o="1272" height_o="1035" src_o="http://payload2.cargocollective.com/1/0/991/2350486/nvw_1_o.jpg" align="left" /> <img src="http://payload2.cargocollective.com/1/0/991/2350486/nvw_2a.jpg" border="0" width="670" height="545" width_o="1272" height_o="1035" src_o="http://payload2.cargocollective.com/1/0/991/2350486/nvw_2a_o.jpg" align="left" /> <img src="http://payload2.cargocollective.com/1/0/991/2350486/nvw_2.jpg" border="0" width="670" height="545" width_o="1272" height_o="1035" src_o="http://payload2.cargocollective.com/1/0/991/2350486/nvw_2_o.jpg" align="left" /> <img src="http://payload2.cargocollective.com/1/0/991/2350486/nvw_3.jpg" border="0" width="670" height="545" width_o="1272" height_o="1035" src_o="http://payload2.cargocollective.com/1/0/991/2350486/nvw_3_o.jpg" align="left" /> Recently launched this simple but beautiful site. Parallax Scrolling site with purpose, to reveal a product. One of my last projects at Summit. Great job Neal Mckinney on the development and bringing it to life. Based on Nemo's Print campaign. http://www.nikevision.com http://portfolio.tofslie.com/I-Love-Your-Vintage http://portfolio.tofslie.com/following/portfolio.tofslie.com/I-Love-Your-Vintage Wed, 16 Nov 2011 05:50:53 +0000 Tofslie Inc. | The Creative Studio of Edwin Tofslie - Creative Direction, Art Direction, Ideas, Design, Interactive, Web and Maker of Fine Jerky. 2313901 <img src="http://payload.cargocollective.com/1/0/991/2313901/ILYV_Identity_FinalPORT.jpg" border="0" width="670" height="800" width_o="670" height_o="800" src_o="http://payload.cargocollective.com/1/0/991/2313901/ILYV_Identity_FinalPORT_o.jpg" align="left" /> http://portfolio.tofslie.com/Bob-s-Red-Mill http://portfolio.tofslie.com/following/portfolio.tofslie.com/Bob-s-Red-Mill Sat, 12 Nov 2011 00:41:48 +0000 Tofslie Inc. | The Creative Studio of Edwin Tofslie - Creative Direction, Art Direction, Ideas, Design, Interactive, Web and Maker of Fine Jerky. 2293358 <img src="http://payload.cargocollective.com/1/0/991/2293358/BRM_Home_02_02a_et.jpg" border="0" width="670" height="744" width_o="1440" height_o="1600" src_o="http://payload.cargocollective.com/1/0/991/2293358/BRM_Home_02_02a_et_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/991/2293358/BRM_Home_02_02b_et.jpg" border="0" width="670" height="744" width_o="1440" height_o="1600" src_o="http://payload.cargocollective.com/1/0/991/2293358/BRM_Home_02_02b_et_o.jpg" align="left" /> View Large Home Home Rollover http://portfolio.tofslie.com/Casino-Creative-Explorations http://portfolio.tofslie.com/following/portfolio.tofslie.com/Casino-Creative-Explorations Thu, 22 Sep 2011 04:58:00 +0000 Tofslie Inc. | The Creative Studio of Edwin Tofslie - Creative Direction, Art Direction, Ideas, Design, Interactive, Web and Maker of Fine Jerky. 2040003 <img src="http://payload.cargocollective.com/1/0/991/2040003/Boomtown_Home_001.jpg" border="0" width="670" height="758" width_o="1280" height_o="1450" src_o="http://payload.cargocollective.com/1/0/991/2040003/Boomtown_Home_001_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/991/2040003/Boomtown_Home_002.jpg" border="0" width="670" height="758" width_o="1280" height_o="1450" src_o="http://payload.cargocollective.com/1/0/991/2040003/Boomtown_Home_002_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/991/2040003/citycenter_0101_et.jpg" border="0" width="670" height="574" width_o="1400" height_o="1200" src_o="http://payload.cargocollective.com/1/0/991/2040003/citycenter_0101_et_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/991/2040003/citycenter_0102_et.jpg" border="0" width="670" height="574" width_o="1400" height_o="1200" src_o="http://payload.cargocollective.com/1/0/991/2040003/citycenter_0102_et_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/991/2040003/citycenter_0103_et.jpg" border="0" width="670" height="574" width_o="1400" height_o="1200" src_o="http://payload.cargocollective.com/1/0/991/2040003/citycenter_0103_et_o.jpg" align="left" /> http://portfolio.tofslie.com/Icebreaker-Pitchwork http://portfolio.tofslie.com/following/portfolio.tofslie.com/Icebreaker-Pitchwork Wed, 21 Sep 2011 23:42:27 +0000 Tofslie Inc. | The Creative Studio of Edwin Tofslie - Creative Direction, Art Direction, Ideas, Design, Interactive, Web and Maker of Fine Jerky. 2039037 <img src="http://payload.cargocollective.com/1/0/991/2039037/icebreaker_home_et_01_01_0000_1.jpg" border="0" width="670" height="899" width_o="1400" height_o="1880" src_o="http://payload.cargocollective.com/1/0/991/2039037/icebreaker_home_et_01_01_0000_1_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/991/2039037/icebreaker_home_et_01_01_0002_1 Menu Mens.jpg" border="0" width="670" height="899" width_o="1400" height_o="1880" src_o="http://payload.cargocollective.com/1/0/991/2039037/icebreaker_home_et_01_01_0002_1 Menu Mens_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/991/2039037/icebreaker_home_et_01_01_0004_2.jpg" border="0" width="670" height="899" width_o="1400" height_o="1880" src_o="http://payload.cargocollective.com/1/0/991/2039037/icebreaker_home_et_01_01_0004_2_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/991/2039037/icebreaker_home_et_01_01_0005_3.jpg" border="0" width="670" height="899" width_o="1400" height_o="1880" src_o="http://payload.cargocollective.com/1/0/991/2039037/icebreaker_home_et_01_01_0005_3_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/991/2039037/icebreaker_home_et_01_01_0006_4.jpg" border="0" width="670" height="899" width_o="1400" height_o="1880" src_o="http://payload.cargocollective.com/1/0/991/2039037/icebreaker_home_et_01_01_0006_4_o.jpg" align="left" /> Sometimes I find it interesting to know where a project started and where it ended. Take a look at some of the initial thinking behind Icebreaker.com. At this stage in the game you can see the beginnings of a great site. The architecture of the site was far along and the creative portion was beginning. http://portfolio.tofslie.com/Icebreaker-Story http://portfolio.tofslie.com/following/portfolio.tofslie.com/Icebreaker-Story Wed, 21 Sep 2011 23:20:50 +0000 Tofslie Inc. | The Creative Studio of Edwin Tofslie - Creative Direction, Art Direction, Ideas, Design, Interactive, Web and Maker of Fine Jerky. 2038808 <img src="http://payload.cargocollective.com/1/0/991/2038808/why.jpg" border="0" width="670" height="1279" width_o="1194" height_o="2280" src_o="http://payload.cargocollective.com/1/0/991/2038808/why_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/991/2038808/whatis.jpg" border="0" width="670" height="1567" width_o="1194" height_o="2793" src_o="http://payload.cargocollective.com/1/0/991/2038808/whatis_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/991/2038808/whywear.jpg" border="0" width="670" height="2100" width_o="1194" height_o="3744" src_o="http://payload.cargocollective.com/1/0/991/2038808/whywear_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/991/2038808/Why-Whatareyousaying-01-bc.jpg" border="0" width="670" height="1696" width_o="1400" height_o="3545" src_o="http://payload.cargocollective.com/1/0/991/2038808/Why-Whatareyousaying-01-bc_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/991/2038808/aboutlanding.jpg" border="0" width="670" height="1324" width_o="1400" height_o="2768" src_o="http://payload.cargocollective.com/1/0/991/2038808/aboutlanding_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/991/2038808/comfort.jpg" border="0" width="670" height="1088" width_o="1194" height_o="1940" src_o="http://payload.cargocollective.com/1/0/991/2038808/comfort_o.jpg" align="left" /> Creative Direction, Design & Concept Design collaboration with Brian Brooks. Special thanks to Crispin Young for the design support.View everything at: Why Icebreaker Merino?EthicsCommunityAbout Icebreaker http://portfolio.tofslie.com/Icebreaker-com http://portfolio.tofslie.com/following/portfolio.tofslie.com/Icebreaker-com Wed, 21 Sep 2011 22:36:09 +0000 Tofslie Inc. | The Creative Studio of Edwin Tofslie - Creative Direction, Art Direction, Ideas, Design, Interactive, Web and Maker of Fine Jerky. 2038718 <img src="http://payload.cargocollective.com/1/0/991/2038718/icebreakerhome_5.jpg" border="0" width="670" height="1156" width_o="1198" height_o="2068" src_o="http://payload.cargocollective.com/1/0/991/2038718/icebreakerhome_5_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/991/2038718/ICELANDING_1.jpg" border="0" width="670" height="950" width_o="1180" height_o="1674" src_o="http://payload.cargocollective.com/1/0/991/2038718/ICELANDING_1_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/991/2038718/ICEWALL.jpg" border="0" width="670" height="563" width_o="1180" height_o="993" src_o="http://payload.cargocollective.com/1/0/991/2038718/ICEWALL_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/991/2038718/ICEPDP.jpg" border="0" width="670" height="563" width_o="1180" height_o="993" src_o="http://payload.cargocollective.com/1/0/991/2038718/ICEPDP_o.jpg" align="left" /> Creative Direction, Design & Concept Design collaboration with Brian Brooks. Special thanks to Crispin Young for the design support.View at: http://www.icebreaker.com http://portfolio.tofslie.com/Craigslist-Redesign http://portfolio.tofslie.com/following/portfolio.tofslie.com/Craigslist-Redesign Wed, 14 Sep 2011 21:18:51 +0000 Tofslie Inc. | The Creative Studio of Edwin Tofslie - Creative Direction, Art Direction, Ideas, Design, Interactive, Web and Maker of Fine Jerky. 2004664 <img src="http://payload.cargocollective.com/1/0/991/2004664/craigslist_redesign_edwintofslie_003.jpg" border="0" width="670" height="557" width_o="1340" height_o="1115" src_o="http://payload.cargocollective.com/1/0/991/2004664/craigslist_redesign_edwintofslie_003_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/991/2004664/craigslist_redesign_edwintofslie_001.jpg" border="0" width="670" height="661" width_o="1130" height_o="1115" src_o="http://payload.cargocollective.com/1/0/991/2004664/craigslist_redesign_edwintofslie_001_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/991/2004664/craigslist_redesign_edwintofslie_002.jpg" border="0" width="670" height="661" width_o="1130" height_o="1115" src_o="http://payload.cargocollective.com/1/0/991/2004664/craigslist_redesign_edwintofslie_002_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/991/2004664/craigslist_redesign_edwintofslie_004.jpg" border="0" width="670" height="522" width_o="1340" height_o="1044" src_o="http://payload.cargocollective.com/1/0/991/2004664/craigslist_redesign_edwintofslie_004_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/991/2004664/craigslist_redesign_edwintofslie_005.jpg" border="0" width="670" height="522" width_o="1340" height_o="1044" src_o="http://payload.cargocollective.com/1/0/991/2004664/craigslist_redesign_edwintofslie_005_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/991/2004664/craigslist_redesign_edwintofslie_006.jpg" border="0" width="670" height="522" width_o="1340" height_o="1044" src_o="http://payload.cargocollective.com/1/0/991/2004664/craigslist_redesign_edwintofslie_006_o.jpg" align="left" /> A realistic redesign attempt Larger Images (description of each below) Homepage Homepage Condensed Homepage Condensed Menu Classified Page Classified Page Preview Classified Page Traditional View The holy grail of redesign lore would have to be Craigslist. Trying to redesign a site that has been a part of millions of users lives throughout the past decade is not an easy task. Changing where things are laid out or how things are organized in a drastic way can spell death if not done in small steps over many years for a site like this. I have noticed over the years that for some reason, maybe it's our human nature to gravitate toward clutter, or the tendency to become pack rats, but for whatever reason, websites with lists of links in a tight space in organized rows or columns tend to perform really well and generates loyalists for life. Sites like Drudge, Reddit, Craigslist all have this type of feel. Lots of data, simplified into what first seems a cluttered grouping of tons of content that can set a designer's brain on fire, but for some reason, users find it easy to navigate, scan, use and fall in love with. When I went forward with designing a new Craigslist.com, I had to keep this at the forefront of my mind. How can I keep things the same, yet make them different and better. How can I organize things in a way that improves the ease of use, but does not scare away the loyalists... which by now is pretty much everyone. How can I redesign the style to be clean and modern yet classic and timeless. It was not an easy task, but I believe I came up with a pretty good, yet realistic solution. Image One [full size]. The Homepage centered on a 1280 or greater monitor. Colors, hierarchy, organization are king in this direction. Organizing the content into buckets such as account actions, search actions, title and location buckets, classified and location classified buckets was paramount. Then based on the buckets, how do they relate to each other to provide a natural connection, not only on the homepage, but also when you dive into the sub-pages. The subtle classic yellow, blue and light blue mixed with a dark gray gives the site a timeless yet modern feel. The mix of default solid link colors and new clean over-sized headers and search boxes give the user a sense of what is important, but also balances out the massive amounts of content that they border. Balance and hierarchy are key. The change location column is separate yet integrated. In the next frame you will also see that it is responsive. Image Two [full size]. The Homepage on a 1024 monitor. in a condensed browser the change location column is packaged into a drop down and disappears from the right side. This allows for a clean page without loss of functionality on smaller resolution computers. Image Three [full size]. The Homepage on a 1024 monitor with drop down. A simple click will give the user the ability to find any other location in the world. Image Four [full size]. Expandable yet responsive classifieds page with added features. If it aint broke, don't fix it. But that doesn't mean we can't improve on it. The organization created on the homepage carries through into the subpages. Title, headers, location, account and search function stay in the same area, yet are tailored to the needs of the page. An updated Sub Location tab system not only sets off nicely against the yellow but since the tab system is in the yellow, it lets us tie the idea of searching to a specific tab. Simple tweaks such as adding a new preview mode and save for later mode gives users the features they have been craving for. Putting the important links area to the side, yet high on the page, lets us bring the classifieds up higher, while still giving the important or related info a prominent place on the page. Image Five [full size]. Here we can see what the new preview options will look like when images are turned on. Slightly larger images with the ability to get an overview of the listing allows users to browse more, in less time. The save for later function will add the listing to their custom favorite page (seen in the account area) for easy access later. If the listing is deleted, it will also delete from their favorites with a simple notification. Image Six [full size]. Lastly, this is the traditional view with no images of a classified listing, but updated with the same features. That is pretty much it. This is only a concept, but through it, I hope it can help with how you tackle your projects that might have similar problems. Cheers http://portfolio.tofslie.com/More-Yellow http://portfolio.tofslie.com/following/portfolio.tofslie.com/More-Yellow Fri, 02 Sep 2011 04:13:24 +0000 Tofslie Inc. | The Creative Studio of Edwin Tofslie - Creative Direction, Art Direction, Ideas, Design, Interactive, Web and Maker of Fine Jerky. 1945232 <img src="http://payload.cargocollective.com/1/0/991/1945232/mY_home_006_et.jpg" border="0" width="670" height="767" width_o="1920" height_o="2200" src_o="http://payload.cargocollective.com/1/0/991/1945232/mY_home_006_et_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/991/1945232/myport.jpg" border="0" width="670" height="1014" width_o="1438" height_o="2177" src_o="http://payload.cargocollective.com/1/0/991/1945232/myport_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/991/1945232/myport2.jpg" border="0" width="670" height="890" width_o="1491" height_o="1982" src_o="http://payload.cargocollective.com/1/0/991/1945232/myport2_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/991/1945232/myport3.jpg" border="0" width="670" height="1015" width_o="1491" height_o="2260" src_o="http://payload.cargocollective.com/1/0/991/1945232/myport3_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/991/1945232/mY_company_002_et.jpg" border="0" width="670" height="820" width_o="1920" height_o="2352" src_o="http://payload.cargocollective.com/1/0/991/1945232/mY_company_002_et_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/991/1945232/mY_contact_003_et.jpg" border="0" width="670" height="657" width_o="1920" height_o="1884" src_o="http://payload.cargocollective.com/1/0/991/1945232/mY_contact_003_et_o.jpg" align="left" /> Worked to help my friend Jordan design his website and bring life to his rad 3D images. Final results turned out great. Check it out at http://moreyellow.com