the site.

so, i thought for my first behind the scenes look into the life of j. shipley photography i would share with you the process of building my completely custom SHOW IT site. i have gotten quite a few e-mails from various photographers asking how-to questions regarding my site and my branding. often, they have been shocked when i tell them i was able to create a fully custom and unique site all by myself using showit. but it's true, people. that is the power of showit. with some commitment, devotion, and creativity, you can create something the speaks to your brand and helps set you apart in that sea of template websites.

i admit that in the midst of all our busyness as photographers, it is tempting to slap up a quick template website (even when using showit) and call it good. this is cool in the sense that the style groups allow for you to at least get something online and makes sense for those of us who are not all that software and design savvy. but for me, i wanted to take the custom approach and start with a blank canvas. so that's what i did.

step one. inspiration. first off, i had to find inspiration, and i had to answer some essential questions about my brand. what are my colors? key words? core values? fonts? logo? goals? what is my target market? what is important to me? why? what inspires me? what sites & designs do i like? dislike? i starting thinking and i remembered something. i went to the Los Angeles County Museum of Art last summer with my friend shannon and had a blast. (y'all must got there. it is spectacular). so, i came across a photography exhibition that simply blew me away. it was a polaroid series by an amazing photographer, Philip-Lorca diCorcia. not only did i love his work but also the display itself. since photographs of the photographs were not allowed, i took a mental image of it and purposed to recreate that someday, somehow, somewhere. that very exhibition inspired my site design and a display at my art show. so i got that polaroid gig on the drawing board. good start. and i discovered recently that i love the conversation between the old and new, the modern and the antique. so how could i bring that into my brand and into my website? polaroids? with a modern layout? negative space? and a few modern fonts perhaps?

step two. colors. i love red. a lot. so it is my primary brand color, but i use it as an accent. or for things i really want to pop. you will notice that such is the case with the use of red on my site. brown. i used to like the combo of black, red and white. but i decided it was a little overdone and a bit sterile and distant. and boring. but a dark chocolate brown. now that is just perfect. organic and earthy. rich and elegant. and choclate-y. pair that with a deep crimson red, add in a nice antique white for some contrast and we are onto something, jeffrey.

step three. typography. i used three fonts on my site. geosans light is my heading font. courier is my secondary font that i used for my menu and copy. the first being a more modern san serif font and the latter being a old school, serif, typewriter font. again, that conversation between the old and the new. and everything (save for the headings) is lowercase on purpose. and you'll notice that throughout the brand: on the blog, in e-mails, and for smugmug gallery titles. i am not fighting with the shift key. i know how to use it. haha. but, i choose not to in most cases. also, you may have noticed my penchant for periods. that's all on purpose. i write with lots of periods. and i put them in grammatically incorrect places. take that grammar book. and i have the whole "j." thing going on too. j period. lowercase j mind you. (the dot is important and period are important, people) so, i carried that motif throughout the design. that is why the menu is rotated 90 degrees counterclockwise. i wanted all those periods in a line. and then i took that period pattern and infused it subtly into other places on the site. notice red dots anywhere?

step four. layouts. i knew i wanted something clean and modern. and different, of course. that's how i roll. and it had to reflect my brand. j. shipley photography is all about custom-tailored shoots and products, so the site had to be the same. i used that mental image of the LACMA display as a base for the layout. then, i wanted lots of full-screen photo galleries but didn't want the basic design to be busy or overwhelming. i wanted each component to be intentional and every aspect designed. so i had to play around a ton. i had to constantly experiment with different layouts, and finally, committed to the one you see today. lots of negative space. clean. simple. balanced.


step five. content. i spent hours going through files and searching for my best work. the most compelling and interesting. the photos that best reflected my style and brand. i do have a lot of images on my site, but i didn't put up everything i have ever shot or even every good shot. i wanted all my copy to be informative, but also have me in it. my personality. my humor. my writing style. i wanted people to get a better sense of who i am by reading about my story and learning random factoids about me. and of course i wanted visitors to be able to see me too. hence, the video (which i will discuss in depth in the next post) and all the photos. all of the photos on the philosophy page connect to the text. they are personal and meaningful photos to me.

step six. navigation, organization & animation. the portfolio section of my site primarily consists of 7 different galleries, some of which have multiple sub-galleries. and then i have informational pages as well. i spent quite some time devising a way to organize all the content in a user friendly way. while i was tempted to do tons of cool animation, i decided it would get annoying on the user end of things after a while. there is nothing worse than having to wait for something to re-animate each time you hit the back button. i wanted simple and clean animation and transitions. hence, the fact that i have quite fade-out/fade-in page changes and only animated my intro and menu. i wanted my menu to be a design element. i debated for a LONG time as to whether or not it was TOO challenging to read since it was sideways and quite small. i asked lots of people too in beta testing and eventually decided it was too strong of a design element to part with simply because it was a little tricky to read. sure it requires a bit more commitment on the user, but i think most people don't hate me for it (or perhaps i am disillusioned. ha.).

step seven. beta test. i had my art/design friends review the site and consult me on the design. i ran beta tests with non-photographer friends and had them provide feedback on ease of use, navigation and overall impression. i worked out all the bugs and made sure all the links worked and that everything was perfected before it went live.

step eight. share. i told all my friends about my site. i sent out e-mails. i tweeted about it. i posted links all over my facebook. but first, i created some mystery and anticipation. i made 'em anxious for that launch date. i tried to get people excited about it.

step nine. analyze. i watched my google analytics like a hawk in the weeks before and after my launch. i studied the stats. strategized ways to reach more people. discovered what works and what doesn't. and i watched that traffic increase. since it went live a month ago, my site has had over 7000 hits from around the globe, with 88,000 page views. plus i have had over 2500 hits on my blog. (that is up nearly 2000% percent from my previous web traffic). one of my goals was to reach every state in the US. done and done. now, a lot of those stats are in large part due to david jay and jasmine star's shout-outs, so keep that in mind and take it for what it's worth. but nonetheless, having a unique, custom site made and HUGE difference in my web traffic and in my business.


tips (in no particular order): 1) keep it simple. 2) pay attention to the details & ensure that elements are proportionate, aligned properly and well-balanced. 3) don't necessarily neglect function for form; find a happy medium. 4) infuse elements of your branding into your website. 5) be clear on what those elements are. 6). don't get crazy with animation. that can get annoying. 6) use the SHOW IT support staff. they are fantastic. 7) integrate video into your site. (and when you do use, heschle video productions. 8) pimp your blog with the showit embed feature. 9) make sure your blog, smugmug, & site all match and are a cohesive unit. 10) do beta testing with friends, family, colleagues, etc. before you go live. have them give you honest feedback. 11) create buzz about your site. give 'em something to talk about. 12) be you. you site should reflect your brand, but your brand should reflect you. be authentic and real.

all and all, you can imagine that i logged some serious man-hours building my site. i worked long and hard to get it where it is. now, i realize that many of my fellow photographers and creatives are thinking "neat-o jeff! good for you. but i don't have that kind of time. or energy. or patience. or desire." that's cool. no worries. i will tell you right now, you have options. if you're like me and are design and software savvy, you can allot some time to your site, work at it, and come up with something bitchin'. or you can work from the style groups and tweak things here or there and make it your own. or you can hire someone else (such as myself ;) do it for you. all are commendable and accessible to you and quite affordable with Show It either route you go. but you must make your presence a HUGE priority. today. especially in the media driven culture. you must. so, head over to showitfast.com and sign-up today.

okay, i know that was long, but i wanted to be thorough. post a comment if you have any questions. and i will do my best to answer them all either personally or on the blog. aiight?

happy day.